@ensofinance/checkout-widget 0.0.1

package/src/components/steps/WalletConfirmStep.tsx

@@ -0,0 +1,404 @@
+import { Box, Icon, Table, Text, Image } from "@chakra-ui/react";
+import { HeaderWrapper, HeaderTitle, BodyWrapper } from "../ui/styled";
+import { ChevronLeft, X } from "lucide-react";
+import { useContext, useEffect, useState, useMemo, useCallback } from "react";
+import { useAccount } from "wagmi";
+import { Address } from "viem";
+import Modal from "../modal";
+import { CheckoutContext } from "../Checkout";
+import { Button, IconButton } from "../ui";
+import { CircleTimer } from "../CircleTimer";
+import { TransactionDetailRow } from "../TransactionDetailRow";
+import DepositProcessing from "../DepositProcessing";
+import { useSendTxns, useRouteData, useAppDetails } from "@/util/enso-hooks";
+import { getChainIcon } from "@/util";
+import { getChainEtherscanUrl } from "@/util/common";
+import { useTrackTx, useTxByHash } from "@/util/tx-tracker";
+import QuoteParameters from "../QuoteParameters";
+import { useApproveData } from "@/enso-api/api";
+import { useIsApproveNeeded } from "@/util/wallet";
+
+import SuccessIcon from "../../assets/success.svg";
+import FailIcon from "../../assets/fail.svg";
+
+type TransferStatus = "processing" | "success" | "failed" | "idle";
+
+const useOperationsCalls = () => {
+    const { chainIdIn, tokenIn, amountIn } = useAppDetails();
+    const { address } = useAccount();
+
+    const { approveData, approveFetched } = useApproveData({
+        address,
+        token: tokenIn as Address,
+        chainId: chainIdIn,
+        amount: amountIn,
+    });
+    const { routeData, routeFetched } = useRouteData();
+
+    const { approveNeeded, allowanceFetched } = useIsApproveNeeded(
+        tokenIn as Address,
+        approveData?.tx?.to as Address,
+        amountIn,
+    );
+
+    const calls = useMemo(() => {
+        if (!allowanceFetched || !routeFetched || !approveFetched) return [];
+
+        if (approveNeeded) {
+            return [approveData?.tx, routeData?.tx];
+        }
+        return [routeData?.tx];
+    }, [
+        approveNeeded,
+        allowanceFetched,
+        routeFetched,
+        approveData,
+        routeData,
+        approveFetched,
+    ]);
+
+    return {
+        calls,
+        approveNeeded,
+    };
+};
+
+const WalletConfirmStep = () => {
+    const { handleClose, setFlow, setStep } = useContext(CheckoutContext);
+    const [status, setStatus] = useState<TransferStatus>("idle");
+    const [isTimerFinished, setIsTimerFinished] = useState(false);
+    const { address } = useAccount();
+    const [trackingHash, setTrackingHash] = useState("");
+    const [called, setCalled] = useState(false);
+
+    const { chainIdIn, chainIdOut } = useAppDetails();
+    const { calls } = useOperationsCalls();
+
+    const { sendTxns, ready } = useSendTxns({
+        calls,
+        address,
+        chainId: chainIdIn,
+    });
+
+    // const [trackingHash, setTrackingHash] = useState("");
+    const { track } = useTrackTx();
+
+    const isCrosschain = chainIdIn !== chainIdOut;
+
+    const onTxSend = useCallback(
+        (hash: string) => {
+            setStatus("processing");
+            setTrackingHash(hash);
+            track({
+                hash: hash as `0x${string}`,
+                isActive: true,
+                chainId: chainIdIn,
+                crosschain: isCrosschain,
+                status: isCrosschain
+                    ? "(0/4) Waiting for source transaction completion"
+                    : "Transaction in progess",
+                message: "Transaction confirmed",
+                onConfirmed: () => {
+                    setStatus("success");
+                },
+            });
+        },
+        [chainIdIn, chainIdOut],
+    );
+
+    const onFail = useCallback((error: any) => {
+        console.error(error);
+        setStatus("failed");
+    }, []);
+
+    // Initiate the transaction when wallet is ready
+    useEffect(() => {
+        if (!called && ready) {
+            sendTxns(onTxSend, onFail);
+            setCalled(true);
+        }
+    }, [called, ready, sendTxns, onTxSend]);
+
+    const handleTimerFinish = () => {
+        setIsTimerFinished(true);
+    };
+
+    const handleNewDeposit = () => {
+        // Reset to initial step or handle new deposit logic
+        setFlow("mainFlow");
+        setStep("selectToken");
+    };
+
+    const handleRetry = () => {
+        // Reset to previous step to retry the transfer
+        // setStatus("processing");
+        // setIsTimerFinished(false);
+        setFlow("mainFlow");
+        setStep("quote");
+    };
+
+    const tx = useTxByHash(trackingHash);
+
+    const explorerUrl = isCrosschain
+        ? `https://layerzeroscan.com/tx/${trackingHash}`
+        : getChainEtherscanUrl({
+              hash: trackingHash,
+              chainId: chainIdIn,
+          });
+
+    // useEffect(() => {
+    //     if (status === "processing") {
+    //         // Simulate transfer processing - randomly succeed or fail after timer
+    //         const timer = setTimeout(() => {
+    //             const shouldSucceed = Math.random() > 0.3; // 70% success rate for demo
+    //             setStatus(shouldSucceed ? "success" : "failed");
+    //         }, 2500); // 2.5 seconds processing time
+
+    //         return () => clearTimeout(timer);
+    //     }
+    // }, [status]);
+
+    const getStatusColor = () => {
+        switch (status) {
+            case "success":
+                return "#14AE5C";
+            case "failed":
+                return "#E84142";
+            default:
+                return "#1E171F";
+        }
+    };
+
+    const getStatusText = () => {
+        switch (status) {
+            case "success":
+                return "Success";
+            case "failed":
+                return "Failed";
+            case "idle":
+                return "Awaiting wallet approval";
+            default:
+                return tx?.status;
+        }
+    };
+
+    const renderStatusIcon = () => {
+        switch (status) {
+            case "processing":
+            case "idle":
+                return (
+                    <CircleTimer
+                        start={status === "processing"}
+                        onFinish={handleTimerFinish}
+                    />
+                );
+
+            case "success":
+                return (
+                    <Box
+                        display="flex"
+                        flexDirection="column"
+                        alignItems="center"
+                    >
+                        <Image
+                            src={SuccessIcon}
+                            boxShadow="0px 0px 20px #14AE5C"
+                            borderRadius="90%"
+                            width="58px"
+                            height="58px"
+                        />
+                    </Box>
+                );
+
+            case "failed":
+                return (
+                    <Box
+                        display="flex"
+                        flexDirection="column"
+                        alignItems="center"
+                    >
+                        <Image
+                            src={FailIcon}
+                            boxShadow="0px 0px 20px #E84142"
+                            borderRadius="90%"
+                            width="58px"
+                            height="58px"
+                        />
+                    </Box>
+                );
+        }
+    };
+
+    const renderProcessingText = () => {
+        if (status === "processing" && isTimerFinished) {
+            return (
+                <Box
+                    display="flex"
+                    flexDirection="column"
+                    alignItems="center"
+                    marginTop="16px"
+                    textAlign="center"
+                >
+                    <Text
+                        fontSize="lg"
+                        fontWeight="semibold"
+                        color="fg"
+                        marginBottom="8px"
+                    >
+                        Deposit pending
+                    </Text>
+                    <Text fontSize="sm" color="fg.muted" maxWidth="280px">
+                        Your deposit is still in progress – no action is
+                        required from you.
+                    </Text>
+                </Box>
+            );
+        }
+        return null;
+    };
+
+    return (
+        <>
+            <Modal.Header>
+                <HeaderWrapper>
+                    <IconButton
+                        minWidth={"16px"}
+                        minHeight={"16px"}
+                        maxWidth={"16px"}
+                        onClick={() => {
+                            setFlow("mainFlow");
+                            setStep("quote");
+                        }}
+                    >
+                        <Icon
+                            as={ChevronLeft}
+                            color="gray"
+                            width={"16px"}
+                            height={"16px"}
+                        />
+                    </IconButton>
+
+                    <Box display="flex" flexDirection="column" gap={"4px"}>
+                        <HeaderTitle>Top up your wallet</HeaderTitle>
+                    </Box>
+
+                    {handleClose && (
+                        <IconButton
+                            onClick={handleClose}
+                            width={"40px"}
+                            marginLeft={"auto"}
+                        >
+                            <Icon
+                                as={X}
+                                color="gray"
+                                width={"16px"}
+                                height={"16px"}
+                            />
+                        </IconButton>
+                    )}
+                </HeaderWrapper>
+            </Modal.Header>
+            <Modal.Body>
+                <BodyWrapper>
+                    <Box
+                        display={"flex"}
+                        flexDirection={"column"}
+                        paddingBottom={"16px"}
+                        alignItems={"center"}
+                        width={"100%"}
+                    >
+                        {renderStatusIcon()}
+                        {renderProcessingText()}
+                    </Box>
+
+                    <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>
+                            {["success", "processing"].includes(status) && (
+                                <Table.Row>
+                                    <Table.Cell>Transaction</Table.Cell>
+                                    <Table.Cell
+                                        display="flex"
+                                        textAlign="end"
+                                        justifyContent="end"
+                                    >
+                                        {explorerUrl ? (
+                                            <a
+                                                href={explorerUrl}
+                                                target="_blank"
+                                                rel="noreferrer"
+                                            >
+                                                <Text color="blue.500">
+                                                    View on{" "}
+                                                    {isCrosschain
+                                                        ? "LayerZero"
+                                                        : "Etherscan"}
+                                                </Text>
+                                            </a>
+                                        ) : (
+                                            <Text>-</Text>
+                                        )}
+                                    </Table.Cell>
+                                </Table.Row>
+                            )}
+                        </Table.Body>
+                    </Table.Root>
+
+                    <QuoteParameters />
+
+                    {status === "processing" ? (
+                        <DepositProcessing
+                            currencyIcon={getChainIcon(chainIdOut)}
+                        />
+                    ) : (
+                        <TransactionDetailRow />
+                    )}
+
+                    {status === "success" && (
+                        <Box display="flex" gap={"12px"} width="100%">
+                            <Button visual={"lightGray"} onClick={handleClose}>
+                                Close
+                            </Button>
+                            <Button visual={"solid"} onClick={handleNewDeposit}>
+                                New Deposit
+                            </Button>
+                        </Box>
+                    )}
+
+                    {status === "failed" && (
+                        <Box display="flex" gap={"12px"} width="100%">
+                            <Button
+                                // variant={"surface"}
+                                visual={"lightGray"}
+                                onClick={handleClose}
+                            >
+                                Close
+                            </Button>
+                            <Button visual={"solid"} onClick={handleRetry}>
+                                Retry Deposit
+                            </Button>
+                        </Box>
+                    )}
+                </BodyWrapper>
+            </Modal.Body>
+        </>
+    );
+};
+
+export default WalletConfirmStep;

