# Integration

### 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

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

```

#### Basic Usage

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

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

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

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

**Get specific vault details:**

```bash
curl "<https://api.dittonetwork.io/v1/vaults/0x123>..."
```

**Get specific transactions of the user:**

```bash
curl "<https://api.dittonetwork.io/v1/transactions?vault=0x123...&user=0x123>.."
```