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

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { useTranslation, i18n, Trans } from '@orderly.network/i18n';
-import { modal, useScreen, useModal, SimpleSheet, SimpleDialog, registerSimpleDialog, registerSimpleSheet, Tabs, TabPanel, ArrowDownSquareFillIcon, ArrowUpSquareFillIcon, toast, Box, ExtensionSlot, ExtensionPositionEnum, textVariants, Flex, Text, Button, cn, Divider, Spinner, Select, Input, inputFormatter, AlertDialog, EditIcon, Icon, TokenIcon, WalletIcon, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, ScrollArea, Tooltip, ExclamationFillIcon, CloseCircleFillIcon, CheckedCircleFillIcon, ChainIcon, Badge, CloseIcon } from '@orderly.network/ui';
+import { modal, useScreen, useModal, SimpleSheet, SimpleDialog, registerSimpleDialog, registerSimpleSheet, Tabs, TabPanel, ArrowDownSquareFillIcon, ArrowUpSquareFillIcon, toast, Box, ExtensionSlot, ExtensionPositionEnum, textVariants, Flex, Text, Button, cn, Divider, Spinner, Select, Input, inputFormatter, Tooltip, AlertDialog, EditIcon, Icon, TokenIcon, ArrowLeftRightIcon, WalletIcon, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, ScrollArea, CloseCircleFillIcon, CheckedCircleFillIcon, ChainIcon, Badge, CaretDownIcon, InfoCircleIcon, ExclamationFillIcon, CloseIcon } from '@orderly.network/ui';
 import { forwardRef, useState, useMemo, useEffect, useCallback, useRef, createElement } from 'react';
-import { useEventEmitter, useConfig, useWalletConnector, useLocalStorage, useConvert, useOdosQuote, useComputedLTV, useBoolean, useAccountInstance, useAccount, useAppStore, useTransfer, useSubAccountDataObserver, useSubAccountMaxWithdrawal, useTokensInfo, usePositionStream, useIndexPricesStream, useDeposit, useAssetsHistory, useChains, useWithdraw, useMemoizedFn, useWalletTopic, useQuery, useTokenInfo, useIndexPrice, useInternalTransfer, useDebouncedCallback, useTransferHistory, useBalanceTopic } from '@orderly.network/hooks';
+import { useEventEmitter, useConfig, useWalletConnector, useLocalStorage, useConvert, useOdosQuote, useComputedLTV, useBoolean, useAccountInstance, useAccount, useAppStore, useTransfer, useSubAccountDataObserver, useSubAccountMaxWithdrawal, useTokensInfo, usePositionStream, useIndexPricesStream, useDeposit, useAssetsHistory, useChains, useMemoizedFn, useWithdraw, useWalletTopic, useQuery, useTokenInfo, useIndexPrice, useHoldingStream, useInternalTransfer, useDebouncedCallback, useTransferHistory, useBalanceTopic } from '@orderly.network/hooks';
 import { Decimal, zero, praseChainIdToNumber, int2hex, toNonExponential, isSolana } from '@orderly.network/utils';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { WS_WalletStatusEnum, AccountStatusEnum, ChainNamespace, AssetHistoryStatusEnum, AssetHistorySideEnum, Arbitrum, isNativeTokenChecker as isNativeTokenChecker$1, ABSTRACT_CHAIN_ID_MAP, nativeTokenAddress as nativeTokenAddress$1 } from '@orderly.network/types';
@@ -223,9 +223,26 @@ var ActionButton = (props) => {
     }
   ) });
 };
