@rango-dev/widget-embedded 0.12.1-next.24 → 0.12.1-next.26

package/src/utils/swap.ts

@@ -16,6 +16,7 @@ import type {
   Token,
 } from 'rango-sdk';
 
+import { i18n } from '@lingui/core';
 import { PendingSwapNetworkStatus } from '@rango-dev/queue-manager-rango-preset';
 import BigNumber from 'bignumber.js';
 
@@ -118,34 +119,62 @@ export function LimitErrorMessage(bestRoute: BestRouteResponse | null): {
   let fromAmountRangeError = '';
   let recommendation = '';
   if (!isExclusive && !!minimum && minimum.gt(swap.fromAmount)) {
-    fromAmountRangeError = `Required: >= ${numberToString(
-      minimum,
-      TOKEN_AMOUNT_MIN_DECIMALS,
-      TOKEN_AMOUNT_MAX_DECIMALS
-    )} ${swap.from.symbol}`;
+    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,
-      TOKEN_AMOUNT_MIN_DECIMALS,
-      TOKEN_AMOUNT_MAX_DECIMALS
-    )} ${swap.from.symbol}`;
+    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,
-      TOKEN_AMOUNT_MIN_DECIMALS,
-      TOKEN_AMOUNT_MAX_DECIMALS
-    )} ${swap.from.symbol}`;
+    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,
-      TOKEN_AMOUNT_MIN_DECIMALS,
-      TOKEN_AMOUNT_MAX_DECIMALS
-    )} ${swap.from.symbol}`;
+    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;
   }
 
@@ -570,15 +599,25 @@ export function getBalanceWarnings(
       );
       let reason = '';
       if (asset.reason === 'FEE') {
-        reason = ' for network fee';
+        reason = i18n.t(' for network fee');
       }
       if (asset.reason === 'INPUT_ASSET') {
-        reason = ' for swap';
+        reason = i18n.t(' for swap');
       }
       if (asset.reason === 'FEE_AND_INPUT_ASSET') {
-        reason = ' for input and network fee';
+        reason = i18n.t(' for input and network fee');
       }
-      const warningMessage = `Needs ≈ ${requiredAmount} ${symbol}${reason}, but you have ${currentAmount} ${symbol} in your ${asset.asset.blockchain} wallet.`;
+      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;
     });
 }
@@ -626,13 +665,14 @@ export function getSwapMessages(
     // 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 || '';

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)) },
+      });
 }