@orderly.network/ui-transfer 3.0.0-beta.1 → 3.0.0-beta.2

package/dist/index.js

@@ -9,6 +9,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var types = require('@orderly.network/types');
 var uiConnector = require('@orderly.network/ui-connector');
 var reactApp = require('@orderly.network/react-app');
+var qr = require('@akamfoad/qr');
 var perp = require('@orderly.network/perp');
 var core = require('@orderly.network/core');
 var uiChainSelector = require('@orderly.network/ui-chain-selector');
@@ -599,6 +600,392 @@ var ExchangeDivider = ({ icon }) => {
     /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { height: 1, className: "oui-flex-1 oui-bg-base-contrast-12" })
   ] });
 };
+var CopyIcon = ({ copied }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    width: "17",
+    height: "16",
+    viewBox: "0 0 17 16",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: `oui-fill-base-contrast oui-text-base-contrast-54 ${copied ? "oui-fill-success oui-text-success" : ""}`,
+    children: copied ? /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M14 4L6 11.5L3 8.5",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M5.166 1.994A2.667 2.667 0 0 0 2.499 4.66v4a2.667 2.667 0 0 0 2.667 2.667 2.667 2.667 0 0 0 2.666 2.667h4a2.667 2.667 0 0 0 2.667-2.667v-4a2.667 2.667 0 0 0-2.667-2.667 2.667 2.667 0 0 0-2.666-2.666zm6.666 4c.737 0 1.334.596 1.334 1.333v4c0 .737-.597 1.334-1.334 1.334h-4A1.333 1.333 0 0 1 6.5 11.327h2.667a2.667 2.667 0 0 0 2.666-2.667z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+var CopyAddress = ({ address }) => {
+  const [copied, setCopied] = react.useState(false);
+  const handleCopy = () => {
+    navigator.clipboard.writeText(address);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
+    {
+      gap: 1,
+      itemAlign: "start",
+      className: "oui-mt-6 oui-w-full oui-cursor-pointer oui-justify-center",
+      onClick: handleCopy,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Text,
+          {
+            size: "xs",
+            className: "oui-break-all oui-text-center oui-text-base-contrast-80",
+            title: address,
+            children: address
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-mt-0.5 oui-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(CopyIcon, { copied }) })
+      ]
+    }
+  );
+};
+var DepositStatusBlock = ({
+  amount,
+  symbol = "USDC",
+  pendingCount,
+  explorerUrl
+}) => {
+  const { t: t0 } = i18n.useTranslation();
+  const t = t0;
+  const label = t("transfer.exclusiveDeposit.depositPending", {
+    amount,
+    symbol
+  });
+  const handleClick = () => {
+    window.open(explorerUrl, "_blank", "noopener,noreferrer");
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
+    {
+      itemAlign: "center",
+      gap: 2,
+      className: "oui-group oui-mt-6 oui-w-full oui-cursor-pointer",
+      onClick: handleClick,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-size-2 oui-shrink-0 oui-rounded-full oui-bg-primary" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", intensity: 98, className: "oui-flex-1", children: label }),
+        pendingCount > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Flex,
+          {
+            justify: "center",
+            itemAlign: "center",
+            r: "full",
+            width: 18,
+            height: 18,
+            className: "oui-bg-line-12",
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "3xs", intensity: 80, children: pendingCount })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.ChevronRightIcon, { className: "oui-size-4 oui-text-base-contrast-54 oui-transition-colors group-hover:oui-text-base-contrast-80" })
+      ]
+    }
+  );
+};
+var NetworkTokenSelect = ({
+  selectedNetwork,
+  selectedToken,
+  onNetworkChange,
+  onTokenChange,
+  networkOptions,
+  tokenOptions
+}) => {
+  const { t: t0 } = i18n.useTranslation();
+  const t = t0;
+  const selectContentProps = {
+    align: "end",
+    sideOffset: -4,
+    className: "oui-custom-scrollbar"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { className: "oui-w-full", justify: "between", itemAlign: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", intensity: 36, children: t("common.network") }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-ml-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Select,
+        {
+          size: "xs",
+          value: selectedNetwork || void 0,
+          onValueChange: onNetworkChange,
+          placeholder: t("transfer.exclusiveDeposit.selectNetwork"),
+          variant: "text",
+          classNames: { trigger: "oui-pr-0" },
+          maxHeight: 128,
+          contentProps: selectContentProps,
+          children: networkOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: opt.value, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, itemAlign: "center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.ChainIcon, { chainId: opt.chainId, size: "2xs" }),
+            opt.label
+          ] }) }, opt.value))
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { className: "oui-w-full", justify: "between", itemAlign: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", intensity: 36, children: t("common.token") }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-ml-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Select,
+        {
+          size: "xs",
+          value: selectedToken || void 0,
+          onValueChange: onTokenChange,
+          placeholder: t("transfer.exclusiveDeposit.selectToken"),
+          variant: "text",
+          classNames: { trigger: "oui-pr-0" },
+          maxHeight: 128,
+          contentProps: selectContentProps,
+          children: tokenOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: opt.value, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, itemAlign: "center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { name: opt.value, size: "2xs" }),
+            opt.label
+          ] }) }, opt.value))
+        }
+      ) })
+    ] })
+  ] });
+};
+var QRCodeDisplay = ({ address }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { direction: "column", className: "oui-mt-5 oui-w-full", itemAlign: "center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-relative oui-flex oui-size-[140px] oui-items-center oui-justify-center oui-rounded-lg oui-bg-white oui-p-2", children: address ? /* @__PURE__ */ jsxRuntime.jsx(QRCodeCanvas, { width: 124, height: 124, content: address }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-size-full oui-border-8 oui-border-dashed oui-border-black oui-opacity-50" }) }) });
+};
+var QRCodeCanvas = ({ width, height, content }) => {
+  const canvasRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!canvasRef.current || !content) return;
+    const qrcode = qr.qrcode(content);
+    const ctx = canvasRef.current.getContext("2d");
+    const cells = qrcode.modules;
+    const tileW = width / cells.length;
+    const tileH = height / cells.length;
+    for (let r = 0; r < cells.length; ++r) {
+      const row = cells[r];
+      for (let c = 0; c < row.length; ++c) {
+        ctx.fillStyle = row[c] ? "#000" : "#fff";
+        const w = Math.ceil((c + 1) * tileW) - Math.floor(c * tileW);
+        const h = Math.ceil((r + 1) * tileH) - Math.floor(r * tileH);
+        ctx.fillRect(Math.round(c * tileW), Math.round(r * tileH), w, h);
+      }
+    }
+  }, [content, width, height]);
+  return /* @__PURE__ */ jsxRuntime.jsx("canvas", { width, height, ref: canvasRef });
+};
+var WarningBanner = ({ message }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
+    {
+      itemAlign: "start",
+      gap: 1,
+      className: "oui-mt-4 oui-w-[calc(100%+2.5rem)] oui-rounded oui-bg-[#FF7D00]/10 oui-px-5 oui-py-2 oui-text-[#FF7D00]",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-mt-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(ui.WarningIcon, { width: 16, height: 16 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", intensity: 80, className: "oui-w-full oui-text-[#FF7D00]", children: message })
+      ]
+    }
+  );
+};
+var buildExplorerUrl = (baseUrl, txId) => {
+  const url = baseUrl;
+  if (url.endsWith("/")) {
+    return `${url}tx/${txId}`;
+  }
+  return `${url}/tx/${txId}`;
+};
+var useExclusiveDeposit = (options2) => {
+  const active = options2.active ?? true;
+  const confirmed = options2.confirmed ?? true;
+  const { chainId, explorerBaseUrl } = options2;
+  const { t: t0 } = i18n.useTranslation();
+  const t = t0;
+  const receiverAddressKey = confirmed && chainId ? `/v1/client/asset/receiver_address?chain_id=${chainId}` : null;
+  const receiverEventsKey = active && confirmed ? "/v1/client/asset/receiver_events" : null;
+  const {
+    data: addressData,
+    isLoading: isAddressLoading,
+    error: addressError
+  } = hooks.usePrivateQuery(receiverAddressKey, {
+    revalidateOnFocus: false
+  });
+  const {
+    data: eventsData,
+    isLoading: isEventsLoading,
+    error: eventsError
+  } = hooks.usePrivateQuery(receiverEventsKey, {
+    refreshInterval: active ? 1e4 : 0,
+    revalidateOnFocus: false
+  });
+  const { latestEvent, pendingCount, explorerUrl } = react.useMemo(() => {
+    const events = eventsData ?? [];
+    if (!events.length) {
+      return {
+        latestEvent: void 0,
+        pendingCount: 0,
+        explorerUrl: void 0
+      };
+    }
+    const latest = events.reduce((acc, curr) => {
+      if (!acc) return curr;
+      return curr.created_time > acc.created_time ? curr : acc;
+    }, void 0);
+    const count = events.length;
+    const url = latest?.tx_id ? buildExplorerUrl(explorerBaseUrl, latest.tx_id) : void 0;
+    return {
+      latestEvent: latest,
+      pendingCount: count,
+      explorerUrl: url
+    };
+  }, [explorerBaseUrl, eventsData]);
+  return {
+    address: addressData?.receiver_address,
+    qrUri: addressData?.receiver_address,
+    minimumDeposit: addressData?.minimum_deposit,
+    estimatedArrivalText: t("transfer.exclusiveDeposit.estimatedTime.default"),
+    latestEvent,
+    pendingCount,
+    explorerUrl,
+    isAddressLoading,
+    isEventsLoading,
+    addressError,
+    eventsError
+  };
+};
+var SUPPORTED_CHAINS = {
+  prod: [42161],
+  testnet: [421614]
+};
+var SUPPORTED_TOKENS = ["USDC"];
+var useExclusiveDepositOptions = () => {
+  const env = hooks.useConfig("env");
+  const networkId = hooks.useConfig("networkId");
+  const [chains, { findByChainId }] = hooks.useChains(networkId, {
+    pick: "network_infos"
+  });
+  const supportedChainIds = env === "prod" ? SUPPORTED_CHAINS.prod : SUPPORTED_CHAINS.testnet;
+  const networkOptions = react.useMemo(() => {
+    return supportedChainIds.map((chainId) => {
+      const chain = findByChainId(chainId);
+      const name = chain?.network_infos?.name ?? `Chain ${chainId}`;
+      const explorerUrl = chain?.network_infos?.explorer_base_url ?? "";
+      return {
+        label: name,
+        value: String(chainId),
+        chainId,
+        explorerUrl
+      };
+    });
+  }, [supportedChainIds, findByChainId]);
+  const tokenOptions = react.useMemo(() => {
+    return SUPPORTED_TOKENS.map((symbol) => ({
+      label: symbol,
+      value: symbol
+    }));
+  }, []);
+  return { networkOptions, tokenOptions };
+};
+var ExclusiveDeposit = ({ active }) => {
+  const { t: t0 } = i18n.useTranslation();
+  const t = t0;
+  const [selectedNetwork, setSelectedNetwork] = react.useState("");
+  const [selectedToken, setSelectedToken] = react.useState("");
+  const { networkOptions, tokenOptions } = useExclusiveDepositOptions();
+  const confirmed = !!selectedNetwork && !!selectedToken;
+  const selectedNetworkOption = selectedNetwork ? networkOptions.find((n) => n.value === selectedNetwork) : void 0;
+  const selectedChainId = selectedNetworkOption?.chainId;
+  const selectedTokenOption = selectedToken ? tokenOptions.find((t2) => t2.value === selectedToken) : void 0;
+  const {
+    address,
+    qrUri,
+    minimumDeposit,
+    estimatedArrivalText,
+    latestEvent,
+    pendingCount,
+    explorerUrl
+  } = useExclusiveDeposit({
+    active,
+    confirmed,
+    chainId: selectedChainId,
+    explorerBaseUrl: selectedNetworkOption?.explorerUrl ?? ""
+  });
+  const networkName = selectedNetworkOption?.label ?? "";
+  const tokenName = selectedTokenOption?.label ?? "";
+  const warningMessage = confirmed ? t("transfer.exclusiveDeposit.warning", {
+    token: tokenName,
+    network: networkName
+  }) : t("transfer.exclusiveDeposit.selectFirst");
+  const minText = confirmed && typeof minimumDeposit === "number" ? `${minimumDeposit} ${tokenName}` : "--";
+  const estText = confirmed ? estimatedArrivalText ?? t("transfer.exclusiveDeposit.estimatedTime.default") : "--";
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "oui-flex oui-flex-col oui-items-center oui-rounded-xl oui-bg-base-8 oui-tracking-[0.03em]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(WarningBanner, { message: warningMessage }),
+    confirmed && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(QRCodeDisplay, { address: qrUri }),
+      address && /* @__PURE__ */ jsxRuntime.jsx(CopyAddress, { address })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gap: 2, className: "oui-mt-5 oui-w-full", children: [
+      confirmed ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { className: "oui-w-full", justify: "between", itemAlign: "center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", intensity: 36, children: t("common.network") }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, itemAlign: "center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.ChainIcon, { chainId: selectedChainId, size: "2xs" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", intensity: 98, children: networkName })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { className: "oui-w-full", justify: "between", itemAlign: "center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", intensity: 36, children: t("common.token") }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, itemAlign: "center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { name: tokenName, size: "2xs" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", intensity: 98, children: tokenName })
+          ] })
+        ] })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+        NetworkTokenSelect,
+        {
+          selectedNetwork,
+          selectedToken,
+          onNetworkChange: setSelectedNetwork,
+          onTokenChange: setSelectedToken,
+          networkOptions,
+          tokenOptions
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { className: "oui-w-full", justify: "between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", intensity: 36, children: t("transfer.exclusiveDeposit.minDeposit") }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Text,
+          {
+            size: "xs",
+            className: confirmed ? "oui-text-[#FF7D00]" : "",
+            intensity: confirmed ? void 0 : 98,
+            children: minText
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { className: "oui-w-full", justify: "between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", intensity: 36, children: t("transfer.exclusiveDeposit.estimatedTime") }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", intensity: 98, children: estText })
+      ] })
+    ] }),
+    confirmed && latestEvent && explorerUrl && /* @__PURE__ */ jsxRuntime.jsx(
+      DepositStatusBlock,
+      {
+        amount: latestEvent.amount,
+        symbol: latestEvent.token,
+        pendingCount,
+        explorerUrl
+      }
+    )
+  ] });
+};
 var Fee = (props) => {
   const { dstGasFee, feeQty, feeAmount, dp, nativeSymbol } = props;
   const { t } = i18n.useTranslation();
@@ -1523,7 +1910,10 @@ var DepositForm = (props) => {
     showSourceDepositCap,
     showTargetDepositCap,
     slippageValidate,
-    quantityNotional
+    quantityNotional,
+    activeSubTab,
+    setActiveSubTab,
+    showExclusiveDeposit
   } = props;
   const { t } = i18n.useTranslation();
   const tokenValueFormatter = (value) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -1584,101 +1974,129 @@ var DepositForm = (props) => {
       /* @__PURE__ */ jsxRuntime.jsx(Fee, { ...fee, nativeSymbol: props.nativeSymbol })
     ] });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { id: "oui-deposit-form", className: ui.textVariants({ weight: "semibold" }), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "oui-mb-6 lg:oui-mb-8", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Web3Wallet, {}),
