@orderly.network/ui-transfer 2.8.5-alpha.0 → 2.8.6-alpha.0

package/dist/index.js

@@ -225,9 +225,26 @@ var ActionButton = (props) => {
     }
   ) });
 };
+var AvailableTooltipMessage = ({
+  tokenSymbol,
+  decimals
+}) => {
+  const { t } = i18n.useTranslation();
+  const { maxAmount } = hooks.useWithdraw({
+    token: tokenSymbol,
+    decimals
+  });
+  const amountText = react.useMemo(() => {
+    if (maxAmount === void 0 || maxAmount === null)
+      return "--";
+    return maxAmount.toString();
+  }, [maxAmount]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 80, children: t("transfer.withdraw.available.tooltip", { amount: amountText }) });
+};
 var AvailableQuantity = (props) => {
   const { amount, maxQuantity, token, loading } = props;
   const { t } = i18n.useTranslation();
+  const { isMobile } = ui.useScreen();
   const { getIndexPrice } = hooks.useIndexPricesStream();
   const name = token?.display_name || token?.symbol || "";
   const dp = token?.precision ?? token?.decimals ?? 2;
@@ -244,7 +261,57 @@ var AvailableQuantity = (props) => {
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 2, itemAlign: "center", className: "oui-ml-auto", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, itemAlign: "center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 36, children: `${t("common.available")}: ` }),
+        props.tooltipContent ? isMobile ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "oui-p-0",
+            onClick: () => {
+              if (token?.symbol) {
+                const anyToken = token;
+                ui.modal.alert({
+                  title: t("common.tips"),
+                  message: /* @__PURE__ */ jsxRuntime.jsx(
+                    AvailableTooltipMessage,
+                    {
+                      tokenSymbol: token.symbol,
+                      decimals: anyToken?.token_decimal ?? token.decimals ?? token.precision
+                    }
+                  )
+                });
+              } else {
+                ui.modal.alert({
+                  title: t("common.tips"),
+                  message: props.tooltipContent
+                });
+              }
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Text,
+              {
+                size: "2xs",
+                intensity: 36,
+                className: "oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12",
+                children: `${t("common.available")}: `
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Tooltip,
+          {
+            content: props.tooltipContent,
+            className: "oui-max-w-[274px]",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Text,
+              {
+                size: "2xs",
+                intensity: 36,
+                className: "oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12",
+                children: `${t("common.available")}: `
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 36, children: `${t("common.available")}: ` }),
         loading ? /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, { size: "sm" }) : /* @__PURE__ */ jsxRuntime.jsx(
           ui.Text.numeral,
           {
@@ -358,6 +425,9 @@ var ChainSelect = (props) => {
     }
   ) : /* @__PURE__ */ jsxRuntime.jsx(ui.ChainIcon, { className: "oui-size-[18px]", chainId: value?.id });
   const chainName = wrongNetwork ? "Unknown" : value?.info?.network_infos?.name;
+  const currentChain = chains.find((chain) => chain.chain_id === value?.id);
+  const extendedCurrentChain = currentChain;
+  const isCurrentChainSupported = !currentChain || extendedCurrentChain?.isSupported !== false;
   const renderRightIcon = () => {
     if (loading) {
       return /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, { size: "sm" });
@@ -381,9 +451,10 @@ var ChainSelect = (props) => {
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 54, children: t("transfer.network") }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, itemAlign: "center", children: [
             chainIcon,
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", intensity: 80, children: chainName })
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", intensity: 80, children: chainName }),
+            !isCurrentChainSupported && /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "danger", size: "xs", children: t("common.notSupported") })
           ] })
         ] }),
         renderRightIcon()
