@rango-dev/widget-embedded 0.12.1-next.3 → 0.12.1-next.30

package/src/utils/swap.ts

@@ -1,26 +1,42 @@
-import BigNumber from 'bignumber.js';
-import {
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { LoadingStatus } from '../store/meta';
+import type { ConnectedWallet } from '../store/wallets';
+import type { ConvertedToken, SwapButtonState, Wallet } from '../types';
+import type {
+  PendingSwap,
+  PendingSwapStep,
+} from '@rango-dev/queue-manager-rango-preset';
+import type { WalletType } from '@rango-dev/wallets-shared';
+import type {
   BestRouteRequest,
   BestRouteResponse,
+  BlockchainMeta,
   RecommendedSlippage,
   SwapResult,
   Token,
 } from 'rango-sdk';
+
 import { i18n } from '@lingui/core';
-import { ConnectedWallet } from '../store/wallets';
+import { PendingSwapNetworkStatus } from '@rango-dev/queue-manager-rango-preset';
+import BigNumber from 'bignumber.js';
+
+import { isValidAddress } from '../components/ConfirmWalletsModal/ConfirmWallets.helpers';
+import { errorMessages } from '../constants/errors';
+import { swapButtonTitles } from '../constants/messages';
 import { ZERO } from '../constants/numbers';
+import {
+  BALANCE_MAX_DECIMALS,
+  BALANCE_MIN_DECIMALS,
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+} from '../constants/routing';
+import { useMetaStore } from '../store/meta';
+import { ButtonState } from '../types';
+
+import { removeDuplicateFrom } from './common';
 import { numberToString } from './numbers';
-import { WalletType } from '@rango-dev/wallets-shared';
 import { getRequiredBalanceOfWallet } from './routing';
 import { getRequiredChains } from './wallets';
-import { LoadingStatus, useMetaStore } from '../store/meta';
-import { ConvertedToken, SwapButtonState, Wallet } from '../types';
-import {
-  PendingSwapNetworkStatus,
-  PendingSwapStep,
-} from '@rango-dev/queue-manager-rango-preset';
-import { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
-import { removeDuplicateFrom } from './common';
 
 export function getOutputRatio(
   inputUsdValue: BigNumber | null,
@@ -31,8 +47,9 @@ export function getOutputRatio(
     !outputUsdValue ||
     inputUsdValue.lte(ZERO) ||
     outputUsdValue.lte(ZERO)
-  )
+  ) {
     return 0;
+  }
   return outputUsdValue.div(inputUsdValue).minus(1).multipliedBy(100);
 }
 
@@ -61,9 +78,8 @@ export function hasLimitError(bestRoute: BestRouteResponse | null): boolean {
       const isExclusive = swap.fromAmountRestrictionType === 'EXCLUSIVE';
       if (isExclusive) {
         return minimum?.gte(swap.fromAmount) || maximum?.lte(swap.fromAmount);
-      } else {
-        return minimum?.gt(swap.fromAmount) || maximum?.lt(swap.fromAmount);
       }
+      return minimum?.gt(swap.fromAmount) || maximum?.lt(swap.fromAmount);
     }).length > 0
   );
 }
