@unifold/ui-react 0.1.6 → 0.1.7

package/dist/index.js

@@ -94,6 +94,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/components/deposits/DepositModal.tsx
 var import_react6 = require("react");
+var import_lucide_react12 = require("lucide-react");
 
 // src/components/shared/dialog.tsx
 var React2 = __toESM(require("react"));
@@ -527,6 +528,20 @@ async function getFiatCurrencies(publishableKey) {
   }
   return response.json();
 }
+async function getProjectConfig(publishableKey) {
+  const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
+  const response = await fetch(`${API_BASE_URL}/v1/public/projects/config`, {
+    method: "GET",
+    headers: {
+      accept: "application/json",
+      "x-publishable-key": pk
+    }
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to fetch project config: ${response.statusText}`);
+  }
+  return response.json();
+}
 
 // src/components/deposits/DepositExecutionItem.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
@@ -1001,15 +1016,17 @@ function TransferCryptoBase({
   showDetailedDropdowns = false,
   onExecutionsChange,
   onDepositSuccess,
-  onDepositError
+  onDepositError,
+  wallets: externalWallets
 }) {
   const { themeClass } = useTheme();
   const isDarkMode = themeClass.includes("uf-dark");
   const [token, setToken] = (0, import_react3.useState)("USDC");
   const [chain, setChain] = (0, import_react3.useState)("solana:mainnet");
   const [copied, setCopied] = (0, import_react3.useState)(false);
-  const [wallets, setWallets] = (0, import_react3.useState)([]);
-  const [loading, setLoading] = (0, import_react3.useState)(true);
+  const [internalWallets, setInternalWallets] = (0, import_react3.useState)([]);
+  const [loading, setLoading] = (0, import_react3.useState)(!externalWallets?.length);
+  const wallets = externalWallets?.length ? externalWallets : internalWallets;
   const [error, setError] = (0, import_react3.useState)(null);
   const [depositExecutions, setDepositExecutions] = (0, import_react3.useState)([]);
   const [trackedExecutions, setTrackedExecutions] = (0, import_react3.useState)(/* @__PURE__ */ new Map());
@@ -1073,9 +1090,16 @@ function TransferCryptoBase({
     }
   }, [depositExecutions, onExecutionsChange]);
   (0, import_react3.useEffect)(() => {
-    async function fetchWallets() {
+    if (externalWallets?.length) {
+      setLoading(false);
+      return;
+    }
+    let retryTimeout = null;
+    let isCancelled = false;
+    const fetchWallets = async () => {
+      if (isCancelled) return;
+      setLoading(true);
       try {
-        setLoading(true);
         const response = await createEOA(
           {
             user_id: userId,
@@ -1086,23 +1110,35 @@ function TransferCryptoBase({
           },
           publishableKey
         );
-        setWallets(response.data);
-        setError(null);
+        if (!isCancelled) {
+          setInternalWallets(response.data);
+          setError(null);
+          setLoading(false);
+        }
       } catch (err) {
-        setError(err instanceof Error ? err.message : "Failed to load wallets");
-        console.error("Error fetching wallets:", err);
-      } finally {
-        setLoading(false);
+        console.error("Error fetching wallets, retrying in 5s:", err);
+        if (!isCancelled) {
+          setError(err instanceof Error ? err.message : "Failed to load wallets");
+          setLoading(false);
+          retryTimeout = setTimeout(fetchWallets, 5e3);
+        }
       }
-    }
+    };
     fetchWallets();
+    return () => {
+      isCancelled = true;
+      if (retryTimeout) {
+        clearTimeout(retryTimeout);
+      }
+    };
   }, [
     userId,
     recipientAddress,
     destinationChainType,
     destinationChainId,
     destinationTokenAddress,
-    publishableKey
+    publishableKey,
+    externalWallets
   ]);
   (0, import_react3.useEffect)(() => {
     if (!supportedTokens.length) return;
@@ -1353,7 +1389,7 @@ function TransferCryptoBase({
       {
         value: depositAddress,
         size: 180,
-        imageUrl: currentChainData?.icon_url || currentChainFromBackend?.icon_url || getIconUrl("/icons/networks/ethereum.svg"),
+        imageUrl: currentChainData?.icon_url || currentChainFromBackend?.icon_url,
         imageSize: 45,
         darkMode: isDarkMode
       },
@@ -1570,7 +1606,7 @@ function TransferCryptoBase({
         orderSubmittedAt: depositExecutions[0].created_at || (/* @__PURE__ */ new Date()).toISOString(),
         orderFilledAt: depositExecutions[0].updated_at || (/* @__PURE__ */ new Date()).toISOString(),
         explorerUrl: depositExecutions[0].explorer_url,
-        completionExplorerUrl: depositExecutions[0].destination_transaction_hashes?.[0] ? `https://polygonscan.com/tx/${depositExecutions[0].destination_transaction_hashes[0]}` : depositExecutions[0].status === "succeeded" /* SUCCEEDED */ ? depositExecutions[0].explorer_url : void 0,
+        completionExplorerUrl: depositExecutions[0].destination_explorer_url ?? void 0,
         status: depositExecutions[0].status,
         tokenIconUrl: depositExecutions[0].source_token_metadata?.icon_url,
         onClose: () => setDepositExecutions([])
@@ -1620,6 +1656,7 @@ function CurrencyListItem({
   isSelected,
   onSelect
 }) {
+  const iconUrl = currency.icon_url;
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "button",
     {
@@ -1627,14 +1664,14 @@ function CurrencyListItem({
       className: "uf-w-full uf-bg-secondary hover:uf-bg-accent uf-transition-colors uf-rounded-xl uf-p-3 uf-flex uf-items-center uf-justify-between uf-group",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "uf-w-10 uf-h-10 uf-flex uf-items-center uf-justify-center uf-flex-shrink-0 uf-rounded-full uf-overflow-hidden uf-bg-card", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "uf-w-10 uf-h-10 uf-flex-shrink-0 uf-rounded-full uf-overflow-hidden uf-bg-card", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "img",
             {
-              src: currency.icon_url,
+              src: iconUrl,
               alt: currency.name,
               width: 40,
               height: 40,
-              className: "uf-w-full uf-h-full uf-object-cover uf-rounded-full"
+              className: "uf-w-full uf-h-full uf-object-cover"
             }
           ) }),
           /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "uf-text-left", children: [
@@ -1759,18 +1796,6 @@ function CurrencyModal({
 
 // src/hooks/use-user-ip.ts
 var import_react_query = require("@tanstack/react-query");
-async function getIpViaMoonpay(moonpayApiKey) {
-  const url = `https://api.moonpay.com/v3/ip_address?apiKey=${moonpayApiKey}`;
-  const response = await fetch(url);
-  if (!response.ok) {
-    throw new Error(`Moonpay IP API failed: ${response.statusText}`);
-  }
-  const data = await response.json();
-  return {
-    alpha2: data.alpha2.toLowerCase(),
-    state: data.state?.toLowerCase()
-  };
-}
 async function getIpViaIpApi() {
   const url = "https://ipapi.co/json";
   const response = await fetch(url);
@@ -1783,7 +1808,7 @@ async function getIpViaIpApi() {
     state: data.region_code?.toLowerCase()
   };
 }
-function useUserIp(moonpayApiKey) {
+function useUserIp() {
   const {
     data: userIpInfo,
     isLoading,
@@ -1791,21 +1816,12 @@ function useUserIp(moonpayApiKey) {
   } = (0, import_react_query.useQuery)({
     queryKey: ["getUserIpInfo"],
     queryFn: async () => {
-      if (moonpayApiKey) {
-        try {
-          const moonpayIpData = await getIpViaMoonpay(moonpayApiKey);
-          console.log("IP detected via Moonpay:", moonpayIpData);
-          return moonpayIpData;
-        } catch (error2) {
-          console.warn("Moonpay IP API failed, trying fallback:", error2);
-        }
-      }
       try {
         const ipApiData = await getIpViaIpApi();
         console.log("IP detected via ipapi.co:", ipApiData);
         return ipApiData;
       } catch (ipApiError) {
-        console.error("All IP detection methods failed:", ipApiError);
+        console.error("IP detection failed:", ipApiError);
         throw ipApiError;
       }
     },
@@ -1854,7 +1870,8 @@ function BuyWithCard({
   destinationChainType,
   destinationChainId,
   destinationTokenAddress,
-  themeClass = ""
+  themeClass = "",
+  wallets: externalWallets
 }) {
   const [amount, setAmount] = (0, import_react5.useState)("500.00");
   const [currency, setCurrency] = (0, import_react5.useState)("usd");
@@ -1889,8 +1906,9 @@ function BuyWithCard({
   const [isAutoSelected, setIsAutoSelected] = (0, import_react5.useState)(true);
   const [autoSelectedProvider, setAutoSelectedProvider] = (0, import_react5.useState)(null);
   const [hasManualSelection, setHasManualSelection] = (0, import_react5.useState)(false);
-  const [wallets, setWallets] = (0, import_react5.useState)([]);
-  const [walletsLoading, setWalletsLoading] = (0, import_react5.useState)(true);
+  const [internalWallets, setInternalWallets] = (0, import_react5.useState)([]);
+  const [walletsLoading, setWalletsLoading] = (0, import_react5.useState)(!externalWallets?.length);
+  const wallets = externalWallets?.length ? externalWallets : internalWallets;
   const [countdown, setCountdown] = (0, import_react5.useState)(60);
   const [fiatCurrencies, setFiatCurrencies] = (0, import_react5.useState)([]);
   const [preferredCurrencyCodes, setPreferredCurrencyCodes] = (0, import_react5.useState)([]);
@@ -1919,7 +1937,15 @@ function BuyWithCard({
     fetchFiatCurrencies();
   }, [publishableKey]);
   (0, import_react5.useEffect)(() => {
-    async function fetchWallets() {
+    if (externalWallets?.length) {
+      setWalletsLoading(false);
+      return;
+    }
+    let retryTimeout = null;
+    let isCancelled = false;
+    const fetchWallets = async () => {
+      if (isCancelled) return;
+      setWalletsLoading(true);
       try {
         const response = await createEOA(
           {
@@ -1931,16 +1957,26 @@ function BuyWithCard({
           },
           publishableKey
         );
-        setWallets(response.data);
+        if (!isCancelled) {
+          setInternalWallets(response.data);
+          setWalletsLoading(false);
+        }
       } catch (err) {
-        console.error("Error fetching wallets:", err);
-        setQuotesError("Failed to load wallet addresses");
-      } finally {
-        setWalletsLoading(false);
+        console.error("Error fetching wallets, retrying in 5s:", err);
+        if (!isCancelled) {
+          setWalletsLoading(false);
+          retryTimeout = setTimeout(fetchWallets, 5e3);
+        }
       }
-    }
+    };
     fetchWallets();
-  }, [userId, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, publishableKey]);
+    return () => {
+      isCancelled = true;
+      if (retryTimeout) {
+        clearTimeout(retryTimeout);
+      }
+    };
+  }, [userId, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, publishableKey, externalWallets]);
   (0, import_react5.useEffect)(() => {
     async function fetchSupportedTokens() {
       try {
@@ -2434,8 +2470,10 @@ var import_jsx_runtime17 = require("react/jsx-runtime");
 function TransferCryptoButton({
   onClick,
   title,
-  subtitle
+  subtitle,
+  featuredTokens
 }) {
+  const sortedTokens = featuredTokens ? [...featuredTokens].sort((a, b) => a.position - b.position) : [];
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "button",
     {
@@ -2450,88 +2488,20 @@ function TransferCryptoButton({
           ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-flex uf--space-x-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-              "img",
-              {
-                src: getIconUrl("/icons/networks/ethereum.svg"),
-                alt: "ETH",
-                width: 20,
-                height: 20,
-                className: "uf-rounded-full uf-border-2 uf-border-secondary"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-              "img",
-              {
-                src: getIconUrl("/icons/networks/optimism.svg"),
-                alt: "OP",
-                width: 20,
-                height: 20,
-                className: "uf-rounded-full uf-border-2 uf-border-secondary"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-              "img",
-              {
-                src: getIconUrl("/icons/networks/polygon.svg"),
-                alt: "MATIC",
-                width: 20,
-                height: 20,
-                className: "uf-rounded-full uf-border-2 uf-border-secondary"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-              "img",
-              {
-                src: getIconUrl("/icons/networks/arbitrum.svg"),
-                alt: "ARB",
-                width: 20,
-                height: 20,
-                className: "uf-rounded-full uf-border-2 uf-border-secondary"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uf-flex uf--space-x-2", children: sortedTokens.map((token) => {
+            const iconUrl = token.icon_urls.find((u) => u.format === "svg")?.url || token.icon_urls.find((u) => u.format === "png")?.url;
+            return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               "img",
               {
-                src: getIconUrl("/icons/tokens/usdc.svg"),
-                alt: "USDC",
+                src: iconUrl,
+                alt: token.name,
                 width: 20,
                 height: 20,
                 className: "uf-rounded-full uf-border-2 uf-border-secondary"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-              "img",
-              {
-                src: getIconUrl("/icons/networks/solana.svg"),
-                alt: "SOL",
-                width: 20,
-                height: 20,
-                className: "uf-rounded-full uf-border-2 uf-border-secondary"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-              "img",
-              {
-                src: getIconUrl("/icons/tokens/avax.svg"),
-                alt: "AVAX",
-                width: 20,
-                height: 20,
-                className: "uf-rounded-full uf-border-2 uf-border-secondary"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-              "img",
-              {
-                src: getIconUrl("/icons/networks/bitcoin.svg"),
-                alt: "BTC",
-                width: 20,
-                height: 20,
-                className: "uf-rounded-full uf-border-2 uf-border-secondary"
-              }
-            )
-          ] }),
+              },
+              token.name
+            );
+          }) }),
           /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react9.ChevronRight, { className: "uf-w-4 uf-h-4 uf-text-muted-foreground group-hover:uf-text-foreground uf-transition-colors" })
         ] })
       ]
@@ -2545,7 +2515,8 @@ var import_jsx_runtime18 = require("react/jsx-runtime");
 function DepositWithCardButton({
   onClick,
   title,
-  subtitle
+  subtitle,
+  paymentNetworks
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "button",
@@ -2561,28 +2532,20 @@ function DepositWithCardButton({
           ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1.5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-              "img",
-              {
-                src: getIconUrl("/icons/networks/mastercard.svg"),
-                alt: "Mastercard",
-                width: 32,
-                height: 32,
-                className: "uf-rounded"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "uf-flex uf-items-center uf-gap-1.5", children: paymentNetworks?.map((network) => {
+            const iconUrl = network.icon_urls.find((u) => u.format === "svg")?.url || network.icon_urls.find((u) => u.format === "png")?.url;
+            return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               "img",
               {
-                src: getIconUrl("/icons/networks/visa.svg"),
-                alt: "Visa",
+                src: iconUrl,
+                alt: network.name,
                 width: 32,
                 height: 32,
                 className: "uf-rounded"
-              }
-            )
-          ] }),
+              },
+              network.name
+            );
+          }) }),
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react10.ChevronRight, { className: "uf-w-4 uf-h-4 uf-text-muted-foreground group-hover:uf-text-foreground uf-transition-colors" })
         ] })
       ]
@@ -2623,6 +2586,21 @@ function DepositTrackerButton({
 
 // src/components/deposits/DepositModal.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
+function SkeletonButton({ variant = "default" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "uf-w-full uf-bg-secondary uf-rounded-xl uf-p-3 uf-flex uf-items-center uf-justify-between uf-animate-pulse", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uf-bg-muted uf-rounded-lg uf-w-9 uf-h-9" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "uf-space-y-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uf-h-3.5 uf-w-24 uf-bg-muted uf-rounded" }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uf-h-3 uf-w-32 uf-bg-muted uf-rounded" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
+      variant === "with-icons" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uf-flex uf--space-x-1", children: [1, 2, 3].map((i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uf-w-5 uf-h-5 uf-rounded-full uf-bg-muted uf-border-2 uf-border-secondary" }, i)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react12.ChevronRight, { className: "uf-w-4 uf-h-4 uf-text-muted" })
+    ] })
+  ] });
+}
 var t3 = i18n.depositModal;
 function DepositModal({
   open,
@@ -2647,6 +2625,15 @@ function DepositModal({
   const [quotesCount, setQuotesCount] = (0, import_react6.useState)(0);
   const [depositsModalOpen, setDepositsModalOpen] = (0, import_react6.useState)(false);
   const [depositExecutions, setDepositExecutions] = (0, import_react6.useState)([]);
+  const [projectConfig, setProjectConfig] = (0, import_react6.useState)(null);
+  const [wallets, setWallets] = (0, import_react6.useState)([]);
+  const [walletsLoading, setWalletsLoading] = (0, import_react6.useState)(false);
+  (0, import_react6.useEffect)(() => {
+    setProjectConfig(null);
+  }, [publishableKey]);
+  (0, import_react6.useEffect)(() => {
+    setWallets([]);
+  }, [userId, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, publishableKey]);
   const [resolvedTheme, setResolvedTheme] = (0, import_react6.useState)(theme === "auto" ? "dark" : theme);
   (0, import_react6.useEffect)(() => {
     if (theme === "auto") {
@@ -2661,6 +2648,49 @@ function DepositModal({
       setResolvedTheme(theme);
     }
   }, [theme]);
+  (0, import_react6.useEffect)(() => {
+    if (open && !projectConfig) {
+      getProjectConfig(publishableKey).then(setProjectConfig).catch(console.error);
+    }
+  }, [open, publishableKey, projectConfig]);
+  (0, import_react6.useEffect)(() => {
+    if (!open || wallets.length > 0) return;
+    let retryTimeout = null;
+    let isCancelled = false;
+    const fetchWallets = async () => {
+      if (isCancelled) return;
+      setWalletsLoading(true);
+      try {
+        const response = await createEOA(
+          {
+            user_id: userId,
+            recipient_address: recipientAddress,
+            destination_chain_type: destinationChainType,
+            destination_chain_id: destinationChainId,
+            destination_token_address: destinationTokenAddress
+          },
+          publishableKey
+        );
+        if (!isCancelled) {
+          setWallets(response.data);
+          setWalletsLoading(false);
+        }
+      } catch (error) {
+        console.error("Error fetching wallets, retrying in 5s:", error);
+        if (!isCancelled) {
+          setWalletsLoading(false);
+          retryTimeout = setTimeout(fetchWallets, 5e3);
+        }
+      }
+    };
+    fetchWallets();
+    return () => {
+      isCancelled = true;
+      if (retryTimeout) {
+        clearTimeout(retryTimeout);
+      }
+    };
+  }, [open, userId, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, publishableKey, wallets.length]);
   const themeClass = resolvedTheme === "dark" ? "uf-dark" : "";
   const handleClose = () => {
     onOpenChange(false);
@@ -2700,13 +2730,18 @@ function DepositModal({
               onClose: handleClose
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "uf-pb-4 uf-space-y-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uf-pb-4 uf-space-y-3", children: !projectConfig ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SkeletonButton, { variant: "with-icons" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SkeletonButton, { variant: "with-icons" }),
+            !hideDepositTracker && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SkeletonButton, {})
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               TransferCryptoButton,
               {
                 onClick: () => setView("transfer"),
                 title: t3.transferCrypto.title,
-                subtitle: t3.transferCrypto.subtitle
+                subtitle: t3.transferCrypto.subtitle,
+                featuredTokens: projectConfig.transfer_crypto.networks
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -2714,7 +2749,8 @@ function DepositModal({
               {
                 onClick: () => setView("card"),
                 title: t3.depositWithCard.title,
-                subtitle: t3.depositWithCard.subtitle
+                subtitle: t3.depositWithCard.subtitle,
+                paymentNetworks: projectConfig.payment_networks.networks
               }
             ),
             !hideDepositTracker && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -2726,7 +2762,7 @@ function DepositModal({
                 badge: depositExecutions.length > 0 ? depositExecutions.length : void 0
               }
             )
-          ] })
+          ] }) })
         ] }) : view === "transfer" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             DepositHeader,
@@ -2748,7 +2784,8 @@ function DepositModal({
               destinationTokenAddress,
               onExecutionsChange: setDepositExecutions,
               onDepositSuccess,
-              onDepositError
+              onDepositError,
+              wallets
             }
           )
         ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
@@ -2776,7 +2813,8 @@ function DepositModal({
               destinationTokenAddress,
               onDepositSuccess,
               onDepositError,
-              themeClass
+              themeClass,
+              wallets
             }
           )
         ] })