Getting Started

This page walks you through registering your application, installing the SDK, and rendering your first savings widget.

---

Prerequisites

Dependency	Version
Node.js	18 or higher
React	17 or higher (for widget integration)
React DOM	17 or higher (for widget integration)
ethers	v6 (peer dependency of core-sdk)

The core SDK is framework-agnostic. It works in React, Vue, Svelte, vanilla JavaScript or Node.js. The widget component requires React.

---

Step 1: Register your application

Go to sdk.surfliquid.com and register your application. On approval, you receive two credentials:

• appId - a public identifier. Safe to include in frontend code.

• apiSecret - a private key for backend API calls. Store this securely in environment variables or a secrets manager. It is shown only once.

---

Step 2: Install packages

npm install @surf_liquid/core-sdk @surf_liquid/surf-widget

---

Step 3: Render the widget

import { SurfWidget } from '@surf_liquid/surf-widget';
import { SurfClient } from '@surf_liquid/core-sdk';

// Create the client after the user connects their wallet
const client = new SurfClient({
  provider: window.ethereum,       // any EIP-1193 wallet provider
  walletAddress: '0xUserAddress',
  chainId: 8453,                   // Base mainnet (1 = Ethereum, 137 = Polygon)
  appId: 'YOUR_APP_ID',
  autoApprove: true,
});

// Drop the widget into your app
<SurfWidget
  client={client}
  walletAddress="0xUserAddress"
  chainId={8453}
  minDeposit={1}
  theme={{ colors: { primary: '#6366f1' } }}
  onSuccess={(action, txHash) => console.log(action, txHash)}
  onError={(action, error) => console.error(action, error)}
/>

That is everything you need for a fully functional savings experience inside your application.

---

What happens next

Once the widget is live, your users can:

1. Connect their wallet

2. Deposit USDC (or other supported assets)

3. A personal smart contract vault is deployed on their first deposit

4. Surf AI begins managing their funds across approved venues

5. Users track their balance, earnings and Surf AI activity in real time

6. Withdraw any amount at any time

Your partner dashboard at sdk.surfliquid.com shows aggregate stats, user positions and revenue reporting.

---

Further reading

• Widget Integration - Full component reference and user flow walkthrough

• Customisation - Match the widget to your brand identity

• Core SDK Reference - Build a fully custom interface

• REST API Reference - Server-side analytics and reporting