{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "defi-staking-yield-vault",
  "title": "Defi Staking Yield Vault",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/defi-staking-yield-vault/DefiStakingYieldVault.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref, computed, type HTMLAttributes } from 'vue'\nimport {\n  ArrowUpRight,\n  Check,\n  Coins,\n  Copy,\n  Flame,\n  Fuel,\n  Lock,\n  Percent,\n  RefreshCw,\n  ShieldAlert,\n  ShieldCheck,\n  TrendingUp,\n  Unlock,\n  Wallet,\n  Zap,\n} from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Separator } from '@/components/ui/separator'\nimport { Slider } from '@/components/ui/slider'\n\ninterface Props {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<Props>()\n\n// Wallet State\nconst isWalletConnected = ref(true)\nconst walletAddress = '0x71C856402244243b92834b9d09c2534575823a9F'\nconst shortAddress = '0x71C...3a9F'\nconst copied = ref(false)\n\nfunction copyAddress() {\n  if (typeof navigator !== 'undefined' && navigator.clipboard) {\n    navigator.clipboard.writeText(walletAddress)\n    copied.value = true\n    setTimeout(() => {\n      copied.value = false\n    }, 2000)\n  }\n}\n\nfunction toggleWallet() {\n  isWalletConnected.value = !isWalletConnected.value\n}\n\n// Staking Rewards Claim State\nconst unclaimedEth = ref(0.485)\nconst unclaimedUsd = computed(() =>\n  (unclaimedEth.value * 3450).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }),\n)\nconst isClaiming = ref(false)\nconst claimSuccess = ref(false)\n\nfunction handleClaimRewards() {\n  if (unclaimedEth.value <= 0 || isClaiming.value) return\n  isClaiming.value = true\n  setTimeout(() => {\n    isClaiming.value = false\n    claimSuccess.value = true\n    unclaimedEth.value = 0\n    setTimeout(() => {\n      claimSuccess.value = false\n    }, 3500)\n  }, 1200)\n}\n\n// Token Definitions\ninterface TokenOption {\n  symbol: string\n  name: string\n  price: number\n  balance: number\n  apyBoost: number\n  description: string\n  iconColor: string\n}\n\nconst tokenOptions: TokenOption[] = [\n  {\n    symbol: 'ETH',\n    name: 'Native Ether',\n    price: 3450.0,\n    balance: 32.5,\n    apyBoost: 0,\n    description: 'Base Layer Staking',\n    iconColor: '#627EEA',\n  },\n  {\n    symbol: 'stETH',\n    name: 'Lido Staked ETH',\n    price: 3450.0,\n    balance: 15.2,\n    apyBoost: 0,\n    description: '1:1 Rebase Token',\n    iconColor: '#00A3FF',\n  },\n  {\n    symbol: 'wstETH',\n    name: 'Wrapped stETH',\n    price: 4015.0,\n    balance: 8.4,\n    apyBoost: 0.15,\n    description: 'Compounding Value Token',\n    iconColor: '#0052FF',\n  },\n]\n\n// Lockup Durations\ninterface LockupOption {\n  id: string\n  label: string\n  durationText: string\n  days: number\n  boost: number\n  badge: string\n}\n\nconst lockupOptions: LockupOption[] = [\n  { id: 'flex', label: 'Flexible', durationText: '0-Day Lock', days: 0, boost: 0, badge: 'Flexible' },\n  { id: '30d', label: '30 Days', durationText: '30-Day Lock', days: 30, boost: 0.5, badge: '+0.5% APY' },\n  { id: '90d', label: '90 Days', durationText: '90-Day Lock', days: 90, boost: 1.2, badge: '+1.2% APY' },\n  { id: '365d', label: '365 Days', durationText: '365-Day Lock', days: 365, boost: 2.5, badge: '+2.5% APY' },\n]\n\n// Simulator State\nconst selectedTokenSymbol = ref('ETH')\nconst selectedLockupId = ref('flex')\nconst stakeAmountStr = ref('10.0')\nconst isStaking = ref(false)\nconst stakeSuccess = ref(false)\n\nconst currentToken = computed(() => tokenOptions.find((t) => t.symbol === selectedTokenSymbol.value) ?? tokenOptions[0])\nconst currentLockup = computed(() => lockupOptions.find((l) => l.id === selectedLockupId.value) ?? lockupOptions[0])\n\nconst parsedAmount = computed(() => {\n  const val = parseFloat(stakeAmountStr.value)\n  return isNaN(val) || val < 0 ? 0 : val\n})\n\nconst sliderValue = computed({\n  get: () => [Math.min(parsedAmount.value, currentToken.value.balance)],\n  set: (val: number[]) => {\n    if (val && val[0] !== undefined) {\n      stakeAmountStr.value = val[0].toFixed(2)\n    }\n  },\n})\n\nfunction setPercentageAmount(pct: number) {\n  const amt = currentToken.value.balance * (pct / 100)\n  stakeAmountStr.value = amt.toFixed(2)\n}\n\nfunction setMaxAmount() {\n  stakeAmountStr.value = currentToken.value.balance.toFixed(2)\n}\n\n// APY and Yield Calculations\nconst baseVaultApy = 7.42\nconst effectiveApy = computed(() => {\n  const total = baseVaultApy + currentLockup.value.boost + currentToken.value.apyBoost\n  return total.toFixed(2)\n})\n\nconst stakedFiatValue = computed(() => {\n  return (parsedAmount.value * currentToken.value.price).toLocaleString('en-US', {\n    minimumFractionDigits: 2,\n    maximumFractionDigits: 2,\n  })\n})\n\nconst annualYieldEth = computed(() => {\n  const rate = parseFloat(effectiveApy.value) / 100\n  return (parsedAmount.value * rate).toFixed(3)\n})\n\nconst annualYieldUsd = computed(() => {\n  const rate = parseFloat(effectiveApy.value) / 100\n  const usd = parsedAmount.value * rate * currentToken.value.price\n  return usd.toLocaleString('en-US', {\n    minimumFractionDigits: 2,\n    maximumFractionDigits: 2,\n  })\n})\n\nconst monthlyYieldUsd = computed(() => {\n  const rate = parseFloat(effectiveApy.value) / 100\n  const usd = (parsedAmount.value * rate * currentToken.value.price) / 12\n  return usd.toLocaleString('en-US', {\n    minimumFractionDigits: 2,\n    maximumFractionDigits: 2,\n  })\n})\n\nconst monthlyYieldEth = computed(() => {\n  const rate = parseFloat(effectiveApy.value) / 100\n  return ((parsedAmount.value * rate) / 12).toFixed(4)\n})\n\nconst dailyYieldUsd = computed(() => {\n  const rate = parseFloat(effectiveApy.value) / 100\n  const usd = (parsedAmount.value * rate * currentToken.value.price) / 365\n  return usd.toLocaleString('en-US', {\n    minimumFractionDigits: 2,\n    maximumFractionDigits: 2,\n  })\n})\n\nconst dailyYieldEth = computed(() => {\n  const rate = parseFloat(effectiveApy.value) / 100\n  return ((parsedAmount.value * rate) / 365).toFixed(5)\n})\n\nfunction handleExecuteStake() {\n  if (parsedAmount.value <= 0 || isStaking.value) return\n  isStaking.value = true\n  setTimeout(() => {\n    isStaking.value = false\n    stakeSuccess.value = true\n    setTimeout(() => {\n      stakeSuccess.value = false\n    }, 3500)\n  }, 1400)\n}\n\n// Yield Vaults Directory Data\ninterface VaultItem {\n  id: string\n  name: string\n  pairSymbol: string\n  protocol: string\n  apy: string\n  apyRaw: number\n  tvl: string\n  risk: 'Low Risk' | 'Medium Risk' | 'High Risk'\n  riskVariant: 'emerald' | 'amber' | 'rose'\n  strategy: string\n  metricLabel: string\n  metricValue: string\n  isCurrentVault?: boolean\n}\n\nconst yieldVaults: VaultItem[] = [\n  {\n    id: 'eth-usdc-lp',\n    name: 'ETH-USDC LP',\n    pairSymbol: 'ETH + USDC',\n    protocol: 'Uniswap v3 · Concentrated',\n    apy: '12.40%',\n    apyRaw: 12.4,\n    tvl: '$58,420,000.00',\n    risk: 'Medium Risk',\n    riskVariant: 'amber',\n    strategy: 'Automated Rebalancing Range ±5%',\n    metricLabel: '24h Volume',\n    metricValue: '$4.2M Vol',\n    isCurrentVault: false,\n  },\n  {\n    id: 'liquid-staked-eth',\n    name: 'Liquid Staked ETH',\n    pairSymbol: 'ETH / stETH',\n    protocol: 'Lido & Distributed Validator',\n    apy: '7.42%',\n    apyRaw: 7.42,\n    tvl: '$142,850,000.00',\n    risk: 'Low Risk',\n    riskVariant: 'emerald',\n    strategy: 'Consensus Layer + MEV Boost',\n    metricLabel: 'Lockup Period',\n    metricValue: 'Instant 0-Day',\n    isCurrentVault: true,\n  },\n  {\n    id: 'stablecoin-vault',\n    name: 'Stablecoin Multi-Vault',\n    pairSymbol: 'USDC + USDT + DAI',\n    protocol: 'Curve & Morpho Blue Optimizer',\n    apy: '9.80%',\n    apyRaw: 9.8,\n    tvl: '$94,180,000.00',\n    risk: 'Low Risk',\n    riskVariant: 'emerald',\n    strategy: 'Multi-Asset Lending & Arbitrage Yield',\n    metricLabel: 'Coverage',\n    metricValue: 'Nexus Mutual Protected',\n    isCurrentVault: false,\n  },\n]\n</script>\n\n<template>\n  <div data-slot=\"defi-staking-yield-vault\" :class=\"cn('mx-auto w-full max-w-6xl space-y-6', props.class)\">\n    <!-- Header Section -->\n    <header class=\"border-border/80 bg-card/60 rounded-xl border p-4 shadow-xs backdrop-blur-xs sm:p-6\">\n      <div class=\"flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between\">\n        <!-- Title & Protocol Badges -->\n        <div class=\"space-y-2\">\n          <div class=\"flex flex-wrap items-center gap-2.5\">\n            <div\n              class=\"bg-primary/10 text-primary border-primary/20 flex size-9 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n              aria-hidden=\"true\"\n            >\n              <Zap class=\"size-5\" />\n            </div>\n            <div>\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <h1 class=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl\">\n                  ETH Liquid Staking & Yield Vault v3\n                </h1>\n                <Badge variant=\"outline\" class=\"border-border/80 font-mono text-xs font-normal\"> v3.2 Protocol </Badge>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"flex flex-wrap items-center gap-2.5 text-xs\">\n            <!-- Audit Badge -->\n            <Badge variant=\"outline\" class=\"border-success/30 bg-success/10 text-success gap-1.5 font-normal\">\n              <ShieldCheck class=\"size-3.5\" aria-hidden=\"true\" />\n              Audited by Trail of Bits & OpenZeppelin\n            </Badge>\n\n            <!-- TVL Badge -->\n            <Badge variant=\"secondary\" class=\"gap-1.5 font-medium tabular-nums\">\n              <span class=\"bg-success size-1.5 animate-pulse rounded-full\" aria-hidden=\"true\" />\n              $142,850,000.00 TVL\n            </Badge>\n\n            <span class=\"text-muted-foreground hidden items-center gap-1 sm:inline-flex\">\n              <Zap class=\"text-warning size-3\" aria-hidden=\"true\" />\n              Auto-Compounding Enabled\n            </span>\n          </div>\n        </div>\n\n        <!-- Wallet Connection Action -->\n        <div class=\"flex flex-wrap items-center gap-2.5\">\n          <template v-if=\"isWalletConnected\">\n            <div class=\"border-border bg-muted/60 flex items-center gap-2 rounded-lg border px-3 py-1.5 shadow-xs\">\n              <span class=\"bg-success size-2 rounded-full\" aria-hidden=\"true\" />\n              <span class=\"text-foreground font-mono text-xs font-medium\">{{ shortAddress }}</span>\n              <Button\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                class=\"text-muted-foreground hover:text-foreground size-5\"\n                aria-label=\"Copy wallet address\"\n                @click=\"copyAddress\"\n              >\n                <Check v-if=\"copied\" class=\"text-success size-3\" aria-hidden=\"true\" />\n                <Copy v-else class=\"size-3\" aria-hidden=\"true\" />\n              </Button>\n            </div>\n            <Button variant=\"outline\" size=\"sm\" class=\"shadow-xs active:scale-[0.98]\" @click=\"toggleWallet\">\n              Disconnect\n            </Button>\n          </template>\n          <template v-else>\n            <Button size=\"sm\" class=\"gap-2 shadow-xs active:scale-[0.98]\" @click=\"toggleWallet\">\n              <Wallet class=\"size-4\" aria-hidden=\"true\" />\n              Connect Web3 Wallet\n            </Button>\n          </template>\n        </div>\n      </div>\n    </header>\n\n    <!-- 4 Staking Performance KPI Cards -->\n    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <!-- Card 1: Net Staking APY -->\n      <Card class=\"border-border/80 shadow-xs\">\n        <CardHeader class=\"pb-2\">\n          <div class=\"flex items-center justify-between\">\n            <CardDescription class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n              Net Staking APY\n            </CardDescription>\n            <div\n              class=\"border-success/30 bg-success/10 text-success flex size-7 items-center justify-center rounded-md border\"\n              aria-hidden=\"true\"\n            >\n              <TrendingUp class=\"size-4\" />\n            </div>\n          </div>\n          <div class=\"mt-1 flex items-baseline gap-2\">\n            <span class=\"text-success text-success text-2xl font-bold tracking-tight tabular-nums sm:text-3xl\">\n              7.42% APY\n            </span>\n          </div>\n        </CardHeader>\n        <CardContent class=\"text-muted-foreground space-y-1 text-xs\">\n          <div class=\"text-success flex items-center gap-1.5 font-medium\">\n            <span class=\"bg-success size-1.5 rounded-full\" aria-hidden=\"true\" />\n            Auto-Compounding daily\n          </div>\n          <p class=\"text-muted-foreground tabular-nums\">Base 4.92% + 2.50% MEV Boost</p>\n        </CardContent>\n      </Card>\n\n      <!-- Card 2: Your Staked Balance -->\n      <Card class=\"border-border/80 shadow-xs\">\n        <CardHeader class=\"pb-2\">\n          <div class=\"flex items-center justify-between\">\n            <CardDescription class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n              Your Staked Balance\n            </CardDescription>\n            <div\n              class=\"border-primary/30 bg-primary/10 text-primary flex size-7 items-center justify-center rounded-md border\"\n              aria-hidden=\"true\"\n            >\n              <Coins class=\"size-4\" />\n            </div>\n          </div>\n          <div class=\"mt-1 flex items-baseline gap-2\">\n            <span class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums sm:text-3xl\"> 24.50 ETH </span>\n          </div>\n        </CardHeader>\n        <CardContent class=\"text-muted-foreground space-y-1 text-xs\">\n          <div class=\"text-muted-foreground font-medium tabular-nums\">≈ $84,525.00 USD</div>\n          <div class=\"flex items-center gap-1\">\n            <Badge variant=\"outline\" class=\"border-border/80 px-1.5 py-0 text-xs font-normal\">\n              Active in Vault v3\n            </Badge>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Card 3: Unclaimed Rewards -->\n      <Card class=\"border-border/80 shadow-xs\">\n        <CardHeader class=\"pb-2\">\n          <div class=\"flex items-center justify-between\">\n            <CardDescription class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n              Unclaimed Rewards\n            </CardDescription>\n            <div\n              class=\"border-warning/30 bg-warning/10 text-warning flex size-7 items-center justify-center rounded-md border\"\n              aria-hidden=\"true\"\n            >\n              <Coins class=\"size-4\" />\n            </div>\n          </div>\n          <div class=\"mt-1 flex items-baseline gap-2\">\n            <span class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums sm:text-3xl\">\n              {{ unclaimedEth }} stETH\n            </span>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-2.5 text-xs\">\n          <div class=\"text-muted-foreground font-medium tabular-nums\">≈ ${{ unclaimedUsd }} USD</div>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            class=\"h-7 w-full gap-1.5 text-xs font-medium shadow-xs\"\n            :disabled=\"unclaimedEth <= 0 || isClaiming\"\n            @click=\"handleClaimRewards\"\n          >\n            <RefreshCw v-if=\"isClaiming\" class=\"size-3 animate-spin\" aria-hidden=\"true\" />\n            <Check v-else-if=\"claimSuccess\" class=\"text-success size-3\" aria-hidden=\"true\" />\n            <span v-if=\"isClaiming\">Claiming On-Chain...</span>\n            <span v-else-if=\"claimSuccess\">Rewards Claimed!</span>\n            <span v-else>Claim Rewards</span>\n          </Button>\n        </CardContent>\n      </Card>\n\n      <!-- Card 4: Staking Pool Share -->\n      <Card class=\"border-border/80 shadow-xs\">\n        <CardHeader class=\"pb-2\">\n          <div class=\"flex items-center justify-between\">\n            <CardDescription class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n              Staking Pool Share\n            </CardDescription>\n            <div\n              class=\"border-chart-1/30 bg-chart-1/10 text-chart-1 flex size-7 items-center justify-center rounded-md border\"\n              aria-hidden=\"true\"\n            >\n              <Percent class=\"size-4\" />\n            </div>\n          </div>\n          <div class=\"mt-1 flex items-baseline gap-2\">\n            <span class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums sm:text-3xl\"> 0.017% </span>\n          </div>\n        </CardHeader>\n        <CardContent class=\"text-muted-foreground space-y-2 text-xs\">\n          <div class=\"flex items-center justify-between\">\n            <span>of total vault</span>\n            <span class=\"text-foreground font-medium tabular-nums\">$142.85M TVL</span>\n          </div>\n          <div class=\"bg-muted/80 h-1.5 w-full overflow-hidden rounded-full\">\n            <div class=\"bg-primary h-full w-[17%] rounded-full\" />\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- 2-Column Staking Simulator & Yield Directory -->\n    <div class=\"grid grid-cols-1 gap-6 lg:grid-cols-12\">\n      <!-- Left Column: Deposit & Stake Calculator (7 Cols) -->\n      <div class=\"space-y-6 lg:col-span-7\">\n        <Card class=\"border-border/80 shadow-xs\">\n          <CardHeader class=\"pb-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"space-y-1\">\n                <CardTitle class=\"text-foreground flex items-center gap-2 text-base font-semibold sm:text-lg\">\n                  <Zap class=\"text-primary size-5\" aria-hidden=\"true\" />\n                  Deposit & Stake Calculator\n                </CardTitle>\n                <CardDescription class=\"text-muted-foreground text-xs\">\n                  Simulate staking yields with custom lockup multipliers and real-time auto-compounding.\n                </CardDescription>\n              </div>\n              <Badge variant=\"outline\" class=\"border-success/30 bg-success/10 text-success text-xs font-semibold\">\n                {{ effectiveApy }}% APY\n              </Badge>\n            </div>\n          </CardHeader>\n\n          <CardContent class=\"space-y-5\">\n            <!-- Token Selector Tabs -->\n            <div class=\"space-y-2\">\n              <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n                <label class=\"text-foreground font-medium\">Select Staking Asset</label>\n                <span class=\"tabular-nums\">Available: {{ currentToken.balance }} {{ currentToken.symbol }}</span>\n              </div>\n\n              <div class=\"grid grid-cols-3 gap-2\">\n                <button\n                  v-for=\"token in tokenOptions\"\n                  :key=\"token.symbol\"\n                  type=\"button\"\n                  :class=\"\n                    cn(\n                      'border-border/80 focus-visible:ring-ring flex flex-col items-start gap-1 rounded-lg border p-3 text-left transition-[colors,transform] duration-150 focus-visible:ring-2 focus-visible:outline-none active:scale-[0.98]',\n                      selectedTokenSymbol === token.symbol\n                        ? 'border-primary bg-primary/5 ring-primary/20 shadow-xs ring-1'\n                        : 'bg-card hover:bg-muted/50 text-muted-foreground',\n                    )\n                  \"\n                  @click=\"selectedTokenSymbol = token.symbol\"\n                >\n                  <div class=\"flex w-full items-center justify-between\">\n                    <div class=\"flex items-center gap-2\">\n                      <!-- Ethereum SVG -->\n                      <svg\n                        v-if=\"token.symbol === 'ETH'\"\n                        viewBox=\"0 0 32 32\"\n                        class=\"size-5 shrink-0 rounded-full shadow-xs\"\n                        aria-hidden=\"true\"\n                      >\n                        <circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"#627EEA\" />\n                        <path fill=\"#ffffff\" fill-opacity=\"0.6\" d=\"M16.5 4v8.87l7.5 3.35z\" />\n                        <path fill=\"#ffffff\" d=\"M16.5 4L9 16.22l7.5-3.35z\" />\n                        <path fill=\"#ffffff\" fill-opacity=\"0.6\" d=\"M16.5 21.97v6.03L24 17.62z\" />\n                        <path fill=\"#ffffff\" d=\"M16.5 28v-6.03L9 17.62z\" />\n                        <path fill=\"#ffffff\" fill-opacity=\"0.2\" d=\"M16.5 20.57l7.5-4.35-7.5-3.35z\" />\n                        <path fill=\"#ffffff\" fill-opacity=\"0.6\" d=\"M9 16.22l7.5 4.35v-7.7z\" />\n                      </svg>\n\n                      <!-- stETH SVG -->\n                      <svg\n                        v-else-if=\"token.symbol === 'stETH'\"\n                        viewBox=\"0 0 32 32\"\n                        class=\"size-5 shrink-0 rounded-full shadow-xs\"\n                        aria-hidden=\"true\"\n                      >\n                        <circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"#00A3FF\" />\n                        <path fill=\"#ffffff\" fill-opacity=\"0.8\" d=\"M16 4.5l-6.5 10.8 6.5 3.9 6.5-3.9z\" />\n                        <path fill=\"#ffffff\" d=\"M16 19.2l-6.5-3.9L16 27.5l6.5-12.2z\" />\n                        <circle cx=\"16\" cy=\"16\" r=\"3.5\" fill=\"#ffffff\" fill-opacity=\"0.3\" />\n                      </svg>\n\n                      <!-- wstETH SVG -->\n                      <svg v-else viewBox=\"0 0 32 32\" class=\"size-5 shrink-0 rounded-full shadow-xs\" aria-hidden=\"true\">\n                        <circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"#0052FF\" />\n                        <path fill=\"#ffffff\" d=\"M16 5.5l-5.8 9.5 5.8 3.5 5.8-3.5z\" />\n                        <path fill=\"#ffffff\" fill-opacity=\"0.6\" d=\"M16 18.5l-5.8-3.5 5.8 11 5.8-11z\" />\n                        <circle\n                          cx=\"16\"\n                          cy=\"16\"\n                          r=\"13.5\"\n                          stroke=\"#F5AC37\"\n                          stroke-width=\"2\"\n                          fill=\"none\"\n                          stroke-dasharray=\"3 2\"\n                        />\n                      </svg>\n                      <span class=\"text-foreground text-xs font-semibold\">{{ token.symbol }}</span>\n                    </div>\n                    <span v-if=\"selectedTokenSymbol === token.symbol\" class=\"text-primary size-3.5\" aria-hidden=\"true\">\n                      <Check class=\"size-3.5\" />\n                    </span>\n                  </div>\n                  <span class=\"text-muted-foreground text-xs tabular-nums\">{{ token.balance }} avail.</span>\n                </button>\n              </div>\n            </div>\n\n            <!-- Amount Input & Quick Percentages -->\n            <div class=\"bg-muted/40 border-border/80 space-y-3 rounded-lg border p-4\">\n              <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n                <label for=\"stake-amount-input\" class=\"text-foreground font-medium\">Deposit Amount</label>\n                <div class=\"flex items-center gap-1.5\">\n                  <span class=\"tabular-nums\">Wallet: {{ currentToken.balance }} {{ currentToken.symbol }}</span>\n                  <button\n                    type=\"button\"\n                    class=\"text-primary hover:text-primary/80 inline-flex min-h-6 items-center px-1 font-semibold uppercase transition-colors focus-visible:outline-none\"\n                    @click=\"setMaxAmount\"\n                  >\n                    MAX\n                  </button>\n                </div>\n              </div>\n\n              <!-- Input Row -->\n              <div class=\"flex items-center justify-between gap-3\">\n                <Input\n                  id=\"stake-amount-input\"\n                  v-model=\"stakeAmountStr\"\n                  type=\"number\"\n                  step=\"any\"\n                  min=\"0\"\n                  class=\"h-9 border-none bg-transparent px-0 text-xl font-bold tracking-tight tabular-nums shadow-none focus-visible:ring-0\"\n                  placeholder=\"0.0\"\n                />\n\n                <div\n                  class=\"border-border bg-background flex shrink-0 items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-semibold shadow-xs\"\n                >\n                  <span>{{ currentToken.symbol }}</span>\n                </div>\n              </div>\n\n              <!-- USD Approximation & Presets -->\n              <div class=\"flex flex-wrap items-center justify-between gap-2 pt-1 text-xs\">\n                <span class=\"text-muted-foreground tabular-nums\">≈ ${{ stakedFiatValue }} USD</span>\n                <div class=\"flex items-center gap-1\">\n                  <button\n                    v-for=\"pct in [25, 50, 75, 100]\"\n                    :key=\"pct\"\n                    type=\"button\"\n                    class=\"border-border bg-background hover:bg-muted text-muted-foreground hover:text-foreground min-h-6 rounded border px-2 py-0.5 font-mono text-xs transition-[colors,transform] duration-150 focus-visible:ring-1 focus-visible:outline-none active:scale-95\"\n                    @click=\"setPercentageAmount(pct)\"\n                  >\n                    {{ pct === 100 ? 'MAX' : `${pct}%` }}\n                  </button>\n                </div>\n              </div>\n\n              <!-- Interactive Slider -->\n              <div class=\"pt-2\">\n                <Slider v-model=\"sliderValue\" :min=\"0\" :max=\"currentToken.balance\" :step=\"0.1\" class=\"w-full\" />\n              </div>\n            </div>\n\n            <!-- Lockup Duration Selector -->\n            <div class=\"space-y-2\">\n              <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n                <span class=\"text-foreground font-medium\">Lockup Duration & Boost</span>\n                <span class=\"text-muted-foreground\">Longer lockups multiply daily yields</span>\n              </div>\n\n              <div class=\"grid grid-cols-2 gap-2 sm:grid-cols-4\">\n                <button\n                  v-for=\"opt in lockupOptions\"\n                  :key=\"opt.id\"\n                  type=\"button\"\n                  :class=\"\n                    cn(\n                      'border-border/80 focus-visible:ring-ring flex flex-col items-center justify-center gap-1 rounded-lg border p-2.5 text-center transition-[colors,transform] duration-150 focus-visible:ring-2 focus-visible:outline-none active:scale-[0.98]',\n                      selectedLockupId === opt.id\n                        ? 'border-primary bg-primary/5 ring-primary/20 shadow-xs ring-1'\n                        : 'bg-card hover:bg-muted/50 text-muted-foreground',\n                    )\n                  \"\n                  @click=\"selectedLockupId = opt.id\"\n                >\n                  <div class=\"flex items-center gap-1\">\n                    <Unlock v-if=\"opt.days === 0\" class=\"text-muted-foreground size-3.5\" aria-hidden=\"true\" />\n                    <Lock v-else class=\"text-primary size-3.5\" aria-hidden=\"true\" />\n                    <span class=\"text-foreground text-xs font-semibold\">{{ opt.label }}</span>\n                  </div>\n                  <Badge\n                    variant=\"outline\"\n                    :class=\"\n                      cn(\n                        'border-border/60 font-mono text-xs font-normal tabular-nums',\n                        opt.boost > 0 ? 'border-success/30 text-success' : 'text-muted-foreground',\n                      )\n                    \"\n                  >\n                    {{ opt.badge }}\n                  </Badge>\n                </button>\n              </div>\n            </div>\n\n            <!-- Estimated Returns Highlight Box -->\n            <div class=\"border-success/20 bg-success/5 space-y-3 rounded-lg border p-4\">\n              <div class=\"flex items-center justify-between\">\n                <span class=\"text-foreground flex items-center gap-1.5 text-xs font-semibold\">\n                  <Flame class=\"text-success size-4\" aria-hidden=\"true\" />\n                  Estimated Annual Yield\n                </span>\n                <Badge\n                  variant=\"outline\"\n                  class=\"border-success/30 bg-success/10 text-success font-mono text-xs font-semibold\"\n                >\n                  {{ effectiveApy }}% APY\n                </Badge>\n              </div>\n\n              <!-- Main Yield Value -->\n              <div class=\"flex flex-wrap items-baseline gap-2\">\n                <span class=\"text-success text-success text-xl font-bold tracking-tight tabular-nums sm:text-2xl\">\n                  +${{ annualYieldUsd }} / year\n                </span>\n                <span class=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                  ({{ annualYieldEth }} {{ currentToken.symbol }})\n                </span>\n              </div>\n\n              <Separator class=\"bg-success/20\" />\n\n              <!-- Yield Breakdown Grid -->\n              <div class=\"grid grid-cols-2 gap-3 text-xs sm:grid-cols-3\">\n                <div class=\"space-y-0.5\">\n                  <div class=\"text-muted-foreground\">Daily Returns</div>\n                  <div class=\"text-foreground font-medium tabular-nums\">+${{ dailyYieldUsd }}</div>\n                  <div class=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                    {{ dailyYieldEth }} {{ currentToken.symbol }}\n                  </div>\n                </div>\n                <div class=\"space-y-0.5\">\n                  <div class=\"text-muted-foreground\">Monthly Returns</div>\n                  <div class=\"text-foreground font-medium tabular-nums\">+${{ monthlyYieldUsd }}</div>\n                  <div class=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                    {{ monthlyYieldEth }} {{ currentToken.symbol }}\n                  </div>\n                </div>\n                <div class=\"col-span-2 space-y-0.5 sm:col-span-1\">\n                  <div class=\"text-muted-foreground\">Network Gas & Fee</div>\n                  <div class=\"text-foreground flex items-center gap-1 font-medium tabular-nums\">\n                    <Fuel class=\"text-muted-foreground size-3\" aria-hidden=\"true\" />\n                    ~$2.85 (0% fee)\n                  </div>\n                  <div class=\"text-success text-xs\">No exit penalty</div>\n                </div>\n              </div>\n            </div>\n\n            <!-- Primary Stake CTA Button -->\n            <Button\n              size=\"lg\"\n              class=\"w-full gap-2 font-semibold shadow-xs active:scale-[0.98]\"\n              :disabled=\"parsedAmount <= 0 || isStaking\"\n              @click=\"handleExecuteStake\"\n            >\n              <RefreshCw v-if=\"isStaking\" class=\"size-4 animate-spin\" aria-hidden=\"true\" />\n              <Check v-else-if=\"stakeSuccess\" class=\"text-success size-4\" aria-hidden=\"true\" />\n              <Zap v-else class=\"size-4\" aria-hidden=\"true\" />\n              <span v-if=\"isStaking\">Submitting Staking Transaction...</span>\n              <span v-else-if=\"stakeSuccess\">Successfully Staked {{ parsedAmount }} {{ currentToken.symbol }}!</span>\n              <span v-else>Stake {{ parsedAmount > 0 ? `${parsedAmount} ${currentToken.symbol}` : 'ETH' }} Now</span>\n            </Button>\n\n            <div class=\"text-muted-foreground flex items-center justify-center gap-2 text-center text-xs\">\n              <ShieldCheck class=\"text-success size-3.5\" aria-hidden=\"true\" />\n              <span>Smart contracts verified on Etherscan · 100% non-custodial</span>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n\n      <!-- Right Column: Yield Vaults Directory (5 Cols) -->\n      <div class=\"space-y-6 lg:col-span-5\">\n        <Card class=\"border-border/80 shadow-xs\">\n          <CardHeader class=\"pb-3\">\n            <div class=\"flex items-center justify-between\">\n              <div>\n                <CardTitle class=\"text-foreground text-base font-semibold\">Yield Vaults Directory</CardTitle>\n                <CardDescription class=\"text-muted-foreground text-xs\">\n                  Active liquidity pools and automated yield strategies.\n                </CardDescription>\n              </div>\n              <Badge variant=\"secondary\" class=\"text-xs font-normal tabular-nums\">3 Vaults Active</Badge>\n            </div>\n          </CardHeader>\n\n          <CardContent class=\"space-y-3.5\">\n            <div\n              v-for=\"vault in yieldVaults\"\n              :key=\"vault.id\"\n              :class=\"\n                cn(\n                  'border-border/80 relative space-y-3 rounded-lg border p-3.5 transition-colors',\n                  vault.isCurrentVault\n                    ? 'bg-primary/5 border-primary/40 ring-primary/20 ring-1'\n                    : 'bg-card hover:bg-muted/30',\n                )\n              \"\n            >\n              <!-- Vault Header Row -->\n              <div class=\"flex items-start justify-between gap-2\">\n                <div class=\"space-y-1\">\n                  <div class=\"flex items-center gap-2\">\n                    <span class=\"text-foreground text-sm font-semibold\">{{ vault.name }}</span>\n                    <Badge\n                      v-if=\"vault.isCurrentVault\"\n                      variant=\"outline\"\n                      class=\"border-primary/40 bg-primary/10 text-primary px-1.5 py-0 text-xs font-medium\"\n                    >\n                      Current\n                    </Badge>\n                  </div>\n                  <p class=\"text-muted-foreground text-xs\">{{ vault.protocol }}</p>\n                </div>\n\n                <div class=\"text-right\">\n                  <div class=\"text-success text-success text-base font-bold tabular-nums sm:text-lg\">\n                    {{ vault.apy }} APY\n                  </div>\n                  <div class=\"text-muted-foreground font-mono text-xs tabular-nums\">{{ vault.tvl }}</div>\n                </div>\n              </div>\n\n              <!-- Vault Meta Details -->\n              <div\n                class=\"border-border/60 bg-muted/30 flex flex-wrap items-center justify-between gap-2 rounded-md border p-2 text-xs\"\n              >\n                <div class=\"flex items-center gap-1.5\">\n                  <Badge\n                    variant=\"outline\"\n                    :class=\"\n                      cn(\n                        'px-1.5 py-0 text-xs font-normal',\n                        vault.riskVariant === 'emerald'\n                          ? 'border-success/30 bg-success/10 text-success'\n                          : 'border-warning/30 bg-warning/10 text-warning',\n                      )\n                    \"\n                  >\n                    {{ vault.risk }}\n                  </Badge>\n                  <span class=\"text-muted-foreground max-w-[140px] truncate sm:max-w-none\">{{ vault.strategy }}</span>\n                </div>\n                <div class=\"text-muted-foreground font-medium tabular-nums\">{{ vault.metricValue }}</div>\n              </div>\n\n              <!-- Vault Actions -->\n              <div class=\"flex items-center justify-between pt-1\">\n                <span class=\"text-muted-foreground font-mono text-xs\">{{ vault.pairSymbol }}</span>\n                <Button\n                  :variant=\"vault.isCurrentVault ? 'default' : 'outline'\"\n                  size=\"sm\"\n                  class=\"h-7 px-3 text-xs shadow-xs\"\n                >\n                  <span v-if=\"vault.isCurrentVault\">Manage Vault</span>\n                  <span v-else>Deposit Pool</span>\n                  <ArrowUpRight class=\"ml-1 size-3\" aria-hidden=\"true\" />\n                </Button>\n              </div>\n            </div>\n          </CardContent>\n\n          <CardFooter class=\"border-border/60 bg-muted/20 flex flex-col gap-2 rounded-b-xl border-t p-3.5 text-xs\">\n            <div class=\"text-muted-foreground flex items-center gap-2\">\n              <ShieldAlert class=\"text-warning size-4 shrink-0\" aria-hidden=\"true\" />\n              <span>Yields adjust dynamically with Ethereum validator queue and DEX trading fee volumes.</span>\n            </div>\n          </CardFooter>\n        </Card>\n      </div>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/DefiStakingYieldVault.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/slider.json"
  ],
  "description": "Nodeka and Uniswap-inspired decentralized finance staking yield vault, liquidity pool APY calculator, and reward claimer with live TVL metrics, multi-tier lockup multipliers, and real-time yield simulator.",
  "categories": [
    "finance",
    "app",
    "dashboard"
  ]
}