Create dashboard page

web-v2/src/App.tsx

@@ -8,6 +8,7 @@ import { AppProviders } from '@/providers/AppProviders'
 import ErrorBoundary from './components/ErrorBoundary'
 import BorrowPage from './pages/Borrow'
 import DashboardPage from './pages/Dashboard'
+import DemoPage from './pages/Demo'
 import DesignSystemPage from './pages/DesignSystem'
 import SupplyPage from './pages/Supply'
 
@@ -35,6 +36,10 @@ const router = createBrowserRouter([
               path: RoutePath.DesignSystem,
               element: <DesignSystemPage />,
             },
+            {
+              path: RoutePath.Demo,
+              element: <DemoPage />,
+            },
           ]
         : []),
     ],

web-v2/src/api/indexer/hooks.ts

@@ -1,4 +1,9 @@
-import { useQuery, type UseQueryResult } from '@tanstack/react-query'
+import {
+  type QueryKey,
+  useQuery,
+  type UseQueryOptions,
+  type UseQueryResult,
+} from '@tanstack/react-query'
 
 import { GC_TIME_MS, STALE_TIME_MS } from '../staleTime'
 import {
@@ -8,17 +13,47 @@ import {
   fetchOfferParticipants,
   fetchOfferParticipantsHistory,
   fetchOffers,
+  fetchOffersBatch,
   fetchOfferUtxos,
   type ListOffersParams,
 } from './methods'
 import { offersQueryKeys } from './queryKeys'
 import type { OfferDetails, OfferParticipant, OfferShort, OfferUtxo } from './schemas'
 
-export function useOffers(params: ListOffersParams = {}): UseQueryResult<OfferShort[]> {
+export function useOffers(
+  params: ListOffersParams = {},
+  options: {
+    refetchInterval?: number
+    placeholderData?: UseQueryOptions<
+      OfferShort[],
+      Error,
+      OfferShort[],
+      QueryKey
+    >['placeholderData']
+  } = {},
+): UseQueryResult<OfferShort[]> {
   return useQuery({
     queryKey: offersQueryKeys.list(params),
     queryFn: ({ signal }) => fetchOffers(params, { signal }),
     staleTime: STALE_TIME_MS.medium,
+    refetchInterval: options.refetchInterval,
+    placeholderData: options.placeholderData,
+  })
+}
+
+// Fetch offers by exact id list (POST /offers/batch). Use for the user's own
+// offers, where the id set is known and must be resolved fully — unlike the
+// paginated `useOffers`, which only returns one page.
+export function useOffersBatch(
+  ids: string[],
+  options: { refetchInterval?: number } = {},
+): UseQueryResult<OfferDetails[]> {
+  return useQuery({
+    queryKey: offersQueryKeys.batch(ids),
+    queryFn: ({ signal }) => fetchOffersBatch(ids, { signal }),
+    staleTime: STALE_TIME_MS.realtime,
+    refetchInterval: options.refetchInterval,
+    enabled: ids.length > 0,
   })
 }
 
@@ -59,20 +94,28 @@ export function useOfferParticipantsHistory(offerId: string): UseQueryResult<Off
   })
 }
 
-export function useOfferIdsByScript(scriptPubkeyHex: string): UseQueryResult<string[]> {
+export function useOfferIdsByScript(
+  scriptPubkeyHex: string,
+  options: { refetchInterval?: number } = {},
+): UseQueryResult<string[]> {
   return useQuery({
     queryKey: offersQueryKeys.byScript(scriptPubkeyHex),
     queryFn: ({ signal }) => fetchOfferIdsByScript(scriptPubkeyHex, { signal }),
     staleTime: STALE_TIME_MS.realtime,
+    refetchInterval: options.refetchInterval,
     enabled: !!scriptPubkeyHex,
   })
 }
 
-export function useOfferIdsByBorrowerPubkey(borrowerPubkeyHex: string): UseQueryResult<string[]> {
+export function useOfferIdsByBorrowerPubkey(
+  borrowerPubkeyHex: string,
+  options: { refetchInterval?: number } = {},
+): UseQueryResult<string[]> {
   return useQuery({
     queryKey: offersQueryKeys.byBorrower(borrowerPubkeyHex),
     queryFn: ({ signal }) => fetchOfferIdsByBorrowerPubkey(borrowerPubkeyHex, { signal }),
     staleTime: STALE_TIME_MS.realtime,
+    refetchInterval: options.refetchInterval,
     enabled: !!borrowerPubkeyHex,
   })
 }

web-v2/src/api/indexer/methods.ts

@@ -41,11 +41,17 @@ function postBatch<Schema extends z.ZodTypeAny>(
   })
 }
 
