Custom UI Integration

"use client";

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

const destinationToken = {
  chainId: 8453,
  address: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913" as Address,
};
const vaultAbi = parseAbi([
  "function deposit(uint256 assets, address receiver) returns (uint256 shares)",
]);

export function SupplyPanel({ vault }: { vault: Address }) {
  const [selected, setSelected] = useState<Asset | null>(null);
  const [amount, setAmount] = useState("");

  const flow = useSpiceSupply({
    enabled: true,
    destinationToken,
    selectedAsset: selected ? { asset: selected, amount } : null,
    buildActionCalls: (amountWei, ctx) => [
      {
        to: ctx.destinationToken,
        value: 0n,
        data: encodeFunctionData({ abi: erc20Abi, functionName: "approve", args: [vault, amountWei] }),
      },
      {
        to: vault,
        value: 0n,
        data: encodeFunctionData({
          abi: vaultAbi,
          functionName: "deposit",
          args: [amountWei, ctx.beneficiary ?? ctx.userAddress],
        }),
      },
    ],
  });

  const preview = flow.fees.preview;
  return (
    <section>
      <fieldset disabled={flow.status.isExecuting}>
        <legend>Supply USDC</legend>
        {flow.assets.loading && <p>Loading balances…</p>}
        {flow.assets.displayAssets.map((asset) => (
          <button
            type="button"
            key={assetPositionId(asset)}
            aria-pressed={selected ? assetPositionId(selected) === assetPositionId(asset) : false}
            onClick={() => setSelected(asset)}
          >
            {asset.symbol} on chain {asset.chainId} · {asset.location} · {asset.owner} · {asset.balanceFormatted}
          </button>
        ))}
        <label>
          Source amount (fees added)
          <input value={amount} onChange={(event) => setAmount(event.target.value)} inputMode="decimal" />
        </label>
        <button type="button" disabled={!selected} onClick={async () => {
          const maximum = await flow.max();
          if (maximum !== null) setAmount(maximum);
        }}>Max</button>
        {preview && <p>
          Estimated fees: {formatUnits(preview.totalFee ??
            (preview.gasFee + preview.spicenetFee + (preview.bridgeFee ?? 0n)), preview.decimals)} {preview.symbol}
        </p>}
        {flow.amount.sourceRequiredAmount !== null && flow.selectedAsset && <p>
          Maximum source debit: {formatUnits(flow.amount.sourceRequiredAmount,
            flow.selectedAsset.asset.decimals)} {flow.selectedAsset.asset.symbol}
        </p>}
        <button type="button" disabled={!flow.canExecute} onClick={() => void flow.submit()}>
          Supply
        </button>
      </fieldset>
      <p role="status">{flow.status.statusMsg}</p>
      {(flow.status.error || flow.fees.error || flow.assets.error) &&
        <p role="alert">{flow.status.error || flow.fees.error || flow.assets.error}</p>}
      {flow.status.txHash && <p>Transaction: {flow.status.txHash}</p>}
      {flow.status.finalizationError &&
        <button onClick={() => void flow.retryFinalization()}>Retry application update</button>}
    </section>
  );
}