{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "defi-staking-yield-vault", "title": "Defi Staking Yield Vault", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/defi-staking-yield-vault/DefiStakingYieldVault.tsx", "content": "'use client'\n\nimport * as React from 'react'\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-react'\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\nexport interface DefiStakingYieldVaultProps extends React.HTMLAttributes {}\n\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\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\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\nexport function DefiStakingYieldVault({ className, ...props }: DefiStakingYieldVaultProps) {\n // Wallet State\n const [isWalletConnected, setIsWalletConnected] = React.useState(true)\n const walletAddress = '0x71C856402244243b92834b9d09c2534575823a9F'\n const shortAddress = '0x71C...3a9F'\n const [copied, setCopied] = React.useState(false)\n\n const copyAddress = React.useCallback(() => {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText(walletAddress)\n setCopied(true)\n setTimeout(() => {\n setCopied(false)\n }, 2000)\n }\n }, [walletAddress])\n\n // Rewards State\n const [unclaimedEth, setUnclaimedEth] = React.useState(0.485)\n const [isClaiming, setIsClaiming] = React.useState(false)\n const [claimSuccess, setClaimSuccess] = React.useState(false)\n\n const unclaimedUsd = React.useMemo(() => {\n return (unclaimedEth * 3450).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\n }, [unclaimedEth])\n\n const handleClaimRewards = () => {\n if (unclaimedEth <= 0 || isClaiming) return\n setIsClaiming(true)\n setTimeout(() => {\n setIsClaiming(false)\n setClaimSuccess(true)\n setUnclaimedEth(0)\n setTimeout(() => {\n setClaimSuccess(false)\n }, 3500)\n }, 1200)\n }\n\n // Simulator State\n const [selectedTokenSymbol, setSelectedTokenSymbol] = React.useState('ETH')\n const [selectedLockupId, setSelectedLockupId] = React.useState('flex')\n const [stakeAmountStr, setStakeAmountStr] = React.useState('10.0')\n const [isStaking, setIsStaking] = React.useState(false)\n const [stakeSuccess, setStakeSuccess] = React.useState(false)\n\n const currentToken = React.useMemo(() => {\n return tokenOptions.find((t) => t.symbol === selectedTokenSymbol) ?? tokenOptions[0]\n }, [selectedTokenSymbol])\n\n const currentLockup = React.useMemo(() => {\n return lockupOptions.find((l) => l.id === selectedLockupId) ?? lockupOptions[0]\n }, [selectedLockupId])\n\n const parsedAmount = React.useMemo(() => {\n const val = parseFloat(stakeAmountStr)\n return isNaN(val) || val < 0 ? 0 : val\n }, [stakeAmountStr])\n\n const baseVaultApy = 7.42\n const effectiveApy = React.useMemo(() => {\n const total = baseVaultApy + currentLockup.boost + currentToken.apyBoost\n return total.toFixed(2)\n }, [currentLockup.boost, currentToken.apyBoost])\n\n const stakedFiatValue = React.useMemo(() => {\n return (parsedAmount * currentToken.price).toLocaleString('en-US', {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n })\n }, [parsedAmount, currentToken.price])\n\n const annualYieldEth = React.useMemo(() => {\n const rate = parseFloat(effectiveApy) / 100\n return (parsedAmount * rate).toFixed(3)\n }, [effectiveApy, parsedAmount])\n\n const annualYieldUsd = React.useMemo(() => {\n const rate = parseFloat(effectiveApy) / 100\n const usd = parsedAmount * rate * currentToken.price\n return usd.toLocaleString('en-US', {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n })\n }, [effectiveApy, parsedAmount, currentToken.price])\n\n const monthlyYieldUsd = React.useMemo(() => {\n const rate = parseFloat(effectiveApy) / 100\n const usd = (parsedAmount * rate * currentToken.price) / 12\n return usd.toLocaleString('en-US', {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n })\n }, [effectiveApy, parsedAmount, currentToken.price])\n\n const monthlyYieldEth = React.useMemo(() => {\n const rate = parseFloat(effectiveApy) / 100\n return ((parsedAmount * rate) / 12).toFixed(4)\n }, [effectiveApy, parsedAmount])\n\n const dailyYieldUsd = React.useMemo(() => {\n const rate = parseFloat(effectiveApy) / 100\n const usd = (parsedAmount * rate * currentToken.price) / 365\n return usd.toLocaleString('en-US', {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n })\n }, [effectiveApy, parsedAmount, currentToken.price])\n\n const dailyYieldEth = React.useMemo(() => {\n const rate = parseFloat(effectiveApy) / 100\n return ((parsedAmount * rate) / 365).toFixed(5)\n }, [effectiveApy, parsedAmount])\n\n const handleSliderChange = (vals: number[]) => {\n if (vals && vals[0] !== undefined) {\n setStakeAmountStr(vals[0].toFixed(2))\n }\n }\n\n const setPercentageAmount = (pct: number) => {\n const amt = currentToken.balance * (pct / 100)\n setStakeAmountStr(amt.toFixed(2))\n }\n\n const setMaxAmount = () => {\n setStakeAmountStr(currentToken.balance.toFixed(2))\n }\n\n const handleExecuteStake = () => {\n if (parsedAmount <= 0 || isStaking) return\n setIsStaking(true)\n setTimeout(() => {\n setIsStaking(false)\n setStakeSuccess(true)\n setTimeout(() => {\n setStakeSuccess(false)\n }, 3500)\n }, 1400)\n }\n\n return (\n \n {/* Header Section */}\n
\n
\n {/* Title & Protocol Badges */}\n
\n
\n \n \n
\n
\n
\n

\n ETH Liquid Staking & Yield Vault v3\n

\n \n v3.2 Protocol\n \n
\n
\n
\n\n
\n {/* Audit Badge */}\n \n \n Audited by Trail of Bits & OpenZeppelin\n \n\n {/* TVL Badge */}\n \n \n $142,850,000.00 TVL\n \n\n \n
\n
\n\n {/* Wallet Connection Action */}\n
\n {isWalletConnected ? (\n <>\n
\n \n {shortAddress}\n \n {copied ? (\n \n ) : (\n \n )}\n \n
\n setIsWalletConnected(false)}\n >\n Disconnect\n \n \n ) : (\n setIsWalletConnected(true)}\n >\n \n Connect Web3 Wallet\n \n )}\n
\n \n
\n\n {/* 4 Staking Performance KPI Cards */}\n
\n {/* Card 1: Net Staking APY */}\n \n \n
\n \n Net Staking APY\n \n \n \n
\n
\n
\n \n 7.42% APY\n \n
\n \n \n
\n \n Auto-Compounding daily\n
\n

