@unifold/ui-web 0.1.48 → 0.1.49

package/dist/index.js

@@ -50428,16 +50428,6 @@ function BuyWithCard({
     window.open(sessionStartUrl, "_blank");
     handleViewChange("onramp");
   };
-  const getProviderBadges = (quote, allQuotes) => {
-    const badges = [];
-    const maxDestination = Math.max(
-      ...allQuotes.map((q) => q.destination_amount)
-    );
-    if (quote.destination_amount === maxDestination) {
-      badges.push("Best price");
-    }
-    return badges;
-  };
   const sortedQuotes = [...quotes].sort(
     (a, b) => b.destination_amount - a.destination_amount
   );
@@ -50642,31 +50632,7 @@ function BuyWithCard({
                               children: selectedProvider.service_provider_display_name
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-0.5", children: [
-                            isAutoSelected && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                              "span",
-                              {
-                                className: "uf-text-[10px] uf-font-normal",
-                                style: {
-                                  color: colors2.success,
-                                  fontFamily: fonts.regular
-                                },
-                                children: "Best price"
-                              }
-                            ),
-                            isAutoSelected && selectedProvider.low_kyc === false && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                              "span",
-                              {
-                                className: "uf-text-[10px]",
-                                style: {
-                                  color: components.card.labelColor,
-                                  fontFamily: fonts.regular
-                                },
-                                children: "\u2022"
-                              }
-                            ),
-                            selectedProvider.low_kyc === false && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "uf-text-[10px] uf-text-muted-foreground uf-font-normal", children: "No document upload" })
-                          ] })
+                          selectedProvider.low_kyc === false && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "uf-text-[10px] uf-text-muted-foreground uf-font-normal", children: "No document upload" }) })
                         ] }),
                         quotes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                           ChevronRight,
