@orderly.network/ui-transfer 3.1.11 → 3.1.12-alpha.0

package/dist/index.d.mts

@@ -412,6 +412,12 @@ type QuantityInputProps = {
     tokenShowCaret?: boolean;
     balancesRevalidating?: boolean;
     showBalance?: boolean;
+    /**
+     * Token label display mode.
+     * - `false` (default): platform-side Orderly account assets — symbol only
+     * - `true`: wallet-side chain assets — `display_name || symbol`
+     */
+    showDisplayName?: boolean;
 } & Omit<InputProps, "onClear" | "suffix" | "onValueChange">;
 declare const QuantityInput: FC<QuantityInputProps>;
 
@@ -423,6 +429,12 @@ type AvailableQuantityProps = {
     loading?: boolean;
     tooltipContent?: React.ReactNode;
     notional?: number;
+    /**
+     * Token label display mode.
+     * - `false` (default): platform-side Orderly account assets — symbol only
+     * - `true`: wallet-side chain assets — `display_name || symbol`
+     */
+    showDisplayName?: boolean;
 };
 declare const AvailableQuantity: FC<AvailableQuantityProps>;
 

package/dist/index.d.ts

@@ -412,6 +412,12 @@ type QuantityInputProps = {
     tokenShowCaret?: boolean;
     balancesRevalidating?: boolean;
     showBalance?: boolean;
+    /**
+     * Token label display mode.
+     * - `false` (default): platform-side Orderly account assets — symbol only
+     * - `true`: wallet-side chain assets — `display_name || symbol`
+     */
+    showDisplayName?: boolean;
 } & Omit<InputProps, "onClear" | "suffix" | "onValueChange">;
 declare const QuantityInput: FC<QuantityInputProps>;
 
@@ -423,6 +429,12 @@ type AvailableQuantityProps = {
     loading?: boolean;
     tooltipContent?: React.ReactNode;
     notional?: number;
+    /**
+     * Token label display mode.
+     * - `false` (default): platform-side Orderly account assets — symbol only
+     * - `true`: wallet-side chain assets — `display_name || symbol`
+     */
+    showDisplayName?: boolean;
 };
 declare const AvailableQuantity: FC<AvailableQuantityProps>;
 

package/dist/index.js

@@ -16,7 +16,6 @@ var uiChainSelector = require('@orderly.network/ui-chain-selector');
 var web3_js = require('@solana/web3.js');
 var ethers = require('ethers');
 var pluginCore = require('@orderly.network/plugin-core');
