Skip to main content

​
Wallet Providers

Spice Flow supports three major wallet providers. Choose the one that best fits your needs.

​
Privy

Best for embedded wallets and social logins. 
<SpiceFlowProvider
  provider="privy"
  privyAppId="your-privy-app-id"
  embeddedWalletConfig={{
    createOnLogin: "users-without-wallets"
  }}
>
  {children}
</SpiceFlowProvider>
Configuration Options:
OptionTypeDescription
privyAppIdstringYour Privy application ID (required)
embeddedWalletConfigobjectEmbedded wallet behavior configuration
embeddedWalletConfig.createOnLogin'off' | 'users-without-wallets' | 'all-users'When to create embedded wallets
Get Your Privy App ID:
  1. Sign up at privy.io
  2. Create a new app
  3. Copy your App ID from the dashboard

​
Dynamic

Best for multi-wallet support and flexible authentication. 
<SpiceFlowProvider
  provider="dynamic"
  dynamicEnvironmentId="your-dynamic-environment-id"
>
  {children}
</SpiceFlowProvider>
Configuration Options:
OptionTypeDescription
dynamicEnvironmentIdstringYour Dynamic environment ID (required)
Get Your Dynamic Environment ID:
  1. Sign up at dynamic.xyz
  2. Create a new project
  3. Copy your Environment ID from settings

​
Para

Best for Web3 onboarding and account abstraction. 
<SpiceFlowProvider
  provider="para"
  paraApiKey="your-para-api-key"
  paraAppName="Your App Name"
>
  {children}
</SpiceFlowProvider>
Configuration Options:
OptionTypeDescription
paraApiKeystringYour Para API key (required)
paraAppNamestringYour application name (required)
Get Your Para Credentials:
  1. Sign up at getpara.com
  2. Create a new application
  3. Copy your API key and app name

​
Supported Chains

Configure which chains your application supports.

​
Default Chains

import { sepolia, mainnet } from 'viem/chains';

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

​
SwapWidget Configuration

Configure the swap widget behavior and appearance.

​
Basic Configuration

<SwapWidget
  swapBatches={batches}
  supportedChains={[11155111, 1551]}
  tokenAddress="0x0" // Native token
  showSlippageSettings={true}
  enableFlipSwap={true}
  theme="light"
/>

​
Configuration Options

OptionTypeDefaultDescription
swapBatchesChainBatch[]RequiredChain batches for execution
supportedChainsnumber[]RequiredArray of supported chain IDs
tokenAddressstring'0x0'Token address (0x0 for native)
theme'light' | 'dark''light'Color theme
showSlippageSettingsbooleantrueShow slippage configuration
enableFlipSwapbooleantrueEnable asset flip button
stylesSwapWidgetStyles-Custom styling object

​
Slippage Configuration

const [swapConfig, setSwapConfig] = useState({
  slippage: '0.5%'
});

<SwapWidget
  swapBatches={batches}
  supportedChains={[11155111]}
  showSlippageSettings={true}
/>

​
API Configuration

Configure the API endpoint for transaction submission.

​
Default Configuration

By default, the SDK uses https://tx-api.spicenet.io for transaction submission.

​
Custom API Endpoint

If you’re running your own relayer or using a custom endpoint: 
import { RelayerService } from "@spicenet-io/spiceflow";

const customRelayer = new RelayerService("https://your-custom-api.com");

// Use in your swap logic
const result = await customRelayer.submitTransaction(request);

​
Next Steps

Styling

Customize component appearance

Components

Explore available components

Examples

See complete examples

Best Practices

Security and integration patterns