Build the invest flow

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

export const SALE_CHAIN: EthereumChain = "ethereum_sepolia";

// The contract the approval grants an allowance to - the approve() spender.
// Provided by CoinList during onboarding.
export const FUNDING_CONTRACT_ADDRESS = EvmContractAddress(
  "YOUR_FUNDING_CONTRACT_ADDRESS",
);

// The stablecoin the user pays with (USDC, 6 decimals).
export const PAYMENT_TOKEN = TOKEN_REGISTRY.erc20(USDC_SYMBOL);
export const PAYMENT_TOKEN_ADDRESS = TOKEN_REGISTRY.contractAddress(
  USDC_SYMBOL,
  SALE_CHAIN,
);

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

"use client";

import {
  type TokenSaleExecutionPhase,
  useCoinList,
} from "@coinlist-co/react";
import {
  type Asset,
  EvmWalletAddress,
  formatAmount,
  type OfferDetail,
  type OfferOption,
  parseBlockchainAmount,
  txExplorerUrl,
} from "@coinlist-co/react/shared";
import { useAppKit, useAppKitAccount } from "@reown/appkit/react";
import { useState } from "react";
import { useConfig, useWalletClient } from "wagmi";
import {
  LOCALE,
  FUNDING_CONTRACT_ADDRESS,
  PAYMENT_TOKEN,
  PAYMENT_TOKEN_ADDRESS,
  SALE_CHAIN,
} from "./constants";
import { buildEvmWallet } from "./wagmiEvmWallet";

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

export function MinimalInvest({
  offer,
  option,
  fundingAsset,
}: {
  offer: OfferDetail;
  option: OfferOption;
  fundingAsset: Asset;
}) {
  const { coinlist, isReady } = useCoinList();
  const { open } = useAppKit();
  const { address, isConnected } = useAppKitAccount();
  const { data: walletClient } = useWalletClient();
  const config = useConfig();

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

  const parsed = parseBlockchainAmount(amountInput, PAYMENT_TOKEN.decimals);
  const hasAmount = parsed.valid && parsed.amount.raw > 0n;

  const handleInvest = async () => {
    if (!isReady || !walletClient || !address || !hasAmount) return;
    setError(null);
    setBusy("checking-allowance");
    try {
      const wallet = buildEvmWallet({
        address: EvmWalletAddress(address),
        walletClient,
        config,
      });
      const result = await coinlist.tokenSale.executeTokenSale({
        wallet,
        offerId: offer.id,
        offerOptionId: option.id,
        assetId: fundingAsset.id,
        paymentTokenAddress: PAYMENT_TOKEN_ADDRESS,
        fundingContractAddress: FUNDING_CONTRACT_ADDRESS,
        chain: SALE_CHAIN,
        amount: parsed.amount,
        onProgress: setBusy,
      });
      if (result.type === "success") {
        setConfirmed({
          explorerUrl: txExplorerUrl(SALE_CHAIN, result.approvalTxHash),
        });
      } else {
        setError(GENERIC_ERROR);
      }
    } catch {
      setError(GENERIC_ERROR);
    } finally {
      setBusy(null);
    }
  };

  if (confirmed) {
    return (
      <div>
        <h3>Investment recorded</h3>
        <p>Your participation in {offer.name} is being processed.</p>
        <a href={confirmed.explorerUrl} target="_blank" rel="noreferrer">
          View approval transaction
        </a>
      </div>
    );
  }

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

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

      {hasAmount && (
        <p>
          You invest {formatAmount(parsed.amount, LOCALE)} {PAYMENT_TOKEN.symbol}
        </p>
      )}

      <button
        onClick={handleInvest}
        disabled={!isReady || !walletClient || !hasAmount || busy !== null}
      >
        Invest
      </button>

      {busy && <p>{investPhaseLabel(busy)}</p>}
      {error && <p role="alert">{error}</p>}
    </div>
  );
}

function investPhaseLabel(phase: TokenSaleExecutionPhase): string {
  switch (phase) {
    case "resetting-allowance":
      return `Reset your ${PAYMENT_TOKEN.symbol} allowance in your wallet…`;
    case "approving":
      return `Approve ${PAYMENT_TOKEN.symbol} in your wallet…`;
    case "recording-participation":
      return "Recording your participation…";
    default:
      return "Working…";
  }
}