Progress

type PaymentStage =
  | RegisterStage
  | DepositStage
  | TransferStage
  | WithdrawStage
  | RefundStage
  | SyncedStage
  | SettledStage;

function describeStage(event: PaymentStage): string {
  switch (event.stage) {
    case "synced":
      return "Brought this device up to date with Solana.";
    case "prepared":
      return "Prepared on this device.";
    case "endorsed":
      return "The committee approved the transaction.";
    case "proved":
      return "The privacy work on this device finished.";
    case "funding-signed":
      return "Your wallet signed the transfer that funds the deposit.";
    case "funding-sent":
      return "Sent the funding transfer to Solana.";
    case "funding-confirmed":
      return "The funding transfer landed.";
    case "signed":
      return "Your wallet signed the transaction.";
    case "sent":
      return "Sent the transaction to Solana.";
    case "confirmed":
      return "The transaction landed on Solana.";
    case "merge-prepared":
      return `Combining part of your private balance, step ${event.merge}.`;
    case "merge-relayed":
      return `The relayer accepted combining step ${event.merge}.`;
    case "merge-settled":
      return `Combining step ${event.merge} finished.`;
    case "relayed":
      return "The relayer accepted the transaction and will send it.";
    case "settled":
      return "Followed the payment until Solana settled it.";
  }
}

import { useState } from "react";
import type { ReactElement } from "react";
import { deposit } from "@umbra/nimbus-solana-web";

export function DepositWithProgress({
  context,
  usdc,
}: {
  context: DepositContext;
  usdc: Address;
}): ReactElement {
  const [lines, setLines] = useState<readonly string[]>([]);
  const [running, setRunning] = useState(false);

  async function run(): Promise<void> {
    setLines([]);
    setRunning(true);
    try {
      await deposit(
        context,
        {
          mint: usdc,
          amount: 25_000_000n,
          recipient: context.session.walletAddress,
        },
        {
          onProgress: (event) => {
            setLines((current) => [...current, describeStage(event)]);
          },
        },
      );
    } finally {
      setRunning(false);
    }
  }

  return (
    <div>
      <button type="button" disabled={running} onClick={() => void run()}>
        Deposit 25 USDC
      </button>
      {running && <p>Keep this tab open until the deposit finishes.</p>}
      <ol>
        {lines.map((line, index) => (
          <li key={index}>{line}</li>
        ))}
      </ol>
    </div>
  );
}