@orderly.network/ui-transfer 2.12.4 → 3.0.0-alpha.0

package/dist/index.mjs

@@ -1,6 +1,6 @@
 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 { forwardRef, useState, useMemo, useEffect, useCallback, useRef } from 'react';
+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';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -13,6 +13,7 @@ import { utils } from '@orderly.network/core';
 import { ChainSelectorDialogId } from '@orderly.network/ui-chain-selector';
 import { PublicKey } from '@solana/web3.js';
 import { ethers } from 'ethers';
+import { injectable } from '@orderly.network/plugin-core';
 import { DefaultSolanaWalletAdapter } from '@orderly.network/default-solana-adapter';
 
 // src/components/depositForm/depositForm.ui.tsx
@@ -802,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,
@@ -857,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;
@@ -912,6 +954,7 @@ var ExclusiveDeposit = ({ active }) => {
     active,
     confirmed,
     chainId: selectedChainId,
+    token: selectedToken,
     explorerBaseUrl: selectedNetworkOption?.explorerUrl ?? ""
   });
   const networkName = selectedNetworkOption?.label ?? "";
@@ -929,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") }),
@@ -6409,10 +6441,14 @@ var WithdrawSlot = (props) => {
 var DepositAndWithdrawWithDialogId = "DepositAndWithdrawWithDialogId";
 var DepositAndWithdrawWithSheetId = "DepositAndWithdrawWithSheetId";
 var DepositAndWithdraw = (props) => {
+  const { extraTabs = [] } = props;
   const [activeTab, setActiveTab] = useState(
     props.activeTab || "deposit"
   );
   const { t } = useTranslation();
+  const sortedExtra = [...extraTabs].sort(
+    (a, b) => (a.order ?? 100) - (b.order ?? 100)
+  );
   return /* @__PURE__ */ jsxs(
     Tabs,
     {
@@ -6442,18 +6478,39 @@ var DepositAndWithdraw = (props) => {
             value: "withdraw",
             children: /* @__PURE__ */ jsx(WithdrawSlot, { close: props.close })
           }
-        )
+        ),
+        sortedExtra.map((tab) => /* @__PURE__ */ jsx(
+          TabPanel,
+          {
+            title: tab.title,
+            icon: isValidElement(tab.icon) ? tab.icon : void 0,
+            value: tab.id,
+            children: /* @__PURE__ */ jsx(tab.component, { close: props.close })
+          },
+          tab.id
+        ))
       ]
     }
   );
 };
-registerSimpleDialog(DepositAndWithdrawWithDialogId, DepositAndWithdraw, {
-  size: "md",
-  classNames: {
-    content: "oui-border oui-border-line-6"
+var InjectableDepositAndWithdraw = injectable(
+  DepositAndWithdraw,
+  "Transfer.DepositAndWithdraw"
+);
+registerSimpleDialog(
+  DepositAndWithdrawWithDialogId,
+  InjectableDepositAndWithdraw,
+  {
+    size: "md",
+    classNames: {
+      content: "oui-border oui-border-line-6"
+    }
   }
-});
-registerSimpleSheet(DepositAndWithdrawWithSheetId, DepositAndWithdraw);
+);
+registerSimpleSheet(
+  DepositAndWithdrawWithSheetId,
+  InjectableDepositAndWithdraw
+);
 var AccountSelect = (props) => {
   const { subAccounts = [], value } = props;
   const [open, setOpen] = useState(false);
@@ -8291,6 +8348,6 @@ var DepositStatusWidget = (props) => {
   return /* @__PURE__ */ jsx(DepositStatus, { ...state, ...props });
 };
 
-export { ActionButton, AvailableQuantity, BrokerWallet, ChainSelect, ConvertFormUI, ConvertFormWidget, DEPOSIT_ERROR_CODE_MAP, DepositAction, DepositAndWithdraw, DepositAndWithdrawWithDialogId, DepositAndWithdrawWithSheetId, DepositForm, DepositFormWidget, DepositStatus, DepositStatusWidget, ExchangeDivider, Fee, QuantityInput, SwapCoin, TransferDialogId, TransferForm, TransferFormWidget, TransferSheetId, TransferWidget, Web3Wallet, WithdrawForm, WithdrawFormWidget, WithdrawTo, YIELD_BEARING_ASSETS, YieldBearingReminder, checkIsAccountId, feeDecimalsOffset, getDepositKnownErrorMessage, getTransferErrorMessage, getUSDCToken, getYieldBearingAsset, isYieldBearingAsset, sortTokensWithUSDCFirst, useConvertFormScript as useConvertForm, useDepositFormScript, useDepositStatusScript, useTransferFormScript, useWithdrawFormScript };
+export { ActionButton, AvailableQuantity, BrokerWallet, ChainSelect, ConvertFormUI, ConvertFormWidget, DEPOSIT_ERROR_CODE_MAP, DepositAction, DepositAndWithdraw, DepositAndWithdrawWithDialogId, DepositAndWithdrawWithSheetId, DepositForm, DepositFormWidget, DepositStatus, DepositStatusWidget, ExchangeDivider, Fee, InjectableDepositAndWithdraw, QuantityInput, SwapCoin, TransferDialogId, TransferForm, TransferFormWidget, TransferSheetId, TransferWidget, Web3Wallet, WithdrawForm, WithdrawFormWidget, WithdrawTo, YIELD_BEARING_ASSETS, YieldBearingReminder, checkIsAccountId, feeDecimalsOffset, getDepositKnownErrorMessage, getTransferErrorMessage, getUSDCToken, getYieldBearingAsset, isYieldBearingAsset, sortTokensWithUSDCFirst, useConvertFormScript as useConvertForm, useDepositFormScript, useDepositStatusScript, useTransferFormScript, useWithdrawFormScript };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map