package/src/components/steps/WalletTokenStep.tsx

@@ -0,0 +1,128 @@
+import { Box, Icon, Skeleton } from "@chakra-ui/react";
+import {
+    HeaderWrapper,
+    HeaderTitle,
+    HeaderDescription,
+    ListWrapper,
+    BodyWrapper,
+} from "../ui/styled";
+import { ChevronLeft, X } from "lucide-react";
+import { useContext, useEffect } from "react";
+import Modal from "../modal";
+import { CheckoutContext } from "../Checkout";
+import { Button, IconButton } from "../ui";
+import { AssetCard } from "../cards";
+import { useAppStore } from "@/store";
+import { useWalletBalance } from "@/enso-api/api";
+import { formatNumber, formatUSD, normalizeValue } from "@/util";
+
+const SelectTokenStep = () => {
+    const { handleClose, setFlow, setStep } = useContext(CheckoutContext);
+    const setIsCheckout = useAppStore((state) => state.setIsCheckout);
+    const setTokenIn = useAppStore((state) => state.setTokenIn);
+    const tokenIn = useAppStore((state) => state.tokenIn);
+    const setChainIdIn = useAppStore((state) => state.setChainIdIn);
+    const chainIdIn = useAppStore((state) => state.chainIdIn);
+    const { holdingsList, total, isLoading } = useWalletBalance();
+
+    useEffect(() => {
+        setIsCheckout(false);
+    }, []);
+
+    return (
+        <>
+            <Modal.Header>
+                <HeaderWrapper>
+                    <IconButton
+                        minWidth={"16px"}
+                        minHeight={"16px"}
+                        maxWidth={"16px"}
+                        onClick={() => {
+                            setFlow("");
+                            setStep("");
+                        }}
+                    >
+                        <Icon
+                            as={ChevronLeft}
+                            color="gray"
+                            width={"16px"}
+                            height={"16px"}
+                        />
+                    </IconButton>
+                    <Box display="flex" flexDirection="column" gap={"4px"}>
+                        <HeaderTitle>Deposit</HeaderTitle>
+                        <HeaderDescription>
+                            Balance: {formatUSD(total)}
+                        </HeaderDescription>
+                    </Box>
+                    {handleClose && (
+                        <IconButton
+                            onClick={handleClose}
+                            width={"40px"}
+                            marginLeft={"auto"}
+                        >
+                            <Icon
+                                as={X}
+                                color="gray"
+                                width={"16px"}
+                                height={"16px"}
+                            />
+                        </IconButton>
+                    )}
+                </HeaderWrapper>
+            </Modal.Header>
+
+            <Modal.Body>
+                <BodyWrapper>
+                    <Box overflowY={"scroll"} maxH={"400px"}>
+                        <ListWrapper>
+                            {isLoading
+                                ? Array.from({ length: 10 }).map((_, index) => (
+                                      <Skeleton
+                                          key={index}
+                                          height="40px"
+                                          width="300px"
+                                      />
+                                  ))
+                                : holdingsList?.map((asset) => (
+                                      <AssetCard
+                                          key={`${asset.token}-${asset.chainId}`}
+                                          chainId={asset.chainId}
+                                          icon={asset.logoUri}
+                                          title={asset.name}
+                                          balance={`${formatNumber(
+                                              normalizeValue(
+                                                  asset.amount,
+                                                  asset.decimals,
+                                              ),
+                                          )} ${asset.symbol}`}
+                                          usdBalance={formatUSD(asset.total)}
+                                          tag={""}
+                                          loading={false}
+                                          selected={
+                                              asset.token === tokenIn &&
+                                              asset.chainId === chainIdIn
+                                          }
+                                          onClick={() => {
+                                              setTokenIn(asset.token);
+                                              setChainIdIn(asset.chainId);
+                                          }}
+                                      />
+                                  ))}
+                        </ListWrapper>
+                    </Box>
+                    <Button
+                        onClick={() => {
+                            setStep("selectAmount");
+                        }}
+                        disabled={!tokenIn}
+                    >
+                        Continue
+                    </Button>
+                </BodyWrapper>
+            </Modal.Body>
+        </>
+    );
+};
+
+export default SelectTokenStep;