\n {/* Vault Header */}\n
\n );\n}\n```\n\n**File: `src/components/UserRewardsPanel.tsx`**\n\n```tsx\nexport function UserRewardsPanel({ userAddress, chainId }) {\n const [rewards, setRewards] = useState(null);\n const [claiming, setClaiming] = useState(false);\n\n useEffect(() => {\n getUserRewards(userAddress, chainId).then(setRewards);\n }, [userAddress, chainId]);\n\n const handleClaimAll = async () => {\n setClaiming(true);\n try {\n // Claim from both systems\n await Promise.all([\n claimMerklRewards(userAddress, chainId, walletClient),\n claimURDRewards(userAddress, walletClient),\n ]);\n\n alert(\"Rewards claimed successfully!\");\n // Refresh rewards data\n getUserRewards(userAddress, chainId).then(setRewards);\n } catch (error) {\n console.error(\"Claim failed:\", error);\n alert(\"Claim failed. See console for details.\");\n } finally {\n setClaiming(false);\n }\n };\n\n return (\n \n
\n\n {/* APY Display */}\n {data.vault.name}
\n{data.vault.symbol}
\n\n
\n\n {/* Rewards List */}\n {data.rewards.length > 0 && (\n \n Total APY\n {data.totalApy.toFixed(2)}%\n
\n\n \n
\n Base APY: {data.baseApy.toFixed(2)}%
\n {data.rewardsApr > 0 && (\n \n Rewards: +{data.rewardsApr.toFixed(2)}%\n
\n )}\n \n
\n );\n}\n```\n\n## Running the Demo\n\n### Prerequisites\n\n- Node.js 18+ and yarn\n- A wallet with Morpho positions (for testing user rewards)\n\n### Quick Start\n\n```bash\n# Clone the repository\ngit clone https://github.com/morpho-org/merkl-morpho-recipe.git\ncd merkl-morpho-recipe\n\n# Install dependencies\nyarn install\n\n# Run the development server\nyarn dev\n\n# Open http://localhost:3000\n```\n\n### Explore via Scripts\n\nThe demo includes standalone scripts to understand the data flow:\n\n```bash\n# See vault APY + rewards calculation\nyarn demo:yield\n\n# Check user claimable rewards\nyarn demo:rewards\n\n# Complete integration flow\nyarn demo:full\n```\n\n**Example Output:**\n\n```\n$ yarn demo:yield\n\n=== Vault Metrics ===\nVault: Steakhouse USDC\nBase APY: 8.45%\nRewards APR: 2.13%\nTotal APY: 10.58%\n\nReward Programs:\n - MORPHO: 1.85% APR\n - STEAK: 0.28% APR\n```\n\n## Key Takeaways from the Demo\n\n### 1. Error Handling\n\nThe demo implements graceful error handling:\n\n```typescript\ntry {\n const data = await fetchVaultData(address, chain);\n return data;\n} catch (error) {\n console.error(\"Failed to fetch vault data:\", error);\n return null; // Fallback to null, don't crash the app\n}\n```\n\n### 2. Type Safety\n\nFull TypeScript coverage ensures correctness:\n\n```typescript\nexport interface VaultReward {\n token: string;\n apr: number;\n yearlySupplyTokens: string;\n tokenAddress: string;\n}\n\nexport interface UserClaimableReward {\n token: string;\n amount: bigint;\n source: \"merkl\" | \"urd\";\n}\n```\n\n### 3. Caching Strategy\n\n```typescript\nconst CACHE_DURATION = 5 * 60 * 1000; // 5 minutes\n\nconst cache = new MapYour Claimable Rewards
\n\n {rewards?.combined.map((reward) => (\n\n {reward.token}\n {formatAmount(reward.amount)} {reward.token}\n
\n ))}\n\n \n\n {/* Show source breakdown */}\n \n
\n View breakdown
\nMerkl: {rewards?.merkl.length || 0} rewards
\n URD: {rewards?.urd.length || 0} rewards
\n Loading...
;\n if (!data) return No data
;\n\n return (\n \n
\n );\n}\n```\n\n### Visual Design Tips\n\n**Highlight Total Yield:**\n```tsx\n{data.vault}
\nDeposit {data.asset}
\n\n {/* Total APY */}\n\n
\n\n {/* Rewards Breakdown */}\n {data.rewards.length > 0 && (\n Total APY: {data.totalApy.toFixed(2)}%
\n\n
\n Base APY: {data.baseApy.toFixed(2)}%
\n Rewards APR: +{data.rewardsApr.toFixed(2)}%
\n \n
\n )}\n Reward Programs:
\n {data.rewards.map((reward) => (\n\n {reward.token}\n {reward.apr.toFixed(2)}% APR\n
\n ))}\n \n Total APY\n {totalApy.toFixed(2)}%\n
\n```\n\n**Show Breakdown on Hover/Click:**\n```tsx\nBase APY: {baseApy}%
\n MORPHO Rewards: +{morphoApr}%
\n Partner Rewards: +{partnerApr}%
\n \n}>\n {totalApy}%\nLoading rewards...
;\n if (!rewards || rewards.total.length === 0) {\n return No claimable rewards
;\n }\n\n return (\n \n
\n );\n}\n```\n\n## Displaying Rewards in Tables\n\nFor portfolio or dashboard views:\n\n```tsx\nfunction VaultPortfolio({ userAddress, chainId }: {\n userAddress: string;\n chainId: number;\n}) {\n const [vaults, setVaults] = useStateYour Claimable Rewards
\n\n {rewards.total.map((reward) => (\n\n {reward.symbol}\n \n {formatUnits(reward.amount, 18)} {reward.symbol}\n \n
\n ))}\n\n {/* Show separate counts for transparency */}\n \n \n Merkl: {rewards.merkl.length} rewards • URD: {rewards.urd.length} rewards\n \n
\n\n {/* Claim button */}\n \n | Vault | \nYour Deposit | \nBase APY | \nRewards APR | \nTotal APY | \nClaimable | \n
|---|---|---|---|---|---|
| {vault.name} | \n\n {vault.userDeposit} {vault.asset.symbol}\n | \n{vault.baseApy.toFixed(2)}% | \n\n +{vault.rewardsApr.toFixed(2)}%\n | \n\n {vault.totalApy.toFixed(2)}%\n | \n\n {vault.claimable > 0 ? (\n \n ) : (\n —\n )}\n | \n
\n
\n );\n}\n```\n\n## Real-Time Updates\n\n### Polling for Updates\n\n```typescript\nfunction useRewardsPolling(userAddress: string, chainId: number) {\n const [rewards, setRewards] = useStateActive Reward Programs
\n\n {programs.map((program) => (\n\n
\n ))}\n \n 
\n {program.token} Rewards\n
\n\n \n
\n APR: {program.apr.toFixed(2)}%
\n Ends: {formatDate(program.endDate)}
\n Source: {program.isMerkl ? \"Merkl\" : \"Morpho URD\"}
\n \n Accruing: \n \n {accrued.toFixed(6)} MORPHO\n \n
\n );\n}\n```\n\n## Handling Edge Cases\n\n### No Rewards Available\n\n```tsx\n{rewards.length === 0 ? (\n \n
\n) : (\n No active reward programs for this vault
\nCheck back later or explore other vaults
\n\n
\n) : (\n Unable to load rewards data
\n \n