-      /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { mt: 3, mb: 1, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ChainSelect,
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { id: "oui-deposit-form", className: ui.textVariants({ weight: "semibold" }), children: /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Tabs,
+    {
+      value: activeSubTab,
+      onValueChange: (value) => setActiveSubTab(value),
+      variant: "contained",
+      classNames: {
+        tabsList: "oui-w-fit"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          ui.TabPanel,
           {
-            chains,
-            value: currentChain,
-            onValueChange: onChainChange,
-            wrongNetwork,
-            loading: settingChain,
-            disabled: !props.isLoggedIn
+            title: t("transfer.deposit.tab.connectedWallet"),
+            value: "web3",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "oui-mt-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Web3Wallet, {}),
+                /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { mt: 3, mb: 1, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    ChainSelect,
+                    {
+                      chains,
+                      value: currentChain,
+                      onValueChange: onChainChange,
+                      wrongNetwork,
+                      loading: settingChain,
+                      disabled: !props.isLoggedIn
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    QuantityInput,
+                    {
+                      "data-testId": "oui-testid-deposit-dialog-quantity-input",
+                      classNames: {
+                        root: "oui-mt-[2px] oui-rounded-t-sm oui-rounded-b-xl"
+                      },
+                      value: quantity,
+                      onValueChange: onQuantityChange,
+                      token: sourceToken,
+                      tokens: sourceTokens,
+                      onTokenChange: onSourceTokenChange,
+                      status: inputStatus,
+                      hintMessage,
+                      tokenShowCaret: !showSourceDepositCap && sourceTokens?.length > 1,
+                      tokenValueFormatter: showSourceDepositCap ? tokenValueFormatter : void 0,
+                      disabled: !props.isLoggedIn,
+                      balancesRevalidating: batchBalancesRevalidating,
+                      showBalance: true
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  AvailableQuantity,
+                  {
+                    token: sourceToken,
+                    quantity,
+                    maxQuantity,
+                    notional: quantityNotional,
+                    loading: balanceRevalidating,
+                    onClick: () => {
+                      onQuantityChange(maxDepositAmount);
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  YieldBearingReminder,
+                  {
+                    symbol: targetToken?.symbol,
+                    className: "oui-mt-3"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(ExchangeDivider, {}),
+                /* @__PURE__ */ jsxRuntime.jsx(BrokerWallet, {}),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  QuantityInput,
+                  {
+                    classNames: {
+                      root: "oui-mt-3 oui-border-transparent focus-within:oui-outline-transparent"
+                    },
+                    token: targetToken,
+                    tokens: targetTokens,
+                    onTokenChange: onTargetTokenChange,
+                    value: targetQuantity,
+                    loading: targetQuantityLoading,
+                    disabled: !props.isLoggedIn,
+                    readOnly: true,
+                    status: targetInputStatus,
+                    hintMessage: targetHintMessage,
+                    tokenShowCaret: !showTargetDepositCap && targetTokens?.length > 1,
+                    tokenValueFormatter: showTargetDepositCap ? tokenValueFormatter : void 0
+                  }
+                ),
+                renderContent()
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-mb-6 lg:oui-mb-8", children: /* @__PURE__ */ jsxRuntime.jsx(Notice, { message: warningMessage, wrongNetwork }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { justify: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                ActionButton,
+                {
+                  actionType,
+                  symbol: sourceToken?.symbol,
+                  disabled,
+                  loading,
+                  onDeposit,
+                  onApprove,
+                  onApproveAndDeposit,
+                  networkId
+                }
+              ) })
+            ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          QuantityInput,
+        showExclusiveDeposit && /* @__PURE__ */ jsxRuntime.jsx(
+          ui.TabPanel,
           {
-            "data-testId": "oui-testid-deposit-dialog-quantity-input",
-            classNames: {
-              root: "oui-mt-[2px] oui-rounded-t-sm oui-rounded-b-xl"
-            },
-            value: quantity,
-            onValueChange: onQuantityChange,
-            token: sourceToken,
-            tokens: sourceTokens,
-            onTokenChange: onSourceTokenChange,
-            status: inputStatus,
-            hintMessage,
-            tokenShowCaret: !showSourceDepositCap && sourceTokens?.length > 1,
-            tokenValueFormatter: showSourceDepositCap ? tokenValueFormatter : void 0,
-            disabled: !props.isLoggedIn,
-            balancesRevalidating: batchBalancesRevalidating,
-            showBalance: true
+            title: t("transfer.deposit.tab.exchangeOrOtherWallet"),
+            value: "exclusive_deposit",
+            children: /* @__PURE__ */ jsxRuntime.jsx(ExclusiveDeposit, { active: activeSubTab === "exclusive_deposit" })
           }
         )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        AvailableQuantity,
-        {
-          token: sourceToken,
-          quantity,
-          maxQuantity,
-          notional: quantityNotional,
-          loading: balanceRevalidating,
-          onClick: () => {
-            onQuantityChange(maxDepositAmount);
-          }
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        YieldBearingReminder,
-        {
-          symbol: targetToken?.symbol,
-          className: "oui-mt-3"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(ExchangeDivider, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(BrokerWallet, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        QuantityInput,
-        {
-          classNames: {
-            root: "oui-mt-3 oui-border-transparent focus-within:oui-outline-transparent"
-          },
-          token: targetToken,
-          tokens: targetTokens,
-          onTokenChange: onTargetTokenChange,
-          value: targetQuantity,
-          loading: targetQuantityLoading,
-          disabled: !props.isLoggedIn,
-          readOnly: true,
-          status: targetInputStatus,
-          hintMessage: targetHintMessage,
-          tokenShowCaret: !showTargetDepositCap && targetTokens?.length > 1,
-          tokenValueFormatter: showTargetDepositCap ? tokenValueFormatter : void 0
-        }
-      ),
-      renderContent()
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Notice, { message: warningMessage, wrongNetwork }),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { justify: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
-      ActionButton,
-      {
-        actionType,
-        symbol: sourceToken?.symbol,
-        disabled,
-        loading,
-        onDeposit,
-        onApprove,
-        onApproveAndDeposit,
-        networkId
-      }
-    ) })
-  ] });
+      ]
+    }
+  ) });
 };
 function useActionType(options2) {
   const { allowance, quantity, maxQuantity } = options2;
@@ -1994,7 +2412,7 @@ function useDepositFee(options2) {
 }
 var useMaxDepositAmount = (sourceToken, balance) => {
   const maxDepositAmount = react.useMemo(() => {
-    const balanceDecimal = new utils.Decimal(balance || 0).todp(
+    const balanceDecimal = new utils.Decimal(balance).todp(
       sourceToken?.precision ?? 2,
       utils.Decimal.ROUND_DOWN
     );
@@ -2025,7 +2443,7 @@ var useDepositFormQuantities = ({
   getIndexPrice
 }) => {
   const maxQuantity = react.useMemo(
-    () => new utils.Decimal(balance || 0).todp(sourceToken?.precision ?? 2, utils.Decimal.ROUND_DOWN).toString(),
+    () => new utils.Decimal(balance).todp(sourceToken?.precision ?? 2, utils.Decimal.ROUND_DOWN).toString(),
     [balance, sourceToken?.precision]
   );
   const maxDepositAmount = useMaxDepositAmount(sourceToken, balance);
@@ -2483,9 +2901,6 @@ var useSwapTokens = (chainId, enableSwapDeposit) => {
       logo_uri: item.logoURI
     }));
   }, [data]);
-  if (!enableSwapDeposit) {
-    return [];
-  }
   return tokens;
 };
 
@@ -3780,7 +4195,7 @@ var useDepositFormScript = (options2) => {
   } = useDepositFormQuantities({
     sourceToken,
     targetToken,
-    balance,
+    balance: balance || "0",
     quantity,
     needSwap,
     swapQuantity,
@@ -3867,6 +4282,8 @@ var useDepositFormScript = (options2) => {
   const disabled = !sourceToken || !quantity || Number(quantity) === 0 || depositDisabled || loading || !!swapErrorMessage;
   const targetQuantityLoading = swapPriceRevalidating;
   const warningMessage = validationMessage || swapErrorMessage;
+  const [activeSubTab, setActiveSubTab] = react.useState("web3");
+  const showExclusiveDeposit = account2.walletAdapter?.chainNamespace !== types.ChainNamespace.solana;
   return {
     sourceToken,
     targetToken,
@@ -3920,7 +4337,10 @@ var useDepositFormScript = (options2) => {
     isLoggedIn,
     showSourceDepositCap,
     showTargetDepositCap,
-    quantityNotional
+    quantityNotional,
+    activeSubTab,
+    setActiveSubTab,
+    showExclusiveDeposit
   };
 };
 var DepositFormWidget = (props) => {