> ## Documentation Index
> Fetch the complete documentation index at: https://spiceflow-docs.spicenet.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Configuration

> Configure wallet providers, supported chains, and SDK behavior

## Wallet Providers

Spice Flow supports two wallet providers. Choose the one that fits your needs.

### Privy

Best for embedded wallets and social logins. This is the recommended provider for most integrations.

```tsx theme={null}
<SpiceFlowProvider
  provider="privy"
  network="mainnet"
  nativeChainId={8453}
>
  {children}
</SpiceFlowProvider>
```

**Configuration:**

| Option                               | Type                                              | Description                                    |
| ------------------------------------ | ------------------------------------------------- | ---------------------------------------------- |
| `privyAppId`                         | `string`                                          | Your Privy application ID (required for Privy) |
| `embeddedWalletConfig`               | `object`                                          | Embedded wallet behavior                       |
| `embeddedWalletConfig.createOnLogin` | `"off" \| "users-without-wallets" \| "all-users"` | When to create embedded wallets                |

**Get Your Privy App ID:**

1. Sign up at [privy.io](https://privy.io)
2. Create a new app
3. Copy your App ID from the dashboard

***

### Dynamic

Best for multi wallet support and flexible authentication.

```tsx theme={null}
<SpiceFlowProvider
  provider="dynamic"
  dynamicEnvironmentId="your-environment-id"
  network="mainnet"
  nativeChainId={8453}
>
  {children}
</SpiceFlowProvider>
```

**Get Your Dynamic Environment ID:**

1. Sign up at [dynamic.xyz](https://dynamic.xyz)
2. Create a new project
3. Copy your Environment ID from settings

***

## Execution Modes

Spice Flow supports three execution modes.

### 7702 Mode (Default)

Uses EIP 7702 with embedded wallets. The solver executes transactions on behalf of the user via delegate contracts. This is the default and recommended mode for most chains.

```tsx theme={null}
<SpiceFlowProvider
  provider="privy"
  network="mainnet"
  nativeChainId={8453}
  mode="7702"
>
  {children}
</SpiceFlowProvider>
```

### Presign Mode

Users sign all transactions upfront using their external wallet. Used for chains that don't support EIP 7702.

```tsx theme={null}
<SpiceFlowProvider
  provider="privy"
  mode="presign"
  nativeChainId={688689}
>
  {children}
</SpiceFlowProvider>
```

### Ondemand Mode

Each transaction is signed on demand during execution. The app handles execution via `onDepositExecute` / `onWithdrawExecute` callbacks.

```tsx theme={null}
<SpiceFlowProvider
  provider="privy"
  mode="ondemand"
  nativeChainId={688689}
>
  {children}
</SpiceFlowProvider>
```

<Note>
  In `presign` and `ondemand` modes, the embedded wallet flow is skipped. Components use callback props (like `onDepositExecute`) instead of the solver execution path.
</Note>

***

## Network Configuration

Set the network to control which chains are available:

```tsx theme={null}
<SpiceFlowProvider network="mainnet" nativeChainId={8453}>
```

### Default Chains by Network

**Mainnet:** Ethereum (1), Base (8453), Arbitrum (42161), Citrea (4114)

**Testnet:** Sepolia (11155111), Arbitrum Sepolia (421614), Citrea Testnet (5115), Base Sepolia (84532)

### Custom Chain IDs

Override the defaults with `supportedChainIds`:

```tsx theme={null}
<SpiceFlowProvider
  provider="privy"
  network="mainnet"
  nativeChainId={8453}
  supportedChainIds={[8453, 4114]}
>
  {children}
</SpiceFlowProvider>
```

***

## Theming

Set your app's visual identity through the `theme` prop. All SDK components inherit these values.

```tsx theme={null}
<SpiceFlowProvider
  provider="privy"
  network="mainnet"
  nativeChainId={8453}
  theme={{
    primaryColor: "#f97316",
    dark: true,
    appName: "MyApp",
  }}
>
  {children}
</SpiceFlowProvider>
```

See [Styling](/sdk/styling) for the full theming reference.

***

## API URL Override

By default, the SDK connects to the Spicenet relayer. Override this if you're proxying requests or using a custom deployment:

```tsx theme={null}
<SpiceFlowProvider
  provider="privy"
  network="mainnet"
  apiUrl="/api/relayer"
>
  {children}
</SpiceFlowProvider>
```

***

## Complete Provider Reference

| Prop                   | Type                                | Default      | Description                                  |
| ---------------------- | ----------------------------------- | ------------ | -------------------------------------------- |
| `provider`             | `"privy" \| "dynamic"`              | Required     | Wallet provider                              |
| `network`              | `"mainnet" \| "testnet"`            | `"testnet"`  | Network environment                          |
| `nativeChainId`        | `number`                            |              | User's default chain                         |
| `theme`                | `SpiceTheme`                        |              | Colors, dark mode, surfaces, fonts, app name |
| `privyAppId`           | `string`                            |              | Privy app ID                                 |
| `dynamicEnvironmentId` | `string`                            |              | Dynamic environment ID                       |
| `supportedChainIds`    | `number[]`                          | Per network  | Override supported chains                    |
| `mode`                 | `"7702" \| "presign" \| "ondemand"` | `"7702"`     | Execution mode                               |
| `appName`              | `string`                            | `"Spicenet"` | Application name                             |
| `apiUrl`               | `string`                            |              | Override relayer API URL                     |
| `embeddedWalletConfig` | `object`                            |              | Embedded wallet settings                     |

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Styling" icon="palette" href="/sdk/styling">
    Customize component appearance
  </Card>

  <Card title="Components" icon="window" href="/sdk/components">
    Explore available components
  </Card>

  <Card title="Examples" icon="book" href="/guides/native-swap">
    See complete examples
  </Card>

  <Card title="Best Practices" icon="shield-check" href="/guides/best-practices">
    Security and integration patterns
  </Card>
</CardGroup>