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

package/dist/index.d.mts

@@ -208,11 +208,22 @@ declare const WithdrawFormWidget: FC<WithdrawFormWidgetProps>;
 
 declare const DepositAndWithdrawWithDialogId = "DepositAndWithdrawWithDialogId";
 declare const DepositAndWithdrawWithSheetId = "DepositAndWithdrawWithSheetId";
+interface DepositTabExtension {
+    id: string;
+    title: string;
+    icon: React.ReactNode;
+    component: React.ComponentType<{
+        close?: () => void;
+    }>;
+    order?: number;
+}
 type DepositAndWithdrawProps = {
-    activeTab?: "deposit" | "withdraw";
+    activeTab?: string;
     close?: () => void;
+    extraTabs?: DepositTabExtension[];
 };
 declare const DepositAndWithdraw: FC<DepositAndWithdrawProps>;
+declare const InjectableDepositAndWithdraw: react.ComponentType<DepositAndWithdrawProps>;
 
 type TransferFormScriptReturn = ReturnType<typeof useTransferFormScript>;
 type TransferFormScriptOptions = {
@@ -310,6 +321,7 @@ declare const useConvertFormScript: (options: ConvertFormScriptOptions) => {
         chain_id?: string | undefined;
         contract_address?: string | undefined;
         decimals?: number | undefined;
+        exclusive_deposit_supported?: boolean;
         withdrawal_fee?: number | undefined;
         chain_name?: string;
         cross_chain_withdrawal_fee?: number | undefined;
@@ -515,4 +527,4 @@ declare const DepositStatus: react__default.FC<DepositStatusProps>;
 type DepositStatusWidgetProps = Pick<DepositStatusProps, "className" | "onClick">;
 declare const DepositStatusWidget: react__default.FC<DepositStatusWidgetProps>;
 
-export { ActionButton, AvailableQuantity, BrokerWallet, ChainSelect, type ConvertFormProps, ConvertFormUI, ConvertFormWidget, type CurrentChain, DEPOSIT_ERROR_CODE_MAP, DepositAction, DepositAndWithdraw, type DepositAndWithdrawProps, DepositAndWithdrawWithDialogId, DepositAndWithdrawWithSheetId, DepositForm, type DepositFormScriptOptions, DepositFormWidget, type DepositFormWidgetProps, DepositStatus, DepositStatusWidget, ExchangeDivider, Fee, type InputStatus, QuantityInput, SwapCoin, TransferDialogId, TransferForm, TransferFormWidget, type TransferFormWidgetProps, TransferSheetId, TransferWidget, Web3Wallet, WithdrawForm, type WithdrawFormScriptOptions, WithdrawFormWidget, type WithdrawFormWidgetProps, WithdrawTo, YIELD_BEARING_ASSETS, type YieldBearingAsset, YieldBearingReminder, checkIsAccountId, feeDecimalsOffset, getDepositKnownErrorMessage, getTransferErrorMessage, getUSDCToken, getYieldBearingAsset, isYieldBearingAsset, sortTokensWithUSDCFirst, useConvertFormScript as useConvertForm, useDepositFormScript, useDepositStatusScript, useTransferFormScript, useWithdrawFormScript };
+export { ActionButton, AvailableQuantity, BrokerWallet, ChainSelect, type ConvertFormProps, ConvertFormUI, ConvertFormWidget, type CurrentChain, DEPOSIT_ERROR_CODE_MAP, DepositAction, DepositAndWithdraw, type DepositAndWithdrawProps, DepositAndWithdrawWithDialogId, DepositAndWithdrawWithSheetId, DepositForm, type DepositFormScriptOptions, DepositFormWidget, type DepositFormWidgetProps, DepositStatus, DepositStatusWidget, type DepositTabExtension, ExchangeDivider, Fee, InjectableDepositAndWithdraw, type InputStatus, QuantityInput, SwapCoin, TransferDialogId, TransferForm, TransferFormWidget, type TransferFormWidgetProps, TransferSheetId, TransferWidget, Web3Wallet, WithdrawForm, type WithdrawFormScriptOptions, WithdrawFormWidget, type WithdrawFormWidgetProps, WithdrawTo, YIELD_BEARING_ASSETS, type YieldBearingAsset, YieldBearingReminder, checkIsAccountId, feeDecimalsOffset, getDepositKnownErrorMessage, getTransferErrorMessage, getUSDCToken, getYieldBearingAsset, isYieldBearingAsset, sortTokensWithUSDCFirst, useConvertFormScript as useConvertForm, useDepositFormScript, useDepositStatusScript, useTransferFormScript, useWithdrawFormScript };

package/dist/index.d.ts

@@ -208,11 +208,22 @@ declare const WithdrawFormWidget: FC<WithdrawFormWidgetProps>;
 
 declare const DepositAndWithdrawWithDialogId = "DepositAndWithdrawWithDialogId";
 declare const DepositAndWithdrawWithSheetId = "DepositAndWithdrawWithSheetId";
+interface DepositTabExtension {
+    id: string;
+    title: string;
+    icon: React.ReactNode;
+    component: React.ComponentType<{
+        close?: () => void;
+    }>;
+    order?: number;
+}
 type DepositAndWithdrawProps = {
-    activeTab?: "deposit" | "withdraw";
+    activeTab?: string;
     close?: () => void;
+    extraTabs?: DepositTabExtension[];
 };
 declare const DepositAndWithdraw: FC<DepositAndWithdrawProps>;
+declare const InjectableDepositAndWithdraw: react.ComponentType<DepositAndWithdrawProps>;
 
 type TransferFormScriptReturn = ReturnType<typeof useTransferFormScript>;
 type TransferFormScriptOptions = {
@@ -310,6 +321,7 @@ declare const useConvertFormScript: (options: ConvertFormScriptOptions) => {
         chain_id?: string | undefined;
         contract_address?: string | undefined;
         decimals?: number | undefined;
+        exclusive_deposit_supported?: boolean;
         withdrawal_fee?: number | undefined;
         chain_name?: string;
         cross_chain_withdrawal_fee?: number | undefined;
@@ -515,4 +527,4 @@ declare const DepositStatus: react__default.FC<DepositStatusProps>;
 type DepositStatusWidgetProps = Pick<DepositStatusProps, "className" | "onClick">;
 declare const DepositStatusWidget: react__default.FC<DepositStatusWidgetProps>;
 
-export { ActionButton, AvailableQuantity, BrokerWallet, ChainSelect, type ConvertFormProps, ConvertFormUI, ConvertFormWidget, type CurrentChain, DEPOSIT_ERROR_CODE_MAP, DepositAction, DepositAndWithdraw, type DepositAndWithdrawProps, DepositAndWithdrawWithDialogId, DepositAndWithdrawWithSheetId, DepositForm, type DepositFormScriptOptions, DepositFormWidget, type DepositFormWidgetProps, DepositStatus, DepositStatusWidget, ExchangeDivider, Fee, type InputStatus, QuantityInput, SwapCoin, TransferDialogId, TransferForm, TransferFormWidget, type TransferFormWidgetProps, TransferSheetId, TransferWidget, Web3Wallet, WithdrawForm, type WithdrawFormScriptOptions, WithdrawFormWidget, type WithdrawFormWidgetProps, WithdrawTo, YIELD_BEARING_ASSETS, type YieldBearingAsset, YieldBearingReminder, checkIsAccountId, feeDecimalsOffset, getDepositKnownErrorMessage, getTransferErrorMessage, getUSDCToken, getYieldBearingAsset, isYieldBearingAsset, sortTokensWithUSDCFirst, useConvertFormScript as useConvertForm, useDepositFormScript, useDepositStatusScript, useTransferFormScript, useWithdrawFormScript };
+export { ActionButton, AvailableQuantity, BrokerWallet, ChainSelect, type ConvertFormProps, ConvertFormUI, ConvertFormWidget, type CurrentChain, DEPOSIT_ERROR_CODE_MAP, DepositAction, DepositAndWithdraw, type DepositAndWithdrawProps, DepositAndWithdrawWithDialogId, DepositAndWithdrawWithSheetId, DepositForm, type DepositFormScriptOptions, DepositFormWidget, type DepositFormWidgetProps, DepositStatus, DepositStatusWidget, type DepositTabExtension, ExchangeDivider, Fee, InjectableDepositAndWithdraw, type InputStatus, QuantityInput, SwapCoin, TransferDialogId, TransferForm, TransferFormWidget, type TransferFormWidgetProps, TransferSheetId, TransferWidget, Web3Wallet, WithdrawForm, type WithdrawFormScriptOptions, WithdrawFormWidget, type WithdrawFormWidgetProps, WithdrawTo, YIELD_BEARING_ASSETS, type YieldBearingAsset, YieldBearingReminder, checkIsAccountId, feeDecimalsOffset, getDepositKnownErrorMessage, getTransferErrorMessage, getUSDCToken, getYieldBearingAsset, isYieldBearingAsset, sortTokensWithUSDCFirst, useConvertFormScript as useConvertForm, useDepositFormScript, useDepositStatusScript, useTransferFormScript, useWithdrawFormScript };

package/dist/index.js

@@ -15,6 +15,7 @@ var core = require('@orderly.network/core');
 var uiChainSelector = require('@orderly.network/ui-chain-selector');
 var web3_js = require('@solana/web3.js');
 var ethers = require('ethers');
+var pluginCore = require('@orderly.network/plugin-core');
 var defaultSolanaAdapter = require('@orderly.network/default-solana-adapter');
 
 // src/components/depositForm/depositForm.ui.tsx
@@ -804,10 +805,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 } = i18n.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,
@@ -859,46 +860,87 @@ var useExclusiveDeposit = (options2) => {
     eventsError
   };
 };
-var SUPPORTED_CHAINS = {
-  prod: [42161],
-  testnet: [421614]
-};
-var SUPPORTED_TOKENS = ["USDC"];
-var useExclusiveDepositOptions = () => {
-  const env = hooks.useConfig("env");
+var useExclusiveDepositOptions = (params) => {
   const networkId = hooks.useConfig("networkId");
-  const [chains, { findByChainId }] = hooks.useChains(networkId, {
+  const tokensInfo = hooks.useTokensInfo();
+  const selectedNetwork = params?.selectedNetwork;
+  const [, { findByChainId }] = hooks.useChains(networkId, {
     pick: "network_infos"
   });
-  const supportedChainIds = env === "prod" ? SUPPORTED_CHAINS.prod : SUPPORTED_CHAINS.testnet;
+  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(() => {
-    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 = react.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 } = i18n.useTranslation();
   const t = t0;
   const [selectedNetwork, setSelectedNetwork] = react.useState("");
   const [selectedToken, setSelectedToken] = react.useState("");
-  const { networkOptions, tokenOptions } = useExclusiveDepositOptions();
+  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;
@@ -914,6 +956,7 @@ var ExclusiveDeposit = ({ active }) => {
     active,
     confirmed,
     chainId: selectedChainId,
+    token: selectedToken,
     explorerBaseUrl: selectedNetworkOption?.explorerUrl ?? ""
   });
   const networkName = selectedNetworkOption?.label ?? "";
@@ -931,31 +974,20 @@ var ExclusiveDeposit = ({ active }) => {
       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(
+      /* @__PURE__ */ jsxRuntime.jsx(
         NetworkTokenSelect,
         {
           selectedNetwork,
           selectedToken,
-          onNetworkChange: setSelectedNetwork,
+          onNetworkChange: (value) => {
+            setSelectedNetwork(value);
+            setSelectedToken("");
+          },
           onTokenChange: setSelectedToken,
           networkOptions,
           tokenOptions
-        }
+        },
+        selectedNetwork
       ),
       /* @__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") }),
@@ -6411,10 +6443,14 @@ var WithdrawSlot = (props) => {
 var DepositAndWithdrawWithDialogId = "DepositAndWithdrawWithDialogId";
 var DepositAndWithdrawWithSheetId = "DepositAndWithdrawWithSheetId";
 var DepositAndWithdraw = (props) => {
+  const { extraTabs = [] } = props;
   const [activeTab, setActiveTab] = react.useState(
     props.activeTab || "deposit"
   );
   const { t } = i18n.useTranslation();
+  const sortedExtra = [...extraTabs].sort(
+    (a, b) => (a.order ?? 100) - (b.order ?? 100)
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ui.Tabs,
     {
@@ -6444,18 +6480,39 @@ var DepositAndWithdraw = (props) => {
             value: "withdraw",
             children: /* @__PURE__ */ jsxRuntime.jsx(WithdrawSlot, { close: props.close })
           }
-        )
+        ),
+        sortedExtra.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+          ui.TabPanel,
+          {
+            title: tab.title,
+            icon: react.isValidElement(tab.icon) ? tab.icon : void 0,
+            value: tab.id,
+            children: /* @__PURE__ */ jsxRuntime.jsx(tab.component, { close: props.close })
+          },
+          tab.id
+        ))
       ]
     }
   );
 };