@@ -391,27 +462,40 @@ var ChainSelect = (props) => {
     }
   );
   const content = chains.map((chain, index) => {
+    const extendedChain = chain;
     const isActive = chain.chain_id === value?.id;
+    const isSupported = extendedChain.isSupported !== false;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       ui.Flex,
       {
         px: 2,
         r: "base",
         justify: "between",
+        itemAlign: "center",
         className: ui.cn(
           "oui-deposit-network-select-item",
-          "hover:oui-bg-base-5 oui-h-[30px] oui-cursor-pointer",
+          "oui-h-[30px]",
+          isSupported ? "hover:oui-bg-base-5 oui-cursor-pointer" : "oui-cursor-not-allowed",
           isActive && "oui-bg-base-5",
           index !== 0 && "oui-mt-[2px]"
         ),
         onClick: async () => {
+          if (!isSupported)
+            return;
           setOpen(false);
           await props.onValueChange(chain);
         },
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, itemAlign: "center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.ChainIcon, { className: "oui-size-[18px]", chainId: chain.chain_id }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 54, children: chain.name })
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.ChainIcon,
+              {
+                className: ui.cn("oui-size-[18px]", !isSupported && "oui-opacity-50"),
+                chainId: chain.chain_id
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: isSupported ? 54 : 36, children: chain.name }),
+            !isSupported && /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "danger", size: "xs", children: t("common.notSupported") })
           ] }),
           isActive && /* @__PURE__ */ jsxRuntime.jsx(
             ui.Box,
@@ -847,6 +931,7 @@ var QuantityInput = (props) => {
     label,
     status,
     hintMessage,
+    hintSuffix,
     value,
     onValueChange,
     fetchBalance,
@@ -857,6 +942,8 @@ var QuantityInput = (props) => {
     vaultBalanceList,
     displayType,
     tokenBalances,
+    tokenValueFormatter,
+    tokenShowCaret,
     ...rest
   } = props;
   const { t } = i18n.useTranslation();
@@ -922,6 +1009,8 @@ var QuantityInput = (props) => {
       size: rest.size,
       onValueChange: _onTokenChange,
       showIcon: true,
+      valueFormatter: tokenValueFormatter,
+      showCaret: tokenShowCaret,
       optionRenderer,
       contentProps: {
         onCloseAutoFocus: (event) => {
@@ -939,30 +1028,33 @@ var QuantityInput = (props) => {
       }
     }
   ) });
-  const message = /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { mt: 1, gapX: 1, px: 1, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ui.Box,
-      {
-        width: 4,
-        height: 4,
-        r: "full",
-        className: ui.cn(
-          status === "error" && "oui-bg-danger-light",
-          status === "warning" && "oui-bg-warning-light"
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ui.Text,
-      {
-        size: "2xs",
-        className: ui.cn(
-          status === "error" && "oui-text-danger-light",
-          status === "warning" && "oui-text-warning-light"
-        ),
-        children: hintMessage
-      }
-    )
+  const message = /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { mt: 1, gapX: 1, px: 1, justify: "between", itemAlign: "center", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, itemAlign: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Box,
+        {
+          width: 4,
+          height: 4,
+          r: "full",
+          className: ui.cn(
+            status === "error" && "oui-bg-danger-light",
+            status === "warning" && "oui-bg-warning-light"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Text,
+        {
+          size: "2xs",
+          className: ui.cn(
+            status === "error" && "oui-text-danger-light",
+            status === "warning" && "oui-text-warning-light"
+          ),
+          children: hintMessage
+        }
+      )
+    ] }),
+    hintSuffix && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-flex oui-items-center oui-gap-1", children: hintSuffix })
   ] });
   const _placeholder = placeholder ?? (loading ? "" : "0");
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -4529,8 +4621,6 @@ var useToken = (currentChain, filter = () => true) => {
     sourceTokenUpdatedRef
   };
 };
