> For the complete documentation index, see [llms.txt](https://docs.dittonetwork.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dittonetwork.io/ditto-earn/yield-split-vault/integration.md).

# Integration

Widget and API

### Widget SDK Integration

{% hint style="warning" %}
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](#rest-api-reference) below is live today.
{% endhint %}

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

```bash
npm install @ditto-network/sdk lucide-react
```

#### Basic Usage

```tsx
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}`

```json
{
  "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)

```json
{
  "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

```json
{
  "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:**

```bash
curl "https://api.dittonetwork.io/v1/vaults?status=active" \
  -H "Authorization: Bearer $DITTO_API_KEY"
```

**Get specific vault details:**

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

**Get a user's transactions for a vault:**

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