+export type SortDir = 'asc' | 'desc'
+
 export interface ListOffersParams {
   status?: OfferStatus
   asset?: string
   limit?: number
   offset?: number
+  // Server-side sort. NOTE: backend does not honor these yet — sent as a
+  // forward-compatible convention; results are currently returned unsorted.
+  sortBy?: string
+  sortDir?: SortDir
 }
 
 function toQueryParams(params: ListOffersParams): Record<string, string> {
@@ -54,6 +60,8 @@ function toQueryParams(params: ListOffersParams): Record<string, string> {
   if (params.asset) queryParams.asset = params.asset
   if (params.limit !== undefined) queryParams.limit = String(params.limit)
   if (params.offset !== undefined) queryParams.offset = String(params.offset)
+  if (params.sortBy) queryParams.sort_by = params.sortBy
+  if (params.sortDir) queryParams.sort_dir = params.sortDir
   return queryParams
 }
 

web-v2/src/api/indexer/queryKeys.ts

@@ -4,9 +4,10 @@ import type { ListOffersParams } from './methods'
 
 export const offersQueryKeys = {
   all: ['offers'] as const,
-  list: ({ status, asset, limit, offset }: ListOffersParams) =>
-    ['offers', 'list', status, asset, limit, offset] as const,
+  list: ({ status, asset, limit, offset, sortBy, sortDir }: ListOffersParams) =>
+    ['offers', 'list', status, asset, limit, offset, sortBy, sortDir] as const,
   detail: (offerId: string) => ['offers', 'detail', offerId] as const,
+  batch: (ids: string[]) => ['offers', 'batch', [...ids].sort()] as const,
   utxos: (offerId: string) => ['offers', 'utxos', offerId] as const,
   participants: (offerId: string) => ['offers', 'participants', offerId] as const,
   participantsHistory: (offerId: string) => ['offers', 'participants-history', offerId] as const,

web-v2/src/components/AppLayout.tsx

@@ -1,36 +1,73 @@
+import { useCallback } from 'react'
 import { Link, Outlet } from 'react-router-dom'
 
+import ArrowSquareOutIcon from '@/components/icons/ArrowSquareOutIcon'
+import BellIcon from '@/components/icons/BellIcon'
+import { UiButton } from '@/components/ui/UiButton'
+import { WalletButton } from '@/components/WalletButton'
 import { env } from '@/constants/env'
 import { RoutePath } from '@/constants/routes'
 
+const ABOUT_SIMPLICITY_URL = 'https://github.com/BlockstreamResearch/simplicity'
+
 const NAV = [
   { to: RoutePath.Dashboard, label: 'Dashboard' },
   { to: RoutePath.Borrow, label: 'Borrow' },
   { to: RoutePath.Supply, label: 'Supply' },
-  ...(env.DEV ? [{ to: RoutePath.DesignSystem, label: 'System' }] : []),
+  ...(env.DEV
+    ? [
+        { to: RoutePath.DesignSystem, label: 'System' },
+        { to: RoutePath.Demo, label: 'Demo' },
+      ]
+    : []),
 ]
 
 export default function AppLayout() {
+  const openAbout = useCallback(() => {
+    window.open(ABOUT_SIMPLICITY_URL, '_blank', 'noopener,noreferrer')
+  }, [])
+
   return (
-    <main className='bg-background text-foreground min-h-screen'>
-      <div className='mx-auto flex w-full max-w-5xl flex-col gap-8 px-4 py-8'>
-        <header className='flex items-center justify-between'>
-          <h1 className='text-h2'>Lending</h1>
-          <nav className='flex flex-wrap items-center gap-6 text-sm font-medium'>
+    <main className='bg-surface text-foreground min-h-screen'>
+      <div className='mx-auto flex w-full max-w-[1280px] flex-col gap-8 px-4 pt-6 pb-12 sm:px-8 lg:gap-10 lg:px-20 lg:pt-10 lg:pb-20'>
+        <header className='flex flex-wrap items-center justify-between gap-4'>
+          <Link to={RoutePath.Dashboard} className='flex flex-col gap-1.5'>
+            <span className='text-3xl leading-none font-black tracking-tight uppercase sm:text-4xl lg:text-[43px] lg:leading-[40px]'>
+              Lending
+            </span>
+            <span className='text-foreground text-xs font-medium tracking-[0.16em] uppercase'>
+              powered by Simplicity
+            </span>
+          </Link>
+
+          <div className='flex flex-wrap items-center gap-3'>
+            <UiButton variant='ghost' onPress={openAbout}>
+              About Simplicity
+              <ArrowSquareOutIcon className='size-4' />
+            </UiButton>
+            {/* Notifications not wired yet — disabled placeholder. */}
+            <UiButton variant='primary' isIconOnly isDisabled aria-label='Notifications'>
+              <BellIcon className='size-5' />
+            </UiButton>
+            <WalletButton />
+          </div>
+        </header>
+
+        <Outlet />
+
+        <footer className='text-muted flex flex-col gap-3 text-xs'>
+          <nav className='flex flex-wrap items-center gap-4 font-medium'>
             {NAV.map(({ to, label }) => (
               <Link key={to} className='text-accent hover:underline' to={to}>
                 {label}
               </Link>
             ))}
           </nav>
-        </header>
-
-        <Outlet />
-
-        <footer className='text-muted text-xs'>
-          <p>Network: {env.VITE_NETWORK}</p>
-          <p>API URL: {env.VITE_API_URL}</p>
-          <p>Esplora Base URL: {env.VITE_ESPLORA_BASE_URL}</p>
+          <div>
+            <p>Network: {env.VITE_NETWORK}</p>
+            <p>API URL: {env.VITE_API_URL}</p>
+            <p>Esplora Base URL: {env.VITE_ESPLORA_BASE_URL}</p>
+          </div>
         </footer>
       </div>
     </main>

web-v2/src/components/WalletButton.tsx

@@ -0,0 +1,18 @@
+import { UiButton } from '@/components/ui/UiButton'
+import { DEFAULT_WALLET_TYPE } from '@/lib/wallet-core/types'
+import { useWallet } from '@/providers/wallet/useWallet'
+import { truncateAddress } from '@/utils/format'
+
+export function WalletButton() {
+  const { connectionStatus, receiveAddress, connect } = useWallet()
+
+  if (connectionStatus === 'ready' && receiveAddress) {
+    return <UiButton variant='secondary'>{truncateAddress(receiveAddress)}</UiButton>
+  }
+
+  return (
+    <UiButton variant='primary' onPress={() => connect(DEFAULT_WALLET_TYPE)}>
+      Connect Wallet
+    </UiButton>
+  )
+}

web-v2/src/components/icons/ArrowSquareOutIcon.tsx

@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react'
+
+export default function ArrowSquareOutIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill='none'
+      role='presentation'
+      focusable='false'
+      aria-hidden='true'
+      viewBox='0 0 24 24'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'
+        stroke='currentColor'
+        strokeWidth='1.75'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}

web-v2/src/components/icons/ArrowSquareUpIcon.tsx

@@ -0,0 +1,24 @@
+import type { SVGProps } from 'react'
+
+export default function ArrowSquareUpIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill='none'
+      role='presentation'
+      focusable='false'
+      aria-hidden='true'
+      viewBox='0 0 24 24'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <rect x='3' y='3' width='18' height='18' rx='3' stroke='currentColor' strokeWidth='1.75' />
+      <path
+        d='M12 16V8m0 0-3 3m3-3 3 3'
+        stroke='currentColor'
+        strokeWidth='1.75'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}

web-v2/src/components/icons/ArrowsRotateIcon.tsx

@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react'
+
+export default function ArrowsRotateIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill='none'
+      role='presentation'
+      focusable='false'
+      aria-hidden='true'
+      viewBox='0 0 24 24'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M20 4v6h-6M4 20v-6h6M4 10a8 8 0 0 1 14-3l2 3M20 14a8 8 0 0 1-14 3l-2-3'
+        stroke='currentColor'
+        strokeWidth='1.75'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}

web-v2/src/components/icons/BellIcon.tsx

@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react'
+
+export default function BellIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill='none'
+      role='presentation'
+      focusable='false'
+      aria-hidden='true'
+      viewBox='0 0 24 24'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M6 9a6 6 0 1 1 12 0c0 4 1.5 5.5 2 6.5H4c.5-1 2-2.5 2-6.5ZM9.5 19a2.5 2.5 0 0 0 5 0'
+        stroke='currentColor'
+        strokeWidth='1.75'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}

web-v2/src/components/icons/ChevronDownIcon.tsx

@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react'
+
+export default function ChevronDownIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill='none'
+      role='presentation'
+      focusable='false'
+      aria-hidden='true'
+      viewBox='0 0 24 24'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M6 9l6 6 6-6'
+        stroke='currentColor'
+        strokeWidth='1.75'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}