Integration

Widget and API

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

Prop	Type	Default	Description
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.

---

REST API Reference

For custom dashboards, use the Data API.

Base URL: https://api.dittonetwork.io

Auth: Bearer Token (Contact Sales for API Key)

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 }
    ]
  }
}

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 }
    },
    ...
  ]
}

3 Get Global Transactions

Returns a paginated list of all vault events (User actions + Protocol actions).

Endpoint: GET /transactions

• Query Params:

  • vault: (string) Vault address

  • depositor: (string) Depositor address

  • type: (string) DEPOSIT, WITHDRAW, REBALANCE, APR_UPDATE

  • limit: (int) Default 20

  • page: (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>.."