Reap Card Issuance

"use client";

import {
    CrossmintProvider,
    CrossmintAuthProvider,
    CrossmintWalletProvider,
} from "@crossmint/client-sdk-react-ui";

export function Providers({ children }: { children: React.ReactNode }) {
    return (
        <CrossmintProvider apiKey={process.env.NEXT_PUBLIC_CROSSMINT_API_KEY ?? ""}>
            <CrossmintAuthProvider loginMethods={["email", "google"]}>
                <CrossmintWalletProvider
                    createOnLogin={{
                        chain: "base-sepolia",
                        recovery: { type: "email" },
                    }}
                >
                    {children}
                </CrossmintWalletProvider>
            </CrossmintAuthProvider>
        </CrossmintProvider>
    );
}

NEXT_PUBLIC_CROSSMINT_API_KEY=YOUR_CROSSMINT_CLIENT_API_KEY
NEXT_PUBLIC_PROGRAM_TREASURY_ADDRESS=YOUR_TREASURY_ADDRESS

REAP_API_KEY=YOUR_REAP_API_KEY
REAP_API_URL=https://sg.sandbox.api.reap.global
TREASURY_TOKEN_ADDRESSES=0x14196f08a4fa0b66b7331bc40dd6bcd8a1deea9f

"use server";

import { randomUUID } from "crypto";

const REAP_API_URL = process.env.REAP_API_URL ?? "https://sg.sandbox.api.reap.global";
const REAP_VERSION = "2025-02-14";

interface ReapError {
    error?: { code?: string; message?: string };
}

async function reap<T>(
    path: string,
    init: { method?: "GET" | "POST"; body?: object; idempotencyKey?: string } = {}
): Promise<T> {
    const apiKey = process.env.REAP_API_KEY;
    if (apiKey == null) {
        throw new Error("REAP_API_KEY is not set");
    }
    const headers: Record<string, string> = {
        Authorization: `Bearer ${apiKey}`,
        "Reap-Version": REAP_VERSION,
        "Content-Type": "application/json",
    };
    if (init.idempotencyKey != null) {
        headers["Idempotency-Key"] = init.idempotencyKey;
    }
    const response = await fetch(`${REAP_API_URL}${path}`, {
        method: init.method ?? "GET",
        headers,
        body: init.body == null ? undefined : JSON.stringify(init.body),
        cache: "no-store",
    });
    if (response.status === 204) {
        return undefined as T;
    }
    const json = (await response.json()) as T & ReapError;
    if (!response.ok) {
        const code = json.error?.code ?? response.status;
        const message = json.error?.message ?? response.statusText;
        throw new Error(`Reap ${init.method ?? "GET"} ${path} failed: ${code} ${message}`);
    }
    return json;
}

// Uses the reap client from the previous step

export interface ReapUser {
    id: string;
    email: string;
    application: { status: "NOT_STARTED" | "PENDING" | "IN_REVIEW" | "APPROVED" | "REJECTED" } | null;
}

export interface ReapAccount {
    id: string;
    ownerId: string;
    status: string;
}

export interface ReapCard {
    id: string;
    accountId: string;
    type: "VIRTUAL" | "PHYSICAL";
    status: string;
    last4: string;
}

export async function findOrCreateReapUser(params: {
    walletAddress: string;
    email: string;
    firstName: string;
    lastName: string;
    phoneNumber: string;
}): Promise<ReapUser> {
    const existing = await reap<{ items: ReapUser[] }>(
        `/users?externalId=${encodeURIComponent(params.walletAddress)}`
    );
    if (existing.items.length > 0) {
        return existing.items[0];
    }
    return reap<ReapUser>("/users", {
        method: "POST",
        idempotencyKey: randomUUID(),
        body: {
            externalId: params.walletAddress,
            email: params.email,
            firstName: params.firstName,
            lastName: params.lastName,
            phoneNumber: params.phoneNumber,
        },
    });
}

export async function getReapUser(userId: string): Promise<ReapUser> {
    return reap<ReapUser>(`/users/${userId}`);
}

// Sandbox only. In production, users complete KYC through Reap's hosted flow.
export async function simulateKycApproval(userId: string): Promise<void> {
    await reap<void>(`/simulation/users/${userId}/application`, {
        method: "POST",
        body: { status: "APPROVED" },
    });
}

export async function findOrCreateReapAccount(userId: string): Promise<ReapAccount> {
    const existing = await reap<{ items: ReapAccount[] }>(`/accounts?ownerType=USER&ownerId=${userId}`);
    if (existing.items.length > 0) {
        return existing.items[0];
    }
    return reap<ReapAccount>("/accounts", {
        method: "POST",
        idempotencyKey: randomUUID(),
        body: { ownerId: userId },
    });
}

export async function findOrCreateVirtualCard(params: {
    userId: string;
    accountId: string;
}): Promise<ReapCard> {
    const existing = await reap<{ items: ReapCard[] }>(`/cards?accountId=${params.accountId}`);
    const active = existing.items.find((card) => card.status === "ACTIVE");
    if (active != null) {
        return active;
    }
    return reap<ReapCard>("/cards", {
        method: "POST",
        idempotencyKey: randomUUID(),
        body: { userId: params.userId, accountId: params.accountId, type: "VIRTUAL" },
    });
}

