@orderly.network/ui-transfer 2.8.8 → 2.8.9

package/dist/index.js

@@ -14,6 +14,7 @@ var perp = require('@orderly.network/perp');
 var scanClient = require('@layerzerolabs/scan-client');
 var ramda = require('ramda');
 var core = require('@orderly.network/core');
+var web3_js = require('@solana/web3.js');
 var ethers = require('ethers');
 var defaultSolanaAdapter = require('@orderly.network/default-solana-adapter');
 
@@ -5373,10 +5374,31 @@ var DepositFormWidget = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(DepositForm, { ...state });
 };
 var TextAreaInput = (props) => {
-  const { value, onChange, status, hintMessage, placeholder, label } = props;
+  const { t } = i18n.useTranslation();
+  const {
+    value,
+    onChange,
+    status,
+    hintMessage,
+    placeholder,
+    label,
+    enableAccountLookup,
+    accountInfo,
+    accountDropdownOpen,
+    setAccountDropdownOpen
+  } = props;
   const textareaRef = react.useRef(null);
+  const [selectedAccount, setSelectedAccount] = react.useState(
+    null
+  );
+  const displayStatus = status;
+  const displayHint = hintMessage;
   const handleChange = (e) => {
-    onChange?.(e.target.value);
+    const nextValue = e.target.value;
+    if (selectedAccount) {
+      setSelectedAccount(null);
+    }
+    onChange?.(nextValue);
     const textarea = textareaRef.current;
     if (textarea) {
       textarea.style.height = "auto";
@@ -5389,9 +5411,9 @@ var TextAreaInput = (props) => {
       textarea.style.height = "auto";
       textarea.style.height = `${textarea.scrollHeight}px`;
     }
-  }, [value]);
+  }, [value, selectedAccount?.address]);
   const prefix = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-absolute oui-left-3 oui-top-0.5 oui-z-[1]", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 36, children: label }) });
-  const message = /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { mt: 1, gapX: 1, px: 1, children: [
+  const message = /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { mb: 1, gapX: 1, px: 1, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       ui.Box,
       {
@@ -5399,8 +5421,8 @@ var TextAreaInput = (props) => {
         height: 4,
         r: "full",
         className: ui.cn(
-          status === "error" && "oui-bg-danger-light",
-          status === "warning" && "oui-bg-warning-light"
+          displayStatus === "error" && "oui-bg-danger-light",
+          displayStatus === "warning" && "oui-bg-warning-light"
         )
       }
     ),
@@ -5409,40 +5431,178 @@ var TextAreaInput = (props) => {
       {
         size: "2xs",
         className: ui.cn(
-          status === "error" && "oui-text-danger-light",
-          status === "warning" && "oui-text-warning-light"
+          displayStatus === "error" && "oui-text-danger-light",
+          displayStatus === "warning" && "oui-text-warning-light"
         ),
-        children: hintMessage
+        children: displayHint
       }
     )
   ] });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-relative", children: [
+  const textareaNode = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-relative", children: [
     prefix,
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "textarea",
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
       {
-        ref: textareaRef,
-        placeholder,
         className: ui.cn(
-          // hide resize height control and scrollbar
-          "oui-resize-none oui-overflow-y-hidden",
-          "oui-relative oui-min-h-[54px] oui-px-3 oui-pb-2 oui-pt-5",
-          "oui-w-full oui-bg-base-5 oui-text-sm oui-text-base-contrast",
-          "oui-rounded-lg oui-outline-none",
-          "oui-border oui-border-line focus:oui-border-primary-light",
-          status === "error" && "oui-border-danger-light focus-within:oui-border-danger-light focus:oui-border-danger-light",
-          status === "warning" && "oui-border-warning-light focus-within:oui-border-warning-light focus:oui-border-warning-light",
-          "disabled:oui-cursor-not-allowed",
-          props.className
+          "oui-relative oui-w-full oui-rounded-lg oui-border oui-border-line oui-mb-1",
+          "oui-bg-base-5 oui-text-sm oui-text-base-contrast",
+          "focus-within:oui-border-primary-light",
+          displayStatus === "error" && "oui-border-danger-light focus-within:oui-border-danger-light",
+          displayStatus === "warning" && "oui-border-warning-light focus-within:oui-border-warning-light",
+          "disabled:oui-cursor-not-allowed"
         ),
-        rows: 1,
-        value,
-        onChange: handleChange,
-        disabled: props.disabled
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "textarea",
+            {
+              ref: textareaRef,
+              placeholder,
+              className: ui.cn(
+                // hide resize height control and scrollbar
+                "oui-resize-none oui-overflow-y-hidden",
+                "oui-block oui-w-full oui-bg-transparent",
+                "oui-px-3 oui-pt-5",
+                selectedAccount?.address ? "oui-pb-0" : "oui-pb-2",
+                "oui-text-sm oui-text-base-contrast",
+                "oui-rounded-lg oui-outline-none",
+                "placeholder:oui-text-base-contrast-20",
+                props.className
+              ),
+              rows: 1,
+              value,
+              onChange: handleChange,
+              onFocus: () => {
+                if (accountInfo) {
+                  setAccountDropdownOpen?.(true);
+                }
+              },
+              disabled: props.disabled
+            }
+          ),
+          selectedAccount?.address && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-flex oui-items-center oui-justify-between oui-px-3 oui-pb-2 oui-pt-1", children: /* @__PURE__ */ jsxRuntime.jsxs(
+            ui.Text,
+            {
+              size: "2xs",
+              intensity: 36,
+              className: "oui-truncate oui-leading-[15px]",
+              children: [
+                "(",
+                t("common.address"),
+                ":",
+                " ",
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Text.formatted, { as: "span", rule: "address", range: [6, 4], children: selectedAccount.address }),
+                ")"
+              ]
+            }
+          ) }),
+          enableAccountLookup && /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-absolute oui-left-0 oui-bottom-0 oui-w-0 oui-h-0" }) })
+        ]
       }
