Integrating Deframe with Privy

Deframe allows apps to access diversified DeFi yield strategies across multiple protocols through a single API. Apps fetch strategies from Deframe and execute the returned transaction bytecodes using Privy wallets. This enables deposits into lending, staking, and protocol-native yield strategies without managing complex transaction flows.

Resources

Deframe Docs

Official documentation for Deframe strategies and API.

Starter repo

Full working example of Deframe + Privy integration.

---

Using Deframe with Privy

For this walkthrough, the examples use the Aave USDT strategy on Polygon. The same patterns work across all Deframe-supported strategies and networks—explore the complete list via the Deframe API.

Setup

Below is a minimal setup for the Privy provider. To customize the provider, follow the Privy Quickstart.

import {PrivyProvider} from '@privy-io/react-auth';

export function App() {
  return (
    <PrivyProvider appId="your-privy-app-id">{/* Your application components */}</PrivyProvider>
  );
}

Configure Deframe API access

Obtain your API credentials from the Deframe Dashboard:

const DEFRAME_API_URL = 'https://api.deframe.io';
const DEFRAME_API_KEY = 'your-deframe-api-key';

List available strategies

Fetch the yield strategies available for users:

const fetchStrategies = async () => {
  const response = await fetch(`${DEFRAME_API_URL}/strategies?limit=100`, {
    method: 'GET',
    headers: {
      'x-api-key': DEFRAME_API_KEY
    }
  });

  const {data: strategies} = await response.json();
  return strategies;
};

Each strategy includes fields like id, protocol, assetName, network, and availableActions.

---

Deposit into a yield strategy

1. 1. Get the user's wallet address

   import {useWallets} from '@privy-io/react-auth';
   
   const {wallets} = useWallets();
   const walletAddress = wallets[0]?.address;
   
2. 2. Generate transaction bytecodes from Deframe

   Request the bytecodes needed to execute a deposit action:

   const strategyId = 'Aave-USDT-polygon';
   const action = 'lend';
   const amount = '1500000'; // 1.5 USDT (6 decimals)
   
   const response = await fetch(
     `${DEFRAME_API_URL}/strategies/${strategyId}/bytecode?action=${action}&wallet=${walletAddress}&amount=${amount}`,
     {
       method: 'GET',
       headers: {
         'x-api-key': DEFRAME_API_KEY
       }
     }
   );
   
   const bytecodeResponse = await response.json();
   

   The response contains an array of transactions to execute:

   type DeframeBytecodeResponse = {
     feeCharged: string;
     metadata: {
       isCrossChain: boolean;
       isSameChainSwap: boolean;
       crossChainQuoteId: string;
     };
     bytecode: {
       to: string;
       value: string;
       data: string;
       chainId: string;
     }[];
   };
   
3. 3. Execute the transactions with Privy

   Use Privy’s useSendTransaction to execute each bytecode:

   import {useSendTransaction} from '@privy-io/react-auth';
   
   const {sendTransaction} = useSendTransaction();
   
   const executeDeframeStrategy = async (bytecodeResponse: DeframeBytecodeResponse) => {
     for (const tx of bytecodeResponse.bytecode) {
       await sendTransaction({
         to: tx.to as `0x${string}`,
         data: tx.data as `0x${string}`,
         value: BigInt(tx.value),
         chainId: Number(tx.chainId)
       });
     }
   };
   

---

Check strategy position

Fetch the user’s current position and APY for a strategy:

const fetchPosition = async (strategyId: string, walletAddress: string) => {
  const response = await fetch(
    `${DEFRAME_API_URL}/strategies/${strategyId}?wallet=${walletAddress}`,
    {
      method: 'GET',
      headers: {
        'x-api-key': DEFRAME_API_KEY
      }
    }
  );

  const strategy = await response.json();
  return {
    apy: strategy.apy,
    avgApy: strategy.avgApy,
    position: strategy.position
  };
};

---

Withdraw from a strategy

To withdraw, use the withdraw action and execute the returned bytecodes:

