CoinList Token Sale

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

export const SALE_CHAIN: EthereumChain = "ethereum_sepolia";

// The stablecoin the user pays with (USDC, 6 decimals). It must be one of the
// offer's funding assets.
export const PAYMENT_ASSET = USDC_SYMBOL;
export const PAYMENT_TOKEN = TOKEN_REGISTRY.erc20(PAYMENT_ASSET);

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

"use client";

import {
  type TokenSaleExecutionPhase,
  usePassage,
} from "@passage-cl/react";
import {
  type CoinListTokenSaleOfferDetail,
  EvmWalletAddress,
  formatAmount,
  type OfferOption,
  parseBlockchainAmount,
  txExplorerUrl,
} from "@passage-cl/react/universal";
import { useAppKit, useAppKitAccount } from "@reown/appkit/react";
import { useState } from "react";
import type { Hash } from "viem";
import { useConfig, useWalletClient } from "wagmi";
import { LOCALE, PAYMENT_ASSET, PAYMENT_TOKEN, SALE_CHAIN } from "./constants";
import { buildEvmWallet } from "./wagmiEvmWallet";

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

export function MinimalInvest({
  offer,
  option,
}: {
  offer: CoinListTokenSaleOfferDetail;
  option: OfferOption;
}) {
  const { passage, isReady } = usePassage();
  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);
  // An approval that mined for this amount while recording failed.
  const [minedApproval, setMinedApproval] = useState<Hash | 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 || !parsed.valid || !hasAmount) {
      return;
    }
    setError(null);
    try {
      const wallet = buildEvmWallet({
        address: EvmWalletAddress(address),
        walletClient,
        config,
      });
      const result = await passage.tokenSale.execute({
        wallet,
        offer,
        optionId: option.id,
        chain: SALE_CHAIN,
        inputAsset: PAYMENT_ASSET,
        amount: parsed.amount,
        approval:
          minedApproval === null
            ? { type: "fresh" }
            : { type: "mined", txHash: minedApproval },
        onProgress: setBusy,
      });
      if (result.type === "success") {
        setConfirmed({
          explorerUrl: txExplorerUrl(SALE_CHAIN, result.approvalTxHash),
        });
      } else if (result.error.step === "participation") {
        setMinedApproval(result.error.approvalTxHash);
        setError("Your approval went through, but recording failed. Try again.");
      } else {
        setError(GENERIC_ERROR);
      }
    } catch {
      setError(GENERIC_ERROR);
    } finally {
      setBusy(null);
    }
  };

  if (confirmed) {
    return (
      <div>
        <h3>Order placed</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);
            // A new amount needs a new approval.
            setMinedApproval(null);
          }
        }}
      />

      {parsed.valid && 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…";
  }
}