-var defaultSolanaAdapter = require('@orderly.network/default-solana-adapter');
 
 // src/components/depositForm/depositForm.ui.tsx
 var useLtvScript = () => {
@@ -242,13 +241,19 @@ var AvailableTooltipMessage = ({
   return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 80, children: t("transfer.withdraw.available.tooltip", { amount: amountText }) });
 };
 var AvailableQuantity = (props) => {
-  const { quantity, maxQuantity, token, loading } = props;
+  const {
+    quantity,
+    maxQuantity,
+    token,
+    loading,
+    showDisplayName = false
+  } = props;
   const { t } = i18n.useTranslation();
   const { isMobile } = ui.useScreen();
   const dir = ui.useDocumentDirection();
   const isRTL = dir === "rtl";
   const { getIndexPrice } = hooks.useIndexPricesStream();
-  const name = token?.display_name || token?.symbol || "";
+  const name = showDisplayName ? token?.display_name || token?.symbol || "" : token?.symbol || "";
   const dp = token?.precision ?? token?.decimals ?? 2;
   const notional = react.useMemo(() => {
     if (props.notional !== void 0 && props.notional !== null) {
@@ -916,7 +921,8 @@ var useExclusiveDepositOptions = (params) => {
             chainId,
             chainName: chain?.network_infos?.name ?? `Chain ${chainId}`,
             explorerUrl: chain?.network_infos?.explorer_base_url ?? "",
-            tokenSymbol: token.token
+            tokenSymbol: token.token,
+            displayName: detail.display_name || token.token
           });
         }
       }
@@ -951,7 +957,7 @@ var useExclusiveDepositOptions = (params) => {
     for (const combo of combos) {
       if (combo.chainId === chainId && !seen.has(combo.tokenSymbol)) {
         seen.add(combo.tokenSymbol);
-        result.push({ label: combo.tokenSymbol, value: combo.tokenSymbol });
+        result.push({ label: combo.displayName, value: combo.tokenSymbol });
       }
     }
     result.sort((a, b) => {
@@ -1378,6 +1384,7 @@ var QuantityInput = (props) => {
     tokenShowCaret,
     balancesRevalidating,
     showBalance,
+    showDisplayName = false,
     ...rest
   } = props;
   const { t } = i18n.useTranslation();
@@ -1385,6 +1392,7 @@ var QuantityInput = (props) => {
   const inputRef = react.useRef(null);
   const [open, setOpen] = react.useState(false);
   const [width, setWidth] = react.useState(0);
+  const getTokenLabel = (tokenInfo) => showDisplayName ? tokenInfo.display_name || tokenInfo.symbol : tokenInfo.symbol;
   const tokenOptions = react.useMemo(() => {
     return tokens.map((token2) => {
       const currentToken = vaultBalanceList?.find(
@@ -1393,17 +1401,17 @@ var QuantityInput = (props) => {
       const insufficientBalance = currentToken ? new utils.Decimal(currentToken.balance ?? 0).lt(value ? Number(value) : 0) : false;
       return {
         ...token2,
-        name: token2.display_name || token2.symbol,
+        name: getTokenLabel(token2),
         insufficientBalance
       };
     });
-  }, [tokens, value, vaultBalanceList]);
+  }, [tokens, value, vaultBalanceList, showDisplayName]);
   react.useEffect(() => {
     const rect = inputRef?.current?.getBoundingClientRect();
     setWidth(rect?.width || 0);
   }, [inputRef]);
   const _onTokenChange = (value2) => {
-    const find = tokens.find((item) => item.symbol === value2);
+    const find = tokens.find((item) => getTokenLabel(item) === value2) ?? tokens.find((item) => item.symbol === value2);
     if (find) {
       onTokenChange?.(find);
     }
@@ -1432,6 +1440,7 @@ var QuantityInput = (props) => {
     /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-absolute oui-top-0", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 36, children: label || t("common.quantity") }) }),
     loading && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-absolute oui-bottom-1", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, { size: "sm" }) })
   ] });
+  const tokenLabel = token ? getTokenLabel(token) : void 0;
   const suffix = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-absolute oui-end-0", children: /* @__PURE__ */ jsxRuntime.jsx(
     ui.Select.tokens,
     {
@@ -1440,7 +1449,7 @@ var QuantityInput = (props) => {
       disabled: rest.disabled,
       variant: "text",
       tokens: tokenOptions,
-      value: token?.display_name || token?.symbol,
+      value: tokenLabel,
       size: rest.size,
       onValueChange: _onTokenChange,
       showIcon: true,
@@ -2060,7 +2069,7 @@ var DepositForm = (props) => {
         ConvertRate,
         {
           sourceSymbol: sourceToken?.display_name || sourceToken?.symbol,
-          targetSymbol: targetToken?.display_name || targetToken?.symbol,
+          targetSymbol: targetToken?.symbol,
           precision: targetToken?.precision,
           swapPrice,
           swapPriceInUSD
@@ -2153,7 +2162,8 @@ var DepositForm = (props) => {
                       tokenValueFormatter: showSourceDepositCap ? tokenValueFormatter : void 0,
                       disabled: !props.isLoggedIn,
                       balancesRevalidating: batchBalancesRevalidating,
-                      showBalance: true
+                      showBalance: true,
+                      showDisplayName: true
                     }
                   )
                 ] }),
@@ -2167,7 +2177,8 @@ var DepositForm = (props) => {
                     loading: balanceRevalidating,
                     onClick: () => {
                       onQuantityChange(maxDepositAmount);
-                    }
+                    },
+                    showDisplayName: true
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -6520,7 +6531,8 @@ var WithdrawForm = (props) => {
                           },
                           token: sourceToken,
                           value: props.showQty,
-                          readOnly: true
+                          readOnly: true,
+                          showDisplayName: true
                         }
                       )
                     ]
@@ -8189,58 +8201,173 @@ var Dot = (props) => {
     }
   );
 };