import {useSendTransaction} from '@privy-io/react-auth';

const {sendTransaction} = useSendTransaction();

const withdrawFromStrategy = async (strategyId: string, walletAddress: string, amount: string) => {
  const response = await fetch(
    `${DEFRAME_API_URL}/strategies/${strategyId}/bytecode?action=withdraw&wallet=${walletAddress}&amount=${amount}`,
    {
      method: 'GET',
      headers: {
        'x-api-key': DEFRAME_API_KEY
      }
    }
  );

  const bytecodeResponse = await response.json();

  for (const tx of bytecodeResponse.bytecode) {
    await sendTransaction({
      to: tx.to as `0x${string}`,
      data: tx.data as `0x${string}`,
      value: BigInt(tx.value),
      chainId: Number(tx.chainId)
    });
  }
};

---

Deframe EarnWidget

For a faster integration, Deframe provides a pre-built EarnWidget component that handles strategy selection, deposits, and withdrawals with a built-in UI.

Install the Deframe SDK

npm install deframe-sdk @deframe-sdk/components @reduxjs/toolkit react-redux redux permissionless

If your app uses Vite, install the Node polyfills plugin and add it to vite.config.ts:

npm install --save-dev vite-plugin-node-polyfills

import {defineConfig} from 'vite';
import {nodePolyfills} from 'vite-plugin-node-polyfills';

export default defineConfig({
  plugins: [nodePolyfills()]
});

Configure the widget

import {DeframeProvider, EarnWidget} from 'deframe-sdk';
import {useSmartWallets} from '@privy-io/react-auth/smart-wallets';
import {usePrivy} from '@privy-io/react-auth';

const {user} = usePrivy();
const {client: smartWalletClient, getClientForChain} = useSmartWallets();

const config = {
  DEFRAME_API_URL: 'https://api.deframe.io',
  DEFRAME_API_KEY: 'your-deframe-api-key',
  walletAddress: smartWalletClient?.account.address,
  userId: user?.id,
  globalCurrency: 'USD',
  globalCurrencyExchangeRate: 1,
  theme: {mode: 'dark', preset: 'default'}
};

Implement the bytecode processor

The widget returns bytecode for the app to execute using Privy smart wallets:

import type {BytecodeTransaction, UpdateTxStatus} from 'deframe-sdk';

const processBytecode = async (
  payload: {clientTxId: string; bytecodes: BytecodeTransaction[]; simulateError?: boolean},
  ctx: {updateTxStatus: UpdateTxStatus}
) => {
  ctx.updateTxStatus({type: 'HOST_ACK', clientTxId: payload.clientTxId});

  const chainId = Number(payload.bytecodes[0].chainId);
  const chainClient = await getClientForChain({id: chainId});

  const calls = payload.bytecodes.map((b) => ({
    to: b.to as `0x${string}`,
    data: b.data as `0x${string}`,
    value: BigInt(b.value)
  }));

  ctx.updateTxStatus({type: 'SIGNATURE_PROMPTED', clientTxId: payload.clientTxId});
  const txHash = await chainClient.sendTransaction({calls});
  ctx.updateTxStatus({type: 'TX_SUBMITTED', clientTxId: payload.clientTxId, txHash});
};

Render the widget

<DeframeProvider config={config} processBytecode={processBytecode}>
  <EarnWidget autoHeight />
</DeframeProvider>

The EarnWidget requires Smart Wallets for transaction execution. Enable Smart Wallets in the Privy Dashboard under Wallet infrastructure.

---

Key integration tips

1. Handle token decimals: The amount parameter must respect the token’s decimal places. USDT and USDC use 6 decimals; most other tokens use 18.
2. Execute transactions in order: Deframe may return multiple bytecodes for a single action. Execute them sequentially.
3. Verify available actions: Each strategy has an availableActions array. Check that the action exists before requesting bytecodes.
4. Handle errors gracefully: Wrap transaction execution in try/catch blocks to handle user rejection, insufficient funds, and network issues.

For advanced use cases, refer to the Deframe Docs, or reach out in Slack.