Overview
Integration documentation on how to integrate white-label, automated yield vault built on the ERC-4626 standard into your app.
Ditto Yield is a white-label, automated yield aggregator for lending protocols built on the ERC-4626 standard. It maximizes capital efficiency by dynamically rebalancing assets across blue-chip DeFi strategies (e.g., Aave, Spark, Fluid) based on realized historical performance.
This platform allows developers and fintechs to offer structured, high-yield DeFi products to their users via a simple SDK Widget or a raw Data API, without managing complex smart contract interactions or manual rebalancing.
4. Widget SDK Integration
The easiest way to integrate Ditto Yield is via our React SDK. It provides a fully responsive, themed UI for deposits, withdrawals, and analytics.
Installation
npm install @ditto-network/sdk lucide-react
Basic Usage
import { DittoWidget, VaultCard, PositionCard, HistoryCard } from '@ditto-network/sdk';
export default function YieldDashboard() {
return (
<div className="flex flex-col gap-4 max-w-md mx-auto">
{/* 1. Core Interaction */}
<VaultCard
vaultAddress="0x8a...9f2"
theme="dark"
/>
{/* 2. User Stats & Graph */}
<PositionCard theme="dark" />
{/* 3. Analytics */}
<HistoricChart
period="30d"
benchmark="market"
theme="dark"
/>
{/* 4. Activity */}
<HistoryCard limit={5} theme="dark" />
</div>
);
}
Configuration Props
vaultAddress
string
Required
The address of the Ditto Vault.
theme
dark
light
Interface style
primaryColor
string
'text-cyan-400'
Tailwind text color class for accents.
showSwap
boolean
true
Show the Deposit/Withdraw interface.
showChart
boolean
true
Show the historical APY backtest chart.
showPosition
boolean
true
Show user balance and PnL card.
showHistory
boolean
true
Show transaction history list.
5. REST API Reference
For custom dashboards, use the Data API.
Base URL: https://api.dittonetwork.io
Auth: Bearer Token (Contact Sales for API Key)
5.1 Get Vault Details
Returns TVL, current APY, and strategy allocation.
Endpoint: GET /vaults/{address}
{
"vault": {
"address": "0x8a92...3f21",
"name": "Ditto USDC Multi-Strat",
"tvl": {
"amount": "12,450,230.50",
"currency": {
"symbol": "USDC",
"chain_id": 1,
"address": "0xA0b8...eB48"
}
},
"apy": {
"current": 5.02,
"weekly_avg": 4.89
},
"allocations": [
{ "protocol": "Fluid", "percent": 45.0, "apy": 5.42 },
{ "protocol": "Spark", "percent": 30.0, "apy": 4.85 },
{ "protocol": "Aave", "percent": 25.0, "apy": 4.12 }
]
}
}
5.2 Get Historical APY Series
Returns daily data points for building charts.
Endpoint: GET /series
Query Params:
vault,period(7d, 30d, 1y, all)
{
"period": "30d",
"data": [
{
"date": "2025-05-20",
"apy": 4.85,
"tvl": 12123456.00,
"allocations": [
{ "protocol": "Fluid", "percent": 45.0, "apy": 5.42 },
{ "protocol": "Spark", "percent": 30.0, "apy": 4.85 },
{ "protocol": "Aave", "percent": 25.0, "apy": 4.12 }
},
...
]
}
5.3 Get Global Transactions
Returns a paginated list of all vault events (User actions + Protocol actions).
Endpoint: GET /transactions
Query Params:
vault: (string) Vault addressdepositor: (string) Depositor addresstype: (string)DEPOSIT,WITHDRAW,REBALANCE,APR_UPDATElimit: (int) Default 20page: (int) Default 1
{
"meta": {
"total": 1450,
"page": 1,
"limit": 20
},
"data": [
{
"tx_hash": "0x3a2...9b1",
"type": "REBALANCE",
"timestamp": 1748805000,
"value_usd": "1,250,000.00",
"details": {
"strategy_in": "FLUID",
"strategy_out": "AAVE"
}
},
{
"tx_hash": "0x4c2...1e9",
"type": "APR_UPDATE",
"timestamp": 1748803800,
"details": {
"new_apy": 5.02
}
}
]
}
Usage Examples
Get all active vaults:
curl "<https://api.dittonetwork.io/v1/vaults?status=active>"Get specific vault details:
curl "<https://api.dittonetwork.io/v1/vaults/0x123>..."Get specific transactions of the user:
curl "<https://api.dittonetwork.io/v1/transactions?vault=0x123...&user=0x123>.."Last updated

