{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "defi-staking-yield-vault", "title": "Defi Staking Yield Vault", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/defi-staking-yield-vault/defi-staking-yield-vault.component.ts", "content": "// Nodeka and Uniswap-inspired DeFi staking yield vault: wallet connection header with\n// audit + TVL badges, four staking performance KPI cards, a deposit & stake simulator\n// (token selector, amount input with presets + slider, lockup multipliers, live yield\n// estimates), and a yield vaults directory. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n ArrowUpRight,\n Check,\n Coins,\n Copy,\n Flame,\n Fuel,\n Lock,\n LucideAngularModule,\n Percent,\n RefreshCw,\n ShieldAlert,\n ShieldCheck,\n TrendingUp,\n Unlock,\n Wallet,\n Zap,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport { UiSliderComponent } from '@/ui/slider/slider.component'\n\ninterface VaultTokenOption {\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: VaultTokenOption[] = [\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 VaultLockupOption {\n id: string\n label: string\n durationText: string\n days: number\n boost: number\n badge: string\n}\n\nconst lockupOptions: VaultLockupOption[] = [\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 },\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 },\n]\n\nconst walletAddress = '0x71C856402244243b92834b9d09c2534575823a9F'\n\nfunction fmtUsd(v: number): string {\n return v.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-defi-staking-yield-vault, [ui-defi-staking-yield-vault]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiInputComponent,\n UiSeparatorComponent,\n UiSliderComponent,\n ],\n template: `\n
\n \n
\n
\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 \n \n Audited by Trail of Bits & OpenZeppelin\n \n \n \n $142,850,000.00 TVL\n \n \n
\n
\n\n \n
\n @if (isWalletConnected()) {\n
\n \n {{ shortAddress }}\n \n @if (copied()) {\n \n } @else {\n \n }\n \n
\n \n Disconnect\n \n } @else {\n \n \n Connect Web3 Wallet\n \n }\n
\n
\n \n\n \n
\n
\n
\n
\n

\n Net Staking APY\n

\n \n \n
\n
\n
\n 7.42% APY\n
\n
\n
\n
\n \n Auto-Compounding daily\n
\n

Base 4.92% + 2.50% MEV Boost

\n
\n
\n\n
\n
\n
\n

\n Your Staked Balance\n

\n \n \n
\n
\n
\n 24.50 ETH\n
\n
\n
\n
≈ $84,525.00 USD
\n
\n Active in Vault v3\n
\n
\n
\n\n
\n
\n
\n

\n Unclaimed Rewards\n

\n \n \n
\n
\n
\n {{ unclaimedEth() }} stETH\n
\n
\n
\n
≈ \\${{ unclaimedUsd() }} USD
\n \n @if (isClaiming()) {\n \n } @else if (claimSuccess()) {\n \n }\n {{ isClaiming() ? 'Claiming On-Chain...' : claimSuccess() ? 'Rewards Claimed!' : 'Claim Rewards' }}\n \n
\n \n\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 \n
\n \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 \n
\n
\n \n Available: {{ currentToken().balance }} {{ currentToken().symbol }}\n
\n
\n @for (token of tokens; track token.symbol) {\n \n
\n
\n \n {{ token.symbol }}\n
\n @if (selectedTokenSymbol() === token.symbol) {\n \n }\n
\n {{ token.balance }} avail.\n \n }\n
\n
\n\n \n
\n
\n \n
\n Wallet: {{ currentToken().balance }} {{ currentToken().symbol }}\n \n MAX\n \n
\n
\n
\n \n \n {{ currentToken().symbol }}\n
\n
\n
\n ≈ \\${{ stakedFiatValue() }} USD\n
\n @for (pct of [25, 50, 75, 100]; track pct) {\n \n {{ pct === 100 ? 'MAX' : pct + '%' }}\n \n }\n
\n
\n
\n \n
\n
\n\n \n
\n
\n Lockup Duration & Boost\n Longer lockups multiply daily yields\n
\n
\n @for (opt of lockups; track opt.id) {\n \n }\n
\n
\n\n \n
\n
\n \n \n Estimated Annual Yield\n \n \n {{ effectiveApy() }}% APY\n \n
\n
\n +\\${{ annualYieldUsd() }} / year\n ({{ annualYieldEth() }} {{ currentToken().symbol }})\n
\n \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 \n \n @if (isStaking()) {\n \n } @else if (stakeSuccess()) {\n \n } @else {\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 \n Smart contracts verified on Etherscan · 100% non-custodial\n
\n
\n
\n
\n\n \n
\n
\n
\n
\n
\n

Yield Vaults Directory

\n

\n Active liquidity pools and automated yield strategies.\n

\n
\n 3 Vaults Active\n
\n
\n
\n @for (vault of vaults; track vault.id) {\n
\n
\n
\n
\n {{ vault.name }}\n @if (vault.isCurrentVault) {\n Current\n }\n
\n

{{ vault.protocol }}

\n
\n
\n
{{ vault.apy }} APY
\n
{{ vault.tvl }}
\n
\n
\n \n
\n {{ vault.risk }}\n {{\n vault.strategy\n }}\n
\n
{{ vault.metricValue }}
\n
\n
\n {{ vault.pairSymbol }}\n \n {{ vault.isCurrentVault ? 'Manage Vault' : 'Deposit Pool' }}\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})\nexport class UiDefiStakingYieldVaultComponent {\n protected readonly ArrowUpRight = ArrowUpRight\n protected readonly Check = Check\n protected readonly Coins = Coins\n protected readonly Copy = Copy\n protected readonly Flame = Flame\n protected readonly Fuel = Fuel\n protected readonly Lock = Lock\n protected readonly Percent = Percent\n protected readonly RefreshCw = RefreshCw\n protected readonly ShieldAlert = ShieldAlert\n protected readonly ShieldCheck = ShieldCheck\n protected readonly TrendingUp = TrendingUp\n protected readonly Unlock = Unlock\n protected readonly Wallet = Wallet\n protected readonly Zap = Zap\n\n protected readonly tokens = tokenOptions\n protected readonly lockups = lockupOptions\n protected readonly vaults = yieldVaults\n protected readonly shortAddress = '0x71C...3a9F'\n\n @Input() set initialToken(v: string) {\n if (v) this.selectedTokenSymbol.set(v)\n }\n @Input() set initialLockup(v: string) {\n if (v) this.selectedLockupId.set(v)\n }\n @Input('class') className?: string\n\n readonly isWalletConnected = signal(true)\n readonly copied = signal(false)\n readonly unclaimedEth = signal(0.485)\n readonly isClaiming = signal(false)\n readonly claimSuccess = signal(false)\n\n readonly selectedTokenSymbol = signal('ETH')\n readonly selectedLockupId = signal('flex')\n readonly stakeAmountStr = signal('10.0')\n readonly isStaking = signal(false)\n readonly stakeSuccess = signal(false)\n\n readonly currentToken = computed(\n () => tokenOptions.find((t) => t.symbol === this.selectedTokenSymbol()) ?? tokenOptions[0]!,\n )\n readonly currentLockup = computed(\n () => lockupOptions.find((l) => l.id === this.selectedLockupId()) ?? lockupOptions[0]!,\n )\n readonly parsedAmount = computed(() => {\n const val = parseFloat(this.stakeAmountStr())\n return isNaN(val) || val < 0 ? 0 : val\n })\n readonly sliderAmount = computed(() => Math.min(this.parsedAmount(), this.currentToken().balance))\n\n readonly baseVaultApy = 7.42\n readonly effectiveApy = computed(() =>\n (this.baseVaultApy + this.currentLockup().boost + this.currentToken().apyBoost).toFixed(2),\n )\n readonly stakedFiatValue = computed(() => fmtUsd(this.parsedAmount() * this.currentToken().price))\n readonly unclaimedUsd = computed(() => fmtUsd(this.unclaimedEth() * 3450))\n\n private yieldUsd(divisor: number): string {\n const rate = parseFloat(this.effectiveApy()) / 100\n return fmtUsd((this.parsedAmount() * rate * this.currentToken().price) / divisor)\n }\n\n private yieldEth(divisor: number, digits: number): string {\n const rate = parseFloat(this.effectiveApy()) / 100\n return ((this.parsedAmount() * rate) / divisor).toFixed(digits)\n }\n\n readonly annualYieldUsd = computed(() => this.yieldUsd(1))\n readonly annualYieldEth = computed(() => this.yieldEth(1, 3))\n readonly monthlyYieldUsd = computed(() => this.yieldUsd(12))\n readonly monthlyYieldEth = computed(() => this.yieldEth(12, 4))\n readonly dailyYieldUsd = computed(() => this.yieldUsd(365))\n readonly dailyYieldEth = computed(() => this.yieldEth(365, 5))\n\n get rootClass(): string {\n return cn('mx-auto w-full max-w-6xl space-y-6', this.className)\n }\n\n tokenButtonClass(symbol: string): string {\n return 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 this.selectedTokenSymbol() === 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\n lockupButtonClass(id: string): string {\n return 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 this.selectedLockupId() === 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\n lockupBadgeClass(opt: VaultLockupOption): string {\n return 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 vaultCardClass(vault: VaultItem): string {\n return cn(\n 'border-border/80 relative space-y-3 rounded-lg border p-3.5 transition-colors',\n vault.isCurrentVault ? 'bg-primary/5 border-primary/40 ring-primary/20 ring-1' : 'bg-card hover:bg-muted/30',\n )\n }\n\n riskBadgeClass(vault: VaultItem): string {\n return 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 copyAddress(): void {\n try {\n void navigator.clipboard?.writeText(walletAddress)\n } catch {\n // Clipboard unavailable in some contexts; the flag still flips for feedback.\n }\n this.copied.set(true)\n setTimeout(() => this.copied.set(false), 2000)\n }\n\n handleClaimRewards(): void {\n if (this.unclaimedEth() <= 0 || this.isClaiming()) return\n this.isClaiming.set(true)\n setTimeout(() => {\n this.isClaiming.set(false)\n this.claimSuccess.set(true)\n this.unclaimedEth.set(0)\n setTimeout(() => this.claimSuccess.set(false), 3500)\n }, 1200)\n }\n\n handleSliderChange(vals: number[]): void {\n if (vals?.[0] !== undefined) this.stakeAmountStr.set(vals[0].toFixed(2))\n }\n\n setPercentageAmount(pct: number): void {\n this.stakeAmountStr.set((this.currentToken().balance * (pct / 100)).toFixed(2))\n }\n\n setMaxAmount(): void {\n this.stakeAmountStr.set(this.currentToken().balance.toFixed(2))\n }\n\n handleExecuteStake(): void {\n if (this.parsedAmount() <= 0 || this.isStaking()) return\n this.isStaking.set(true)\n setTimeout(() => {\n this.isStaking.set(false)\n this.stakeSuccess.set(true)\n setTimeout(() => this.stakeSuccess.set(false), 3500)\n }, 1400)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/defi-staking-yield-vault/defi-staking-yield-vault.component.ts" }, { "path": "packages/registry-angular/blocks/defi-staking-yield-vault/index.ts", "content": "export { UiDefiStakingYieldVaultComponent } from './defi-staking-yield-vault.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/defi-staking-yield-vault/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/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" ] }