@tangle-network/starter-foundry 0.1.0

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

@@ -0,0 +1,79 @@
+'use client'
+
+import { useState } from 'react'
+import { TableCell, TableRow } from '@/components/ui/table'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Progress } from '@/components/ui/progress'
+import { ExternalLink, ChevronDown, ChevronUp } from 'lucide-react'
+
+export interface TokenHolding {
+  symbol: string
+  name: string
+  balance: string
+  price: string
+  value: string
+  change: number
+  portfolioPct: number
+  color: string
+}
+
+export function TokenRow({ holding }: { holding: TokenHolding }) {
+  const [expanded, setExpanded] = useState(false)
+  const isPositive = holding.change >= 0
+
+  return (
+    <>
+      <TableRow
+        className="cursor-pointer"
+        onClick={() => setExpanded(!expanded)}
+      >
+        <TableCell>
+          <div className="flex items-center gap-2">
+            <div
+              className="flex h-7 w-7 items-center justify-center rounded-full text-[10px] font-bold text-white"
+              style={{ backgroundColor: holding.color }}
+            >
+              {holding.symbol[0]}
+            </div>
+            <div>
+              <p className="text-sm font-medium">{holding.symbol}</p>
+              <p className="text-xs text-muted-foreground">{holding.name}</p>
+            </div>
+          </div>
+        </TableCell>
+        <TableCell className="text-sm">{holding.balance}</TableCell>
+        <TableCell className="text-sm">{holding.price}</TableCell>
+        <TableCell className="text-sm font-medium">{holding.value}</TableCell>
+        <TableCell>
+          <Badge variant="outline" className={isPositive ? 'text-green-500 border-green-200 dark:border-green-800' : 'text-red-500 border-red-200 dark:border-red-800'}>
+            {isPositive ? '+' : ''}{holding.change}%
+          </Badge>
+        </TableCell>
+        <TableCell>
+          <div className="flex items-center gap-2">
+            <Progress value={holding.portfolioPct} className="h-1.5 w-16" />
+            <span className="text-xs text-muted-foreground">{holding.portfolioPct}%</span>
+            {expanded ? <ChevronUp className="h-3.5 w-3.5 text-muted-foreground" /> : <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />}
+          </div>
+        </TableCell>
+      </TableRow>
+      {expanded && (
+        <TableRow>
+          <TableCell colSpan={6} className="bg-muted/30 dark:bg-muted/10">
+            <div className="flex items-center gap-3 py-1">
+              <Button variant="ghost" size="sm" className="h-7 gap-1.5 text-xs">
+                Transaction History
+                <ExternalLink className="h-3 w-3" />
+              </Button>
+              <Button variant="ghost" size="sm" className="h-7 gap-1.5 text-xs">
+                View on Explorer
+                <ExternalLink className="h-3 w-3" />
+              </Button>
+            </div>
+          </TableCell>
+        </TableRow>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,24 @@
+{
+  "id": "crypto-portfolio-ui",
+  "description": "Wallet portfolio tracker with holdings table, asset allocation, and multi-chain balance overview.",
+  "group": "capability",
+  "appliesTo": ["nextjs-ts", "react-vite-ts", "fullstack-ts"],
+  "keywords": ["portfolio", "wallet tracker", "balance", "holdings", "token balance", "net worth", "pnl"],
+  "capabilityRequires": ["shadcn"],
+  "files": [
+    { "source": "files/portfolio-overview.tsx", "target": "src/components/crypto/portfolio-overview.tsx" },
+    { "source": "files/token-row.tsx", "target": "src/components/crypto/token-row.tsx" }
+  ],
+  "buildHints": {
+    "pages": ["/portfolio", "/portfolio/[chain]"],
+    "apiRoutes": ["/api/portfolio/holdings", "/api/portfolio/history"],
+    "components": ["PortfolioOverview", "TokenRow"],
+    "integrations": ["Token price API (CoinGecko, DeFiLlama)", "Multi-chain balance indexer or RPC"],
+    "architectureNotes": [
+      "PortfolioOverview displays total value with chain-filtered holdings table.",
+      "TokenRow renders individual token holding with expandable details.",
+      "Chart area is a placeholder — use chart-widget layer for actual charts.",
+      "Wire balance fetching to your indexer or multi-chain RPC aggregator."
+    ]
+  }
+}

package/registry/layers/capability/crypto-staking-ui/files/staking-dashboard.tsx

@@ -0,0 +1,170 @@
+'use client'
+
+import { useState } from 'react'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { Coins, TrendingUp, Clock, Gift } from 'lucide-react'
+
+interface Position {
+  validator: string
+  amount: string
+  rewards: string
+  apr: string
+  status: 'active' | 'unstaking'
+}
+
+const POSITIONS: Position[] = [
+  { validator: 'Figment', amount: '32.0 ETH', rewards: '1.24 ETH', apr: '4.2%', status: 'active' },
+  { validator: 'Lido', amount: '10.0 ETH', rewards: '0.38 ETH', apr: '3.9%', status: 'active' },
+  { validator: 'Rocket Pool', amount: '5.0 ETH', rewards: '0.12 ETH', apr: '4.5%', status: 'unstaking' },
+]
+
+export function StakingDashboard() {
+  const [stakeAmount, setStakeAmount] = useState('')
+  const [unstakeAmount, setUnstakeAmount] = useState('')
+
+  const stats = [
+    { label: 'Total Staked', value: '47.0 ETH', icon: Coins },
+    { label: 'Rewards Earned', value: '1.74 ETH', icon: Gift },
+    { label: 'Current APR', value: '4.2%', icon: TrendingUp },
+    { label: 'Next Reward', value: '~12h', icon: Clock },
+  ]
+
+  return (
+    <div className="space-y-6">
+      <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>
+
+      <Card>
+        <CardContent className="pt-6">
+          <Tabs defaultValue="stake">
+            <TabsList className="mb-4">
+              <TabsTrigger value="stake">Stake</TabsTrigger>
+              <TabsTrigger value="unstake">Unstake</TabsTrigger>
+            </TabsList>
+            <TabsContent value="stake" className="space-y-4">
+              <div>
+                <div className="flex items-center justify-between mb-1.5">
+                  <span className="text-sm text-muted-foreground">Amount</span>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-6 text-xs"
+                    onClick={() => setStakeAmount('47.0')}
+                  >
+                    MAX
+                  </Button>
+                </div>
+                <Input
+                  type="number"
+                  placeholder="0.0"
+                  value={stakeAmount}
+                  onChange={(e) => setStakeAmount(e.target.value)}
+                />
+              </div>
+              {stakeAmount && (
+                <div className="rounded-lg border px-3 py-2 text-sm text-muted-foreground">
+                  <div className="flex justify-between">
+                    <span>Est. Annual Reward</span>
+                    <span className="text-green-500 dark:text-green-400">
+                      ~{(parseFloat(stakeAmount) * 0.042).toFixed(3)} ETH
+                    </span>
+                  </div>
+                </div>
+              )}
+              <Button className="w-full" disabled={!stakeAmount}>Stake</Button>
+            </TabsContent>
+            <TabsContent value="unstake" className="space-y-4">
+              <div>
+                <div className="flex items-center justify-between mb-1.5">
+                  <span className="text-sm text-muted-foreground">Amount</span>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-6 text-xs"
+                    onClick={() => setUnstakeAmount('47.0')}
+                  >
+                    MAX
+                  </Button>
+                </div>
+                <Input
+                  type="number"
+                  placeholder="0.0"
+                  value={unstakeAmount}
+                  onChange={(e) => setUnstakeAmount(e.target.value)}
+                />
+              </div>
+              <div className="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-200">
+                Cooldown period: ~7 days before funds are withdrawable.
+              </div>
+              <Button className="w-full" variant="outline" disabled={!unstakeAmount}>
+                Unstake
+              </Button>
+            </TabsContent>
+          </Tabs>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Active Positions</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Validator</TableHead>
+                <TableHead>Staked</TableHead>
+                <TableHead>Rewards</TableHead>
+                <TableHead>APR</TableHead>
+                <TableHead className="text-right">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {POSITIONS.map((pos) => (
+                <TableRow key={pos.validator}>
+                  <TableCell className="font-medium">{pos.validator}</TableCell>
+                  <TableCell>{pos.amount}</TableCell>
+                  <TableCell className="text-green-500 dark:text-green-400">{pos.rewards}</TableCell>
+                  <TableCell>{pos.apr}</TableCell>
+                  <TableCell className="text-right">
+                    <div className="flex items-center justify-end gap-2">
+                      <Badge variant={pos.status === 'active' ? 'default' : 'secondary'}>
+                        {pos.status}
+                      </Badge>
+                      <Button size="sm" variant="outline">Claim</Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/registry/layers/capability/crypto-staking-ui/files/validator-card.tsx

@@ -0,0 +1,82 @@
+import { Card, CardContent } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { Users, Shield } from 'lucide-react'
+
+export interface Validator {
+  name: string
+  address: string
+  commission: number
+  uptime: number
+  totalDelegated: string
+  delegators: number
+  apr: string
+  status: 'active' | 'inactive' | 'jailed'
+}
+
+const STATUS_VARIANT: Record<string, 'default' | 'secondary' | 'destructive'> = {
+  active: 'default',
+  inactive: 'secondary',
+  jailed: 'destructive',
+}
+
+export function ValidatorCard({ validator }: { validator: Validator }) {
+  const truncated = `${validator.address.slice(0, 6)}...${validator.address.slice(-4)}`
+
+  return (
+    <Card>
+      <CardContent className="p-4">
+        <div className="flex items-start justify-between mb-3">
+          <div className="flex items-center gap-3">
+            <Avatar className="h-10 w-10">
+              <AvatarFallback className="text-sm font-semibold">
+                {validator.name.slice(0, 2).toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
+            <div>
+              <p className="font-medium">{validator.name}</p>
+              <p className="text-xs text-muted-foreground font-mono">{truncated}</p>
+            </div>
+          </div>
+          <Badge variant={STATUS_VARIANT[validator.status]}>{validator.status}</Badge>
+        </div>
+
+        <div className="mb-3">
+          <p className="text-3xl font-bold text-green-500 dark:text-green-400">
+            {validator.apr}
+          </p>
+          <p className="text-xs text-muted-foreground">Annual Percentage Rate</p>
+        </div>
+
+        <div className="grid grid-cols-3 gap-2 text-center mb-4">
+          <div>
+            <p className="text-xs text-muted-foreground">Commission</p>
+            <p className="text-sm font-medium">{validator.commission}%</p>
+          </div>
+          <div>
+            <p className="text-xs text-muted-foreground flex items-center justify-center gap-1">
+              <Shield className="h-3 w-3" /> Uptime
+            </p>
+            <p className="text-sm font-medium">{validator.uptime}%</p>
+          </div>
+          <div>
+            <p className="text-xs text-muted-foreground flex items-center justify-center gap-1">
+              <Users className="h-3 w-3" /> Delegators
+            </p>
+            <p className="text-sm font-medium">{validator.delegators}</p>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between text-sm text-muted-foreground mb-3">
+          <span>Total Delegated</span>
+          <span className="font-medium text-foreground">{validator.totalDelegated}</span>
+        </div>
+
+        <Button className="w-full" disabled={validator.status !== 'active'}>
+          Delegate
+        </Button>
+      </CardContent>
+    </Card>
+  )
+}

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

@@ -0,0 +1,24 @@
+{
+  "id": "crypto-staking-ui",
+  "description": "Staking dashboard with stake/unstake interface, validator selection, and reward tracking.",
+  "group": "capability",
+  "appliesTo": ["nextjs-ts", "react-vite-ts", "fullstack-ts"],
+  "keywords": ["staking", "stake", "unstake", "delegate", "validator", "rewards", "apr", "apy", "compound"],
+  "capabilityRequires": ["shadcn"],
+  "files": [
+    { "source": "files/staking-dashboard.tsx", "target": "src/components/crypto/staking-dashboard.tsx" },
+    { "source": "files/validator-card.tsx", "target": "src/components/crypto/validator-card.tsx" }
+  ],
+  "buildHints": {
+    "pages": ["/staking", "/staking/validators", "/staking/validators/[address]"],
+    "apiRoutes": ["/api/staking/positions", "/api/staking/validators"],
+    "components": ["StakingDashboard", "ValidatorCard"],
+    "integrations": ["Staking contract ABI for stake/unstake/claim", "Validator API for uptime and commission data"],
+    "architectureNotes": [
+      "StakingDashboard provides tabbed stake/unstake interface with position tracking.",
+      "ValidatorCard displays validator info with delegation action.",
+      "Wire staking actions to your staking contract or protocol SDK.",
+      "Reward calculations are display-only — fetch APR from on-chain or API."
+    ]
+  }
+}

package/registry/layers/capability/crypto-swap-ui/files/pool-card.tsx

@@ -0,0 +1,93 @@
+import { Card, CardContent, CardHeader } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+
+export interface Pool {
+  id: string
+  tokenA: { symbol: string; color: string }
+  tokenB: { symbol: string; color: string }
+  feeTier: string
+  tvl: string
+  volume24h: string
+  apr: string
+  userShare?: {
+    percentage: string
+    amountA: string
+    amountB: string
+  }
+}
+
+export function PoolCard({ pool }: { pool: Pool }) {
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <div className="flex -space-x-2">
+              <div
+                className="flex h-8 w-8 items-center justify-center rounded-full text-xs font-bold text-white ring-2 ring-background"
+                style={{ backgroundColor: pool.tokenA.color }}
+              >
+                {pool.tokenA.symbol[0]}
+              </div>
+              <div
+                className="flex h-8 w-8 items-center justify-center rounded-full text-xs font-bold text-white ring-2 ring-background"
+                style={{ backgroundColor: pool.tokenB.color }}
+              >
+                {pool.tokenB.symbol[0]}
+              </div>
+            </div>
+            <span className="font-semibold">
+              {pool.tokenA.symbol}/{pool.tokenB.symbol}
+            </span>
+          </div>
+          <Badge variant="secondary">{pool.feeTier}</Badge>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <div className="grid grid-cols-3 gap-2 text-center">
+          <div>
+            <p className="text-xs text-muted-foreground">TVL</p>
+            <p className="text-sm font-medium">{pool.tvl}</p>
+          </div>
+          <div>
+            <p className="text-xs text-muted-foreground">Volume 24h</p>
+            <p className="text-sm font-medium">{pool.volume24h}</p>
+          </div>
+          <div>
+            <p className="text-xs text-muted-foreground">APR</p>
+            <p className="text-sm font-medium text-green-500 dark:text-green-400">{pool.apr}</p>
+          </div>
+        </div>
+
+        {pool.userShare && (
+          <>
+            <Separator />
+            <div>
+              <p className="text-xs text-muted-foreground mb-1.5">Your Position</p>
+              <div className="flex items-center justify-between text-sm">
+                <span>Share: {pool.userShare.percentage}</span>
+              </div>
+              <div className="flex items-center justify-between text-sm text-muted-foreground">
+                <span>{pool.userShare.amountA} {pool.tokenA.symbol}</span>
+                <span>{pool.userShare.amountB} {pool.tokenB.symbol}</span>
+              </div>
+            </div>
+          </>
+        )}
+
+        <div className="flex gap-2">
+          <Button className="flex-1" size="sm">
+            Add Liquidity
+          </Button>
+          {pool.userShare && (
+            <Button variant="outline" className="flex-1" size="sm">
+              Remove
+            </Button>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

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

@@ -0,0 +1,151 @@
+'use client'
+
+import { useState } from 'react'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import { ArrowUpDown, Settings, ChevronDown, Loader2 } from 'lucide-react'
+
+interface TokenInput {
+  symbol: string
+  amount: string
+  balance: string
+}
+
+const SLIPPAGE_OPTIONS = ['0.1', '0.5', '1']
+
+export function SwapCard() {
+  const [from, setFrom] = useState<TokenInput>({ symbol: 'ETH', amount: '', balance: '1.234' })
+  const [to, setTo] = useState<TokenInput>({ symbol: 'USDC', amount: '', balance: '500.00' })
+  const [slippage, setSlippage] = useState('0.5')
+  const [customSlippage, setCustomSlippage] = useState('')
+  const [swapping, setSwapping] = useState(false)
+  const [rotated, setRotated] = useState(false)
+
+  const handleSwapDirection = () => {
+    setFrom(to)
+    setTo(from)
+    setRotated(!rotated)
+  }
+
+  const activeSlippage = customSlippage || slippage
+
+  return (
+    <Card className="w-full max-w-md mx-auto">
+      <CardHeader className="flex flex-row items-center justify-between pb-2">
+        <CardTitle className="text-lg">Swap</CardTitle>
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button variant="ghost" size="icon" className="h-8 w-8">
+              <Settings className="h-4 w-4" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-64" align="end">
+            <p className="text-sm font-medium mb-2">Slippage Tolerance</p>
+            <div className="flex items-center gap-1.5">
+              {SLIPPAGE_OPTIONS.map((opt) => (
+                <Button
+                  key={opt}
+                  variant={slippage === opt && !customSlippage ? 'default' : 'outline'}
+                  size="sm"
+                  onClick={() => { setSlippage(opt); setCustomSlippage('') }}
+                >
+                  {opt}%
+                </Button>
+              ))}
+              <Input
+                placeholder="Custom"
+                value={customSlippage}
+                onChange={(e) => setCustomSlippage(e.target.value)}
+                className="h-8 w-20 text-sm"
+              />
+            </div>
+          </PopoverContent>
+        </Popover>
+      </CardHeader>
+      <CardContent className="space-y-1">
+        <div className="rounded-lg border bg-muted/30 p-3 dark:bg-muted/10">
+          <div className="flex items-center justify-between mb-1">
+            <span className="text-xs text-muted-foreground">From</span>
+            <span className="text-xs text-muted-foreground">Balance: {from.balance}</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button variant="outline" size="sm" className="shrink-0">
+              <div className="h-5 w-5 rounded-full bg-primary/20 mr-1.5" />
+              {from.symbol}
+              <ChevronDown className="ml-1 h-3.5 w-3.5" />
+            </Button>
+            <Input
+              type="number"
+              placeholder="0.0"
+              value={from.amount}
+              onChange={(e) => setFrom({ ...from, amount: e.target.value })}
+              className="border-0 bg-transparent text-right text-lg font-medium p-0 h-auto focus-visible:ring-0"
+            />
+          </div>
+        </div>
+
+        <div className="flex justify-center -my-2 relative z-10">
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8 rounded-full"
+            onClick={handleSwapDirection}
+          >
+            <ArrowUpDown className={`h-4 w-4 transition-transform ${rotated ? 'rotate-180' : ''}`} />
+          </Button>
+        </div>
+
+        <div className="rounded-lg border bg-muted/30 p-3 dark:bg-muted/10">
+          <div className="flex items-center justify-between mb-1">
+            <span className="text-xs text-muted-foreground">To</span>
+            <span className="text-xs text-muted-foreground">Balance: {to.balance}</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button variant="outline" size="sm" className="shrink-0">
+              <div className="h-5 w-5 rounded-full bg-primary/20 mr-1.5" />
+              {to.symbol}
+              <ChevronDown className="ml-1 h-3.5 w-3.5" />
+            </Button>
+            <Input
+              type="number"
+              placeholder="0.0"
+              value={to.amount}
+              onChange={(e) => setTo({ ...to, amount: e.target.value })}
+              className="border-0 bg-transparent text-right text-lg font-medium p-0 h-auto focus-visible:ring-0"
+            />
+          </div>
+        </div>
+
+        <div className="rounded-lg border px-3 py-2 text-xs text-muted-foreground space-y-1">
+          <div className="flex justify-between">
+            <span>Rate</span>
+            <span>1 {from.symbol} = 1,850.00 {to.symbol}</span>
+          </div>
+          <div className="flex justify-between">
+            <span>Price Impact</span>
+            <span className="text-green-500 dark:text-green-400">&lt;0.01%</span>
+          </div>
+          <div className="flex justify-between">
+            <span>Min. Received</span>
+            <span>— {to.symbol}</span>
+          </div>
+          <div className="flex justify-between">
+            <span>Slippage</span>
+            <span>{activeSlippage}%</span>
+          </div>
+        </div>
+
+        <Button className="w-full" size="lg" disabled={swapping || !from.amount}>
+          {swapping ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
+          {swapping ? 'Swapping...' : 'Swap'}
+        </Button>
+      </CardContent>
+    </Card>
+  )
+}