-
-// src/components/depositForm/depositForm.script.tsx
 var { collateralRatio, collateralContribution, calcMinimumReceived } = perp.account;
 var SWAP_USDC_PRECISION = 3;
 var useDepositFormScript = (options2) => {
@@ -4588,6 +4678,23 @@ var useDepositFormScript = (options2) => {
     () => new utils.Decimal(balance || 0).todp(sourceToken?.precision ?? 2, utils.Decimal.ROUND_DOWN).toString(),
     [balance, sourceToken?.precision]
   );
+  const maxDepositAmount = react.useMemo(() => {
+    const balanceDecimal = new utils.Decimal(balance || 0).todp(
+      sourceToken?.precision ?? 2,
+      utils.Decimal.ROUND_DOWN
+    );
+    if (sourceToken?.user_max_qty === -1 || sourceToken?.user_max_qty === void 0) {
+      return balanceDecimal.toString();
+    }
+    if (sourceToken?.user_max_qty === 0) {
+      return "0";
+    }
+    const userMaxQty = new utils.Decimal(sourceToken.user_max_qty).todp(
+      sourceToken?.precision ?? 2,
+      utils.Decimal.ROUND_DOWN
+    );
+    return balanceDecimal.lt(userMaxQty) ? balanceDecimal.toString() : userMaxQty.toString();
+  }, [balance, sourceToken?.precision, sourceToken?.user_max_qty]);
   const { inputStatus, hintMessage } = useInputStatus({
     quantity,
     maxQuantity
@@ -4642,13 +4749,31 @@ var useDepositFormScript = (options2) => {
       return "";
     }
     if (new utils.Decimal(quantity).gt(sourceToken?.user_max_qty)) {
-      return t("transfer.deposit.userMaxQty.error", {
-        maxQty: sourceToken?.user_max_qty,
-        token: sourceToken?.symbol
-      });
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        i18n.Trans,
+        {
+          i18nKey: "transfer.deposit.userMaxQty.error",
+          values: {
+            token: sourceToken?.symbol,
+            chain: currentChain?.info?.network_infos?.name || ""
+          },
+          components: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: "https://orderly.network/docs/introduction/trade-on-orderly/multi-collateral#max-deposits-global",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "oui-text-primary"
+              },
+              "0"
+            )
+          ]
+        }
+      );
     }
     return "";
