@unifold/ui-react 0.1.6 → 0.1.7

package/dist/index.mjs

@@ -1,5 +1,6 @@
 // src/components/deposits/DepositModal.tsx
 import { useState as useState5, useEffect as useEffect5 } from "react";
+import { ChevronRight as ChevronRight6 } from "lucide-react";
 
 // src/components/shared/dialog.tsx
 import * as React2 from "react";
@@ -444,6 +445,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
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -918,15 +933,17 @@ function TransferCryptoBase({
   showDetailedDropdowns = false,
   onExecutionsChange,
   onDepositSuccess,
-  onDepositError
+  onDepositError,
+  wallets: externalWallets
 }) {
   const { themeClass } = useTheme();
   const isDarkMode = themeClass.includes("uf-dark");
   const [token, setToken] = useState2("USDC");
   const [chain, setChain] = useState2("solana:mainnet");
   const [copied, setCopied] = useState2(false);
-  const [wallets, setWallets] = useState2([]);
-  const [loading, setLoading] = useState2(true);
+  const [internalWallets, setInternalWallets] = useState2([]);
+  const [loading, setLoading] = useState2(!externalWallets?.length);
+  const wallets = externalWallets?.length ? externalWallets : internalWallets;
   const [error, setError] = useState2(null);
   const [depositExecutions, setDepositExecutions] = useState2([]);
   const [trackedExecutions, setTrackedExecutions] = useState2(/* @__PURE__ */ new Map());
@@ -990,9 +1007,16 @@ function TransferCryptoBase({
     }
   }, [depositExecutions, onExecutionsChange]);
   useEffect3(() => {
-    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,
@@ -1003,23 +1027,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
   ]);
   useEffect3(() => {
     if (!supportedTokens.length) return;
@@ -1270,7 +1306,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
       },
@@ -1487,7 +1523,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([])
@@ -1537,6 +1573,7 @@ function CurrencyListItem({
   isSelected,
   onSelect
 }) {
+  const iconUrl = currency.icon_url;
   return /* @__PURE__ */ jsxs7(
     "button",
     {
@@ -1544,14 +1581,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__ */ jsxs7("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
-          /* @__PURE__ */ jsx13("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__ */ jsx13(
+          /* @__PURE__ */ jsx13("div", { className: "uf-w-10 uf-h-10 uf-flex-shrink-0 uf-rounded-full uf-overflow-hidden uf-bg-card", children: /* @__PURE__ */ jsx13(
             "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__ */ jsxs7("div", { className: "uf-text-left", children: [
@@ -1676,18 +1713,6 @@ function CurrencyModal({
 
 // src/hooks/use-user-ip.ts
 import { useQuery } from "@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);
@@ -1700,7 +1725,7 @@ async function getIpViaIpApi() {
     state: data.region_code?.toLowerCase()
   };
 }
-function useUserIp(moonpayApiKey) {
+function useUserIp() {
   const {
     data: userIpInfo,
     isLoading,
@@ -1708,21 +1733,12 @@ function useUserIp(moonpayApiKey) {
   } = 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;
       }
     },
@@ -1771,7 +1787,8 @@ function BuyWithCard({
   destinationChainType,
   destinationChainId,
   destinationTokenAddress,
-  themeClass = ""
+  themeClass = "",
+  wallets: externalWallets
 }) {
   const [amount, setAmount] = useState4("500.00");
   const [currency, setCurrency] = useState4("usd");
@@ -1806,8 +1823,9 @@ function BuyWithCard({
   const [isAutoSelected, setIsAutoSelected] = useState4(true);
   const [autoSelectedProvider, setAutoSelectedProvider] = useState4(null);
   const [hasManualSelection, setHasManualSelection] = useState4(false);
-  const [wallets, setWallets] = useState4([]);
-  const [walletsLoading, setWalletsLoading] = useState4(true);
+  const [internalWallets, setInternalWallets] = useState4([]);
+  const [walletsLoading, setWalletsLoading] = useState4(!externalWallets?.length);
+  const wallets = externalWallets?.length ? externalWallets : internalWallets;
   const [countdown, setCountdown] = useState4(60);
   const [fiatCurrencies, setFiatCurrencies] = useState4([]);
   const [preferredCurrencyCodes, setPreferredCurrencyCodes] = useState4([]);
@@ -1836,7 +1854,15 @@ function BuyWithCard({
     fetchFiatCurrencies();
   }, [publishableKey]);
   useEffect4(() => {
-    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(
           {
@@ -1848,16 +1874,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]);
   useEffect4(() => {
     async function fetchSupportedTokens() {
       try {
@@ -2351,8 +2387,10 @@ import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 function TransferCryptoButton({
   onClick,
   title,
-  subtitle
+  subtitle,
+  featuredTokens
 }) {
+  const sortedTokens = featuredTokens ? [...featuredTokens].sort((a, b) => a.position - b.position) : [];
   return /* @__PURE__ */ jsxs11(
     "button",
     {
@@ -2367,88 +2405,20 @@ function TransferCryptoButton({
           ] })
         ] }),
         /* @__PURE__ */ jsxs11("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
-          /* @__PURE__ */ jsxs11("div", { className: "uf-flex uf--space-x-1", children: [
-            /* @__PURE__ */ jsx17(
-              "img",
-              {
-                src: getIconUrl("/icons/networks/ethereum.svg"),
-                alt: "ETH",
-                width: 20,
-                height: 20,
-                className: "uf-rounded-full uf-border-2 uf-border-secondary"
-              }
-            ),
-            /* @__PURE__ */ jsx17(
-              "img",
-              {
-                src: getIconUrl("/icons/networks/optimism.svg"),
-                alt: "OP",
-                width: 20,
-                height: 20,
-                className: "uf-rounded-full uf-border-2 uf-border-secondary"
-              }
-            ),
-            /* @__PURE__ */ jsx17(
-              "img",
-              {
-                src: getIconUrl("/icons/networks/polygon.svg"),
-                alt: "MATIC",
-                width: 20,
-                height: 20,
-                className: "uf-rounded-full uf-border-2 uf-border-secondary"
-              }
-            ),
-            /* @__PURE__ */ jsx17(
-              "img",
-              {
-                src: getIconUrl("/icons/networks/arbitrum.svg"),
-                alt: "ARB",
-                width: 20,
-                height: 20,
-                className: "uf-rounded-full uf-border-2 uf-border-secondary"
-              }
-            ),
-            /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx17("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__ */ jsx17(
               "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__ */ jsx17(
-              "img",
-              {
-                src: getIconUrl("/icons/networks/solana.svg"),
-                alt: "SOL",
-                width: 20,
-                height: 20,
-                className: "uf-rounded-full uf-border-2 uf-border-secondary"
-              }
-            ),
-            /* @__PURE__ */ jsx17(
-              "img",
-              {
-                src: getIconUrl("/icons/tokens/avax.svg"),
-                alt: "AVAX",
-                width: 20,
-                height: 20,
-                className: "uf-rounded-full uf-border-2 uf-border-secondary"
-              }
-            ),
-            /* @__PURE__ */ jsx17(
-              "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__ */ jsx17(ChevronRight3, { className: "uf-w-4 uf-h-4 uf-text-muted-foreground group-hover:uf-text-foreground uf-transition-colors" })
         ] })
       ]
@@ -2462,7 +2432,8 @@ import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 function DepositWithCardButton({
   onClick,
   title,
-  subtitle
+  subtitle,
+  paymentNetworks
 }) {
   return /* @__PURE__ */ jsxs12(
     "button",
@@ -2478,28 +2449,20 @@ function DepositWithCardButton({
           ] })
         ] }),
         /* @__PURE__ */ jsxs12("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
-          /* @__PURE__ */ jsxs12("div", { className: "uf-flex uf-items-center uf-gap-1.5", children: [
-            /* @__PURE__ */ jsx18(
-              "img",
-              {
-                src: getIconUrl("/icons/networks/mastercard.svg"),
-                alt: "Mastercard",
-                width: 32,
-                height: 32,
-                className: "uf-rounded"
-              }
-            ),
-            /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx18("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__ */ jsx18(
               "img",
               {
-                src: getIconUrl("/icons/networks/visa.svg"),
-                alt: "Visa",
+                src: iconUrl,
+                alt: network.name,
                 width: 32,
                 height: 32,
                 className: "uf-rounded"
-              }
-            )
-          ] }),
+              },
+              network.name
+            );
+          }) }),
           /* @__PURE__ */ jsx18(ChevronRight4, { className: "uf-w-4 uf-h-4 uf-text-muted-foreground group-hover:uf-text-foreground uf-transition-colors" })
         ] })
       ]
@@ -2540,6 +2503,21 @@ function DepositTrackerButton({
 
 // src/components/deposits/DepositModal.tsx
 import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+function SkeletonButton({ variant = "default" }) {
+  return /* @__PURE__ */ jsxs14("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__ */ jsxs14("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
+      /* @__PURE__ */ jsx20("div", { className: "uf-bg-muted uf-rounded-lg uf-w-9 uf-h-9" }),
+      /* @__PURE__ */ jsxs14("div", { className: "uf-space-y-1.5", children: [
+        /* @__PURE__ */ jsx20("div", { className: "uf-h-3.5 uf-w-24 uf-bg-muted uf-rounded" }),
+        /* @__PURE__ */ jsx20("div", { className: "uf-h-3 uf-w-32 uf-bg-muted uf-rounded" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs14("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
+      variant === "with-icons" && /* @__PURE__ */ jsx20("div", { className: "uf-flex uf--space-x-1", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx20("div", { className: "uf-w-5 uf-h-5 uf-rounded-full uf-bg-muted uf-border-2 uf-border-secondary" }, i)) }),
+      /* @__PURE__ */ jsx20(ChevronRight6, { className: "uf-w-4 uf-h-4 uf-text-muted" })
+    ] })
+  ] });
+}
 var t3 = i18n.depositModal;
 function DepositModal({
   open,
@@ -2564,6 +2542,15 @@ function DepositModal({
   const [quotesCount, setQuotesCount] = useState5(0);
   const [depositsModalOpen, setDepositsModalOpen] = useState5(false);
   const [depositExecutions, setDepositExecutions] = useState5([]);
+  const [projectConfig, setProjectConfig] = useState5(null);
+  const [wallets, setWallets] = useState5([]);
+  const [walletsLoading, setWalletsLoading] = useState5(false);
+  useEffect5(() => {
+    setProjectConfig(null);
+  }, [publishableKey]);
+  useEffect5(() => {
+    setWallets([]);
+  }, [userId, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, publishableKey]);
   const [resolvedTheme, setResolvedTheme] = useState5(theme === "auto" ? "dark" : theme);
   useEffect5(() => {
     if (theme === "auto") {
@@ -2578,6 +2565,49 @@ function DepositModal({
       setResolvedTheme(theme);
     }
   }, [theme]);
+  useEffect5(() => {
+    if (open && !projectConfig) {
+      getProjectConfig(publishableKey).then(setProjectConfig).catch(console.error);
+    }
+  }, [open, publishableKey, projectConfig]);
+  useEffect5(() => {
+    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);
@@ -2617,13 +2647,18 @@ function DepositModal({
               onClose: handleClose
             }
           ),
-          /* @__PURE__ */ jsxs14("div", { className: "uf-pb-4 uf-space-y-3", children: [
+          /* @__PURE__ */ jsx20("div", { className: "uf-pb-4 uf-space-y-3", children: !projectConfig ? /* @__PURE__ */ jsxs14(Fragment4, { children: [
+            /* @__PURE__ */ jsx20(SkeletonButton, { variant: "with-icons" }),
+            /* @__PURE__ */ jsx20(SkeletonButton, { variant: "with-icons" }),
+            !hideDepositTracker && /* @__PURE__ */ jsx20(SkeletonButton, {})
+          ] }) : /* @__PURE__ */ jsxs14(Fragment4, { children: [
             /* @__PURE__ */ jsx20(
               TransferCryptoButton,
               {
                 onClick: () => setView("transfer"),
                 title: t3.transferCrypto.title,
-                subtitle: t3.transferCrypto.subtitle
+                subtitle: t3.transferCrypto.subtitle,
+                featuredTokens: projectConfig.transfer_crypto.networks
               }
             ),
             /* @__PURE__ */ jsx20(
@@ -2631,7 +2666,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__ */ jsx20(
@@ -2643,7 +2679,7 @@ function DepositModal({
                 badge: depositExecutions.length > 0 ? depositExecutions.length : void 0
               }
             )
-          ] })
+          ] }) })
         ] }) : view === "transfer" ? /* @__PURE__ */ jsxs14(Fragment4, { children: [
           /* @__PURE__ */ jsx20(
             DepositHeader,
@@ -2665,7 +2701,8 @@ function DepositModal({
               destinationTokenAddress,
               onExecutionsChange: setDepositExecutions,
               onDepositSuccess,
-              onDepositError
+              onDepositError,
+              wallets
             }
           )
         ] }) : /* @__PURE__ */ jsxs14(Fragment4, { children: [
@@ -2693,7 +2730,8 @@ function DepositModal({
               destinationTokenAddress,
               onDepositSuccess,
               onDepositError,
-              themeClass
+              themeClass,
+              wallets
             }
           )
         ] })