@orderly.network/ui-transfer 3.1.9 → 3.1.10

package/dist/index.mjs

@@ -1,8 +1,8 @@
 import { i18n, useTranslation, Trans } from '@orderly.network/i18n';
-import { registerSimpleDialog, registerSimpleSheet, Tabs, TabPanel, ArrowDownSquareFillIcon, ArrowUpSquareFillIcon, ExtensionSlot, ExtensionPositionEnum, toast, Box, Flex, textVariants, 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, useSwapQuote as useSwapQuote$1, 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 { registerSimpleDialog, registerSimpleSheet, Tabs, TabPanel, ArrowDownSquareFillIcon, ArrowUpSquareFillIcon, useModal, ExtensionSlot, ExtensionPositionEnum, toast, Box, Text, Flex, cn, Button, textVariants, ExclamationFillIcon, ArrowLeftRightIcon, WalletIcon, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, ScrollArea, useDocumentDirection, Spinner, Select, Input, inputFormatter, useScreen, modal, Tooltip, ToastTile, CheckedCircleFillIcon, Tips, AlertDialog, EditIcon, ChainIcon, Badge, CaretUpIcon, CaretDownIcon, SimpleDialog, CloseRoundFillIcon, TokenIcon, WarningIcon, SelectItem, ChevronRightIcon, Checkbox, CloseIcon } from '@orderly.network/ui';
+import { forwardRef, useState, isValidElement, useMemo, useCallback, useEffect, useRef } from 'react';
+import { useConfig, useAccount, useAppStore, useTransfer, useSubAccountDataObserver, useSubAccountMaxWithdrawal, useSessionStorage, useEventEmitter, useWalletConnector, useLocalStorage, usePrivateQuery, useConvert, useSwapQuote as useSwapQuote$1, useComputedLTV, useOrderlyContext, useIndexPricesStream, useDeposit, useAssetsHistory, useChains, useMemoizedFn, useWithdraw, useWalletTopic, usePositionStream, useMainTokenStore, useSWR, useTokenInfo, useQuery, useTokensInfo, useHoldingStream, useInternalTransfer, useDebouncedCallback, useTransferHistory, useBalanceTopic } from '@orderly.network/hooks';
+import { zero, Decimal, praseChainIdToNumber, int2hex, toNonExponential, formatWithPrecision, isSolana } from '@orderly.network/utils';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { AccountStatusEnum, ChainNamespace, AssetHistoryStatusEnum, AssetHistorySideEnum, EMPTY_OBJECT, isNativeTokenChecker, ABSTRACT_CHAIN_ID_MAP, nativeTokenAddress } from '@orderly.network/types';
 import { AuthGuard, useAuthGuard } from '@orderly.network/ui-connector';
@@ -1526,6 +1526,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;
@@ -1534,10 +1552,12 @@ var Slippage = (props) => {
   const [open, setOpen] = useState(false);
   const { t } = useTranslation();
   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 = () => {
@@ -1557,7 +1577,7 @@ var Slippage = (props) => {
     }
     const d = new 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());
@@ -1576,17 +1596,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 = 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__ */ jsxs("div", { className: "oui-text-2xs", children: [
     /* @__PURE__ */ jsxs(Flex, { gapX: 1, itemAlign: "center", children: [
       /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 54, children: t("transfer.slippage.slippageTolerance") }),
       /* @__PURE__ */ jsx(
         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"
@@ -1631,7 +1661,17 @@ var Slippage = (props) => {
         }
       )
     ] }),
-    errorMessage && /* @__PURE__ */ jsx(Flex, { mt: 6, children: /* @__PURE__ */ jsx(
+    (props.riskGuidance?.helperText || props.message) && /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: "div",
+        size: "2xs",
+        intensity: 54,
+        className: "oui-mt-3 oui-leading-4",
+        children: props.riskGuidance?.helperText || props.message
+      }
+    ),
+    errorMessage && /* @__PURE__ */ jsx(Flex, { mt: 3, children: /* @__PURE__ */ jsx(
       Text,
       {
         size: "2xs",
@@ -1639,7 +1679,8 @@ var Slippage = (props) => {
         className: "oui-w-full oui-text-center",
         children: errorMessage
       }
-    ) })
+    ) }),
+    !errorMessage && warningMessage && /* @__PURE__ */ jsx(Flex, { mt: 3, children: /* @__PURE__ */ jsx(Text, { as: "div", size: "2xs", color: "warning", className: "oui-leading-4", children: warningMessage }) })
   ] });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -7224,7 +7265,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 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 } = useTranslation();
   const {
     loading,
     disabled,
@@ -7245,8 +7375,26 @@ var ConvertFormUI = (props) => {
     currentLTV,
     nextLTV,
     networkId,
-    balanceRevalidating
+    balanceRevalidating,
+    activeConvertRequest,
+    isCheckingConvertStatus,
+    hasConvertStatusError,
+    isConvertHistoryRefreshing,
+    onRefreshConvertStatus,
+    isRecoveredConvertRequest
   } = props;
+  if (activeConvertRequest && shouldDisplayConvertProgress(
+    activeConvertRequest.status,
+    isRecoveredConvertRequest
+  )) {
+    return /* @__PURE__ */ jsx(
+      ConvertProgressStatus,
+      {
+        request: activeConvertRequest,
+        isRefreshing: isConvertHistoryRefreshing
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(Box, { className: textVariants({ weight: "semibold" }), children: [
     /* @__PURE__ */ jsxs(Box, { className: "oui-mb-6 lg:oui-mb-8", children: [
       /* @__PURE__ */ jsx(Box, { mt: 3, mb: 1, children: /* @__PURE__ */ jsx(
@@ -7290,7 +7438,21 @@ var ConvertFormUI = (props) => {
             targetSymbol: targetToken?.token
           }
         ),
-        /* @__PURE__ */ jsx(Slippage, { value: slippage, onValueChange: onSlippageChange }),
+        /* @__PURE__ */ 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__ */ jsx(
           MinimumReceived,
           {
@@ -7309,17 +7471,117 @@ var ConvertFormUI = (props) => {
         )
       ] })
     ] }),
+    hasConvertStatusError && /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        itemAlign: "center",
+        justify: "between",
+        gap: 3,
+        className: "oui-mb-4 oui-w-full",
+        children: [
+          /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", gap: 2, children: [
+            /* @__PURE__ */ jsx(ExclamationFillIcon, { className: "oui-size-4 oui-shrink-0 oui-text-warning-darken" }),
+            /* @__PURE__ */ jsx(Text, { size: "xs", intensity: 54, children: t("transfer.convert.statusCheckFailed") })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              variant: "outlined",
+              loading: isConvertHistoryRefreshing,
+              onClick: onRefreshConvertStatus,
+              children: t("common.refresh")
+            }
+          )
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx(Flex, { itemAlign: "center", justify: "center", children: /* @__PURE__ */ jsx(
       ConvertAction,
       {
         networkId,
         disabled,
-        loading,
+        loading: loading || isCheckingConvertStatus,
         onConvert
       }
     ) })
   ] });
 };
+var ConvertProgressStatus = ({ request, isRefreshing }) => {
+  const { t } = 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__ */ jsxs(
+    Flex,
+    {
+      direction: "column",
+      itemAlign: "center",
+      gap: 6,
+      className: "oui-w-full oui-px-4 oui-py-6",
+      children: [
+        /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", justify: "center", gap: 3, className: "oui-w-full", children: [
+          isCompleted && /* @__PURE__ */ jsx(CheckedCircleFillIcon, { className: "oui-size-4 oui-text-success" }),
+          !isPending && !isCompleted && /* @__PURE__ */ jsx(ExclamationFillIcon, { className: "oui-size-4 oui-text-danger" }),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "sm",
+              weight: "semibold",
+              intensity: isFailed ? void 0 : 80,
+              color: isFailed ? "danger" : void 0,
+              className: "oui-text-center",
+              children: statusLabel
+            }
+          ),
+          isPending && !isDelayed && /* @__PURE__ */ jsx(
+            Flex,
+            {
+              itemAlign: "center",
+              justify: "center",
+              className: "oui-size-4 oui-shrink-0",
+              children: /* @__PURE__ */ jsx(Spinner, { size: "sm", className: "oui-block" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            as: "div",
+            size: "xs",
+            intensity: 54,
+            className: "oui-w-full oui-text-center",
+            children: description
+          }
+        )
+      ]
+    }
+  );
+};
 var splitTokenBySymbol = (items) => {
   return items.reduce(
     (result, item) => {
@@ -7372,17 +7634,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 Decimal(estimatedAmount).div(new Decimal(10).pow(decimals)).toString();
+  }
+  return "-";
+};
 var calculateQuoteRate = (inputAmount, estimatedUsdcValue) => new Decimal(estimatedUsdcValue).div(inputAmount).toString();
 var calculateMinimumReceived = (estimatedUsdcValue, slippageLimitPercent) => new Decimal(estimatedUsdcValue).mul(new Decimal(1).minus(new 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 } = useTranslation();
   const [loading, setLoading] = useState(false);
+  const [persistedTrackedConvert, setPersistedTrackedConvert] = useSessionStorage(
+    ORDERLY_TRACKED_CONVERT_KEY,
+    null
+  );
+  const [trackedConvert, setTrackedConvert] = useState(() => persistedTrackedConvert ?? void 0);
+  const [isConvertDelayed, setIsConvertDelayed] = useState(false);
+  const effectiveTrackedConvert = trackedConvert ?? persistedTrackedConvert;
+  const trackedRequest = effectiveTrackedConvert?.request;
+  const ee = useEventEmitter();
   const config = useConfig();
   const networkId = config.get("networkId");
   const [quantity, setQuantity] = useState("");
@@ -7403,19 +7689,145 @@ var useConvertFormScript = (options2) => {
     ORDERLY_CONVERT_SLIPPAGE_KEY,
     0.5
   );
+  const normalizedSlippage = normalizeConvertSlippage(Number(slippage));
+  useEffect(() => {
+    if (normalizedSlippage !== slippage) {
+      setSlippage(normalizedSlippage);
+    }
+  }, [normalizedSlippage, setSlippage, slippage]);
+  const { state: accountState } = useAccount();
+  const canQueryConvertHistory = accountState.status >= AccountStatusEnum.EnableTrading || accountState.status === AccountStatusEnum.EnableTradingWithoutConnected;
+  const currentTrackedRequest = getTrackedConvertRequestForAccount(
+    trackedRequest,
+    accountState.accountId
+  );
+  useEffect(() => {
+    if (!trackedConvert && persistedTrackedConvert) {
+      setTrackedConvert(persistedTrackedConvert);
+    }
+  }, [persistedTrackedConvert, trackedConvert]);
+  useEffect(() => {
+    setIsConvertDelayed(false);
+  }, [accountState.accountId]);
+  const {
+    data: convertHistory,
+    error: convertHistoryError,
+    isValidating: isConvertHistoryRefreshing,
+    mutate: refreshConvertHistory
+  } = 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 = useMemo(
+    () => findLatestPendingConvertRecord(convertHistoryRows),
+    [convertHistoryRows]
+  );
+  const latestPendingRequest = useMemo(() => {
+    if (!latestPendingRecord) {
+      return void 0;
+    }
+    return {
+      ...createTrackedConvertRequest(latestPendingRecord),
+      accountId: accountState.accountId
+    };
+  }, [accountState.accountId, latestPendingRecord]);
+  useEffect(() => {
+    if (!currentTrackedRequest && latestPendingRequest) {
+      setTrackedConvert({
+        request: latestPendingRequest,
+        origin: "recovered"
+      });
+    }
+  }, [currentTrackedRequest, latestPendingRequest]);
+  const effectiveTrackedRequest = currentTrackedRequest ?? latestPendingRequest;
+  useEffect(() => {
+    const handleConvertChange = () => {
+      void refreshConvertHistory();
+    };
+    ee.on("assetconvert:changed", handleConvertChange);
+    return () => {
+      ee.off("assetconvert:changed", handleConvertChange);
+    };
+  }, [ee, refreshConvertHistory]);
+  const trackedRecord = 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;
+  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;
+  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 } = 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 Decimal(slippage).div(100).toNumber()
-    }).then(() => {
-      toast.success(t("transfer.convert.completed"));
-      close?.();
-      setQuantity("");
+      slippage: new Decimal(normalizedSlippage).div(100).toNumber()
+    }).then((response) => {
+      const nextTrackedConvert = {
+        request: {
+          ...requestSnapshot,
+          convertId: getConvertIdFromResponse(response)
+        },
+        origin: "submitted"
+      };
+      setTrackedConvert(nextTrackedConvert);
+      setPersistedTrackedConvert(nextTrackedConvert);
+      toast.success(
+        /* @__PURE__ */ jsx(
+          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) => {
       toast.error(
         err.message?.includes("user rejected") ? t("transfer.convert.failed") : err.message
@@ -7424,6 +7836,9 @@ var useConvertFormScript = (options2) => {
       setLoading(false);
     });
   };
+  const onRefreshConvertStatus = () => {
+    void refreshConvertHistory();
+  };
   const [
     postQuote,
     { data: quoteData, reset: resetQuote, isMutating: isQuoteLoading }
@@ -7436,9 +7851,9 @@ var useConvertFormScript = (options2) => {
       fromToken: sourceToken.token,
       toToken: targetToken.token,
       amount: new Decimal(quantity).toNumber(),
-      slippage: new Decimal(slippage).div(100).toNumber()
+      slippage: new Decimal(normalizedSlippage).div(100).toNumber()
     };
-  }, [quantity, slippage, sourceToken?.token, targetToken?.token]);
+  }, [normalizedSlippage, quantity, sourceToken?.token, targetToken?.token]);
   useEffect(() => {
     resetQuote();
     if (!quoteRequest) {
@@ -7475,31 +7890,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]);
   useEffect(() => {
     if (quoteData && !isQuoteDataMatched) {
       resetQuote();
     }
   }, [isQuoteDataMatched, quoteData, resetQuote]);
+  const quoteTargetAmount = useMemo(
+    () => quoteData ? getQuoteTargetAmount(
+      quoteData.toToken.estimatedValue,
+      quoteData.toToken.estimatedAmount,
+      targetToken?.decimals
+    ) : "-",
+    [quoteData, targetToken?.decimals]
+  );
   const memoizedOutAmounts = useMemo(() => {
     if (quoteData && !isQuoteLoading && isQuoteDataMatched) {
-      return quoteData.toToken.estimatedValue;
+      return quoteTargetAmount;
     }
     return "-";
-  }, [quoteData, isQuoteDataMatched, isQuoteLoading]);
+  }, [isQuoteDataMatched, isQuoteLoading, quoteData, quoteTargetAmount]);
   const memoizedConvertRate = 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 = useMemo(() => {
     if (!quoteData || isQuoteLoading || !isQuoteDataMatched) {
       return "0";
@@ -7509,10 +7940,10 @@ var useConvertFormScript = (options2) => {
       return "0";
     }
     return calculateMinimumReceived(
-      quoteData.toToken.estimatedValue,
+      quoteTargetAmount,
       effectiveSlippage.toString()
     );
-  }, [quoteData, isQuoteDataMatched, isQuoteLoading]);
+  }, [quoteData, isQuoteDataMatched, isQuoteLoading, quoteTargetAmount]);
   useEffect(() => {
     if (!quoteData || !quoteRequest || !isQuoteDataMatched) {
       return;
@@ -7543,7 +7974,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,
@@ -7563,14 +8006,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";
@@ -7579,12 +8028,16 @@ var ConvertFormWidget = (props) => {
   const state = useConvertFormScript(props);
   return /* @__PURE__ */ jsx(ConvertFormUI, { ...state });
 };
-registerSimpleDialog(ConvertDialogId, ConvertFormWidget, {
+var ConvertFormModalWidget = (props) => {
+  const { visible } = useModal();
+  return visible ? /* @__PURE__ */ jsx(ConvertFormWidget, { ...props }) : null;
+};
+registerSimpleDialog(ConvertDialogId, ConvertFormModalWidget, {
   size: "md",
   classNames: { content: "oui-border oui-border-line-6" },
   title: () => i18n.t("transfer.convert")
 });
-registerSimpleSheet(ConvertSheetId, ConvertFormWidget, {
+registerSimpleSheet(ConvertSheetId, ConvertFormModalWidget, {
   title: () => i18n.t("transfer.convert")
 });
 var DepositStatus = (props) => {
@@ -8480,6 +8933,6 @@ var DepositStatusWidget = (props) => {
   return /* @__PURE__ */ jsx(DepositStatus, { ...state, ...props });
 };
 
-export { ActionButton, AvailableQuantity, BrokerWallet, ChainSelect, ConvertFormUI, ConvertFormWidget, DEPOSIT_ERROR_CODE_MAP, DepositAction, DepositAndWithdraw, DepositAndWithdrawWithDialogId, DepositAndWithdrawWithSheetId, DepositForm, DepositFormWidget, DepositStatus, DepositStatusWidget, ExchangeDivider, Fee, InjectableDepositAndWithdraw, QuantityInput, SwapCoin, TransferDialogId, TransferForm, TransferFormWidget, TransferSheetId, TransferWidget, Web3Wallet, WithdrawForm, WithdrawFormWidget, WithdrawTo, YIELD_BEARING_ASSETS, YieldBearingReminder, checkIsAccountId, feeDecimalsOffset, getDepositKnownErrorMessage, getTransferErrorMessage, getUSDCToken, getYieldBearingAsset, isYieldBearingAsset, sortTokensWithUSDCFirst, useConvertFormScript as useConvertForm, useDepositFormScript, useDepositStatusScript, useTransferFormScript, useWithdrawFormScript };
+export { ActionButton, AvailableQuantity, BrokerWallet, ChainSelect, ConvertFormUI, ConvertFormWidget, DEPOSIT_ERROR_CODE_MAP, DepositAction, DepositAndWithdraw, DepositAndWithdrawWithDialogId, DepositAndWithdrawWithSheetId, DepositForm, DepositFormWidget, DepositStatus, DepositStatusWidget, ExchangeDivider, Fee, InjectableDepositAndWithdraw, QuantityInput, SwapCoin, TransferDialogId, TransferForm, TransferFormWidget, TransferSheetId, TransferWidget, Web3Wallet, WithdrawForm, WithdrawFormWidget, WithdrawTo, YIELD_BEARING_ASSETS, YieldBearingReminder, checkIsAccountId, feeDecimalsOffset, getDepositKnownErrorMessage, getEffectiveConvertStatus, getTransferErrorMessage, getUSDCToken, getYieldBearingAsset, isYieldBearingAsset, sortTokensWithUSDCFirst, useConvertFormScript as useConvertForm, useDepositFormScript, useDepositStatusScript, useTransferFormScript, useWithdrawFormScript };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map