@tangle-network/starter-foundry 0.1.0

package/registry/layers/capability/crypto-bridge-ui/manifest.json

@@ -0,0 +1,24 @@
+{
+  "id": "crypto-bridge-ui",
+  "description": "Cross-chain bridge interface with chain selection, fee estimation, and transaction history.",
+  "group": "capability",
+  "appliesTo": ["nextjs-ts", "react-vite-ts", "fullstack-ts"],
+  "keywords": ["bridge", "cross-chain", "transfer", "multichain", "layerzero", "wormhole", "chain transfer"],
+  "capabilityRequires": ["shadcn"],
+  "files": [
+    { "source": "files/bridge-card.tsx", "target": "src/components/crypto/bridge-card.tsx" },
+    { "source": "files/bridge-history.tsx", "target": "src/components/crypto/bridge-history.tsx" }
+  ],
+  "buildHints": {
+    "pages": ["/bridge", "/bridge/history"],
+    "apiRoutes": ["/api/bridge/quote", "/api/bridge/status"],
+    "components": ["BridgeCard", "BridgeHistory"],
+    "integrations": ["Bridge protocol SDK (LayerZero, Wormhole, Axelar)", "Chain RPC for transaction confirmation tracking"],
+    "architectureNotes": [
+      "BridgeCard handles source/destination chain selection with fee summary and route display.",
+      "BridgeHistory tracks cross-chain transaction status with confirmation progress.",
+      "Wire bridge execution to your bridge protocol SDK.",
+      "Transaction status polling is display-only — implement via API or websocket."
+    ]
+  }
+}

package/registry/layers/capability/crypto-governance-ui/files/governance-page.tsx

