Build the swap flow

import {
  type EthereumChain,
  OfferId,
  SUPERSTATE_SWAP_CONTRACT_ADDRESS_SEPOLIA,
  TOKEN_REGISTRY,
  USDC_SYMBOL,
} from "@coinlist-co/react/shared";

// Provided by CoinList during onboarding.
export const SWAP_OFFER_ID = OfferId("YOUR_SWAP_OFFER_ID");

export const SWAP_CHAIN: EthereumChain = "ethereum_sepolia";
export const SWAP_CONTRACT_ADDRESS = SUPERSTATE_SWAP_CONTRACT_ADDRESS_SEPOLIA;

// The stablecoin the user pays with (USDC, 6 decimals).
export const INPUT_TOKEN = TOKEN_REGISTRY.erc20(USDC_SYMBOL);
export const INPUT_TOKEN_ADDRESS = TOKEN_REGISTRY.contractAddress(
  USDC_SYMBOL,
  SWAP_CHAIN,
);

// BCP-47 locale used for amount formatting.
export const LOCALE = "en-US";

import type { EvmWallet } from "@coinlist-co/react";
import type {
  EthereumChain,
  EvmWalletAddress,
} from "@coinlist-co/react/shared";
import {
  type Config,
  getChainId,
  switchChain,
  waitForTransactionReceipt,
} from "@wagmi/core";
import { type Chain, encodeFunctionData, type WalletClient } from "viem";
import { mainnet, sepolia } from "viem/chains";

const CHAINS: Record<EthereumChain, Chain> = {
  ethereum_mainnet: mainnet,
  ethereum_sepolia: sepolia,
};

export function buildEvmWallet({
  address,
  walletClient,
  config,
}: {
  address: EvmWalletAddress;
  walletClient: WalletClient;
  config: Config;
}): EvmWallet {
  const account = address as `0x${string}`;

  // Each flow call passes the target chain; switch the wallet there first.
  const ensureChain = async (chain: EthereumChain): Promise<Chain> => {
    const target = CHAINS[chain];
    if (getChainId(config) !== target.id) {
      await switchChain(config, { chainId: target.id });
    }
    return target;
  };

  return {
    address,
    signMessage: (message) => walletClient.signMessage({ account, message }),
    async writeContract({ abi, address: to, functionName, args, value, chain }) {
      const targetChain = await ensureChain(chain);
      const data = encodeFunctionData({ abi, functionName, args });
      return walletClient.sendTransaction({
        account,
        chain: targetChain,
        to,
        data,
        value,
      });
    },
    async broadcastRawTx({ to, data, chain }) {
      const targetChain = await ensureChain(chain);
      return walletClient.sendTransaction({ account, chain: targetChain, to, data });
    },
    awaitTx: (hash, chain) =>
      waitForTransactionReceipt(config, { hash, chainId: CHAINS[chain].id }),
  };
}

"use client";

import {
  type SwapExecutionPhase,
  useCoinList,
  useSwapOutputToken,
  useSwapQuote,
  type WalletAuthorizationPhase,
} from "@coinlist-co/react";
import {
  BlockchainAmount,
  computeSlip,
  DEFAULT_SLIPPAGE_BPS,
  EvmWalletAddress,
  formatAmount,
  parseBlockchainAmount,
  txExplorerUrl,
} from "@coinlist-co/react/shared";
import { useAppKit, useAppKitAccount } from "@reown/appkit/react";
import { useEffect, useState } from "react";
import { useConfig, useWalletClient } from "wagmi";
import {
  INPUT_TOKEN,
  INPUT_TOKEN_ADDRESS,
  LOCALE,
  SWAP_CHAIN,
  SWAP_CONTRACT_ADDRESS,
  SWAP_OFFER_ID,
} from "./constants";
import { buildEvmWallet } from "./wagmiEvmWallet";

type Busy =
  | { kind: "authorize"; phase: WalletAuthorizationPhase }
  | { kind: "swap"; phase: SwapExecutionPhase };

const GENERIC_ERROR = "Something went wrong. Please try again.";

