@orderly.network/ui-transfer 3.1.9 → 3.1.10

package/dist/index.js

@@ -1528,6 +1528,24 @@ var QuantityInput = (props) => {
     hintMessage && message
   ] });
 };
+
+// src/components/slippage/slippage.utils.ts
+var getSlippageRiskLevel = (value, min, recommendedValue) => {
+  if (value === void 0 || !Number.isFinite(value)) {
+    return void 0;
+  }
+  if (value < min) {
+    return "minimum";
+  }
+  if (value < recommendedValue) {
+    return "low";
+  }
+  if (value > recommendedValue) {
+    return "high";
+  }
+  return void 0;
+};
+var shouldDisableSlippageSave = (value, riskLevel) => !value || riskLevel === "minimum";
 var options = [0.5, 1, 2];
 var Slippage = (props) => {
   const { min = 0.2, max = 10, dp = 2 } = props;
@@ -1536,10 +1554,12 @@ var Slippage = (props) => {
   const [open, setOpen] = react.useState(false);
   const { t } = i18n.useTranslation();
   react.useEffect(() => {
-    if (props.value && !options.includes(props.value)) {
+    if (props.value !== void 0 && !options.includes(props.value)) {
+      setValue(void 0);
       setCustomValue(props.value.toString());
     } else {
       setValue(props.value);
+      setCustomValue("");
     }
   }, [props.value, open]);
   const showSlippage = () => {
@@ -1559,7 +1579,7 @@ var Slippage = (props) => {
     }
     const d = new utils.Decimal(val);
     setValue(void 0);
-    if (d.lt(min)) {
+    if (d.lt(min) && !props.riskGuidance) {
       setCustomValue(min.toString());
     } else if (d.gt(max)) {
       setCustomValue(max.toString());
@@ -1578,17 +1598,27 @@ var Slippage = (props) => {
     }
     return Promise.resolve(true);
   };
-  const disabled = !getValue();
+  const currentValue = getValue();
+  const riskLevel = props.riskGuidance ? getSlippageRiskLevel(
+    currentValue,
+    min,
+    props.riskGuidance.recommendedValue
+  ) : void 0;
   const errorMessage = react.useMemo(() => {
-    return props.validate?.(getValue());
-  }, [value, customValue, props.validate]);
+    if (riskLevel === "minimum") {
+      return props.riskGuidance?.minimumError;
+    }
+    return currentValue === void 0 ? void 0 : props.validate?.(currentValue);
+  }, [currentValue, props.riskGuidance, props.validate, riskLevel]);
+  const warningMessage = riskLevel === "low" ? props.riskGuidance?.lowWarning : riskLevel === "high" ? props.riskGuidance?.highWarning : void 0;
+  const disabled = shouldDisableSlippageSave(currentValue, riskLevel);
   const content = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-text-2xs", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, itemAlign: "center", children: [
       /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", intensity: 54, children: t("transfer.slippage.slippageTolerance") }),
       /* @__PURE__ */ jsxRuntime.jsx(
         ui.Tips,
         {
-          content: t("transfer.slippage.slippageTolerance.description"),
+          content: props.riskGuidance?.tooltip ?? t("transfer.slippage.slippageTolerance.description"),
           title: t("common.tips"),
           classNamss: {
             trigger: "oui-mt-[2px] oui-size-4"
@@ -1633,7 +1663,17 @@ var Slippage = (props) => {
         }
       )
     ] }),
-    errorMessage && /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { mt: 6, children: /* @__PURE__ */ jsxRuntime.jsx(
+    (props.riskGuidance?.helperText || props.message) && /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Text,
+      {
+        as: "div",
+        size: "2xs",
+        intensity: 54,
+        className: "oui-mt-3 oui-leading-4",
+        children: props.riskGuidance?.helperText || props.message
+      }
+    ),
+    errorMessage && /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { mt: 3, children: /* @__PURE__ */ jsxRuntime.jsx(
       ui.Text,
       {
         size: "2xs",
@@ -1641,7 +1681,8 @@ var Slippage = (props) => {
         className: "oui-w-full oui-text-center",
         children: errorMessage
       }
-    ) })
+    ) }),
+    !errorMessage && warningMessage && /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { mt: 3, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "div", size: "2xs", color: "warning", className: "oui-leading-4", children: warningMessage }) })
   ] });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -7226,7 +7267,96 @@ var SwapCoin = (props) => {
     }
   );
 };
