@orderly.network/ui-transfer 3.1.0 → 3.1.1

package/dist/index.mjs

@@ -1,10 +1,10 @@
 import { i18n, useTranslation, Trans } from '@orderly.network/i18n';
-import { registerSimpleDialog, registerSimpleSheet, Tabs, TabPanel, ArrowDownSquareFillIcon, ArrowUpSquareFillIcon, ExtensionSlot, ExtensionPositionEnum, Box, textVariants, Flex, toast, Text, cn, Button, useDocumentDirection, 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 { registerSimpleDialog, registerSimpleSheet, Tabs, TabPanel, ArrowDownSquareFillIcon, ArrowUpSquareFillIcon, ExtensionSlot, ExtensionPositionEnum, toast, Box, textVariants, Flex, Text, cn, Button, useDocumentDirection, 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 { useConfig, useWalletConnector, useLocalStorage, useConvert, useOdosQuote, useComputedLTV, useAccount, useAppStore, useTransfer, useSubAccountDataObserver, useSubAccountMaxWithdrawal, useMainTokenStore, useEventEmitter, usePositionStream, useIndexPricesStream, useOrderlyContext, useDeposit, useAssetsHistory, useChains, useMemoizedFn, useWithdraw, useWalletTopic, useQuery, useSWR, useTokenInfo, useTokensInfo, 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';
-import { AccountStatusEnum, ChainNamespace, AssetHistoryStatusEnum, AssetHistorySideEnum, Arbitrum, EMPTY_OBJECT, isNativeTokenChecker, ABSTRACT_CHAIN_ID_MAP, nativeTokenAddress } from '@orderly.network/types';
+import { AccountStatusEnum, ChainNamespace, AssetHistoryStatusEnum, AssetHistorySideEnum, EMPTY_OBJECT, isNativeTokenChecker, ABSTRACT_CHAIN_ID_MAP, Arbitrum, nativeTokenAddress } from '@orderly.network/types';
 import { AuthGuard, useAuthGuard } from '@orderly.network/ui-connector';
 import { useAppContext, useAppConfig } from '@orderly.network/react-app';
 import { qrcode } from '@akamfoad/qr';
@@ -7175,6 +7175,7 @@ var SwapCoin = (props) => {
     }
   );
 };
+var nativeTokenAddress2 = "0x0000000000000000000000000000000000000000";
 var splitTokenBySymbol = (items) => {
   return items.reduce(
     (result, item) => {
@@ -7188,14 +7189,13 @@ var splitTokenBySymbol = (items) => {
     { usdc: [], others: [] }
   );
 };
-var findChainInfo = (tokenInfo) => {
+var findMainnetQuoteChainInfo = (tokenInfo) => {
   const arbitrumChainInfo = tokenInfo.chain_details.find(
     (item) => parseInt(item.chain_id) === Arbitrum.id
   );
   const nativeTokenChainInfo = tokenInfo.chain_details.find(
     (item) => !item.contract_address
   );
-  const nativeTokenAddress2 = "0x0000000000000000000000000000000000000000";
   if (arbitrumChainInfo) {
     return {
       contract_address: arbitrumChainInfo.contract_address || nativeTokenAddress2,
@@ -7216,23 +7216,49 @@ var findChainInfo = (tokenInfo) => {
     decimals: tokenInfo.chain_details[0]?.decimals
   };
 };
+var getMainnetConvertTokenInfo = (tokenInfo) => {
+  const chainInfo = findMainnetQuoteChainInfo(tokenInfo);
+  if (!chainInfo) {
+    return void 0;
+  }
+  return {
+    ...tokenInfo,
+    symbol: tokenInfo.token,
+    precision: tokenInfo.decimals ?? 6,
+    ...chainInfo
+  };
+};
+var findQuoteTargetChainInfo = (targetToken, quoteChainId) => {
+  const info = targetToken?.chain_details?.find(
+    (item) => item.chain_id === quoteChainId
+  );
+  if (!info) {
+    return void 0;
+  }
+  return {
+    ...info,
+    contract_address: info.contract_address || nativeTokenAddress2,
+    precision: targetToken?.precision
+  };
+};
 var useToken3 = (options2) => {
   const { defaultValue } = options2;
   const [sourceToken, setSourceToken] = useState();
   const [targetToken, setTargetToken] = useState();
   const [sourceTokens, setSourceTokens] = useState([]);
-  const tokensInfo = useTokensInfo();
+  const tokensInfo = useMainTokenStore((state) => state.data);
   const newTokensInfo = useMemo(() => {
-    const filteredTokensInfo = tokensInfo.filter((item) => item.on_chain_swap);
-    return filteredTokensInfo.map((item) => {
-      const chainInfo = findChainInfo(item);
-      return {
-        ...item,
-        symbol: item.token,
-        precision: item.decimals ?? 6,
-        ...chainInfo
-      };
-    });
+    const filteredTokensInfo = (tokensInfo ?? []).filter(
+      (item) => item.on_chain_swap
+    );
+    return filteredTokensInfo.reduce((result, item) => {
+      const tokenInfo = getMainnetConvertTokenInfo(item);
+      if (!tokenInfo) {
+        return result;
+      }
+      result.push(tokenInfo);
+      return result;
+    }, []);
   }, [tokensInfo]);
   useEffect(() => {
     const { usdc, others } = splitTokenBySymbol(newTokensInfo);
@@ -7247,13 +7273,7 @@ var useToken3 = (options2) => {
     setTargetToken(usdc[0]);
   }, [defaultValue, newTokensInfo]);
   const targetChainInfo = useMemo(() => {
-    const info = targetToken?.chain_details?.find(
-      (item) => item.chain_id === sourceToken?.quoteChainId
-    );
-    return {
-      ...info,
-      precision: targetToken?.precision
-    };
+    return findQuoteTargetChainInfo(targetToken, sourceToken?.quoteChainId);
   }, [sourceToken, targetToken]);
   return {
     sourceToken,
@@ -7267,6 +7287,7 @@ var useToken3 = (options2) => {
 // src/components/convertForm/convertForm.script.tsx
 var { calcMinimumReceived } = account;
 var ORDERLY_CONVERT_SLIPPAGE_KEY = "orderly_convert_slippage";
+var ODOS_QUOTE_DEBOUNCE_MS = 300;
 var normalizeAmount = (amount, decimals) => {
   return new Decimal(amount).mul(new Decimal(10).pow(decimals)).toFixed(0);
 };
@@ -7324,16 +7345,26 @@ var useConvertFormScript = (options2) => {
       setLoading(false);
     });
   };
-  const [postQuote, { data: quoteData, isMutating: isQuoteLoading }] = useOdosQuote();
-  useEffect(() => {
+  const [
+    postQuote,
+    { data: quoteData, reset: resetQuote, isMutating: isQuoteLoading }
+  ] = useOdosQuote();
+  const quoteRequest = useMemo(() => {
     const { quoteChainId, contract_address, decimals } = sourceToken || {};
     const targetAddress = targetChainInfo?.contract_address;
-    if (quantity && quoteChainId && contract_address && targetAddress) {
-      postQuote({
+    if (!quantity || new Decimal(quantity).lte(0) || !quoteChainId || !contract_address || typeof decimals === "undefined" || !targetAddress || !address) {
+      return null;
+    }
+    const inputAmount = normalizeAmount(quantity, decimals);
+    return {
+      inputAmount,
+      inputTokenAddress: contract_address.toLowerCase(),
+      outputTokenAddress: targetAddress.toLowerCase(),
+      body: {
         chainId: parseInt(quoteChainId),
         inputTokens: [
           {
-            amount: normalizeAmount(quantity, decimals),
+            amount: inputAmount,
             tokenAddress: contract_address
           }
         ],
@@ -7342,40 +7373,98 @@ var useConvertFormScript = (options2) => {
             proportion: 1,
             tokenAddress: targetAddress
           }
-        ]
+        ],
+        userAddr: address
         // simple: true,
+      }
+    };
+  }, [
+    quantity,
+    sourceToken?.quoteChainId,
+    sourceToken?.contract_address,
+    sourceToken?.decimals,
+    targetChainInfo?.contract_address,
+    targetChainInfo?.decimals,
+    address
+  ]);
+  useEffect(() => {
+    resetQuote();
+    if (!quoteRequest) {
+      return;
+    }
+    let active = true;
+    const timer = window.setTimeout(() => {
+      postQuote(quoteRequest.body).catch((error) => {
+        if (!active) {
+          return;
+        }
+        let message = t("transfer.convert.failed");
+        if (error instanceof Error) {
+          message = error.message;
+        } else if (error) {
+          message = String(error);
+        }
+        if (message === "Failed to fetch") {
+          message = t("transfer.convert.failed");
+        }
+        console.error("[convertForm] Odos quote failed:", error);
+        toast.error(message);
+        resetQuote();
       });
+    }, ODOS_QUOTE_DEBOUNCE_MS);
+    return () => {
+      active = false;
+      window.clearTimeout(timer);
+    };
+  }, [postQuote, quoteRequest, resetQuote, t]);
+  const isQuoteDataMatched = useMemo(() => {
+    if (!quoteData || !quoteRequest) {
+      return false;
+    }
+    const inAmount = quoteData?.inAmounts?.[0]?.toString();
+    const inToken = quoteData?.inTokens?.[0]?.toLowerCase();
+    const outToken = quoteData?.outTokens?.[0]?.toLowerCase();
+    return inAmount === quoteRequest.inputAmount && inToken === quoteRequest.inputTokenAddress && outToken === quoteRequest.outputTokenAddress;
+  }, [quoteData, quoteRequest]);
+  useEffect(() => {
+    if (quoteData && !isQuoteDataMatched) {
+      resetQuote();
     }
-  }, [quantity, sourceToken, targetChainInfo, postQuote]);
+  }, [isQuoteDataMatched, quoteData, resetQuote]);
   const memoizedOutAmounts = useMemo(() => {
-    if (!quoteData || isQuoteLoading) {
-      return "-";
+    if (quoteData && !isQuoteLoading && isQuoteDataMatched) {
+      return quoteData?.outAmounts[0];
     }
-    return quoteData?.outAmounts[0];
-  }, [quoteData, isQuoteLoading]);
+    return "-";
+  }, [quoteData, isQuoteDataMatched, isQuoteLoading]);
   const memoizedConvertRate = useMemo(() => {
-    if (!quoteData || isQuoteLoading) {
-      return "-";
+    if (quoteData && !isQuoteLoading && isQuoteDataMatched) {
+      return new Decimal(
+        unnormalizeAmount(
+          quoteData.outAmounts[0],
+          targetChainInfo?.decimals ?? 6
+        )
+      ).div(
+        unnormalizeAmount(quoteData.inAmounts[0], sourceToken?.decimals ?? 6)
+      ).toString();
     }
-    const rate = new Decimal(
-      unnormalizeAmount(
-        quoteData.outAmounts[0],
-        targetChainInfo?.decimals ?? 6
-      )
-    ).div(
-      unnormalizeAmount(quoteData.inAmounts[0], sourceToken?.decimals ?? 6)
-    ).toString();
-    return rate;
-  }, [isQuoteLoading, quoteData, sourceToken, targetChainInfo]);
+    return "-";
+  }, [
+    isQuoteDataMatched,
+    isQuoteLoading,
+    quoteData,
+    sourceToken,
+    targetChainInfo
+  ]);
   const memoizedMinimumReceived = useMemo(() => {
-    if (!quoteData || isQuoteLoading) {
+    if (!quoteData || isQuoteLoading || !isQuoteDataMatched) {
       return 0;
     }
     return calcMinimumReceived({
       amount: quoteData?.outAmounts[0],
       slippage: Number(slippage)
     });
-  }, [quoteData, isQuoteLoading, slippage]);
+  }, [quoteData, isQuoteDataMatched, isQuoteLoading, slippage]);
   const currentLtv = useComputedLTV();
   const nextLTV = useComputedLTV({
     input: Number(quantity),