descro playgound & sdk

app/src/components/EscrowCard.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import React from 'react'
+import { YStack, XStack, Text } from 'tamagui'
+import { StatusBadge } from './StatusBadge'
+import type { EscrowAccountWithPda } from '@descro/sdk'
+import { PublicKey } from '@solana/web3.js'
+
+function truncPubkey(pk: PublicKey): string {
+  const s = pk.toBase58()
+  return `${s.slice(0, 4)}…${s.slice(-4)}`
+}
+
+interface EscrowCardProps {
+  item: EscrowAccountWithPda
+  selected: boolean
+  onSelect: () => void
+}
+
+export function EscrowCard({ item, selected, onSelect }: EscrowCardProps) {
+  const { pda, account } = item
+  const solAmount = (Number(account.amount.toString()) / 1e9).toFixed(4)
+
+  return (
+    <YStack
+      padding="$4"
+      borderRadius="$4"
+      borderWidth={1}
+      borderColor={selected ? '$blue9' : '$borderColor'}
+      backgroundColor={selected ? '$blue2' : '$background'}
+      pressStyle={{ opacity: 0.8 }}
+      onPress={onSelect}
+      cursor="pointer"
+      gap="$2"
+    >
+      <XStack justifyContent="space-between" alignItems="center">
+        <Text fontSize={12} color="$color11">
+          #{account.escrowId.toString()}
+        </Text>
+        <StatusBadge state={account.state} />
+      </XStack>
+
+      <Text fontSize={16} fontWeight="700">
+        {solAmount} SOL
+      </Text>
+
+      <XStack gap="$4">
+        <YStack>
+          <Text fontSize={11} color="$color10">Seller</Text>
+          <Text fontSize={12} fontFamily="monospace">{truncPubkey(account.seller)}</Text>
+        </YStack>
+        <YStack>
+          <Text fontSize={11} color="$color10">Buyer</Text>
+          <Text fontSize={12} fontFamily="monospace">{truncPubkey(account.buyer)}</Text>
+        </YStack>
+      </XStack>
+
+      <Text fontSize={11} color="$color10" fontFamily="monospace">
+        PDA: {truncPubkey(pda)}
+      </Text>
+    </YStack>
+  )
+}