@ensofinance/checkout-widget 0.0.12 → 0.0.14

package/src/components/steps/ExchangeFlow.tsx

@@ -11,8 +11,8 @@ import {
 } from "@chakra-ui/react";
 import { ChevronLeft, X, ArrowDownUpIcon } from "lucide-react";
 import { useContext, useEffect, useMemo, useState, useCallback } from "react";
-import { IconButton, Button, Tab, Input, Tooltip } from "../ui";
-import { useAccount, useSignMessage, useChainId, useSwitchChain } from "wagmi";
+import { IconButton, Button, Tab, Input } from "../ui";
+import { useAccount, useSignMessage } from "wagmi";
 import { getUserOperationHash } from "viem/account-abstraction";
 import {
     BodyWrapper,
@@ -36,40 +36,46 @@ import {
     formatUSD,
     normalizeValue,
 } from "@/util";
-import {
-    useTokenFromListBySymbols,
-    getChainName,
-    precisionizeNumber,
-} from "@/util/common";
+import { useTokenFromListBySymbols, precisionizeNumber } from "@/util/common";
 import {
     EXCHANGE_MAX_LIMIT_GAP_USD,
     EXCHANGE_MIN_LIMIT,
 } from "@/util/constants";
-import { useAppDetails, useRouteData } from "@/util/enso-hooks";
+import {
+    useAppDetails,
+    useRouteData,
+    useSmartAccountBalances,
+} from "@/util/enso-hooks";
 import QuoteParameters from "../QuoteParameters";
 import { TransactionDetailRow } from "../TransactionDetailRow";
-// @ts-ignore
-import SuccessIcon from "../../assets/success.svg";
-// @ts-ignore
-import FailIcon from "../../assets/fail.svg";
 import { CircleTimer } from "../CircleTimer";
 import { ConfirmExchangeStep } from "../ExchangeConfirmSecurity";
 
+import SuccessIcon from "@/assets/success.svg";
+import FailIcon from "@/assets/fail.svg";
+import { SupportedExchanges } from "@/types";
+
 const ENTRY_POINT_ADDRESS: `0x${string}` =
     "0x0000000071727de22e5e9d8baf0edac6f37da032";
 
-// // Styled components
-// export const BodyWrapper = chakra("div", {
-//     base: {
-//         display: "flex",
-//         flexDirection: "column",
-//         width: "100%",
-//         justifyContent: "center",
-//         alignItems: "center",
-//         gap: "16px",
-//         paddingTop: "16px",
-//     },
-// });
+export const ExchangeToIntegrationType: Record<SupportedExchanges, string> = {
+    [SupportedExchanges.Binance]: "binanceInternationalDirect",
+    [SupportedExchanges.Kraken]: "krakenDirect",
+    [SupportedExchanges.Coinbase]: "coinbase",
+    [SupportedExchanges.Bybit]: "bybitDirect",
+};
+
+// Map Mesh broker types to icon URLs
+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",
+};
 
 // Types for Mesh Holdings API response
 interface CryptocurrencyPosition {
@@ -115,7 +121,7 @@ interface SupportedToken {
 interface MatchedToken extends SupportedToken {
     balance: number;
     marketValue: number;
-    holding: CryptocurrencyPosition;
+    holding?: CryptocurrencyPosition;
 }
 
 // const MESH_API_URL = "http://localhost:8787";
@@ -131,23 +137,30 @@ Withdrawal steps:
 7. Open transfer modal with amount and token
 */
 
-enum WithdrawalStep {
+export enum WithdrawalStep {
     CheckSessionKey,
-    GetHoldings,
-    SelectAmount,
-    GetUserOpSignature,
+    ChooseExchange,
+    ChooseExchangeAsset,
+    ChooseBalanceAsset,
+    ChooseAmount,
+    SignUserOp,
     InitiateWithdrawal,
     TrackUserOp,
 }
 const withdrawalSteps = [
+    WithdrawalStep.ChooseExchange,
     WithdrawalStep.CheckSessionKey,
-    WithdrawalStep.GetHoldings,
-    WithdrawalStep.SelectAmount,
-    WithdrawalStep.GetUserOpSignature,
+    WithdrawalStep.ChooseExchangeAsset,
+    WithdrawalStep.ChooseAmount,
+    WithdrawalStep.SignUserOp,
     WithdrawalStep.InitiateWithdrawal,
 ];
-
-const BINANCE_INTEGRATION_ID = "9226e5c2-ebc3-4fdd-94f6-ed52cdce1420";
+const balanceSteps = [
+    WithdrawalStep.ChooseBalanceAsset,
+    WithdrawalStep.ChooseAmount,
+    WithdrawalStep.SignUserOp,
+];
+// Integration details are fetched dynamically from Mesh API.
 
 // Mesh network IDs for EVM chains (from Mesh networks API)
 const MESH_NETWORK_IDS: { [chainId: number]: string } = {
@@ -171,20 +184,138 @@ const getNetworkId = (chainId: number): string => {
 
 const useHandleMeshAccessPayload = () => {
     const { setMeshAccessToken } = useAppStore();
-    const deviceKey = useDeviceKey();
-
-    return useCallback((accessTokenPayload: AccessTokenPayload) => {
-        setMeshAccessToken(accessTokenPayload); // Persist access token and session id for future reloads
-
-        sessionStorage.setItem(
-            deviceKey,
-            JSON.stringify({
-                accessToken: accessTokenPayload.accessToken,
-                sessionId: accessTokenPayload.content.sessionId,
-                timestamp: Date.now(),
-            }),
+    const deviceKey = useDeviceId();
+    const selectedIntegration = useAppStore((s) => s.selectedIntegration);
+
+    return useCallback(
+        (accessTokenPayload: AccessTokenPayload, sessionId: string) => {
+            setMeshAccessToken(accessTokenPayload); // Persist access token and session id for future reloads
+
+            debugger;
+            sessionStorage.setItem(
+                `${deviceKey}:${selectedIntegration?.type}`,
+                JSON.stringify({
+                    accessToken:
+                        accessTokenPayload.accountTokens[0].accessToken,
+                    sessionId,
+                    timestamp: Date.now(),
+                }),
+            );
+        },
+        [deviceKey, selectedIntegration?.type],
+    );
+};
+
+type MeshIntegration = {
+    id: string;
+    type: string; // brokerType
+    name: string;
+    networks?: {
+        id: string;
+        nativeSymbol?: string;
+        name?: string;
+        chainId?: string | number;
+    }[];
+};
+
+const ChooseExchangeStep = ({
+    setStep,
+}: {
+    setStep: (step: WithdrawalStep) => void;
+}) => {
+    const { chainIdOut } = useAppStore();
+    const [integrations, setIntegrations] = useState<MeshIntegration[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const setSelectedIntegration = useAppStore(
+        (state) => state.setSelectedIntegration,
+    );
+    const { enableExchange } = useContext(CheckoutContext);
+
+    useEffect(() => {
+        const fetchIntegrations = async () => {
+            try {
+                const res = await fetch(`${MESH_API_URL}/integrations`);
+                const data = await res.json();
+                const availableExchanges = enableExchange
+                    .map((e) => ExchangeToIntegrationType[e])
+                    .filter(Boolean);
+
+                // Filter integrations by current chain support
+                const filtered = data?.filter(
+                    (i) =>
+                        i.networks.some((n) => +n.chainId === chainIdOut) &&
+                        availableExchanges.includes(i.type),
+                );
+
+                setIntegrations(filtered);
+            } catch (e) {
+                console.error("Failed to fetch integrations", e);
+                setError("Failed to load exchanges");
+            } finally {
+                setLoading(false);
+            }
+        };
+        fetchIntegrations();
+    }, [chainIdOut]);
+
+    if (loading)
+        return (
+            <Center>
+                <Spinner m={5} />
+            </Center>
         );
-    }, []);
+    if (error)
+        return (
+            <BodyWrapper>
+                <Box p={5} color="red.500">
+                    {error}
+                </Box>
+            </BodyWrapper>
+        );
+
+    return (
+        <BodyWrapper>
+            <Box mb={4} width="100%" textAlign="left">
+                <HeaderTitle>Choose Exchange</HeaderTitle>
+            </Box>
+
+            {integrations?.length > 0 ? (
+                <ListWrapper>
+                    {integrations.map((integration) => (
+                        <AssetCard
+                            key={integration.id}
+                            // chainId={chainIdOut || 1}
+                            icon={EXCHANGE_ICON_BY_TYPE[integration.type]}
+                            title={integration.name}
+                            balance={""}
+                            usdBalance=""
+                            tag=""
+                            loading={false}
+                            selected={false}
+                            onClick={() => {
+                                setSelectedIntegration({
+                                    id: integration.id,
+                                    type: integration.type,
+                                    name: integration.name,
+                                });
+                                setStep(WithdrawalStep.CheckSessionKey);
+                            }}
+                        />
+                    ))}
+                </ListWrapper>
+            ) : (
+                <Box
+                    textAlign="center"
+                    fontSize={"sm"}
+                    color="fg.subtle"
+                    py={3}
+                >
+                    No exchanges available for specified target chain
+                </Box>
+            )}
+        </BodyWrapper>
+    );
 };
 
 const CheckSessionKeyStep = ({
@@ -192,26 +323,40 @@ const CheckSessionKeyStep = ({
 }: {
     setStep: (step: WithdrawalStep) => void;
 }) => {
-    const { chainIdOut, setMeshAccessToken, setSessionId } = useAppStore();
+    const { chainIdOut, setMeshAccessToken, setSessionId, setChainIdIn } =
+        useAppStore();
     const { address } = useAccount();
-    const deviceKey = useDeviceKey();
+    const deviceKey = useDeviceId();
     const [showConfirmation, setShowConfirmation] = useState(false);
+    const selectedIntegration = useAppStore((s) => s.selectedIntegration);
 
     const invalidChainId = chainIdOut && !MESH_NETWORKS.includes(chainIdOut);
     const handleMeshAccessPayload = useHandleMeshAccessPayload();
 
     useEffect(() => {
+        setChainIdIn(chainIdOut);
+    }, [chainIdOut]);
+
+    useEffect(() => {
+        if (!selectedIntegration) {
+            // ensure an exchange is selected
+            setStep(WithdrawalStep.ChooseExchange);
+            return;
+        }
         if (invalidChainId) return;
         // If connection is persisted, skip fetching a new link token
-        const saved = sessionStorage.getItem(deviceKey);
+        const saved = sessionStorage.getItem(
+            `${deviceKey}:${selectedIntegration.type}`,
+        );
         // On load: check for persisted connection and hydrate state
+        debugger;
         if (saved) {
             try {
                 const parsed = JSON.parse(saved);
                 if (parsed?.accessToken && parsed?.sessionId) {
                     setMeshAccessToken(parsed.accessToken);
                     setSessionId(parsed.sessionId);
-                    setStep(WithdrawalStep.GetHoldings);
+                    setStep(WithdrawalStep.ChooseExchangeAsset);
                     return;
                 }
             } catch (e) {
@@ -222,20 +367,24 @@ const CheckSessionKeyStep = ({
 
         // Show confirmation instead of auto-connecting
         setShowConfirmation(true);
-    }, [deviceKey, invalidChainId]);
+    }, [deviceKey, invalidChainId, selectedIntegration]);
 
     const handleConfirmAuth = () => {
-        fetch(`${MESH_API_URL}/linktoken`, {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
+        const brokerType = selectedIntegration?.type;
+        fetch(
+            `${MESH_API_URL}/linktoken?brokerType=${encodeURIComponent(brokerType)}`,
+            {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                    userId: deviceKey,
+                    integrationId: selectedIntegration?.id,
+                    address,
+                }),
             },
-            body: JSON.stringify({
-                userId: deviceKey,
-                integrationId: BINANCE_INTEGRATION_ID,
-                address,
-            }),
-        })
+        )
             .then((response) => response.json())
             .then((response) => {
                 setSessionId(response.content.sessionId);
@@ -245,8 +394,11 @@ const CheckSessionKeyStep = ({
                     onIntegrationConnected: (payload) => {
                         console.log("onIntegrationConnected", payload);
                         meshLink.closeLink();
-                        setStep(WithdrawalStep.GetHoldings);
-                        handleMeshAccessPayload(payload.accessToken); // Persist access token and session id for future reloads
+                        setStep(WithdrawalStep.ChooseExchangeAsset);
+                        handleMeshAccessPayload(
+                            payload.accessToken,
+                            response.content.sessionId,
+                        ); // Persist access token and session id for future reloads
                     },
                     onExit: (error) => {
                         console.log("onExit", error);
@@ -287,21 +439,32 @@ const CheckSessionKeyStep = ({
     }
 
     if (showConfirmation) {
-        return <ConfirmExchangeStep onConfirm={handleConfirmAuth} />;
+        return (
+            <ConfirmExchangeStep
+                onConfirm={handleConfirmAuth}
+                exchangeName={selectedIntegration?.name}
+                exchangeIcon={
+                    selectedIntegration?.type
+                        ? EXCHANGE_ICON_BY_TYPE[selectedIntegration.type]
+                        : undefined
+                }
+            />
+        );
     }
 
     return <Spinner m={5} />;
 };
 
+const DEVICE_ID_KEY = "meshDeviceId";
 // Generate a unique device ID to use as user id for Mesh
-const useDeviceKey = () => {
+const useDeviceId = () => {
     return useMemo(() => {
-        const deviceIdKey = "meshDeviceId";
-        let deviceId = localStorage.getItem(deviceIdKey);
+        let deviceId = localStorage.getItem(DEVICE_ID_KEY);
+        console.log(deviceId);
 
         if (!deviceId) {
             deviceId = `device_${Date.now()}_${Math.random().toString(36).substring(2, 15)}`;
-            localStorage.setItem(deviceIdKey, deviceId);
+            localStorage.setItem(DEVICE_ID_KEY, deviceId);
         }
 
         return deviceId;
@@ -335,12 +498,14 @@ const ChooseAssetStep = ({
         setTokenIn,
         chainIdIn,
     } = useAppStore();
+    const deviceKey = useDeviceId();
+
+    const selectedIntegration = useAppStore((s) => s.selectedIntegration);
 
-    const deviceKey = useDeviceKey();
     useEffect(() => {
         const fetchData = async () => {
             try {
-                // Fetch holdings from Binance
+                // Fetch holdings for the selected exchange
                 const holdingsResponse = await fetch(
                     `${MESH_API_URL}/holdings`,
                     {
@@ -352,7 +517,7 @@ const ChooseAssetStep = ({
                         body: JSON.stringify({
                             authToken:
                                 meshAccessToken.accountTokens[0].accessToken,
-                            brokerType: "binanceInternationalDirect",
+                            brokerType: selectedIntegration?.type,
                         }),
                     },
                 );
@@ -370,7 +535,9 @@ const ChooseAssetStep = ({
                         setStep(WithdrawalStep.CheckSessionKey);
                         setMeshAccessToken(null);
                         setSessionId(null);
-                        sessionStorage.removeItem(deviceKey);
+                        sessionStorage.removeItem(
+                            `${deviceKey}:${selectedIntegration?.type}`,
+                        );
                     }
                     throw new Error(
                         holdingsData.message || "Failed to fetch holdings",
@@ -379,10 +546,9 @@ const ChooseAssetStep = ({
 
                 // Fetch supported tokens for current chain
                 const tokensResponse = await fetch(
-                    `${MESH_API_URL}/tokens?chainId=${chainIdIn}`,
+                    `${MESH_API_URL}/tokens?chainId=${chainIdIn}&brokerType=${encodeURIComponent(selectedIntegration?.type || "")}`,
                 );
                 const tokensData = await tokensResponse.json();
-                console.log("Tokens data:", tokensData);
 
                 if (
                     tokensData.status === "success" &&
@@ -433,18 +599,16 @@ const ChooseAssetStep = ({
             }
         };
 
-        if (meshAccessToken && sessionId && chainIdOut) {
+        if (meshAccessToken && sessionId && chainIdOut && selectedIntegration) {
             fetchData();
         }
-    }, [address, chainIdOut, meshAccessToken, sessionId]);
+    }, [address, chainIdOut, meshAccessToken, sessionId, selectedIntegration]);
 
     const geckoTokens = useTokenFromListBySymbols(
         matchedTokens.map((token) => token.symbol),
         chainIdIn,
     );
 
-    console.log("geckoTokens", geckoTokens);
-
     if (loading)
         return (
             <Center>
@@ -500,7 +664,7 @@ const ChooseAssetStep = ({
                 <Button
                     disabled={!selectedTokenSymbol}
                     onClick={() => {
-                        setStep(WithdrawalStep.SelectAmount);
+                        setStep(WithdrawalStep.ChooseAmount);
                     }}
                 >
                     Continue
@@ -510,6 +674,105 @@ const ChooseAssetStep = ({
     );
 };
 
+const ChooseDelayedBalance = ({
+    setStep,
+    onTokenSelect,
+}: {
+    setStep: (step: WithdrawalStep) => void;
+    onTokenSelect: (token: MatchedToken) => void;
+}) => {
+    const { chainIdIn, setTokenIn, setChainIdIn } = useAppStore();
+    const [selectedToken, setSelectedToken] = useState<string | null>(null);
+
+    // Get smart account balances
+    const { holdingsList, total, isLoading } = useSmartAccountBalances(1);
+    const setSelectedIntegration = useAppStore(
+        (state) => state.setSelectedIntegration,
+    );
+
+    useEffect(() => {
+        setSelectedIntegration({
+            type: "delayed",
+            name: "Smart account",
+            id: "",
+        });
+    }, []);
+
+    if (isLoading) {
+        return (
+            <Center>
+                <Spinner m={5} />
+            </Center>
+        );
+    }
+
+    return (
+        <BodyWrapper>
+            <Box mb={4} width="100%" textAlign="left">
+                <HeaderDescription>
+                    Smart Account Balance: {formatUSD(total)}
+                </HeaderDescription>
+            </Box>
+            <Box overflowY={"scroll"} maxH={"400px"}>
+                <ListWrapper>
+                    {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={
+                                selectedToken === asset.token &&
+                                chainIdIn === asset.chainId
+                            }
+                            onClick={() => {
+                                setSelectedToken(asset.token);
+                                setTokenIn(asset.token);
+                                setChainIdIn(asset.chainId);
+                                // Mock MatchedToken from balance data
+                                const mockMatchedToken: MatchedToken = {
+                                    symbol: asset.symbol,
+                                    name: asset.name,
+                                    networkId: asset.chainId.toString(),
+                                    chainId: asset.chainId,
+                                    integrationNetworks: [],
+                                    balance: Number(
+                                        normalizeValue(
+                                            asset.amount,
+                                            asset.decimals,
+                                        ),
+                                    ),
+                                    marketValue: asset.total,
+                                };
+                                onTokenSelect(mockMatchedToken);
+                            }}
+                        />
+                    ))}
+                </ListWrapper>
+            </Box>
+            {holdingsList?.length === 0 && (
+                <Box textAlign="center" color="fg.subtle" py={8}>
+                    No tokens found in smart account
+                </Box>
+            )}
+            <Button
+                disabled={!selectedToken}
+                onClick={() => {
+                    setStep(WithdrawalStep.ChooseAmount);
+                }}
+            >
+                Continue
+            </Button>
+        </BodyWrapper>
+    );
+};
+
 const ChooseAmountStep = ({
     setStep,
     selectedToken,
@@ -521,7 +784,7 @@ const ChooseAmountStep = ({
     const [inputMode, setInputMode] = useState<"usd" | "token">("usd");
     const [usdValue, setUsdValue] = useState<string>("");
     const { setAmountIn } = useAppStore();
-    const { tokenInData, tokenIn } = useAppDetails();
+    const { tokenInData } = useAppDetails();
     const isStable = selectedToken?.symbol.toLowerCase().includes("USD");
     const roundingPrecision = isStable ? 2 : 6;
 
@@ -770,7 +1033,7 @@ const ChooseAmountStep = ({
                 onClick={() =>
                     isAmountInvalid || !amount
                         ? undefined
-                        : setStep(WithdrawalStep.GetUserOpSignature)
+                        : setStep(WithdrawalStep.SignUserOp)
                 }
                 disabled={isAmountInvalid || !amount}
             >
@@ -783,7 +1046,9 @@ const ChooseAmountStep = ({
 const SignUserOpStep = ({
     setStep,
     setUserOp,
+    nextStep,
 }: {
+    nextStep: WithdrawalStep;
     setStep: (step: WithdrawalStep) => void;
     setUserOp: (userOp: any) => void;
 }) => {
@@ -820,8 +1085,6 @@ const SignUserOpStep = ({
                 chainId: chainIdIn,
             });
 
-            console.log("Signing userOpHash:", userOpHash);
-
             // Sign the userOperation hash directly
             const signature = await signMessageAsync({
                 account: address as `0x${string}`,
@@ -837,9 +1100,7 @@ const SignUserOpStep = ({
             console.log("signedUserOp", JSON.stringify(signedUserOp));
 
             setUserOp(signedUserOp);
-            if (sessionStorage.getItem("sendUserOp"))
-                setStep(WithdrawalStep.TrackUserOp);
-            else setStep(WithdrawalStep.InitiateWithdrawal);
+            setStep(nextStep);
         } catch (error) {
             console.error("Failed to sign userOperation:", error);
         } finally {
@@ -902,10 +1163,12 @@ const InitiateWithdrawalStep = ({
     const { meshAccessToken, amountIn, chainIdOut } = useAppStore();
     const { address } = useAccount();
     const { tokenInData } = useAppDetails();
+    const sessionId = useAppStore((state) => state.sessionId);
     const [isLoading, setIsLoading] = useState(true);
+    const selectedIntegration = useAppStore((s) => s.selectedIntegration);
 
     const handleMeshAccessPayload = useHandleMeshAccessPayload();
-    const deviceKey = useDeviceKey();
+    const deviceKey = useDeviceId();
 
     useEffect(() => {
         if (!selectedToken || !userOp || !meshAccessToken) {
@@ -933,7 +1196,7 @@ const InitiateWithdrawalStep = ({
                 const meshData = {
                     restrictMultipleAccounts: true,
                     userId: deviceKey,
-                    integrationId: BINANCE_INTEGRATION_ID,
+                    integrationId: selectedIntegration?.id,
                     transferOptions: {
                         toAddresses,
                     },
@@ -941,31 +1204,35 @@ const InitiateWithdrawalStep = ({
 
                 console.log("link request body", meshData);
 
-                const response = await fetch(`${MESH_API_URL}/linktoken`, {
-                    method: "POST",
-                    headers: {
-                        "Content-Type": "application/json",
-                    },
-                    body: JSON.stringify({
-                        restrictMultipleAccounts: true,
-                        userId: deviceKey,
-                        integrationId: BINANCE_INTEGRATION_ID,
-                        transferOptions: {
-                            toAddresses,
+                const response = await fetch(
+                    `${MESH_API_URL}/linktoken?brokerType=${encodeURIComponent(selectedIntegration?.type || "")}`,
+                    {
+                        method: "POST",
+                        headers: {
+                            "Content-Type": "application/json",
                         },
-                    }),
-                });
+                        body: JSON.stringify({
+                            restrictMultipleAccounts: true,
+                            userId: deviceKey,
+                            integrationId: selectedIntegration?.id,
+                            transferOptions: {
+                                toAddresses,
+                            },
+                        }),
+                    },
+                );
 
                 const data = await response.json();
                 console.log("Link token response:", data);
 
+                // @ts-ignore
                 const accessTokens: IntegrationAccessToken[] =
                     meshAccessToken.accountTokens.map((token) => ({
                         ...token,
                         accountId: token.account.accountId,
                         accountName: token.account.accountName,
-                        brokerName: "Binance",
-                        brokerType: "binanceInternationalDirect",
+                        brokerName: selectedIntegration?.name,
+                        brokerType: selectedIntegration?.type,
                     }));
 
                 console.log("accessTokens", accessTokens);
@@ -974,7 +1241,7 @@ const InitiateWithdrawalStep = ({
                     clientId: address,
                     accessTokens,
                     onIntegrationConnected: (payload) => {
-                        handleMeshAccessPayload(payload.accessToken); // Persist access token and session id for future reloads
+                        handleMeshAccessPayload(payload.accessToken, sessionId); // Persist access token and session id for future reloads
                         console.log("Integration connected", payload);
                     },
                     onTransferFinished: (transferData) => {
@@ -984,7 +1251,7 @@ const InitiateWithdrawalStep = ({
                     onExit: (error) => {
                         console.log("Mesh link exited:", error);
                         setIsLoading(false);
-                        setStep(WithdrawalStep.GetHoldings);
+                        setStep(WithdrawalStep.ChooseExchangeAsset);
                     },
                     onEvent: (ev) => {
                         console.log("Mesh event:", ev);
@@ -1325,54 +1592,64 @@ const TrackUserOpStep = ({
     );
 };
 
-const ExchangeFlow = () => {
-    const { handleClose, setFlow, setStep } = useContext(CheckoutContext);
-    const [currentStep, setCurrentStep] = useState(
-        WithdrawalStep.CheckSessionKey,
-    );
+const ExchangeFlow = ({
+    setFlow,
+    initialStep = WithdrawalStep.ChooseExchange,
+}: {
+    setFlow: (string) => void;
+    initialStep?: WithdrawalStep;
+}) => {
+    const { handleClose } = useContext(CheckoutContext);
+    const [currentStep, setCurrentStep] = useState(initialStep);
     const [selectedToken, setSelectedToken] = useState<MatchedToken | null>(
         null,
     );
     const [userOp, setUserOp] = useState<any | null>(null);
-    const { chainIdOut } = useAppStore();
-    const setIsCheckout = useAppStore((state) => state.setIsCheckout);
-    const setChainIdIn = useAppStore((state) => state.setChainIdIn);
-    // const walletChainId = useChainId();
-    // const { switchChain } = useSwitchChain();
-    //
-    // const wrongChain = walletChainId !== chainIdOut;
-
-    const handleTokenSelect = (token: MatchedToken) => {
-        setSelectedToken(token);
-        console.log("Selected token:", token);
-    };
+    const setSelectedIntegration = useAppStore(
+        (state) => state.setSelectedIntegration,
+    );
+    const selectedIntegration = useAppStore((s) => s.selectedIntegration);
 
     useEffect(() => {
-        setChainIdIn(chainIdOut);
-        setIsCheckout(true);
-    }, [chainIdOut]);
+        return () => setSelectedIntegration(null);
+    }, []);
 
     const currentStepComponent = (() => {
         switch (currentStep) {
+            case WithdrawalStep.ChooseExchange:
+                return <ChooseExchangeStep setStep={setCurrentStep} />;
             case WithdrawalStep.CheckSessionKey:
                 return <CheckSessionKeyStep setStep={setCurrentStep} />;
-            case WithdrawalStep.GetHoldings:
+            case WithdrawalStep.ChooseExchangeAsset:
                 return (
                     <ChooseAssetStep
                         setStep={setCurrentStep}
-                        onTokenSelect={handleTokenSelect}
+                        onTokenSelect={setSelectedToken}
                     />
                 );
-            case WithdrawalStep.SelectAmount:
+            case WithdrawalStep.ChooseBalanceAsset:
+                return (
+                    <ChooseDelayedBalance
+                        setStep={setCurrentStep}
+                        onTokenSelect={setSelectedToken}
+                    />
+                );
+            case WithdrawalStep.ChooseAmount:
                 return (
                     <ChooseAmountStep
                         setStep={setCurrentStep}
                         selectedToken={selectedToken}
                     />
                 );
-            case WithdrawalStep.GetUserOpSignature:
+            case WithdrawalStep.SignUserOp:
                 return (
                     <SignUserOpStep
+                        nextStep={
+                            // skip withdrawal if use existing balance
+                            selectedToken.holding
+                                ? WithdrawalStep.InitiateWithdrawal
+                                : WithdrawalStep.TrackUserOp
+                        }
                         setStep={setCurrentStep}
                         setUserOp={setUserOp}
                     />
@@ -1408,14 +1685,14 @@ const ExchangeFlow = () => {
                         maxWidth={"16px"}
                         onClick={() => {
                             const index =
-                                withdrawalSteps.findIndex(
-                                    (step) => step === currentStep,
-                                ) - 1;
+                                (selectedIntegration?.type === "delayed"
+                                    ? balanceSteps
+                                    : withdrawalSteps
+                                ).findIndex((step) => step === currentStep) - 1;
                             if (index > 0) {
                                 setCurrentStep(withdrawalSteps[index]);
                             } else {
                                 setFlow("");
-                                setStep("");
                             }
                         }}
                     >
@@ -1434,7 +1711,9 @@ const ExchangeFlow = () => {
                         alignItems={"center"}
                         width="100%"
                     >
-                        <HeaderTitle>Deposit from Binance</HeaderTitle>
+                        <HeaderTitle>
+                            Deposit from {selectedIntegration?.name}
+                        </HeaderTitle>
                     </Box>
 
                     {handleClose && (