@unifold/ui-react 0.1.47 → 0.1.49

package/dist/index.d.mts

@@ -528,6 +528,18 @@ interface WithdrawModalProps {
     sourceTokenSymbol?: string;
     recipientAddress?: string;
     senderAddress: 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;
     onWithdraw: (txInfo: WithdrawTransactionInfo) => void | Promise<void>;
     onWithdrawSuccess?: (data: {
         message: string;
@@ -541,7 +553,7 @@ interface WithdrawModalProps {
     theme?: "light" | "dark" | "auto";
     hideOverlay?: boolean;
 }
-declare function WithdrawModal({ open, onOpenChange, publishableKey, modalTitle, externalUserId, sourceChainType, sourceChainId, sourceTokenAddress, sourceTokenSymbol, recipientAddress: recipientAddressProp, senderAddress, onWithdraw, onWithdrawSuccess, onWithdrawError, theme, hideOverlay, }: WithdrawModalProps): react_jsx_runtime.JSX.Element;
+declare function WithdrawModal({ open, onOpenChange, publishableKey, modalTitle, externalUserId, sourceChainType, sourceChainId, sourceTokenAddress, sourceTokenSymbol, recipientAddress: recipientAddressProp, senderAddress, defaultDestinationChainType, defaultDestinationChainId, defaultDestinationTokenAddress, defaultDestinationSymbol, onWithdraw, onWithdrawSuccess, onWithdrawError, theme, hideOverlay, }: WithdrawModalProps): react_jsx_runtime.JSX.Element;
 
 interface WithdrawTokenSelectorProps {
     tokens: DestinationToken[];

package/dist/index.d.ts

@@ -528,6 +528,18 @@ interface WithdrawModalProps {
     sourceTokenSymbol?: string;
     recipientAddress?: string;
     senderAddress: 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;
     onWithdraw: (txInfo: WithdrawTransactionInfo) => void | Promise<void>;
     onWithdrawSuccess?: (data: {
         message: string;
@@ -541,7 +553,7 @@ interface WithdrawModalProps {
     theme?: "light" | "dark" | "auto";
     hideOverlay?: boolean;
 }
-declare function WithdrawModal({ open, onOpenChange, publishableKey, modalTitle, externalUserId, sourceChainType, sourceChainId, sourceTokenAddress, sourceTokenSymbol, recipientAddress: recipientAddressProp, senderAddress, onWithdraw, onWithdrawSuccess, onWithdrawError, theme, hideOverlay, }: WithdrawModalProps): react_jsx_runtime.JSX.Element;
+declare function WithdrawModal({ open, onOpenChange, publishableKey, modalTitle, externalUserId, sourceChainType, sourceChainId, sourceTokenAddress, sourceTokenSymbol, recipientAddress: recipientAddressProp, senderAddress, defaultDestinationChainType, defaultDestinationChainId, defaultDestinationTokenAddress, defaultDestinationSymbol, onWithdraw, onWithdrawSuccess, onWithdrawError, theme, hideOverlay, }: WithdrawModalProps): react_jsx_runtime.JSX.Element;
 
 interface WithdrawTokenSelectorProps {
     tokens: DestinationToken[];

package/dist/index.js

@@ -2882,16 +2882,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
   );
@@ -3096,31 +3086,7 @@ function BuyWithCard({
                               children: selectedProvider.service_provider_display_name
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-0.5", children: [
-                            isAutoSelected && /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)(
-                              "span",
-                              {
-                                className: "uf-text-[10px]",
-                                style: {
-                                  color: components.card.labelColor,
-                                  fontFamily: fonts.regular
-                                },
-                                children: "\u2022"
-                              }
-                            ),
-                            selectedProvider.low_kyc === false && /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "uf-text-[10px] uf-text-muted-foreground uf-font-normal", children: "No document upload" }) })
                         ] }),
                         quotes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                           import_lucide_react6.ChevronRight,
@@ -3184,7 +3150,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_runtime10.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, index) => {
-              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_runtime10.jsxs)(
@@ -3227,39 +3192,17 @@ function BuyWithCard({
                             children: displayName
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.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_runtime10.jsx)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)(
-                            "span",
-                            {
-                              className: "uf-text-[10px]",
-                              style: { color: components.card.subtextRightColor },
-                              children: "\u2022"
-                            }
-                          ),
-                          quote.low_kyc === false && /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsxs)("div", { className: "uf-text-right", children: [
@@ -8032,77 +7975,77 @@ function DepositPollingUi({
   return null;
 }
 
-// src/hooks/use-default-source-token.ts
+// src/hooks/use-default-token.ts
 var import_react13 = require("react");
 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_react13.useState)(null);
   const [chain, setChain] = (0, import_react13.useState)(null);
   const [initialSelectionDone, setInitialSelectionDone] = (0, import_react13.useState)(false);
   const appliedDefaultsRef = (0, import_react13.useRef)("");
   (0, import_react13.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);
@@ -8111,16 +8054,16 @@ function useDefaultSourceToken({
       setInitialSelectionDone(true);
     }
   }, [
-    supportedTokens,
-    defaultSourceTokenAddress,
-    defaultSourceSymbol,
-    defaultSourceChainType,
-    defaultSourceChainId,
+    tokens,
+    defaultTokenAddress,
+    defaultSymbol,
+    defaultChainType,
+    defaultChainId,
     initialSelectionDone
   ]);
   (0, import_react13.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;
@@ -8129,10 +8072,27 @@ 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 };
 }
 
+// src/hooks/use-default-source-token.ts
+function useDefaultSourceToken({
+  supportedTokens,
+  defaultSourceChainType,
+  defaultSourceChainId,
+  defaultSourceTokenAddress,
+  defaultSourceSymbol
+}) {
+  return useDefaultToken({
+    tokens: supportedTokens,
+    defaultChainType: defaultSourceChainType,
+    defaultChainId: defaultSourceChainId,
+    defaultTokenAddress: defaultSourceTokenAddress,
+    defaultSymbol: defaultSourceSymbol
+  });
+}
+
 // src/components/deposits/shared/DepositFooterLinks.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
 function DepositFooterLinks({
@@ -13205,6 +13165,23 @@ function useSupportedDestinationTokens(publishableKey, enabled = true) {
   });
 }
 
+// src/hooks/use-default-destination-token.ts
+function useDefaultDestinationToken({
+  destinationTokens,
+  defaultDestinationChainType,
+  defaultDestinationChainId,
+  defaultDestinationTokenAddress,
+  defaultDestinationSymbol
+}) {
+  return useDefaultToken({
+    tokens: destinationTokens,
+    defaultChainType: defaultDestinationChainType,
+    defaultChainId: defaultDestinationChainId,
+    defaultTokenAddress: defaultDestinationTokenAddress,
+    defaultSymbol: defaultDestinationSymbol
+  });
+}
+
 // src/hooks/use-source-token-validation.ts
 var import_react_query12 = require("@tanstack/react-query");
 var import_core27 = require("@unifold/core");
@@ -14736,6 +14713,10 @@ function WithdrawModal({
   sourceTokenSymbol,
   recipientAddress: recipientAddressProp,
   senderAddress,
+  defaultDestinationChainType,
+  defaultDestinationChainId,
+  defaultDestinationTokenAddress,
+  defaultDestinationSymbol,
   onWithdraw,
   onWithdrawSuccess,
   onWithdrawError,
@@ -14779,8 +14760,21 @@ function WithdrawModal({
     publishableKey,
     enabled: open
   });
-  const [selectedToken, setSelectedToken] = (0, import_react23.useState)(null);
-  const [selectedChain, setSelectedChain] = (0, import_react23.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_react23.useState)("form");
   const [withdrawDepositWalletId, setWithdrawDepositWalletId] = (0, import_react23.useState)();
   const [selectedExecution, setSelectedExecution] = (0, import_react23.useState)(null);
@@ -14822,21 +14816,11 @@ function WithdrawModal({
     setSubmittedTxInfo(txInfo);
     setView("confirming");
   }, []);
-  (0, import_react23.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_react23.useRef)(null);
   const handleClose = (0, import_react23.useCallback)(() => {
     onOpenChange(false);
     if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
     resetViewTimeoutRef.current = setTimeout(() => {
-      setSelectedToken(null);
-      setSelectedChain(null);
       setView("form");
       setSelectedExecution(null);
       setSubmittedTxInfo(null);
@@ -14850,8 +14834,6 @@ function WithdrawModal({
       clearTimeout(resetViewTimeoutRef.current);
       resetViewTimeoutRef.current = null;
     }
-    setSelectedToken(null);
-    setSelectedChain(null);
     setView("form");
     setSelectedExecution(null);
     setSubmittedTxInfo(null);
@@ -14861,19 +14843,13 @@ function WithdrawModal({
     if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
   }, []);
   const handleTokenSymbolChange = (0, import_react23.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_react23.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_runtime57.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(PoweredByUnifold, { color: colors2.foregroundMuted, className: "uf-flex uf-justify-center uf-shrink-0" }) });
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(PortalContainerProvider, { value: hideOverlay ? containerEl : null, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Dialog, { open: hideOverlay || open, onOpenChange: hideOverlay ? void 0 : handleClose, modal: !hideOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     DialogContent,

package/dist/index.mjs

@@ -2806,16 +2806,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
   );
@@ -3020,31 +3010,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__ */ jsx10(
-                              "span",
-                              {
-                                className: "uf-text-[10px] uf-font-normal",
-                                style: {
-                                  color: colors2.success,
-                                  fontFamily: fonts.regular
-                                },
-                                children: "Best price"
-                              }
-                            ),
-                            isAutoSelected && selectedProvider.low_kyc === false && /* @__PURE__ */ jsx10(
-                              "span",
-                              {
-                                className: "uf-text-[10px]",
-                                style: {
-                                  color: components.card.labelColor,
-                                  fontFamily: fonts.regular
-                                },
-                                children: "\u2022"
-                              }
-                            ),
-                            selectedProvider.low_kyc === false && /* @__PURE__ */ jsx10("span", { className: "uf-text-[10px] uf-text-muted-foreground uf-font-normal", children: "No document upload" })
-                          ] })
+                          selectedProvider.low_kyc === false && /* @__PURE__ */ jsx10("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-0.5", children: /* @__PURE__ */ jsx10("span", { className: "uf-text-[10px] uf-text-muted-foreground uf-font-normal", children: "No document upload" }) })
                         ] }),
                         quotes.length > 0 && /* @__PURE__ */ jsx10(
                           ChevronRight,
@@ -3108,7 +3074,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__ */ jsx10("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, index) => {
-              const badges = getProviderBadges(quote, sortedQuotes);
               const displayName = quote.service_provider_display_name;
               const isSelected = selectedProvider?.service_provider === quote.service_provider;
               return /* @__PURE__ */ jsxs8(
@@ -3151,39 +3116,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__ */ jsx10("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-0.5", children: /* @__PURE__ */ jsx10(
+                          "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__ */ jsx10(
-                            "span",
-                            {
-                              className: "uf-text-[10px]",
-                              style: { color: components.card.subtextRightColor },
-                              children: "\u2022"
-                            }
-                          ),
-                          quote.low_kyc === false && /* @__PURE__ */ jsx10(
-                            "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: [
@@ -7984,77 +7927,77 @@ function DepositPollingUi({
   return null;
 }
 
-// src/hooks/use-default-source-token.ts
+// src/hooks/use-default-token.ts
 import { useState as useState19, useEffect as useEffect16, useRef as useRef5 } from "react";
 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] = useState19(null);
   const [chain, setChain] = useState19(null);
   const [initialSelectionDone, setInitialSelectionDone] = useState19(false);
   const appliedDefaultsRef = useRef5("");
   useEffect16(() => {
-    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);
@@ -8063,16 +8006,16 @@ function useDefaultSourceToken({
       setInitialSelectionDone(true);
     }
   }, [
-    supportedTokens,
-    defaultSourceTokenAddress,
-    defaultSourceSymbol,
-    defaultSourceChainType,
-    defaultSourceChainId,
+    tokens,
+    defaultTokenAddress,
+    defaultSymbol,
+    defaultChainType,
+    defaultChainId,
     initialSelectionDone
   ]);
   useEffect16(() => {
-    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;
@@ -8081,10 +8024,27 @@ 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 };
 }
 
+// src/hooks/use-default-source-token.ts
+function useDefaultSourceToken({
+  supportedTokens,
+  defaultSourceChainType,
+  defaultSourceChainId,
+  defaultSourceTokenAddress,
+  defaultSourceSymbol
+}) {
+  return useDefaultToken({
+    tokens: supportedTokens,
+    defaultChainType: defaultSourceChainType,
+    defaultChainId: defaultSourceChainId,
+    defaultTokenAddress: defaultSourceTokenAddress,
+    defaultSymbol: defaultSourceSymbol
+  });
+}
+
 // src/components/deposits/shared/DepositFooterLinks.tsx
 import { jsx as jsx38, jsxs as jsxs33 } from "react/jsx-runtime";
 function DepositFooterLinks({
@@ -13194,6 +13154,23 @@ function useSupportedDestinationTokens(publishableKey, enabled = true) {
   });
 }
 
+// src/hooks/use-default-destination-token.ts
+function useDefaultDestinationToken({
+  destinationTokens,
+  defaultDestinationChainType,
+  defaultDestinationChainId,
+  defaultDestinationTokenAddress,
+  defaultDestinationSymbol
+}) {
+  return useDefaultToken({
+    tokens: destinationTokens,
+    defaultChainType: defaultDestinationChainType,
+    defaultChainId: defaultDestinationChainId,
+    defaultTokenAddress: defaultDestinationTokenAddress,
+    defaultSymbol: defaultDestinationSymbol
+  });
+}
+
 // src/hooks/use-source-token-validation.ts
 import { useQuery as useQuery12 } from "@tanstack/react-query";
 import { getSupportedDepositTokens as getSupportedDepositTokens3 } from "@unifold/core";
@@ -14755,6 +14732,10 @@ function WithdrawModal({
   sourceTokenSymbol,
   recipientAddress: recipientAddressProp,
   senderAddress,
+  defaultDestinationChainType,
+  defaultDestinationChainId,
+  defaultDestinationTokenAddress,
+  defaultDestinationSymbol,
   onWithdraw,
   onWithdrawSuccess,
   onWithdrawError,
@@ -14798,8 +14779,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);
@@ -14841,21 +14835,11 @@ function WithdrawModal({
     setSubmittedTxInfo(txInfo);
     setView("confirming");
   }, []);
-  useEffect27(() => {
-    if (!destinationTokens.length || selectedToken) return;
-    const first = destinationTokens[0];
-    if (first?.chains.length > 0) {
-      setSelectedToken(first);
-      setSelectedChain(first.chains[0]);
-    }
-  }, [destinationTokens, selectedToken]);
   const resetViewTimeoutRef = useRef10(null);
   const handleClose = useCallback7(() => {
     onOpenChange(false);
     if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
     resetViewTimeoutRef.current = setTimeout(() => {
-      setSelectedToken(null);
-      setSelectedChain(null);
       setView("form");
       setSelectedExecution(null);
       setSubmittedTxInfo(null);
@@ -14869,8 +14853,6 @@ function WithdrawModal({
       clearTimeout(resetViewTimeoutRef.current);
       resetViewTimeoutRef.current = null;
     }
-    setSelectedToken(null);
-    setSelectedChain(null);
     setView("form");
     setSelectedExecution(null);
     setSubmittedTxInfo(null);
@@ -14880,19 +14862,13 @@ function WithdrawModal({
     if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
   }, []);
   const handleTokenSymbolChange = useCallback7((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 = useCallback7((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(Dialog, { open: hideOverlay || open, onOpenChange: hideOverlay ? void 0 : handleClose, modal: !hideOverlay, children: /* @__PURE__ */ jsx57(
     DialogContent,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unifold/ui-react",
-  "version": "0.1.47",
+  "version": "0.1.49",
   "description": "Unifold UI React - Deposit and onramp components for React applications",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -21,16 +21,7 @@
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0",
-    "@solana/web3.js": "^1.87.0",
-    "@solana/spl-token": "^0.3.8"
-  },
-  "peerDependenciesMeta": {
-    "@solana/web3.js": {
-      "optional": true
-    },
-    "@solana/spl-token": {
-      "optional": true
-    }
+    "@solana/web3.js": "^1.87.0"
   },
   "dependencies": {
     "@radix-ui/react-dialog": "^1.0.5",
@@ -43,10 +34,9 @@
     "lucide-react": "^0.454.0",
     "qr-code-styling": "^1.6.0-rc.1",
     "tailwind-merge": "^2.0.0",
-    "@unifold/core": "0.1.47"
+    "@unifold/core": "0.1.49"
   },
   "devDependencies": {
-    "@solana/spl-token": "^0.3.8",
     "@solana/web3.js": "^1.87.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",