export function MinimalSwap() {
  const { coinlist, isReady } = useCoinList();
  const { open } = useAppKit();
  const { address, isConnected } = useAppKitAccount();
  const { data: walletClient } = useWalletClient();
  const config = useConfig();

  const [authorized, setAuthorized] = useState(false);
  const [amountInput, setAmountInput] = useState("");
  const [busy, setBusy] = useState<Busy | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [confirmed, setConfirmed] = useState<{
    received: string;
    explorerUrl: string;
  } | null>(null);

  // The output token (the fund share) tells us the decimals needed to quote.
  const { outputTokenState } = useSwapOutputToken({
    contractAddress: SWAP_CONTRACT_ADDRESS,
    chain: SWAP_CHAIN,
    enabled: true,
  });
  const outputToken =
    outputTokenState.type === "CONTENT" ? outputTokenState.outputToken : null;

  // Quoting stays disabled until the wallet is authorized, the output token is
  // known, and the amount is a valid non-zero value.
  const parsed = parseBlockchainAmount(amountInput, INPUT_TOKEN.decimals);
  const hasAmount = parsed.valid && parsed.amount.raw > 0n;
  const inputAmount =
    parsed.valid && parsed.amount.raw > 0n
      ? parsed.amount
      : BlockchainAmount({ raw: 0n, decimals: INPUT_TOKEN.decimals });

  const { quote, isRefreshing } = useSwapQuote({
    contractAddress: SWAP_CONTRACT_ADDRESS,
    chain: SWAP_CHAIN,
    inputAmount,
    inputTokenAddress: INPUT_TOKEN_ADDRESS,
    outputTokenDecimals: outputToken?.decimals ?? null,
    enabled: authorized && hasAmount,
  });

  // If the connected account changes, the prior authorization no longer applies.
  useEffect(() => {
    setAuthorized(false);
  }, [address]);

  const buildWallet = () => {
    if (!walletClient || !address) return null;
    return buildEvmWallet({
      address: EvmWalletAddress(address),
      walletClient,
      config,
    });
  };

  const handleAuthorize = async () => {
    const wallet = buildWallet();
    if (!isReady || !wallet) return;
    setError(null);
    setBusy({ kind: "authorize", phase: "checking-authorization" });
    try {
      const result = await coinlist.swap.authorizeWallet({
        wallet,
        offerId: SWAP_OFFER_ID,
        contractAddress: SWAP_CONTRACT_ADDRESS,
        chain: SWAP_CHAIN,
        onProgress: (phase) => setBusy({ kind: "authorize", phase }),
      });
      if (result.type === "success") setAuthorized(true);
      else setError(GENERIC_ERROR);
    } catch {
      setError(GENERIC_ERROR);
    } finally {
      setBusy(null);
    }
  };

  const handleSwap = async () => {
    const wallet = buildWallet();
    if (!isReady || !wallet || !quote) return;
    setError(null);
    setBusy({ kind: "swap", phase: "checking-status" });
    try {
      const result = await coinlist.swap.executeSwap({
        wallet,
        contractAddress: SWAP_CONTRACT_ADDRESS,
        chain: SWAP_CHAIN,
        inputTokenAddress: INPUT_TOKEN_ADDRESS,
        quote,
        slippageBps: DEFAULT_SLIPPAGE_BPS,
        onProgress: (phase) => setBusy({ kind: "swap", phase }),
      });
      if (result.type === "success" && outputToken) {
        setConfirmed({
          received: `${formatAmount(result.outputAmount, LOCALE)} ${outputToken.symbol}`,
          explorerUrl: txExplorerUrl(SWAP_CHAIN, result.swapTxHash),
        });
      } else {
        setError(GENERIC_ERROR);
      }
    } catch {
      setError(GENERIC_ERROR);
    } finally {
      setBusy(null);
    }
  };

  if (outputTokenState.type === "ERROR") {
    return <p>Swaps are unavailable right now. Please try again later.</p>;
  }

  if (confirmed) {
    return (
      <div>
        <h3>Swap complete</h3>
        <p>You received {confirmed.received}.</p>
        <a href={confirmed.explorerUrl} target="_blank" rel="noreferrer">
          View transaction
        </a>
      </div>
    );
  }

  if (!isConnected || !address) {
    return <button onClick={() => open()}>Connect wallet</button>;
  }

  if (!authorized) {
    return (
      <div>
        <button onClick={handleAuthorize} disabled={busy !== null || !walletClient}>
          Authorize wallet
        </button>
        {busy?.kind === "authorize" && <p>{authorizePhaseLabel(busy.phase)}</p>}
        {error && <p role="alert">{error}</p>}
      </div>
    );
  }

  const total = quote
    ? BlockchainAmount.add(quote.inputTokenAmount, quote.fee)
    : null;

  return (
    <div>
      <input
        inputMode="decimal"
        placeholder={`Amount in ${INPUT_TOKEN.symbol}`}
        value={amountInput}
        onChange={(e) => {
          if (e.target.value === "" || /^\d*\.?\d*$/.test(e.target.value)) {
            setAmountInput(e.target.value);
          }
        }}
      />

      {quote && total && outputToken ? (
        <dl>
          <dt>You pay</dt>
          <dd>
            {formatAmount(quote.inputTokenAmount, LOCALE)} {INPUT_TOKEN.symbol}
          </dd>
          <dt>CoinList fee</dt>
          <dd>
            {formatAmount(quote.fee, LOCALE)} {INPUT_TOKEN.symbol}
          </dd>
          <dt>Total (charged to your wallet)</dt>
          <dd>
            {formatAmount(total, LOCALE)} {INPUT_TOKEN.symbol}
          </dd>
          <dt>You receive</dt>
          <dd>
            {formatAmount(quote.outputTokenAmount, LOCALE)} {outputToken.symbol}
          </dd>
          <dt>Minimum received</dt>
          <dd>
            {formatAmount(
              computeSlip(quote.outputTokenAmount, DEFAULT_SLIPPAGE_BPS),
              LOCALE,
            )}{" "}
            {outputToken.symbol}
          </dd>
        </dl>
      ) : hasAmount ? (
        <p>Fetching quote…</p>
      ) : null}

      <button
        onClick={handleSwap}
        disabled={!isReady || !quote || !walletClient || busy !== null}
      >
        Swap
      </button>

      {isRefreshing && <span> Refreshing quote…</span>}
      {busy?.kind === "swap" && <p>{swapPhaseLabel(busy.phase)}</p>}
      {error && <p role="alert">{error}</p>}
    </div>
  );
}

function authorizePhaseLabel(phase: WalletAuthorizationPhase): string {
  switch (phase) {
    case "signing-message":
      return "Sign the message in your wallet…";
    case "broadcasting-transaction":
      return "Confirm the transaction in your wallet…";
    default:
      return "Authorizing…";
  }
}

function swapPhaseLabel(phase: SwapExecutionPhase): string {
  switch (phase) {
    case "approving":
      return `Approve ${INPUT_TOKEN.symbol} in your wallet…`;
    case "swapping":
      return "Confirm the swap in your wallet…";
    default:
      return "Working…";
  }
}