+var getTrackedConvertRequestForAccount = (request, accountId) => request?.accountId === accountId ? request : void 0;
+var isValidConvertAmount = (value) => {
+  const amount = Number(value);
+  return Number.isFinite(amount) && amount > 0;
+};
+var getConvertTargetAmount = (submittedAmount) => isValidConvertAmount(submittedAmount) ? String(submittedAmount) : "-";
+var getConvertReceivedAmount = (record) => {
+  if (!record || record.status !== "completed" && record.status !== "succeeded") {
+    return "-";
+  }
+  if (isValidConvertAmount(record.received_qty)) {
+    return String(record.received_qty);
+  }
+  const detailAmount = record.details.reduce((total, detail) => {
+    if (detail.result?.toLowerCase() !== "succeeded" || !isValidConvertAmount(detail.received_qty)) {
+      return total;
+    }
+    return total.plus(detail.received_qty);
+  }, new utils.Decimal(0));
+  return detailAmount.gt(0) ? detailAmount.toString() : "-";
+};
+var createTrackedConvertRequest = (record) => {
+  const sourceEntry = Object.entries(record.converted_asset ?? {})[0];
+  const sourceDetail = record.details[0];
+  return {
+    convertId: record.convert_id,
+    previousMaxConvertId: record.convert_id - 1,
+    sourceToken: sourceEntry?.[0] || sourceDetail?.converted_asset || "-",
+    sourceAmount: String(
+      sourceEntry?.[1] ?? sourceDetail?.converted_qty ?? "-"
+    ),
+    targetToken: record.received_asset || "USDC",
+    targetAmount: getConvertTargetAmount(void 0)
+  };
+};
+var getEffectiveConvertStatus = (record) => {
+  if (record.status === "pending") {
+    return "pending";
+  }
+  const hasFailedTransaction = record.details.some(
+    (detail) => detail.result?.toLowerCase() === "failed"
+  );
+  if (hasFailedTransaction) {
+    return "failed";
+  }
+  const hasOnlySucceededTransactions = record.status === "completed" && record.details.length > 0 && record.details.every(
+    (detail) => detail.result?.toLowerCase() === "succeeded"
+  );
+  return hasOnlySucceededTransactions ? "succeeded" : record.status;
+};
+var getConvertProgressStatus = (status, isRefreshing, isDelayed) => {
+  if (status !== "pending") {
+    return status;
+  }
+  if (isRefreshing) {
+    return "checking";
+  }
+  return isDelayed ? "delayed" : "pending";
+};
+var shouldDisplayConvertProgress = (status, isRecoveredRequest) => Boolean(status && (!isRecoveredRequest || status === "pending"));
+var recordContainsToken = (record, token) => {
+  return Object.keys(record.converted_asset ?? {}).some(
+    (asset) => asset.toLowerCase() === token.toLowerCase()
+  ) || record.details.some(
+    (detail) => detail.converted_asset?.toLowerCase() === token.toLowerCase()
+  );
+};
+var findTrackedConvertRecord = (rows, request) => {
+  if (request.convertId !== void 0) {
+    return rows.find((record) => record.convert_id === request.convertId);
+  }
+  return rows.find(
+    (record) => record.convert_id > request.previousMaxConvertId && record.type === "manual" && recordContainsToken(record, request.sourceToken)
+  );
+};
+var findLatestPendingConvertRecord = (rows) => rows.find((record) => getEffectiveConvertStatus(record) === "pending");
+var getConvertIdFromResponse = (response) => {
+  if (!response || typeof response !== "object") {
+    return void 0;
+  }
+  const value = response;
+  const convertId = value.data?.convertId ?? value.data?.convert_id ?? value.convertId ?? value.convert_id;
+  const numericConvertId = Number(convertId);
+  return Number.isFinite(numericConvertId) ? numericConvertId : void 0;
+};
+var normalizeConvertSlippage = (value) => {
+  return Number.isFinite(value) ? Math.max(0.2, value) : 0.5;
+};
 var ConvertFormUI = (props) => {
+  const { t } = i18n.useTranslation();
   const {
     loading,
     disabled,
@@ -7247,8 +7377,26 @@ var ConvertFormUI = (props) => {
     currentLTV,
     nextLTV,
     networkId,
-    balanceRevalidating
+    balanceRevalidating,
+    activeConvertRequest,
+    isCheckingConvertStatus,
+    hasConvertStatusError,
+    isConvertHistoryRefreshing,
+    onRefreshConvertStatus,
+    isRecoveredConvertRequest
   } = props;
+  if (activeConvertRequest && shouldDisplayConvertProgress(
+    activeConvertRequest.status,
+    isRecoveredConvertRequest
+  )) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ConvertProgressStatus,
+      {
+        request: activeConvertRequest,
+        isRefreshing: isConvertHistoryRefreshing
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: ui.textVariants({ weight: "semibold" }), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "oui-mb-6 lg:oui-mb-8", children: [
       /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { mt: 3, mb: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -7292,7 +7440,21 @@ var ConvertFormUI = (props) => {
             targetSymbol: targetToken?.token
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(Slippage, { value: slippage, onValueChange: onSlippageChange }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Slippage,
+          {
+            value: slippage,
+            onValueChange: onSlippageChange,
+            riskGuidance: {
+              recommendedValue: 0.5,
+              tooltip: t("transfer.convert.slippage.tooltip"),
+              helperText: t("transfer.convert.slippage.helper"),
+              minimumError: t("transfer.convert.slippage.minimumError"),
+              lowWarning: t("transfer.convert.slippage.lowWarning"),
+              highWarning: t("transfer.convert.slippage.highWarning")
+            }
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           MinimumReceived,
           {
@@ -7311,17 +7473,117 @@ var ConvertFormUI = (props) => {
         )
       ] })
     ] }),
+    hasConvertStatusError && /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.Flex,
+      {
+        itemAlign: "center",
+        justify: "between",
+        gap: 3,
+        className: "oui-mb-4 oui-w-full",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", gap: 2, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.ExclamationFillIcon, { className: "oui-size-4 oui-shrink-0 oui-text-warning-darken" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", intensity: 54, children: t("transfer.convert.statusCheckFailed") })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              size: "sm",
+              variant: "outlined",
+              loading: isConvertHistoryRefreshing,
+              onClick: onRefreshConvertStatus,
+              children: t("common.refresh")
+            }
+          )
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { itemAlign: "center", justify: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
       ConvertAction,
       {
         networkId,
         disabled,
-        loading,
+        loading: loading || isCheckingConvertStatus,
         onConvert
       }
     ) })
   ] });
 };
