Hooks

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

export function AccountMode() {
  const { mode, setMode, ownerAddress } = useSpiceAccount();
  return <button onClick={() => setMode(mode === "embedded" ? "external" : "embedded")}>
    {mode}: {ownerAddress}
  </button>;
}

import { assetPositionId, useSpiceInventory } from "@spicenet-io/spiceflow-ui";

export function Holdings() {
  const { assets, loading, refreshing } = useSpiceInventory({ role: "holding" });
  if (loading) return <p>Loading…</p>;
  return <ul aria-busy={refreshing}>{assets.map(asset =>
    <li key={assetPositionId(asset)}>{asset.symbol}: {asset.balanceFormatted}</li>
  )}</ul>;
}

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

function CustomDeposit() {
  const { execute, estimate, clearStatus } = useSpiceExecution();

  const handleExecute = async () => {
    const actionId = await execute(
      chainBatches,           // destination chain calls
      tokenAddress,           // token being deposited
      tokenTransferAmount,    // amount in wei
      (progress) => {         // progress callback
        console.log(progress.step, progress.message);
      },
    );
    console.log("Action completed:", actionId);
  };

  return <button onClick={handleExecute}>Execute</button>;
}

{
  execute: (
    chainBatches: ChainBatch[],
    tokenAddress: string,
    tokenTransferAmount: bigint,
    onProgress?: (progress: ExecutionProgress) => void,
    signal?: AbortSignal,
    options?: ExecutionOptions,
  ) => Promise<string>;         // returns actionId
  estimate: (chainBatches: ChainBatch[], tokenAddress: string, amount: bigint) => Promise<FeeEstimate>;
  lastFeeEstimate: FeeEstimate | null;
  hasEmbeddedWallet: boolean;
  intentStatus: unknown;
  clearStatus: () => void;      // call between sequential executions (there is no reset())
}

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

function BalanceDisplay() {
  const { assets, loading, hasBalance, refetch, getAssetsByChain } = useSpiceAssets({
    address: "0x...",
    supportedChains: [8453, 4114],
    refetchInterval: 30000,
  });

  if (loading) return <p>Loading...</p>;
  if (!hasBalance) return <p>No deposits yet</p>;

  return (
    <ul>
      {assets.map(asset => (
        <li key={`${asset.chainId}-${asset.address}`}>
          {asset.symbol}: {asset.balanceFormatted} on chain {asset.chainId}
        </li>
      ))}
    </ul>
  );
}

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

const { displayAssets, embeddedWalletAddress, externalAddress, isNon7702 } = useSupplyAssets({
  address,                       // user wallet address
  destinationToken: { chainId: 8453, address: USDC, symbol: "USDC", decimals: 6 },
  sourceChains: [1, 8453, 42161], // optional: restrict source chains
  supportedSourceAssets: ["usdc"], // optional: symbols, addresses or "native"
  enabled: true,
});

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

const quote = useSupplyQuote({
  direction: "input",            // amount is what the user pays ("output": what the market receives)
  selectedAsset,                 // { asset, amount } or null
  destinationToken,
  chainId: destinationToken.chainId,
  recipient: embeddedWalletAddress,
  paymentAmount: amount,
});

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

function WalletInfo() {
  const { address, isConnected, isAuthenticated, provider, actions } = useWallet();

  if (!isConnected) return <p>Not connected</p>;

  return (
    <div>
      <p>Connected via {provider}: {address}</p>
      <button onClick={() => actions.signMessage("Hello")}>Sign Message</button>
    </div>
  );
}

import { useContext } from "react";
import { useWallet, SpiceFlowProviderContext } from "@spicenet-io/spiceflow-ui";

function EmbeddedWallet() {
  const ctx = useContext(SpiceFlowProviderContext);
  const embeddedAddress = ctx?.embeddedWalletAddress;

  if (!embeddedAddress) return <p>No embedded wallet</p>;
  return <p>Embedded: {embeddedAddress}</p>;
}

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

function CustomInput() {
  const { selectedAsset, setSelectedAsset, assetAmount, setAssetAmount } = useAssetInput();

  return (
    <input
      type="text"
      value={assetAmount}
      onChange={(e) => setAssetAmount(e.target.value)}
      placeholder="Amount"
    />
  );
}

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

const durationOptions = [
  { label: "1 Month", months: 1 },
  { label: "6 Months", months: 6 },
  { label: "12 Months", months: 12 },
];

function DurationPicker() {
  const { selectedDurationIdx, setSelectedDurationIdx, selectedDuration } = useLockDuration(durationOptions);

  return (
    <div>
      {durationOptions.map((opt, i) => (
        <button key={i} onClick={() => setSelectedDurationIdx(i)}>
          {opt.label} {i === selectedDurationIdx ? "(selected)" : ""}
        </button>
      ))}
    </div>
  );
}

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

function PendingCheck() {
  const { pendingDeposits } = useSpicePendingDeposits({
    chainIds: [8453, 4114],
  });

  if (pendingDeposits.length > 0) {
    return <p>You have {pendingDeposits.length} pending deposit(s) to recover.</p>;
  }
  return null;
}

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

function CustomCard({ styles, dark }) {
  const { primaryColor, dk, palette } = useSpiceBrand(styles, dark);

  return (
    <div style={{
      backgroundColor: palette.cardBg,
      color: palette.textPrimary,
      border: `1px solid ${palette.cardBorder}`,
    }}>
      Themed card
    </div>
  );
}