Quick Start

"use client"; // For Next.js App Router

import type { ReactNode } from "react";
import { WagmiProvider, createConfig, http } from "wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { PrivyProvider } from "@privy-io/react-auth";
import { SpiceFlowProvider } from "@spicenet-io/spiceflow-ui";
import { getMainnetChains } from "@spicenet-io/spiceflow-core";
import { defineChain, type Chain } from "viem";

// Every chain the installed SDK supports; new chains arrive with SDK upgrades.
const chains = getMainnetChains().map((c): Chain =>
  defineChain({
    id: c.id,
    name: c.displayName,
    nativeCurrency: c.nativeCurrency,
    rpcUrls: { default: { http: [c.rpcUrl] } },
    blockExplorers: { default: { name: "Explorer", url: c.blockExplorer } },
  }),
) as [Chain, ...Chain[]];

const wagmiConfig = createConfig({
  chains,
  transports: Object.fromEntries(chains.map((c) => [c.id, http()])),
});

const queryClient = new QueryClient();

function App({ children }: { children: ReactNode }) {
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <PrivyProvider
          appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID!}
          config={{
            supportedChains: [...chains],
            embeddedWallets: { ethereum: { createOnLogin: "all-users" } },
          }}
        >
          {/* supportedChainIds omitted: SpiceFlowProvider defaults to every supported chain */}
          <SpiceFlowProvider provider="privy" network="mainnet" nativeChainId={8453}>
            {children}
          </SpiceFlowProvider>
        </PrivyProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

export default App;

import { useState } from "react";
import { encodeFunctionData, erc20Abi, parseAbi, type Address } from "viem";
import { SpiceSupply } from "@spicenet-io/spiceflow-ui";

const usdc = "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913" as Address;
const vaultAbi = parseAbi([
  "function deposit(uint256 assets, address receiver) returns (uint256 shares)",
]);

export function SupplyButton({ vault }: { vault: Address }) {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <>
      <button onClick={() => setIsOpen(true)}>Supply</button>
      <SpiceSupply
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        actionLabel="Supply"
        destinationToken={{ chainId: 8453, address: usdc }}
        buildActionCalls={(amount, ctx) => [
          { to: usdc, value: 0n, data: encodeFunctionData({
            abi: erc20Abi, functionName: "approve", args: [vault, amount],
          }) },
          { to: vault, value: 0n, data: encodeFunctionData({
            abi: vaultAbi, functionName: "deposit", args: [amount, ctx.beneficiary ?? ctx.userAddress],
          }) },
        ]}
      />
    </>
  );
}

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

export function AccountMenu() {
  return <SpiceAccount />;
}

NEXT_PUBLIC_PRIVY_APP_ID=your_privy_app_id_here

"use client";

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