+var ConvertProgressStatus = ({ request, isRefreshing }) => {
+  const { t } = i18n.useTranslation();
+  const isPending = request.status === "pending";
+  const isCompleted = request.status === "completed" || request.status === "succeeded";
+  const isFailed = !isPending && !isCompleted;
+  const progressStatus = getConvertProgressStatus(
+    request.status,
+    isRefreshing,
+    request.isDelayed
+  );
+  const isChecking = progressStatus === "checking";
+  const isDelayed = progressStatus === "delayed";
+  const hasTargetAmount = isValidConvertAmount(request.targetAmount);
+  const hasReceivedAmount = isValidConvertAmount(request.receivedAmount);
+  const interpolation = {
+    fromAmount: request.sourceAmount,
+    fromToken: request.sourceToken,
+    toAmount: request.targetAmount,
+    toToken: request.targetToken,
+    receivedAmount: request.receivedAmount
+  };
+  const statusLabel = isChecking ? t("transfer.convert.statusChecking") : isDelayed ? t("transfer.convert.delayed", interpolation) : isPending ? t("transfer.convert.pending") : isCompleted ? t("transfer.convert.completed") : t("transfer.convert.failed");
+  const description = isDelayed ? t("transfer.convert.delayed.description") : isPending ? t(
+    hasTargetAmount ? "transfer.convert.pending.description" : "transfer.convert.pending.descriptionWithoutAmount",
+    interpolation
+  ) : isCompleted ? t(
+    hasReceivedAmount ? "transfer.convert.completed.description" : "transfer.convert.completed.descriptionWithoutAmount",
+    interpolation
+  ) : t("transfer.convert.failed.description");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
+    {
+      direction: "column",
+      itemAlign: "center",
+      gap: 6,
+      className: "oui-w-full oui-px-4 oui-py-6",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", justify: "center", gap: 3, className: "oui-w-full", children: [
+          isCompleted && /* @__PURE__ */ jsxRuntime.jsx(ui.CheckedCircleFillIcon, { className: "oui-size-4 oui-text-success" }),
+          !isPending && !isCompleted && /* @__PURE__ */ jsxRuntime.jsx(ui.ExclamationFillIcon, { className: "oui-size-4 oui-text-danger" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Text,
+            {
+              size: "sm",
+              weight: "semibold",
+              intensity: isFailed ? void 0 : 80,
+              color: isFailed ? "danger" : void 0,
+              className: "oui-text-center",
+              children: statusLabel
+            }
+          ),
+          isPending && !isDelayed && /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Flex,
+            {
+              itemAlign: "center",
+              justify: "center",
+              className: "oui-size-4 oui-shrink-0",
+              children: /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, { size: "sm", className: "oui-block" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Text,
+          {
+            as: "div",
+            size: "xs",
+            intensity: 54,
+            className: "oui-w-full oui-text-center",
+            children: description
+          }
+        )
+      ]
+    }
+  );
+};
 var splitTokenBySymbol = (items) => {
   return items.reduce(
     (result, item) => {
@@ -7374,17 +7636,41 @@ var useToken3 = (options2) => {
     targetToken
   };
 };
+var isValidAmount = (value) => {
+  const amount = Number(value);
+  return Number.isFinite(amount) && amount > 0;
+};
+var getQuoteTargetAmount = (estimatedValue, estimatedAmount, decimals) => {
+  if (isValidAmount(estimatedValue)) {
+    return estimatedValue;
+  }
+  if (isValidAmount(estimatedAmount) && Number.isInteger(decimals) && typeof decimals === "number" && decimals >= 0) {
+    return new utils.Decimal(estimatedAmount).div(new utils.Decimal(10).pow(decimals)).toString();
+  }
+  return "-";
+};
 var calculateQuoteRate = (inputAmount, estimatedUsdcValue) => new utils.Decimal(estimatedUsdcValue).div(inputAmount).toString();
 var calculateMinimumReceived = (estimatedUsdcValue, slippageLimitPercent) => new utils.Decimal(estimatedUsdcValue).mul(new utils.Decimal(1).minus(new utils.Decimal(slippageLimitPercent).div(100))).toString();
-
-// src/components/convertForm/convertForm.script.tsx
 var ORDERLY_CONVERT_SLIPPAGE_KEY = "orderly_convert_slippage";
+var ORDERLY_TRACKED_CONVERT_KEY = "orderly_tracked_convert";
 var SWAP_QUOTE_DEBOUNCE_MS = 300;
+var CONVERT_HISTORY_REFRESH_INTERVAL = 1e4;
+var CONVERT_DELAY_WARNING_TIMEOUT = 2e4;
+var CONVERT_HISTORY_URL = "/v1/asset/convert_history?page=1&size=20";
 var getQuoteErrorMessage = (error) => error instanceof Error ? error.message : String(error);
 var useConvertFormScript = (options2) => {
-  const { token: defaultToken, close } = options2;
+  const { token: defaultToken } = options2;
   const { t } = i18n.useTranslation();
   const [loading, setLoading] = react.useState(false);
+  const [persistedTrackedConvert, setPersistedTrackedConvert] = hooks.useSessionStorage(
+    ORDERLY_TRACKED_CONVERT_KEY,
+    null
+  );
+  const [trackedConvert, setTrackedConvert] = react.useState(() => persistedTrackedConvert ?? void 0);
+  const [isConvertDelayed, setIsConvertDelayed] = react.useState(false);
+  const effectiveTrackedConvert = trackedConvert ?? persistedTrackedConvert;
+  const trackedRequest = effectiveTrackedConvert?.request;
+  const ee = hooks.useEventEmitter();
   const config = hooks.useConfig();
   const networkId = config.get("networkId");
   const [quantity, setQuantity] = react.useState("");
@@ -7405,19 +7691,145 @@ var useConvertFormScript = (options2) => {
     ORDERLY_CONVERT_SLIPPAGE_KEY,
     0.5
   );
+  const normalizedSlippage = normalizeConvertSlippage(Number(slippage));
+  react.useEffect(() => {
+    if (normalizedSlippage !== slippage) {
+      setSlippage(normalizedSlippage);
+    }
+  }, [normalizedSlippage, setSlippage, slippage]);
+  const { state: accountState } = hooks.useAccount();
+  const canQueryConvertHistory = accountState.status >= types.AccountStatusEnum.EnableTrading || accountState.status === types.AccountStatusEnum.EnableTradingWithoutConnected;
+  const currentTrackedRequest = getTrackedConvertRequestForAccount(
+    trackedRequest,
+    accountState.accountId
+  );
+  react.useEffect(() => {
+    if (!trackedConvert && persistedTrackedConvert) {
+      setTrackedConvert(persistedTrackedConvert);
+    }
+  }, [persistedTrackedConvert, trackedConvert]);
+  react.useEffect(() => {
+    setIsConvertDelayed(false);
+  }, [accountState.accountId]);
+  const {
+    data: convertHistory,
+    error: convertHistoryError,
+    isValidating: isConvertHistoryRefreshing,
+    mutate: refreshConvertHistory
+  } = hooks.usePrivateQuery(CONVERT_HISTORY_URL, {
+    formatter: (data) => data,
+    revalidateOnFocus: true,
+    refreshInterval: (latestData) => {
+      const rows = latestData?.rows ?? [];
+      if (currentTrackedRequest) {
+        const trackedRecord2 = findTrackedConvertRecord(
+          rows,
+          currentTrackedRequest
+        );
+        return !trackedRecord2 || getEffectiveConvertStatus(trackedRecord2) === "pending" ? CONVERT_HISTORY_REFRESH_INTERVAL : 0;
+      }
+      return findLatestPendingConvertRecord(rows) ? CONVERT_HISTORY_REFRESH_INTERVAL : 0;
+    }
+  });
+  const convertHistoryRows = convertHistory?.rows ?? [];
+  const latestPendingRecord = react.useMemo(
+    () => findLatestPendingConvertRecord(convertHistoryRows),
+    [convertHistoryRows]
+  );
+  const latestPendingRequest = react.useMemo(() => {
+    if (!latestPendingRecord) {
+      return void 0;
+    }
+    return {
+      ...createTrackedConvertRequest(latestPendingRecord),
+      accountId: accountState.accountId
+    };
+  }, [accountState.accountId, latestPendingRecord]);
+  react.useEffect(() => {
+    if (!currentTrackedRequest && latestPendingRequest) {
+      setTrackedConvert({
+        request: latestPendingRequest,
+        origin: "recovered"
+      });
+    }
+  }, [currentTrackedRequest, latestPendingRequest]);
+  const effectiveTrackedRequest = currentTrackedRequest ?? latestPendingRequest;
+  react.useEffect(() => {
+    const handleConvertChange = () => {
+      void refreshConvertHistory();
+    };
+    ee.on("assetconvert:changed", handleConvertChange);
+    return () => {
+      ee.off("assetconvert:changed", handleConvertChange);
+    };
+  }, [ee, refreshConvertHistory]);
+  const trackedRecord = react.useMemo(
+    () => effectiveTrackedRequest ? findTrackedConvertRecord(convertHistoryRows, effectiveTrackedRequest) : void 0,
+    [convertHistoryRows, effectiveTrackedRequest]
+  );
+  const activeRecord = effectiveTrackedRequest ? trackedRecord : latestPendingRecord;
+  const historyStatus = effectiveTrackedRequest ? trackedRecord ? getEffectiveConvertStatus(trackedRecord) : "pending" : activeRecord ? getEffectiveConvertStatus(activeRecord) : void 0;
+  const activeStatus = historyStatus;
+  react.useEffect(() => {
+    if (persistedTrackedConvert && activeStatus && activeStatus !== "pending") {
+      setPersistedTrackedConvert(null);
+    }
+  }, [activeStatus, persistedTrackedConvert, setPersistedTrackedConvert]);
+  const trackedRequestKey = effectiveTrackedRequest ? `${effectiveTrackedRequest.convertId ?? "new"}:${effectiveTrackedRequest.previousMaxConvertId}:${effectiveTrackedRequest.sourceToken}:${effectiveTrackedRequest.targetToken}` : void 0;
+  react.useEffect(() => {
+    if (!trackedRequestKey || activeStatus !== "pending") {
+      return;
+    }
+    const timer = window.setTimeout(() => {
+      setIsConvertDelayed(true);
+    }, CONVERT_DELAY_WARNING_TIMEOUT);
+    return () => window.clearTimeout(timer);
+  }, [activeStatus, trackedRequestKey]);
   const { maxAmount, convert } = hooks.useConvert({ token: sourceToken?.token });
   const onConvert = async () => {
-    if (loading) {
+    if (loading || activeStatus === "pending" || canQueryConvertHistory && !convertHistory) {
       return;
     }
     setLoading(true);
+    const requestSnapshot = {
+      accountId: accountState.accountId,
+      previousMaxConvertId: convertHistoryRows.reduce(
+        (max, record) => Math.max(max, record.convert_id),
+        0
+      ),
+      sourceToken: sourceToken?.token || "-",
+      sourceAmount: quantity,
+      targetToken: targetToken?.token || "USDC",
+      targetAmount: memoizedOutAmounts
+    };
     return convert({
       amount: Number(quantity),
-      slippage: new utils.Decimal(slippage).div(100).toNumber()
-    }).then(() => {
-      ui.toast.success(t("transfer.convert.completed"));
-      close?.();
-      setQuantity("");
+      slippage: new utils.Decimal(normalizedSlippage).div(100).toNumber()
+    }).then((response) => {
+      const nextTrackedConvert = {
+        request: {
+          ...requestSnapshot,
+          convertId: getConvertIdFromResponse(response)
+        },
+        origin: "submitted"
+      };
+      setTrackedConvert(nextTrackedConvert);
+      setPersistedTrackedConvert(nextTrackedConvert);
+      ui.toast.success(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.ToastTile,
+          {
+            title: t("transfer.convert.request"),
+            subtitle: t("transfer.convert.request.description", {
+              fromAmount: requestSnapshot.sourceAmount,
+              fromToken: requestSnapshot.sourceToken,
+              toAmount: requestSnapshot.targetAmount,
+              toToken: requestSnapshot.targetToken
+            })
+          }
+        )
+      );
+      void refreshConvertHistory();
     }).catch((err) => {
       ui.toast.error(
         err.message?.includes("user rejected") ? t("transfer.convert.failed") : err.message
@@ -7426,6 +7838,9 @@ var useConvertFormScript = (options2) => {
       setLoading(false);
     });
   };
+  const onRefreshConvertStatus = () => {
+    void refreshConvertHistory();
+  };
   const [
     postQuote,
     { data: quoteData, reset: resetQuote, isMutating: isQuoteLoading }
@@ -7438,9 +7853,9 @@ var useConvertFormScript = (options2) => {
       fromToken: sourceToken.token,
       toToken: targetToken.token,
       amount: new utils.Decimal(quantity).toNumber(),
-      slippage: new utils.Decimal(slippage).div(100).toNumber()
+      slippage: new utils.Decimal(normalizedSlippage).div(100).toNumber()
     };
-  }, [quantity, slippage, sourceToken?.token, targetToken?.token]);
+  }, [normalizedSlippage, quantity, sourceToken?.token, targetToken?.token]);
   react.useEffect(() => {
     resetQuote();
     if (!quoteRequest) {
@@ -7477,31 +7892,47 @@ var useConvertFormScript = (options2) => {
     }
     const fromToken = quoteData.fromToken;
     const toToken = quoteData.toToken;
-    if (!fromToken || !toToken || !fromToken.tokenAddress || !toToken.tokenAddress || !fromToken.amount || !toToken.estimatedAmount || !toToken.estimatedValue || !quoteData.gasEstimate || typeof quoteData.expiresAt !== "number") {
+    if (!fromToken || !toToken || !fromToken.tokenAddress || !toToken.tokenAddress || !fromToken.amount || !quoteData.gasEstimate || typeof quoteData.expiresAt !== "number") {
       return false;
     }
-    return quoteData.expiresAt > Date.now();
-  }, [quoteData, quoteRequest]);
+    const targetAmount2 = getQuoteTargetAmount(
+      toToken.estimatedValue,
+      toToken.estimatedAmount,
+      targetToken?.decimals
+    );
+    return targetAmount2 !== "-" && quoteData.expiresAt > Date.now();
+  }, [quoteData, quoteRequest, targetToken?.decimals]);
   react.useEffect(() => {
     if (quoteData && !isQuoteDataMatched) {
       resetQuote();
     }
   }, [isQuoteDataMatched, quoteData, resetQuote]);
+  const quoteTargetAmount = react.useMemo(
+    () => quoteData ? getQuoteTargetAmount(
+      quoteData.toToken.estimatedValue,
+      quoteData.toToken.estimatedAmount,
+      targetToken?.decimals
+    ) : "-",
+    [quoteData, targetToken?.decimals]
+  );
   const memoizedOutAmounts = react.useMemo(() => {
     if (quoteData && !isQuoteLoading && isQuoteDataMatched) {
-      return quoteData.toToken.estimatedValue;
+      return quoteTargetAmount;
     }
     return "-";
-  }, [quoteData, isQuoteDataMatched, isQuoteLoading]);
+  }, [isQuoteDataMatched, isQuoteLoading, quoteData, quoteTargetAmount]);
   const memoizedConvertRate = react.useMemo(() => {
     if (quoteData && quoteRequest && !isQuoteLoading && isQuoteDataMatched) {
-      return calculateQuoteRate(
-        quoteRequest.amount,
-        quoteData.toToken.estimatedValue
-      );
+      return calculateQuoteRate(quoteRequest.amount, quoteTargetAmount);
     }
     return "-";
-  }, [isQuoteDataMatched, isQuoteLoading, quoteData, quoteRequest]);
+  }, [
+    isQuoteDataMatched,
+    isQuoteLoading,
+    quoteData,
+    quoteRequest,
+    quoteTargetAmount
+  ]);
   const memoizedMinimumReceived = react.useMemo(() => {
     if (!quoteData || isQuoteLoading || !isQuoteDataMatched) {
       return "0";
@@ -7511,10 +7942,10 @@ var useConvertFormScript = (options2) => {
       return "0";
     }
     return calculateMinimumReceived(
-      quoteData.toToken.estimatedValue,
+      quoteTargetAmount,
       effectiveSlippage.toString()
     );
-  }, [quoteData, isQuoteDataMatched, isQuoteLoading]);
+  }, [quoteData, isQuoteDataMatched, isQuoteLoading, quoteTargetAmount]);
   react.useEffect(() => {
     if (!quoteData || !quoteRequest || !isQuoteDataMatched) {
       return;
@@ -7545,7 +7976,19 @@ var useConvertFormScript = (options2) => {
     input: Number(quantity),
     token: sourceToken?.token
   });
-  const disabled = !quantity || Number(quantity) === 0;
+  const isCheckingConvertStatus = canQueryConvertHistory && !convertHistory && !convertHistoryError;
+  const hasConvertStatusError = canQueryConvertHistory && !convertHistory && Boolean(convertHistoryError);
+  const disabled = !quantity || Number(quantity) === 0 || isCheckingConvertStatus || hasConvertStatusError || activeStatus === "pending";
+  const targetAmount = effectiveTrackedRequest ? getConvertTargetAmount(effectiveTrackedRequest.targetAmount) : "-";
+  const activeConvertRequest = effectiveTrackedRequest ? {
+    status: activeStatus,
+    sourceToken: effectiveTrackedRequest.sourceToken,
+    sourceAmount: effectiveTrackedRequest.sourceAmount,
+    targetToken: effectiveTrackedRequest.targetToken,
+    targetAmount,
+    receivedAmount: trackedRecord ? getConvertReceivedAmount(trackedRecord) : targetAmount,
+    isDelayed: isConvertDelayed
+  } : void 0;
   const { hasPositions, onSettlePnl } = useSettlePnl();
   return {
     walletName,
@@ -7565,14 +8008,20 @@ var useConvertFormScript = (options2) => {
     hasPositions,
     onSettlePnl,
     networkId,
-    slippage,
-    onSlippageChange: setSlippage,
+    slippage: normalizedSlippage,
+    onSlippageChange: (value) => setSlippage(normalizeConvertSlippage(value)),
     convertRate: memoizedConvertRate,
     minimumReceived: memoizedMinimumReceived,
     outAmounts: memoizedOutAmounts,
     isQuoteLoading,
     currentLTV: currentLtv,
-    nextLTV
+    nextLTV,
+    activeConvertRequest,
+    isRecoveredConvertRequest: Boolean(currentTrackedRequest) && effectiveTrackedConvert?.origin === "recovered" || !currentTrackedRequest && Boolean(latestPendingRequest),
+    isCheckingConvertStatus,
+    hasConvertStatusError,
+    isConvertHistoryRefreshing,
+    onRefreshConvertStatus
   };
 };
 var ConvertDialogId = "ConvertDialogId";
@@ -7581,12 +8030,16 @@ var ConvertFormWidget = (props) => {
   const state = useConvertFormScript(props);
   return /* @__PURE__ */ jsxRuntime.jsx(ConvertFormUI, { ...state });
 };
-ui.registerSimpleDialog(ConvertDialogId, ConvertFormWidget, {
+var ConvertFormModalWidget = (props) => {
+  const { visible } = ui.useModal();
+  return visible ? /* @__PURE__ */ jsxRuntime.jsx(ConvertFormWidget, { ...props }) : null;
+};
+ui.registerSimpleDialog(ConvertDialogId, ConvertFormModalWidget, {
   size: "md",
   classNames: { content: "oui-border oui-border-line-6" },
   title: () => i18n.i18n.t("transfer.convert")
 });
-ui.registerSimpleSheet(ConvertSheetId, ConvertFormWidget, {
+ui.registerSimpleSheet(ConvertSheetId, ConvertFormModalWidget, {
   title: () => i18n.i18n.t("transfer.convert")
 });
 var DepositStatus = (props) => {
@@ -8516,6 +8969,7 @@ exports.YieldBearingReminder = YieldBearingReminder;
 exports.checkIsAccountId = checkIsAccountId;
 exports.feeDecimalsOffset = feeDecimalsOffset;
 exports.getDepositKnownErrorMessage = getDepositKnownErrorMessage;
+exports.getEffectiveConvertStatus = getEffectiveConvertStatus;
 exports.getTransferErrorMessage = getTransferErrorMessage;
 exports.getUSDCToken = getUSDCToken;
 exports.getYieldBearingAsset = getYieldBearingAsset;