@ensofinance/checkout-widget 0.0.12 → 0.0.13

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,73 @@
+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 setIsCheckout = useAppStore((state) => state.setActiveExchange);
+    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 (
+        <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/enso-api/api.ts

@@ -65,6 +65,54 @@ export const useWalletBalance = () => {
     return { holdingsList, total, isLoading };
 };
 
+export const useSmartAccountBalance = (smartAccountAddress?: Address) => {
+    const config = useConfig();
+    const ensoApiToken = useAppStore((state) => state.ensoApiToken);
+
+    const supportedChainIds = useMemo(
+        () => new Set(config.chains.map((chain) => chain.id)),
+        [config.chains],
+    );
+
+    const { data, isLoading } = useWalletControllerWalletBalances(
+        {
+            eoaAddress: smartAccountAddress,
+            // @ts-ignore
+            chainId: "all",
+        },
+        {
+            query: {
+                enabled: !!smartAccountAddress && !!ensoApiToken,
+            },
+        },
+    );
+
+    const { holdingsList, total } = useMemo(() => {
+        if (!data?.length) return { holdingsList: [], total: 0 };
+
+        const holdingsList = data
+            ?.map((balanace) => ({
+                ...balanace,
+                total:
+                    +normalizeValue(balanace.amount, balanace.decimals) *
+                    +balanace.price,
+            }))
+            .filter(
+                (balance) =>
+                    balance.total > 1 &&
+                    balance.total < 10000 &&
+                    supportedChainIds.has(balance.chainId),
+            )
+            .sort((a, b) => b.total - a.total);
+
+        const total = holdingsList?.reduce((acc, { total }) => acc + total, 0);
+
+        return { holdingsList, total };
+    }, [data, supportedChainIds]);
+
+    return { holdingsList, total, isLoading };
+};
+
 const mapTokenData = (tokenData: any): Token => ({
     ...tokenData,
     logoURI: tokenData?.logosUri?.[0],

package/src/store.ts

@@ -1,10 +1,11 @@
 import { create } from "zustand";
-import { DEFAULT_SLIPPAGE } from "./util/constants";
 import { AccessTokenPayload } from "@meshconnect/web-link-sdk";
+import { DEFAULT_SLIPPAGE } from "./util/constants";
 
 type Store = {
-    isCheckout: boolean;
-    setIsCheckout: (isCheckout: boolean) => void;
+    // Exchange flow
+    activeExchange: string;
+    setActiveExchange: (activeExchange: string) => void;
 
     ensoApiToken: string;
     setEnsoApiToken: (ensoApiToken: string) => void;
@@ -35,8 +36,8 @@ type Store = {
 };
 
 export const useAppStore = create<Store>((set) => ({
-    isCheckout: false,
-    setIsCheckout: (isCheckout: boolean) => set({ isCheckout }),
+    activeExchange: "",
+    setActiveExchange: (activeExchange: string) => set({ activeExchange }),
 
     ensoApiToken: "",
     setEnsoApiToken: (ensoApiToken: string) => set({ ensoApiToken }),

package/src/util/common.tsx

@@ -310,7 +310,8 @@ export const useEtherscanUrl = (
     if (address) return `${chainPrefix}${type}/${address}`;
 };
 
-export const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
+export const capitalize = (s: string) =>
+    s.charAt(0)?.toUpperCase() + s.slice(1);
 
 export const getChainName = (chainId: SupportedChainId) => {
     const geckoName = GECKO_CHAIN_NAMES[chainId];

package/src/util/enso-hooks.tsx

@@ -1,13 +1,75 @@
-import { useAccount, useWalletClient } from "wagmi";
+import { useAccount, useWalletClient, useReadContract } from "wagmi";
 import { useCapabilities, useSendCalls } from "wagmi/experimental";
-import { Address } from "viem";
+import { Address, parseAbiItem } from "viem";
 import { useCallback, useMemo } from "react";
-import { useEnsoToken, useEnsoPrice, useEnsoData } from "@/enso-api/api";
+import {
+    useEnsoToken,
+    useEnsoPrice,
+    useEnsoData,
+    useSmartAccountBalance,
+} from "@/enso-api/api";
 import { getWalletDisplayName, getWalletIcon } from "@/util/wallet";
 import { formatUSD, normalizeValue } from "@/util";
 import { useAppStore } from "@/store";
 import { VITALIK_ADDRESS } from "./constants";
 
+export function getERC4337CloneFactory(chainId: ChainIds): AddressArg {
+    return "0x1a59347d28f64091079fa04a2cbd03da63dff154";
+}
+
+const GET_SMART_ADDRESS = parseAbiItem(
+    "function getAddress(address) external view returns (address)",
+);
+
+export const useSmartAccountAddress = (
+    ownerAddress?: Address,
+    chainId?: number,
+) => {
+    const factoryAddress = getERC4337CloneFactory(chainId);
+
+    const {
+        data: smartAccountAddress,
+        isLoading,
+        error,
+    } = useReadContract({
+        address: factoryAddress as Address,
+        abi: [GET_SMART_ADDRESS],
+        functionName: "getAddress",
+        args: ownerAddress ? [ownerAddress] : undefined,
+        chainId,
+        query: {
+            enabled: !!(factoryAddress && ownerAddress && chainId),
+        },
+    });
+
+    return {
+        smartAccountAddress: smartAccountAddress as Address | undefined,
+        isLoading,
+    };
+};
+
+export const useSmartAccountBalances = (chainId: number = 1) => {
+    const { address } = useAccount();
+
+    // Get smart account address for the given chain
+    const { smartAccountAddress, isLoading: isLoadingSmartAccount } =
+        useSmartAccountAddress(address, chainId);
+
+    // Get balances from smart account
+    const {
+        holdingsList,
+        total,
+        isLoading: isLoadingBalances,
+    } = useSmartAccountBalance(smartAccountAddress);
+
+    return {
+        smartAccountAddress,
+        holdingsList,
+        total,
+        isLoading: isLoadingSmartAccount || isLoadingBalances,
+    };
+};
+
 export const useAppDetails = () => {
     const { address = VITALIK_ADDRESS } = useAccount();
     const amountIn = useAppStore((state) => state.amountIn);
@@ -16,7 +78,7 @@ export const useAppDetails = () => {
     const slippage = useAppStore((state) => state.slippage);
     const chainIdIn = useAppStore((state) => state.chainIdIn);
     const chainIdOut = useAppStore((state) => state.chainIdOut);
-    const isCheckout = useAppStore((state) => state.isCheckout);
+    const isCheckout = useAppStore((state) => state.activeExchange);
 
     const {
         data: [tokenInData],
@@ -59,7 +121,7 @@ export const useSendTxns = ({
     // const useFallback = !atomicOkay; // one-line policy; tweak to taste
     const wallet = useWalletClient();
 
-    console.log(caps, atomicOkay);
+    console.log(caps, atomicOkay, wallet.data);
 
     const sendTxns = useCallback(
         async (

package/src/util/wallet.tsx

@@ -1,25 +1,11 @@
-import {
-    ReactElement,
-    ReactNode,
-    useCallback,
-    useEffect,
-    useState,
-} from "react";
-import {
-    useAccount,
-    useBalance,
-    useReadContract,
-    useSendTransaction,
-    UseSimulateContractParameters,
-} from "wagmi";
+import { ReactElement, useCallback, useEffect, useState } from "react";
+import { useAccount, useBalance, useReadContract } from "wagmi";
 import { Address, isAddress, erc20Abi } from "viem";
 import { WalletIcon } from "lucide-react";
 import { useQueryClient } from "@tanstack/react-query";
-import { RouteData } from "@ensofinance/sdk";
 import { usePriorityChainId } from "./common";
 import { ETH_ADDRESS, SupportedChainId } from "@/util/constants";
 import { compareCaseInsensitive } from "@/util/index";
-import { toaster } from "@/components/ui/toaster";
 
 import metamaskIcon from "@/assets/metamask.png";
 import rabbyIcon from "@/assets/rabby.png";
@@ -139,40 +125,6 @@ export const useAllowance = (token: Address, spender: Address) => {
     };
 };
 
-export const useExtendedSendTransaction = ({
-    title,
-    args,
-    onSuccess,
-    crosschain,
-}: {
-    title: string;
-    args: UseSimulateContractParameters;
-    onSuccess?: (hash: string) => void;
-    crosschain?: boolean;
-}) => {
-    const sendTransaction = useSendTransaction();
-
-    const send = useCallback(() => {
-        sendTransaction.sendTransaction(args, {
-            onError: (error) => {
-                toaster.create({
-                    title: "Error",
-                    // @ts-ignore
-                    description: error?.cause?.shortMessage || error.message,
-                    type: "error",
-                });
-                console.error(error);
-            },
-            onSuccess,
-        });
-    }, [sendTransaction, args, onSuccess]);
-
-    return {
-        ...sendTransaction,
-        send,
-    };
-};
-
 export const useIsApproveNeeded = (
     tokenIn: Address,
     target: Address = "0xF75584eF6673aD213a685a1B58Cc0330B8eA22Cf",
@@ -193,25 +145,6 @@ export const useIsApproveNeeded = (
     };
 };
 
-export const useSendEnsoTransaction = ({
-    args,
-    title,
-    crosschain,
-    onSuccess,
-}: {
-    args: RouteData["tx"];
-    title: string;
-    crosschain?: boolean;
-    onSuccess?: (hash: string) => void;
-}) => {
-    return useExtendedSendTransaction({
-        title,
-        args,
-        crosschain,
-        onSuccess,
-    });
-};
-
 /**
  * Get the appropriate wallet icon based on the connector name
  * @param connectorName - The name of the wallet connector