@ensofinance/checkout-widget 0.0.12 → 0.0.14

package/src/components/steps/{WalletConfirmStep.tsx → WalletFlow/WalletConfirmStep.tsx}

@@ -1,25 +1,23 @@
-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 { Box, Table, Text, Image } from "@chakra-ui/react";
+import { 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 { BodyWrapper } from "@/components/ui/styled";
+import { Button } from "@/components/ui";
+import { CircleTimer } from "@/components/CircleTimer";
+import { TransactionDetailRow } from "@/components/TransactionDetailRow";
+import DepositProcessing from "@/components/DepositProcessing";
 import { useSendTxns, useRouteData, useAppDetails } from "@/util/enso-hooks";
-import { getChainIcon } from "@/util";
+import { compareCaseInsensitive, getChainIcon } from "@/util";
 import { getChainEtherscanUrl } from "@/util/common";
 import { useTrackTx, useTxByHash } from "@/util/tx-tracker";
-import QuoteParameters from "../QuoteParameters";
+import QuoteParameters from "@/components/QuoteParameters";
 import { useApproveData } from "@/enso-api/api";
 import { useIsApproveNeeded } from "@/util/wallet";
+import { ETH_ADDRESS } from "@/util/constants";
 
-import SuccessIcon from "../../assets/success.svg";
-import FailIcon from "../../assets/fail.svg";
+import SuccessIcon from "@/assets/success.svg";
+import FailIcon from "@/assets/fail.svg";
 
 type TransferStatus = "processing" | "success" | "failed" | "idle";
 
@@ -42,7 +40,13 @@ const useOperationsCalls = () => {
     );
 
     const calls = useMemo(() => {
-        if (!allowanceFetched || !routeFetched || !approveFetched) return [];
+        if (
+            (!compareCaseInsensitive(tokenIn, ETH_ADDRESS) &&
+                !allowanceFetched) ||
+            !routeFetched ||
+            !approveFetched
+        )
+            return [];
 
         if (approveNeeded) {
             return [approveData?.tx, routeData?.tx];
@@ -63,8 +67,11 @@ const useOperationsCalls = () => {
     };
 };
 
-const WalletConfirmStep = () => {
-    const { handleClose, setFlow, setStep } = useContext(CheckoutContext);
+const WalletConfirmStep = ({
+    setStep,
+}: {
+    setStep: (step: string) => void;
+}) => {
     const [status, setStatus] = useState<TransferStatus>("idle");
     const [isTimerFinished, setIsTimerFinished] = useState(false);
     const { address } = useAccount();
@@ -113,6 +120,7 @@ const WalletConfirmStep = () => {
 
     // Initiate the transaction when wallet is ready
     useEffect(() => {
+        console.log(called, ready);
         if (!called && ready) {
             sendTxns(onTxSend, onFail);
             setCalled(true);
@@ -125,7 +133,6 @@ const WalletConfirmStep = () => {
 
     const handleNewDeposit = () => {
         // Reset to initial step or handle new deposit logic
-        setFlow("mainFlow");
         setStep("selectToken");
     };
 
@@ -133,7 +140,6 @@ const WalletConfirmStep = () => {
         // Reset to previous step to retry the transfer
         // setStatus("processing");
         // setIsTimerFinished(false);
-        setFlow("mainFlow");
         setStep("quote");
     };
 
@@ -258,146 +264,91 @@ const WalletConfirmStep = () => {
     };
 
     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"}
+        <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"
                         >
-                            <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}
+                            <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"
                             >
-                                Close
-                            </Button>
-                            <Button visual={"solid"} onClick={handleRetry}>
-                                Retry Deposit
-                            </Button>
-                        </Box>
+                                {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>
                     )}
-                </BodyWrapper>
-            </Modal.Body>
-        </>
+                </Table.Body>
+            </Table.Root>
+
+            <QuoteParameters />
+
+            {status === "processing" ? (
+                <DepositProcessing currencyIcon={getChainIcon(chainIdOut)} />
+            ) : (
+                <TransactionDetailRow />
+            )}
+
+            {status === "success" && (
+                <Button
+                    visual={"solid"}
+                    onClick={handleNewDeposit}
+                    width="100%"
+                >
+                    New Deposit
+                </Button>
+            )}
+
+            {status === "failed" && (
+                <Button visual={"solid"} onClick={handleRetry} width="100%">
+                    Retry Deposit
+                </Button>
+            )}
+        </BodyWrapper>
     );
 };
 

package/src/components/steps/WalletFlow/WalletFlow.tsx

@@ -0,0 +1,116 @@
+import { useState, useContext } from "react";
+import { Box, Icon } from "@chakra-ui/react";
+import { ChevronLeft, X } from "lucide-react";
+import WalletTokenStep from "./WalletTokenStep";
+import WalletAmountStep from "./WalletAmountStep";
+import WalletQuoteStep from "./WalletQuoteStep";
+import WalletConfirmStep from "./WalletConfirmStep";
+import { CheckoutContext } from "@/components/Checkout";
+import Modal from "@/components/modal";
+import { IconButton } from "@/components/ui";
+import { HeaderWrapper, HeaderTitle } from "@/components/ui/styled";
+
+export enum WalletFlowStep {
+    SelectToken = "selectToken",
+    SelectAmount = "selectAmount",
+    Quote = "quote",
+    ConfirmTransfer = "confirmTransfer",
+}
+
+const walletSteps = [
+    WalletFlowStep.SelectToken,
+    WalletFlowStep.SelectAmount,
+    WalletFlowStep.Quote,
+    WalletFlowStep.ConfirmTransfer,
+];
+
+const WalletFlow = ({
+    initialStep = WalletFlowStep.SelectToken,
+    setFlow,
+}: {
+    initialStep?: WalletFlowStep;
+    setFlow?: (step: string) => void;
+}) => {
+    const [currentStep, setCurrentStep] = useState<WalletFlowStep>(initialStep);
+    const { handleClose } = useContext(CheckoutContext);
+
+    const handleSetStep = (step: WalletFlowStep | string) => {
+        setCurrentStep(step as WalletFlowStep);
+    };
+
+    const handleBackClick = () => {
+        const index = walletSteps.findIndex((step) => step === currentStep) - 1;
+        if (index >= 0) {
+            setCurrentStep(walletSteps[index]);
+        } else if (setFlow) {
+            setFlow("");
+        }
+    };
+
+    const currentStepComponent = (() => {
+        switch (currentStep) {
+            case WalletFlowStep.SelectToken:
+                return <WalletTokenStep setStep={handleSetStep} />;
+            case WalletFlowStep.SelectAmount:
+                return <WalletAmountStep setStep={handleSetStep} />;
+            case WalletFlowStep.Quote:
+                return <WalletQuoteStep setStep={handleSetStep} />;
+            case WalletFlowStep.ConfirmTransfer:
+                return <WalletConfirmStep setStep={handleSetStep} />;
+            default:
+                return <WalletTokenStep setStep={handleSetStep} />;
+        }
+    })();
+
+    return (
+        <>
+            <Modal.Header>
+                <HeaderWrapper>
+                    <IconButton
+                        minWidth={"16px"}
+                        minHeight={"16px"}
+                        maxWidth={"16px"}
+                        onClick={handleBackClick}
+                    >
+                        <Icon
+                            as={ChevronLeft}
+                            color="gray"
+                            width={"16px"}
+                            height={"16px"}
+                        />
+                    </IconButton>
+
+                    <Box
+                        display="flex"
+                        flexDirection="column"
+                        gap={"4px"}
+                        alignItems={"center"}
+                        width="100%"
+                    >
+                        <HeaderTitle>Wallet Deposit</HeaderTitle>
+                    </Box>
+
+                    {handleClose && (
+                        <IconButton
+                            onClick={handleClose}
+                            minWidth={"16px"}
+                            minHeight={"16px"}
+                            maxWidth={"16px"}
+                            marginLeft={"auto"}
+                        >
+                            <Icon
+                                as={X}
+                                color="gray"
+                                width={"16px"}
+                                height={"16px"}
+                            />
+                        </IconButton>
+                    )}
+                </HeaderWrapper>
+            </Modal.Header>
+            <Modal.Body>{currentStepComponent}</Modal.Body>
+        </>
+    );
+};
+
+export default WalletFlow;

package/src/components/steps/{QuoteStep.tsx → WalletFlow/WalletQuoteStep.tsx}

@@ -1,19 +1,13 @@
-import { useContext } from "react";
-import { Box, Icon, Skeleton, Flex } from "@chakra-ui/react";
-import { ChevronLeft, X } from "lucide-react";
+import { Skeleton, Flex } from "@chakra-ui/react";
 import { useChainId, useSwitchChain } from "wagmi";
-import Modal from "../modal";
-import { CheckoutContext } from "../Checkout";
-import { Button, IconButton, Input } from "../ui";
-import { HeaderWrapper, HeaderTitle, BodyWrapper } from "../ui/styled";
-import { TransactionDetailRow } from "../TransactionDetailRow";
+import { Button, Input } from "@/components/ui";
+import { BodyWrapper } from "@/components/ui/styled";
+import { TransactionDetailRow } from "@/components/TransactionDetailRow";
 import { useAppDetails, useRouteData } from "@/util/enso-hooks";
 import { useChainName } from "@/util/common";
-import QuoteParameters from "../QuoteParameters";
-
-const QuoteStep = () => {
-    const { handleClose, setStep } = useContext(CheckoutContext);
+import QuoteParameters from "@/components/QuoteParameters";
 
+const WalletQuoteStep = ({ setStep }: { setStep: (step: string) => void }) => {
     const { chainIdIn } = useAppDetails();
 
     const { routeLoading, usdAmountIn, routeData } = useRouteData();
@@ -24,48 +18,7 @@ const QuoteStep = () => {
     const wrongChain = walletChainId !== chainIdIn;
 
     return (
-        <>
-            <Modal.Header>
-                <HeaderWrapper>
-                    <IconButton
-                        minWidth={"16px"}
-                        minHeight={"16px"}
-                        maxWidth={"16px"}
-                        onClick={() => {
-                            setStep("selectAmount");
-                        }}
-                    >
-                        <Icon
-                            as={ChevronLeft}
-                            color="gray"
-                            width={"16px"}
-                            height={"16px"}
-                        />
-                    </IconButton>
-
-                    <Box display="flex" flexDirection="column" gap={"4px"}>
-                        <HeaderTitle>Deposit</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>
+        <BodyWrapper>
                     <Flex
                         flexDirection={"column"}
                         gap={"16px"}
@@ -113,10 +66,8 @@ const QuoteStep = () => {
                             {routeLoading ? "Loading quote" : "Continue"}
                         </Button>
                     )}
-                </BodyWrapper>
-            </Modal.Body>
-        </>
+        </BodyWrapper>
     );
 };
 
-export default QuoteStep;
+export default WalletQuoteStep;

package/src/components/steps/WalletFlow/WalletTokenStep.tsx

@@ -0,0 +1,75 @@
+import { Box, Skeleton } from "@chakra-ui/react";
+import { ListWrapper, BodyWrapper } from "@/components/ui/styled";
+import { useEffect } from "react";
+import { Button } from "@/components/ui";
+import { AssetCard } from "@/components/cards";
+import { useAppStore } from "@/store";
+import { useWalletBalance } from "@/enso-api/api";
+import { formatNumber, formatUSD, normalizeValue } from "@/util";
+
+const WalletAssetStep = ({ setStep }: { setStep: (step: string) => void }) => {
+    const setSelectedIntegration = useAppStore(
+        (state) => state.setSelectedIntegration,
+    );
+    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, isLoading } = useWalletBalance();
+
+    useEffect(() => {
+        setSelectedIntegration(null);
+    }, []);
+
+    return (
+        <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>
+    );
+};
+
+export default WalletAssetStep;

package/src/components/ui/index.tsx

@@ -108,9 +108,6 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
                 variant="ghost"
                 bg="transparent"
                 border="none"
-                _hover={{
-                    bg: "bg.subtle",
-                }}
                 _active={{
                     bg: "bg.emphasized",
                 }}