@unifold/connect-react 0.1.48 → 0.1.49

package/dist/index.d.mts

@@ -149,6 +149,18 @@ interface WithdrawConfig {
     sourceTokenSymbol?: string;
     /** Optional: pre-fill the recipient address the user is withdrawing to */
     recipientAddress?: string;
+    /**
+     * Pre-select the destination (receive) token/chain in the withdraw view.
+     * All four props are optional. To match a specific token, provide `chainType` + `chainId` + (`symbol` OR `tokenAddress`).
+     * If omitted or no match is found in `/supported_destination_tokens`, the first available token and chain are used.
+     */
+    defaultDestinationChainType?: string;
+    /** Destination chain ID (e.g. `"mainnet"`, `"137"`). Must be paired with `defaultDestinationChainType` + symbol or token address. */
+    defaultDestinationChainId?: string;
+    /** Destination token contract address. Must be paired with `defaultDestinationChainType` + `defaultDestinationChainId`. */
+    defaultDestinationTokenAddress?: string;
+    /** Destination token symbol (e.g. `"USDC"`). Must be paired with `defaultDestinationChainType` + `defaultDestinationChainId`. */
+    defaultDestinationSymbol?: string;
     /**
      * The user's wallet address (the sender). Used to:
      * 1. Fetch balance for quick-select chips (25%/50%/75%/MAX)

package/dist/index.d.ts

@@ -149,6 +149,18 @@ interface WithdrawConfig {
     sourceTokenSymbol?: string;
     /** Optional: pre-fill the recipient address the user is withdrawing to */
     recipientAddress?: string;
+    /**
+     * Pre-select the destination (receive) token/chain in the withdraw view.
+     * All four props are optional. To match a specific token, provide `chainType` + `chainId` + (`symbol` OR `tokenAddress`).
+     * If omitted or no match is found in `/supported_destination_tokens`, the first available token and chain are used.
+     */
+    defaultDestinationChainType?: string;
+    /** Destination chain ID (e.g. `"mainnet"`, `"137"`). Must be paired with `defaultDestinationChainType` + symbol or token address. */
+    defaultDestinationChainId?: string;
+    /** Destination token contract address. Must be paired with `defaultDestinationChainType` + `defaultDestinationChainId`. */
+    defaultDestinationTokenAddress?: string;
+    /** Destination token symbol (e.g. `"USDC"`). Must be paired with `defaultDestinationChainType` + `defaultDestinationChainId`. */
+    defaultDestinationSymbol?: string;
     /**
      * The user's wallet address (the sender). Used to:
      * 1. Fetch balance for quick-select chips (25%/50%/75%/MAX)

package/dist/index.js

@@ -13783,16 +13783,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
   );
@@ -13997,31 +13987,7 @@ function BuyWithCard({
                               children: selectedProvider.service_provider_display_name
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-0.5", children: [
-                            isAutoSelected && /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.jsx)(
-                              "span",
-                              {
-                                className: "uf-text-[10px]",
-                                style: {
-                                  color: components.card.labelColor,
-                                  fontFamily: fonts.regular
-                                },
-                                children: "\u2022"
-                              }
-                            ),
-                            selectedProvider.low_kyc === false && /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.jsx)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "uf-text-[10px] uf-text-muted-foreground uf-font-normal", children: "No document upload" }) })
                         ] }),
                         quotes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                           ChevronRight,
@@ -14085,7 +14051,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_runtime27.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_runtime27.jsxs)(
@@ -14128,39 +14093,17 @@ function BuyWithCard({
                             children: displayName
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.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_runtime27.jsx)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.jsx)(
-                            "span",
-                            {
-                              className: "uf-text-[10px]",
-                              style: { color: components.card.subtextRightColor },
-                              children: "\u2022"
-                            }
-                          ),
-                          quote.low_kyc === false && /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.jsxs)("div", { className: "uf-text-right", children: [
@@ -18776,72 +18719,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_react22.useState)(null);
   const [chain, setChain] = (0, import_react22.useState)(null);
   const [initialSelectionDone, setInitialSelectionDone] = (0, import_react22.useState)(false);
   const appliedDefaultsRef = (0, import_react22.useRef)("");
   (0, import_react22.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);
@@ -18850,16 +18793,16 @@ function useDefaultSourceToken({
       setInitialSelectionDone(true);
     }
   }, [
-    supportedTokens,
-    defaultSourceTokenAddress,
-    defaultSourceSymbol,
-    defaultSourceChainType,
-    defaultSourceChainId,
+    tokens,
+    defaultTokenAddress,
+    defaultSymbol,
+    defaultChainType,
+    defaultChainId,
     initialSelectionDone
   ]);
   (0, import_react22.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;
@@ -18868,9 +18811,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
 }) {
@@ -23824,6 +23782,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,
@@ -25070,6 +25043,10 @@ function WithdrawModal({
   sourceTokenSymbol,
   recipientAddress: recipientAddressProp,
   senderAddress,
+  defaultDestinationChainType,
+  defaultDestinationChainId,
+  defaultDestinationTokenAddress,
+  defaultDestinationSymbol,
   onWithdraw,
   onWithdrawSuccess,
   onWithdrawError,
@@ -25113,8 +25090,21 @@ function WithdrawModal({
     publishableKey,
     enabled: open
   });
-  const [selectedToken, setSelectedToken] = (0, import_react27.useState)(null);
-  const [selectedChain, setSelectedChain] = (0, import_react27.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_react27.useState)("form");
   const [withdrawDepositWalletId, setWithdrawDepositWalletId] = (0, import_react27.useState)();
   const [selectedExecution, setSelectedExecution] = (0, import_react27.useState)(null);
@@ -25156,21 +25146,11 @@ function WithdrawModal({
     setSubmittedTxInfo(txInfo);
     setView("confirming");
   }, []);
-  (0, import_react27.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_react27.useRef)(null);
   const handleClose = (0, import_react27.useCallback)(() => {
     onOpenChange(false);
     if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
     resetViewTimeoutRef.current = setTimeout(() => {
-      setSelectedToken(null);
-      setSelectedChain(null);
       setView("form");
       setSelectedExecution(null);
       setSubmittedTxInfo(null);
@@ -25184,8 +25164,6 @@ function WithdrawModal({
       clearTimeout(resetViewTimeoutRef.current);
       resetViewTimeoutRef.current = null;
     }
-    setSelectedToken(null);
-    setSelectedChain(null);
     setView("form");
     setSelectedExecution(null);
     setSubmittedTxInfo(null);
@@ -25195,19 +25173,13 @@ function WithdrawModal({
     if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
   }, []);
   const handleTokenSymbolChange = (0, import_react27.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_react27.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_runtime74.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(PoweredByUnifold, { color: colors2.foregroundMuted, className: "uf-flex uf-justify-center uf-shrink-0" }) });
   return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(PortalContainerProvider, { value: hideOverlay ? containerEl : null, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Dialog2, { open: hideOverlay || open, onOpenChange: hideOverlay ? void 0 : handleClose, modal: !hideOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
     DialogContent2,
@@ -25620,6 +25592,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

@@ -13772,16 +13772,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
   );
@@ -13986,31 +13976,7 @@ function BuyWithCard({
                               children: selectedProvider.service_provider_display_name
                             }
                           ),
-                          /* @__PURE__ */ jsxs8("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-0.5", children: [
-                            isAutoSelected && /* @__PURE__ */ jsx102(
-                              "span",
-                              {
-                                className: "uf-text-[10px] uf-font-normal",
-                                style: {
-                                  color: colors2.success,
-                                  fontFamily: fonts.regular
-                                },
-                                children: "Best price"
-                              }
-                            ),
-                            isAutoSelected && selectedProvider.low_kyc === false && /* @__PURE__ */ jsx102(
-                              "span",
-                              {
-                                className: "uf-text-[10px]",
-                                style: {
-                                  color: components.card.labelColor,
-                                  fontFamily: fonts.regular
-                                },
-                                children: "\u2022"
-                              }
-                            ),
-                            selectedProvider.low_kyc === false && /* @__PURE__ */ jsx102("span", { className: "uf-text-[10px] uf-text-muted-foreground uf-font-normal", children: "No document upload" })
-                          ] })
+                          selectedProvider.low_kyc === false && /* @__PURE__ */ jsx102("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-0.5", children: /* @__PURE__ */ jsx102("span", { className: "uf-text-[10px] uf-text-muted-foreground uf-font-normal", children: "No document upload" }) })
                         ] }),
                         quotes.length > 0 && /* @__PURE__ */ jsx102(
                           ChevronRight,
@@ -14074,7 +14040,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__ */ jsx102("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__ */ jsxs8(
@@ -14117,39 +14082,17 @@ function BuyWithCard({
                             children: displayName
                           }
                         ),
-                        /* @__PURE__ */ jsxs8("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-0.5", children: [
-                          badges.map((badge, i) => /* @__PURE__ */ jsxs8(
-                            "span",
-                            {
-                              className: "uf-text-[10px] uf-font-normal",
-                              style: { color: colors2.success },
-                              children: [
-                                badge,
-                                i < badges.length - 1 && ","
-                              ]
+                        quote.low_kyc === false && /* @__PURE__ */ jsx102("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-0.5", children: /* @__PURE__ */ jsx102(
+                          "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__ */ jsx102(
-                            "span",
-                            {
-                              className: "uf-text-[10px]",
-                              style: { color: components.card.subtextRightColor },
-                              children: "\u2022"
-                            }
-                          ),
-                          quote.low_kyc === false && /* @__PURE__ */ jsx102(
-                            "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__ */ jsxs8("div", { className: "uf-text-right", children: [
@@ -18765,72 +18708,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] = useState192(null);
   const [chain, setChain] = useState192(null);
   const [initialSelectionDone, setInitialSelectionDone] = useState192(false);
   const appliedDefaultsRef = useRef52("");
   useEffect162(() => {
-    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);
@@ -18839,16 +18782,16 @@ function useDefaultSourceToken({
       setInitialSelectionDone(true);
     }
   }, [
-    supportedTokens,
-    defaultSourceTokenAddress,
-    defaultSourceSymbol,
-    defaultSourceChainType,
-    defaultSourceChainId,
+    tokens,
+    defaultTokenAddress,
+    defaultSymbol,
+    defaultChainType,
+    defaultChainId,
     initialSelectionDone
   ]);
   useEffect162(() => {
-    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;
@@ -18857,9 +18800,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
 }) {
@@ -23813,6 +23771,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,
@@ -25059,6 +25032,10 @@ function WithdrawModal({
   sourceTokenSymbol,
   recipientAddress: recipientAddressProp,
   senderAddress,
+  defaultDestinationChainType,
+  defaultDestinationChainId,
+  defaultDestinationTokenAddress,
+  defaultDestinationSymbol,
   onWithdraw,
   onWithdrawSuccess,
   onWithdrawError,
@@ -25102,8 +25079,21 @@ function WithdrawModal({
     publishableKey,
     enabled: open
   });
-  const [selectedToken, setSelectedToken] = useState32(null);
-  const [selectedChain, setSelectedChain] = useState32(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] = useState32("form");
   const [withdrawDepositWalletId, setWithdrawDepositWalletId] = useState32();
   const [selectedExecution, setSelectedExecution] = useState32(null);
@@ -25145,21 +25135,11 @@ function WithdrawModal({
     setSubmittedTxInfo(txInfo);
     setView("confirming");
   }, []);
-  useEffect272(() => {
-    if (!destinationTokens.length || selectedToken) return;
-    const first = destinationTokens[0];
-    if (first?.chains.length > 0) {
-      setSelectedToken(first);
-      setSelectedChain(first.chains[0]);
-    }
-  }, [destinationTokens, selectedToken]);
   const resetViewTimeoutRef = useRef102(null);
   const handleClose = useCallback72(() => {
     onOpenChange(false);
     if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
     resetViewTimeoutRef.current = setTimeout(() => {
-      setSelectedToken(null);
-      setSelectedChain(null);
       setView("form");
       setSelectedExecution(null);
       setSubmittedTxInfo(null);
@@ -25173,8 +25153,6 @@ function WithdrawModal({
       clearTimeout(resetViewTimeoutRef.current);
       resetViewTimeoutRef.current = null;
     }
-    setSelectedToken(null);
-    setSelectedChain(null);
     setView("form");
     setSelectedExecution(null);
     setSubmittedTxInfo(null);
@@ -25184,19 +25162,13 @@ function WithdrawModal({
     if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
   }, []);
   const handleTokenSymbolChange = useCallback72((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 = useCallback72((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__ */ jsx57("div", { className: "uf-pt-3", children: /* @__PURE__ */ jsx57(PoweredByUnifold, { color: colors2.foregroundMuted, className: "uf-flex uf-justify-center uf-shrink-0" }) });
   return /* @__PURE__ */ jsx57(PortalContainerProvider, { value: hideOverlay ? containerEl : null, children: /* @__PURE__ */ jsx57(Dialog2, { open: hideOverlay || open, onOpenChange: hideOverlay ? void 0 : handleClose, modal: !hideOverlay, children: /* @__PURE__ */ jsx57(
     DialogContent2,
@@ -25609,6 +25581,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/connect-react",
-  "version": "0.1.48",
+  "version": "0.1.49",
   "description": "Unifold Connect React - Complete React SDK with UI components for crypto deposits",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -26,9 +26,9 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.90.11",
-    "@unifold/core": "0.1.48",
-    "@unifold/react-provider": "0.1.48",
-    "@unifold/ui-react": "0.1.48"
+    "@unifold/core": "0.1.49",
+    "@unifold/ui-react": "0.1.49",
+    "@unifold/react-provider": "0.1.49"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",