// Uses the reap client from the previous step

export interface ReapBalance {
    currency: string;
    availableBalance: number;
    totalAssetValue: number;
    liabilities: { cardDebt: { pending: number; cleared: number; total: number } };
}

export async function getReapBalance(accountId: string): Promise<ReapBalance> {
    return reap<ReapBalance>(`/accounts/${accountId}/balance`);
}

async function findOrCreateUsdVirtualAsset(): Promise<{ id: string }> {
    const symbol = "XUSD";
    const existing = await reap<{ items: { id: string; symbol: string }[] }>("/virtual-assets");
    const match = existing.items.find((asset) => asset.symbol === symbol);
    if (match != null) {
        return match;
    }
    return reap<{ id: string }>("/virtual-assets", {
        method: "POST",
        idempotencyKey: randomUUID(),
        body: { symbol, name: "Program USD", decimals: 6, rateSource: "FIXED", rate: "1" },
    });
}

// Derive idempotencyKey from the verified on-chain transfer so a retried call
// returns the original posting instead of crediting the deposit twice.
export async function creditReapAccount(params: { accountId: string; amount: string; idempotencyKey: string }) {
    const asset = await findOrCreateUsdVirtualAsset();
    return reap<{ id: string; type: string }>("/postings", {
        method: "POST",
        idempotencyKey: params.idempotencyKey,
        body: {
            accountId: params.accountId,
            type: "DEPOSIT",
            entries: [{ virtualAssetId: asset.id, amount: params.amount }],
        },
    });
}

// Sandbox only. In production, collateralize the master account through Reap.
export async function simulateCollateralTopUp(amount: number) {
    return reap<{ id: string; status: string; amount: number }>("/simulation/fiat-deposits", {
        method: "POST",
        body: { amount, currency: "USD", senderName: "Program Treasury" },
    });
}

export async function createCardRevealUrl(cardId: string): Promise<{ revealUrl: string; expiresAt: string }> {
    return reap(`/cards/${cardId}/reveal`, { method: "POST", body: {} });
}

"use server";

const RPC_URL = process.env.BASE_SEPOLIA_RPC_URL ?? "https://sepolia.base.org";
const TRANSFER_TOPIC = "0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef";
const TOKEN_DECIMALS = 6;
// Comma-separated list of ERC-20 contracts accepted as USD, for example USDXM on base-sepolia
const ACCEPTED_TOKENS = (process.env.TREASURY_TOKEN_ADDRESSES ?? "").toLowerCase().split(",");

interface Receipt {
    status: string;
    logs: { address: string; topics: string[]; data: string; logIndex: string }[];
}

function topicToAddress(topic: string): string {
    return `0x${topic.slice(26)}`.toLowerCase();
}

export async function confirmTreasuryDeposit(
    transactionHash: string,
    senderAddress: string
): Promise<{ amount: string; tokenAddress: string; depositKey: string }> {
    const treasury = process.env.NEXT_PUBLIC_PROGRAM_TREASURY_ADDRESS;
    if (treasury == null) {
        throw new Error("NEXT_PUBLIC_PROGRAM_TREASURY_ADDRESS is not set");
    }

    let receipt: Receipt | null = null;
    for (let attempt = 0; attempt < 15 && receipt == null; attempt++) {
        const response = await fetch(RPC_URL, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
                jsonrpc: "2.0",
                id: 1,
                method: "eth_getTransactionReceipt",
                params: [transactionHash],
            }),
            cache: "no-store",
        });
        const json = (await response.json()) as { result: Receipt | null };
        receipt = json.result;
        if (receipt == null) {
            await new Promise((resolve) => setTimeout(resolve, 2000));
        }
    }
    if (receipt == null) {
        throw new Error(`Transaction ${transactionHash} was not found on chain`);
    }
    if (receipt.status !== "0x1") {
        throw new Error(`Transaction ${transactionHash} reverted`);
    }

    const transfer = receipt.logs.find(
        (log) =>
            log.topics[0] === TRANSFER_TOPIC &&
            ACCEPTED_TOKENS.includes(log.address.toLowerCase()) &&
            topicToAddress(log.topics[1]) === senderAddress.toLowerCase() &&
            topicToAddress(log.topics[2]) === treasury.toLowerCase()
    );
    if (transfer == null) {
        throw new Error("No accepted stablecoin transfer from the user to the program treasury in this transaction");
    }

    const raw = BigInt(transfer.data);
    const unit = BigInt(10) ** BigInt(TOKEN_DECIMALS);
    const whole = raw / unit;
    const fraction = (raw % unit).toString().padStart(TOKEN_DECIMALS, "0").replace(/0+$/, "");
    return {
        amount: fraction === "" ? whole.toString() : `${whole}.${fraction}`,
        tokenAddress: transfer.address,
        depositKey: `${transactionHash}:${transfer.logIndex}`,
    };
}

