Integration

Widget and API

Widget SDK Integration

The widget SDK is not published yet — @ditto-network/sdk is not yet available on npm, and the snippet below describes the planned interface. If you want it for your app, contact us and we will get you into the private beta. The REST API below is live today.

The easiest way to integrate the Yield Split Vault will be 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 { VaultCard, PositionCard, HistoricChart, 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="0x62507A876309639096D08E7F77AC9CfB67Df8011"
        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)

The payloads below are illustrative; figures are not live values.

1 Get Vault Details

Returns TVL, current APY, and strategy allocation.

Endpoint: GET /vaults/{address}

{
  "vault": {
    "address": "0x62507A876309639096D08E7F77AC9CfB67Df8011",
    "name": "Yield Split USDC",
    "tvl": {
        "amount": "12,450,230.50",
        "currency": {
            "symbol": "USDC",
            "chain_id": 1,
            "address": "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"
        }
    },
    "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": "2026-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" \
  -H "Authorization: Bearer $DITTO_API_KEY"

Get specific vault details:

curl "https://api.dittonetwork.io/v1/vaults/0x62507A876309639096D08E7F77AC9CfB67Df8011" \
  -H "Authorization: Bearer $DITTO_API_KEY"

Get a user's transactions for a vault:

curl "https://api.dittonetwork.io/v1/transactions?vault=0x62507A876309639096D08E7F77AC9CfB67Df8011&user=0xYourAddress" \
  -H "Authorization: Bearer $DITTO_API_KEY"