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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.dittonetwork.io/ditto-usd-meta-lending/integration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.