Superstate Swap

import {
  type EthereumChain,
  type EvmContractAddress,
  OfferId,
  superstateSwapContractAddress,
  TOKEN_REGISTRY,
  USDC_SYMBOL,
} from "@passage-cl/react/universal";

// 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 = requireSwapContract(SWAP_CHAIN);

function requireSwapContract(chain: EthereumChain): EvmContractAddress {
  const address = superstateSwapContractAddress(chain);
  if (address === null) {
    throw new Error(`No Superstate swap contract on ${chain}`);
  }
  return address;
}

// 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.usdcAddress(SWAP_CHAIN);

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

"use client";

import {
  type SwapExecutionPhase,
  usePassage,
  useSwapOutputToken,
  useSwapQuote,
  type WalletAuthorizationPhase,
} from "@passage-cl/react";
import {
  BlockchainAmount,
  computeSlip,
  DEFAULT_SLIPPAGE_BPS,
  EvmWalletAddress,
  formatAmount,
  parseBlockchainAmount,
  type SwapQuote,
  txExplorerUrl,
} from "@passage-cl/react/universal";
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 { passage, isReady } = usePassage();
  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 tokenized equity) tells us the decimals needed to quote.
  const { state: outputTokenState, refetch: refetchOutputToken } =
    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 { state: quoteState } = useSwapQuote({
    contractAddress: SWAP_CONTRACT_ADDRESS,
    chain: SWAP_CHAIN,
    inputAmount,
    inputTokenAddress: INPUT_TOKEN_ADDRESS,
    outputTokenDecimals: outputToken?.decimals ?? null,
    enabled: authorized && hasAmount,
  });
  // A quote outlives a change of amount and being switched off. Input plus fee
  // is what the swap pulls. While a refresh is in flight, a quote that does not
  // price the amount on screen is the previous amount's. A settled quote may
  // ask for less (a partial fill: the rest stays in the wallet), never for more.
  const quoteFits = (fit: { quote: SwapQuote; isRefreshing: boolean }) => {
    const total = BlockchainAmount.add(fit.quote.inputTokenAmount, fit.quote.fee).raw;
    return fit.isRefreshing ? total === inputAmount.raw : total <= inputAmount.raw;
  };
  const quote =
    hasAmount && quoteState.type === "CONTENT" && quoteFits(quoteState)
      ? quoteState.quote
      : null;
  const isRefreshing = quoteState.type === "CONTENT" && quoteState.isRefreshing;

  // 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 passage.superstate.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 passage.superstate.execute({
        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) {
        const amount = `${formatAmount(result.outputAmount, LOCALE)} ${outputToken.symbol}`;
        setConfirmed({
          received: result.outputAmountConfirmed ? amount : `${amount} (estimated)`,
          explorerUrl: txExplorerUrl(SWAP_CHAIN, result.swapTxHash),
        });
      } else {
        setError(GENERIC_ERROR);
      }
    } catch {
      setError(GENERIC_ERROR);
    } finally {
      setBusy(null);
    }
  };

  if (outputTokenState.type === "ERROR") {
    return (
      <div>
        <p>Swaps are unavailable right now.</p>
        <button onClick={refetchOutputToken}>Try again</button>
      </div>
    );
  }

  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>
      ) : quoteState.type === "ERROR" ? (
        <p role="alert">Could not fetch a quote. Retrying…</p>
      ) : 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…";
  }
}