-  }, [sourceToken, targetToken, quantity, t]);
+  }, [sourceToken, targetToken, quantity, currentChain, t]);
   const loading = submitting || depositFeeRevalidating;
   const nativeSymbol = react.useMemo(() => {
     return currentChain?.info?.nativeToken?.symbol;
@@ -4734,6 +4859,9 @@ var useDepositFormScript = (options2) => {
     nativeBalance
   ]);
   const warningMessage = swapWarningMessage || userMaxQtyMessage || gasFeeMessage || feeWarningMessage || insufficientGasMessage;
+  const hasUserMaxQtyError = !!userMaxQtyMessage;
+  const finalInputStatus = hasUserMaxQtyError ? "error" : inputStatus;
+  const finalHintMessage = hasUserMaxQtyError ? t("transfer.deposit.exceedCap") : hintMessage;
   const disabled = !quantity || Number(quantity) === 0 || !sourceToken || inputStatus === "error" || depositFeeRevalidating || swapRevalidating || // if exceed collateral cap, disable deposit
   !!userMaxQtyMessage || !!feeWarningMessage || !!insufficientGasMessage;
   const targetQuantity = react.useMemo(() => {
@@ -4782,10 +4910,11 @@ var useDepositFormScript = (options2) => {
     quantity,
     collateralContributionQuantity,
     maxQuantity,
+    maxDepositAmount,
     indexPrice,
     onQuantityChange: setQuantity,
-    hintMessage,
-    inputStatus,
+    hintMessage: finalHintMessage,
+    inputStatus: finalInputStatus,
     chains,
     currentChain,
     settingChain,
@@ -4937,6 +5066,7 @@ var DepositForm = (props) => {
     quantity,
     collateralContributionQuantity,
     maxQuantity,
+    maxDepositAmount,
     onQuantityChange,
     hintMessage,
     inputStatus,
@@ -4971,6 +5101,118 @@ var DepositForm = (props) => {
     targetQuantityLoading
   } = props;
   const { t } = i18n.useTranslation();
+  const showRegularTokenRenderer = sourceToken?.user_max_qty !== void 0 && sourceToken?.user_max_qty === -1;
+  const { isMobile } = ui.useScreen();
+  const renderDepositCapTooltipContent = (tokenLabel) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "2xs", weight: "semibold", intensity: 36, children: [
+      t("transfer.depositCap.tooltip"),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { as: "span", size: "2xs", weight: "semibold", intensity: 80, children: [
+        tokenLabel,
+        "."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href: "https://orderly.network/docs/introduction/trade-on-orderly/multi-collateral#max-deposits-user",
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "oui-text-2xs oui-text-primary",
+        children: t("common.learnMore")
+      }
+    )
+  ] });
+  const tokenValueFormatter = (value) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "end", gapY: 1, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, itemAlign: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { name: value, className: "oui-size-[16px]" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { weight: "semibold", intensity: 54, children: value }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.CaretDownIcon,
+        {
+          size: 12,
+          className: "oui-text-base-contrast-54",
+          opacity: 1
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", className: "oui-gap-[2px]", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        ui.Text,
+        {
+          size: "2xs",
+          intensity: 36,
+          weight: "regular",
+          className: "oui-leading-[10px]",
+          children: [
+            t("transfer.depositCap", "Deposit cap"),
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Text.numeral,
+              {
+                as: "span",
+                size: "2xs",
+                intensity: 80,
+                weight: "regular",
+                className: "oui-leading-[10px]",
+                dp: 0,
+                children: sourceToken?.user_max_qty?.toString() || "0"
+              }
+            )
+          ]
+        }
+      ),
+      isMobile ? /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "oui-flex oui-items-center",
+          onClick: (event) => {
+            event.stopPropagation();
+            ui.modal.alert({
+              title: t("common.tips"),
+              message: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { children: renderDepositCapTooltipContent(value) })
+            });
+          },
+          onMouseDown: (event) => {
+            event.stopPropagation();
+          },
+          onPointerDown: (event) => {
+            event.stopPropagation();
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            ui.InfoCircleIcon,
+            {
+              className: "oui-size-3 oui-shrink-0 oui-cursor-pointer",
+              opacity: 0.36
+            }
+          )
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Tooltip,
+        {
+          content: /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Box,
+            {
+              onMouseDown: (event) => {
+                event.stopPropagation();
+              },
+              onPointerDown: (event) => {
+                event.stopPropagation();
+              },
+              children: renderDepositCapTooltipContent(value)
+            }
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            ui.InfoCircleIcon,
+            {
+              className: "oui-size-3 oui-shrink-0 oui-cursor-pointer",
+              opacity: 0.36
+            }
+          )
+        }
+      )
+    ] })
+  ] });
   const renderContent = () => {
     if (needSwap || needCrossSwap) {
       return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", mt: 1, gapY: 1, children: [
@@ -5048,6 +5290,8 @@ var DepositForm = (props) => {
             hintMessage,
             fetchBalance,
             tokenBalances: props.tokenBalances,
+            tokenShowCaret: showRegularTokenRenderer,
+            tokenValueFormatter: showRegularTokenRenderer ? void 0 : tokenValueFormatter,
             "data-testId": "oui-testid-deposit-dialog-quantity-input",
             disabled: !props.isLoggedIn
           }
@@ -5061,7 +5305,7 @@ var DepositForm = (props) => {
           maxQuantity,
           loading: balanceRevalidating,
           onClick: () => {
-            onQuantityChange(maxQuantity);
+            onQuantityChange(maxDepositAmount);
           }
         }
       ),
@@ -5209,6 +5453,13 @@ var UnsettlePnlInfo = (props) => {
     dialogContent
   } = props;
   const { t } = i18n.useTranslation();
+  const { isMobile } = ui.useScreen();
+  const renderUnsettledLabel = () => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", justify: "start", gap: 1, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.ExclamationFillIcon, { size: 14, className: "oui-text-warning-darken" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12", children: `${t("settle.unsettled")}:` })
+    ] });
+  };
   if (unsettledPnl === 0 && !hasPositions) {
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
   }
@@ -5223,23 +5474,27 @@ var UnsettlePnlInfo = (props) => {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-text-2xs oui-text-base-contrast-36", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", justify: "start", gap: 1, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
+      tooltipContent ? isMobile ? /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "oui-p-0",
+          onClick: () => {
+            ui.modal.alert({
+              title: t("common.tips"),
+              message: tooltipContent
+            });
+          },
+          children: renderUnsettledLabel()
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
         ui.Tooltip,
         {
           className: "oui-max-w-[274px] oui-font-semibold",
           content: tooltipContent,
-          children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", justify: "start", gap: 1, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.ExclamationFillIcon,
-              {
-                size: 14,
-                className: "oui-text-warning-darken"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12", children: `${t("settle.unsettled")}:` })
-          ] })
+          children: renderUnsettledLabel()
         }
