@orderly.network/ui-transfer 3.1.0 → 3.1.1

package/dist/index.d.mts

@@ -279,25 +279,29 @@ declare const useConvertFormScript: (options: ConvertFormScriptOptions) => {
     address: string | undefined;
     quantity: string;
     onQuantityChange: (qty: string) => void;
-    token: (_orderly_network_types.API.Chain & {
+    token: (_orderly_network_types.API.Token & {
         contract_address: string;
         quoteChainId: string;
         precision: number;
+        symbol: string;
     }) | undefined;
-    sourceTokens: (_orderly_network_types.API.Chain & {
+    sourceTokens: (_orderly_network_types.API.Token & {
         contract_address: string;
         quoteChainId: string;
         precision: number;
+        symbol: string;
     })[];
-    onSourceTokenChange: react.Dispatch<react.SetStateAction<(_orderly_network_types.API.Chain & {
+    onSourceTokenChange: react.Dispatch<react.SetStateAction<(_orderly_network_types.API.Token & {
         contract_address: string;
         quoteChainId: string;
         precision: number;
+        symbol: string;
     }) | undefined>>;
-    targetToken: (_orderly_network_types.API.Chain & {
+    targetToken: (_orderly_network_types.API.Token & {
         contract_address: string;
         quoteChainId: string;
         precision: number;
+        symbol: string;
     }) | undefined;
     balanceRevalidating: boolean;
     maxQuantity: number;
@@ -317,16 +321,16 @@ declare const useConvertFormScript: (options: ConvertFormScriptOptions) => {
     currentLTV: number;
     nextLTV: number;
     targetChainInfo: {
+        contract_address: string;
         precision: number | undefined;
-        chain_id?: string | undefined;
-        contract_address?: string | undefined;
-        decimals?: number | undefined;
+        chain_id: string;
+        decimals: number;
         exclusive_deposit_supported?: boolean;
-        withdrawal_fee?: number | undefined;
+        withdrawal_fee: number;
         chain_name?: string;
-        cross_chain_withdrawal_fee?: number | undefined;
-        display_name?: string | undefined;
-    };
+        cross_chain_withdrawal_fee: number;
+        display_name: string;
+    } | undefined;
 };
 
 type ConvertFormProps = ConvertFormScriptReturn;

package/dist/index.d.ts

@@ -279,25 +279,29 @@ declare const useConvertFormScript: (options: ConvertFormScriptOptions) => {
     address: string | undefined;
     quantity: string;
     onQuantityChange: (qty: string) => void;
-    token: (_orderly_network_types.API.Chain & {
+    token: (_orderly_network_types.API.Token & {
         contract_address: string;
         quoteChainId: string;
         precision: number;
+        symbol: string;
     }) | undefined;
-    sourceTokens: (_orderly_network_types.API.Chain & {
+    sourceTokens: (_orderly_network_types.API.Token & {
         contract_address: string;
         quoteChainId: string;
         precision: number;
+        symbol: string;
     })[];
-    onSourceTokenChange: react.Dispatch<react.SetStateAction<(_orderly_network_types.API.Chain & {
+    onSourceTokenChange: react.Dispatch<react.SetStateAction<(_orderly_network_types.API.Token & {
         contract_address: string;
         quoteChainId: string;
         precision: number;
+        symbol: string;
     }) | undefined>>;
-    targetToken: (_orderly_network_types.API.Chain & {
+    targetToken: (_orderly_network_types.API.Token & {
         contract_address: string;
         quoteChainId: string;
         precision: number;
+        symbol: string;
     }) | undefined;
     balanceRevalidating: boolean;
     maxQuantity: number;
@@ -317,16 +321,16 @@ declare const useConvertFormScript: (options: ConvertFormScriptOptions) => {
     currentLTV: number;
     nextLTV: number;
     targetChainInfo: {
+        contract_address: string;
         precision: number | undefined;
-        chain_id?: string | undefined;
-        contract_address?: string | undefined;
-        decimals?: number | undefined;
+        chain_id: string;
+        decimals: number;
         exclusive_deposit_supported?: boolean;
-        withdrawal_fee?: number | undefined;
+        withdrawal_fee: number;
         chain_name?: string;
-        cross_chain_withdrawal_fee?: number | undefined;
-        display_name?: string | undefined;
-    };
+        cross_chain_withdrawal_fee: number;
+        display_name: string;
+    } | undefined;
 };
 
 type ConvertFormProps = ConvertFormScriptReturn;

package/dist/index.js

@@ -7177,6 +7177,7 @@ var SwapCoin = (props) => {
     }
   );
 };
+var nativeTokenAddress2 = "0x0000000000000000000000000000000000000000";
 var splitTokenBySymbol = (items) => {
   return items.reduce(
     (result, item) => {
@@ -7190,14 +7191,13 @@ var splitTokenBySymbol = (items) => {
     { usdc: [], others: [] }
   );
 };
-var findChainInfo = (tokenInfo) => {
+var findMainnetQuoteChainInfo = (tokenInfo) => {
   const arbitrumChainInfo = tokenInfo.chain_details.find(
     (item) => parseInt(item.chain_id) === types.Arbitrum.id
   );
   const nativeTokenChainInfo = tokenInfo.chain_details.find(
     (item) => !item.contract_address
   );
-  const nativeTokenAddress2 = "0x0000000000000000000000000000000000000000";
   if (arbitrumChainInfo) {
     return {
       contract_address: arbitrumChainInfo.contract_address || nativeTokenAddress2,
@@ -7218,23 +7218,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] = react.useState();
   const [targetToken, setTargetToken] = react.useState();
   const [sourceTokens, setSourceTokens] = react.useState([]);
-  const tokensInfo = hooks.useTokensInfo();
+  const tokensInfo = hooks.useMainTokenStore((state) => state.data);
   const newTokensInfo = react.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]);
   react.useEffect(() => {
     const { usdc, others } = splitTokenBySymbol(newTokensInfo);
@@ -7249,13 +7275,7 @@ var useToken3 = (options2) => {
     setTargetToken(usdc[0]);
   }, [defaultValue, newTokensInfo]);
   const targetChainInfo = react.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,
@@ -7269,6 +7289,7 @@ var useToken3 = (options2) => {
 // src/components/convertForm/convertForm.script.tsx
 var { calcMinimumReceived } = perp.account;
 var ORDERLY_CONVERT_SLIPPAGE_KEY = "orderly_convert_slippage";
+var ODOS_QUOTE_DEBOUNCE_MS = 300;
 var normalizeAmount = (amount, decimals) => {
   return new utils.Decimal(amount).mul(new utils.Decimal(10).pow(decimals)).toFixed(0);
 };
@@ -7326,16 +7347,26 @@ var useConvertFormScript = (options2) => {
       setLoading(false);
     });
   };
-  const [postQuote, { data: quoteData, isMutating: isQuoteLoading }] = hooks.useOdosQuote();
-  react.useEffect(() => {
+  const [
+    postQuote,
+    { data: quoteData, reset: resetQuote, isMutating: isQuoteLoading }
+  ] = hooks.useOdosQuote();
+  const quoteRequest = react.useMemo(() => {
     const { quoteChainId, contract_address, decimals } = sourceToken || {};
     const targetAddress = targetChainInfo?.contract_address;
-    if (quantity && quoteChainId && contract_address && targetAddress) {
-      postQuote({
+    if (!quantity || new utils.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
           }
         ],
@@ -7344,40 +7375,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
+  ]);
+  react.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);
+        ui.toast.error(message);
+        resetQuote();
       });
+    }, ODOS_QUOTE_DEBOUNCE_MS);
+    return () => {
+      active = false;
+      window.clearTimeout(timer);
+    };
+  }, [postQuote, quoteRequest, resetQuote, t]);
+  const isQuoteDataMatched = react.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]);
+  react.useEffect(() => {
+    if (quoteData && !isQuoteDataMatched) {
+      resetQuote();
     }
-  }, [quantity, sourceToken, targetChainInfo, postQuote]);
+  }, [isQuoteDataMatched, quoteData, resetQuote]);
   const memoizedOutAmounts = react.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 = react.useMemo(() => {
-    if (!quoteData || isQuoteLoading) {
-      return "-";
+    if (quoteData && !isQuoteLoading && isQuoteDataMatched) {
+      return new utils.Decimal(
+        unnormalizeAmount(
+          quoteData.outAmounts[0],
+          targetChainInfo?.decimals ?? 6
+        )
+      ).div(
+        unnormalizeAmount(quoteData.inAmounts[0], sourceToken?.decimals ?? 6)
+      ).toString();
     }
-    const rate = new utils.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 = react.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 = hooks.useComputedLTV();
   const nextLTV = hooks.useComputedLTV({
     input: Number(quantity),