@orderly.network/ui-transfer 2.8.13-rc.0 → 2.8.13

package/dist/index.d.mts

@@ -51,6 +51,7 @@ type Options$1 = {
     approve: (quantity?: string) => Promise<any>;
     deposit: () => Promise<any>;
     onSuccess?: () => void;
+    onError?: (err: unknown, knownErrorMessage?: string) => void;
     customDeposit?: () => Promise<any>;
     enableCustomDeposit?: boolean;
 };
@@ -67,7 +68,7 @@ type Options = {
 };
 declare function useInputStatus(options: Options): {
     inputStatus: InputStatus;
-    hintMessage: string | undefined;
+    hintMessage: string;
 };
 
 type DepositFormScriptReturn = ReturnType<typeof useDepositFormScript>;
@@ -106,8 +107,8 @@ declare const useDepositFormScript: (options: DepositFormScriptOptions) => {
     maxDepositAmount: string;
     indexPrice: number;
     onQuantityChange: react.Dispatch<react.SetStateAction<string>>;
-    hintMessage: string | undefined;
-    inputStatus: InputStatus;
+    hintMessage: string;
+    inputStatus: "default" | "error" | "warning" | "success";
     chains: API.NetworkInfos[];
     currentChain: CurrentChain | null;
     settingChain: boolean;
@@ -318,7 +319,7 @@ declare const useSwapDepositFormScript: (options: UseSwapDepositFormScriptOption
     maxQuantity: string;
     swapQuantity: string;
     onQuantityChange: react.Dispatch<react.SetStateAction<string>>;
-    hintMessage: string | undefined;
+    hintMessage: string;
     inputStatus: InputStatus;
     chains: API.NetworkInfos[];
     currentChain: CurrentChain | null;

package/dist/index.d.ts

@@ -51,6 +51,7 @@ type Options$1 = {
     approve: (quantity?: string) => Promise<any>;
     deposit: () => Promise<any>;
     onSuccess?: () => void;
+    onError?: (err: unknown, knownErrorMessage?: string) => void;
     customDeposit?: () => Promise<any>;
     enableCustomDeposit?: boolean;
 };
@@ -67,7 +68,7 @@ type Options = {
 };
 declare function useInputStatus(options: Options): {
     inputStatus: InputStatus;
-    hintMessage: string | undefined;
+    hintMessage: string;
 };
 
 type DepositFormScriptReturn = ReturnType<typeof useDepositFormScript>;
@@ -106,8 +107,8 @@ declare const useDepositFormScript: (options: DepositFormScriptOptions) => {
     maxDepositAmount: string;
     indexPrice: number;
     onQuantityChange: react.Dispatch<react.SetStateAction<string>>;
-    hintMessage: string | undefined;
-    inputStatus: InputStatus;
+    hintMessage: string;
+    inputStatus: "default" | "error" | "warning" | "success";
     chains: API.NetworkInfos[];
     currentChain: CurrentChain | null;
     settingChain: boolean;
@@ -318,7 +319,7 @@ declare const useSwapDepositFormScript: (options: UseSwapDepositFormScriptOption
     maxQuantity: string;
     swapQuantity: string;
     onQuantityChange: react.Dispatch<react.SetStateAction<string>>;
-    hintMessage: string | undefined;
+    hintMessage: string;
     inputStatus: InputStatus;
     chains: API.NetworkInfos[];
     currentChain: CurrentChain | null;

package/dist/index.js

@@ -4415,6 +4415,7 @@ function useDepositAction(options2) {
     } catch (err) {
       console.error("deposit error", err);
       const knownErrorMessage = getDepositKnownErrorMessage(err.message);
+      options2.onError?.(err, knownErrorMessage);
       if (knownErrorMessage) {
         ui.toast.error(
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -4431,7 +4432,7 @@ function useDepositAction(options2) {
         ui.toast.error(err.message || t("common.somethingWentWrong"));
       }
     }
-  }, [deposit, onSuccess, t]);
+  }, [deposit, onSuccess, t, ee, options2.onError]);
   const onDeposit = react.useCallback(async () => {
     const num = Number(quantity);
     if (isNaN(num) || num <= 0) {
@@ -4478,24 +4479,19 @@ function useDepositAction(options2) {
 function useInputStatus(options2) {
   const { quantity, maxQuantity } = options2;
   const { t } = i18n.useTranslation();
-  const [inputStatus, setInputStatus] = react.useState("default");
-  const [hintMessage, setHintMessage] = react.useState();
-  react.useEffect(() => {
+  return react.useMemo(() => {
     if (!quantity) {
-      setInputStatus("default");
-      setHintMessage("");
-      return;
+      return { inputStatus: "default", hintMessage: "" };
     }
     const qty = new utils.Decimal(quantity);
     if (qty.gt(maxQuantity)) {
-      setInputStatus("error");
-      setHintMessage(t("transfer.insufficientBalance"));
-    } else {
-      setInputStatus("default");
-      setHintMessage("");
+      return {
+        inputStatus: "error",
+        hintMessage: t("transfer.insufficientBalance")
+      };
     }
-  }, [quantity, maxQuantity]);
-  return { inputStatus, hintMessage };
+    return { inputStatus: "default", hintMessage: "" };
+  }, [quantity, maxQuantity, t]);
 }
 var retryInterval2 = 3e3;
 function useNativeBalance(options2) {
@@ -4707,10 +4703,12 @@ var useDepositFormScript = (options2) => {
     needSwap,
     needCrossSwap
   });
+  const [depositExceedLimitDetected, setDepositExceedLimitDetected] = react.useState(false);
   const cleanData = react.useCallback(() => {
     setQuantity("");
     cleanTransactionInfo();
-  }, [setQuantity]);
+    setDepositExceedLimitDetected(false);
+  }, [setQuantity, cleanTransactionInfo]);
   const onSuccess = react.useCallback(() => {
     cleanData();
     options2.close?.();
@@ -4722,38 +4720,57 @@ var useDepositFormScript = (options2) => {
     deposit,
     enableCustomDeposit: needSwap || needCrossSwap,
     customDeposit: onSwapDeposit,
-    onSuccess
+    onSuccess: () => {
+      setDepositExceedLimitDetected(false);
+      onSuccess();
+    },
+    onError: (err, knownErrorMessage) => {
+      const message = typeof err?.message === "string" ? err.message : "";
+      const isDepositExceedLimit = message.includes("0xd969df24") || message.includes("DepositExceedLimit") || (knownErrorMessage?.includes("DepositExceedLimit") ?? false);
+      if (isDepositExceedLimit) {
+        setDepositExceedLimitDetected(true);
+      }
+    }
   });
-  const userMaxQtyMessage = react.useMemo(() => {
-    if (sourceToken?.symbol === "USDC" || sourceToken?.symbol !== targetToken?.symbol || !sourceToken?.is_collateral || !quantity || isNaN(Number(quantity))) {
-      return "";
+  react.useEffect(() => {
+    if (depositExceedLimitDetected) {
+      setDepositExceedLimitDetected(false);
     }
-    if (new utils.Decimal(quantity).gt(sourceToken?.user_max_qty)) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        i18n.Trans,
-        {
-          i18nKey: "transfer.deposit.userMaxQty.error",
-          values: {
-            token: sourceToken?.symbol,
-            chain: currentChain?.info?.network_infos?.name || ""
-          },
-          components: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "a",
-              {
-                href: "https://orderly.network/docs/introduction/trade-on-orderly/multi-collateral#max-deposits-global",
-                target: "_blank",
-                rel: "noopener noreferrer",
-                className: "oui-text-primary"
-              },
-              "0"
-            )
-          ]
-        }
-      );
+  }, [quantity, sourceToken, currentChain?.id]);
+  const globalMaxQtyMessage = react.useMemo(() => {
+    if (sourceToken?.symbol === "USDC" || sourceToken?.symbol !== targetToken?.symbol || !sourceToken?.is_collateral || !depositExceedLimitDetected) {
+      return "";
     }
-    return "";
-  }, [sourceToken, targetToken, quantity, currentChain, t]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      i18n.Trans,
+      {
+        i18nKey: "transfer.deposit.globalMaxQty.error",
+        values: {
+          token: sourceToken?.symbol,
+          chain: currentChain?.info?.network_infos?.name || ""
+        },
+        components: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href: "https://orderly.network/docs/introduction/trade-on-orderly/multi-collateral#max-deposits-global",
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "oui-text-primary"
+            },
+            "0"
+          )
+        ]
+      }
+    );
+  }, [
+    depositExceedLimitDetected,
+    sourceToken?.symbol,
+    sourceToken?.is_collateral,
+    targetToken?.symbol,
+    currentChain,
+    t
+  ]);
   const loading = submitting || depositFeeRevalidating;
   const nativeSymbol = react.useMemo(() => {
     return currentChain?.info?.nativeToken?.symbol;
@@ -4792,13 +4809,6 @@ var useDepositFormScript = (options2) => {
   react.useEffect(() => {
     cleanData();
   }, [sourceToken, currentChain?.id]);
-  const gasFeeMessage = react.useMemo(() => {
-    if (isNativeToken && maxQuantity === quantity) {
-      return t("transfer.deposit.gasFee.error", {
-        token: sourceToken?.symbol
-      });
-    }
-  }, [maxQuantity, quantity, sourceToken?.symbol, t]);
   react.useEffect(() => {
     if (quantity && Number(quantity) > 0 && depositFee === 0n && !depositFeeRevalidating && account2.walletAdapter?.chainNamespace !== types.ChainNamespace.solana) {
       setFeeWarningMessage(t("transfer.deposit.feeUnavailable"));
@@ -4812,6 +4822,28 @@ var useDepositFormScript = (options2) => {
     }
     return false;
   }, [quantity, maxQuantity]);
+  const insufficientNativeTotal = react.useMemo(() => {
+    if (!isNativeToken || !quantity || Number(quantity) <= 0 || depositFeeRevalidating || insufficientBalance) {
+      return false;
+    }
+    const estimatedGasFee = new utils.Decimal(fee.dstGasFee || 0);
+    const totalNeeded = new utils.Decimal(quantity).add(estimatedGasFee);
+    return totalNeeded.gt(maxQuantity || 0);
+  }, [
+    isNativeToken,
+    quantity,
+    depositFeeRevalidating,
+    insufficientBalance,
+    fee.dstGasFee,
+    maxQuantity
+  ]);
+  const gasFeeMessage = react.useMemo(() => {
+    if (insufficientNativeTotal) {
+      return t("transfer.deposit.gasFee.error", {
+        token: sourceToken?.symbol
+      });
+    }
+  }, [insufficientNativeTotal, sourceToken?.symbol, t]);
   const nativeBalance = useNativeBalance({
     fetchBalance,
     targetChain
@@ -4838,12 +4870,17 @@ var useDepositFormScript = (options2) => {
     account2,
     nativeBalance
   ]);
-  const warningMessage = swapWarningMessage || userMaxQtyMessage || gasFeeMessage || feeWarningMessage || insufficientGasMessage;
-  const hasUserMaxQtyError = !!userMaxQtyMessage;
-  const finalInputStatus = hasUserMaxQtyError ? "error" : inputStatus;
-  const finalHintMessage = hasUserMaxQtyError ? t("transfer.deposit.exceedCap") : hintMessage;
+  const warningMessage = swapWarningMessage || globalMaxQtyMessage || gasFeeMessage || feeWarningMessage || insufficientGasMessage;
+  const isExceedUserCapByInput = react.useMemo(() => {
+    if (sourceToken?.symbol === "USDC" || sourceToken?.symbol !== targetToken?.symbol || !sourceToken?.is_collateral || sourceToken?.user_max_qty === void 0 || sourceToken?.user_max_qty === -1 || !quantity || isNaN(Number(quantity))) {
+      return false;
+    }
+    return new utils.Decimal(quantity).gt(sourceToken.user_max_qty);
+  }, [sourceToken, targetToken, quantity]);
+  const finalInputStatus = inputStatus === "error" ? inputStatus : isExceedUserCapByInput ? "error" : inputStatus;
+  const finalHintMessage = inputStatus === "error" ? hintMessage : isExceedUserCapByInput ? t("transfer.deposit.exceedCap") : hintMessage;
   const disabled = !quantity || Number(quantity) === 0 || !sourceToken || inputStatus === "error" || depositFeeRevalidating || swapRevalidating || // if exceed collateral cap, disable deposit
-  !!userMaxQtyMessage || !!feeWarningMessage || !!insufficientGasMessage;
+  isExceedUserCapByInput || !!feeWarningMessage || !!insufficientNativeTotal || !!insufficientGasMessage;
   const targetQuantity = react.useMemo(() => {
     if (needSwap) {
       return swapQuantity ? new utils.Decimal(swapQuantity)?.todp(SWAP_USDC_PRECISION, utils.Decimal.ROUND_DOWN).toString() : swapQuantity;