-      ),
+      ) : renderUnsettledLabel(),
       /* @__PURE__ */ jsxRuntime.jsx(
         ui.Text.numeral,
         {
@@ -5248,7 +5503,7 @@ var UnsettlePnlInfo = (props) => {
           weight: "semibold",
           dp: 6,
           "data-testid": "oui-testid-withdraw-dialog-unsettledPnl-value",
-          children: unsettledPnl
+          children: unsettledPnl ?? "--"
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: "USDC" })
@@ -5498,7 +5753,9 @@ var WithdrawForm = (props) => {
     sourceTokens,
     onSourceTokenChange,
     vaultBalanceList,
-    qtyGreaterThanMaxAmount
+    qtyGreaterThanMaxAmount,
+    isTokenUnsupported,
+    onSwitchToSupportedNetwork
   } = props;
   const { t } = i18n.useTranslation();
   const internalWithdrawPanel = /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5542,6 +5799,25 @@ var WithdrawForm = (props) => {
               onTokenChange: onSourceTokenChange,
               status: props.inputStatus,
               hintMessage: props.hintMessage,
+              hintSuffix: isTokenUnsupported ? /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: onSwitchToSupportedNetwork,
+                  className: "oui-inline-flex oui-items-center oui-gap-1 oui-text-2xs oui-font-semibold oui-text-primary",
+                  children: [
+                    t("common.switch"),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      ui.ArrowLeftRightIcon,
+                      {
+                        size: 16,
+                        className: "oui-text-primary oui-mt-0.5",
+                        opacity: 1
+                      }
+                    )
+                  ]
+                }
+              ) : void 0,
               vaultBalanceList,
               testId: "oui-testid-withdraw-dialog-quantity-input",
               displayType: "vaultBalance",
