Build the invest flow

"use client";

import { useAppKit, useAppKitAccount } from "@reown/appkit/react";
import { useChainId, useSwitchChain } from "wagmi";

const ETHEREUM_MAINNET = 1;

export function useWallet() {
  const { open } = useAppKit();
  const { address, isConnected } = useAppKitAccount();
  const chainId = useChainId();
  const { mutateAsync: switchChain } = useSwitchChain();
  return { address, isConnected, chainId, switchChain, open };
}

"use client";

import { erc20Abi, parseUnits } from "viem";
import { waitForTransactionReceipt } from "@wagmi/core";
import { useConfig, useWriteContract, useBalance } from "wagmi";

// Minimum ETH to cover gas for the approve tx.
const MIN_ETH_FOR_GAS = parseUnits("0.001", 18);

async function sendApproval({
  amount,                  // user input, e.g. "1000"
  payWithAssetId,          // selected funding asset id
  investAssetId,           // offerDetail.asset.id
  address,                 // connected wallet address
  writeContract,           // from wagmi's useWriteContract
  wagmiConfig,             // from wagmi's useConfig
  onSubmitted,             // called once the wallet confirms
}: SendApprovalParams) {
  const approvalAmount = parseUnits(amount.trim(), decimals(payWithAssetId));

  // 1) Wallet popup; resolves with the tx hash after the user confirms.
  const txHash = await writeContract({
    address: assetContract(payWithAssetId),       // USDC/USDT contract
    abi: erc20Abi,
    functionName: "approve",
    args: [fundingContract(investAssetId), approvalAmount],
  });

  onSubmitted(); // UI can switch from "awaiting_wallet" -> "confirming_tx"

  // 2) Wait for the tx to be mined. Passage verifies the allowance on-chain
  //    before recording the participation, so we have to confirm first.
  await waitForTransactionReceipt(wagmiConfig, { hash: txHash });

  return txHash;
}

if (chainId !== ETHEREUM_MAINNET) {
  await switchChain({ chainId: ETHEREUM_MAINNET });
}

"use client";

import { useCoinList } from "@coinlist-co/react";
import { WalletAddress } from "@coinlist-co/react/shared";

const { coinlist } = useCoinList();

await coinlist.createParticipation({
  offerId,                                  // OfferId from OfferDetail
  offerOptionId: option.id,                 // selected OfferOption.id
  chain: "ethereum",
  walletAddress: WalletAddress(address),
  amount,                                   // same string the user entered
  assetId: payWithAssetId,                  // funding asset (USDC, USDT, …)
  approvalTransactionHash: approvalTxHash,  // from step 2
});

const handleSignAndCommit = async () => {
  if (!isConnected || !address || !payWithAssetId) return;

  const validationError = validateSubmit(amount, ethBalance?.value);
  if (validationError) {
    setSubmitState("error");
    setSubmitError(validationError);
    return;
  }

  setSubmitState("awaiting_wallet");
  setSubmitError(null);

  try {
    await ensureMainnet(chainId, switchChain);

    const approvalTxHash = await sendApproval({
      // …
      onSubmitted: () => setSubmitState("confirming_tx"),
    });

    setSubmitState("recording");
    await coinlist.createParticipation({
      offerId,
      offerOptionId: option.id,
      chain: "ethereum",
      walletAddress: WalletAddress(address),
      amount,
      assetId: payWithAssetId,
      approvalTransactionHash: approvalTxHash,
    });

    setSubmitState("success");
    router.push(routes.offerDetail(offerId));
  } catch (err) {
    setSubmitState("error");
    setSubmitError(err instanceof Error ? err.message : "Please try again.");
  }
};