Quick Start

Overview

This guide walks you through adding Spice Flow to your app. By the end, your users will be able to deposit assets from any chain into your protocol without bridging. What you’ll build:

A wallet connection flow (embedded + external wallet)
A deposit interface that accepts any token from any supported chain
Cross chain execution powered by EIP 7702

Step 1: Installation

Install the Spice Flow UI SDK and Privy for wallet management:

npm install @spicenet-io/spiceflow-ui @privy-io/react-auth react react-dom viem wagmi @tanstack/react-query axios

yarn add @spicenet-io/spiceflow-ui @privy-io/react-auth react react-dom viem wagmi @tanstack/react-query axios

pnpm add @spicenet-io/spiceflow-ui @privy-io/react-auth react react-dom viem wagmi @tanstack/react-query axios

Step 2: Setup Provider

Wrap your app with SpiceFlowProvider. This sets up wallet connections, chain configuration, and theming:

"use client"; // For Next.js App Router

import { SpiceFlowProvider } from "@spicenet-io/spiceflow-ui";

function App() {
  return (
    <SpiceFlowProvider
      provider="privy"
      network="mainnet"
      nativeChainId={8453}
      theme={{ primaryColor: "#f97316", dark: true }}
    >
      {/* Your app components go here */}
    </SpiceFlowProvider>
  );
}

export default App;

Get your Privy App ID from privy.io. You can also use Dynamic as your wallet provider. See Configuration for details.

Step 3: Add Deposit Flow

Import SpiceDeposit and provide the on chain calls you want executed on the destination chain:

import { useState } from "react";
import { SpiceFlowProvider, SpiceDeposit } from "@spicenet-io/spiceflow-ui";
import { encodeFunctionData } from "viem";

function App() {
  const [isOpen, setIsOpen] = useState(false);

  // These are the calls that run on the destination chain after the user deposits
  const depositBatches = [
    {
      chainId: 8453, // Base
      calls: [
        { to: TOKEN_ADDRESS, value: 0n, data: encodeApprove(VAULT, amount) },
        { to: VAULT_ADDRESS, value: 0n, data: encodeDeposit(TOKEN_ADDRESS, amount) },
      ],
    },
  ];

  return (
    <SpiceFlowProvider
      provider="privy"
      network="mainnet"
      nativeChainId={8453}
      theme={{ primaryColor: "#f97316", dark: true }}
    >
      <button onClick={() => setIsOpen(true)}>Deposit</button>
      <SpiceDeposit
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        depositBatches={depositBatches}
        styles={{ primaryColor: "#f97316" }}
      />
    </SpiceFlowProvider>
  );
}

That’s it. The SDK handles the entire flow: Privy login, external wallet connection, token selection, escrow deposit, EIP 7702 delegation signing, and solver execution on the destination chain.

Step 4: Add Withdrawals (Optional)

Let users withdraw their Spice balance back to their wallet:

import { SpiceWithdraw } from "@spicenet-io/spiceflow-ui";

<SpiceWithdraw
  isOpen={withdrawOpen}
  onClose={() => setWithdrawOpen(false)}
  styles={{ primaryColor: "#f97316" }}
/>

Complete Example

Here’s a complete Next.js page with deposit and withdraw:

"use client";

import { useState } from "react";
import { SpiceFlowProvider, SpiceDeposit, SpiceWithdraw } from "@spicenet-io/spiceflow-ui";

function DeFiApp() {
  const [depositOpen, setDepositOpen] = useState(false);
  const [withdrawOpen, setWithdrawOpen] = useState(false);

  return (
    <SpiceFlowProvider
      provider="privy"
      network="mainnet"
      nativeChainId={8453}
      theme={{ primaryColor: "#f97316", dark: true }}
    >
      <div style={{ display: "flex", gap: "12px", padding: "40px" }}>
        <button onClick={() => setDepositOpen(true)}>Deposit</button>
        <button onClick={() => setWithdrawOpen(true)}>Withdraw</button>
      </div>

      <SpiceDeposit
        isOpen={depositOpen}
        onClose={() => setDepositOpen(false)}
        depositBatches={[
          {
            chainId: 8453,
            calls: [
              // Your destination chain calls here
            ],
          },
        ]}
        styles={{ primaryColor: "#f97316" }}
        onDepositSuccess={(detail) => {
          console.log("Deposit succeeded:", detail);
        }}
      />

      <SpiceWithdraw
        isOpen={withdrawOpen}
        onClose={() => setWithdrawOpen(false)}
        styles={{ primaryColor: "#f97316" }}
      />
    </SpiceFlowProvider>
  );
}

export default function Home() {
  return <DeFiApp />;
}

Environment Setup

Create a .env.local file in your project root:

NEXT_PUBLIC_PRIVY_APP_ID=your_privy_app_id_here

Get your credentials:

Privy: Sign up at privy.io and create an app
Dynamic: Sign up at dynamic.xyz and get your environment ID

How It Works

User opens your app and logs in via Privy (creates an embedded wallet)
User connects their external wallet (MetaMask, etc.)
User selects a token and amount to deposit
External wallet sends the token to the embedded wallet, then to the escrow
SDK signs an EIP 7702 delegation and submits it to the solver
Solver executes the depositBatches calls on the destination chain on behalf of the user
Success callback fires

The user never bridges. The user never pays gas on the destination chain.

What’s Next?

Components

Explore all available components and their props

Hooks

Build custom UIs with React hooks

Styling

Customize the appearance to match your brand

Configuration

Configure chains, providers, and execution modes

Using Dynamic Provider

<SpiceFlowProvider
  provider="dynamic"
  dynamicEnvironmentId={process.env.NEXT_PUBLIC_DYNAMIC_ENVIRONMENT_ID}
  network="mainnet"
  nativeChainId={8453}
>
  {children}
</SpiceFlowProvider>

Troubleshooting

”Window is not defined” Error

If you see this in Next.js, ensure you’re using the "use client" directive:

"use client";

import { SpiceFlowProvider } from "@spicenet-io/spiceflow-ui";

Getting Started

SDK Reference

Guides & Examples

Technical Deep Dive

Overview

Step 1: Installation

Step 2: Setup Provider

Step 3: Add Deposit Flow

Step 4: Add Withdrawals (Optional)

Complete Example

Environment Setup

How It Works

What’s Next?

Components

Hooks

Styling

Configuration

Using Dynamic Provider

Troubleshooting

”Window is not defined” Error

Wallet Not Connecting

Need More Help?

Join our Discord

​Overview

​Step 1: Installation

​Step 2: Setup Provider

​Step 3: Add Deposit Flow

​Step 4: Add Withdrawals (Optional)

​Complete Example

​Environment Setup

​How It Works

​What’s Next?

Components

Hooks

Styling

Configuration

​Using Dynamic Provider

​Troubleshooting

​”Window is not defined” Error

​Wallet Not Connecting

​Need More Help?

Join our Discord

Overview

Step 1: Installation

Step 2: Setup Provider

Step 3: Add Deposit Flow

Step 4: Add Withdrawals (Optional)

Complete Example

Environment Setup

How It Works

What’s Next?

Using Dynamic Provider

Troubleshooting

”Window is not defined” Error

Wallet Not Connecting

Need More Help?