Skip to main content

​
SpiceFlowProvider

The root provider component that wraps your application and manages wallet connections.

​
Usage

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

<SpiceFlowProvider
  provider="privy"
  privyAppId="your-app-id"
  defaultChain={sepolia}
  supportedChains={[sepolia, citreaTestnet]}
>
  {children}
</SpiceFlowProvider>

​
Props

PropTypeRequiredDescription
provider'privy' | 'dynamic' | 'para'YesWallet provider to use
childrenReactNodeYesYour application components
privyAppIdstringIf using PrivyPrivy application ID
dynamicEnvironmentIdstringIf using DynamicDynamic environment ID
paraApiKeystringIf using ParaPara API key
paraAppNamestringIf using ParaPara application name
defaultChainChainNoDefault chain (from viem)
supportedChainsChain[]YesArray of supported chains for your app

​
Examples

<SpiceFlowProvider
  provider="privy"
  privyAppId="cmebl077a0160l40a7xpxcv84"
  embeddedWalletConfig={{
    createOnLogin: "users-without-wallets"
  }}
>
  {children}
</SpiceFlowProvider>

​
SwapWidget

Pre-built UI component for cross-chain swaps with built-in asset selection, balance display, and transaction execution.

​
Usage

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

<SwapWidget
  swapBatches={swapBatches}
  supportedChains={[11155111, 1551]}
  tokenAddress="0x0"
  showSlippageSettings={true}
/>

​
Props

PropTypeRequiredDefaultDescription
swapBatchesChainBatch[]Yes-Array of chain batches for cross-chain execution
supportedChainsnumber[]Yes-Array of supported chain IDs for swap
tokenAddressstringNo'0x0'Token address for the swap (0x0 for native)
theme'light' | 'dark'No'light'Color theme
stylesSwapWidgetStylesNo-Custom styling object
showSlippageSettingsbooleanNotrueShow/hide slippage settings
enableFlipSwapbooleanNotrueEnable asset flipping button
fromInputHookUseFromInputReturnNo-External hook for “from” input control
toInputUpdateHookUseToInputUpdateReturnNo-External hook for “to” input updates

​
ChainBatch Type

interface ChainBatch {
  chainId: number;
  recentBlock: number | bigint;
  calls: Array<{
    to: string;
    value: string | number | bigint;
    data: string;
  }>;
}

​
Custom Styling

You can customize the widget appearance using the styles prop: 
<SwapWidget
  swapBatches={[]}
  supportedChains={[11155111]}
  styles={{
    primaryColor: "#EA580C",
    fontFamily: "Inter, sans-serif",
    container: {
      backgroundColor: "#ffffff",
      borderRadius: "16px",
      padding: "24px",
    },
  }}
/>

​
Example with Swap Batches

const swapBatches = [
  {
    chainId: 11155111, // Sepolia
    recentBlock: 5000000,
    calls: [{
      to: "0x...", // Contract address
      value: 0,
      data: "0x..." // Encoded function call
    }]
  },
  {
    chainId: 1551, // Citrea
    recentBlock: 100000,
    calls: [{
      to: "0x...",
      value: 0,
      data: "0x..."
    }]
  }
];

<SwapWidget
  swapBatches={swapBatches}
  supportedChains={[11155111, 1551]}
/>

​
ProviderLogin

Wallet connection button that adapts to your selected provider (Privy, Dynamic, or Para).

​
Usage

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

<ProviderLogin />

​
Props

PropTypeRequiredDescription
stylesLoginStylesNoCustom styling for the login button

​
Example

<ProviderLogin
  styles={{
    button: {
      backgroundColor: "#EA580C",
      color: "#ffffff",
      padding: "12px 24px",
      borderRadius: "8px"
    }
  }}
/>
The button text automatically adapts based on the provider:
  • Privy: “Login with Privy”
  • Dynamic: “Connect Wallet”
  • Para: “Login with Para”

​
Next Steps

Hooks

Learn about available React hooks

Styling

Customize component appearance

Configuration

Configure chains and providers

Examples

See complete examples