Components

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

<SpiceFlowProvider
  provider="privy"
  privyAppId="your-app-id"
  supportedChainIds={[11155111, 421614]}
>
  {children}
</SpiceFlowProvider>

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

<SwapWidget
  swapBatches={swapBatches}
  supportedChains={[11155111, 421614]}
  tokenAddress="0x0"
  showSlippageSettings={true}
/>

interface ChainBatch {
  chainId: number;
  recentBlock: number | bigint;
  calls: Array<{
    to: string;
    value: string | number | bigint;
    data: string;
  }>;
}

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

<SpiceDeposit
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  allowedTokens={["USDC", "ETH"]}
/>

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

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Deposit</button>
      <SpiceDeposit
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        allowedTokens={["USDC"]}
        postDepositInstruction={async (amount) => {
          console.log(`Deposited ${amount}`);
        }}
        postDepositInstructionLabel="Deposit to Vault"
      />
    </>
  );
}

import { SpiceBalance, useSpiceBalance } from "@spicenet-io/spiceflow";

function BalanceDashboard() {
  const { balanceData, loading } = useSpiceBalance({ address });

  if (!balanceData) return null;

  return (
    <SpiceBalance
      balanceData={balanceData}
      isLoading={loading}
      onDepositClick={() => setDepositOpen(true)}
      onWithdrawClick={() => setWithdrawOpen(true)}
    />
  );
}

interface BalanceData {
  totalBalance: number;
  percentageChange?: number;
  tradingAccounts: TradingAccount[];
  freeCollateral: number;
  freeCollateralItems?: AccountItem[];
  defiPositions: number;
  defiPositionsItems?: AccountItem[];
  credit: number;
  creditItems?: AccountItem[];
}

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

<SpiceWithdraw
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
/>

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

<LpModal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  pairLabel="ETH/USDC"
  pairApr="12.5%"
  pairAddressLabel="0x1234...5678"
  lpLabel="Uniswap V3"
  primaryAsset={primaryAsset}
  onPrimaryAssetChange={handlePrimaryChange}
  availableAssets={assets}
  showSecondaryAsset={false}
  onSubmit={handleSubmit}
/>

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

<ProviderLogin />