@@ -73,8 +89,9 @@ export function LimitErrorMessage(bestRoute: BestRouteResponse | null): {
   fromAmountRangeError: string;
   recommendation: string;
 } {
-  if (!bestRoute)
+  if (!bestRoute) {
     return { swap: null, fromAmountRangeError: '', recommendation: '' };
+  }
   const swap = (bestRoute?.result?.swaps || []).filter((swap) => {
     const minimum = !!swap.fromAmountMinValue
       ? new BigNumber(swap.fromAmountMinValue)
@@ -85,12 +102,12 @@ export function LimitErrorMessage(bestRoute: BestRouteResponse | null): {
     const isExclusive = swap.fromAmountRestrictionType === 'EXCLUSIVE';
     if (isExclusive) {
       return minimum?.gte(swap.fromAmount) || maximum?.lte(swap.fromAmount);
-    } else {
-      return minimum?.gt(swap.fromAmount) || maximum?.lt(swap.fromAmount);
     }
+    return minimum?.gt(swap.fromAmount) || maximum?.lt(swap.fromAmount);
   })[0];
-  if (!swap)
+  if (!swap) {
     return { swap: null, fromAmountRangeError: '', recommendation: '' };
+  }
   const minimum = !!swap.fromAmountMinValue
     ? new BigNumber(swap.fromAmountMinValue)
     : null;
@@ -102,27 +119,63 @@ export function LimitErrorMessage(bestRoute: BestRouteResponse | null): {
   let fromAmountRangeError = '';
   let recommendation = '';
   if (!isExclusive && !!minimum && minimum.gt(swap.fromAmount)) {
-    fromAmountRangeError = `Required: >= ${numberToString(minimum)} ${
-      swap.from.symbol
-    }`;
-    recommendation = 'Increase your swap amount';
+    fromAmountRangeError = i18n.t({
+      id: 'requiredEqualMin',
+      message: 'Required: >= {min} {symbol}',
+      values: {
+        min: numberToString(
+          minimum,
+          TOKEN_AMOUNT_MIN_DECIMALS,
+          TOKEN_AMOUNT_MAX_DECIMALS
+        ),
+        symbol: swap.from.symbol,
+      },
+    });
+    recommendation = errorMessages.bridgeLimitErrors.increaseAmount;
   } else if (isExclusive && !!minimum && minimum.gte(swap.fromAmount)) {
-    fromAmountRangeError = `Required: > ${numberToString(minimum)} ${
-      swap.from.symbol
-    }`;
-    recommendation = 'Increase your swap amount';
+    fromAmountRangeError = i18n.t({
+      id: 'requiredMin',
+      message: 'Required: > {min} {symbol}',
+      values: {
+        min: numberToString(
+          minimum,
+          TOKEN_AMOUNT_MIN_DECIMALS,
+          TOKEN_AMOUNT_MAX_DECIMALS
+        ),
+        symbol: swap.from.symbol,
+      },
+    });
+    recommendation = errorMessages.bridgeLimitErrors.increaseAmount;
   }
 
   if (!isExclusive && !!maximum && maximum.lt(swap.fromAmount)) {
-    fromAmountRangeError = `Required: <= ${numberToString(maximum)} ${
-      swap.from.symbol
-    }`;
-    recommendation = 'Decrease your swap amount';
+    fromAmountRangeError = i18n.t({
+      id: 'requiredEqualMax',
+      message: 'Required: <= {max} {symbol}',
+      values: {
+        max: numberToString(
+          maximum,
+          TOKEN_AMOUNT_MIN_DECIMALS,
+          TOKEN_AMOUNT_MAX_DECIMALS
+        ),
+        symbol: swap.from.symbol,
+      },
+    });
+    recommendation = errorMessages.bridgeLimitErrors.decreaseAmount;
   } else if (isExclusive && !!maximum && maximum.lte(swap.fromAmount)) {
-    fromAmountRangeError = `Required: < ${numberToString(maximum)} ${
-      swap.from.symbol
-    }`;
-    recommendation = 'Decrease your swap amount';
+    fromAmountRangeError = i18n.t({
+      id: 'requiredMax',
+      message: 'Required: < {max} {symbol}',
+      values: {
+        max: numberToString(
+          maximum,
+          TOKEN_AMOUNT_MIN_DECIMALS,
+          TOKEN_AMOUNT_MAX_DECIMALS
+        ),
+        symbol: swap.from.symbol,
+      },
+    });
+    recommendation = errorMessages.bridgeLimitErrors.decreaseAmount;
   }
 
   return { swap, fromAmountRangeError, recommendation };
@@ -139,46 +192,62 @@ export function getSwapButtonState(
   needsToWarnEthOnPath: boolean,
   inputAmount: string
 ): SwapButtonState {
-  if (loadingMetaStatus !== 'success')
-    return { title: `${i18n.t('Connect Wallet')}`, disabled: true };
-  if (connectedWallets.length == 0)
-    return { title: `${i18n.t('Connect Wallet')}`, disabled: false };
-  if (loading)
-    return { title: `${i18n.t('Finding Best Route...')}`, disabled: true };
-  else if (!inputAmount || inputAmount === '0')
-    return { title: `${i18n.t('Enter an amount')}`, disabled: true };
-  else if (!bestRoute || !bestRoute.result)
-    return { title: `${i18n.t('Swap')}`, disabled: true };
-  else if (hasLimitError)
-    return { title: `${i18n.t('Limit Error')}`, disabled: true };
-  else if (highValueLoss)
-    return { title: `${i18n.t('Price impact is too high!')}`, disabled: true };
-  else if (priceImpactCanNotBeComputed)
+  if (loadingMetaStatus !== 'success') {
+    return {
+      title: swapButtonTitles.connectWallet,
+      state: ButtonState.WAITFORCONNECTING,
+      disabled: true,
+    };
+  }
+  if (connectedWallets.length == 0) {
     return {
-      title: `${i18n.t('USD price is unknown, price impact might be high!')}`,
+      title: swapButtonTitles.connectWallet,
+      state: ButtonState.WAITFORCONNECTING,
+      disabled: false,
+    };
+  }
+  if (
+    loading ||
+    !bestRoute ||
+    !bestRoute.result ||
+    hasLimitError ||
+    !inputAmount ||
+    inputAmount === '0'
+  ) {
+    return {
+      title: swapButtonTitles.swap,
+      disabled: true,
+      state: ButtonState.SWAP,
+    };
+  } else if (highValueLoss || priceImpactCanNotBeComputed) {
+    return {
+      title: swapButtonTitles.swapAnyway,
       disabled: false,
       hasWarning: true,
+      state: ButtonState.NEEDTOCONFIRM,
     };
-  else if (needsToWarnEthOnPath)
+  } else if (needsToWarnEthOnPath) {
     return {
-      title: `${i18n.t('The route goes through Ethereum. Continue?')}`,
+      title: swapButtonTitles.ethRouteWarning,
       disabled: false,
       hasWarning: true,
+      state: ButtonState.WARNING,
     };
-  else return { title: `${i18n.t('Swap')}`, disabled: false };
+  }
+  return {
+    title: swapButtonTitles.swap,
+    disabled: false,
+    state: ButtonState.SWAP,
+  };
 }
 
 export function canComputePriceImpact(
   bestRoute: BestRouteResponse | null,
   inputAmount: string,
-  inputUsdValue: BigNumber | null,
-  outputUsdValue: BigNumber | null
+  usdValue: BigNumber | null
 ) {
   return !(
-    (!inputUsdValue ||
-      !outputUsdValue ||
-      inputUsdValue.lte(ZERO) ||
-      outputUsdValue.lte(ZERO)) &&
+    (!usdValue || usdValue.lte(ZERO)) &&
     !!bestRoute?.result &&
     !!inputAmount &&
     inputAmount !== '0' &&
@@ -194,11 +263,13 @@ export function requiredWallets(route: BestRouteResponse | null) {
     const currentStepFromBlockchain = swap.from.blockchain;
     const currentStepToBlockchain = swap.to.blockchain;
     let lastAddedWallet = wallets[wallets.length - 1];
-    if (currentStepFromBlockchain != lastAddedWallet)
+    if (currentStepFromBlockchain != lastAddedWallet) {
       wallets.push(currentStepFromBlockchain);
+    }
     lastAddedWallet = wallets[wallets.length - 1];
-    if (currentStepToBlockchain != lastAddedWallet)
+    if (currentStepToBlockchain != lastAddedWallet) {
       wallets.push(currentStepToBlockchain);
+    }
   });
   return wallets;
 }
@@ -225,7 +296,9 @@ export function getUsdFeeOfStep(
   let totalFeeInUsd = ZERO;
   for (let i = 0; i < step.fee.length; i++) {
     const fee = step.fee[i];
-    if (fee.expenseType === 'DECREASE_FROM_OUTPUT') continue;
+    if (fee.expenseType === 'DECREASE_FROM_OUTPUT') {
+      continue;
+    }
 
     const unitPrice = getUsdPrice(
       fee.asset.blockchain,
@@ -255,7 +328,9 @@ export function getTotalFeeInUsd(
 }
 
 export function hasHighFee(totalFeeInUsd: BigNumber | null) {
-  if (!totalFeeInUsd) return false;
+  if (!totalFeeInUsd) {
+    return false;
+  }
   return !totalFeeInUsd.lt(new BigNumber(30));
 }
 
@@ -284,7 +359,9 @@ export function hasProperSlippage(
   userSlippage: string,
   minRequiredSlippage: string | null
 ) {
-  if (!minRequiredSlippage) return true;
+  if (!minRequiredSlippage) {
+    return true;
+  }
   return parseFloat(userSlippage) >= parseFloat(minRequiredSlippage);
 }
 
@@ -294,16 +371,22 @@ export function hasEnoughBalance(
 ) {
   const fee = route.validationStatus;
 
-  if (fee === null || fee.length === 0) return true;
+  if (fee === null || fee.length === 0) {
+    return true;
+  }
 
   for (const wallet of selectedWallets) {
     const requiredAssets = getRequiredBalanceOfWallet(wallet, fee);
-    if (!requiredAssets) continue;
+    if (!requiredAssets) {
+      continue;
+    }
 
     const enoughBalanceInWallet = requiredAssets
       .map((asset) => asset.ok)
       .reduce((previous, current) => previous && current);
-    if (!enoughBalanceInWallet) return false;
+    if (!enoughBalanceInWallet) {
+      return false;
+    }
   }
 
   return true;
@@ -321,21 +404,35 @@ export function hasEnoughBalanceAndProperSlippage(
   );
 }
 
-export function createBestRouteRequestBody(
-  fromToken: Token,
-  toToken: Token,
-  inputAmount: string,
-  wallets: ConnectedWallet[],
-  selectedWallets: Wallet[],
-  disabledLiquiditySources: string[],
-  slippage: number,
-  affiliateRef: string | null,
-  affiliatePercent: number | null,
-  affiliateWallets: { [key: string]: string } | null,
-  initialRoute?: BestRouteResponse,
-  destination?: string
-): BestRouteRequest {
-  const selectedWalletsMap = selectedWallets.reduce(
+export function createBestRouteRequestBody(params: {
+  fromToken: Token;
+  toToken: Token;
+  inputAmount: string;
+  wallets?: Wallet[];
+  selectedWallets?: Wallet[];
+  disabledLiquiditySources: string[];
+  slippage: number;
+  affiliateRef: string | null;
+  affiliatePercent: number | null;
+  affiliateWallets: { [key: string]: string } | null;
+  initialRoute?: BestRouteResponse;
+  destination?: string;
+}): BestRouteRequest {
+  const {
+    fromToken,
+    toToken,
+    inputAmount,
+    wallets,
+    selectedWallets,
+    disabledLiquiditySources,
+    slippage,
+    affiliateRef,
+    affiliatePercent,
+    affiliateWallets,
+    initialRoute,
+    destination,
+  } = params;
+  const selectedWalletsMap = selectedWallets?.reduce(
     (
       selectedWalletsMap: BestRouteRequest['selectedWallets'],
       selectedWallet
@@ -348,16 +445,18 @@ export function createBestRouteRequestBody(
 
   const connectedWallets: BestRouteRequest['connectedWallets'] = [];
 
-  wallets.forEach((wallet) => {
+  wallets?.forEach((wallet) => {
     const chainAndAccounts = connectedWallets.find(
       (connectedWallet) => connectedWallet.blockchain === wallet.chain
     );
-    if (!!chainAndAccounts) chainAndAccounts.addresses.push(wallet.address);
-    else
+    if (!!chainAndAccounts) {
+      chainAndAccounts.addresses.push(wallet.address);
+    } else {
       connectedWallets.push({
         blockchain: wallet.chain,
         addresses: [wallet.address],
       });
+    }
   });
 
   const checkPrerequisites = !!initialRoute;
@@ -398,11 +497,13 @@ export function createBestRouteRequestBody(
       symbol: toToken.symbol,
     },
     connectedWallets,
-    destination: destination || undefined,
-    selectedWallets: selectedWalletsMap,
-    swapperGroups: disabledLiquiditySources,
-    swappersGroupsExclude: true,
+    selectedWallets: selectedWalletsMap ?? {},
     slippage: slippage.toString(),
+    ...(destination && { destination: destination }),
+    ...(disabledLiquiditySources.length > 0 && {
+      swapperGroups: disabledLiquiditySources,
+      swappersGroupsExclude: true,
+    }),
     ...(checkPrerequisites && { blockchains: filteredBlockchains }),
   };
 
@@ -434,12 +535,14 @@ export function getRouteOutputAmount(route: BestRouteResponse | null) {
 }
 
 export function getPercentageChange(
-  oldValue: string | number | null,
-  newValue: string | number | null
+  inputUsdValue: string | number | null,
+  outputUsdValue: string | number | null
 ) {
-  if (!oldValue || !newValue) return null;
-  return new BigNumber(newValue)
-    .div(new BigNumber(oldValue))
+  if (!inputUsdValue || !outputUsdValue) {
+    return null;
+  }
+  return new BigNumber(outputUsdValue)
+    .div(new BigNumber(inputUsdValue))
     .minus(1)
     .multipliedBy(100);
 }
@@ -450,12 +553,16 @@ export function isOutputAmountChangedALot(
 ) {
   const oldOutputAmount = getRouteOutputAmount(oldRoute);
   const newOutputAmount = getRouteOutputAmount(newRoute);
-  if (!oldOutputAmount || !newOutputAmount) return false;
+  if (!oldOutputAmount || !newOutputAmount) {
+    return false;
+  }
   const percentageChange = getPercentageChange(
     oldOutputAmount,
     newOutputAmount
   );
-  if (!percentageChange) return true;
+  if (!percentageChange) {
+    return true;
+  }
 
   return percentageChange.toNumber() <= -1;
 }
@@ -480,20 +587,37 @@ export function getBalanceWarnings(
         new BigNumber(asset.currentAmount.amount).shiftedBy(
           -asset.currentAmount.decimals
         ),
-        8
+        BALANCE_MIN_DECIMALS,
+        BALANCE_MAX_DECIMALS
       );
       const requiredAmount = numberToString(
         new BigNumber(asset.requiredAmount.amount).shiftedBy(
           -asset.requiredAmount.decimals
         ),
-        8
+        BALANCE_MIN_DECIMALS,
+        BALANCE_MAX_DECIMALS
       );
       let reason = '';
-      if (asset.reason === 'FEE') reason = ' for network fee';
-      if (asset.reason === 'INPUT_ASSET') reason = ' for swap';
-      if (asset.reason === 'FEE_AND_INPUT_ASSET')
-        reason = ' for input and network fee';
-      const warningMessage = `Needs ≈ ${requiredAmount} ${symbol}${reason}, but you have ${currentAmount} ${symbol} in your ${asset.asset.blockchain} wallet.`;
+      if (asset.reason === 'FEE') {
+        reason = i18n.t(' for network fee');
+      }
+      if (asset.reason === 'INPUT_ASSET') {
+        reason = i18n.t(' for swap');
+      }
+      if (asset.reason === 'FEE_AND_INPUT_ASSET') {
+        reason = i18n.t(' for input and network fee');
+      }
+      const warningMessage = i18n.t({
+        id: 'balanceWarningMessage',
+        message: `Needs ≈ {requiredAmount} {symbol}{reason}, but you have {currentAmount} {symbol} in your {blockchain} wallet.`,
+        values: {
+          requiredAmount,
+          symbol,
+          reason,
+          currentAmount,
+          blockchain: asset.asset.blockchain,
+        },
+      });
       return warningMessage;
     });
 }
@@ -538,15 +662,20 @@ export function getSwapMessages(
   if (networkWarningState) {
     message = pendingSwap.networkStatusExtraMessage || '';
     detailedMessage = pendingSwap.networkStatusExtraMessageDetail || '';
+    // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
     switch (currentStep?.networkStatus) {
       case PendingSwapNetworkStatus.WaitingForConnectingWallet:
-        message = message || 'Waiting for connecting wallet';
+        message = message || i18n.t('Waiting for connecting wallet');
         break;
       case PendingSwapNetworkStatus.WaitingForQueue:
-        message = message || 'Waiting for other running tasks to be finished';
+        message =
+          message || i18n.t('Waiting for other running tasks to be finished');
         break;
       case PendingSwapNetworkStatus.WaitingForNetworkChange:
-        message = message || 'Waiting for changing wallet network';
+        message = message || i18n.t('Waiting for changing wallet network');
+        break;
+      default:
+        message = message || '';
         break;
     }
   }
@@ -603,24 +732,22 @@ export function isValidCustomDestination(
 
 export function confirmSwapDisabled(
   fetching: boolean,
-  destinationChain: string,
+  showCustomDestination: boolean,
   customDestination: string,
   bestRoute: BestRouteResponse | null,
-  selectedWallets: Wallet[]
+  selectedWallets: { walletType: string; chain: string }[],
+  lastStepToBlockchain?: BlockchainMeta
 ) {
   return (
     fetching ||
-    (!destinationChain &&
+    (!showCustomDestination &&
       !requiredWallets(bestRoute).every((chain) =>
         selectedWallets.map((wallet) => wallet.chain).includes(chain)
       )) ||
-    (!!destinationChain && !customDestination) ||
-    (!!destinationChain &&
+    (!!showCustomDestination && !customDestination) ||
+    (!!showCustomDestination &&
       !!customDestination &&
-      !requiredWallets(bestRoute)
-        .filter((chain) => chain !== destinationChain)
-        .every((chain) =>
-          selectedWallets.map((wallet) => wallet.chain).includes(chain)
-        ))
+      lastStepToBlockchain &&
+      !isValidAddress(lastStepToBlockchain, customDestination))
   );
 }

package/src/utils/time.ts

@@ -1,46 +1,79 @@
-import { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
-
-export function timeSince(timeMillis: number): string {
-  const seconds = Math.floor((new Date().getTime() - timeMillis) / 1000);
-  let intervalType: string;
-
-  let interval = Math.floor(seconds / 31536000);
-  if (interval >= 1) {
-    intervalType = 'year';
-  } else {
-    interval = Math.floor(seconds / 2592000);
-    if (interval >= 1) {
-      intervalType = 'month';
-    } else {
-      interval = Math.floor(seconds / 86400);
-      if (interval >= 1) {
-        intervalType = 'day';
-      } else {
-        interval = Math.floor(seconds / 3600);
-        if (interval >= 1) {
-          intervalType = 'hour';
-        } else {
-          interval = Math.floor(seconds / 60);
-          if (interval >= 1) {
-            intervalType = 'minute';
-          } else {
-            interval = seconds;
-            intervalType = 'second';
-          }
-        }
-      }
+import type { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
+
+import { i18n } from '@lingui/core';
+
+const MILLISECOND_PER_SECOND = 1000;
+const SECONDS_PER_YEAR = 31536000;
+const SECONDS_PER_MONTH = 2592000;
+const SECONDS_PER_DAY = 86400;
+const SECONDS_PER_HOUR = 3600;
+const SECONDS_PER_MINUTE = 60;
+
+export function timeSince(millisecond: number): string {
+  const seconds = Math.floor(
+    (Date.now() - millisecond) / MILLISECOND_PER_SECOND
+  );
+
+  const intervals = [
+    {
+      turningPoint: SECONDS_PER_YEAR,
+      label: i18n.t('year'),
+      pluralLabel: i18n.t('years'),
+    },
+    {
+      turningPoint: SECONDS_PER_MONTH,
+      label: i18n.t('month'),
+      pluralLabel: i18n.t('months'),
+    },
+    {
+      turningPoint: SECONDS_PER_DAY,
+      label: i18n.t('day'),
+      pluralLabel: i18n.t('days'),
+    },
+    {
+      turningPoint: SECONDS_PER_HOUR,
+      label: i18n.t('hour'),
+      pluralLabel: i18n.t('hours'),
+    },
+    {
+      turningPoint: SECONDS_PER_MINUTE,
+      label: i18n.t('minute'),
+      pluralLabel: i18n.t('minutes'),
+    },
+  ];
+
+  const sortedIntervals = intervals.sort(
+    (a, b) => b.turningPoint - a.turningPoint
+  );
+
+  for (const interval of sortedIntervals) {
+    const { turningPoint, label, pluralLabel } = interval;
+    const intervalCount = Math.floor(seconds / turningPoint);
+    if (intervalCount > 1) {
+      return `${intervalCount} ${pluralLabel}`;
+    }
+    if (intervalCount === 1) {
+      return `${intervalCount} ${label}`;
     }
   }
 
-  if (interval > 1 || interval === 0) {
-    intervalType += 's';
+  if (seconds > 1) {
+    return `${seconds} ${i18n.t('seconds')}`;
   }
 
-  return interval + ' ' + intervalType;
+  return `${seconds} ${i18n.t('second')}`;
 }
 
 export function getSwapDate(pendingSwap: PendingSwap) {
   return pendingSwap.finishTime
-    ? `${timeSince(parseInt(pendingSwap.finishTime))} ago`
-    : `${timeSince(parseInt(pendingSwap.creationTime))} ago`;
+    ? i18n.t({
+        id: 'timeAgo',
+        message: '{time} ago',
+        values: { time: timeSince(parseInt(pendingSwap.finishTime)) },
+      })
+    : i18n.t({
+        id: 'timeAgo',
+        message: '{time} ago',
+        values: { time: timeSince(parseInt(pendingSwap.creationTime)) },
+      });
 }