@akta/algomd-rn 0.0.1-canary

package/src/components/SelfFetching.tsx

@@ -0,0 +1,358 @@
+/**
+ * Self-fetching wrappers for algomd-rn display components.
+ *
+ * Each wrapper adds an optional self-fetch prop (appId, address, txId, etc.)
+ * alongside the existing `data` prop. If `data` is provided, it renders
+ * immediately. Otherwise, it fetches from algod via the hooks.
+ */
+
+import React from 'react'
+import type { ReactNode } from 'react'
+import type { ComponentSize } from '../types/algorand'
+import { LoadingSkeleton, ErrorState } from '../ui/DataStates'
+
+// Display components (internal names)
+import { Account as AccountDisplay } from './Account'
+import { ASAComponent } from './ASA'
+import { NFTListingComponent } from './NFTListing'
+import { NFDProfileComponent } from './NFDProfile'
+import { TransactionDetailsComponent } from './TransactionDetails'
+import { PollComponent } from './Poll'
+import { RaffleListingComponent } from './RaffleListing'
+import { AuctionListingComponent } from './AuctionListing'
+import { TradeOfferComponent } from './TradeOffer'
+
+// Hooks
+import {
+  useAccountData,
+  useASAData,
+  useTransactionData,
+  useNFDProfileData,
+  usePollData,
+  useRaffleData,
+  useAuctionData,
+  useNFTListingData,
+  useTradeOfferData,
+} from '../hooks/useAlgomdData'
+
+// Types
+import type {
+  AlgorandAccount,
+  ASA as ASAType,
+  NFTListing as NFTListingType,
+  NFDProfile as NFDProfileType,
+  TransactionDetails as TransactionDetailsType,
+  Poll as PollType,
+  RaffleListing as RaffleListingType,
+  AuctionListing as AuctionListingType,
+  TradeOffer as TradeOfferType,
+} from '../types/algorand'
+
+// ---------------------------------------------------------------------------
+// Shared fetcher wrapper
+// ---------------------------------------------------------------------------
+
+function FetcherWrapper({
+  name,
+  isLoading,
+  error,
+  data,
+  loadingFallback,
+  errorFallback,
+  children,
+}: {
+  name: string
+  isLoading: boolean
+  error: Error | null
+  data: unknown
+  loadingFallback?: ReactNode
+  errorFallback?: ReactNode
+  children: ReactNode
+}) {
+  if (isLoading) return <>{loadingFallback ?? <LoadingSkeleton name={name} />}</>
+  if (error || !data) return <>{errorFallback ?? <ErrorState name={name} message={error?.message ?? 'Not found'} />}</>
+  return <>{children}</>
+}
+
+// ---------------------------------------------------------------------------
+// Poll
+// ---------------------------------------------------------------------------
+
+type PollSelfFetchProps = {
+  data?: PollType
+  appId?: number
+  showVoteButton?: boolean
+  compact?: boolean
+  size?: ComponentSize
+  className?: string
+  onVote?: (pollId: string, optionId: string) => void
+  loadingFallback?: ReactNode
+  errorFallback?: ReactNode
+}
+
+function PollFetcher({ appId, ...rest }: Omit<PollSelfFetchProps, 'data'> & { appId: number }) {
+  const { data, isLoading, error } = usePollData(appId)
+  return (
+    <FetcherWrapper name="Poll" isLoading={isLoading} error={error} data={data} loadingFallback={rest.loadingFallback} errorFallback={rest.errorFallback}>
+      {data && <PollComponent data={data} showVoteButton={rest.showVoteButton} compact={rest.compact} size={rest.size} className={rest.className} onVote={rest.onVote} />}
+    </FetcherWrapper>
+  )
+}
+
+export function Poll(props: PollSelfFetchProps) {
+  if (props.data) return <PollComponent data={props.data} showVoteButton={props.showVoteButton} compact={props.compact} size={props.size} className={props.className} onVote={props.onVote} />
+  if (props.appId != null) return <PollFetcher appId={props.appId} showVoteButton={props.showVoteButton} compact={props.compact} size={props.size} className={props.className} onVote={props.onVote} loadingFallback={props.loadingFallback} errorFallback={props.errorFallback} />
+  return <ErrorState name="Poll" message="Either data or appId is required" />
+}
+
+// ---------------------------------------------------------------------------
+// RaffleListing
+// ---------------------------------------------------------------------------
+
+type RaffleListingSelfFetchProps = {
+  data?: RaffleListingType
+  appId?: number
+  showEntryButton?: boolean
+  size?: ComponentSize
+  className?: string
+  imageUrl?: string
+  onEnter?: (raffle: RaffleListingType) => void
+  loadingFallback?: ReactNode
+  errorFallback?: ReactNode
+}
+
+function RaffleListingFetcher({ appId, ...rest }: Omit<RaffleListingSelfFetchProps, 'data'> & { appId: number }) {
+  const { data, isLoading, error } = useRaffleData(appId)
+  return (
+    <FetcherWrapper name="Raffle" isLoading={isLoading} error={error} data={data} loadingFallback={rest.loadingFallback} errorFallback={rest.errorFallback}>
+      {data && <RaffleListingComponent data={data} showEntryButton={rest.showEntryButton} size={rest.size} className={rest.className} imageUrl={rest.imageUrl} onEnter={rest.onEnter} />}
+    </FetcherWrapper>
+  )
+}
+
+export function RaffleListing(props: RaffleListingSelfFetchProps) {
+  if (props.data) return <RaffleListingComponent data={props.data} showEntryButton={props.showEntryButton} size={props.size} className={props.className} imageUrl={props.imageUrl} onEnter={props.onEnter} />
+  if (props.appId != null) return <RaffleListingFetcher appId={props.appId} showEntryButton={props.showEntryButton} size={props.size} className={props.className} imageUrl={props.imageUrl} onEnter={props.onEnter} loadingFallback={props.loadingFallback} errorFallback={props.errorFallback} />
+  return <ErrorState name="Raffle" message="Either data or appId is required" />
+}
+
+// ---------------------------------------------------------------------------
+// AuctionListing
+// ---------------------------------------------------------------------------
+
+type AuctionListingSelfFetchProps = {
+  data?: AuctionListingType
+  appId?: number
+  showBidButton?: boolean
+  size?: ComponentSize
+  className?: string
+  imageUrl?: string
+  onBid?: (auction: AuctionListingType) => void
+  loadingFallback?: ReactNode
+  errorFallback?: ReactNode
+}
+
+function AuctionListingFetcher({ appId, ...rest }: Omit<AuctionListingSelfFetchProps, 'data'> & { appId: number }) {
+  const { data, isLoading, error } = useAuctionData(appId)
+  return (
+    <FetcherWrapper name="Auction" isLoading={isLoading} error={error} data={data} loadingFallback={rest.loadingFallback} errorFallback={rest.errorFallback}>
+      {data && <AuctionListingComponent data={data} showBidButton={rest.showBidButton} size={rest.size} className={rest.className} imageUrl={rest.imageUrl} onBid={rest.onBid} />}
+    </FetcherWrapper>
+  )
+}
+
+export function AuctionListing(props: AuctionListingSelfFetchProps) {
+  if (props.data) return <AuctionListingComponent data={props.data} showBidButton={props.showBidButton} size={props.size} className={props.className} imageUrl={props.imageUrl} onBid={props.onBid} />
+  if (props.appId != null) return <AuctionListingFetcher appId={props.appId} showBidButton={props.showBidButton} size={props.size} className={props.className} imageUrl={props.imageUrl} onBid={props.onBid} loadingFallback={props.loadingFallback} errorFallback={props.errorFallback} />
+  return <ErrorState name="Auction" message="Either data or appId is required" />
+}
+
+// ---------------------------------------------------------------------------
+// NFTListing
+// ---------------------------------------------------------------------------
+
+type NFTListingSelfFetchProps = {
+  data?: NFTListingType
+  appId?: number
+  showPurchaseButton?: boolean
+  size?: ComponentSize
+  className?: string
+  imageUrl?: string
+  onPurchase?: (listing: NFTListingType) => void
+  onFavorite?: (listing: NFTListingType) => void
+  loadingFallback?: ReactNode
+  errorFallback?: ReactNode
+}
+
+function NFTListingFetcher({ appId, ...rest }: Omit<NFTListingSelfFetchProps, 'data'> & { appId: number }) {
+  const { data, isLoading, error } = useNFTListingData(appId)
+  return (
+    <FetcherWrapper name="NFT Listing" isLoading={isLoading} error={error} data={data} loadingFallback={rest.loadingFallback} errorFallback={rest.errorFallback}>
+      {data && <NFTListingComponent data={data} showPurchaseButton={rest.showPurchaseButton} size={rest.size} className={rest.className} imageUrl={rest.imageUrl} onPurchase={rest.onPurchase} onFavorite={rest.onFavorite} />}
+    </FetcherWrapper>
+  )
+}
+
+export function NFTListing(props: NFTListingSelfFetchProps) {
+  if (props.data) return <NFTListingComponent data={props.data} showPurchaseButton={props.showPurchaseButton} size={props.size} className={props.className} imageUrl={props.imageUrl} onPurchase={props.onPurchase} onFavorite={props.onFavorite} />
+  if (props.appId != null) return <NFTListingFetcher appId={props.appId} showPurchaseButton={props.showPurchaseButton} size={props.size} className={props.className} imageUrl={props.imageUrl} onPurchase={props.onPurchase} onFavorite={props.onFavorite} loadingFallback={props.loadingFallback} errorFallback={props.errorFallback} />
+  return <ErrorState name="NFT Listing" message="Either data or appId is required" />
+}
+
+// ---------------------------------------------------------------------------
+// TradeOffer
+// ---------------------------------------------------------------------------
+
+type TradeOfferSelfFetchProps = {
+  data?: TradeOfferType
+  appId?: number
+  offerId?: number
+  showActions?: boolean
+  size?: ComponentSize
+  className?: string
+  currentUserAddress?: string
+  onAccept?: (offer: TradeOfferType) => void
+  onReject?: (offer: TradeOfferType) => void
+  loadingFallback?: ReactNode
+  errorFallback?: ReactNode
+}
+
+function TradeOfferFetcher({ appId, offerId, ...rest }: Omit<TradeOfferSelfFetchProps, 'data'> & { appId: number; offerId: number }) {
+  const { data, isLoading, error } = useTradeOfferData(appId, offerId)
+  return (
+    <FetcherWrapper name="Trade Offer" isLoading={isLoading} error={error} data={data} loadingFallback={rest.loadingFallback} errorFallback={rest.errorFallback}>
+      {data && <TradeOfferComponent data={data} showActions={rest.showActions} size={rest.size} className={rest.className} currentUserAddress={rest.currentUserAddress} onAccept={rest.onAccept} onReject={rest.onReject} />}
+    </FetcherWrapper>
+  )
+}
+
+export function TradeOffer(props: TradeOfferSelfFetchProps) {
+  if (props.data) return <TradeOfferComponent data={props.data} showActions={props.showActions} size={props.size} className={props.className} currentUserAddress={props.currentUserAddress} onAccept={props.onAccept} onReject={props.onReject} />
+  if (props.appId != null && props.offerId != null) return <TradeOfferFetcher appId={props.appId} offerId={props.offerId} showActions={props.showActions} size={props.size} className={props.className} currentUserAddress={props.currentUserAddress} onAccept={props.onAccept} onReject={props.onReject} loadingFallback={props.loadingFallback} errorFallback={props.errorFallback} />
+  return <ErrorState name="Trade Offer" message="Either data or (appId + offerId) is required" />
+}
+
+// ---------------------------------------------------------------------------
+// Account
+// ---------------------------------------------------------------------------
+
+type AccountSelfFetchProps = {
+  data?: AlgorandAccount
+  address?: string
+  showAssets?: boolean
+  showApps?: boolean
+  compact?: boolean
+  size?: ComponentSize
+  className?: string
+  onExternalLink?: (address: string) => void
+  loadingFallback?: ReactNode
+  errorFallback?: ReactNode
+}
+
+function AccountFetcher({ address, ...rest }: Omit<AccountSelfFetchProps, 'data'> & { address: string }) {
+  const { data, isLoading, error } = useAccountData(address)
+  return (
+    <FetcherWrapper name="Account" isLoading={isLoading} error={error} data={data} loadingFallback={rest.loadingFallback} errorFallback={rest.errorFallback}>
+      {data && <AccountDisplay data={data} showAssets={rest.showAssets} showApps={rest.showApps} compact={rest.compact} size={rest.size} className={rest.className} onExternalLink={rest.onExternalLink} />}
+    </FetcherWrapper>
+  )
+}
+
+export function Account(props: AccountSelfFetchProps) {
+  if (props.data) return <AccountDisplay data={props.data} showAssets={props.showAssets} showApps={props.showApps} compact={props.compact} size={props.size} className={props.className} onExternalLink={props.onExternalLink} />
+  if (props.address) return <AccountFetcher address={props.address} showAssets={props.showAssets} showApps={props.showApps} compact={props.compact} size={props.size} className={props.className} onExternalLink={props.onExternalLink} loadingFallback={props.loadingFallback} errorFallback={props.errorFallback} />
+  return <ErrorState name="Account" message="Either data or address is required" />
+}
+
+// ---------------------------------------------------------------------------
+// ASA
+// ---------------------------------------------------------------------------
+
+type ASASelfFetchProps = {
+  data?: ASAType
+  assetId?: number
+  showDetails?: boolean
+  compact?: boolean
+  size?: ComponentSize
+  className?: string
+  imageUrl?: string
+  loadingFallback?: ReactNode
+  errorFallback?: ReactNode
+}
+
+function ASAFetcher({ assetId, ...rest }: Omit<ASASelfFetchProps, 'data'> & { assetId: number }) {
+  const { data, isLoading, error } = useASAData(assetId)
+  return (
+    <FetcherWrapper name="ASA" isLoading={isLoading} error={error} data={data} loadingFallback={rest.loadingFallback} errorFallback={rest.errorFallback}>
+      {data && <ASAComponent data={data} showDetails={rest.showDetails} compact={rest.compact} size={rest.size} className={rest.className} imageUrl={rest.imageUrl} />}
+    </FetcherWrapper>
+  )
+}
+
+export function ASA(props: ASASelfFetchProps) {
+  if (props.data) return <ASAComponent data={props.data} showDetails={props.showDetails} compact={props.compact} size={props.size} className={props.className} imageUrl={props.imageUrl} />
+  if (props.assetId != null) return <ASAFetcher assetId={props.assetId} showDetails={props.showDetails} compact={props.compact} size={props.size} className={props.className} imageUrl={props.imageUrl} loadingFallback={props.loadingFallback} errorFallback={props.errorFallback} />
+  return <ErrorState name="ASA" message="Either data or assetId is required" />
+}
+
+// ---------------------------------------------------------------------------
+// TransactionDetails
+// ---------------------------------------------------------------------------
+
+type TransactionDetailsSelfFetchProps = {
+  data?: TransactionDetailsType
+  txId?: string
+  showContext?: boolean
+  showFee?: boolean
+  compact?: boolean
+  size?: ComponentSize
+  className?: string
+  loadingFallback?: ReactNode
+  errorFallback?: ReactNode
+}
+
+function TransactionDetailsFetcher({ txId, ...rest }: Omit<TransactionDetailsSelfFetchProps, 'data'> & { txId: string }) {
+  const { data, isLoading, error } = useTransactionData(txId)
+  return (
+    <FetcherWrapper name="Transaction" isLoading={isLoading} error={error} data={data} loadingFallback={rest.loadingFallback} errorFallback={rest.errorFallback}>
+      {data && <TransactionDetailsComponent data={data} showContext={rest.showContext} showFee={rest.showFee} compact={rest.compact} size={rest.size} className={rest.className} />}
+    </FetcherWrapper>
+  )
+}
+
+export function TransactionDetails(props: TransactionDetailsSelfFetchProps) {
+  if (props.data) return <TransactionDetailsComponent data={props.data} showContext={props.showContext} showFee={props.showFee} compact={props.compact} size={props.size} className={props.className} />
+  if (props.txId) return <TransactionDetailsFetcher txId={props.txId} showContext={props.showContext} showFee={props.showFee} compact={props.compact} size={props.size} className={props.className} loadingFallback={props.loadingFallback} errorFallback={props.errorFallback} />
+  return <ErrorState name="Transaction" message="Either data or txId is required" />
+}
+
+// ---------------------------------------------------------------------------
+// NFDProfile
+// ---------------------------------------------------------------------------
+
+type NFDProfileSelfFetchProps = {
+  data?: NFDProfileType
+  name?: string
+  showBio?: boolean
+  showProperties?: boolean
+  compact?: boolean
+  size?: ComponentSize
+  className?: string
+  loadingFallback?: ReactNode
+  errorFallback?: ReactNode
+}
+
+function NFDProfileFetcher({ name, ...rest }: Omit<NFDProfileSelfFetchProps, 'data'> & { name: string }) {
+  const { data, isLoading, error } = useNFDProfileData(name)
+  return (
+    <FetcherWrapper name="NFD Profile" isLoading={isLoading} error={error} data={data} loadingFallback={rest.loadingFallback} errorFallback={rest.errorFallback}>
+      {data && <NFDProfileComponent data={data} showBio={rest.showBio} showProperties={rest.showProperties} compact={rest.compact} size={rest.size} className={rest.className} />}
+    </FetcherWrapper>
+  )
+}
+
+export function NFDProfile(props: NFDProfileSelfFetchProps) {
+  if (props.data) return <NFDProfileComponent data={props.data} showBio={props.showBio} showProperties={props.showProperties} compact={props.compact} size={props.size} className={props.className} />
+  if (props.name) return <NFDProfileFetcher name={props.name} showBio={props.showBio} showProperties={props.showProperties} compact={props.compact} size={props.size} className={props.className} loadingFallback={props.loadingFallback} errorFallback={props.errorFallback} />
+  return <ErrorState name="NFD Profile" message="Either data or name is required" />
+}