+var AvailableTooltipMessage = ({
+  tokenSymbol,
+  decimals
+}) => {
+  const { t } = useTranslation();
+  const { maxAmount } = useWithdraw({
+    token: tokenSymbol,
+    decimals
+  });
+  const amountText = useMemo(() => {
+    if (maxAmount === void 0 || maxAmount === null)
+      return "--";
+    return maxAmount.toString();
+  }, [maxAmount]);
+  return /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 80, children: t("transfer.withdraw.available.tooltip", { amount: amountText }) });
+};
 var AvailableQuantity = (props) => {
   const { amount, maxQuantity, token, loading } = props;
   const { t } = useTranslation();
+  const { isMobile } = useScreen();
   const { getIndexPrice } = useIndexPricesStream();
   const name = token?.display_name || token?.symbol || "";
   const dp = token?.precision ?? token?.decimals ?? 2;
@@ -242,7 +259,57 @@ var AvailableQuantity = (props) => {
     ] }),
     /* @__PURE__ */ jsxs(Flex, { gapX: 2, itemAlign: "center", className: "oui-ml-auto", children: [
       /* @__PURE__ */ jsxs(Flex, { gapX: 1, itemAlign: "center", children: [
-        /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 36, children: `${t("common.available")}: ` }),
+        props.tooltipContent ? isMobile ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "oui-p-0",
+            onClick: () => {
+              if (token?.symbol) {
+                const anyToken = token;
+                modal.alert({
+                  title: t("common.tips"),
+                  message: /* @__PURE__ */ jsx(
+                    AvailableTooltipMessage,
+                    {
+                      tokenSymbol: token.symbol,
+                      decimals: anyToken?.token_decimal ?? token.decimals ?? token.precision
+                    }
+                  )
+                });
+              } else {
+                modal.alert({
+                  title: t("common.tips"),
+                  message: props.tooltipContent
+                });
+              }
+            },
+            children: /* @__PURE__ */ jsx(
+              Text,
+              {
+                size: "2xs",
+                intensity: 36,
+                className: "oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12",
+                children: `${t("common.available")}: `
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            content: props.tooltipContent,
+            className: "oui-max-w-[274px]",
+            children: /* @__PURE__ */ jsx(
+              Text,
+              {
+                size: "2xs",
+                intensity: 36,
+                className: "oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12",
+                children: `${t("common.available")}: `
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 36, children: `${t("common.available")}: ` }),
         loading ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : /* @__PURE__ */ jsx(
           Text.numeral,
           {
@@ -356,6 +423,9 @@ var ChainSelect = (props) => {
     }
   ) : /* @__PURE__ */ jsx(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__ */ jsx(Spinner, { size: "sm" });
@@ -379,9 +449,10 @@ var ChainSelect = (props) => {
       children: [
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx(Flex, { children: /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 54, children: t("transfer.network") }) }),
-          /* @__PURE__ */ jsxs(Flex, { gapX: 1, children: [
+          /* @__PURE__ */ jsxs(Flex, { gapX: 1, itemAlign: "center", children: [
             chainIcon,
-            /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 80, children: chainName })
+            /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 80, children: chainName }),
+            !isCurrentChainSupported && /* @__PURE__ */ jsx(Badge, { color: "danger", size: "xs", children: t("common.notSupported") })
           ] })
         ] }),
         renderRightIcon()
@@ -389,27 +460,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__ */ jsxs(
       Flex,
       {
         px: 2,
         r: "base",
         justify: "between",
+        itemAlign: "center",
         className: 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__ */ jsxs(Flex, { gapX: 1, itemAlign: "center", children: [
-            /* @__PURE__ */ jsx(ChainIcon, { className: "oui-size-[18px]", chainId: chain.chain_id }),
-            /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 54, children: chain.name })
+            /* @__PURE__ */ jsx(
+              ChainIcon,
+              {
+                className: cn("oui-size-[18px]", !isSupported && "oui-opacity-50"),
+                chainId: chain.chain_id
+              }
+            ),
+            /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: isSupported ? 54 : 36, children: chain.name }),
+            !isSupported && /* @__PURE__ */ jsx(Badge, { color: "danger", size: "xs", children: t("common.notSupported") })
           ] }),
           isActive && /* @__PURE__ */ jsx(
             Box,
@@ -845,6 +929,7 @@ var QuantityInput = (props) => {
     label,
     status,
     hintMessage,
+    hintSuffix,
     value,
     onValueChange,
     fetchBalance,
@@ -855,6 +940,8 @@ var QuantityInput = (props) => {
     vaultBalanceList,
     displayType,
     tokenBalances,
+    tokenValueFormatter,
+    tokenShowCaret,
     ...rest
   } = props;
   const { t } = useTranslation();
@@ -920,6 +1007,8 @@ var QuantityInput = (props) => {
       size: rest.size,
       onValueChange: _onTokenChange,
       showIcon: true,
+      valueFormatter: tokenValueFormatter,
+      showCaret: tokenShowCaret,
       optionRenderer,
       contentProps: {
         onCloseAutoFocus: (event) => {
@@ -937,30 +1026,33 @@ var QuantityInput = (props) => {
       }
     }
   ) });
-  const message = /* @__PURE__ */ jsxs(Flex, { mt: 1, gapX: 1, px: 1, children: [
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        width: 4,
-        height: 4,
-        r: "full",
-        className: cn(
-          status === "error" && "oui-bg-danger-light",
-          status === "warning" && "oui-bg-warning-light"
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Text,
-      {
-        size: "2xs",
-        className: cn(
-          status === "error" && "oui-text-danger-light",
-          status === "warning" && "oui-text-warning-light"
-        ),
-        children: hintMessage
-      }
-    )
+  const message = /* @__PURE__ */ jsxs(Flex, { mt: 1, gapX: 1, px: 1, justify: "between", itemAlign: "center", children: [
+    /* @__PURE__ */ jsxs(Flex, { gapX: 1, itemAlign: "center", children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          width: 4,
+          height: 4,
+          r: "full",
+          className: cn(
+            status === "error" && "oui-bg-danger-light",
+            status === "warning" && "oui-bg-warning-light"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          size: "2xs",
+          className: cn(
+            status === "error" && "oui-text-danger-light",
+            status === "warning" && "oui-text-warning-light"
+          ),
+          children: hintMessage
+        }
+      )
+    ] }),
+    hintSuffix && /* @__PURE__ */ jsx(Box, { className: "oui-flex oui-items-center oui-gap-1", children: hintSuffix })
   ] });
   const _placeholder = placeholder ?? (loading ? "" : "0");
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -4527,8 +4619,6 @@ var useToken = (currentChain, filter = () => true) => {
     sourceTokenUpdatedRef
   };
 };
-
-// src/components/depositForm/depositForm.script.tsx
 var { collateralRatio, collateralContribution, calcMinimumReceived } = account;
 var SWAP_USDC_PRECISION = 3;
 var useDepositFormScript = (options2) => {
@@ -4586,6 +4676,23 @@ var useDepositFormScript = (options2) => {
     () => new Decimal(balance || 0).todp(sourceToken?.precision ?? 2, Decimal.ROUND_DOWN).toString(),
     [balance, sourceToken?.precision]
   );
+  const maxDepositAmount = useMemo(() => {
+    const balanceDecimal = new Decimal(balance || 0).todp(
+      sourceToken?.precision ?? 2,
+      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 Decimal(sourceToken.user_max_qty).todp(
+      sourceToken?.precision ?? 2,
+      Decimal.ROUND_DOWN
+    );
+    return balanceDecimal.lt(userMaxQty) ? balanceDecimal.toString() : userMaxQty.toString();
+  }, [balance, sourceToken?.precision, sourceToken?.user_max_qty]);
   const { inputStatus, hintMessage } = useInputStatus({
     quantity,
     maxQuantity
@@ -4640,13 +4747,31 @@ var useDepositFormScript = (options2) => {
       return "";
     }
     if (new Decimal(quantity).gt(sourceToken?.user_max_qty)) {
-      return t("transfer.deposit.userMaxQty.error", {
-        maxQty: sourceToken?.user_max_qty,
-        token: sourceToken?.symbol
-      });
+      return /* @__PURE__ */ jsx(
+        Trans,
+        {
+          i18nKey: "transfer.deposit.userMaxQty.error",
+          values: {
+            token: sourceToken?.symbol,
+            chain: currentChain?.info?.network_infos?.name || ""
+          },
+          components: [
+            /* @__PURE__ */ 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 = useMemo(() => {
     return currentChain?.info?.nativeToken?.symbol;
@@ -4732,6 +4857,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 = useMemo(() => {
@@ -4780,10 +4908,11 @@ var useDepositFormScript = (options2) => {
     quantity,
     collateralContributionQuantity,
     maxQuantity,
+    maxDepositAmount,
     indexPrice,
     onQuantityChange: setQuantity,
-    hintMessage,
-    inputStatus,
+    hintMessage: finalHintMessage,
+    inputStatus: finalInputStatus,
     chains,
     currentChain,
     settingChain,
@@ -4935,6 +5064,7 @@ var DepositForm = (props) => {
     quantity,
     collateralContributionQuantity,
     maxQuantity,
+    maxDepositAmount,
     onQuantityChange,
     hintMessage,
     inputStatus,
@@ -4969,6 +5099,118 @@ var DepositForm = (props) => {
     targetQuantityLoading
   } = props;
   const { t } = useTranslation();
+  const showRegularTokenRenderer = sourceToken?.user_max_qty !== void 0 && sourceToken?.user_max_qty === -1;
+  const { isMobile } = useScreen();
+  const renderDepositCapTooltipContent = (tokenLabel) => /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "start", children: [
+    /* @__PURE__ */ jsxs(Text, { size: "2xs", weight: "semibold", intensity: 36, children: [
+      t("transfer.depositCap.tooltip"),
+      /* @__PURE__ */ jsxs(Text, { as: "span", size: "2xs", weight: "semibold", intensity: 80, children: [
+        tokenLabel,
+        "."
+      ] })
+    ] }),
+    /* @__PURE__ */ 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__ */ jsxs(Flex, { direction: "column", itemAlign: "end", gapY: 1, children: [
+    /* @__PURE__ */ jsxs(Flex, { gapX: 1, itemAlign: "center", children: [
+      /* @__PURE__ */ jsx(TokenIcon, { name: value, className: "oui-size-[16px]" }),
+      /* @__PURE__ */ jsx(Text, { weight: "semibold", intensity: 54, children: value }),
+      /* @__PURE__ */ jsx(
+        CaretDownIcon,
+        {
+          size: 12,
+          className: "oui-text-base-contrast-54",
+          opacity: 1
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", className: "oui-gap-[2px]", children: [
+      /* @__PURE__ */ jsxs(
+        Text,
+        {
+          size: "2xs",
+          intensity: 36,
+          weight: "regular",
+          className: "oui-leading-[10px]",
+          children: [
+            t("transfer.depositCap", "Deposit cap"),
+            " ",
+            /* @__PURE__ */ jsx(
+              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__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "oui-flex oui-items-center",
+          onClick: (event) => {
+            event.stopPropagation();
+            modal.alert({
+              title: t("common.tips"),
+              message: /* @__PURE__ */ jsx(Box, { children: renderDepositCapTooltipContent(value) })
+            });
+          },
+          onMouseDown: (event) => {
+            event.stopPropagation();
+          },
+          onPointerDown: (event) => {
+            event.stopPropagation();
+          },
+          children: /* @__PURE__ */ jsx(
+            InfoCircleIcon,
+            {
+              className: "oui-size-3 oui-shrink-0 oui-cursor-pointer",
+              opacity: 0.36
+            }
+          )
+        }
+      ) : /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          content: /* @__PURE__ */ jsx(
+            Box,
+            {
+              onMouseDown: (event) => {
+                event.stopPropagation();
+              },
+              onPointerDown: (event) => {
+                event.stopPropagation();
+              },
+              children: renderDepositCapTooltipContent(value)
+            }
+          ),
+          children: /* @__PURE__ */ jsx(
+            InfoCircleIcon,
+            {
+              className: "oui-size-3 oui-shrink-0 oui-cursor-pointer",
+              opacity: 0.36
+            }
+          )
+        }
+      )
+    ] })
+  ] });
   const renderContent = () => {
     if (needSwap || needCrossSwap) {
       return /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "start", mt: 1, gapY: 1, children: [
@@ -5046,6 +5288,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
           }
@@ -5059,7 +5303,7 @@ var DepositForm = (props) => {
           maxQuantity,
           loading: balanceRevalidating,
           onClick: () => {
-            onQuantityChange(maxQuantity);
+            onQuantityChange(maxDepositAmount);
           }
         }
       ),
@@ -5207,6 +5451,13 @@ var UnsettlePnlInfo = (props) => {
     dialogContent
   } = props;
   const { t } = useTranslation();
+  const { isMobile } = useScreen();
+  const renderUnsettledLabel = () => {
+    return /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", justify: "start", gap: 1, children: [
+      /* @__PURE__ */ jsx(ExclamationFillIcon, { size: 14, className: "oui-text-warning-darken" }),
+      /* @__PURE__ */ jsx(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__ */ jsx(Fragment, {});
   }
@@ -5221,23 +5472,27 @@ var UnsettlePnlInfo = (props) => {
   };
   return /* @__PURE__ */ jsxs(Flex, { justify: "between", className: "oui-text-2xs oui-text-base-contrast-36", children: [
     /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", justify: "start", gap: 1, children: [
-      /* @__PURE__ */ jsx(
+      tooltipContent ? isMobile ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "oui-p-0",
+          onClick: () => {
+            modal.alert({
+              title: t("common.tips"),
+              message: tooltipContent
+            });
+          },
+          children: renderUnsettledLabel()
+        }
+      ) : /* @__PURE__ */ jsx(
         Tooltip,
         {
           className: "oui-max-w-[274px] oui-font-semibold",
           content: tooltipContent,
-          children: /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", justify: "start", gap: 1, children: [
-            /* @__PURE__ */ jsx(
-              ExclamationFillIcon,
-              {
-                size: 14,
-                className: "oui-text-warning-darken"
-              }
-            ),
-            /* @__PURE__ */ jsx(Text, { className: "oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12", children: `${t("settle.unsettled")}:` })
-          ] })
+          children: renderUnsettledLabel()
         }
-      ),
+      ) : renderUnsettledLabel(),
       /* @__PURE__ */ jsx(
         Text.numeral,
         {
@@ -5246,7 +5501,7 @@ var UnsettlePnlInfo = (props) => {
           weight: "semibold",
           dp: 6,
           "data-testid": "oui-testid-withdraw-dialog-unsettledPnl-value",
-          children: unsettledPnl
+          children: unsettledPnl ?? "--"
         }
       ),
       /* @__PURE__ */ jsx(Text, { children: "USDC" })
@@ -5496,7 +5751,9 @@ var WithdrawForm = (props) => {
     sourceTokens,
     onSourceTokenChange,
     vaultBalanceList,
-    qtyGreaterThanMaxAmount
+    qtyGreaterThanMaxAmount,
+    isTokenUnsupported,
+    onSwitchToSupportedNetwork
   } = props;
   const { t } = useTranslation();
   const internalWithdrawPanel = /* @__PURE__ */ jsxs(
@@ -5540,6 +5797,25 @@ var WithdrawForm = (props) => {
               onTokenChange: onSourceTokenChange,
               status: props.inputStatus,
               hintMessage: props.hintMessage,
+              hintSuffix: isTokenUnsupported ? /* @__PURE__ */ 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__ */ jsx(
+                      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",
@@ -5555,7 +5831,10 @@ var WithdrawForm = (props) => {
               loading: props.balanceRevalidating,
               onClick: () => {
                 onQuantityChange(maxQuantity.toString());
-              }
+              },
+              tooltipContent: t("transfer.withdraw.available.tooltip", {
+                amount: maxQuantity.toString()
+              })
             }
           ),
           /* @__PURE__ */ jsx(Box, { mx: 2, mt: 1, children: /* @__PURE__ */ jsx(
@@ -5905,19 +6184,36 @@ function useWithdrawToken(params) {
   const [token, setToken] = useState();
   const [tokens, setTokens] = useState([]);
   const tokensInfo = useTokensInfo();
+  const { data: holdings } = useHoldingStream();
   const { sourceToken, onSourceTokenChange, sourceTokens } = useToken(
     currentChain,
     (token2) => token2.symbol === "USDC" || token2.is_collateral
   );
-  useEffect(() => {
+  const allTokens = 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;
@@ -5925,10 +6221,39 @@ function useWithdrawToken(params) {
         return 1;
       return 0;
     });
-    const usdcToken = getTokenByTokenList(tokens);
-    setToken(usdcToken || list?.[0]);
-    setTokens(list);
-  }, [tokensInfo]);
+    return list;
+  }, [tokensInfo, holdings]);
+  useEffect(() => {
+    if (!allTokens.length)
+      return;
+    const usdcToken = getTokenByTokenList(allTokens);
+    setToken(usdcToken || allTokens?.[0]);
+    setTokens(allTokens);
+  }, [allTokens]);
+  const isTokenSupportedOnChain = useMemoizedFn(
+    (tokenSymbol) => {
+      if (!currentChain?.info?.token_infos) {
+        return false;
+      }
+      return currentChain.info.token_infos.some(
+        (token2) => token2.symbol === tokenSymbol
+      );
+    }
+  );
+  const handleSourceTokenChange = 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 = useMemoizedFn(() => {
     if (withdrawTo === "accountId" /* Account */) {
       const findToken = tokens.find(
@@ -5937,29 +6262,31 @@ function useWithdrawToken(params) {
       if (findToken) {
         setToken(findToken);
       }
-    } else {
-      const findToken = sourceTokens.find(
-        (item) => item.symbol === token?.symbol
-      );
-      if (findToken) {
-        onSourceTokenChange(findToken);
-      }
     }
   });
   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
   };
 }
 
@@ -6002,6 +6329,7 @@ var useWithdrawFormScript = (options2) => {
     settingChain
   } = useWalletConnector();
   const isLoggedIn = useAuthGuard();
+  const [pendingTokenSymbol, setPendingTokenSymbol] = useState();
   const currentChain = useMemo(() => {
     const chainId = connectedChain ? praseChainIdToNumber(connectedChain.id) : Number.parseInt(linkDeviceStorage?.chainId);
     if (!chainId) {
@@ -6014,17 +6342,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 = useMemoizedFn((token) => {
+    setQuantity("");
+    _OnSourceTokenChange(token);
+    setPendingTokenSymbol(token.symbol);
+  });
   const tokenChains = 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 } = useMemo(
     () => ({
       walletName: wallet?.label,
@@ -6113,6 +6465,17 @@ var useWithdrawFormScript = (options2) => {
     },
     [currentChain, switchChain, findByChainId, t]
   );
+  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;
@@ -6177,7 +6540,20 @@ var useWithdrawFormScript = (options2) => {
     }
     return toNonExponential(value.toNumber());
   }, [fee, quantity]);
+  const isTokenUnsupported = useMemo(() => {
+    if (withdrawTo !== "wallet" /* Wallet */ || !currentChain || !sourceToken?.symbol) {
+      return false;
+    }
+    return !isTokenSupportedOnChain(sourceToken.symbol);
+  }, [withdrawTo, currentChain, sourceToken?.symbol, isTokenSupportedOnChain]);
   useEffect(() => {
+    if (isTokenUnsupported && sourceToken?.symbol) {
+      setInputStatus("error");
+      setHintMessage(
+        t("transfer.withdraw.unsupported.token", { token: sourceToken.symbol })
+      );
+      return;
+    }
     if (!quantity) {
       setInputStatus("default");
       setHintMessage("");
@@ -6193,7 +6569,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;
   useEffect(() => {
     setCrossChainTrans(!!assetHistory?.length);
   }, [assetHistory?.length]);
@@ -6215,8 +6600,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;
+  useMemo(() => {
+    if (withdrawTo === "accountId" /* Account */) {
+      return [];
+    }
+    return vaultBalanceList?.filter(
+      (item) => Number.parseInt(item.chain_id) === currentChain?.id
+    );
+  }, [vaultBalanceList, currentChain, withdrawTo]);
+  const onSwitchToSupportedNetwork = useMemoizedFn(async () => {
+    if (!tokenChains || tokenChains.length === 0)
+      return;
+    const targetNetwork = tokenChains.find((item) => item.isSupported) ?? tokenChains[0];
+    await onChainChange(targetNetwork);
+  });
   return {
     walletName,
     address,
@@ -6256,7 +6654,9 @@ var useWithdrawFormScript = (options2) => {
     currentLTV,
     nextLTV,
     warningMessage,
-    isLoggedIn
+    isLoggedIn,
+    isTokenUnsupported,
+    onSwitchToSupportedNetwork
   };
 };
 var WithdrawFormWidget = (props) => {
@@ -7670,7 +8070,7 @@ var DepositStatusContent = (props) => {
         estimatedTime
       ] });
     }
-    return /* @__PURE__ */ jsx(Badge2, { children: props.count });
+    return /* @__PURE__ */ jsx(Badge3, { children: props.count });
   };
   return /* @__PURE__ */ jsxs(
     Flex,
@@ -7728,7 +8128,7 @@ var DepositStatusContent = (props) => {
     }
   );
 };
-var Badge2 = (props) => {
+var Badge3 = (props) => {
   return /* @__PURE__ */ jsx(
     Flex,
     {