Skip to main content

​
Installation

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

yarn add @spicenet-io/spiceflow

pnpm add @spicenet-io/spiceflow

​
Basic Setup

We will use Para as an example

​
1. Wrap Your App

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

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";

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

​
3. Add the Swap Widget

Include the SwapWidget component where you want users to perform swaps. Make sure to pass your app’s swap calls in the swapBatches array: 
import { SwapWidget } from "@spicenet-io/spiceflow";

function SwapPage() {
  return (
    <SwapWidget
      swapBatches={[]}
      supportedChains={[11155111, 1551]} // Sepolia and Citrea Testnet
    />
  );
}

​
Complete Example

Here’s a complete Next.js example: 
"use client";

import { SpiceFlowProvider, SwapWidget, ProviderLogin } from "@spicenet-io/spiceflow";

function WalletComponent() {
  if (typeof window === 'undefined') {
    return <div>Loading...</div>;
  }

  return (
    <SpiceFlowProvider
      provider="privy"
      privyAppId="your-privy-app-id"
    >
      <div style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        height: "90vh",
        gap: "20px",
      }}>
        <ProviderLogin />
        <SwapWidget 
          swapBatches={[]} 
          supportedChains={[11155111, 1551]} 
        />
      </div>
    </SpiceFlowProvider>
  );
}

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

​
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";
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

# For Para
NEXT_PUBLIC_PARA_API_KEY=your_para_api_key
NEXT_PUBLIC_PARA_APP_NAME=your_app_name
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