-    ),
-    hintMessage && message
+    )
   ] });
+  if (!enableAccountLookup) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-relative", children: [
+      textareaNode,
+      displayHint && message
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.DropdownMenuRoot,
+    {
+      open: !!(accountInfo && accountDropdownOpen),
+      onOpenChange: (open) => {
+        if (!open) {
+          setAccountDropdownOpen?.(false);
+        }
+      },
+      children: [
+        textareaNode,
+        displayHint && message,
+        /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-invisible oui-w-0 oui-h-0 oui-overflow-hidden" }) }),
+        accountInfo && accountDropdownOpen && /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.DropdownMenuContent,
+          {
+            align: "start",
+            className: ui.cn(
+              "oui-bg-base-8",
+              "oui-rounded-md oui-shadow-lg",
+              "oui--mt-1 oui-w-[378px] oui-p-1"
+            ),
+            ...{
+              onOpenAutoFocus: (event) => event.preventDefault()
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              AccountResultItem,
+              {
+                item: accountInfo,
+                disabled: props.disabled,
+                selected: !!selectedAccount && selectedAccount.accountId === accountInfo.accountId,
+                onSelect: (account2) => {
+                  onChange?.(account2.accountId);
+                  setSelectedAccount(account2);
+                  setAccountDropdownOpen?.(false);
+                }
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+};
+var AccountResultItem = ({
+  item,
+  disabled,
+  selected,
+  onSelect
+}) => {
+  const { t } = i18n.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: ui.cn(
+        "oui-flex oui-w-full oui-items-center oui-justify-between",
+        "oui-gap-1.5 oui-rounded-[4px] oui-px-2 oui-py-1.5",
+        "oui-cursor-pointer hover:oui-bg-base-5",
+        disabled && "oui-cursor-not-allowed oui-opacity-50"
+      ),
+      onClick: () => !disabled && onSelect(item),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-flex oui-flex-col oui-items-start oui-gap-0.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            ui.Text,
+            {
+              size: "sm",
+              intensity: 54,
+              weight: "semibold",
+              className: "oui-tracking-wide",
+              children: [
+                t("common.accountId"),
+                ":",
+                " ",
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.Text.formatted,
+                  {
+                    rule: "address",
+                    range: [6, 4],
+                    as: "span",
+                    className: "oui-text-primary-light",
+                    children: item.accountId
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "2xs", intensity: 36, children: [
+            "(",
+            item.address,
+            ")"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Checkbox, { checked: !!selected })
+      ]
+    }
+  );
 };
 var UnsettlePnlInfo = (props) => {
   const {
@@ -5733,270 +5893,61 @@ var WithdrawWarningMessage = (props) => {
     }
   );
 };
-var WithdrawForm = (props) => {
+var useSettlePnl = (options2) => {
+  const { accountId } = options2 || {};
+  const { t } = i18n.useTranslation();
+  const ee = hooks.useEventEmitter();
+  const { account: account2, state } = hooks.useAccount();
+  const [positionData] = hooks.usePositionStream();
+  const hasPositions = react.useMemo(
+    () => !!positionData?.rows?.length,
+    [positionData]
+  );
+  const onSettlePnl = async () => {
+    const isSubAccount = accountId && state.mainAccountId !== accountId;
+    const settleFn = isSubAccount ? account2.settleSubAccount({ subAccountId: accountId }) : account2.settle({ accountId });
+    return settleFn.then((res) => {
+      ui.toast.success(t("settle.settlement.requested"));
+      return Promise.resolve(res);
+    }).catch((e) => {
+      if (e.code == -1104) {
+        ui.toast.error(t("settle.settlement.error"));
+      } else if (e.message.indexOf(
+        "Signing off chain messages with Ledger is not yet supported"
+      ) !== -1) {
+        ee.emit("wallet:sign-message-with-ledger-error", {
+          message: e.message,
+          userAddress: account2.address
+        });
+      } else if (e.message.indexOf("user rejected") !== -1) {
+        ui.toast.error(t("transfer.rejectTransaction"));
+      } else {
+        ui.toast.error(e.message);
+        return Promise.reject(e);
+      }
+    });
+  };
+  return {
+    hasPositions,
+    onSettlePnl
+  };
+};
+var cctpSupportedChains = [43114, 1, 137, 42161, 10, 8453, 1329];
+var cctpSupportedTokens = ["USDC"];
+var useVaultBalance = (inputs) => {
   const {
-    address,
-    loading,
-    disabled,
-    quantity,
-    onQuantityChange,
-    sourceToken,
-    amount,
-    maxQuantity,
-    tokenChains,
     currentChain,
-    fee,
-    settingChain,
-    crossChainTrans,
-    checkIsBridgeless,
+    sourceToken,
     withdrawTo,
-    sourceTokens,
-    onSourceTokenChange,
-    vaultBalanceList,
-    qtyGreaterThanMaxAmount,
-    isTokenUnsupported,
-    onSwitchToSupportedNetwork
-  } = props;
+    quantity,
+    qtyGreaterThanMaxAmount
+  } = inputs;
   const { t } = i18n.useTranslation();
-  const internalWithdrawPanel = /* @__PURE__ */ jsxRuntime.jsxs(
-    ui.TabPanel,
+  const { data: vaultBalanceData } = hooks.useQuery(
+    `/v1/public/vault_balance`,
     {
-      title: t("transfer.withdraw.otherAccount", {
-        brokerName: props.brokerName
-      }),
-      value: "accountId" /* Account */,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          TextAreaInput,
-          {
-            label: t("common.accountId"),
-            value: props.toAccountId,
-            onChange: props.setToAccountId,
-            status: props.toAccountIdInputStatus,
-            hintMessage: props.toAccountIdHintMessage,
-            disabled: !props.isLoggedIn
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { my: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", intensity: 54, children: t("transfer.withdraw.accountId.tips") }) })
-      ]
-    }
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    ui.Box,
-    {
-      id: "oui-withdraw-form",
-      className: ui.textVariants({ weight: "semibold" }),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "oui-mb-6 lg:oui-mb-8", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(BrokerWallet, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { mt: 3, mb: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
-            QuantityInput,
-            {
-              value: quantity,
-              onValueChange: onQuantityChange,
-              token: sourceToken,
-              tokens: sourceTokens,
-              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",
-              disabled: !props.isLoggedIn
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            AvailableQuantity,
-            {
-              token: sourceToken,
-              amount,
-              maxQuantity: maxQuantity.toString(),
-              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(
-            UnsettlePnlInfo,
-            {
-              unsettledPnl: props.unsettledPnL,
-              hasPositions: props.hasPositions,
-              onSettlePnl: props.onSettlePnl,
-              tooltipContent: t("settle.unsettled.tooltip"),
-              dialogContent: /* @__PURE__ */ jsxRuntime.jsx(i18n.Trans, { i18nKey: "settle.settlePnl.description" })
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(ExchangeDivider, {}),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            ui.Tabs,
-            {
-              value: withdrawTo,
-              onValueChange: props.setWithdrawTo,
-              variant: "contained",
-              size: "lg",
-              classNames: {
-                tabsList: "oui-px-0",
-                tabsContent: "oui-pt-3"
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  ui.TabPanel,
-                  {
-                    title: t("transfer.web3Wallet.my"),
-                    icon: props.walletName ? /* @__PURE__ */ jsxRuntime.jsx(ui.WalletIcon, { size: "xs", name: props.walletName ?? "" }) : void 0,
-                    value: "wallet" /* Wallet */,
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        ChainSelect,
-                        {
-                          chains: tokenChains,
-                          value: currentChain,
-                          onValueChange: props.onChainChange,
-                          wrongNetwork: props.wrongNetwork,
-                          loading: settingChain,
-                          disabled: !props.isLoggedIn
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        QuantityInput,
-                        {
-                          classNames: {
-                            root: "oui-mt-[2px] oui-rounded-t-sm oui-rounded-b-xl"
-                          },
-                          token: sourceToken,
-                          value: props.showQty,
-                          readOnly: true
-                        }
-                      )
-                    ]
-                  }
-                ),
-                internalWithdrawPanel
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { mt: 2, children: /* @__PURE__ */ jsxRuntime.jsx(
-            LtvWidget,
-            {
-              showDiff: typeof quantity !== "undefined" && Number(quantity) > 0,
-              currentLtv: props.currentLTV,
-              nextLTV: props.nextLTV
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { direction: "column", mt: 1, gapY: 1, itemAlign: "start", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "xs", intensity: 36, children: [
-            t("common.fee"),
-            withdrawTo === "wallet" /* Wallet */ ? " \u2248 " : " = ",
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", intensity: 80, children: fee })
-          ] }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          WithdrawWarningMessage,
-          {
-            checkIsBridgeless,
-            crossChainTrans,
-            qtyGreaterThanMaxAmount,
-            message: props.warningMessage
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { justify: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
-          WithdrawAction,
-          {
-            checkIsBridgeless,
-            networkId: props.networkId,
-            disabled,
-            loading,
-            onWithdraw: props.onWithdraw,
-            crossChainWithdraw: props.crossChainWithdraw,
-            currentChain,
-            address,
-            quantity,
-            fee,
-            withdrawTo,
-            onTransfer: props.onTransfer
-          }
-        ) })
-      ]
-    }
-  );
-};
-var useSettlePnl = (options2) => {
-  const { accountId } = options2 || {};
-  const { t } = i18n.useTranslation();
-  const ee = hooks.useEventEmitter();
-  const { account: account2, state } = hooks.useAccount();
-  const [positionData] = hooks.usePositionStream();
-  const hasPositions = react.useMemo(
-    () => !!positionData?.rows?.length,
-    [positionData]
-  );
-  const onSettlePnl = async () => {
-    const isSubAccount = accountId && state.mainAccountId !== accountId;
-    const settleFn = isSubAccount ? account2.settleSubAccount({ subAccountId: accountId }) : account2.settle({ accountId });
-    return settleFn.then((res) => {
-      ui.toast.success(t("settle.settlement.requested"));
-      return Promise.resolve(res);
-    }).catch((e) => {
-      if (e.code == -1104) {
-        ui.toast.error(t("settle.settlement.error"));
-      } else if (e.message.indexOf(
-        "Signing off chain messages with Ledger is not yet supported"
-      ) !== -1) {
-        ee.emit("wallet:sign-message-with-ledger-error", {
-          message: e.message,
-          userAddress: account2.address
-        });
-      } else if (e.message.indexOf("user rejected") !== -1) {
-        ui.toast.error(t("transfer.rejectTransaction"));
-      } else {
-        ui.toast.error(e.message);
-        return Promise.reject(e);
-      }
-    });
-  };
-  return {
-    hasPositions,
-    onSettlePnl
-  };
-};
-var cctpSupportedChains = [43114, 1, 137, 42161, 10, 8453, 1329];
-var cctpSupportedTokens = ["USDC"];
-var useVaultBalance = (inputs) => {
-  const {
-    currentChain,
-    sourceToken,
-    withdrawTo,
-    quantity,
-    qtyGreaterThanMaxAmount
-  } = inputs;
-  const { t } = i18n.useTranslation();
-  const { data: vaultBalanceData } = hooks.useQuery(
-    `/v1/public/vault_balance`,
-    {
-      revalidateOnMount: true,
-      errorRetryCount: 3
+      revalidateOnMount: true,
+      errorRetryCount: 3
     }
   );
   const vaultBalanceList = react.useMemo(() => {
@@ -6068,6 +6019,12 @@ function useWithdrawAccountId(options2) {
   const [toAccountId, setToAccountId] = react.useState("");
   const [inputStatus, setInputStatus] = react.useState("default");
   const [hintMessage, setHintMessage] = react.useState();
+  const [accountInfo, setAccountInfo] = react.useState(null);
+  const [isDropdownOpen, setIsDropdownOpen] = react.useState(false);
+  const latestLookupInputRef = react.useRef("");
+  const config = hooks.useConfig();
+  const brokerId = config.get("brokerId");
+  const apiBaseUrl = config.get("apiBaseUrl");
   const { transfer, submitting } = hooks.useInternalTransfer();
   const onTransfer = react.useCallback(() => {
     const num = Number(quantity);
@@ -6100,23 +6057,123 @@ function useWithdrawAccountId(options2) {
     if (!toAccountId) {
       setInputStatus("default");
       setHintMessage("");
+      setAccountInfo(null);
+      setIsDropdownOpen(false);
       return;
     }
     if (checkIsAccountId(toAccountId)) {
       setInputStatus("default");
       setHintMessage("");
-    } else {
-      setInputStatus("error");
-      setHintMessage(t("transfer.withdraw.accountId.invalid"));
+      return;
     }
   }, [toAccountId]);
+  const walletLookup = async (input, network) => {
+    if (!network || !brokerId)
+      return null;
+    const chainType = network;
+    const res = await fetch(
+      `${apiBaseUrl}/v1/get_account?address=${encodeURIComponent(
+        input
+      )}&broker_id=${encodeURIComponent(
+        brokerId
+      )}&chain_type=${encodeURIComponent(chainType)}`
+    );
+    const json = await res.json();
+    if (res.ok && json?.success && json?.data?.account_id) {
+      return {
+        accountId: json.data.account_id,
+        address: input
+      };
+    }
+    return null;
+  };
+  const accountLookup = async (input) => {
+    const res = await fetch(
+      `${apiBaseUrl}/v1/public/account?account_id=${encodeURIComponent(input)}`
+    );
+    const json = await res.json();
+    if (res.ok && json?.success && json?.data?.address && (!brokerId || json.data.broker_id === brokerId)) {
+      return {
+        accountId: input,
+        address: json.data.address
+      };
+    }
+    if (res.ok && json?.success && brokerId) {
+      console.log(
+        "This account belongs to a different broker and cannot be used here."
+      );
+    }
+    return null;
+  };
+  const performLookup = react.useCallback(
+    async (rawInput) => {
+      const input = rawInput.trim();
+      if (!input || input !== latestLookupInputRef.current) {
+        return;
+      }
+      const { valid, network } = validateWalletAddress(input);
+      try {
+        let resolved = null;
+        if (valid) {
+          resolved = await walletLookup(input, network);
+        } else {
+          resolved = await accountLookup(input);
+        }
+        if (!resolved) {
+          setAccountInfo(null);
+          setIsDropdownOpen(false);
+          setInputStatus("error");
+          setHintMessage(t("transfer.withdraw.accountId.invalid"));
+        } else {
+          setAccountInfo(resolved);
+          setIsDropdownOpen(true);
+          setInputStatus("default");
+          setHintMessage("");
+        }
+      } catch (error) {
+        console.log("Failed to search account. Please try again.", error);
+        setAccountInfo(null);
+        setIsDropdownOpen(false);
+        setInputStatus("error");
+        setHintMessage(t("transfer.withdraw.accountId.invalid"));
+      }
+    },
+    [brokerId, t]
+  );
+  const debouncedLookup = hooks.useDebouncedCallback((input) => {
+    void performLookup(input);
+  }, 500);
+  const handleAccountIdChange = react.useCallback(
+    (val) => {
+      setToAccountId(val);
+      const trimmed = val.trim();
+      if (!trimmed) {
+        setAccountInfo(null);
+        setIsDropdownOpen(false);
+        latestLookupInputRef.current = "";
+        return;
+      }
+      latestLookupInputRef.current = trimmed;
+      if (checkIsAccountId(trimmed) && accountInfo?.accountId === trimmed) {
+        setIsDropdownOpen(false);
+        setInputStatus("default");
+        setHintMessage("");
+        return;
+      }
+      debouncedLookup(trimmed);
+    },
+    [debouncedLookup, accountInfo]
+  );
   return {
     toAccountId,
-    setToAccountId,
+    setToAccountId: handleAccountIdChange,
     onTransfer,
     internalWithdrawSubmitting: submitting,
     toAccountIdInputStatus: inputStatus,
-    toAccountIdHintMessage: hintMessage
+    toAccountIdHintMessage: hintMessage,
+    toAccountInfo: accountInfo,
+    toAccountInfoDropdownOpen: isDropdownOpen,
+    setToAccountInfoDropdownOpen: setIsDropdownOpen
   };
 }
 function useWithdrawFee(options2) {
@@ -6304,6 +6361,19 @@ function useWithdrawToken(params) {
 }
 
 // src/components/withdrawForm/withdrawForm.script.tsx
+var validateWalletAddress = (address) => {
+  if (ethers.ethers.isAddress(address)) {
+    return { valid: true, network: "EVM" };
+  }
+  try {
+    const pubKey = new web3_js.PublicKey(address);
+    if (web3_js.PublicKey.isOnCurve(pubKey.toBytes())) {
+      return { valid: true, network: "SOL" };
+    }
+  } catch {
+  }
+  return { valid: false };
+};
 var markPrice = 1;
 var useWithdrawFormScript = (options2) => {
   const { t } = i18n.useTranslation();
@@ -6329,8 +6399,8 @@ var useWithdrawFormScript = (options2) => {
   const [inputStatus, setInputStatus] = react.useState("default");
   const [hintMessage, setHintMessage] = react.useState();
   const [withdrawTo, setWithdrawTo] = react.useState("wallet" /* Wallet */);
-  const { wrongNetwork } = reactApp.useAppContext();
-  const { account: account2 } = hooks.useAccount();
+  const { wrongNetwork, widgetConfigs } = reactApp.useAppContext();
+  const { account: account2, state } = hooks.useAccount();
   const [chains, { findByChainId }] = hooks.useChains(networkId, {
     filter: (chain) => chain.network_infos?.bridge_enable || chain.network_infos?.bridgeless
   });
@@ -6390,6 +6460,7 @@ var useWithdrawFormScript = (options2) => {
     });
     return list;
   }, [chains, sourceToken?.symbol]);
+  const enableWithdrawToExternalWallet = widgetConfigs?.withdraw?.enableWithdrawToExternalWallet ?? false;
   const { walletName, address } = react.useMemo(
     () => ({
       walletName: wallet?.label,
@@ -6397,6 +6468,39 @@ var useWithdrawFormScript = (options2) => {
     }),
     [wallet]
   );
+  const [externalWallets, setExternalWallets] = hooks.useLocalStorage("orderly_external_wallets", []);
+  const [selectedWalletAddress, setSelectedWalletAddress] = react.useState();
+  react.useEffect(() => {
+    setSelectedWalletAddress(void 0);
+  }, [currentChain?.namespace]);
+  react.useEffect(() => {
+    if (address && !selectedWalletAddress) {
+      setSelectedWalletAddress(address);
+    }
+  }, [address, selectedWalletAddress]);
+  const onSelectWallet = (address2) => {
+    setSelectedWalletAddress(address2);
+  };
+  const onAddExternalWallet = (addr, network) => {
+    const normalizedAddr = addr.trim();
+    if (!normalizedAddr)
+      return;
+    const connectedAddress = address?.trim();
+    if (connectedAddress && connectedAddress.toLowerCase() === normalizedAddr.toLowerCase()) {
+      setSelectedWalletAddress(normalizedAddr);
+      return;
+    }
+    const exists = (externalWallets || []).some((w) => {
+      return w.address?.trim().toLowerCase() === normalizedAddr.toLowerCase();
+    });
+    if (!exists) {
+      setExternalWallets([
+        ...externalWallets || [],
+        { address: normalizedAddr, network }
+      ]);
+    }
+    setSelectedWalletAddress(normalizedAddr);
+  };
   const onQuantityChange = (qty) => {
     setQuantity(qty);
   };
@@ -6501,7 +6605,8 @@ var useWithdrawFormScript = (options2) => {
       amount: quantity,
       token: sourceToken?.symbol,
       chainId: currentChain?.id,
-      allowCrossChainWithdraw: crossChainWithdraw
+      allowCrossChainWithdraw: crossChainWithdraw,
+      receiver: selectedWalletAddress
     }).then((res) => {
       ui.toast.success(t("transfer.withdraw.requested"));
       ee.emit("withdraw:requested");
@@ -6669,8 +6774,587 @@ var useWithdrawFormScript = (options2) => {
     warningMessage,
     isLoggedIn,
     isTokenUnsupported,
-    onSwitchToSupportedNetwork
+    onSwitchToSupportedNetwork,
+    enableWithdrawToExternalWallet,
+    externalWallets,
+    selectedWalletAddress: selectedWalletAddress || address,
+    onSelectWallet,
+    onAddExternalWallet,
+    setExternalWallets,
+    isEnableTrading: state.status >= types.AccountStatusEnum.EnableTrading || state.status === types.AccountStatusEnum.EnableTradingWithoutConnected
+  };
+};
+var AddWalletDialog = ({
+  open,
+  onOpenChange,
+  onConfirm,
+  chain
+}) => {
+  const { t } = i18n.useTranslation();
+  const [address, setAddress] = react.useState("");
+  const [isValidating, setIsValidating] = react.useState(false);
+  const [validationResult, setValidationResult] = react.useState(null);
+  const checkAddress = hooks.useDebouncedCallback((addr) => {
+    if (!addr) {
+      setValidationResult(null);
+      setIsValidating(false);
+      return;
+    }
+    const result = validateWalletAddress(addr);
+    setValidationResult(result);
+    setIsValidating(false);
+  }, 500);
+  const onAddressChange = (val) => {
+    setAddress(val);
+    if (!val) {
+      setValidationResult(null);
+      setIsValidating(false);
+      return;
+    }
+    setIsValidating(true);
+    setValidationResult(null);
+    checkAddress(val);
+  };
+  const onClear = () => {
+    setAddress("");
+    setValidationResult(null);
+    setIsValidating(false);
   };
+  react.useEffect(() => {
+    if (!open)
+      onClear();
+  }, [open]);
+  const requiredNetwork = chain?.namespace === types.ChainNamespace.solana ? "SOL" : chain?.namespace === types.ChainNamespace.evm ? "EVM" : void 0;
+  const requiredNetworkLabel = requiredNetwork === "SOL" ? "Solana" : requiredNetwork === "EVM" ? "EVM" : "";
+  const hasValidation = !!validationResult;
+  const isValid = !!validationResult?.valid;
+  const isInvalidFormat = hasValidation && !validationResult.valid;
+  const isNetworkMismatch = isValid && !!requiredNetwork && validationResult.network !== requiredNetwork;
+  const showBorderDanger = !isValidating && hasValidation && (isInvalidFormat || isNetworkMismatch);
+  const showProtocolLabel = !isValidating && isValid;
+  const showInlineInvalid = !isValidating && isInvalidFormat;
+  const showErrorHint = !isValidating && isNetworkMismatch;
+  const handleConfirm = () => {
+    if (!address || isValidating || !isValid || isNetworkMismatch)
+      return;
+    onConfirm(address, validationResult.network === "SOL" ? "SOL" : "EVM");
+    onOpenChange(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.SimpleDialog,
+    {
+      open,
+      onOpenChange,
+      title: t("transfer.withdraw.addExternalWallet"),
+      size: "sm",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "oui-flex oui-flex-col oui-gap-6 oui-font-semibold oui-tracking-[0.03em]", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", intensity: 54, children: t("common.network") }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.ChainIcon, { chainId: "" + chain?.id, className: "oui-w-4 oui-h-4" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", children: chain?.info?.network_infos?.shortName })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", gapY: 2, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", intensity: 54, children: t("transfer.withdraw.addExternalWallet.addressDescription") }),
+          requiredNetworkLabel && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", intensity: 54, children: t("transfer.withdraw.addExternalWallet.addressWarning", {
+            networkLabel: requiredNetworkLabel
+          }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "oui-flex oui-flex-col oui-gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 54, children: t("transfer.withdraw.addExternalWallet.label") }),
+            isValidating && /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, { className: "oui-w-3.5 oui-h-3.5 oui-text-base-contrast-36" }),
+            showProtocolLabel && /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Text,
+              {
+                size: "2xs",
+                className: ui.cn(
+                  isNetworkMismatch ? "oui-text-danger" : "oui-text-primary-light"
+                ),
+                children: validationResult.network === "EVM" ? "EVM" : "Solana"
+              }
+            ),
+            showInlineInvalid && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", className: "oui-text-danger", children: t("common.invalid") })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Input,
+            {
+              value: address,
+              onValueChange: onAddressChange,
+              autoFocus: true,
+              color: showBorderDanger ? "danger" : void 0,
+              className: ui.cn("oui-bg-transparent oui-bg-base-6"),
+              classNames: { input: "oui-text-white" },
+              suffix: address && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-ml-2.5 oui-mr-2 oui-cursor-pointer", children: /* @__PURE__ */ jsxRuntime.jsx(
+                ui.CloseRoundFillIcon,
+                {
+                  size: 16,
+                  onClick: onClear,
+                  className: "oui-text-base-contrast-20 hover:oui-text-base-contrast-54"
+                }
+              ) })
+            }
+          ),
+          showErrorHint && /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { 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: "oui-bg-danger-light"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", className: "oui-text-danger-light", children: t("transfer.withdraw.addExternalWallet.networkMismatch", {
+              networkLabel: requiredNetworkLabel
+            }) })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Button,
+          {
+            variant: "contained",
+            fullWidth: true,
+            onClick: handleConfirm,
+            disabled: !address || isValidating || !isValid || isNetworkMismatch,
+            className: "oui-mt-2",
+            children: t("common.confirm")
+          }
+        )
+      ] })
+    }
+  );
+};
+var AddIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    width: "18",
+    height: "18",
+    viewBox: "0 0 18 18",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.99316 2.19731C8.57916 2.19731 8.24316 2.53331 8.24316 2.94731V8.19731H2.99316C2.57916 8.19731 2.24316 8.53331 2.24316 8.94731C2.24316 9.36131 2.57916 9.69731 2.99316 9.69731H8.24316V14.9473C8.24316 15.3613 8.57916 15.6973 8.99316 15.6973C9.40716 15.6973 9.74316 15.3613 9.74316 14.9473V9.69731H14.9932C15.4072 9.69731 15.7432 9.36131 15.7432 8.94731C15.7432 8.53331 15.4072 8.19731 14.9932 8.19731H9.74316V2.94731C9.74316 2.53331 9.40716 2.19731 8.99316 2.19731Z" })
+  }
+);
+var WalletMenuItem = ({
+  onClick,
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: ui.cn(
+        "oui-flex oui-items-center oui-gap-2 oui-py-1.5 oui-px-2 hover:oui-bg-base-5",
+        "oui-rounded-[4px]",
+        "oui-font-semibold oui-tracking-[0.03em]",
+        className
+      ),
+      children
+    }
+  );
+};
+var WalletSelector = ({
+  connectedWallet,
+  externalWallets,
+  selectedAddress,
+  onSelect,
+  onAddExternalWallet
+}) => {
+  const { t } = i18n.useTranslation();
+  const [isOpen, setIsOpen] = react.useState(false);
+  const currentNetwork = react.useMemo(() => {
+    if (!connectedWallet?.namespace)
+      return void 0;
+    const ns = connectedWallet.namespace.toLowerCase();
+    if (ns.includes("sol"))
+      return "SOL";
+    return "EVM";
+  }, [connectedWallet?.namespace]);
+  const filteredExternalWallets = react.useMemo(() => {
+    if (!currentNetwork)
+      return externalWallets;
+    return externalWallets.filter(
+      (wallet) => wallet.network === currentNetwork
+    );
+  }, [externalWallets, currentNetwork]);
+  const selectedWalletOpt = react.useMemo(() => {
+    if (connectedWallet && selectedAddress === connectedWallet.address) {
+      return {
+        address: connectedWallet.address,
+        name: connectedWallet.name,
+        network: currentNetwork
+      };
+    }
+    return filteredExternalWallets.find(
+      (w) => w.address === selectedAddress
+    );
+  }, [
+    connectedWallet,
+    currentNetwork,
+    filteredExternalWallets,
+    selectedAddress
+  ]);
+  const hasExternalWallets = filteredExternalWallets.length > 0;
+  const showConnectedItem = !!connectedWallet && hasExternalWallets;
+  const getChainLabel = (network) => {
+    if (!network)
+      return "";
+    if (network === "SOL")
+      return "Solana";
+    return "EVM";
+  };
+  const handleSelectWallet = (address) => {
+    onSelect(address);
+    setIsOpen(false);
+  };
+  const handleAddExternalWalletClick = () => {
+    onAddExternalWallet();
+    setIsOpen(false);
+  };
+  const dropdownContent = /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuPortal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.DropdownMenuContent,
+    {
+      align: "end",
+      className: "oui-max-h-[240px] oui-overflow-y-auto oui-custom-scrollbar",
+      children: [
+        showConnectedItem && connectedWallet && /* @__PURE__ */ jsxRuntime.jsx(
+          WalletMenuItem,
+          {
+            onClick: () => handleSelectWallet(connectedWallet.address),
+            className: "oui-w-[368px]",
+            children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", gapY: 1, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", className: "oui-text-base-contrast-54", children: t("common.myWallet") }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Text,
+                {
+                  size: "2xs",
+                  intensity: 54,
+                  className: "oui-text-base-contrast-36 oui-leading-[15px]",
+                  children: `(${getChainLabel(currentNetwork)}) ${connectedWallet.address}`
+                }
+              )
+            ] })
+          }
+        ),
+        hasExternalWallets && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: filteredExternalWallets.map((wallet) => /* @__PURE__ */ jsxRuntime.jsx(
+          WalletMenuItem,
+          {
+            onClick: () => handleSelectWallet(wallet.address),
+            className: "oui-w-[368px]",
+            children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", gapY: 1, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", className: "oui-text-base-contrast-54", children: t("common.externalWallet") }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Text,
+                {
+                  size: "2xs",
+                  intensity: 54,
+                  className: "oui-text-base-contrast-36 oui-leading-[15px]",
+                  children: `(${getChainLabel(wallet.network)}) ${wallet.address}`
+                }
+              )
+            ] })
+          },
+          wallet.address
+        )) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          WalletMenuItem,
+          {
+            onClick: handleAddExternalWalletClick,
+            className: ui.cn(
+              "oui-justify-center",
+              hasExternalWallets && "oui-w-full",
+              !hasExternalWallets && "oui-w-[190px]"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              ui.Flex,
+              {
+                itemAlign: "center",
+                gapX: 1,
+                className: "oui-text-primary oui-font-semibold oui-tracking-[0.03em]",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(AddIcon, { className: "oui-size-[18px]" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", children: t("transfer.withdraw.addExternalWallet") })
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) });
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", className: "oui-w-full oui-mb-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 36, children: t("common.wallet") }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuRoot, { open: isOpen, onOpenChange: setIsOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-flex oui-items-center oui-gap-1 oui-cursor-pointer oui-text-base-contrast-54 hover:oui-text-base-contrast-80", children: [
+        selectedWalletOpt?.name && /* @__PURE__ */ jsxRuntime.jsx(ui.WalletIcon, { name: selectedWalletOpt.name, size: "3xs" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text.formatted, { size: "2xs", intensity: 54, rule: "address", children: selectedWalletOpt?.address || "" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Text,
+          {
+            size: "2xs",
+            intensity: 54,
+            className: "oui-text-base-contrast-36",
+            children: ` (${getChainLabel(selectedWalletOpt?.network)})`
+          }
+        ),
+        isOpen ? /* @__PURE__ */ jsxRuntime.jsx(ui.CaretUpIcon, { size: 12, className: "oui-text-inherit" }) : /* @__PURE__ */ jsxRuntime.jsx(ui.CaretDownIcon, { size: 12, className: "oui-text-inherit" })
+      ] }) }),
+      dropdownContent
+    ] })
+  ] });
+};
+var WithdrawForm = (props) => {
+  const {
+    address,
+    walletName,
+    loading,
+    disabled,
+    quantity,
+    onQuantityChange,
+    sourceToken,
+    amount,
+    maxQuantity,
+    tokenChains,
+    currentChain,
+    fee,
+    settingChain,
+    crossChainTrans,
+    checkIsBridgeless,
+    withdrawTo,
+    sourceTokens,
+    onSourceTokenChange,
+    vaultBalanceList,
+    qtyGreaterThanMaxAmount,
+    isTokenUnsupported,
+    onSwitchToSupportedNetwork,
+    externalWallets,
+    selectedWalletAddress,
+    onSelectWallet,
+    onAddExternalWallet,
+    isEnableTrading,
+    enableWithdrawToExternalWallet
+  } = props;
+  const { t } = i18n.useTranslation();
+  const [addWalletOpen, setAddWalletOpen] = react.useState(false);
+  const handleAddExternalWallet = (address2, network) => {
+    onAddExternalWallet?.(address2, network);
+  };
+  const internalWithdrawPanel = /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.TabPanel,
+    {
+      title: t("transfer.withdraw.otherAccount", {
+        brokerName: props.brokerName
+      }),
+      value: "accountId" /* Account */,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TextAreaInput,
+          {
+            label: t("common.accountId"),
+            value: props.toAccountId,
+            onChange: props.setToAccountId,
+            status: props.toAccountIdInputStatus,
+            hintMessage: props.toAccountIdHintMessage,
+            disabled: !props.isLoggedIn,
+            placeholder: t("transfer.withdraw.accountIdOrAddress.placeholder"),
+            enableAccountLookup: true,
+            accountInfo: props.toAccountInfo,
+            accountDropdownOpen: props.toAccountInfoDropdownOpen,
+            setAccountDropdownOpen: props.setToAccountInfoDropdownOpen
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { mb: 1, px: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", intensity: 54, children: t("transfer.withdraw.accountIdOrAddress.hint") }) })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Box,
+    {
+      id: "oui-withdraw-form",
+      className: ui.textVariants({ weight: "semibold" }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "oui-mb-6 lg:oui-mb-8", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(BrokerWallet, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { mt: 3, mb: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+            QuantityInput,
+            {
+              value: quantity,
+              onValueChange: onQuantityChange,
+              token: sourceToken,
+              tokens: sourceTokens,
+              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",
+              disabled: !props.isLoggedIn
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            AvailableQuantity,
+            {
+              token: sourceToken,
+              amount,
+              maxQuantity: maxQuantity.toString(),
+              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(
+            UnsettlePnlInfo,
+            {
+              unsettledPnl: props.unsettledPnL,
+              hasPositions: props.hasPositions,
+              onSettlePnl: props.onSettlePnl,
+              tooltipContent: t("settle.unsettled.tooltip"),
+              dialogContent: /* @__PURE__ */ jsxRuntime.jsx(i18n.Trans, { i18nKey: "settle.settlePnl.description" })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ExchangeDivider, {}),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            ui.Tabs,
+            {
+              value: withdrawTo,
+              onValueChange: props.setWithdrawTo,
+              variant: "contained",
+              size: "lg",
+              classNames: {
+                tabsList: "oui-px-0",
+                tabsContent: "oui-pt-3"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  ui.TabPanel,
+                  {
+                    title: t("transfer.web3Wallet.my"),
+                    icon: props.walletName ? /* @__PURE__ */ jsxRuntime.jsx(ui.WalletIcon, { size: "xs", name: props.walletName ?? "" }) : void 0,
+                    value: "wallet" /* Wallet */,
+                    children: [
+                      isEnableTrading && enableWithdrawToExternalWallet && /* @__PURE__ */ jsxRuntime.jsx(
+                        WalletSelector,
+                        {
+                          connectedWallet: address ? {
+                            name: walletName || t("common.wallet"),
+                            address,
+                            namespace: currentChain?.namespace
+                          } : void 0,
+                          externalWallets: externalWallets || [],
+                          selectedAddress: selectedWalletAddress ?? "",
+                          onSelect: onSelectWallet,
+                          onAddExternalWallet: () => setAddWalletOpen(true)
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { mb: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+                        ChainSelect,
+                        {
+                          chains: tokenChains,
+                          value: currentChain,
+                          onValueChange: props.onChainChange,
+                          wrongNetwork: props.wrongNetwork,
+                          loading: settingChain,
+                          disabled: !props.isLoggedIn
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        QuantityInput,
+                        {
+                          classNames: {
+                            root: "oui-mt-[2px] oui-rounded-t-sm oui-rounded-b-xl"
+                          },
+                          token: sourceToken,
+                          value: props.showQty,
+                          readOnly: true
+                        }
+                      )
+                    ]
+                  }
+                ),
+                internalWithdrawPanel
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { mt: 2, px: 2, children: /* @__PURE__ */ jsxRuntime.jsx(
+            LtvWidget,
+            {
+              showDiff: typeof quantity !== "undefined" && Number(quantity) > 0,
+              currentLtv: props.currentLTV,
+              nextLTV: props.nextLTV
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { direction: "column", mt: 1, gapY: 1, px: 2, itemAlign: "start", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "xs", intensity: 36, children: [
+            t("common.fee"),
+            withdrawTo === "wallet" /* Wallet */ ? " \u2248 " : " = ",
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", intensity: 80, children: fee })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          WithdrawWarningMessage,
+          {
+            checkIsBridgeless,
+            crossChainTrans,
+            qtyGreaterThanMaxAmount,
+            message: props.warningMessage
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { justify: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
+          WithdrawAction,
+          {
+            checkIsBridgeless,
+            networkId: props.networkId,
+            disabled,
+            loading,
+            onWithdraw: props.onWithdraw,
+            crossChainWithdraw: props.crossChainWithdraw,
+            currentChain,
+            address,
+            quantity,
+            fee,
+            withdrawTo,
+            onTransfer: props.onTransfer
+          }
+        ) }),
+        enableWithdrawToExternalWallet && /* @__PURE__ */ jsxRuntime.jsx(
+          AddWalletDialog,
+          {
+            open: addWalletOpen,
+            onOpenChange: setAddWalletOpen,
+            onConfirm: handleAddExternalWallet,
+            chain: currentChain
+          }
+        )
+      ]
+    }
+  );
 };
 var WithdrawFormWidget = (props) => {
   const state = useWithdrawFormScript(props);