feat: escrows view
This commit is contained in:
thesn10
5
app/src/app/escrows/page.tsx
Normal file
5
app/src/app/escrows/page.tsx
Normal file
@@ -0,0 +1,5 @@
|
||||
import { EscrowsTable } from '@/components/EscrowsTable'
|
||||
|
||||
export default function EscrowsPage() {
|
||||
return <EscrowsTable />
|
||||
}
|
||||
177
app/src/components/EscrowsTable.tsx
Normal file
177
app/src/components/EscrowsTable.tsx
Normal file
@@ -0,0 +1,177 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { isSome } from '@solana/kit'
|
||||
import { useEscrows } from '@/hooks/useEscrows'
|
||||
import { Badge, STATUS_COLORS } from '@/components/ui/Badge'
|
||||
import { abbrev, fmtSol } from '@/lib/format'
|
||||
import { escrowStateLabel } from '@descro/sdk'
|
||||
import { EscrowState } from '@descro/sdk/src/generated/descro/src/generated/types/escrowState'
|
||||
|
||||
type FilterKey = 'all' | 'awaiting' | 'active' | 'disputed' | 'complete' | 'cancelled'
|
||||
|
||||
const FILTERS: { key: FilterKey; label: string; state?: EscrowState }[] = [
|
||||
{ key: 'all', label: 'All' },
|
||||
{ key: 'awaiting', label: 'Awaiting', state: EscrowState.AwaitingSellerConfirm },
|
||||
{ key: 'active', label: 'Active', state: EscrowState.Active },
|
||||
{ key: 'disputed', label: 'Disputed', state: EscrowState.Disputed },
|
||||
{ key: 'complete', label: 'Complete', state: EscrowState.Complete },
|
||||
{ key: 'cancelled', label: 'Cancelled', state: EscrowState.Cancelled },
|
||||
]
|
||||
|
||||
function stateToStatusKey(state: EscrowState): keyof typeof STATUS_COLORS {
|
||||
switch (state) {
|
||||
case EscrowState.AwaitingSellerConfirm:
|
||||
return 'awaitingConfirm'
|
||||
case EscrowState.Active:
|
||||
return 'active'
|
||||
case EscrowState.Disputed:
|
||||
return 'disputed'
|
||||
case EscrowState.Complete:
|
||||
return 'complete'
|
||||
case EscrowState.AwaitingDeposit:
|
||||
case EscrowState.Cancelled:
|
||||
default:
|
||||
return 'cancelled'
|
||||
}
|
||||
}
|
||||
|
||||
export function EscrowsTable() {
|
||||
const router = useRouter()
|
||||
const { data: escrows = [], isLoading, error } = useEscrows()
|
||||
const [filter, setFilter] = useState<FilterKey>('all')
|
||||
|
||||
if (isLoading) {
|
||||
return <div style={{ padding: 48, textAlign: 'center', color: 'var(--mut)' }}>Loading escrows…</div>
|
||||
}
|
||||
if (error) {
|
||||
return <div style={{ padding: 48, textAlign: 'center', color: 'var(--danger)' }}>{String(error)}</div>
|
||||
}
|
||||
|
||||
const rows = escrows.filter((e) => {
|
||||
if (filter === 'all') return true
|
||||
const f = FILTERS.find((f) => f.key === filter)
|
||||
if (!f || f.state === undefined) return true
|
||||
return e.account.state === f.state
|
||||
})
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Header */}
|
||||
<div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 16, marginBottom: 22, flexWrap: 'wrap' }}>
|
||||
<div>
|
||||
<h1 style={{ margin: 0, fontSize: 26, fontWeight: 700, letterSpacing: '-.02em' }}>Escrows</h1>
|
||||
<p style={{ margin: '6px 0 0', fontSize: 13, color: 'var(--mut)' }}>
|
||||
{escrows.length} EscrowAccount PDAs · descro program
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Filter tabs */}
|
||||
<div style={{ display: 'flex', background: 'var(--bg3)', border: '1px solid var(--bd)', borderRadius: 10, padding: 3 }}>
|
||||
{FILTERS.map((f) => {
|
||||
const count = f.key === 'all'
|
||||
? escrows.length
|
||||
: escrows.filter((e) => e.account.state === f.state).length
|
||||
return (
|
||||
<button
|
||||
key={f.key}
|
||||
onClick={() => setFilter(f.key)}
|
||||
style={{
|
||||
padding: '6px 12px',
|
||||
borderRadius: 7,
|
||||
fontSize: 12.5,
|
||||
fontWeight: 600,
|
||||
color: filter === f.key ? 'var(--tx)' : 'var(--mut)',
|
||||
background: filter === f.key ? 'var(--bg2)' : 'transparent',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{f.label}
|
||||
{count > 0 && (
|
||||
<span style={{ marginLeft: 5, fontSize: 11, opacity: 0.7 }}>({count})</span>
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div style={{ background: 'var(--bg2)', border: '1px solid var(--bd)', borderRadius: 'var(--radius)', overflow: 'hidden' }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1.2fr 1.4fr 1.4fr .9fr 1.3fr .9fr',
|
||||
gap: 14,
|
||||
padding: '13px 20px',
|
||||
borderBottom: '1px solid var(--bd)',
|
||||
fontSize: 10.5,
|
||||
fontWeight: 600,
|
||||
letterSpacing: '.12em',
|
||||
color: 'var(--mut)',
|
||||
}}
|
||||
>
|
||||
<div>ESCROW ID</div>
|
||||
<div>SELLER</div>
|
||||
<div>BUYER</div>
|
||||
<div>AMOUNT</div>
|
||||
<div>RESOLVER</div>
|
||||
<div style={{ textAlign: 'right' }}>STATE</div>
|
||||
</div>
|
||||
|
||||
{rows.length === 0 && (
|
||||
<div style={{ padding: 48, textAlign: 'center', color: 'var(--mut)', fontSize: 14 }}>
|
||||
No escrows match these filters.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{rows.map((e) => {
|
||||
const statusKey = stateToStatusKey(e.account.state)
|
||||
const sc = STATUS_COLORS[statusKey]
|
||||
const resolverDisplay = isSome(e.account.disputeResolver)
|
||||
? abbrev(e.account.disputeResolver.value)
|
||||
: '—'
|
||||
return (
|
||||
<div
|
||||
key={e.pda}
|
||||
onClick={() => router.push(`/search?q=${e.pda}`)}
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1.2fr 1.4fr 1.4fr .9fr 1.3fr .9fr',
|
||||
gap: 14,
|
||||
padding: '15px 20px',
|
||||
borderBottom: '1px solid var(--bdSoft)',
|
||||
cursor: 'pointer',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--mut)' }}>
|
||||
#{String(e.account.escrowId)}
|
||||
</div>
|
||||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 12.5, color: 'var(--acc2light)' }}>
|
||||
{abbrev(e.account.seller)}
|
||||
</div>
|
||||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 12.5, color: 'var(--acc2light)' }}>
|
||||
{abbrev(e.account.buyer)}
|
||||
</div>
|
||||
<div style={{ fontWeight: 600, fontSize: 13 }}>
|
||||
{fmtSol(e.account.amount)}
|
||||
</div>
|
||||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: 12.5, color: 'var(--mut)' }}>
|
||||
{resolverDisplay}
|
||||
</div>
|
||||
<div style={{ textAlign: 'right' }}>
|
||||
<Badge color={sc.color} bg={sc.bg}>
|
||||
{escrowStateLabel(e.account.state)}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
63
app/src/hooks/useEscrows.ts
Normal file
63
app/src/hooks/useEscrows.ts
Normal file
@@ -0,0 +1,63 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { useCluster } from '@solana/connector/react'
|
||||
import { createSolanaRpc } from '@solana/kit'
|
||||
import type { Address, Lamports } from '@solana/kit'
|
||||
import {
|
||||
decodeEscrowAccount,
|
||||
getEscrowAccountDiscriminatorBytes,
|
||||
} from '@descro/sdk/src/generated/descro/src/generated/accounts/escrowAccount'
|
||||
import { DESCRO_PROGRAM_ADDRESS } from '@descro/sdk/src/generated/descro/src/generated/programs/descro'
|
||||
import type { EscrowAccountWithPda } from '@descro/sdk'
|
||||
|
||||
async function fetchAllEscrows(
|
||||
rpc: ReturnType<typeof createSolanaRpc>,
|
||||
): Promise<EscrowAccountWithPda[]> {
|
||||
const discriminatorBase64 = btoa(
|
||||
String.fromCharCode(...getEscrowAccountDiscriminatorBytes()),
|
||||
) as never
|
||||
|
||||
const results = await rpc
|
||||
.getProgramAccounts(DESCRO_PROGRAM_ADDRESS, {
|
||||
encoding: 'base64',
|
||||
filters: [{ memcmp: { offset: 0n, bytes: discriminatorBase64, encoding: 'base64' } }],
|
||||
})
|
||||
.send()
|
||||
|
||||
return (
|
||||
results as Array<{
|
||||
pubkey: Address
|
||||
account: {
|
||||
executable: boolean
|
||||
lamports: bigint
|
||||
owner: Address
|
||||
space: bigint
|
||||
data: [string, 'base64']
|
||||
}
|
||||
}>
|
||||
).flatMap((r) => {
|
||||
const rawBytes = Uint8Array.from(atob(r.account.data[0]), (c) => c.charCodeAt(0))
|
||||
const decoded = decodeEscrowAccount({
|
||||
address: r.pubkey,
|
||||
data: rawBytes,
|
||||
executable: r.account.executable,
|
||||
lamports: r.account.lamports as Lamports,
|
||||
programAddress: r.account.owner,
|
||||
space: r.account.space,
|
||||
exists: true,
|
||||
})
|
||||
return decoded.exists ? [{ pda: r.pubkey, account: decoded.data }] : []
|
||||
})
|
||||
}
|
||||
|
||||
export function useEscrows() {
|
||||
const { cluster } = useCluster()
|
||||
return useQuery({
|
||||
queryKey: ['escrows', cluster?.id],
|
||||
queryFn: () => {
|
||||
const rpc = createSolanaRpc(cluster!.url)
|
||||
return fetchAllEscrows(rpc)
|
||||
},
|
||||
enabled: !!cluster,
|
||||
refetchInterval: 30_000,
|
||||
})
|
||||
}
|
||||
Reference in New Issue
Block a user