Base 4.92% + 2.50% MEV Boost

\n \n \n\n {/* Card 2: Your Staked Balance */}\n \n \n
\n \n Your Staked Balance\n \n \n \n
\n \n
\n \n 24.50 ETH\n \n
\n \n \n
≈ $84,525.00 USD
\n
\n \n Active in Vault v3\n \n
\n \n \n\n {/* Card 3: Unclaimed Rewards */}\n \n \n
\n \n Unclaimed Rewards\n \n \n \n
\n \n
\n \n {unclaimedEth} stETH\n \n
\n \n \n
≈ ${unclaimedUsd} USD
\n \n {isClaiming ? (\n \n ) : claimSuccess ? (\n \n ) : null}\n {isClaiming ? 'Claiming On-Chain...' : claimSuccess ? 'Rewards Claimed!' : 'Claim Rewards'}\n \n \n \n\n {/* Card 4: Staking Pool Share */}\n \n \n
\n \n Staking Pool Share\n \n \n \n
\n \n
\n 0.017%\n
\n \n \n
\n of total vault\n $142.85M TVL\n
\n
\n
\n
\n \n \n
\n\n {/* 2-Column Staking Simulator & Yield Directory */}\n
\n {/* Left Column: Deposit & Stake Calculator (7 Cols) */}\n
\n \n \n
\n
\n \n \n Deposit & Stake Calculator\n \n \n Simulate staking yields with custom lockup multipliers and real-time auto-compounding.\n \n
\n \n {effectiveApy}% APY\n \n
\n \n\n \n {/* Token Selector Tabs */}\n
\n
\n \n \n Available: {currentToken.balance} {currentToken.symbol}\n \n
\n\n
\n {tokenOptions.map((token) => {\n const isSelected = selectedTokenSymbol === token.symbol\n return (\n setSelectedTokenSymbol(token.symbol)}\n >\n
\n
\n {token.symbol === 'ETH' && (\n \n \n \n \n \n \n \n \n \n )}\n {token.symbol === 'stETH' && (\n \n \n \n \n \n \n )}\n {token.symbol === 'wstETH' && (\n \n \n \n \n \n \n )}\n {token.symbol}\n
\n {isSelected && (\n \n \n \n )}\n
\n {token.balance} avail.\n \n )\n })}\n
\n
\n\n {/* Amount Input & Quick Percentages */}\n
\n
\n \n
\n \n Wallet: {currentToken.balance} {currentToken.symbol}\n \n \n MAX\n \n
\n
\n\n {/* Input Row */}\n
\n setStakeAmountStr(e.target.value)}\n type=\"number\"\n step=\"any\"\n min=\"0\"\n className=\"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
\n {currentToken.symbol}\n
\n
\n\n {/* USD Approximation & Presets */}\n
\n ≈ ${stakedFiatValue} USD\n
\n {[25, 50, 75, 100].map((pct) => (\n setPercentageAmount(pct)}\n >\n {pct === 100 ? 'MAX' : `${pct}%`}\n \n ))}\n
\n
\n\n {/* Interactive Slider */}\n
\n \n
\n
\n\n {/* Lockup Duration Selector */}\n
\n
\n Lockup Duration & Boost\n Longer lockups multiply daily yields\n
\n\n
\n {lockupOptions.map((opt) => {\n const isSelected = selectedLockupId === opt.id\n return (\n setSelectedLockupId(opt.id)}\n >\n
\n {opt.days === 0 ? (\n \n ) : (\n \n )}\n {opt.label}\n
\n 0 ? 'border-success/30 text-success' : 'text-muted-foreground',\n )}\n >\n {opt.badge}\n \n \n )\n })}\n
\n
\n\n {/* Estimated Returns Highlight Box */}\n
\n
\n \n \n Estimated Annual Yield\n \n \n {effectiveApy}% APY\n \n
\n\n {/* Main Yield Value */}\n
\n \n +${annualYieldUsd} / year\n \n \n ({annualYieldEth} {currentToken.symbol})\n \n
\n\n \n\n {/* Yield Breakdown Grid */}\n
\n
\n
Daily Returns
\n
+${dailyYieldUsd}
\n
\n {dailyYieldEth} {currentToken.symbol}\n
\n
\n
\n
Monthly Returns
\n
+${monthlyYieldUsd}
\n
\n {monthlyYieldEth} {currentToken.symbol}\n
\n
\n
\n
Network Gas & Fee
\n
\n \n ~$2.85 (0% fee)\n
\n
No exit penalty
\n
\n
\n
\n\n {/* Primary Stake CTA Button */}\n \n {isStaking ? (\n \n ) : stakeSuccess ? (\n \n ) : (\n \n )}\n {isStaking\n ? 'Submitting Staking Transaction...'\n : stakeSuccess\n ? `Successfully Staked ${parsedAmount} ${currentToken.symbol}!`\n : `Stake ${parsedAmount > 0 ? `${parsedAmount} ${currentToken.symbol}` : 'ETH'} Now`}\n \n\n
\n \n Smart contracts verified on Etherscan · 100% non-custodial\n
\n \n \n
\n\n {/* Right Column: Yield Vaults Directory (5 Cols) */}\n
\n \n \n
\n
\n Yield Vaults Directory\n \n Active liquidity pools and automated yield strategies.\n \n
\n \n 3 Vaults Active\n \n
\n \n\n \n {yieldVaults.map((vault) => (\n \n {/* Vault Header Row */}\n
\n
\n
\n {vault.name}\n {vault.isCurrentVault && (\n \n Current\n \n )}\n
\n

{vault.protocol}

\n
\n\n
\n
\n {vault.apy} APY\n
\n
{vault.tvl}
\n
\n
\n\n {/* Vault Meta Details */}\n
\n
\n \n {vault.risk}\n \n \n {vault.strategy}\n \n
\n
{vault.metricValue}
\n
\n\n {/* Vault Actions */}\n
\n {vault.pairSymbol}\n \n {vault.isCurrentVault ? 'Manage Vault' : 'Deposit Pool'}\n \n \n
\n
\n ))}\n \n\n \n
\n \n Yields adjust dynamically with Ethereum validator queue and DEX trading fee volumes.\n
\n \n \n
\n \n \n )\n}\n\nexport default DefiStakingYieldVault\n", "type": "registry:block", "target": "~/components/blocks/DefiStakingYieldVault.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/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" ] }