@ensofinance/checkout-widget 0.1.6 → 0.1.8

package/src/components/steps/shared/TrackUserOpStep.tsx

@@ -0,0 +1,625 @@
+import { useEffect, useMemo, useState } from "react";
+import { Box, Image, Table, Text } from "@chakra-ui/react";
+
+import { Button } from "@/components/ui";
+import { BodyWrapper } from "@/components/ui/styled";
+import { CircleTimer } from "@/components/CircleTimer";
+import QuoteParameters from "@/components/QuoteParameters";
+import { TransactionDetailRow } from "@/components/TransactionDetailRow";
+import { useAppDetails } from "@/util/enso-hooks";
+import { useLayerZeroStatus } from "@/util/tx-tracker";
+import { CHAINS_ETHERSCAN, STARGATE_CHAIN_NAMES } from "@/util/constants";
+import { useAppStore } from "@/store";
+
+import SuccessIcon from "@/assets/success.svg";
+import FailIcon from "@/assets/fail.svg";
+
+type OperationStatus = "sending" | "tracking" | "completed" | "failed";
+
+type Props = {
+    userOp: any;
+    timerSeconds?: number;
+    pendingMessage?: string;
+    onReset?: () => void;
+    resetLabel?: string;
+};
+
+const OPERATIONS_API_BASE =
+    "https://alpha-scanners-dev-054573dc8549.herokuapp.com";
+
+// Phase indicator component for cross-chain tracking
+const PhaseIndicator = ({
+    currentPhase,
+    phases,
+}: {
+    currentPhase: number;
+    phases: string[];
+}) => {
+    return (
+        <Box display="flex" gap={4} justifyContent="center" mb={4}>
+            {phases.map((phase, index) => (
+                <Box key={phase} display="flex" alignItems="center" gap={2}>
+                    <Box
+                        w={6}
+                        h={6}
+                        borderRadius="full"
+                        bg={
+                            index < currentPhase
+                                ? "green.500"
+                                : index === currentPhase
+                                  ? "blue.500"
+                                  : "gray.300"
+                        }
+                        display="flex"
+                        alignItems="center"
+                        justifyContent="center"
+                        color="white"
+                        fontSize="xs"
+                        fontWeight="bold"
+                    >
+                        {index < currentPhase ? "✓" : index + 1}
+                    </Box>
+                    <Text
+                        fontSize="sm"
+                        color={index === currentPhase ? "fg" : "fg.muted"}
+                        fontWeight={
+                            index === currentPhase ? "semibold" : "normal"
+                        }
+                    >
+                        {phase}
+                    </Text>
+                </Box>
+            ))}
+        </Box>
+    );
+};
+
+const TrackUserOpStep = ({
+    userOp,
+    timerSeconds,
+    pendingMessage,
+    onReset,
+    resetLabel,
+}: Props) => {
+    const { chainIdIn, chainIdOut, tokenInData } = useAppDetails();
+    const amountIn = useAppStore((s) => s.amountIn);
+
+    const isCrosschain = useMemo(
+        () => !!chainIdIn && !!chainIdOut && chainIdIn !== chainIdOut,
+        [chainIdIn, chainIdOut],
+    );
+
+    // Phase management: for crosschain 'cex' -> 'bridge' -> 'completed', for single-chain just 'cex' -> 'completed'
+    const [phase, setPhase] = useState<
+        "cex" | "bridge" | "completed" | "failed"
+    >("cex");
+    const [operationId, setOperationId] = useState<string | null>(null);
+    const [status, setStatus] = useState<OperationStatus>("sending");
+    const [message, setMessage] = useState("Sending operation to tracker...");
+    const [txHash, setTxHash] = useState<`0x${string}` | null>(null);
+    const [isTimerFinished, setIsTimerFinished] = useState(false);
+    const [destinationVerified, setDestinationVerified] = useState(false);
+    const [refundDetails, setRefundDetails] = useState<{
+        token: string;
+        amount: string;
+        recipient: string;
+        isNative: boolean;
+    } | null>(null);
+    const [destinationTxHash, setDestinationTxHash] = useState<string | null>(
+        null,
+    );
+
+    // LayerZero tracking for bridge progress (real-time updates)
+    const lzStatus = useLayerZeroStatus(
+        txHash ?? undefined,
+        isCrosschain && phase === "bridge",
+    );
+
+    // Submit UserOp to tracker
+    useEffect(() => {
+        if (status !== "sending") return;
+        if (!userOp || !tokenInData || !chainIdIn || !amountIn) return;
+
+        const sendUserOpToTracker = async () => {
+            try {
+                const response = await fetch(
+                    `${OPERATIONS_API_BASE}/operations`,
+                    {
+                        method: "POST",
+                        headers: {
+                            "Content-Type": "application/json",
+                        },
+                        body: JSON.stringify({
+                            userOperationData: {
+                                sender: userOp.sender,
+                                nonce: userOp.nonce,
+                                factory: userOp.factory,
+                                factoryData: userOp.factoryData,
+                                callData: userOp.callData,
+                                callGasLimit: userOp.callGasLimit,
+                                verificationGasLimit: userOp.verificationGasLimit,
+                                preVerificationGas: userOp.preVerificationGas,
+                                maxFeePerGas: userOp.maxFeePerGas,
+                                maxPriorityFeePerGas: userOp.maxPriorityFeePerGas,
+                                paymaster: userOp.paymaster,
+                                paymasterData: userOp.paymasterData,
+                                paymasterVerificationGasLimit:
+                                    userOp.paymasterVerificationGasLimit,
+                                paymasterPostOpGasLimit:
+                                    userOp.paymasterPostOpGasLimit,
+                                signature: userOp.signature,
+                            },
+                            chainId: chainIdIn,
+                            expectedBalance: amountIn,
+                            tokenAddress: tokenInData.address,
+                        }),
+                    },
+                );
+
+                const data = await response.json();
+
+                if (data.success && data.operationId) {
+                    setOperationId(data.operationId);
+                    setStatus("tracking");
+                    setMessage(
+                        pendingMessage ??
+                            (isCrosschain
+                                ? "Funds forwarding in progress..."
+                                : "Tracking operation progress..."),
+                    );
+                    return;
+                }
+
+                throw new Error(
+                    data.message || "Failed to send operation to tracker",
+                );
+            } catch (error) {
+                console.error("Failed to send operation to tracker:", error);
+                setStatus("failed");
+                setMessage("Failed to start tracking");
+                setPhase("failed");
+            }
+        };
+
+        sendUserOpToTracker();
+    }, [amountIn, chainIdIn, isCrosschain, pendingMessage, status, tokenInData, userOp]);
+
+    // Track operation status
+    useEffect(() => {
+        if (!operationId || status !== "tracking") return;
+
+        const trackOperation = async () => {
+            try {
+                const response = await fetch(
+                    `${OPERATIONS_API_BASE}/operations/${operationId}/status`,
+                );
+                const data = await response.json();
+
+                if (data.operation?.status === "completed") {
+                    setStatus("completed");
+
+                    if (isCrosschain) {
+                        // For crosschain: move to bridge phase
+                        setMessage("Funds forwarding completed!");
+                        if (data.operation?.bundleTxHash) {
+                            setTxHash(
+                                data.operation.bundleTxHash as `0x${string}`,
+                            );
+                            setPhase("bridge");
+                        } else {
+                            console.warn(
+                                "No bundleTxHash returned from indexer, cannot track bridge",
+                            );
+                            setPhase("completed");
+                        }
+                    } else {
+                        // For single-chain: complete
+                        setMessage("Operation completed successfully!");
+                        setPhase("completed");
+                    }
+                } else if (
+                    ["failed", "failed_permanent"].includes(data.operation?.status)
+                ) {
+                    setStatus("failed");
+                    setMessage(
+                        isCrosschain
+                            ? "Bridging failed. Please select Smart-account balance as a source to use withdrawn funds"
+                            : "Operation failed",
+                    );
+                    setPhase("failed");
+                }
+            } catch (error) {
+                console.error("Failed to fetch operation status:", error);
+            }
+        };
+
+        const interval = setInterval(trackOperation, 3000);
+        return () => clearInterval(interval);
+    }, [isCrosschain, operationId, status]);
+
+    // Handle bridge completion - verify destination execution once LayerZero shows DELIVERED
+    useEffect(() => {
+        if (!isCrosschain || phase !== "bridge") return;
+
+        // If LayerZero failed, mark as failed immediately
+        if (lzStatus.isFailed) {
+            setPhase("failed");
+            return;
+        }
+
+        // When LayerZero shows DELIVERED, verify destination execution with Enso API
+        if (lzStatus.isComplete && !destinationVerified && txHash && chainIdIn) {
+            const verifyDestination = async () => {
+                try {
+                    const res = await fetch(
+                        `https://api.enso.build/api/v1/layerzero/bridge/check?chainId=${chainIdIn}&txHash=${txHash}`,
+                    );
+                    if (!res.ok) {
+                        // If API call fails, assume success (LayerZero delivered)
+                        setDestinationVerified(true);
+                        setPhase("completed");
+                        return;
+                    }
+                    const data = await res.json();
+                    setDestinationVerified(true);
+                    setDestinationTxHash(data.destinationTxHash || null);
+
+                    if (data.status === "success") {
+                        setPhase("completed");
+                    } else if (data.status === "failed") {
+                        setRefundDetails(
+                            data.ensoDestinationEvent?.refundDetails || null,
+                        );
+                        setPhase("failed");
+                    } else {
+                        // Still pending, assume success since LZ delivered
+                        setPhase("completed");
+                    }
+                } catch (error) {
+                    console.error("Failed to verify destination:", error);
+                    // On error, assume success since LayerZero delivered
+                    setDestinationVerified(true);
+                    setPhase("completed");
+                }
+            };
+            verifyDestination();
+        }
+    }, [
+        chainIdIn,
+        destinationVerified,
+        isCrosschain,
+        lzStatus.isComplete,
+        lzStatus.isFailed,
+        phase,
+        txHash,
+    ]);
+
+    const handleTimerFinish = () => {
+        setIsTimerFinished(true);
+    };
+
+    const getOverallStatus = () => {
+        if (phase === "failed") return "failed";
+        if (phase === "completed") return "completed";
+        return "processing";
+    };
+
+    const getStatusColor = () => {
+        switch (getOverallStatus()) {
+            case "completed":
+                return "success";
+            case "failed":
+                return "error";
+            default:
+                return "fg";
+        }
+    };
+
+    const getStatusText = () => {
+        switch (getOverallStatus()) {
+            case "completed":
+                return "Success";
+            case "failed":
+                return "Failed";
+            default:
+                return "Processing";
+        }
+    };
+
+    const getCurrentMessage = () => {
+        if (isCrosschain) {
+            if (phase === "cex") {
+                return `(1/2) ${message}`;
+            } else if (phase === "bridge") {
+                return `(2/2) ${lzStatus.message}`;
+            } else if (phase === "completed") {
+                return "Transfer completed successfully!";
+            } else {
+                return refundDetails
+                    ? "Destination execution failed. Funds refunded to smart account."
+                    : "Transfer failed";
+            }
+        } else {
+            if (phase === "completed") {
+                return "Operation completed successfully!";
+            } else if (phase === "failed") {
+                return "Operation failed";
+            }
+            return message;
+        }
+    };
+
+    const renderStatusIcon = () => {
+        const isProcessing = phase === "cex" || phase === "bridge";
+
+        if (isProcessing) {
+            const duration = timerSeconds ?? (isCrosschain ? 180 : 120);
+            return (
+                <CircleTimer
+                    start={status === "tracking" || phase === "bridge"}
+                    onFinish={handleTimerFinish}
+                    duration={duration}
+                />
+            );
+        }
+
+        if (phase === "completed") {
+            return (
+                <Box display="flex" flexDirection="column" alignItems="center">
+                    <Image
+                        src={SuccessIcon}
+                        boxShadow="0px 0px 20px var(--chakra-colors-success)"
+                        borderRadius="90%"
+                        width="58px"
+                        height="58px"
+                    />
+                </Box>
+            );
+        }
+
+        return (
+            <Box display="flex" flexDirection="column" alignItems="center">
+                <Image
+                    src={FailIcon}
+                    boxShadow="0px 0px 20px var(--chakra-colors-error)"
+                    borderRadius="90%"
+                    width="58px"
+                    height="58px"
+                />
+            </Box>
+        );
+    };
+
+    const intermediateChainName = chainIdIn
+        ? STARGATE_CHAIN_NAMES[chainIdIn as keyof typeof STARGATE_CHAIN_NAMES]
+        : "Unknown";
+    const targetChainName = chainIdOut
+        ? STARGATE_CHAIN_NAMES[chainIdOut as keyof typeof STARGATE_CHAIN_NAMES]
+        : "Unknown";
+
+    const canReset = phase === "completed" || phase === "failed";
+    const finalResetLabel =
+        resetLabel ?? (phase === "completed" ? "New Deposit" : "Retry Deposit");
+
+    return (
+        <BodyWrapper>
+            <Box display="flex" flexDirection="column" gap={4}>
+                {/* Phase Indicator (crosschain only) */}
+                {isCrosschain && (
+                    <PhaseIndicator
+                        currentPhase={
+                            phase === "cex" ? 0 : phase === "bridge" ? 1 : 2
+                        }
+                        phases={["Forward funds", "Bridge"]}
+                    />
+                )}
+
+                {/* Status Icon */}
+                <Box
+                    display="flex"
+                    flexDirection="column"
+                    paddingBottom="16px"
+                    alignItems="center"
+                    width="100%"
+                >
+                    {renderStatusIcon()}
+                    <Box
+                        display="flex"
+                        flexDirection="column"
+                        alignItems="center"
+                        marginTop="16px"
+                        textAlign="center"
+                    >
+                        <Text
+                            fontSize="lg"
+                            fontWeight="semibold"
+                            color="fg"
+                            marginBottom="8px"
+                        >
+                            {getCurrentMessage()}
+                        </Text>
+                        {(phase === "cex" || phase === "bridge") &&
+                            isTimerFinished && (
+                                <Text
+                                    fontSize="sm"
+                                    color="fg.muted"
+                                    maxWidth="280px"
+                                >
+                                    Your operation is being processed – no action is
+                                    required from you.
+                                </Text>
+                            )}
+                    </Box>
+                </Box>
+
+                {/* Status Table */}
+                <Table.Root key="status" size="sm" variant="outline" width="100%">
+                    <Table.Body>
+                        <Table.Row>
+                            <Table.Cell>Status</Table.Cell>
+                            <Table.Cell
+                                display="flex"
+                                textAlign="end"
+                                justifyContent="end"
+                            >
+                                <Text color={getStatusColor()}>
+                                    {getStatusText()}
+                                </Text>
+                            </Table.Cell>
+                        </Table.Row>
+                        {isCrosschain && (
+                            <>
+                                <Table.Row>
+                                    <Table.Cell>Current Phase</Table.Cell>
+                                    <Table.Cell
+                                        display="flex"
+                                        textAlign="end"
+                                        justifyContent="end"
+                                    >
+                                        <Text>
+                                            {phase === "cex"
+                                                ? "Awaiting funds"
+                                                : phase === "bridge"
+                                                  ? "Bridging"
+                                                  : phase === "completed"
+                                                    ? "Complete"
+                                                    : "Failed"}
+                                        </Text>
+                                    </Table.Cell>
+                                </Table.Row>
+                                <Table.Row>
+                                    <Table.Cell>Intermediate Chain</Table.Cell>
+                                    <Table.Cell
+                                        display="flex"
+                                        textAlign="end"
+                                        justifyContent="end"
+                                    >
+                                        <Text textTransform="capitalize">
+                                            {intermediateChainName}
+                                        </Text>
+                                    </Table.Cell>
+                                </Table.Row>
+                                <Table.Row>
+                                    <Table.Cell>Final Destination</Table.Cell>
+                                    <Table.Cell
+                                        display="flex"
+                                        textAlign="end"
+                                        justifyContent="end"
+                                    >
+                                        <Text textTransform="capitalize">
+                                            {targetChainName}
+                                        </Text>
+                                    </Table.Cell>
+                                </Table.Row>
+                            </>
+                        )}
+                        {operationId && (
+                            <Table.Row>
+                                <Table.Cell>Operation ID</Table.Cell>
+                                <Table.Cell
+                                    display="flex"
+                                    textAlign="end"
+                                    justifyContent="end"
+                                >
+                                    <Text fontSize="sm" color="fg.muted">
+                                        {operationId}
+                                    </Text>
+                                </Table.Cell>
+                            </Table.Row>
+                        )}
+                        {isCrosschain && txHash && (
+                            <Table.Row>
+                                <Table.Cell>Bridge TX</Table.Cell>
+                                <Table.Cell
+                                    display="flex"
+                                    textAlign="end"
+                                    justifyContent="end"
+                                >
+                                    <Text
+                                        fontSize="sm"
+                                        color="blue.500"
+                                        cursor="pointer"
+                                        onClick={() =>
+                                            window.open(
+                                                `https://layerzeroscan.com/tx/${txHash}`,
+                                                "_blank",
+                                            )
+                                        }
+                                    >
+                                        View on LayerZero
+                                    </Text>
+                                </Table.Cell>
+                            </Table.Row>
+                        )}
+                        {isCrosschain && destinationTxHash && (
+                            <Table.Row>
+                                <Table.Cell>Destination TX</Table.Cell>
+                                <Table.Cell
+                                    display="flex"
+                                    textAlign="end"
+                                    justifyContent="end"
+                                >
+                                    <Text
+                                        fontSize="sm"
+                                        color="blue.500"
+                                        cursor="pointer"
+                                        onClick={() => {
+                                            const explorer =
+                                                CHAINS_ETHERSCAN[
+                                                    chainIdOut as keyof typeof CHAINS_ETHERSCAN
+                                                ] || "https://etherscan.io";
+                                            window.open(
+                                                `${explorer}/tx/${destinationTxHash}`,
+                                                "_blank",
+                                            );
+                                        }}
+                                    >
+                                        View on Explorer
+                                    </Text>
+                                </Table.Cell>
+                            </Table.Row>
+                        )}
+                        {isCrosschain && phase === "bridge" && (
+                            <Table.Row>
+                                <Table.Cell>Bridge Progress</Table.Cell>
+                                <Table.Cell
+                                    display="flex"
+                                    textAlign="end"
+                                    justifyContent="end"
+                                >
+                                    <Text>({lzStatus.step}/4)</Text>
+                                </Table.Cell>
+                            </Table.Row>
+                        )}
+                        {isCrosschain && refundDetails && (
+                            <Table.Row>
+                                <Table.Cell>Refund</Table.Cell>
+                                <Table.Cell
+                                    display="flex"
+                                    textAlign="end"
+                                    justifyContent="end"
+                                >
+                                    <Text fontSize="sm" color="orange.500">
+                                        Funds refunded to smart account
+                                    </Text>
+                                </Table.Cell>
+                            </Table.Row>
+                        )}
+                    </Table.Body>
+                </Table.Root>
+
+                <QuoteParameters />
+
+                <TransactionDetailRow />
+
+                {canReset && onReset && (
+                    <Button onClick={onReset} visual="solid">
+                        {finalResetLabel}
+                    </Button>
+                )}
+            </Box>
+        </BodyWrapper>
+    );
+};
+
+export default TrackUserOpStep;