@@ -5557,7 +5833,10 @@ var WithdrawForm = (props) => {
               loading: props.balanceRevalidating,
               onClick: () => {
                 onQuantityChange(maxQuantity.toString());
-              }
+              },
+              tooltipContent: t("transfer.withdraw.available.tooltip", {
+                amount: maxQuantity.toString()
+              })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { mx: 2, mt: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -5907,19 +6186,36 @@ function useWithdrawToken(params) {
   const [token, setToken] = react.useState();
   const [tokens, setTokens] = react.useState([]);
   const tokensInfo = hooks.useTokensInfo();
+  const { data: holdings } = hooks.useHoldingStream();
   const { sourceToken, onSourceTokenChange, sourceTokens } = useToken(
     currentChain,
     (token2) => token2.symbol === "USDC" || token2.is_collateral
   );
-  react.useEffect(() => {
+  const allTokens = react.useMemo(() => {
     if (!tokensInfo?.length)
-      return;
-    const list = tokensInfo.map((item) => ({
+      return [];
+    const holdingMap = /* @__PURE__ */ new Map();
+    holdings?.forEach((item) => {
+      holdingMap.set(item.token, item);
+    });
+    const mappedTokens = tokensInfo.map((item) => ({
       ...item,
       symbol: item.token,
       token_decimal: item.decimals,
       precision: item.decimals
     }));
+    const list = mappedTokens.filter((token2) => {
+      const holding = holdingMap.get(token2.symbol);
+      if (!holdings)
+        return true;
+      return !!holding && holding.holding > 0;
+    });
+    if (list.length === 0) {
+      const usdcToken = mappedTokens.find((t) => t.symbol === "USDC");
+      if (usdcToken) {
+        return [usdcToken];
+      }
+    }
     list.sort((a, b) => {
       if (a.symbol === "USDC")
         return -1;
@@ -5927,10 +6223,39 @@ function useWithdrawToken(params) {
         return 1;
       return 0;
     });
-    const usdcToken = getTokenByTokenList(tokens);
-    setToken(usdcToken || list?.[0]);
-    setTokens(list);
-  }, [tokensInfo]);
+    return list;
+  }, [tokensInfo, holdings]);
+  react.useEffect(() => {
+    if (!allTokens.length)
+      return;
+    const usdcToken = getTokenByTokenList(allTokens);
+    setToken(usdcToken || allTokens?.[0]);
+    setTokens(allTokens);
+  }, [allTokens]);
+  const isTokenSupportedOnChain = hooks.useMemoizedFn(
+    (tokenSymbol) => {
+      if (!currentChain?.info?.token_infos) {
+        return false;
+      }
+      return currentChain.info.token_infos.some(
+        (token2) => token2.symbol === tokenSymbol
+      );
+    }
+  );
+  const handleSourceTokenChange = hooks.useMemoizedFn((newToken) => {
+    if (withdrawTo === "wallet" /* Wallet */ && currentChain && newToken.symbol) {
+      const matchingToken = sourceTokens.find(
+        (t) => t.symbol === newToken.symbol
+      );
+      if (matchingToken) {
+        onSourceTokenChange(matchingToken);
+      } else {
+        onSourceTokenChange(newToken);
+      }
+      return;
+    }
+    onSourceTokenChange(newToken);
+  });
   const syncToken = hooks.useMemoizedFn(() => {
     if (withdrawTo === "accountId" /* Account */) {
       const findToken = tokens.find(
@@ -5939,29 +6264,31 @@ function useWithdrawToken(params) {
       if (findToken) {
         setToken(findToken);
       }
-    } else {
-      const findToken = sourceTokens.find(
-        (item) => item.symbol === token?.symbol
-      );
-      if (findToken) {
-        onSourceTokenChange(findToken);
-      }
     }
   });
   react.useEffect(() => {
     syncToken();
-  }, [withdrawTo]);
+  }, [
+    withdrawTo,
+    allTokens,
+    sourceToken,
+    sourceTokens,
+    currentChain,
+    syncToken
+  ]);
   if (withdrawTo === "accountId" /* Account */) {
     return {
       sourceToken: token,
       onSourceTokenChange: setToken,
-      sourceTokens: tokens
+      sourceTokens: tokens,
+      isTokenSupportedOnChain
     };
   }
   return {
     sourceToken,
-    onSourceTokenChange,
-    sourceTokens
+    onSourceTokenChange: handleSourceTokenChange,
+    sourceTokens: allTokens,
+    isTokenSupportedOnChain
   };
 }
 
@@ -6004,6 +6331,7 @@ var useWithdrawFormScript = (options2) => {
     settingChain
   } = hooks.useWalletConnector();
   const isLoggedIn = uiConnector.useAuthGuard();
+  const [pendingTokenSymbol, setPendingTokenSymbol] = react.useState();
   const currentChain = react.useMemo(() => {
     const chainId = connectedChain ? utils.praseChainIdToNumber(connectedChain.id) : Number.parseInt(linkDeviceStorage?.chainId);
     if (!chainId) {
@@ -6016,17 +6344,41 @@ var useWithdrawFormScript = (options2) => {
       info: chain
     };
   }, [findByChainId, connectedChain, linkDeviceStorage]);
-  const { sourceToken, onSourceTokenChange, sourceTokens } = useWithdrawToken({
+  const {
+    sourceToken,
+    onSourceTokenChange: _OnSourceTokenChange,
+    sourceTokens,
+    isTokenSupportedOnChain
+  } = useWithdrawToken({
     currentChain,
     withdrawTo
   });
+  const onSourceTokenChange = hooks.useMemoizedFn((token) => {
+    setQuantity("");
+    _OnSourceTokenChange(token);
+    setPendingTokenSymbol(token.symbol);
+  });
   const tokenChains = react.useMemo(() => {
-    return chains.filter(
-      (chain) => chain.token_infos?.some(
+    if (!chains)
+      return [];
+    const list = chains.map((chain) => {
+      const isSupported = chain.token_infos?.some(
         (token) => token.symbol === sourceToken?.symbol
-      )
-    ).map((chain) => chain.network_infos);
-  }, [chains, networkId, sourceToken]);
+      );
+      return {
+        ...chain.network_infos,
+        isSupported
+      };
+    });
+    list.sort((a, b) => {
+      const aSupported = !!a.isSupported;
+      const bSupported = !!b.isSupported;
+      if (aSupported === bSupported)
+        return 0;
+      return aSupported ? -1 : 1;
+    });
+    return list;
+  }, [chains, sourceToken?.symbol]);
   const { walletName, address } = react.useMemo(
     () => ({
       walletName: wallet?.label,
@@ -6115,6 +6467,17 @@ var useWithdrawFormScript = (options2) => {
     },
     [currentChain, switchChain, findByChainId, t]
   );
+  react.useEffect(() => {
+    if (!pendingTokenSymbol || !sourceTokens || sourceTokens.length === 0) {
+      return;
+    }
+    const matchedToken = sourceTokens.find(
+      (token) => token.symbol === pendingTokenSymbol
+    );
+    if (matchedToken) {
+      onSourceTokenChange(matchedToken);
+    }
+  }, [pendingTokenSymbol, sourceTokens, onSourceTokenChange, currentChain]);
   const onWithdraw = async () => {
     if (loading) {
       return;
@@ -6179,7 +6542,20 @@ var useWithdrawFormScript = (options2) => {
     }
     return utils.toNonExponential(value.toNumber());
   }, [fee, quantity]);
+  const isTokenUnsupported = react.useMemo(() => {
+    if (withdrawTo !== "wallet" /* Wallet */ || !currentChain || !sourceToken?.symbol) {
+      return false;
+    }
+    return !isTokenSupportedOnChain(sourceToken.symbol);
+  }, [withdrawTo, currentChain, sourceToken?.symbol, isTokenSupportedOnChain]);
   react.useEffect(() => {
+    if (isTokenUnsupported && sourceToken?.symbol) {
+      setInputStatus("error");
+      setHintMessage(
+        t("transfer.withdraw.unsupported.token", { token: sourceToken.symbol })
+      );
+      return;
+    }
     if (!quantity) {
       setInputStatus("default");
       setHintMessage("");
@@ -6195,7 +6571,16 @@ var useWithdrawFormScript = (options2) => {
         setHintMessage("");
       }
     }
-  }, [quantity, maxAmount, unsettledPnL, crossChainTrans]);
+  }, [
+    quantity,
+    maxAmount,
+    unsettledPnL,
+    crossChainTrans,
+    isTokenUnsupported,
+    sourceToken?.symbol,
+    t
+  ]);
+  const disabled = crossChainTrans || !quantity || Number(quantity) === 0 || ["error", "warning"].includes(inputStatus) || withdrawTo === "accountId" /* Account */ && !withdrawAccountIdState.toAccountId || qtyGreaterThanMaxAmount || qtyGreaterThanVault || !!minAmountWarningMessage || isTokenUnsupported;
   react.useEffect(() => {
     setCrossChainTrans(!!assetHistory?.length);
   }, [assetHistory?.length]);
@@ -6217,8 +6602,21 @@ var useWithdrawFormScript = (options2) => {
     token: sourceToken?.symbol,
     quantity
   });
-  const disabled = crossChainTrans || !quantity || Number(quantity) === 0 || ["error", "warning"].includes(inputStatus) || withdrawTo === "accountId" /* Account */ && !withdrawAccountIdState.toAccountId || qtyGreaterThanMaxAmount || !!minAmountWarningMessage || qtyGreaterThanVault;
-  const warningMessage = minAmountWarningMessage || ltvWarningMessage || vaultBalanceMessage;
+  const warningMessage = ltvWarningMessage || minAmountWarningMessage || vaultBalanceMessage;
+  react.useMemo(() => {
+    if (withdrawTo === "accountId" /* Account */) {
+      return [];
+    }
+    return vaultBalanceList?.filter(
+      (item) => Number.parseInt(item.chain_id) === currentChain?.id
+    );
+  }, [vaultBalanceList, currentChain, withdrawTo]);
+  const onSwitchToSupportedNetwork = hooks.useMemoizedFn(async () => {
+    if (!tokenChains || tokenChains.length === 0)
+      return;
+    const targetNetwork = tokenChains.find((item) => item.isSupported) ?? tokenChains[0];
+    await onChainChange(targetNetwork);
+  });
   return {
     walletName,
     address,
@@ -6258,7 +6656,9 @@ var useWithdrawFormScript = (options2) => {
     currentLTV,
     nextLTV,
     warningMessage,
-    isLoggedIn
+    isLoggedIn,
+    isTokenUnsupported,
+    onSwitchToSupportedNetwork
   };
 };
 var WithdrawFormWidget = (props) => {
@@ -7672,7 +8072,7 @@ var DepositStatusContent = (props) => {
         estimatedTime
       ] });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(Badge2, { children: props.count });
+    return /* @__PURE__ */ jsxRuntime.jsx(Badge3, { children: props.count });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ui.Flex,
@@ -7730,7 +8130,7 @@ var DepositStatusContent = (props) => {
     }
   );
 };
-var Badge2 = (props) => {
+var Badge3 = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     ui.Flex,
     {