-var blockCount = 5;
+var blockSpan = 25;
+var maxAttempts = 2;
 async function getEvmBlockTime(chain) {
   const provider = new ethers.ethers.JsonRpcProvider(
     chain.network_infos.public_rpc_url
   );
-  const latest = await provider.getBlockNumber();
-  const blocks = await Promise.all(
-    Array.from({ length: blockCount }, (_, i) => provider.getBlock(latest - i))
-  );
-  const timestamps = blocks.filter((b) => b?.timestamp != null).map((b) => Number(b?.timestamp));
-  if (timestamps.length < 2) {
+  let lastError;
+  try {
+    for (let attempt = 0; attempt < maxAttempts; attempt++) {
+      try {
+        const head = await provider.getBlock("latest");
+        if (head?.timestamp == null) {
+          continue;
+        }
+        const tail = await provider.getBlock(head.number - blockSpan);
+        if (tail?.timestamp == null) {
+          continue;
+        }
+        const elapsed = Number(head.timestamp) - Number(tail.timestamp);
+        if (elapsed > 0) {
+          return elapsed / blockSpan;
+        }
+      } catch (error) {
+        lastError = error;
+      }
+    }
+    console.error(
+      "getEvmBlockTime failed",
+      chain.network_infos.chain_id,
+      lastError ?? "no usable block timestamps"
+    );
     return 0;
+  } finally {
+    provider.destroy();
   }
-  let sum = 0;
-  for (let i = 0; i < timestamps.length - 1; i++) {
-    const diff = timestamps[i] - timestamps[i + 1];
-    sum += diff;
-  }
-  return sum / (timestamps.length - 1);
 }
-async function getSolanaBlockTime(chain, wallet) {
-  if (!wallet) {
-    return 0;
-  }
-  const walletAdapter = new defaultSolanaAdapter.DefaultSolanaWalletAdapter();
-  walletAdapter.active({
-    address: wallet.accounts[0].address,
-    chain: { id: chain.network_infos.chain_id },
-    provider: wallet.provider
-  });
-  const samples = await walletAdapter.connection.getRecentPerformanceSamples(60);
+var SAMPLE_LIMIT = 60;
+var SOLANA_RPC_PROXY_PATH = "/v1/solana-rpc-proxy";
+var RPC_TIMEOUT_MS = 8e3;
+function averageBlockTimeFromSamples(samples) {
   let totalBlockTime = 0;
   let validSamples = 0;
   for (const sample of samples) {
     if (sample.numSlots > 0 && sample.samplePeriodSecs > 0) {
-      const blockTime = sample.samplePeriodSecs / sample.numSlots;
-      totalBlockTime += blockTime;
+      totalBlockTime += sample.samplePeriodSecs / sample.numSlots;
       validSamples++;
     }
   }
+  if (validSamples === 0) {
+    return 0;
+  }
   return totalBlockTime / validSamples;
 }
+async function fetchBlockTime(connection) {
+  const samples = await connection.getRecentPerformanceSamples(SAMPLE_LIMIT);
+  return averageBlockTimeFromSamples(samples);
+}
+function createConnection(url, options2 = {}) {
+  return new web3_js.Connection(url, {
+    commitment: "confirmed",
+    // Avoid ~15s backoff on 429; fail fast and let the caller return 0.
+    disableRetryOnRateLimit: true,
+    fetch: (input, init) => fetch(input, { ...init, signal: AbortSignal.timeout(RPC_TIMEOUT_MS) }),
+    ...options2
+  });
+}
+function createOrderlyProxyConnection() {
+  const account = core.SimpleDI.get("account");
+  if (!account?.apiBaseUrl || !account.accountId) {
+    return null;
+  }
+  if (!account.keyStore?.getOrderlyKey()) {
+    return null;
+  }
+  return createConnection(`${account.apiBaseUrl}${SOLANA_RPC_PROXY_PATH}`, {
+    // web3.js only wraps fetchMiddleware in a sync try/catch and treats the
+    // 3rd arg as a `next` callback (not fetch). An async throw would hang the
+    // request forever, so always invoke `next` and never return a rejected promise.
+    fetchMiddleware: (info, init, next) => {
+      void (async () => {
+        try {
+          const payload = {
+            url: SOLANA_RPC_PROXY_PATH,
+            method: init?.method ?? "POST",
+            data: JSON.parse(init?.body || "{}")
+          };
+          const signature = await account.signer.sign(payload, utils.getTimestamp());
+          next(info, {
+            ...init,
+            headers: {
+              ...init?.headers,
+              ...signature,
+              "orderly-account-id": account.accountId
+            }
+          });
+        } catch (error) {
+          console.error("solana-rpc-proxy sign failed", error);
+          next(info, init);
+        }
+      })();
+    }
+  });
+}
+async function getSolanaBlockTime(chain) {
+  const chainId = Number(chain.network_infos.chain_id);
+  try {
+    if (chainId === types.SOLANA_MAINNET_CHAINID) {
+      const connection = createOrderlyProxyConnection();
+      if (!connection) {
+        return 0;
+      }
+      return await fetchBlockTime(connection);
+    }
+    if (chainId === types.SOLANA_TESTNET_CHAINID) {
+      const rpcUrl = chain.network_infos.public_rpc_url || types.SolanaDevnetChainInfo.public_rpc_url;
+      return await fetchBlockTime(createConnection(rpcUrl));
+    }
+    return 0;
+  } catch (error) {
+    console.error("getSolanaBlockTime failed", chainId, error);
+    return 0;
+  }
+}
 
 // src/contract/getBlockTime.ts
 async function getBlockTime(inputs) {
-  const { chainId, chain, wallet } = inputs;
+  const { chain } = inputs;
+  const chainId = Number(inputs.chainId);
   if (utils.isSolana(chainId)) {
-    return getSolanaBlockTime(chain, wallet);
+    return getSolanaBlockTime(chain);
   }
   return getEvmBlockTime(chain);
 }
 
+// src/contract/abi/endpointV2Abi.json
+var endpointV2Abi_default = [
+  {
+    inputs: [
+      {
+        internalType: "address",
+        name: "receiver",
+        type: "address"
+      },
+      {
+        internalType: "uint32",
+        name: "srcEid",
+        type: "uint32"
+      }
+    ],
+    name: "getReceiveLibrary",
+    outputs: [
+      {
+        internalType: "address",
+        name: "lib",
+        type: "address"
+      },
+      {
+        internalType: "bool",
+        name: "isDefault",
+        type: "bool"
+      }
+    ],
+    stateMutability: "view",
+    type: "function"
+  }
+];
+
 // src/contract/abi/getAppUlnConfigAbi.json
 var getAppUlnConfigAbi_default = [
   {
@@ -8326,6 +8453,8 @@ var CHAIN_ID_TO_ENDPOINT_ID = {
   // Manta Pacific Mainnet
   5e3: 30181,
   // Mantle Mainnet
+  5003: 40246,
+  // Mantle Sepolia Testnet
   81457: 30243,
   // Blast Mainnet
   252: 30255,
@@ -8463,6 +8592,8 @@ var CHAIN_ID_TO_ENDPOINT_ID = {
   // Orderly
   291: 30213,
   // Orderly Mainnet
+  4460: 40200,
+  // Orderly Testnet
   // CoreDAO
   1116: 30153,
   // CoreDAO Mainnet
@@ -8650,6 +8781,8 @@ var CHAIN_ID_TO_ENDPOINT_ID = {
   // X Layer
   196: 30274,
   // X Layer Mainnet
+  1952: 40416,
+  // X Layer Testnet (xlayer2-testnet)
   // XChain
   94524: 30291,
   // XChain Mainnet
@@ -8699,31 +8832,168 @@ var CHAIN_ID_TO_ENDPOINT_ID = {
   // Tron
   728126428: 30420,
   // Tron Mainnet
-  2494104990: 40420
+  2494104990: 40420,
   // Tron Testnet
+  // Newer mainnets (LayerZero metadata)
+  2044: 30148,
+  // Shrapnel Subnet Mainnet
+  2355: 30379,
+  // Silicon Mainnet
+  5031: 30380,
+  // Somnia Mainnet
+  484: 30381,
+  // Camp Mainnet
+  6985385: 30382,
+  // Humanity Mainnet
+  9745: 30383,
+  // Plasma Mainnet
+  9069: 30384,
+  // Apex Fusion Nexus Mainnet
+  202110: 30385,
+  // Dinari Mainnet
+  1408: 30386,
+  // zkVerify Mainnet
+  16661: 30388,
+  // 0G Mainnet
+  10088: 30389,
+  // GateLayer Mainnet
+  143: 30390,
+  // Monad Mainnet
+  5064014: 30391,
+  // Ethereal Mainnet
+  1612: 30392,
+  // Openledger Mainnet
+  97477: 30393,
+  // Doma Mainnet
+  1776: 30394,
+  // Injective EVM Mainnet
+  988: 30396,
+  // Stable Mainnet
+  261131: 30397,
+  // Zama Mainnet
+  4326: 30398,
+  // MegaETH Mainnet
+  26514: 30399,
+  // Horizen Mainnet
+  4153: 30401,
+  // Rise Mainnet
+  151: 30402,
+  // Redbelly Mainnet
+  4114: 30403,
+  // Citrea Mainnet
+  2288: 30404,
+  // Moca Mainnet
+  2366: 30406,
+  // Kite Mainnet
+  1672: 30407,
+  // Pharos Mainnet
+  3282: 30408,
+  // Irys Mainnet
+  88888: 30409,
+  // Chiliz Mainnet
+  4217: 30410,
+  // Tempo Mainnet
+  685689: 30412,
+  // Gensyn Mainnet
+  904: 30413,
+  // Ault Mainnet
+  47763: 30414,
+  // Neox Mainnet
+  72957: 30415,
+  // Rayls Mainnet
+  4663: 30416,
+  // Robinhood Chain Mainnet
+  46630: 40451,
+  // Robinhood Chain Testnet
+  5042: 30417,
+  // Arc Mainnet
+  36900: 30418,
+  // ADI Mainnet (permissionless LayerZero deployment, not in official docs; verified on-chain via RelayV2 endpoint())
+  99999: 40462,
+  // ADI Network AB Testnet
+  222: 30464,
+  // Opn Mainnet
+  6714: 30465,
+  // Anubis Mainnet
+  4352: 30466,
+  // MemeCore Mainnet
+  177: 30467
+  // HashKey Mainnet
 };
 function getEndpointId(chainId) {
   return CHAIN_ID_TO_ENDPOINT_ID[chainId];
 }
 
+// src/contract/layerzeroConfig.ts
+var ORDERLY_RPC_URL = {
+  mainnet: "https://rpc.orderly.network",
+  testnet: "https://testnet-rpc.orderly.org"
+};
+var ORDERLY_ENDPOINT_V2 = {
+  mainnet: "0x1a44076050125825900e736c501f859c50fE728c",
+  testnet: "0x6EDCE65403992e310A62460808c4b910D972f10f"
+};
+var ORDERLY_RELAY_OAPP = {
+  mainnet: "0x461C12FBa639303Da045255dd32eEa7E38AC69b0",
+  testnet: "0xe907d027F6E62794021b9839B4D234618d11Ebab"
+};
+var ORDERLY_SOL_PEER_OAPP = {
+  mainnet: "0xCecAe061aa078e13b5e70D5F9eCee90a3F2B6AeA",
+  testnet: "0x5Bf771A65d057e778C5f0Ed52A0003316f94322D"
+};
+function getOrderlyNetworkKey(isMainnet) {
+  return isMainnet ? "mainnet" : "testnet";
+}
+
 // src/contract/getChainConfirmations.ts
 async function getChainConfirmations(chain) {
   const chainId = chain.network_infos.chain_id;
   const isMainnet = chain.network_infos.mainnet;
-  const publicRpcUrl = isMainnet ? "https://rpc.orderly.network" : "https://testnet-rpc.orderly.org";
-  const contractAddress = isMainnet ? "0xCFf08a35A5f27F306e2DA99ff198dB90f13DEF77" : "0x3013C32e5F45E69ceA9baD4d96786704C2aE148c";
-  const endpointId = getEndpointId(chainId);
-  const address = "0x0000000000000000000000000000000000000000";
-  const provider = new ethers.ethers.JsonRpcProvider(publicRpcUrl);
-  const contract = new ethers.ethers.Contract(
-    contractAddress,
-    // full abi: https://explorer-orderly-mainnet-0.t.conduit.xyz/address/0xCFf08a35A5f27F306e2DA99ff198dB90f13DEF77?tab=contract_abi
-    // this only need to use getAppUlnConfig abi, other functions are not needed
-    getAppUlnConfigAbi_default,
-    provider
-  );
-  const result = await contract.getAppUlnConfig(address, endpointId);
-  return Number(result.confirmations || 0);
+  const networkKey = getOrderlyNetworkKey(isMainnet);
+  const sourceEid = getEndpointId(chainId);
+  if (!sourceEid) {
+    return 0;
+  }
+  const oapp = resolveDepositOApp(chainId, networkKey);
+  const provider = new ethers.ethers.JsonRpcProvider(ORDERLY_RPC_URL[networkKey]);
+  try {
+    const endpoint = new ethers.ethers.Contract(
+      ORDERLY_ENDPOINT_V2[networkKey],
+      endpointV2Abi_default,
+      provider
+    );
+    const [receiveLibAddress] = await endpoint.getReceiveLibrary(
+      oapp,
+      sourceEid
+    );
+    if (!receiveLibAddress || receiveLibAddress === ethers.ethers.ZeroAddress) {
+      return 0;
+    }
+    const receiveLib = new ethers.ethers.Contract(
+      receiveLibAddress,
+      getAppUlnConfigAbi_default,
+      provider
+    );
+    const config = await receiveLib.getAppUlnConfig(oapp, sourceEid);
+    const confirmations = Number(config.confirmations || 0);
+    if (confirmations > 0) {
+      return confirmations;
+    }
+    const defaultConfig = await receiveLib.getAppUlnConfig(
+      ethers.ethers.ZeroAddress,
+      sourceEid
+    );
+    return Number(defaultConfig.confirmations || 0);
+  } catch (error) {
+    console.error("getChainConfirmations error", error);
+    return 0;
+  }
+}
+function resolveDepositOApp(chainId, networkKey) {
+  if (utils.isSolana(chainId)) {
+    return ORDERLY_SOL_PEER_OAPP[networkKey];
+  }
+  return ORDERLY_RELAY_OAPP[networkKey];
 }
 
 // src/contract/useTransactionTime.ts
@@ -8733,7 +9003,6 @@ var useTransactionTime = (chainId) => {
   const timeMap = react.useRef({});
   const confirmationsMap = react.useRef({});
   const [, { findByChainId }] = hooks.useChains();
-  const { wallet } = hooks.useWalletConnector();
   const chain = react.useMemo(() => {
     if (!chainId) {
       return;
@@ -8742,7 +9011,7 @@ var useTransactionTime = (chainId) => {
     return findByChainId(id);
   }, [chainId, findByChainId]);
   react.useEffect(() => {
-    if (!chain || !wallet) {
+    if (!chain) {
       return;
     }
     const chainId2 = chain.network_infos.chain_id;
@@ -8751,8 +9020,7 @@ var useTransactionTime = (chainId) => {
     } else {
       getBlockTime({
         chainId: chainId2,
-        chain,
-        wallet
+        chain
       }).then((time) => {
         console.log("average block time", chainId2, time);
         setBlockTime(time);
@@ -8772,7 +9040,7 @@ var useTransactionTime = (chainId) => {
         console.error("getChainConfirmations error", error);
       });
     }
-  }, [chain, wallet]);
+  }, [chain]);
   const transactionTime = react.useMemo(() => {
     if (blockTime && confirmations) {
       return blockTime * confirmations;
@@ -8921,8 +9189,13 @@ function useDepositStatusScript() {
     onClose
   };
 }
+var MIN_ESTIMATED_SECONDS = 30;
+var MAX_ESTIMATED_SECONDS = 30 * 60;
 function formatEstimatedTime(totalSeconds) {
-  const sec = Math.max(30, totalSeconds);
+  const sec = Math.min(
+    MAX_ESTIMATED_SECONDS,
+    Math.max(MIN_ESTIMATED_SECONDS, totalSeconds)
+  );
   let minutes = Math.floor(sec / 60);
   let seconds = sec % 60;
   if (seconds > 0 && seconds <= 30) {