@kodiak-finance/orderly-ui-transfer 2.9.2-alpha.0 → 2.9.2

package/dist/index.js

@@ -9,6 +9,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var orderlyTypes = require('@kodiak-finance/orderly-types');
 var orderlyUiConnector = require('@kodiak-finance/orderly-ui-connector');
 var orderlyReactApp = require('@kodiak-finance/orderly-react-app');
+var qr = require('@akamfoad/qr');
 var orderlyPerp = require('@kodiak-finance/orderly-perp');
 var orderlyCore = require('@kodiak-finance/orderly-core');
 var orderlyUiChainSelector = require('@kodiak-finance/orderly-ui-chain-selector');
@@ -599,6 +600,423 @@ var ExchangeDivider = ({ icon }) => {
     /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.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(
+    orderlyUi.Flex,
+    {
+      gap: 1,
+      itemAlign: "start",
+      className: "oui-mt-6 oui-w-full oui-cursor-pointer oui-justify-center",
+      onClick: handleCopy,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          orderlyUi.Text,
+          {
+            size: "xs",
+            className: "oui-break-all oui-text-center oui-text-base-contrast-80",
+            title: address,
+            children: address
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.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 } = orderlyI18n.useTranslation();
+  const t = t0;
+  const label = t("transfer.exclusiveDeposit.depositPending", {
+    amount,
+    symbol
+  });
+  const handleClick = () => {
+    window.open(explorerUrl, "_blank", "noopener,noreferrer");
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    orderlyUi.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(orderlyUi.Text, { size: "xs", intensity: 98, className: "oui-flex-1", children: label }),
+        pendingCount > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+          orderlyUi.Flex,
+          {
+            justify: "center",
+            itemAlign: "center",
+            r: "full",
+            width: 18,
+            height: 18,
+            className: "oui-bg-line-12",
+            children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "3xs", intensity: 80, children: pendingCount })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.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 } = orderlyI18n.useTranslation();
+  const t = t0;
+  const selectContentProps = {
+    align: "end",
+    sideOffset: -4,
+    className: "oui-custom-scrollbar"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { className: "oui-w-full", justify: "between", itemAlign: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "xs", intensity: 36, children: t("common.network") }),
+      /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { className: "oui-ml-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+        orderlyUi.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(orderlyUi.SelectItem, { value: opt.value, children: /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { gap: 1, itemAlign: "center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.ChainIcon, { chainId: opt.chainId, size: "2xs" }),
+            opt.label
+          ] }) }, opt.value))
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { className: "oui-w-full", justify: "between", itemAlign: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "xs", intensity: 36, children: t("common.token") }),
+      /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { className: "oui-ml-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+        orderlyUi.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(orderlyUi.SelectItem, { value: opt.value, children: /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { gap: 1, itemAlign: "center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.TokenIcon, { name: opt.value, size: "2xs" }),
+            opt.label
+          ] }) }, opt.value))
+        }
+      ) })
+    ] })
+  ] });
+};
+var QRCodeDisplay = ({ address }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Flex, { direction: "column", className: "oui-mt-5 oui-w-full", itemAlign: "center", children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.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(orderlyUi.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(
+    orderlyUi.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(orderlyUi.Box, { className: "oui-mt-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.WarningIcon, { width: 16, height: 16 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.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, token, explorerBaseUrl } = options2;
+  const { t: t0 } = orderlyI18n.useTranslation();
+  const t = t0;
+  const receiverAddressKey = confirmed && chainId && token ? `/v1/client/asset/receiver_address?chain_id=${chainId}&token=${token}` : null;
+  const receiverEventsKey = active && confirmed ? "/v1/client/asset/receiver_events" : null;
+  const {
+    data: addressData,
+    isLoading: isAddressLoading,
+    error: addressError
+  } = orderlyHooks.usePrivateQuery(receiverAddressKey, {
+    revalidateOnFocus: false
+  });
+  const {
+    data: eventsData,
+    isLoading: isEventsLoading,
+    error: eventsError
+  } = orderlyHooks.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 useExclusiveDepositOptions = (params) => {
+  const networkId = orderlyHooks.useConfig("networkId");
+  const tokensInfo = orderlyHooks.useTokensInfo();
+  const selectedNetwork = params?.selectedNetwork;
+  const [, { findByChainId }] = orderlyHooks.useChains(networkId, {
+    pick: "network_infos"
+  });
+  const combos = react.useMemo(() => {
+    if (!tokensInfo?.length) return [];
+    const result = [];
+    for (const token of tokensInfo) {
+      for (const detail of token.chain_details ?? []) {
+        if (detail.exclusive_deposit_supported === true) {
+          const chainId = Number(detail.chain_id);
+          const chain = findByChainId(chainId);
+          result.push({
+            chainId,
+            chainName: chain?.network_infos?.name ?? `Chain ${chainId}`,
+            explorerUrl: chain?.network_infos?.explorer_base_url ?? "",
+            tokenSymbol: token.token
+          });
+        }
+      }
+    }
+    return result;
+  }, [tokensInfo, findByChainId]);
+  const networkOptions = react.useMemo(() => {
+    const seen = /* @__PURE__ */ new Map();
+    for (const combo of combos) {
+      if (!seen.has(combo.chainId)) {
+        seen.set(combo.chainId, {
+          label: combo.chainName,
+          value: String(combo.chainId),
+          chainId: combo.chainId,
+          explorerUrl: combo.explorerUrl
+        });
+      }
+    }
+    const list = Array.from(seen.values());
+    list.sort((a, b) => {
+      if (a.chainId === 42161) return -1;
+      if (b.chainId === 42161) return 1;
+      return 0;
+    });
+    return list;
+  }, [combos]);
+  const tokenOptions = react.useMemo(() => {
+    if (!selectedNetwork) return [];
+    const chainId = Number(selectedNetwork);
+    const seen = /* @__PURE__ */ new Set();
+    const result = [];
+    for (const combo of combos) {
+      if (combo.chainId === chainId && !seen.has(combo.tokenSymbol)) {
+        seen.add(combo.tokenSymbol);
+        result.push({ label: combo.tokenSymbol, value: combo.tokenSymbol });
+      }
+    }
+    result.sort((a, b) => {
+      if (a.value === "USDC") return -1;
+      if (b.value === "USDC") return 1;
+      return 0;
+    });
+    return result;
+  }, [combos, selectedNetwork]);
+  const isSupported = combos.length > 0;
+  return { networkOptions, tokenOptions, isSupported };
+};
+var ExclusiveDeposit = ({ active }) => {
+  const { t: t0 } = orderlyI18n.useTranslation();
+  const t = t0;
+  const [selectedNetwork, setSelectedNetwork] = react.useState("");
+  const [selectedToken, setSelectedToken] = react.useState("");
+  const { networkOptions, tokenOptions} = useExclusiveDepositOptions({
+    selectedNetwork
+  });
+  const confirmed = !!selectedNetwork && !!selectedToken;
+  react.useEffect(() => {
+    if (selectedToken && tokenOptions.length > 0 && !tokenOptions.some((t2) => t2.value === selectedToken)) {
+      setSelectedToken("");
+    }
+  }, [selectedNetwork, selectedToken, tokenOptions]);
+  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,
+    token: selectedToken,
+    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(orderlyUi.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(orderlyUi.Flex, { direction: "column", gap: 2, className: "oui-mt-5 oui-w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        NetworkTokenSelect,
+        {
+          selectedNetwork,
+          selectedToken,
+          onNetworkChange: (value) => {
+            setSelectedNetwork(value);
+            setSelectedToken("");
+          },
+          onTokenChange: setSelectedToken,
+          networkOptions,
+          tokenOptions
+        },
+        selectedNetwork
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { className: "oui-w-full", justify: "between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "xs", intensity: 36, children: t("transfer.exclusiveDeposit.minDeposit") }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          orderlyUi.Text,
+          {
+            size: "xs",
+            className: confirmed ? "oui-text-[#FF7D00]" : "",
+            intensity: confirmed ? void 0 : 98,
+            children: minText
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { className: "oui-w-full", justify: "between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "xs", intensity: 36, children: t("transfer.exclusiveDeposit.estimatedTime") }),
+        /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.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 } = orderlyI18n.useTranslation();
@@ -1587,7 +2005,7 @@ var DepositForm = (props) => {
       /* @__PURE__ */ jsxRuntime.jsx(Fee, { ...fee, nativeSymbol: props.nativeSymbol })
     ] });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { id: "oui-deposit-form", className: orderlyUi.textVariants({ weight: "semibold" }), children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { id: "oui-deposit-form", className: orderlyUi.textVariants({ weight: "semibold" }), children: /* @__PURE__ */ jsxRuntime.jsxs(
     orderlyUi.Tabs,
     {
       value: activeSubTab,
@@ -1596,108 +2014,118 @@ var DepositForm = (props) => {
       classNames: {
         tabsList: "oui-w-fit"
       },
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        orderlyUi.TabPanel,
-        {
-          title: t("transfer.deposit.tab.connectedWallet"),
-          value: "web3",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Box, { className: "oui-mt-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Web3Wallet, {}),
-              /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Box, { mt: 3, mb: 1, children: [
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          orderlyUi.TabPanel,
+          {
+            title: t("transfer.deposit.tab.connectedWallet"),
+            value: "web3",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Box, { className: "oui-mt-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Web3Wallet, {}),
+                /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.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(
-                  ChainSelect,
+                  AvailableQuantity,
                   {
-                    chains,
-                    value: currentChain,
-                    onValueChange: onChainChange,
-                    wrongNetwork,
-                    loading: settingChain,
-                    disabled: !props.isLoggedIn
+                    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,
                   {
-                    "data-testId": "oui-testid-deposit-dialog-quantity-input",
                     classNames: {
-                      root: "oui-mt-[2px] oui-rounded-t-sm oui-rounded-b-xl"
+                      root: "oui-mt-3 oui-border-transparent focus-within:oui-outline-transparent"
                     },
-                    value: quantity,
-                    onValueChange: onQuantityChange,
-                    token: sourceToken,
-                    tokens: sourceTokens,
-                    onTokenChange: onSourceTokenChange,
-                    status: inputStatus,
-                    hintMessage,
-                    tokenShowCaret: !showSourceDepositCap && sourceTokens?.length > 1,
-                    tokenValueFormatter: showSourceDepositCap ? tokenValueFormatter : void 0,
+                    token: targetToken,
+                    tokens: targetTokens,
+                    onTokenChange: onTargetTokenChange,
+                    value: targetQuantity,
+                    loading: targetQuantityLoading,
                     disabled: !props.isLoggedIn,
-                    balancesRevalidating: batchBalancesRevalidating,
-                    showBalance: true
+                    readOnly: true,
+                    status: targetInputStatus,
+                    hintMessage: targetHintMessage,
+                    tokenShowCaret: !showTargetDepositCap && targetTokens?.length > 1,
+                    tokenValueFormatter: showTargetDepositCap ? tokenValueFormatter : void 0
                   }
-                )
+                ),
+                renderContent()
               ] }),
-              /* @__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,
+              /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { className: "oui-mb-6 lg:oui-mb-8", children: /* @__PURE__ */ jsxRuntime.jsx(Notice, { message: warningMessage, wrongNetwork }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Flex, { justify: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                ActionButton,
                 {
-                  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
+                  actionType,
+                  symbol: sourceToken?.symbol,
+                  disabled,
+                  loading,
+                  onDeposit,
+                  onApprove,
+                  onApproveAndDeposit,
+                  networkId
                 }
-              ),
-              renderContent()
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { className: "oui-mb-6 lg:oui-mb-8", children: /* @__PURE__ */ jsxRuntime.jsx(Notice, { message: warningMessage, wrongNetwork }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Flex, { justify: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
-              ActionButton,
-              {
-                actionType,
-                symbol: sourceToken?.symbol,
-                disabled,
-                loading,
-                onDeposit,
-                onApprove,
-                onApproveAndDeposit,
-                networkId
-              }
-            ) })
-          ]
-        }
-      )
+              ) })
+            ]
+          }
+        ),
+        showExclusiveDeposit && /* @__PURE__ */ jsxRuntime.jsx(
+          orderlyUi.TabPanel,
+          {
+            title: t("transfer.deposit.tab.exchangeOrOtherWallet"),
+            value: "exclusive_deposit",
+            children: /* @__PURE__ */ jsxRuntime.jsx(ExclusiveDeposit, { active: activeSubTab === "exclusive_deposit" })
+          }
+        )
+      ]
     }
   ) });
 };