package/src/components/TradeOffer.tsx

@@ -0,0 +1,245 @@
+import React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { Image } from 'expo-image';
+import Animated, { FadeInDown } from 'react-native-reanimated';
+import Svg, { Path } from 'react-native-svg';
+import type { TradeOffer as TradeOfferType, ASA, AlgorandAccount, ComponentSize } from '../types/algorand';
+import { formatAddress, formatRelativeTime } from '../utils/format';
+import { CopyButton } from '../ui/CopyButton';
+import { SizeContainer } from '../ui/SizeContainer';
+import { StatusBadge } from '../ui/StatusBadge';
+
+function ArrowRightLeftIcon({ size = 20, color = '#a1a1aa' }: { size?: number; color?: string }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <Path d="m8 3 4 8 5-5 5 15H2L8 3z" />
+    </Svg>
+  );
+}
+
+function SwapIcon({ size = 20, color = '#a1a1aa' }: { size?: number; color?: string }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <Path d="M16 3l4 4-4 4" />
+      <Path d="M20 7H4" />
+      <Path d="M8 21l-4-4 4-4" />
+      <Path d="M4 17h16" />
+    </Svg>
+  );
+}
+
+function CheckIcon({ size = 16, color = '#fff' }: { size?: number; color?: string }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <Path d="M20 6 9 17l-5-5" />
+    </Svg>
+  );
+}
+
+function XIcon({ size = 16, color = '#fff' }: { size?: number; color?: string }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <Path d="M18 6 6 18" />
+      <Path d="m6 6 12 12" />
+    </Svg>
+  );
+}
+
+function ClockIcon({ size = 16, color = '#a1a1aa' }: { size?: number; color?: string }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <Path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Z" />
+      <Path d="M12 6v6l4 2" />
+    </Svg>
+  );
+}
+
+function MessageIcon({ size = 16, color = '#a1a1aa' }: { size?: number; color?: string }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <Path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
+    </Svg>
+  );
+}
+
+// Helper to determine if something is an ASA
+function isASA(item: ASA | AlgorandAccount): item is ASA {
+  return 'unitName' in item;
+}
+
+function AssetItem({ asset, imageUrl }: { asset: ASA | AlgorandAccount; imageUrl?: string }) {
+  if (isASA(asset)) {
+    const isNFT = asset.total === 1 && asset.decimals === 0;
+    return (
+      <View className="flex-row items-center gap-3 p-3 rounded-lg bg-zinc-800/50 mb-2">
+        {imageUrl && (
+          <View className={`w-10 h-10 overflow-hidden bg-zinc-700 ${isNFT ? 'rounded-lg' : 'rounded-full'}`}>
+            <Image source={{ uri: imageUrl }} style={{ width: 40, height: 40 }} contentFit="cover" />
+          </View>
+        )}
+        <View className="flex-1">
+          <Text className="text-sm font-medium text-white" numberOfLines={1}>{asset.name}</Text>
+          <Text className="text-xs text-zinc-400">{asset.unitName} - #{asset.id}</Text>
+        </View>
+        {asset.price !== undefined && (
+          <Text className="text-xs font-medium text-green-400">${asset.price}</Text>
+        )}
+      </View>
+    );
+  }
+
+  // AlgorandAccount
+  return (
+    <View className="flex-row items-center gap-3 p-3 rounded-lg bg-zinc-800/50 mb-2">
+      <View className="w-10 h-10 rounded-full bg-zinc-700 items-center justify-center">
+        <Text className="text-xs text-zinc-400">ACC</Text>
+      </View>
+      <View className="flex-1">
+        <Text className="text-sm font-mono text-white" numberOfLines={1}>
+          {formatAddress(asset.address)}
+        </Text>
+        <Text className="text-xs text-zinc-400">ALGO Account</Text>
+      </View>
+    </View>
+  );
+}
+
+function AssetGroup({ title, assets }: { title: string; assets: (ASA | AlgorandAccount)[] }) {
+  if (assets.length === 0) {
+    return (
+      <View className="p-3 rounded-lg border-2 border-dashed border-zinc-700 items-center">
+        <Text className="text-sm text-zinc-400">No assets</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View>
+      <Text className="text-sm font-medium text-zinc-300 mb-2">{title}</Text>
+      {assets.map((asset, index) => (
+        <AssetItem key={`${isASA(asset) ? asset.id : asset.address}-${index}`} asset={asset} />
+      ))}
+    </View>
+  );
+}
+
+interface TradeOfferProps {
+  data: TradeOfferType;
+  showActions?: boolean;
+  size?: ComponentSize;
+  className?: string;
+  currentUserAddress?: string;
+  onAccept?: (offer: TradeOfferType) => void;
+  onReject?: (offer: TradeOfferType) => void;
+}
+
+export function TradeOfferComponent({
+  data: offer,
+  showActions = true,
+  size = 'full',
+  className,
+  currentUserAddress,
+  onAccept,
+  onReject,
+}: TradeOfferProps) {
+  const isExpired = new Date() > offer.expiresAt;
+  const isRecipient = currentUserAddress ? offer.recipients.includes(currentUserAddress) : false;
+  const canRespond = isRecipient && offer.status === 'pending' && !isExpired;
+
+  const statusVariant =
+    offer.status === 'pending'
+      ? 'info'
+      : offer.status === 'accepted'
+        ? 'success'
+        : offer.status === 'rejected'
+          ? 'error'
+          : 'neutral';
+
+  const isFullscreen = size === 'fullscreen';
+
+  return (
+    <SizeContainer size={size} className={className}>
+      <Animated.View
+        entering={FadeInDown.duration(400).springify()}
+        className={`rounded-2xl ${isFullscreen ? 'border border-zinc-800' : 'bg-zinc-900/80'}`}
+      >
+        {/* Header */}
+        <View className="px-5 py-3 border-b border-zinc-800">
+          <View className="flex-row items-center justify-between">
+            <View className="flex-row items-center gap-2">
+              <Text className="text-base font-semibold text-white">
+                {isRecipient ? 'Incoming Trade' : 'Trade Offer'}
+              </Text>
+              <StatusBadge
+                label={offer.status.charAt(0).toUpperCase() + offer.status.slice(1)}
+                variant={statusVariant}
+              />
+              {isExpired && <StatusBadge label="Expired" variant="error" />}
+            </View>
+            <View className="flex-row items-center gap-1">
+              <ClockIcon size={14} color="#a1a1aa" />
+              <Text className="text-xs font-mono text-zinc-300">
+                {formatRelativeTime(offer.expiresAt)}
+              </Text>
+            </View>
+          </View>
+          <View className="flex-row items-center gap-1 mt-1">
+            <Text className="text-xs font-mono text-zinc-400">
+              From {formatAddress(offer.creator)}
+            </Text>
+            <CopyButton value={offer.creator} size={12} color="#71717a" />
+          </View>
+        </View>
+
+        {/* Trade Content */}
+        <View className="p-5">
+          {/* Offering */}
+          <AssetGroup title="Offering" assets={offer.offering} />
+
+          {/* Swap Icon */}
+          <View className="items-center py-3">
+            <View className="p-2 rounded-full bg-zinc-800/60">
+              <SwapIcon size={20} color="#a1a1aa" />
+            </View>
+          </View>
+
+          {/* Requesting */}
+          <AssetGroup title="Requesting" assets={offer.requesting} />
+        </View>
+
+        {/* Message */}
+        {offer.message && (
+          <View className="px-5 pb-3 border-t border-zinc-800 pt-3">
+            <View className="bg-blue-500/5 rounded-xl px-3 py-2.5">
+              <View className="flex-row items-start gap-2">
+                <MessageIcon size={14} color="#60a5fa" />
+                <Text className="text-sm text-blue-200 flex-1 leading-5">{offer.message}</Text>
+              </View>
+            </View>
+          </View>
+        )}
+
+        {/* Action Buttons */}
+        {showActions && canRespond && (
+          <View className="px-5 pb-5 flex-row gap-3">
+            <Pressable
+              onPress={() => onReject?.(offer)}
+              className="flex-1 flex-row items-center justify-center gap-2 py-2.5 px-4 rounded-xl bg-red-500/20"
+            >
+              <XIcon size={16} color="#fca5a5" />
+              <Text className="text-sm font-medium text-red-300">Reject</Text>
+            </Pressable>
+
+            <Pressable
+              onPress={() => onAccept?.(offer)}
+              className="flex-1 flex-row items-center justify-center gap-2 py-2.5 px-4 rounded-xl bg-green-600"
+            >
+              <CheckIcon size={16} color="#fff" />
+              <Text className="text-sm font-medium text-white">Accept</Text>
+            </Pressable>
+          </View>
+        )}
+      </Animated.View>
+    </SizeContainer>
+  );
+}