@@ -50730,7 +50696,6 @@ function BuyWithCard({
           {
             className: `uf-transition-all uf-duration-300 uf-min-h-[420px] uf-flex uf-flex-col ${showQuotesView && !showOnrampView ? "uf-opacity-100" : "uf-opacity-0 uf-pointer-events-none uf-absolute uf-inset-0"}`,
             children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uf-space-y-2 uf-pt-2 uf-pb-8 uf-overflow-y-auto uf-flex-1 uf-min-h-0", children: sortedQuotes.map((quote, index2) => {
-              const badges = getProviderBadges(quote, sortedQuotes);
               const displayName = quote.service_provider_display_name;
               const isSelected = selectedProvider?.service_provider === quote.service_provider;
               return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
@@ -50773,39 +50738,17 @@ function BuyWithCard({
                             children: displayName
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-0.5", children: [
-                          badges.map((badge, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-                            "span",
-                            {
-                              className: "uf-text-[10px] uf-font-normal",
-                              style: { color: colors2.success },
-                              children: [
-                                badge,
-                                i < badges.length - 1 && ","
-                              ]
+                        quote.low_kyc === false && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                          "span",
+                          {
+                            className: "uf-text-[10px] uf-font-normal",
+                            style: {
+                              color: components.card.subtextRightColor,
+                              fontFamily: fonts.regular
                             },
-                            i
-                          )),
-                          quote.low_kyc === false && badges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                            "span",
-                            {
-                              className: "uf-text-[10px]",
-                              style: { color: components.card.subtextRightColor },
-                              children: "\u2022"
-                            }
-                          ),
-                          quote.low_kyc === false && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                            "span",
-                            {
-                              className: "uf-text-[10px] uf-font-normal",
-                              style: {
-                                color: components.card.subtextRightColor,
-                                fontFamily: fonts.regular
-                              },
-                              children: "No document upload"
-                            }
-                          )
-                        ] })
+                            children: "No document upload"
+                          }
+                        ) })
                       ] })
                     ] }),
                     /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "uf-text-right", children: [
@@ -55421,72 +55364,72 @@ function DepositPollingUi({
 var getChainKey = (chainId, chainType) => {
   return `${chainType}:${chainId}`;
 };
-function resolveSourceToken(supportedTokens, defaultSourceChainType, defaultSourceChainId, defaultSourceTokenAddress, defaultSourceSymbol) {
-  if (!supportedTokens.length) return null;
-  let selectedTokenData;
-  let selectedChainData;
-  const hasChainDefaults = defaultSourceChainType && defaultSourceChainId;
-  if (defaultSourceTokenAddress && hasChainDefaults) {
-    for (const t11 of supportedTokens) {
+function resolveToken(tokens, defaultChainType, defaultChainId, defaultTokenAddress, defaultSymbol) {
+  if (!tokens.length) return null;
+  let selectedToken;
+  let selectedChain;
+  const hasChainDefaults = defaultChainType && defaultChainId;
+  if (defaultTokenAddress && hasChainDefaults) {
+    for (const t11 of tokens) {
       const matchingChain = t11.chains.find(
-        (c) => c.token_address.toLowerCase() === defaultSourceTokenAddress.toLowerCase() && c.chain_type === defaultSourceChainType && c.chain_id === defaultSourceChainId
+        (c) => c.token_address.toLowerCase() === defaultTokenAddress.toLowerCase() && c.chain_type === defaultChainType && c.chain_id === defaultChainId
       );
       if (matchingChain) {
-        selectedTokenData = t11;
-        selectedChainData = matchingChain;
+        selectedToken = t11;
+        selectedChain = matchingChain;
         break;
       }
     }
   }
-  if (!selectedTokenData && defaultSourceSymbol && hasChainDefaults) {
-    for (const t11 of supportedTokens) {
-      if (t11.symbol !== defaultSourceSymbol) continue;
+  if (!selectedToken && defaultSymbol && hasChainDefaults) {
+    for (const t11 of tokens) {
+      if (t11.symbol !== defaultSymbol) continue;
       const matchedChain = t11.chains.find(
-        (c) => c.chain_type === defaultSourceChainType && c.chain_id === defaultSourceChainId
+        (c) => c.chain_type === defaultChainType && c.chain_id === defaultChainId
       );
       if (matchedChain) {
-        selectedTokenData = t11;
-        selectedChainData = matchedChain;
+        selectedToken = t11;
+        selectedChain = matchedChain;
         break;
       }
     }
   }
-  if (!selectedTokenData) {
-    for (const t11 of supportedTokens) {
+  if (!selectedToken) {
+    for (const t11 of tokens) {
       if (t11.chains.length > 0) {
-        selectedTokenData = t11;
-        selectedChainData = t11.chains[0];
+        selectedToken = t11;
+        selectedChain = t11.chains[0];
         break;
       }
     }
   }
-  if (selectedTokenData && selectedChainData) {
-    return { token: selectedTokenData, chain: selectedChainData };
+  if (selectedToken && selectedChain) {
+    return { token: selectedToken, chain: selectedChain };
   }
   return null;
 }
-function useDefaultSourceToken({
-  supportedTokens,
-  defaultSourceChainType,
-  defaultSourceChainId,
-  defaultSourceTokenAddress,
-  defaultSourceSymbol
+function useDefaultToken({
+  tokens,
+  defaultChainType,
+  defaultChainId,
+  defaultTokenAddress,
+  defaultSymbol
 }) {
   const [token, setToken] = (0, import_react20.useState)(null);
   const [chain, setChain] = (0, import_react20.useState)(null);
   const [initialSelectionDone, setInitialSelectionDone] = (0, import_react20.useState)(false);
   const appliedDefaultsRef = (0, import_react20.useRef)("");
   (0, import_react20.useEffect)(() => {
-    if (!supportedTokens.length) return;
-    const defaultsKey = `${defaultSourceTokenAddress ?? ""}|${defaultSourceSymbol ?? ""}|${defaultSourceChainType ?? ""}|${defaultSourceChainId ?? ""}`;
+    if (!tokens.length) return;
+    const defaultsKey = `${defaultTokenAddress ?? ""}|${defaultSymbol ?? ""}|${defaultChainType ?? ""}|${defaultChainId ?? ""}`;
     const defaultsChanged = appliedDefaultsRef.current !== defaultsKey;
     if (initialSelectionDone && !defaultsChanged) return;
-    const result = resolveSourceToken(
-      supportedTokens,
-      defaultSourceChainType,
-      defaultSourceChainId,
-      defaultSourceTokenAddress,
-      defaultSourceSymbol
+    const result = resolveToken(
+      tokens,
+      defaultChainType,
+      defaultChainId,
+      defaultTokenAddress,
+      defaultSymbol
     );
     if (result) {
       setToken(result.token.symbol);
@@ -55495,16 +55438,16 @@ function useDefaultSourceToken({
       setInitialSelectionDone(true);
     }
   }, [
-    supportedTokens,
-    defaultSourceTokenAddress,
-    defaultSourceSymbol,
-    defaultSourceChainType,
-    defaultSourceChainId,
+    tokens,
+    defaultTokenAddress,
+    defaultSymbol,
+    defaultChainType,
+    defaultChainId,
     initialSelectionDone
   ]);
   (0, import_react20.useEffect)(() => {
-    if (!supportedTokens.length || !token) return;
-    const currentToken = supportedTokens.find((t11) => t11.symbol === token);
+    if (!tokens.length || !token) return;
+    const currentToken = tokens.find((t11) => t11.symbol === token);
     if (!currentToken || currentToken.chains.length === 0) return;
     const isChainAvailable = chain && currentToken.chains.some((c) => {
       return getChainKey(c.chain_id, c.chain_type) === chain;
@@ -55513,9 +55456,24 @@ function useDefaultSourceToken({
       const firstChain = currentToken.chains[0];
       setChain(getChainKey(firstChain.chain_id, firstChain.chain_type));
     }
-  }, [token, supportedTokens, chain]);
+  }, [token, tokens, chain]);
   return { token, chain, setToken, setChain, initialSelectionDone };
 }
+function useDefaultSourceToken({
+  supportedTokens,
+  defaultSourceChainType,
+  defaultSourceChainId,
+  defaultSourceTokenAddress,
+  defaultSourceSymbol
+}) {
+  return useDefaultToken({
+    tokens: supportedTokens,
+    defaultChainType: defaultSourceChainType,
+    defaultChainId: defaultSourceChainId,
+    defaultTokenAddress: defaultSourceTokenAddress,
+    defaultSymbol: defaultSourceSymbol
+  });
+}
 function DepositFooterLinks({
   onGlossaryClick
 }) {
@@ -60469,6 +60427,21 @@ function useSupportedDestinationTokens(publishableKey, enabled = true) {
     enabled
   });
 }
+function useDefaultDestinationToken({
+  destinationTokens,
+  defaultDestinationChainType,
+  defaultDestinationChainId,
+  defaultDestinationTokenAddress,
+  defaultDestinationSymbol
+}) {
+  return useDefaultToken({
+    tokens: destinationTokens,
+    defaultChainType: defaultDestinationChainType,
+    defaultChainId: defaultDestinationChainId,
+    defaultTokenAddress: defaultDestinationTokenAddress,
+    defaultSymbol: defaultDestinationSymbol
+  });
+}
 function useSourceTokenValidation(params) {
   const {
     sourceChainType,
@@ -61715,6 +61688,10 @@ function WithdrawModal({
   sourceTokenSymbol,
   recipientAddress: recipientAddressProp,
   senderAddress,
+  defaultDestinationChainType,
+  defaultDestinationChainId,
+  defaultDestinationTokenAddress,
+  defaultDestinationSymbol,
   onWithdraw,
   onWithdrawSuccess,
   onWithdrawError,
@@ -61758,8 +61735,21 @@ function WithdrawModal({
     publishableKey,
     enabled: open
   });
-  const [selectedToken, setSelectedToken] = (0, import_react28.useState)(null);
-  const [selectedChain, setSelectedChain] = (0, import_react28.useState)(null);
+  const {
+    token: selectedTokenSymbol,
+    chain: selectedChainKey,
+    setToken: setSelectedTokenSymbol,
+    setChain: setSelectedChainKey,
+    initialSelectionDone
+  } = useDefaultDestinationToken({
+    destinationTokens,
+    defaultDestinationChainType,
+    defaultDestinationChainId,
+    defaultDestinationTokenAddress,
+    defaultDestinationSymbol
+  });
+  const selectedToken = selectedTokenSymbol ? destinationTokens.find((t11) => t11.symbol === selectedTokenSymbol) ?? null : null;
+  const selectedChain = selectedToken && selectedChainKey ? selectedToken.chains.find((c) => getChainKey5(c.chain_id, c.chain_type) === selectedChainKey) ?? null : null;
   const [view, setView] = (0, import_react28.useState)("form");
   const [withdrawDepositWalletId, setWithdrawDepositWalletId] = (0, import_react28.useState)();
   const [selectedExecution, setSelectedExecution] = (0, import_react28.useState)(null);
@@ -61801,21 +61791,11 @@ function WithdrawModal({
     setSubmittedTxInfo(txInfo);
     setView("confirming");
   }, []);
-  (0, import_react28.useEffect)(() => {
-    if (!destinationTokens.length || selectedToken) return;
-    const first = destinationTokens[0];
-    if (first?.chains.length > 0) {
-      setSelectedToken(first);
-      setSelectedChain(first.chains[0]);
-    }
-  }, [destinationTokens, selectedToken]);
   const resetViewTimeoutRef = (0, import_react28.useRef)(null);
   const handleClose = (0, import_react28.useCallback)(() => {
     onOpenChange(false);
     if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
     resetViewTimeoutRef.current = setTimeout(() => {
-      setSelectedToken(null);
-      setSelectedChain(null);
       setView("form");
       setSelectedExecution(null);
       setSubmittedTxInfo(null);
@@ -61829,8 +61809,6 @@ function WithdrawModal({
       clearTimeout(resetViewTimeoutRef.current);
       resetViewTimeoutRef.current = null;
     }
-    setSelectedToken(null);
-    setSelectedChain(null);
     setView("form");
     setSelectedExecution(null);
     setSubmittedTxInfo(null);
@@ -61840,19 +61818,13 @@ function WithdrawModal({
     if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
   }, []);
   const handleTokenSymbolChange = (0, import_react28.useCallback)((symbol) => {
-    const tok = destinationTokens.find((t11) => t11.symbol === symbol);
-    if (tok) {
-      setSelectedToken(tok);
-      if (tok.chains.length > 0) setSelectedChain(tok.chains[0]);
-    }
-  }, [destinationTokens]);
+    setSelectedTokenSymbol(symbol);
+  }, [setSelectedTokenSymbol]);
   const handleChainKeyChange = (0, import_react28.useCallback)((chainKey) => {
-    if (!selectedToken) return;
-    const chain = selectedToken.chains.find((c) => getChainKey5(c.chain_id, c.chain_type) === chainKey);
-    if (chain) setSelectedChain(chain);
-  }, [selectedToken]);
+    setSelectedChainKey(chainKey);
+  }, [setSelectedChainKey]);
   const isSourceSupported = sourceValidation?.isSupported ?? null;
-  const isAnyLoading = tokensLoading || isCheckingSourceToken;
+  const isAnyLoading = tokensLoading || isCheckingSourceToken || destinationTokens.length > 0 && !initialSelectionDone;
   const withdrawPoweredByFooter = /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(PoweredByUnifold, { color: colors2.foregroundMuted, className: "uf-flex uf-justify-center uf-shrink-0" }) });
   return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(PortalContainerProvider, { value: hideOverlay ? containerEl : null, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Dialog2, { open: hideOverlay || open, onOpenChange: hideOverlay ? void 0 : handleClose, modal: !hideOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
     DialogContent2,
@@ -62262,6 +62234,10 @@ function UnifoldProvider2({
             sourceTokenAddress: withdrawConfig.sourceTokenAddress,
             sourceTokenSymbol: withdrawConfig.sourceTokenSymbol,
             recipientAddress: withdrawConfig.recipientAddress,
+            defaultDestinationChainType: withdrawConfig.defaultDestinationChainType,
+            defaultDestinationChainId: withdrawConfig.defaultDestinationChainId,
+            defaultDestinationTokenAddress: withdrawConfig.defaultDestinationTokenAddress,
+            defaultDestinationSymbol: withdrawConfig.defaultDestinationSymbol,
             senderAddress: withdrawConfig.senderAddress,
             onWithdraw: withdrawConfig.withdraw,
             onWithdrawSuccess: handleWithdrawSuccess,

package/dist/index.mjs

@@ -50415,16 +50415,6 @@ function BuyWithCard({
     window.open(sessionStartUrl, "_blank");
     handleViewChange("onramp");
   };
-  const getProviderBadges = (quote, allQuotes) => {
-    const badges = [];
-    const maxDestination = Math.max(
-      ...allQuotes.map((q) => q.destination_amount)
-    );
-    if (quote.destination_amount === maxDestination) {
-      badges.push("Best price");
-    }
-    return badges;
-  };
   const sortedQuotes = [...quotes].sort(
     (a, b) => b.destination_amount - a.destination_amount
   );
@@ -50629,31 +50619,7 @@ function BuyWithCard({
                               children: selectedProvider.service_provider_display_name
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-0.5", children: [
-                            isAutoSelected && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                              "span",
-                              {
-                                className: "uf-text-[10px] uf-font-normal",
-                                style: {
-                                  color: colors2.success,
-                                  fontFamily: fonts.regular
-                                },
-                                children: "Best price"
-                              }
-                            ),
-                            isAutoSelected && selectedProvider.low_kyc === false && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                              "span",
-                              {
-                                className: "uf-text-[10px]",
-                                style: {
-                                  color: components.card.labelColor,
-                                  fontFamily: fonts.regular
-                                },
-                                children: "\u2022"
-                              }
-                            ),
-                            selectedProvider.low_kyc === false && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "uf-text-[10px] uf-text-muted-foreground uf-font-normal", children: "No document upload" })
-                          ] })
+                          selectedProvider.low_kyc === false && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "uf-text-[10px] uf-text-muted-foreground uf-font-normal", children: "No document upload" }) })
                         ] }),
                         quotes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                           ChevronRight,
@@ -50717,7 +50683,6 @@ function BuyWithCard({
           {
             className: `uf-transition-all uf-duration-300 uf-min-h-[420px] uf-flex uf-flex-col ${showQuotesView && !showOnrampView ? "uf-opacity-100" : "uf-opacity-0 uf-pointer-events-none uf-absolute uf-inset-0"}`,
             children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uf-space-y-2 uf-pt-2 uf-pb-8 uf-overflow-y-auto uf-flex-1 uf-min-h-0", children: sortedQuotes.map((quote, index2) => {
-              const badges = getProviderBadges(quote, sortedQuotes);
               const displayName = quote.service_provider_display_name;
               const isSelected = selectedProvider?.service_provider === quote.service_provider;
               return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
@@ -50760,39 +50725,17 @@ function BuyWithCard({
                             children: displayName
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-0.5", children: [
-                          badges.map((badge, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-                            "span",
-                            {
-                              className: "uf-text-[10px] uf-font-normal",
-                              style: { color: colors2.success },
-                              children: [
-                                badge,
-                                i < badges.length - 1 && ","
-                              ]
+                        quote.low_kyc === false && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                          "span",
+                          {
+                            className: "uf-text-[10px] uf-font-normal",
+                            style: {
+                              color: components.card.subtextRightColor,
+                              fontFamily: fonts.regular
                             },
-                            i
-                          )),
-                          quote.low_kyc === false && badges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                            "span",
-                            {
-                              className: "uf-text-[10px]",
-                              style: { color: components.card.subtextRightColor },
-                              children: "\u2022"
-                            }
-                          ),
-                          quote.low_kyc === false && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                            "span",
-                            {
-                              className: "uf-text-[10px] uf-font-normal",
-                              style: {
-                                color: components.card.subtextRightColor,
-                                fontFamily: fonts.regular
-                              },
-                              children: "No document upload"
-                            }
-                          )
-                        ] })
+                            children: "No document upload"
+                          }
+                        ) })
                       ] })
                     ] }),
                     /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "uf-text-right", children: [
@@ -55408,72 +55351,72 @@ function DepositPollingUi({
 var getChainKey = (chainId, chainType) => {
   return `${chainType}:${chainId}`;
 };
-function resolveSourceToken(supportedTokens, defaultSourceChainType, defaultSourceChainId, defaultSourceTokenAddress, defaultSourceSymbol) {
-  if (!supportedTokens.length) return null;
-  let selectedTokenData;
-  let selectedChainData;
-  const hasChainDefaults = defaultSourceChainType && defaultSourceChainId;
-  if (defaultSourceTokenAddress && hasChainDefaults) {
-    for (const t11 of supportedTokens) {
+function resolveToken(tokens, defaultChainType, defaultChainId, defaultTokenAddress, defaultSymbol) {
+  if (!tokens.length) return null;
+  let selectedToken;
+  let selectedChain;
+  const hasChainDefaults = defaultChainType && defaultChainId;
+  if (defaultTokenAddress && hasChainDefaults) {
+    for (const t11 of tokens) {
       const matchingChain = t11.chains.find(
-        (c) => c.token_address.toLowerCase() === defaultSourceTokenAddress.toLowerCase() && c.chain_type === defaultSourceChainType && c.chain_id === defaultSourceChainId
+        (c) => c.token_address.toLowerCase() === defaultTokenAddress.toLowerCase() && c.chain_type === defaultChainType && c.chain_id === defaultChainId
       );
       if (matchingChain) {
-        selectedTokenData = t11;
-        selectedChainData = matchingChain;
+        selectedToken = t11;
+        selectedChain = matchingChain;
         break;
       }
     }
   }
-  if (!selectedTokenData && defaultSourceSymbol && hasChainDefaults) {
-    for (const t11 of supportedTokens) {
-      if (t11.symbol !== defaultSourceSymbol) continue;
+  if (!selectedToken && defaultSymbol && hasChainDefaults) {
+    for (const t11 of tokens) {
+      if (t11.symbol !== defaultSymbol) continue;
       const matchedChain = t11.chains.find(
-        (c) => c.chain_type === defaultSourceChainType && c.chain_id === defaultSourceChainId
+        (c) => c.chain_type === defaultChainType && c.chain_id === defaultChainId
       );
       if (matchedChain) {
-        selectedTokenData = t11;
-        selectedChainData = matchedChain;
+        selectedToken = t11;
+        selectedChain = matchedChain;
         break;
       }
     }
   }
-  if (!selectedTokenData) {
-    for (const t11 of supportedTokens) {
+  if (!selectedToken) {
+    for (const t11 of tokens) {
       if (t11.chains.length > 0) {
-        selectedTokenData = t11;
-        selectedChainData = t11.chains[0];
+        selectedToken = t11;
+        selectedChain = t11.chains[0];
         break;
       }
     }
   }
-  if (selectedTokenData && selectedChainData) {
-    return { token: selectedTokenData, chain: selectedChainData };
+  if (selectedToken && selectedChain) {
+    return { token: selectedToken, chain: selectedChain };
   }
   return null;
 }
-function useDefaultSourceToken({
-  supportedTokens,
-  defaultSourceChainType,
-  defaultSourceChainId,
-  defaultSourceTokenAddress,
-  defaultSourceSymbol
+function useDefaultToken({
+  tokens,
+  defaultChainType,
+  defaultChainId,
+  defaultTokenAddress,
+  defaultSymbol
 }) {
   const [token, setToken] = (0, import_react20.useState)(null);
   const [chain, setChain] = (0, import_react20.useState)(null);
   const [initialSelectionDone, setInitialSelectionDone] = (0, import_react20.useState)(false);
   const appliedDefaultsRef = (0, import_react20.useRef)("");
   (0, import_react20.useEffect)(() => {
-    if (!supportedTokens.length) return;
-    const defaultsKey = `${defaultSourceTokenAddress ?? ""}|${defaultSourceSymbol ?? ""}|${defaultSourceChainType ?? ""}|${defaultSourceChainId ?? ""}`;
+    if (!tokens.length) return;
+    const defaultsKey = `${defaultTokenAddress ?? ""}|${defaultSymbol ?? ""}|${defaultChainType ?? ""}|${defaultChainId ?? ""}`;
     const defaultsChanged = appliedDefaultsRef.current !== defaultsKey;
     if (initialSelectionDone && !defaultsChanged) return;
-    const result = resolveSourceToken(
-      supportedTokens,
-      defaultSourceChainType,
-      defaultSourceChainId,
-      defaultSourceTokenAddress,
-      defaultSourceSymbol
+    const result = resolveToken(
+      tokens,
+      defaultChainType,
+      defaultChainId,
+      defaultTokenAddress,
+      defaultSymbol
     );
     if (result) {
       setToken(result.token.symbol);
@@ -55482,16 +55425,16 @@ function useDefaultSourceToken({
       setInitialSelectionDone(true);
     }
   }, [
-    supportedTokens,
-    defaultSourceTokenAddress,
-    defaultSourceSymbol,
-    defaultSourceChainType,
-    defaultSourceChainId,
+    tokens,
+    defaultTokenAddress,
+    defaultSymbol,
+    defaultChainType,
+    defaultChainId,
     initialSelectionDone
   ]);
   (0, import_react20.useEffect)(() => {
-    if (!supportedTokens.length || !token) return;
-    const currentToken = supportedTokens.find((t11) => t11.symbol === token);
+    if (!tokens.length || !token) return;
+    const currentToken = tokens.find((t11) => t11.symbol === token);
     if (!currentToken || currentToken.chains.length === 0) return;
     const isChainAvailable = chain && currentToken.chains.some((c) => {
       return getChainKey(c.chain_id, c.chain_type) === chain;
@@ -55500,9 +55443,24 @@ function useDefaultSourceToken({
       const firstChain = currentToken.chains[0];
       setChain(getChainKey(firstChain.chain_id, firstChain.chain_type));
     }
-  }, [token, supportedTokens, chain]);
+  }, [token, tokens, chain]);
   return { token, chain, setToken, setChain, initialSelectionDone };
 }
+function useDefaultSourceToken({
+  supportedTokens,
+  defaultSourceChainType,
+  defaultSourceChainId,
+  defaultSourceTokenAddress,
+  defaultSourceSymbol
+}) {
+  return useDefaultToken({
+    tokens: supportedTokens,
+    defaultChainType: defaultSourceChainType,
+    defaultChainId: defaultSourceChainId,
+    defaultTokenAddress: defaultSourceTokenAddress,
+    defaultSymbol: defaultSourceSymbol
+  });
+}
 function DepositFooterLinks({
   onGlossaryClick
 }) {
@@ -60456,6 +60414,21 @@ function useSupportedDestinationTokens(publishableKey, enabled = true) {
     enabled
   });
 }
+function useDefaultDestinationToken({
+  destinationTokens,
+  defaultDestinationChainType,
+  defaultDestinationChainId,
+  defaultDestinationTokenAddress,
+  defaultDestinationSymbol
+}) {
+  return useDefaultToken({
+    tokens: destinationTokens,
+    defaultChainType: defaultDestinationChainType,
+    defaultChainId: defaultDestinationChainId,
+    defaultTokenAddress: defaultDestinationTokenAddress,
+    defaultSymbol: defaultDestinationSymbol
+  });
+}
 function useSourceTokenValidation(params) {
   const {
     sourceChainType,
@@ -61702,6 +61675,10 @@ function WithdrawModal({
   sourceTokenSymbol,
   recipientAddress: recipientAddressProp,
   senderAddress,
+  defaultDestinationChainType,
+  defaultDestinationChainId,
+  defaultDestinationTokenAddress,
+  defaultDestinationSymbol,
   onWithdraw,
   onWithdrawSuccess,
   onWithdrawError,
@@ -61745,8 +61722,21 @@ function WithdrawModal({
     publishableKey,
     enabled: open
   });
-  const [selectedToken, setSelectedToken] = (0, import_react28.useState)(null);
-  const [selectedChain, setSelectedChain] = (0, import_react28.useState)(null);
+  const {
+    token: selectedTokenSymbol,
+    chain: selectedChainKey,
+    setToken: setSelectedTokenSymbol,
+    setChain: setSelectedChainKey,
+    initialSelectionDone
+  } = useDefaultDestinationToken({
+    destinationTokens,
+    defaultDestinationChainType,
+    defaultDestinationChainId,
+    defaultDestinationTokenAddress,
+    defaultDestinationSymbol
+  });
+  const selectedToken = selectedTokenSymbol ? destinationTokens.find((t11) => t11.symbol === selectedTokenSymbol) ?? null : null;
+  const selectedChain = selectedToken && selectedChainKey ? selectedToken.chains.find((c) => getChainKey5(c.chain_id, c.chain_type) === selectedChainKey) ?? null : null;
   const [view, setView] = (0, import_react28.useState)("form");
   const [withdrawDepositWalletId, setWithdrawDepositWalletId] = (0, import_react28.useState)();
   const [selectedExecution, setSelectedExecution] = (0, import_react28.useState)(null);
@@ -61788,21 +61778,11 @@ function WithdrawModal({
     setSubmittedTxInfo(txInfo);
     setView("confirming");
   }, []);
-  (0, import_react28.useEffect)(() => {
-    if (!destinationTokens.length || selectedToken) return;
-    const first = destinationTokens[0];
-    if (first?.chains.length > 0) {
-      setSelectedToken(first);
-      setSelectedChain(first.chains[0]);
-    }
-  }, [destinationTokens, selectedToken]);
   const resetViewTimeoutRef = (0, import_react28.useRef)(null);
   const handleClose = (0, import_react28.useCallback)(() => {
     onOpenChange(false);
     if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
     resetViewTimeoutRef.current = setTimeout(() => {
-      setSelectedToken(null);
-      setSelectedChain(null);
       setView("form");
       setSelectedExecution(null);
       setSubmittedTxInfo(null);
@@ -61816,8 +61796,6 @@ function WithdrawModal({
       clearTimeout(resetViewTimeoutRef.current);
       resetViewTimeoutRef.current = null;
     }
-    setSelectedToken(null);
-    setSelectedChain(null);
     setView("form");
     setSelectedExecution(null);
     setSubmittedTxInfo(null);
@@ -61827,19 +61805,13 @@ function WithdrawModal({
     if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
   }, []);
   const handleTokenSymbolChange = (0, import_react28.useCallback)((symbol) => {
-    const tok = destinationTokens.find((t11) => t11.symbol === symbol);
-    if (tok) {
-      setSelectedToken(tok);
-      if (tok.chains.length > 0) setSelectedChain(tok.chains[0]);
-    }
-  }, [destinationTokens]);
+    setSelectedTokenSymbol(symbol);
+  }, [setSelectedTokenSymbol]);
   const handleChainKeyChange = (0, import_react28.useCallback)((chainKey) => {
-    if (!selectedToken) return;
-    const chain = selectedToken.chains.find((c) => getChainKey5(c.chain_id, c.chain_type) === chainKey);
-    if (chain) setSelectedChain(chain);
-  }, [selectedToken]);
+    setSelectedChainKey(chainKey);
+  }, [setSelectedChainKey]);
   const isSourceSupported = sourceValidation?.isSupported ?? null;
-  const isAnyLoading = tokensLoading || isCheckingSourceToken;
+  const isAnyLoading = tokensLoading || isCheckingSourceToken || destinationTokens.length > 0 && !initialSelectionDone;
   const withdrawPoweredByFooter = /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(PoweredByUnifold, { color: colors2.foregroundMuted, className: "uf-flex uf-justify-center uf-shrink-0" }) });
   return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(PortalContainerProvider, { value: hideOverlay ? containerEl : null, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Dialog2, { open: hideOverlay || open, onOpenChange: hideOverlay ? void 0 : handleClose, modal: !hideOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
     DialogContent2,
@@ -62249,6 +62221,10 @@ function UnifoldProvider2({
             sourceTokenAddress: withdrawConfig.sourceTokenAddress,
             sourceTokenSymbol: withdrawConfig.sourceTokenSymbol,
             recipientAddress: withdrawConfig.recipientAddress,
+            defaultDestinationChainType: withdrawConfig.defaultDestinationChainType,
+            defaultDestinationChainId: withdrawConfig.defaultDestinationChainId,
+            defaultDestinationTokenAddress: withdrawConfig.defaultDestinationTokenAddress,
+            defaultDestinationSymbol: withdrawConfig.defaultDestinationSymbol,
             senderAddress: withdrawConfig.senderAddress,
             onWithdraw: withdrawConfig.withdraw,
             onWithdrawSuccess: handleWithdrawSuccess,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unifold/ui-web",
-  "version": "0.1.48",
+  "version": "0.1.49",
   "description": "Unifold UI Web - Framework-agnostic deposit widget",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -30,10 +30,10 @@
     "@types/react-dom": "^19.0.0",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0",
-    "@unifold/connect-react": "0.1.48",
-    "@unifold/react-provider": "0.1.48",
-    "@unifold/core": "0.1.48",
-    "@unifold/ui-react": "0.1.48"
+    "@unifold/connect-react": "0.1.49",
+    "@unifold/core": "0.1.49",
+    "@unifold/react-provider": "0.1.49",
+    "@unifold/ui-react": "0.1.49"
   },
   "keywords": [
     "unifold",