"use client";

import { useState } from "react";
import { useCrossmintAuth, useWallet } from "@crossmint/client-sdk-react-ui";
import {
    findOrCreateReapAccount,
    findOrCreateReapUser,
    findOrCreateVirtualCard,
    getReapUser,
    simulateKycApproval,
    type ReapAccount,
    type ReapCard,
} from "@/actions/reap";

const KYC_POLL_MS = 5000;
const KYC_POLL_ATTEMPTS = 24;

export function ReapCard() {
    const { wallet } = useWallet();
    const { user } = useCrossmintAuth();
    const [account, setAccount] = useState<ReapAccount | null>(null);
    const [card, setCard] = useState<ReapCard | null>(null);

    const setUpCard = async () => {
        if (wallet == null || user?.email == null) {
            return;
        }
        let reapUser = await findOrCreateReapUser({
            walletAddress: wallet.address,
            email: user.email,
            firstName: "Jane",
            lastName: "Doe",
            phoneNumber: "+14155550123",
        });

        if (reapUser.application?.status !== "APPROVED") {
            await simulateKycApproval(reapUser.id);
            for (let i = 0; i < KYC_POLL_ATTEMPTS; i++) {
                await new Promise((resolve) => setTimeout(resolve, KYC_POLL_MS));
                reapUser = await getReapUser(reapUser.id);
                if (reapUser.application?.status === "APPROVED") {
                    break;
                }
            }
            if (reapUser.application?.status !== "APPROVED") {
                throw new Error(`KYC still ${reapUser.application?.status ?? "missing"}`);
            }
        }

        const reapAccount = await findOrCreateReapAccount(reapUser.id);
        setAccount(reapAccount);
        setCard(await findOrCreateVirtualCard({ userId: reapUser.id, accountId: reapAccount.id }));
    };

    return (
        <div>
            <button onClick={setUpCard}>Issue virtual card</button>
            {card != null && <p>Card •••• {card.last4} · {card.status}</p>}
        </div>
    );
}

// Uses the component state from the previous step
import { confirmTreasuryDeposit } from "@/actions/treasury";
import { creditReapAccount, getReapBalance } from "@/actions/reap";

const TREASURY = process.env.NEXT_PUBLIC_PROGRAM_TREASURY_ADDRESS ?? "";
const STABLECOIN = "usdxm";

const fundCard = async (amount: string) => {
    if (wallet == null || account == null) {
        return;
    }
    await wallet.stagingFund(10);

    const tx = await wallet.send(TREASURY, STABLECOIN, amount);
    const deposit = await confirmTreasuryDeposit(tx.hash, wallet.address);
    await creditReapAccount({ accountId: account.id, amount: deposit.amount, idempotencyKey: deposit.depositKey });

    const balance = await getReapBalance(account.id);
    console.log(`Spending power: ${balance.availableBalance} ${balance.currency}`);
};

// Add to the component's returned JSX
{account != null && <button onClick={() => fundCard("5")}>Fund card with 5 {STABLECOIN.toUpperCase()}</button>}

// Uses the reap client from the create step

export interface ReapTransaction {
    id: string;
    status: string;
    amount: number;
    currency: string;
    merchant: { name: string };
    declineReason: { code: string; message: string } | null;
}

interface ReapTransactionResponse extends Omit<ReapTransaction, "amount" | "declineReason"> {
    amount?: { authorized: number; reversed: number; current: number };
    originalAmount: number | { current: number };
    declineReason?: { code: string; message: string } | null;
}

// Sandbox only
export async function simulateCardPurchase(params: {
    cardId: string;
    amount: number;
    merchantName: string;
}): Promise<ReapTransaction> {
    const tx = await reap<ReapTransactionResponse>("/simulation/card-transactions/authorization", {
        method: "POST",
        body: { cardId: params.cardId, amount: params.amount, merchant: { name: params.merchantName } },
    });
    const amount =
        tx.amount?.current ??
        (typeof tx.originalAmount === "number" ? tx.originalAmount : tx.originalAmount.current);
    return { ...tx, amount, declineReason: tx.declineReason ?? null };
}

// Uses the component state from the previous step
import { createCardRevealUrl, simulateCardPurchase, simulateCollateralTopUp } from "@/actions/reap";

const [revealUrl, setRevealUrl] = useState<string | null>(null);

const purchaseAndReveal = async () => {
    if (card == null) {
        return;
    }
    await simulateCollateralTopUp(100);
    const purchase = await simulateCardPurchase({ cardId: card.id, amount: 2.5, merchantName: "Coffee Shop" });
    console.log(`${purchase.status}: ${purchase.amount} ${purchase.currency}`);

    const session = await createCardRevealUrl(card.id);
    setRevealUrl(session.revealUrl);
};

// Add to the component's returned JSX
{card != null && <button onClick={purchaseAndReveal}>Simulate purchase and reveal card</button>}
{revealUrl != null && <iframe src={revealUrl} title="Card details" width={400} height={260} />}