Installation & Setup

npm install @spicenet-io/spiceflow-ui

yarn add @spicenet-io/spiceflow-ui

pnpm add @spicenet-io/spiceflow-ui

npm install react react-dom viem wagmi @tanstack/react-query

npm install @privy-io/react-auth

npm install @spicenet-io/spiceflow-ui @spicenet-io/spiceflow-core @privy-io/react-auth react react-dom viem wagmi @tanstack/react-query

import "@spicenet-io/spiceflow-ui/styles.css";

<WagmiProvider config={wagmiConfig}>
  <QueryClientProvider client={queryClient}>
    <PrivyProvider appId={PRIVY_APP_ID} config={privyConfig}>
      <SpiceFlowProvider provider="privy" network="mainnet" nativeChainId={8453}>
        {/* Your app components */}
      </SpiceFlowProvider>
    </PrivyProvider>
  </QueryClientProvider>
</WagmiProvider>

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

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

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" }}
      />
    </>
  );
}

"use client";

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

// Rendered inside the provider stack from Basic Setup
function DeFiApp() {
  const [depositOpen, setDepositOpen] = useState(false);
  const [withdrawOpen, setWithdrawOpen] = useState(false);

  return (
    <>
      <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" }}
      />
    </>
  );
}

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

"use client"; // Add this directive at the top

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

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

NEXT_PUBLIC_PRIVY_APP_ID=your_privy_app_id

<SpiceFlowProvider
  provider="privy"
  privyAppId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}
>