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 the Swap Widget

Include the SwapWidget component where you want users to perform swaps: 
import { SwapWidget } from "@spicenet-io/spiceflow-ui";

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

​
Complete Example

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

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

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, 421614]} 
        />
      </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-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