@orderly.network/ui-transfer 3.0.0-beta.6 → 3.0.0-beta.8

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { i18n, useTranslation, Trans } from '@orderly.network/i18n';
-import { registerSimpleDialog, registerSimpleSheet, Tabs, TabPanel, ArrowDownSquareFillIcon, ArrowUpSquareFillIcon, ExtensionSlot, ExtensionPositionEnum, Box, textVariants, Flex, toast, Text, cn, Button, Spinner, Select, Input, inputFormatter, useScreen, modal, Tooltip, Tips, AlertDialog, EditIcon, ArrowLeftRightIcon, WalletIcon, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, ScrollArea, ChainIcon, Badge, TokenIcon, CaretUpIcon, CaretDownIcon, SimpleDialog, CloseRoundFillIcon, ExclamationFillIcon, WarningIcon, SelectItem, ChevronRightIcon, Checkbox, CloseIcon } from '@orderly.network/ui';
+import { registerSimpleDialog, registerSimpleSheet, Tabs, TabPanel, ArrowDownSquareFillIcon, ArrowUpSquareFillIcon, ExtensionSlot, ExtensionPositionEnum, Box, textVariants, Flex, toast, Text, cn, Button, Spinner, Select, Input, inputFormatter, useScreen, modal, Tooltip, Tips, AlertDialog, EditIcon, ArrowLeftRightIcon, WalletIcon, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, ScrollArea, ChainIcon, Badge, CaretUpIcon, CaretDownIcon, SimpleDialog, CloseRoundFillIcon, ExclamationFillIcon, TokenIcon, WarningIcon, SelectItem, ChevronRightIcon, Checkbox, CloseIcon } from '@orderly.network/ui';
 import { forwardRef, useState, isValidElement, useMemo, useEffect, useCallback, useRef } from 'react';
 import { useConfig, useWalletConnector, useLocalStorage, useConvert, useOdosQuote, useComputedLTV, useAccount, useAppStore, useTransfer, useSubAccountDataObserver, useSubAccountMaxWithdrawal, useTokensInfo, useEventEmitter, usePositionStream, useIndexPricesStream, useOrderlyContext, useDeposit, useAssetsHistory, useChains, useMemoizedFn, useWithdraw, useWalletTopic, useQuery, useSWR, useTokenInfo, useHoldingStream, useInternalTransfer, useDebouncedCallback, usePrivateQuery, useTransferHistory, useBalanceTopic } from '@orderly.network/hooks';
 import { Decimal, zero, praseChainIdToNumber, int2hex, toNonExponential, formatWithPrecision, isSolana } from '@orderly.network/utils';
@@ -803,10 +803,10 @@ var buildExplorerUrl = (baseUrl, txId) => {
 var useExclusiveDeposit = (options2) => {
   const active = options2.active ?? true;
   const confirmed = options2.confirmed ?? true;
-  const { chainId, explorerBaseUrl } = options2;
+  const { chainId, token, explorerBaseUrl } = options2;
   const { t: t0 } = useTranslation();
   const t = t0;
-  const receiverAddressKey = confirmed && chainId ? `/v1/client/asset/receiver_address?chain_id=${chainId}` : null;
+  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,
@@ -858,46 +858,87 @@ var useExclusiveDeposit = (options2) => {
     eventsError
   };
 };
-var SUPPORTED_CHAINS = {
-  prod: [42161],
-  testnet: [421614]
-};
-var SUPPORTED_TOKENS = ["USDC"];
-var useExclusiveDepositOptions = () => {
-  const env = useConfig("env");
+var useExclusiveDepositOptions = (params) => {
   const networkId = useConfig("networkId");
-  const [chains, { findByChainId }] = useChains(networkId, {
+  const tokensInfo = useTokensInfo();
+  const selectedNetwork = params?.selectedNetwork;
+  const [, { findByChainId }] = useChains(networkId, {
     pick: "network_infos"
   });
-  const supportedChainIds = env === "prod" ? SUPPORTED_CHAINS.prod : SUPPORTED_CHAINS.testnet;
+  const combos = 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 = 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
-      };
+    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;
     });
-  }, [supportedChainIds, findByChainId]);
+    return list;
+  }, [combos]);
   const tokenOptions = useMemo(() => {
-    return SUPPORTED_TOKENS.map((symbol) => ({
-      label: symbol,
-      value: symbol
-    }));
-  }, []);
-  return { networkOptions, tokenOptions };
+    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 } = useTranslation();
   const t = t0;
   const [selectedNetwork, setSelectedNetwork] = useState("");
   const [selectedToken, setSelectedToken] = useState("");
-  const { networkOptions, tokenOptions } = useExclusiveDepositOptions();
+  const { networkOptions, tokenOptions} = useExclusiveDepositOptions({
+    selectedNetwork
+  });
   const confirmed = !!selectedNetwork && !!selectedToken;
+  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;
@@ -913,6 +954,7 @@ var ExclusiveDeposit = ({ active }) => {
     active,
     confirmed,
     chainId: selectedChainId,
+    token: selectedToken,
     explorerBaseUrl: selectedNetworkOption?.explorerUrl ?? ""
   });
   const networkName = selectedNetworkOption?.label ?? "";
@@ -930,31 +972,20 @@ var ExclusiveDeposit = ({ active }) => {
       address && /* @__PURE__ */ jsx(CopyAddress, { address })
     ] }),
     /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, className: "oui-mt-5 oui-w-full", children: [
-      confirmed ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs(Flex, { className: "oui-w-full", justify: "between", itemAlign: "center", children: [
-          /* @__PURE__ */ jsx(Text, { size: "xs", intensity: 36, children: t("common.network") }),
-          /* @__PURE__ */ jsxs(Flex, { gap: 1, itemAlign: "center", children: [
-            /* @__PURE__ */ jsx(ChainIcon, { chainId: selectedChainId, size: "2xs" }),
-            /* @__PURE__ */ jsx(Text, { size: "xs", intensity: 98, children: networkName })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs(Flex, { className: "oui-w-full", justify: "between", itemAlign: "center", children: [
-          /* @__PURE__ */ jsx(Text, { size: "xs", intensity: 36, children: t("common.token") }),
-          /* @__PURE__ */ jsxs(Flex, { gap: 1, itemAlign: "center", children: [
-            /* @__PURE__ */ jsx(TokenIcon, { name: tokenName, size: "2xs" }),
-            /* @__PURE__ */ jsx(Text, { size: "xs", intensity: 98, children: tokenName })
-          ] })
-        ] })
-      ] }) : /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(
         NetworkTokenSelect,
         {
           selectedNetwork,
           selectedToken,
-          onNetworkChange: setSelectedNetwork,
+          onNetworkChange: (value) => {
+            setSelectedNetwork(value);
+            setSelectedToken("");
+          },
           onTokenChange: setSelectedToken,
           networkOptions,
           tokenOptions
-        }
+        },
+        selectedNetwork
       ),
       /* @__PURE__ */ jsxs(Flex, { className: "oui-w-full", justify: "between", children: [
         /* @__PURE__ */ jsx(Text, { size: "xs", intensity: 36, children: t("transfer.exclusiveDeposit.minDeposit") }),