> ## 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.

# Installation & Setup

> Get started with the Spice Flow SDK in your React application

## Installation

Install the Spice Flow SDK using npm, yarn, or pnpm:

```bash theme={null}
npm install @spicenet-io/spiceflow-ui
```

```bash theme={null}
yarn add @spicenet-io/spiceflow-ui
```

```bash theme={null}
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:

```bash theme={null}
npm install react react-dom viem wagmi @tanstack/react-query axios
```

| Package                 | Version    | Description                |
| ----------------------- | ---------- | -------------------------- |
| `react`                 | `^18.0.0`  | React library              |
| `react-dom`             | `^18.0.0`  | React DOM                  |
| `viem`                  | `>=2.21.0` | Ethereum interface library |
| `wagmi`                 | `>=2.12.0` | React hooks for Ethereum   |
| `@tanstack/react-query` | `>=5.0.0`  | Data fetching library      |
| `axios`                 | `>=1.0.0`  | HTTP client                |

### Provider-Specific Dependencies

Install depending on your chosen wallet provider:

<CodeGroup>
  ```bash Privy theme={null}
  npm install @privy-io/react-auth
  ```

  ```bash Dynamic theme={null}
  npm install @dynamic-labs/sdk-react-core @dynamic-labs/ethereum @dynamic-labs/wallet-connector-core
  ```
</CodeGroup>

| Package                               | Version           | Provider |
| ------------------------------------- | ----------------- | -------- |
| `@privy-io/react-auth`                | `>=2.24.0 <4.0.0` | Privy    |
| `@dynamic-labs/sdk-react-core`        | `>=3.9.13 <5.0.0` | Dynamic  |
| `@dynamic-labs/ethereum`              | `>=3.9.13 <5.0.0` | Dynamic  |
| `@dynamic-labs/wallet-connector-core` | `>=3.9.13 <5.0.0` | Dynamic  |

***

## Complete Installation

### With Privy

```bash theme={null}
npm install @spicenet-io/spiceflow-ui @privy-io/react-auth react react-dom viem wagmi @tanstack/react-query axios
```

### With Dynamic

```bash theme={null}
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:

<CodeGroup>
  ```tsx Privy theme={null}
  import { SpiceFlowProvider } from "@spicenet-io/spiceflow-ui";

  function App() {
    return (
      <SpiceFlowProvider
        provider="privy"
        privyAppId="your-privy-app-id"
      >
        {/* Your app components */}
      </SpiceFlowProvider>
    );
  }
  ```

  ```tsx Dynamic theme={null}
  import { SpiceFlowProvider } from "@spicenet-io/spiceflow-ui";

  function App() {
    return (
      <SpiceFlowProvider
        provider="dynamic"
        dynamicEnvironmentId="your-dynamic-environment-id"
      >
        {/* Your app components */}
      </SpiceFlowProvider>
    );
  }
  ```
</CodeGroup>

### 2. Add Wallet Connection

Use the `ProviderLogin` component to let users connect their wallet:

```tsx theme={null}
import { ProviderLogin } from "@spicenet-io/spiceflow-ui";

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

### 3. Add a Deposit Flow

Add `SpiceDeposit` to let users deposit from any chain:

```tsx theme={null}
import { useState } from "react";
import { SpiceDeposit } from "@spicenet-io/spiceflow-ui";

function DepositPage() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Deposit</button>
      <SpiceDeposit
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        depositBatches={[
          {
            chainId: 8453,
            calls: [
              // Your destination chain calls here
            ],
          },
        ]}
        styles={{ primaryColor: "#f97316" }}
      />
    </>
  );
}
```

***

## Complete Example

Here's a complete Next.js example with deposit and withdraw:

```tsx theme={null}
"use client";

import { useState } from "react";
import { SpiceFlowProvider, SpiceDeposit, SpiceWithdraw } from "@spicenet-io/spiceflow-ui";

function DeFiApp() {
  const [depositOpen, setDepositOpen] = useState(false);
  const [withdrawOpen, setWithdrawOpen] = useState(false);

  return (
    <SpiceFlowProvider
      provider="privy"
      network="mainnet"
      nativeChainId={8453}
      theme={{ primaryColor: "#f97316", dark: true }}
    >
      <div style={{ display: "flex", gap: "12px", padding: "40px" }}>
        <button onClick={() => setDepositOpen(true)}>Deposit</button>
        <button onClick={() => setWithdrawOpen(true)}>Withdraw</button>
      </div>

      <SpiceDeposit
        isOpen={depositOpen}
        onClose={() => setDepositOpen(false)}
        depositBatches={[]}
        styles={{ primaryColor: "#f97316" }}
      />

      <SpiceWithdraw
        isOpen={withdrawOpen}
        onClose={() => setWithdrawOpen(false)}
        styles={{ primaryColor: "#f97316" }}
      />
    </SpiceFlowProvider>
  );
}

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

***

## Next.js Considerations

If you're using Next.js with Server-Side Rendering (SSR), wrap components that use Spice Flow in a client component:

```tsx theme={null}
"use client"; // Add this directive at the top

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

Or check for the window object:

```tsx theme={null}
if (typeof window === 'undefined') {
  return <div>Loading...</div>;
}
```

***

## Environment Variables

Store your provider credentials in environment variables:

```env theme={null}
# 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:

```tsx theme={null}
<SpiceFlowProvider
  provider="privy"
  privyAppId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}
>
```

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Components" icon="window" href="/sdk/components">
    Learn about all available components and their props
  </Card>

  <Card title="Hooks" icon="code" href="/sdk/hooks">
    Use React hooks to build custom UIs
  </Card>

  <Card title="Configuration" icon="sliders" href="/sdk/configuration">
    Configure wallet providers, chains, and more
  </Card>

  <Card title="Quick Start Guide" icon="rocket" href="/quickstart">
    Build your first Spice Flow app step-by-step
  </Card>
</CardGroup>