@@ -0,0 +1,98 @@
+'use client'
+
+import { useState } from 'react'
+import { Card, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Plus, Search, Vote, Users, FileText, Wallet } from 'lucide-react'
+import { ProposalCard, type Proposal } from './proposal-card'
+
+const FILTERS = ['All', 'Active', 'Passed', 'Defeated'] as const
+type Filter = (typeof FILTERS)[number]
+
+const DEMO_PROPOSALS: Proposal[] = [
+  { id: 42, title: 'Increase treasury diversification into stablecoins', status: 'active', author: '0x1234567890abcdef1234567890abcdef12345678', createdAt: '2d ago', votesFor: 1200000, votesAgainst: 300000, votesAbstain: 50000, quorumPct: 72, timeRemaining: '2d left' },
+  { id: 41, title: 'Deploy protocol on Arbitrum and Base', status: 'passed', author: '0xabcdef1234567890abcdef1234567890abcdef12', createdAt: '5d ago', votesFor: 2100000, votesAgainst: 150000, votesAbstain: 80000, quorumPct: 100, timeRemaining: 'Ended 1d ago' },
+  { id: 40, title: 'Reduce validator minimum stake requirement', status: 'defeated', author: '0x9876543210fedcba9876543210fedcba98765432', createdAt: '8d ago', votesFor: 400000, votesAgainst: 900000, votesAbstain: 200000, quorumPct: 65, timeRemaining: 'Ended 3d ago' },
+  { id: 39, title: 'Grant funding for developer tooling initiative', status: 'active', author: '0x1111222233334444555566667777888899990000', createdAt: '1d ago', votesFor: 800000, votesAgainst: 100000, votesAbstain: 20000, quorumPct: 45, timeRemaining: '4d left' },
+]
+
+export function GovernancePage() {
+  const [filter, setFilter] = useState<Filter>('All')
+  const [query, setQuery] = useState('')
+
+  const filtered = DEMO_PROPOSALS.filter((p) => {
+    if (filter !== 'All' && p.status !== filter.toLowerCase()) return false
+    if (query && !p.title.toLowerCase().includes(query.toLowerCase())) return false
+    return true
+  })
+
+  const stats = [
+    { label: 'Total Proposals', value: '42', icon: FileText },
+    { label: 'Active', value: '2', icon: Vote },
+    { label: 'Participation', value: '68%', icon: Users },
+    { label: 'Your Voting Power', value: '12,500 GOV', icon: Wallet },
+  ]
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">Governance</h1>
+          <p className="text-sm text-muted-foreground">GOV Token Governance</p>
+        </div>
+        <Button>
+          <Plus className="mr-2 h-4 w-4" />
+          Create Proposal
+        </Button>
+      </div>
+
+      <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
+        {stats.map((stat) => (
+          <Card key={stat.label}>
+            <CardContent className="flex items-center gap-3 p-4">
+              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
+                <stat.icon className="h-5 w-5 text-primary" />
+              </div>
+              <div>
+                <p className="text-xs text-muted-foreground">{stat.label}</p>
+                <p className="text-lg font-semibold">{stat.value}</p>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <div className="flex items-center gap-4">
+        <Tabs value={filter} onValueChange={(v) => setFilter(v as Filter)}>
+          <TabsList>
+            {FILTERS.map((f) => (
+              <TabsTrigger key={f} value={f}>{f}</TabsTrigger>
+            ))}
+          </TabsList>
+        </Tabs>
+        <div className="relative flex-1 max-w-xs ml-auto">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            placeholder="Search proposals..."
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            className="pl-9"
+          />
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2">
+        {filtered.map((proposal) => (
+          <ProposalCard key={proposal.id} proposal={proposal} />
+        ))}
+        {filtered.length === 0 && (
+          <p className="text-sm text-muted-foreground col-span-2 text-center py-8">
+            No proposals found.
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}

package/registry/layers/capability/crypto-governance-ui/files/proposal-card.tsx

@@ -0,0 +1,88 @@
+import { Card, CardContent } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Progress } from '@/components/ui/progress'
+import { Clock, Vote } from 'lucide-react'
+
+type ProposalStatus = 'active' | 'passed' | 'defeated' | 'pending'
+
+export interface Proposal {
+  id: number
+  title: string
+  status: ProposalStatus
+  author: string
+  createdAt: string
+  votesFor: number
+  votesAgainst: number
+  votesAbstain: number
+  quorumPct: number
+  timeRemaining: string
+}
+
+const STATUS_VARIANT: Record<ProposalStatus, 'default' | 'secondary' | 'destructive' | 'outline'> = {
+  active: 'default',
+  passed: 'secondary',
+  defeated: 'destructive',
+  pending: 'outline',
+}
+
+export function ProposalCard({ proposal }: { proposal: Proposal }) {
+  const totalVotes = proposal.votesFor + proposal.votesAgainst + proposal.votesAbstain
+  const forPct = totalVotes > 0 ? (proposal.votesFor / totalVotes) * 100 : 0
+  const againstPct = totalVotes > 0 ? (proposal.votesAgainst / totalVotes) * 100 : 0
+  const abstainPct = totalVotes > 0 ? (proposal.votesAbstain / totalVotes) * 100 : 0
+  const truncated = `${proposal.author.slice(0, 6)}...${proposal.author.slice(-4)}`
+
+  return (
+    <Card>
+      <CardContent className="p-4 space-y-3">
+        <div className="flex items-start justify-between gap-2">
+          <div className="min-w-0">
+            <div className="flex items-center gap-2 mb-1">
+              <span className="text-xs text-muted-foreground">#{proposal.id}</span>
+              <Badge variant={STATUS_VARIANT[proposal.status]}>{proposal.status}</Badge>
+            </div>
+            <h3 className="font-semibold leading-tight line-clamp-2">{proposal.title}</h3>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3 text-xs text-muted-foreground">
+          <span className="font-mono">{truncated}</span>
+          <span>{proposal.createdAt}</span>
+          <span className="flex items-center gap-1 ml-auto">
+            <Clock className="h-3 w-3" />
+            {proposal.timeRemaining}
+          </span>
+        </div>
+
+        <div className="space-y-1.5">
+          <div className="flex h-2 overflow-hidden rounded-full bg-muted">
+            <div className="bg-green-500 dark:bg-green-400" style={{ width: `${forPct}%` }} />
+            <div className="bg-red-500 dark:bg-red-400" style={{ width: `${againstPct}%` }} />
+            <div className="bg-gray-400 dark:bg-gray-500" style={{ width: `${abstainPct}%` }} />
+          </div>
+          <div className="flex justify-between text-xs text-muted-foreground">
+            <span className="text-green-500 dark:text-green-400">For {forPct.toFixed(1)}%</span>
+            <span className="text-red-500 dark:text-red-400">Against {againstPct.toFixed(1)}%</span>
+            <span>Abstain {abstainPct.toFixed(1)}%</span>
+          </div>
+        </div>
+
+        <div>
+          <div className="flex items-center justify-between text-xs text-muted-foreground mb-1">
+            <span>Quorum</span>
+            <span>{proposal.quorumPct}%</span>
+          </div>
+          <Progress value={proposal.quorumPct} className="h-1.5" />
+        </div>
+
+        {proposal.status === 'active' && (
+          <Button className="w-full" size="sm">
+            <Vote className="mr-2 h-3.5 w-3.5" />
+            Vote
+          </Button>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

package/registry/layers/capability/crypto-governance-ui/manifest.json

@@ -0,0 +1,24 @@
+{
+  "id": "crypto-governance-ui",
+  "description": "DAO governance dashboard with proposal cards, voting interface, and participation tracking.",
+  "group": "capability",
+  "appliesTo": ["nextjs-ts", "react-vite-ts", "fullstack-ts"],
+  "keywords": ["governance", "dao", "voting", "proposal", "quorum", "delegate", "governance token", "snapshot"],
+  "capabilityRequires": ["shadcn"],
+  "files": [
+    { "source": "files/proposal-card.tsx", "target": "src/components/crypto/proposal-card.tsx" },
+    { "source": "files/governance-page.tsx", "target": "src/components/crypto/governance-page.tsx" }
+  ],
+  "buildHints": {
+    "pages": ["/governance", "/governance/proposals/[id]", "/governance/create"],
+    "apiRoutes": ["/api/governance/proposals", "/api/governance/vote"],
+    "components": ["ProposalCard", "GovernancePage"],
+    "integrations": ["Governor contract ABI or Snapshot API", "Token balance query for voting power"],
+    "architectureNotes": [
+      "GovernancePage provides filtered proposal list with creation action.",
+      "ProposalCard displays vote distribution bars and quorum progress.",
+      "Wire voting actions to your Governor contract or Snapshot off-chain voting.",
+      "Voting power is display-only — fetch from token contract or delegation registry."
+    ]
+  }
+}

package/registry/layers/capability/crypto-launchpad-ui/files/sale-card.tsx

@@ -0,0 +1,113 @@
+import { Card, CardContent } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Progress } from '@/components/ui/progress'
+import { Separator } from '@/components/ui/separator'
+import { Clock, Users, Rocket } from 'lucide-react'
+
+type SaleStatus = 'upcoming' | 'live' | 'ended' | 'sold-out'
+
+export interface Sale {
+  id: string
+  name: string
+  tokenSymbol: string
+  status: SaleStatus
+  raised: number
+  hardCap: number
+  price: string
+  totalSupply: string
+  vestingSummary: string
+  participants: number
+  countdown?: string
+  logoColor: string
+}
+
+const STATUS_CONFIG: Record<SaleStatus, { variant: 'default' | 'secondary' | 'destructive' | 'outline'; label: string }> = {
+  upcoming: { variant: 'outline', label: 'Upcoming' },
+  live: { variant: 'default', label: 'Live' },
+  ended: { variant: 'secondary', label: 'Ended' },
+  'sold-out': { variant: 'destructive', label: 'Sold Out' },
+}
+
+export function SaleCard({ sale }: { sale: Sale }) {
+  const config = STATUS_CONFIG[sale.status]
+  const raisedPct = Math.min((sale.raised / sale.hardCap) * 100, 100)
+
+  return (
+    <Card>
+      <CardContent className="p-4 space-y-4">
+        <div className="flex items-start justify-between">
+          <div className="flex items-center gap-3">
+            <div
+              className="flex h-12 w-12 items-center justify-center rounded-xl text-lg font-bold text-white"
+              style={{ backgroundColor: sale.logoColor }}
+            >
+              {sale.tokenSymbol.slice(0, 2)}
+            </div>
+            <div>
+              <h3 className="font-semibold">{sale.name}</h3>
+              <p className="text-sm text-muted-foreground">${sale.tokenSymbol}</p>
+            </div>
+          </div>
+          <Badge variant={config.variant}>{config.label}</Badge>
+        </div>
+
+        <div>
+          <div className="flex items-center justify-between text-sm mb-1.5">
+            <span className="text-muted-foreground">Raised</span>
+            <span className="font-medium">
+              ${sale.raised.toLocaleString()} / ${sale.hardCap.toLocaleString()}
+            </span>
+          </div>
+          <Progress value={raisedPct} className="h-2" />
+          <p className="text-xs text-muted-foreground mt-1 text-right">{raisedPct.toFixed(1)}%</p>
+        </div>
+
+        <div className="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
+          <div>
+            <p className="text-xs text-muted-foreground">Price</p>
+            <p className="font-medium">{sale.price}</p>
+          </div>
+          <div>
+            <p className="text-xs text-muted-foreground">Hard Cap</p>
+            <p className="font-medium">${sale.hardCap.toLocaleString()}</p>
+          </div>
+          <div>
+            <p className="text-xs text-muted-foreground">Total Supply</p>
+            <p className="font-medium">{sale.totalSupply}</p>
+          </div>
+          <div>
+            <p className="text-xs text-muted-foreground">Vesting</p>
+            <p className="font-medium">{sale.vestingSummary}</p>
+          </div>
+        </div>
+
+        <Separator />
+
+        <div className="flex items-center justify-between text-sm text-muted-foreground">
+          <span className="flex items-center gap-1.5">
+            <Users className="h-3.5 w-3.5" />
+            {sale.participants.toLocaleString()} participants
+          </span>
+          {sale.countdown && (
+            <span className="flex items-center gap-1.5">
+              <Clock className="h-3.5 w-3.5" />
+              {sale.countdown}
+            </span>
+          )}
+          {sale.status === 'live' && (
+            <span className="flex items-center gap-1.5 text-green-500 dark:text-green-400">
+              <span className="h-2 w-2 rounded-full bg-green-500 animate-pulse" />
+              Live Now
+            </span>
+          )}
+        </div>
+
+        <Button className="w-full" disabled={sale.status !== 'live'}>
+          <Rocket className="mr-2 h-4 w-4" />
+          {sale.status === 'live' ? 'Participate' : sale.status === 'upcoming' ? 'Not Started' : 'Sale Ended'}
+        </Button>
+      </CardContent>
+    </Card>
+  )
+}

package/registry/layers/capability/crypto-launchpad-ui/files/vesting-schedule.tsx

@@ -0,0 +1,101 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import { Gift } from 'lucide-react'
+
+export interface VestingMilestone {
+  date: string
+  unlockPct: number
+  cumulativePct: number
+  label: string
+}
+
+export interface VestingInfo {
+  tgeUnlockPct: number
+  cliffMonths: number
+  vestingMonths: number
+  milestones: VestingMilestone[]
+  currentIndex: number
+  claimableAmount: string
+  tokenSymbol: string
+}
+
+export function VestingSchedule({ vesting }: { vesting: VestingInfo }) {
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <CardTitle className="text-base">Vesting Schedule</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="grid grid-cols-3 gap-2 text-center">
+          <div>
+            <p className="text-xs text-muted-foreground">TGE Unlock</p>
+            <p className="text-sm font-semibold">{vesting.tgeUnlockPct}%</p>
+          </div>
+          <div>
+            <p className="text-xs text-muted-foreground">Cliff</p>
+            <p className="text-sm font-semibold">{vesting.cliffMonths}mo</p>
+          </div>
+          <div>
+            <p className="text-xs text-muted-foreground">Vesting</p>
+            <p className="text-sm font-semibold">{vesting.vestingMonths}mo linear</p>
+          </div>
+        </div>
+
+        <Separator />
+
+        <div className="relative space-y-0">
+          {vesting.milestones.map((milestone, idx) => {
+            const isCurrent = idx === vesting.currentIndex
+            const isPast = idx < vesting.currentIndex
+
+            return (
+              <div key={milestone.date} className="flex items-start gap-3 pb-4 last:pb-0">
+                <div className="flex flex-col items-center">
+                  <div className={`h-3 w-3 rounded-full border-2 ${
+                    isCurrent
+                      ? 'border-primary bg-primary'
+                      : isPast
+                        ? 'border-primary/50 bg-primary/50'
+                        : 'border-muted-foreground/30 bg-background'
+                  }`} />
+                  {idx < vesting.milestones.length - 1 && (
+                    <div className={`w-0.5 flex-1 min-h-[24px] ${
+                      isPast ? 'bg-primary/50' : 'bg-muted-foreground/20'
+                    }`} />
+                  )}
+                </div>
+                <div className="flex-1 -mt-0.5">
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm font-medium">{milestone.label}</span>
+                    {isCurrent && <Badge variant="default" className="text-xs">Current</Badge>}
+                  </div>
+                  <div className="flex items-center justify-between text-xs text-muted-foreground mt-0.5">
+                    <span>{milestone.date}</span>
+                    <span>{milestone.unlockPct}% unlock ({milestone.cumulativePct}% total)</span>
+                  </div>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+
+        <Separator />
+
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-xs text-muted-foreground">Claimable</p>
+            <p className="text-lg font-semibold">
+              {vesting.claimableAmount} {vesting.tokenSymbol}
+            </p>
+          </div>
+          <Button disabled={vesting.claimableAmount === '0'}>
+            <Gift className="mr-2 h-4 w-4" />
+            Claim
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package/registry/layers/capability/crypto-launchpad-ui/manifest.json

@@ -0,0 +1,24 @@
+{
+  "id": "crypto-launchpad-ui",
+  "description": "Token launchpad with sale cards, progress tracking, vesting schedules, and participation interface.",
+  "group": "capability",
+  "appliesTo": ["nextjs-ts", "react-vite-ts", "fullstack-ts"],
+  "keywords": ["launchpad", "ido", "ico", "token sale", "fair launch", "whitelist", "vesting", "presale"],
+  "capabilityRequires": ["shadcn"],
+  "files": [
+    { "source": "files/sale-card.tsx", "target": "src/components/crypto/sale-card.tsx" },
+    { "source": "files/vesting-schedule.tsx", "target": "src/components/crypto/vesting-schedule.tsx" }
+  ],
+  "buildHints": {
+    "pages": ["/launchpad", "/launchpad/[id]", "/launchpad/[id]/vesting"],
+    "apiRoutes": ["/api/launchpad/sales", "/api/launchpad/participate"],
+    "components": ["SaleCard", "VestingSchedule"],
+    "integrations": ["Launchpad contract ABI for participation and claiming", "Whitelist/merkle proof verification"],
+    "architectureNotes": [
+      "SaleCard displays sale progress with countdown and participation action.",
+      "VestingSchedule renders timeline with claimable token amounts.",
+      "Wire participation to your launchpad contract.",
+      "Whitelist verification and vesting claims are contract interactions — implement via SDK."
+    ]
+  }
+}

package/registry/layers/capability/crypto-portfolio-ui/files/portfolio-overview.tsx

@@ -0,0 +1,118 @@
+'use client'
+
+import { useState } from 'react'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import {
+  Table,
+  TableBody,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { Button } from '@/components/ui/button'
+import { TrendingUp, TrendingDown } from 'lucide-react'
+import { TokenRow, type TokenHolding } from './token-row'
+
+const CHAINS = ['All', 'Ethereum', 'Solana', 'Arbitrum', 'Base']
+
+type SortKey = 'value' | 'change' | 'name'
+
+const DEMO_HOLDINGS: TokenHolding[] = [
+  { symbol: 'ETH', name: 'Ethereum', balance: '4.25', price: '$1,850.00', value: '$7,862.50', change: 2.4, portfolioPct: 45, color: '#627EEA' },
+  { symbol: 'SOL', name: 'Solana', balance: '120', price: '$22.50', value: '$2,700.00', change: -1.8, portfolioPct: 15, color: '#9945FF' },
+  { symbol: 'USDC', name: 'USD Coin', balance: '3,500', price: '$1.00', value: '$3,500.00', change: 0.01, portfolioPct: 20, color: '#2775CA' },
+  { symbol: 'LINK', name: 'Chainlink', balance: '200', price: '$7.80', value: '$1,560.00', change: 5.2, portfolioPct: 9, color: '#2A5ADA' },
+  { symbol: 'ARB', name: 'Arbitrum', balance: '1,800', price: '$1.05', value: '$1,890.00', change: -3.1, portfolioPct: 11, color: '#28A0F0' },
+]
+
+export function PortfolioOverview() {
+  const [chain, setChain] = useState('All')
+  const [sortBy, setSortBy] = useState<SortKey>('value')
+
+  const totalValue = '$17,512.50'
+  const totalChange = 1.8
+
+  const sorted = [...DEMO_HOLDINGS].sort((a, b) => {
+    if (sortBy === 'value') return parseFloat(b.value.replace(/[$,]/g, '')) - parseFloat(a.value.replace(/[$,]/g, ''))
+    if (sortBy === 'change') return Math.abs(b.change) - Math.abs(a.change)
+    return a.name.localeCompare(b.name)
+  })
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardContent className="p-6">
+          <p className="text-sm text-muted-foreground">Total Portfolio Value</p>
+          <div className="flex items-baseline gap-3 mt-1">
+            <span className="text-4xl font-bold">{totalValue}</span>
+            <span className={`flex items-center gap-1 text-sm font-medium ${totalChange >= 0 ? 'text-green-500 dark:text-green-400' : 'text-red-500 dark:text-red-400'}`}>
+              {totalChange >= 0 ? <TrendingUp className="h-4 w-4" /> : <TrendingDown className="h-4 w-4" />}
+              {totalChange >= 0 ? '+' : ''}{totalChange}% (24h)
+            </span>
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="grid gap-6 md:grid-cols-[1fr_2fr]">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-base">Allocation</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex h-48 items-center justify-center rounded-lg border border-dashed text-sm text-muted-foreground">
+              Chart placeholder
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-base">Holdings</CardTitle>
+            <div className="flex items-center gap-1">
+              {(['value', 'change', 'name'] as SortKey[]).map((key) => (
+                <Button
+                  key={key}
+                  variant={sortBy === key ? 'default' : 'ghost'}
+                  size="sm"
+                  className="h-7 text-xs capitalize"
+                  onClick={() => setSortBy(key)}
+                >
+                  {key}
+                </Button>
+              ))}
+            </div>
+          </CardHeader>
+          <CardContent>
+            <Tabs value={chain} onValueChange={setChain}>
+              <TabsList className="mb-3">
+                {CHAINS.map((c) => (
+                  <TabsTrigger key={c} value={c} className="text-xs">
+                    {c}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </Tabs>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Token</TableHead>
+                  <TableHead>Balance</TableHead>
+                  <TableHead>Price</TableHead>
+                  <TableHead>Value</TableHead>
+                  <TableHead>24h</TableHead>
+                  <TableHead>Share</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {sorted.map((holding) => (
+                  <TokenRow key={holding.symbol} holding={holding} />
+                ))}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}