+ {walletIcon && (
+
+ )
+}
+```
+
+- [ ] **Step 5: Type-check**
+
+```bash
+cd app && yarn typecheck
+```
+
+Fix any remaining import issues (e.g. if `connect-button.tsx` imports from `@/components/connector/shared/hidden-wallet-icons`, fetch that file too or stub it).
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add app/src/components/connector/
+git commit -m "feat: add connector wallet components (ConnectButton, WalletModal)"
+```
+
+---
+
+### Task 11: App UI Primitives
+
+**Files:** `app/src/components/ui/Button.tsx`, `Badge.tsx`, `FieldRow.tsx`, `Toast.tsx`
+
+These use inline styles + CSS variables. No Tailwind.
+
+- [ ] **Step 1: Create `app/src/components/ui/Button.tsx`**
+
+```tsx
+import type { CSSProperties, ReactNode, ButtonHTMLAttributes } from 'react'
+
+export type ButtonVariant = 'primary' | 'outline' | 'danger' | 'ghost'
+
+interface ButtonProps extends ButtonHTMLAttributes
+ 
+ {walletName}
+
+ )}
+
+ CONNECTED WALLET
+
+
+ {selectedAccount}
+
+
+
+
+
+ )
+}
+
+export function MonoChip({
+ value,
+ onCopy,
+ onClick,
+ sub,
+}: {
+ value: string
+ onCopy?: () => void
+ onClick?: () => void
+ sub?: string
+}) {
+ function copy() {
+ navigator.clipboard.writeText(value)
+ onCopy?.()
+ }
+ return (
+
+ {label}
+
+ {children}
+
+
+ )
+}
+```
+
+- [ ] **Step 4: Create `app/src/components/ui/Toast.tsx`**
+
+```tsx
+'use client'
+
+import { createContext, useCallback, useContext, useState, type ReactNode } from 'react'
+
+const ToastCtx = createContext<(msg: string) => void>(() => {})
+
+export function useToast() {
+ return useContext(ToastCtx)
+}
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+ const [msg, setMsg] = useState('')
+
+ const show = useCallback((m: string) => {
+ setMsg(m)
+ setTimeout(() => setMsg(''), 2800)
+ }, [])
+
+ return (
+
+
+ {value}
+
+
+
+ {sub && {sub}
}
+
+
+ {msg}
+
+ )}
+ Loading listings…
+ }
+ if (error) {
+ return {String(error)}
+ }
+
+ const FILTERS: { key: Filter; label: string }[] = [
+ { key: 'all', label: 'All' },
+ { key: 'active', label: 'Active' },
+ { key: 'inactive', label: 'Inactive' },
+ ]
+
+ return (
+
+ {/* Header */}
+
+ )
+}
+```
+
+Note: `metadataUri` is used as the display name for now. In a production app you'd fetch JSON from the URI. The name column shows the URI truncated or the PDA abbreviation.
+
+- [ ] **Step 3: Create `app/src/app/listings/page.tsx`**
+
+```tsx
+import { ListingsTable } from '@/components/ListingsTable'
+
+export default function ListingsPage() {
+ return
+
+
+ {/* Table */}
+
+
+ Listings
++ {listings.length} ListingAccount PDAs · solisting program +
+
+ setSellerFilter(e.target.value)}
+ placeholder="Filter by seller address"
+ style={{ height: 38, width: 220, padding: '0 13px', background: 'var(--bg3)', border: '1px solid var(--bd)', borderRadius: 10, fontSize: 13, fontFamily: 'var(--font-mono)', outline: 'none' }}
+ />
+
+
+ {FILTERS.map((f) => (
+
+ ))}
+
+
+
+
+
+
+ {rows.length === 0 && (
+ LISTING
SELLER
PRICE
AVAIL / TOTAL
ORDERS
STATUS
+
+ No listings match these filters.
+
+ )}
+
+ {rows.map((l) => {
+ const avail = Number(l.data.quantity) - Number(l.data.quantityReserved)
+ const statusKey = l.data.isActive ? 'active' : 'inactive'
+ const sc = STATUS_COLORS[statusKey]
+ return (
+ router.push(`/listing/${l.address}`)}
+ style={{ display: 'grid', gridTemplateColumns: '2.4fr 1.1fr 1fr 1.1fr .8fr .9fr', gap: 14, padding: '15px 20px', borderBottom: '1px solid var(--bdSoft)', cursor: 'pointer', alignItems: 'center' }}
+ >
+
+ )
+ })}
+
+
+
+ {l.data.metadataUri || abbrev(l.address)}
+
+
+ #{String(l.data.listingId)} · {abbrev(l.address)}
+
+
+ {abbrev(l.data.seller)}
+
+ {priceLabel(l.data)}
+
+ {avail}
+ / {String(l.data.quantity)}
+
+ {String(l.data.quantityReserved)}
+
+ {l.data.isActive ? 'Active' : 'Inactive'}
+
+ Loading…
+ if (error || !listing) return Listing account not found.
+
+ const d = listing.data
+ const avail = Number(d.quantity) - Number(d.quantityReserved)
+ const availPct = d.quantity > 0n ? `${(avail / Number(d.quantity)) * 100}%` : '0%'
+ const reservedPct = d.quantity > 0n ? `${(Number(d.quantityReserved) / Number(d.quantity)) * 100}%` : '0%'
+ const sc = STATUS_COLORS[d.isActive ? 'active' : 'inactive']
+
+ const isSeller = walletAddress && walletAddress === d.seller
+ const canPlace = !isSeller && d.isActive && avail > 0 && walletAddress
+
+ function priceStr() {
+ const cur = d.canonicalCurrency
+ if (cur.__kind === 'Sol') return fmtSol(d.price)
+ return fmtTok(d.price, (cur as { decimals: number }).decimals, 'SPL')
+ }
+
+ const escrowStateCounts: Record
+
+
+
+ )
+}
+```
+
+- [ ] **Step 4: Create `app/src/app/listing/[pk]/page.tsx`**
+
+```tsx
+'use client'
+
+import { use } from 'react'
+import { useWallet } from '@solana/connector/react'
+import { ListingDetail } from '@/components/ListingDetail'
+import type { Address } from '@solisting/sdk'
+
+export default function ListingPage({ params }: { params: Promise<{ pk: string }> }) {
+ const { pk } = use(params)
+ const { account } = useWallet()
+
+ return (
+
+ {d.isActive ? 'Active' : 'Inactive'}
+
+
+
+
+
+ LISTING ACCOUNT · #{String(d.listingId)}
+
+ + {d.metadataUri || abbrev(pk)} +
+
+ {/* Left: account fields */}
+
+
+ {/* Orders table */}
+
+ #{String(d.listingId)}
+ {}} onClick={() => router.push(`/search?q=${d.seller}`)} /> {priceStr()}
+
+
+ {d.canonicalCurrency.__kind === 'Sol' ? 'SOL (native)' : `SPL · ${abbrev((d.canonicalCurrency as {mint: string}).mint)}`}
+
+
+ {d.canonicalOracle && (
+
+ navigator.clipboard.writeText(d.canonicalOracle!)} />
+
+ )}
+ {d.isActive ? 'Active' : 'Inactive'}
+
+ {/* Right: qty + actions */}
+ ACCOUNT FIELDS
+ METADATA URI
+
+ {d.metadataUri}
+
+
+ )}
+
+ ALT CURRENCIES
+ {d.altCurrencies.length === 0
+ ? None configured.
+ : d.altCurrencies.map((alt, i) => (
+
+
+ {alt.currency.__kind === 'Sol' ? 'SOL' : `SPL · ${abbrev((alt.currency as {mint:string}).mint)}`}
+
+
+ {alt.usdOracle ? abbrev(alt.usdOracle) : 'stablecoin ($1.00)'}
+
+
+ ))
+ }
+
+ ACCEPTED RESOLVERS
+ {d.acceptedResolvers.length === 0
+ ? Empty — any registered resolver is accepted.
+ : d.acceptedResolvers.map((r) => (
+ router.push(`/resolver/${r}`)} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '11px 13px', background: 'var(--bg3)', borderRadius: 9, marginBottom: 7, cursor: 'pointer' }}>
+ {abbrev(r)}
+
+ ))
+ }
+
+
+
+
+
+ QUANTITY
+
+
+
+
+
+
+
+
+
+ {avail}
available
{String(d.quantityReserved)}
reserved
{String(d.quantity)}
total
+
+ ACTIONS
+ {isSeller && (
+
+
+
+
+ )}
+ {canPlace && }
+ {!walletAddress && Connect a wallet to place an order or manage this listing.
}
+ {walletAddress && !isSeller && !canPlace && No actions available — listing is inactive or out of stock.
}
+ ORDERS ON THIS LISTING
+
+
+
+
+ {orders.length === 0 && ORDER
BUYER
AMOUNT
ORDER ID
ESCROW ID
+ No orders yet.
}
+ {orders.map((o) => (
+ router.push(`/order/${o.address}`)}
+ style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr', gap: 12, padding: '14px 20px', borderBottom: '1px solid var(--bdSoft)', cursor: 'pointer', alignItems: 'center' }}
+ >
+
+ ))}
+ {abbrev(o.address)}
+ {abbrev(o.data.buyer)}
+ {fmtSol(o.data.amount)}
+ #{String(o.data.orderId)}
+ #{String(o.data.escrowId)}
+
+
+ )
+}
+```
+
+- [ ] **Step 3: Create `app/src/components/OrderDetail.tsx`**
+
+```tsx
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { useOrder } from '@/hooks/useOrder'
+import { EscrowStateMachine } from '@/components/EscrowStateMachine'
+import { FieldRow, MonoChip } from '@/components/ui/FieldRow'
+import { Badge, STATUS_COLORS } from '@/components/ui/Badge'
+import { Button } from '@/components/ui/Button'
+import { abbrev, fmtSol, relTime } from '@/lib/format'
+import type { Address } from '@solisting/sdk'
+
+interface Props {
+ pk: Address
+ walletAddress?: string | null
+ // Write action handlers — provided in Part 4
+ onAccept?: () => void
+ onReject?: () => void
+ onCancel?: () => void
+ onCloseStale?: () => void
+ onComplete?: () => void
+ onDispute?: () => void
+}
+
+export function OrderDetail({ pk, walletAddress, onAccept, onReject, onCancel, onCloseStale, onComplete, onDispute }: Props) {
+ const router = useRouter()
+ const { data, isLoading, error } = useOrder(pk)
+
+ if (isLoading) return ESCROW STATE MACHINE · descro
+
+ {STEPS.map((step, i) => {
+ const done = i < currentIdx
+ const active = i === currentIdx
+ const fill = done ? 'var(--acc2)' : active ? 'var(--acc)' : 'var(--bg3)'
+ const ring = done ? 'var(--acc2)' : active ? 'var(--acc)' : 'var(--bd)'
+ const txt = active ? 'var(--tx)' : done ? 'var(--acc2light)' : 'var(--mut)'
+ return (
+
+ {branch && (
+
+
+ )
+ })}
+
+
+ {i < STEPS.length - 1 && (
+
+ )}
+
+ {done ? '✓' : i + 1}
+
+ {step.label}
+
+ {branch.label}
+ {branch.desc}
+
+ )}
+ Loading…
+ if (error || !data) return Order account not found.
+
+ const { order, escrow } = data
+ const od = order.data
+ const ed = escrow?.data
+
+ // Determine escrow state label for badge
+ const escrowStateKey = ed?.state?.__kind ?? 'Unknown'
+ const sc = STATUS_COLORS[
+ escrowStateKey === 'AwaitingSellerConfirm' ? 'awaitingConfirm' :
+ escrowStateKey === 'Active' ? 'active' :
+ escrowStateKey === 'Disputed' ? 'disputed' :
+ escrowStateKey === 'Complete' ? 'complete' : 'cancelled'
+ ] ?? STATUS_COLORS.cancelled
+
+ const isSeller = walletAddress === od.seller
+ const isBuyer = walletAddress === od.buyer
+
+ return (
+
+
+
+
+ )
+}
+```
+
+Note: `od.seller` — check the exact field name from the codama-generated `OrderAccount` type after Task 3. If the seller is stored on the ListingAccount (not OrderAccount), fetch it from the listing. The descro `EscrowAccount` has `seller` and `buyer` directly.
+
+- [ ] **Step 4: Create `app/src/app/order/[pk]/page.tsx`**
+
+```tsx
+'use client'
+
+import { use } from 'react'
+import { useWallet } from '@solana/connector/react'
+import { OrderDetail } from '@/components/OrderDetail'
+import type { Address } from '@solisting/sdk'
+
+export default function OrderPage({ params }: { params: Promise<{ pk: string }> }) {
+ const { pk } = use(params)
+ const { account } = useWallet()
+ return
+ {escrowStateKey}
+
+
+
+
+ ORDER ACCOUNT · #{String(od.orderId)}
+ {abbrev(pk)}
+
+ {/* Order fields */}
+
+
+ {/* Actions */}
+
+ #{String(od.orderId)}
+ router.push(`/listing/${od.listingAccount}`)} onCopy={() => navigator.clipboard.writeText(od.listingAccount)} /> navigator.clipboard.writeText(od.buyer)} /> {fmtSol(od.amount)}
+ #{String(od.escrowId)}
+ navigator.clipboard.writeText(od.escrowAccount)} />
+
+ {/* Escrow fields */}
+ ORDER ACCOUNT · solisting
+
+ {escrowStateKey} navigator.clipboard.writeText(ed.seller)} /> navigator.clipboard.writeText(ed.buyer)} /> {fmtSol(ed.amount)}
+ {ed.resolver && router.push(`/resolver/${ed.resolver}`)} onCopy={() => navigator.clipboard.writeText(ed.resolver!)} />
+ ESCROW ACCOUNT · descro
+ {!ed
+ ? Could not load escrow account.
+ : <>
+
+
+ AVAILABLE INSTRUCTIONS
+ {!walletAddress && Connect a wallet to act on this order.
}
+ {walletAddress && (
+
+ {isSeller && escrowStateKey === 'AwaitingSellerConfirm' && onAccept && }
+ {isSeller && escrowStateKey === 'AwaitingSellerConfirm' && onReject && }
+ {isBuyer && escrowStateKey === 'AwaitingSellerConfirm' && onCancel && }
+ {isBuyer && escrowStateKey === 'Active' && onComplete && }
+ {(isSeller || isBuyer) && escrowStateKey === 'Active' && onDispute && }
+ {(escrowStateKey === 'Complete' || escrowStateKey === 'Cancelled') && onCloseStale && }
+
+ )}
+ Loading…
+
+ return (
+
+
+ )
+}
+```
+
+Note: `e.data.state.__kind` assumes codama renders the Rust `EscrowState` enum with a `__kind` discriminant. Inspect `@descro/sdk`'s generated `escrowState.ts` type and adjust if it uses a different shape.
+
+- [ ] **Step 3: Create `app/src/app/escrows/page.tsx`**
+
+```tsx
+import { EscrowsTable } from '@/components/EscrowsTable'
+export default function EscrowsPage() { return
+
+ Escrows
++ {escrows.length} EscrowAccount PDAs · descro program +
+
+ {FILTER_OPTS.map((f) => {
+ const count = f.key === 'all' ? escrows.length : escrows.filter((e) => e.data.state.__kind === f.key).length
+ const active = filter === f.key
+ return (
+
+ )
+ })}
+
+
+
+
+
+ {rows.length === 0 && ESCROW ID
SELLER
BUYER
AMOUNT
RESOLVER
STATE
+ No escrows in this state.
}
+ {rows.map((e) => {
+ const sc = stateColor(e.data.state.__kind)
+ return (
+ router.push(`/search?q=${e.address}`)}
+ style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr 1fr 1fr 1.2fr .9fr', gap: 12, padding: '14px 20px', borderBottom: '1px solid var(--bdSoft)', cursor: 'pointer', alignItems: 'center' }}
+ >
+ {e.data.state.__kind}
+
+ )
+ })}
+ #{String(e.data.escrowId)}
+ {abbrev(e.data.seller)}
+ {abbrev(e.data.buyer)}
+ {fmtSol(e.data.amount)}
+ {e.data.resolver ? abbrev(e.data.resolver) : '—'}
+ Loading…
+
+ return (
+
+
+ )
+}
+```
+
+Note: Field names (`d.name`, `d.feeBps`, `d.ruledForBuyer`, `d.ruledForSeller`, `d.resolverType`, `d.acceptancePolicy`) come from the `@descro/sdk` generated `ResolverEntry` type. Verify them against `descro/sdk/src/generated/descro_ext_resolvers/accounts/resolverEntry.ts` and adjust.
+
+- [ ] **Step 3: Create `app/src/components/ResolverDetail.tsx`**
+
+```tsx
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { useResolvers } from '@/hooks/useResolvers'
+import { FieldRow, MonoChip } from '@/components/ui/FieldRow'
+import { abbrev } from '@/lib/format'
+import type { Address } from '@solisting/sdk'
+
+export function ResolverDetail({ pk }: { pk: Address }) {
+ const router = useRouter()
+ const { data: resolvers = [], isLoading } = useResolvers()
+ const r = resolvers.find((x) => x.address === pk)
+
+ if (isLoading) return
+
+ Resolver Registry
++ {resolvers.length} ResolverEntry PDAs · descro_ext_resolvers program +
+
+ {resolvers.map((r) => {
+ const d = r.data
+ const total = Number(d.ruledForBuyer ?? 0) + Number(d.ruledForSeller ?? 0)
+ const buyerPct = total > 0 ? Math.round(Number(d.ruledForBuyer ?? 0) / total * 100) : 0
+ const sellerPct = total > 0 ? 100 - buyerPct : 0
+ const feePct = (Number(d.feeBps ?? 0) / 100).toFixed(2)
+ return (
+
+ router.push(`/resolver/${r.address}`)}
+ style={{ background: 'var(--bg2)', border: '1px solid var(--bd)', borderRadius: 'var(--radius)', padding: '20px 22px', cursor: 'pointer' }}
+ >
+
+ )
+ })}
+ {resolvers.length === 0 &&
+
+
+
+ {feePct}% fee
+ {d.name ?? abbrev(r.address)}
+ {abbrev(r.address)}
+
+ {d.resolverType && {String(d.resolverType.__kind)}}
+ {d.acceptancePolicy && {String(d.acceptancePolicy.__kind)}}
+
+
+
+
+
+
+ {total}
resolved
{buyerPct}%
for buyer
{sellerPct}%
for seller
No resolvers registered.
}
+ Loading…
+ if (!r) return Resolver entry not found.
+
+ const d = r.data
+ const total = Number(d.ruledForBuyer ?? 0) + Number(d.ruledForSeller ?? 0)
+ const buyerPct = total > 0 ? Math.round(Number(d.ruledForBuyer ?? 0) / total * 100) : 0
+ const sellerPct = total > 0 ? 100 - buyerPct : 0
+
+ return (
+
+
+
+ )
+}
+```
+
+- [ ] **Step 4: Create pages**
+
+```tsx
+// app/src/app/resolvers/page.tsx
+import { ResolverGrid } from '@/components/ResolverGrid'
+export default function ResolversPage() { return RESOLVER ENTRY · {abbrev(pk)}
+ {d.name ?? abbrev(pk)}
+ {d.description &&{d.description}
} + +
+
+
+ navigator.clipboard.writeText(d.authority)} /> {String(d.resolverType.__kind)} }
+ {d.acceptancePolicy && {String(d.acceptancePolicy.__kind)} }
+ {d.feeBps !== undefined && {(Number(d.feeBps) / 100).toFixed(2)}% }
+ {d.feeRecipient && navigator.clipboard.writeText(d.feeRecipient!)} /> {d.metadataUri} }
+
+
+ ACCOUNT FIELDS
+
+
+ DISPUTE STATISTICS
+
+
+ {[
+ { label: 'Ruled for buyer', count: Number(d.ruledForBuyer ?? 0), pct: buyerPct, color: 'var(--acc2)', barColor: 'var(--acc2)' },
+ { label: 'Ruled for seller', count: Number(d.ruledForSeller ?? 0), pct: sellerPct, color: '#F5B23E', barColor: '#F5B23E' },
+ ].map((stat) => (
+ {total}
+ total resolved
+
+
+ ))}
+
+ {stat.label}
+ {stat.count} · {stat.pct}%
+
+
+
+
+
+
+ )
+}
+export default function SearchPage() {
+ return GLOBAL SEARCH
+ No account found
+Nothing on-chain matched this query on the selected network.
+{q}
+
+
+
+
+ )
+}
+```
+
+**Important:** After running codama (Task 3 of Part 1), open `sdk/src/generated/solisting/instructions/createListing.ts` and `updateListing.ts` to verify the exact parameter names. Common differences: `listingId` vs `listing_id`, `canonicalCurrency` vs `canonical_currency`, async vs sync variant. Adjust the code above accordingly.
+
+- [ ] **Step 2: Create `app/src/app/listing/create/page.tsx`**
+
+```tsx
+'use client'
+
+import { Suspense } from 'react'
+import { useSearchParams } from 'next/navigation'
+import { CreateListingForm } from '@/components/CreateListingForm'
+import type { Address } from '@solisting/sdk'
+
+function CreateOrEdit() {
+ const searchParams = useSearchParams()
+ const editPk = searchParams.get('edit') as Address | null
+ return + {isUpdate ? 'Update Listing' : 'Create Listing'} +
++ {isUpdate ? `Editing listing ${editPk?.slice(0, 8)}…` : 'New SOL-priced listing on the solisting program'} +
+ + +
+
+ )
+ }
+
+ return (
+
+
+
+ Wallet required
++ Connect a wallet to view your listings and orders, and to execute instructions you're authorized for. +
+
+
+ )
+}
+```
+
+- [ ] **Step 4: Create `app/src/app/dashboard/page.tsx`**
+
+```tsx
+import { Dashboard } from '@/components/Dashboard'
+export default function DashboardPage() { return
+
+
+
+
+
+ My Dashboard
+{abbrev(account)}
+
+ {[
+ { key: 'listings' as const, label: `My Listings · ${myListings.length}` },
+ { key: 'orders' as const, label: `My Orders · ${myOrders.length}` },
+ ].map((t) => (
+
+ ))}
+
+
+ {tab === 'listings' && (
+
+ {loadingL &&
+ )}
+
+ {tab === 'orders' && (
+ Loading…
}
+ {!loadingL && myListings.length === 0 && (
+
+ You have no listings yet.
+
+ )}
+
+ {myListings.map((l) => {
+ const sc = STATUS_COLORS[l.data.isActive ? 'active' : 'inactive']
+ const avail = Number(l.data.quantity) - Number(l.data.quantityReserved)
+ return (
+
+
+
+ )
+ })}
+ router.push(`/listing/${l.address}`)} style={{ flex: 1, minWidth: 0, cursor: 'pointer' }}>
+
+
+ {l.data.metadataUri || abbrev(l.address)}
+ {l.data.isActive ? 'Active' : 'Inactive'}
+
+
+ #{String(l.data.listingId)} · {fmtSol(l.data.price)} · {avail}/{String(l.data.quantity)} avail · {String(l.data.quantityReserved)} pending
+
+
+
+
+
+
+ {loadingO &&
+ )}
+ Loading…
}
+ {!loadingO && myOrders.length === 0 && (
+
+ You have no orders as a buyer.
+
+ )}
+
+ {myOrders.map((o) => (
+
+ router.push(`/order/${o.address}`)}
+ style={{ background: 'var(--bg2)', border: '1px solid var(--bd)', borderRadius: 'var(--radius)', padding: '18px 20px', display: 'flex', alignItems: 'center', gap: 18, cursor: 'pointer' }}
+ >
+
+ ))}
+
+
+
+ #{String(o.data.escrowId)}
+
+ {abbrev(o.data.listingAccount)}
+
+ #{String(o.data.orderId)} · {fmtSol(o.data.amount)}
+
+