63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
import { YStack, XStack, Text } from 'tamagui'
|
|
import { StatusBadge } from './StatusBadge'
|
|
import type { EscrowAccountWithPda } from '@descro/sdk'
|
|
import { lamports } from '@solana/kit'
|
|
import { lamportsToSolString } from '@/util/lamports'
|
|
function truncAddr(addr: string): string {
|
|
return `${addr.slice(0, 4)}…${addr.slice(-4)}`
|
|
}
|
|
|
|
interface EscrowCardProps {
|
|
item: EscrowAccountWithPda
|
|
selected: boolean
|
|
onSelect: () => void
|
|
}
|
|
|
|
export function EscrowCard({ item, selected, onSelect }: EscrowCardProps) {
|
|
const { pda, account } = item
|
|
const solAmount = lamportsToSolString(lamports(account.amount), 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">{truncAddr(account.seller)}</Text>
|
|
</YStack>
|
|
<YStack>
|
|
<Text fontSize={11} color="$color10">Buyer</Text>
|
|
<Text fontSize={12} fontFamily="monospace">{truncAddr(account.buyer)}</Text>
|
|
</YStack>
|
|
</XStack>
|
|
|
|
<Text fontSize={11} color="$color10" fontFamily="monospace">
|
|
PDA: {truncAddr(pda)}
|
|
</Text>
|
|
</YStack>
|
|
)
|
|
}
|