Skip to main content

​
Installation

Install the Spice Flow SDK using npm, yarn, or pnpm: 
npm install @spicenet-io/spiceflow-ui

yarn add @spicenet-io/spiceflow-ui

pnpm add @spicenet-io/spiceflow-ui

​
Peer Dependencies

The SDK requires the following peer dependencies. Install based on your wallet provider:

​
Required Dependencies

These are always required: 
npm install react react-dom viem wagmi @tanstack/react-query axios
PackageVersionDescription
react^18.0.0React library
react-dom^18.0.0React DOM
viem>=2.21.0Ethereum interface library
wagmi>=2.12.0React hooks for Ethereum
@tanstack/react-query>=5.0.0Data fetching library
axios>=1.0.0HTTP client

​
Provider-Specific Dependencies

Install depending on your chosen wallet provider: 
npm install @privy-io/react-auth
PackageVersionProvider
@privy-io/react-auth>=2.24.0 <4.0.0Privy
@dynamic-labs/sdk-react-core>=3.9.13 <5.0.0Dynamic
@dynamic-labs/ethereum>=3.9.13 <5.0.0Dynamic
@dynamic-labs/wallet-connector-core>=3.9.13 <5.0.0Dynamic

​
Complete Installation

​
With Privy

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

​
With Dynamic

npm install @spicenet-io/spiceflow-ui @dynamic-labs/sdk-react-core @dynamic-labs/ethereum @dynamic-labs/wallet-connector-core react react-dom viem wagmi @tanstack/react-query axios

​
Basic Setup

​
1. Wrap Your App

Wrap your application with SpiceFlowProvider and configure your wallet provider: 
import { SpiceFlowProvider } from "@spicenet-io/spiceflow-ui";

function App() {
  return (
    <SpiceFlowProvider
      provider="privy"
      privyAppId="your-privy-app-id"
    >
      {/* Your app components */}
    </SpiceFlowProvider>
  );
}

​
2. Add Wallet Connection

Use the ProviderLogin component to let users connect their wallet: 
import { ProviderLogin } from "@spicenet-io/spiceflow-ui";

function Header() {
  return (
    <div>
      <ProviderLogin />
    </div>
  );
}

​
3. Add a Deposit Flow

Add SpiceDeposit to let users deposit from any chain: 
import { useState } from "react";
import { SpiceDeposit } from "@spicenet-io/spiceflow-ui";

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

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Deposit</button>
      <SpiceDeposit
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        depositBatches={[
          {
            chainId: 8453,
            calls: [
              // Your destination chain calls here
            ],
          },
        ]}
        styles={{ primaryColor: "#f97316" }}
      />
    </>
  );
}

​
Complete Example

Here’s a complete Next.js example 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={[]}
        styles={{ primaryColor: "#f97316" }}
      />

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

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

​
Next.js Considerations

If you’re using Next.js with Server-Side Rendering (SSR), wrap components that use Spice Flow in a client component: 
"use client"; // Add this directive at the top

import { SpiceFlowProvider } from "@spicenet-io/spiceflow-ui";
Or check for the window object: 
if (typeof window === 'undefined') {
  return <div>Loading...</div>;
}

​
Environment Variables

Store your provider credentials in environment variables: 
# For Privy
NEXT_PUBLIC_PRIVY_APP_ID=your_privy_app_id

# For Dynamic
NEXT_PUBLIC_DYNAMIC_ENVIRONMENT_ID=your_dynamic_environment_id
Then use them in your code: 
<SpiceFlowProvider
  provider="privy"
  privyAppId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}
>

​
Next Steps

Components

Learn about all available components and their props

Hooks

Use React hooks to build custom UIs

Configuration

Configure wallet providers, chains, and more

Quick Start Guide

Build your first Spice Flow app step-by-step