-ui.registerSimpleDialog(DepositAndWithdrawWithDialogId, DepositAndWithdraw, {
-  size: "md",
-  classNames: {
-    content: "oui-border oui-border-line-6"
+var InjectableDepositAndWithdraw = pluginCore.injectable(
+  DepositAndWithdraw,
+  "Transfer.DepositAndWithdraw"
+);
+ui.registerSimpleDialog(
+  DepositAndWithdrawWithDialogId,
+  InjectableDepositAndWithdraw,
+  {
+    size: "md",
+    classNames: {
+      content: "oui-border oui-border-line-6"
+    }
   }
-});
-ui.registerSimpleSheet(DepositAndWithdrawWithSheetId, DepositAndWithdraw);
+);
+ui.registerSimpleSheet(
+  DepositAndWithdrawWithSheetId,
+  InjectableDepositAndWithdraw
+);
 var AccountSelect = (props) => {
   const { subAccounts = [], value } = props;
   const [open, setOpen] = react.useState(false);
@@ -8310,6 +8367,7 @@ exports.DepositStatus = DepositStatus;
 exports.DepositStatusWidget = DepositStatusWidget;
 exports.ExchangeDivider = ExchangeDivider;
 exports.Fee = Fee;
+exports.InjectableDepositAndWithdraw = InjectableDepositAndWithdraw;
 exports.QuantityInput = QuantityInput;
 exports.SwapCoin = SwapCoin;
 exports.TransferDialogId = TransferDialogId;