package/src/components/steps/shared/exchangeIntegration.ts

@@ -0,0 +1,19 @@
+import { SupportedExchanges } from "@/types";
+
+export const ExchangeToIntegrationType: Record<SupportedExchanges, string> = {
+    [SupportedExchanges.Binance]: "binanceInternationalDirect",
+    [SupportedExchanges.Kraken]: "krakenDirect",
+    [SupportedExchanges.Coinbase]: "coinbase",
+    [SupportedExchanges.Bybit]: "bybitDirect",
+};
+
+export const EXCHANGE_ICON_BY_TYPE: Record<string, string> = {
+    [ExchangeToIntegrationType[SupportedExchanges.Binance]]:
+        "https://assets.coingecko.com/markets/images/52/large/binance.jpg",
+    [ExchangeToIntegrationType[SupportedExchanges.Kraken]]:
+        "https://assets.coingecko.com/markets/images/29/large/kraken.jpg",
+    [ExchangeToIntegrationType[SupportedExchanges.Coinbase]]:
+        "https://assets.coingecko.com/markets/images/23/large/Coinbase_Coin_Primary.png",
+    [ExchangeToIntegrationType[SupportedExchanges.Bybit]]:
+        "https://assets.coingecko.com/markets/images/698/large/bybit_spot.png",
+};

package/src/components/steps/shared/types.ts

@@ -0,0 +1,22 @@
+export interface CryptocurrencyPosition {
+    marketValue: number;
+    lastPrice: number;
+    name: string;
+    symbol: string;
+    amount: number;
+}
+
+export interface SupportedToken {
+    symbol: string;
+    name: string;
+    networkId: string;
+    chainId: number;
+    integrationNetworks: any[];
+}
+
+export interface MatchedToken extends SupportedToken {
+    balance: number;
+    marketValue: number;
+    tokenAddress?: string;
+    holding?: CryptocurrencyPosition;
+}