@ensofinance/checkout-widget 0.0.13 → 0.0.14

package/src/components/steps/ExchangeFlow.tsx

@@ -53,31 +53,29 @@ 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";
 
-export enum ExchangeType {
-    binance = "binance",
-    delayed = "delayed",
-}
-export const ExchangeNames = {
-    [ExchangeType.binance]: "Binance",
-    [ExchangeType.delayed]: "Smart Account",
+export const ExchangeToIntegrationType: Record<SupportedExchanges, string> = {
+    [SupportedExchanges.Binance]: "binanceInternationalDirect",
+    [SupportedExchanges.Kraken]: "krakenDirect",
+    [SupportedExchanges.Coinbase]: "coinbase",
+    [SupportedExchanges.Bybit]: "bybitDirect",
 };
 
-// // Styled components
-// export const BodyWrapper = chakra("div", {
-//     base: {
-//         display: "flex",
-//         flexDirection: "column",
-//         width: "100%",
-//         justifyContent: "center",
-//         alignItems: "center",
-//         gap: "16px",
-//         paddingTop: "16px",
-//     },
-// });
+// 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 {
@@ -141,6 +139,7 @@ Withdrawal steps:
 
 export enum WithdrawalStep {
     CheckSessionKey,
+    ChooseExchange,
     ChooseExchangeAsset,
     ChooseBalanceAsset,
     ChooseAmount,
@@ -149,6 +148,7 @@ export enum WithdrawalStep {
     TrackUserOp,
 }
 const withdrawalSteps = [
+    WithdrawalStep.ChooseExchange,
     WithdrawalStep.CheckSessionKey,
     WithdrawalStep.ChooseExchangeAsset,
     WithdrawalStep.ChooseAmount,
@@ -160,7 +160,7 @@ const balanceSteps = [
     WithdrawalStep.ChooseAmount,
     WithdrawalStep.SignUserOp,
 ];
-const BINANCE_INTEGRATION_ID = "9226e5c2-ebc3-4fdd-94f6-ed52cdce1420";
+// 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 } = {
@@ -184,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 = ({
@@ -208,26 +326,30 @@ const CheckSessionKeyStep = ({
     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();
-    const setActiveExchange = useAppStore((state) => state.setActiveExchange);
-
-    useEffect(() => {
-        setActiveExchange("binance");
-    }, []);
 
     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);
@@ -245,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);
@@ -269,7 +395,10 @@ const CheckSessionKeyStep = ({
                         console.log("onIntegrationConnected", payload);
                         meshLink.closeLink();
                         setStep(WithdrawalStep.ChooseExchangeAsset);
-                        handleMeshAccessPayload(payload.accessToken); // Persist access token and session id for future reloads
+                        handleMeshAccessPayload(
+                            payload.accessToken,
+                            response.content.sessionId,
+                        ); // Persist access token and session id for future reloads
                     },
                     onExit: (error) => {
                         console.log("onExit", error);
@@ -310,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;
@@ -358,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`,
                     {
@@ -375,7 +517,7 @@ const ChooseAssetStep = ({
                         body: JSON.stringify({
                             authToken:
                                 meshAccessToken.accountTokens[0].accessToken,
-                            brokerType: "binanceInternationalDirect",
+                            brokerType: selectedIntegration?.type,
                         }),
                     },
                 );
@@ -393,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",
@@ -402,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" &&
@@ -456,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>
@@ -545,10 +686,16 @@ const ChooseDelayedBalance = ({
 
     // Get smart account balances
     const { holdingsList, total, isLoading } = useSmartAccountBalances(1);
-    const setActiveExchange = useAppStore((state) => state.setActiveExchange);
+    const setSelectedIntegration = useAppStore(
+        (state) => state.setSelectedIntegration,
+    );
 
     useEffect(() => {
-        setActiveExchange("delayed");
+        setSelectedIntegration({
+            type: "delayed",
+            name: "Smart account",
+            id: "",
+        });
     }, []);
 
     if (isLoading) {
@@ -637,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;
 
@@ -1016,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) {
@@ -1047,7 +1196,7 @@ const InitiateWithdrawalStep = ({
                 const meshData = {
                     restrictMultipleAccounts: true,
                     userId: deviceKey,
-                    integrationId: BINANCE_INTEGRATION_ID,
+                    integrationId: selectedIntegration?.id,
                     transferOptions: {
                         toAddresses,
                     },
@@ -1055,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);
@@ -1088,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) => {
@@ -1441,7 +1594,7 @@ const TrackUserOpStep = ({
 
 const ExchangeFlow = ({
     setFlow,
-    initialStep = WithdrawalStep.CheckSessionKey,
+    initialStep = WithdrawalStep.ChooseExchange,
 }: {
     setFlow: (string) => void;
     initialStep?: WithdrawalStep;
@@ -1452,15 +1605,19 @@ const ExchangeFlow = ({
         null,
     );
     const [userOp, setUserOp] = useState<any | null>(null);
-    const setActiveExchange = useAppStore((state) => state.setActiveExchange);
-    const activeExchange = useAppStore((state) => state.activeExchange);
+    const setSelectedIntegration = useAppStore(
+        (state) => state.setSelectedIntegration,
+    );
+    const selectedIntegration = useAppStore((s) => s.selectedIntegration);
 
     useEffect(() => {
-        return () => setActiveExchange("");
+        return () => setSelectedIntegration(null);
     }, []);
 
     const currentStepComponent = (() => {
         switch (currentStep) {
+            case WithdrawalStep.ChooseExchange:
+                return <ChooseExchangeStep setStep={setCurrentStep} />;
             case WithdrawalStep.CheckSessionKey:
                 return <CheckSessionKeyStep setStep={setCurrentStep} />;
             case WithdrawalStep.ChooseExchangeAsset:
@@ -1528,9 +1685,10 @@ 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 {
@@ -1554,7 +1712,7 @@ const ExchangeFlow = ({
                         width="100%"
                     >
                         <HeaderTitle>
-                            Deposit from {ExchangeNames[activeExchange]}
+                            Deposit from {selectedIntegration?.name}
                         </HeaderTitle>
                     </Box>
 

package/src/components/steps/FlowSelector.tsx

@@ -17,18 +17,20 @@ import { CheckoutContext } from "../Checkout";
 import { WalletCard, OptionCard } from "../cards";
 import { WalletStatus } from "../cards/WalletCard";
 import { useWalletIcon, useSmartAccountBalances } from "@/util/enso-hooks";
-import ExchangeFlow, { WithdrawalStep } from "@/components/steps/ExchangeFlow";
+import ExchangeFlow, {
+    WithdrawalStep,
+    EXCHANGE_ICON_BY_TYPE,
+    ExchangeToIntegrationType,
+} from "@/components/steps/ExchangeFlow";
 import WalletFlow from "@/components/steps/WalletFlow/WalletFlow";
 
-import BinanceIcon from "../../assets/BinanceBadge.svg";
-
 const FLOWS = {
     exchangeFlow: ExchangeFlow,
     walletFlow: WalletFlow,
 };
 
 const FlowSelector = () => {
-    const { handleClose, enableExchanges } = useContext(CheckoutContext);
+    const { handleClose, enableExchange } = useContext(CheckoutContext);
     const [flow, setFlow] = useState("");
     const [initialStep, setInitialStep] = useState<string | number>("");
 
@@ -102,19 +104,33 @@ const FlowSelector = () => {
                 firstStep: WithdrawalStep.ChooseBalanceAsset,
             });
         }
-
-        if (enableExchanges?.includes?.("binance"))
+        console.log(
+            enableExchange,
+            enableExchange.map(
+                (integration) => EXCHANGE_ICON_BY_TYPE[integration],
+            ),
+        );
+
+        if (Array.isArray(enableExchange) && enableExchange.length > 0)
             options.unshift({
-                id: "binance-exchange",
+                id: "exchange",
                 title: "Connect Exchange",
                 limit: "No Limit",
                 delay: "2 min",
-                icons: [BinanceIcon],
+                icons: enableExchange
+                    .map(
+                        (integration) =>
+                            EXCHANGE_ICON_BY_TYPE[
+                                ExchangeToIntegrationType[integration]
+                            ],
+                    )
+                    .filter(Boolean),
                 flow: "exchangeFlow",
-                firstStep: WithdrawalStep.CheckSessionKey,
+                // Start at ChooseExchange to allow picking among multiple integrations
+                firstStep: WithdrawalStep.ChooseExchange,
             });
         return options;
-    }, [address, enableExchanges, smartAccountTotal, isLoadingSmartAccount]);
+    }, [address, enableExchange, smartAccountTotal, isLoadingSmartAccount]);
 
     const FlowComponent = flow && FLOWS[flow];