@rango-dev/widget-embedded 0.12.1-next.25 → 0.12.1-next.27

package/src/pages/SettingsPage.tsx

@@ -60,7 +60,7 @@ export function SettingsPage({ supportedSwappers, singleTheme }: PropTypes) {
       case 'failed':
         return (
           <Typography variant="body" size="medium" color="$error500">
-            Loading failed
+            {i18n.t('Loading failed')}
           </Typography>
         );
       default:

package/src/pages/ThemePage.tsx

@@ -82,7 +82,7 @@ export function ThemePage() {
           <List
             type={
               <ListItemButton
-                title="Theme"
+                title={i18n.t('Theme')}
                 id="_"
                 onClick={() => console.log()}
               />

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

package/dist/components/BlockchainsChip/BlockchainsChip.d.ts

@@ -1,5 +0,0 @@
-import type { PropTypes } from './BlockchainsChip.types';
-import type { PropsWithChildren } from 'react';
-import React from 'react';
-export declare function BlockchainsChip(props: PropsWithChildren<PropTypes>): React.JSX.Element;
-//# sourceMappingURL=BlockchainsChip.d.ts.map

package/dist/components/BlockchainsChip/BlockchainsChip.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BlockchainsChip.d.ts","sourceRoot":"","sources":["../../../src/components/BlockchainsChip/BlockchainsChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,wBAAgB,eAAe,CAAC,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,qBAOlE"}

package/dist/components/BlockchainsChip/BlockchainsChip.styles.d.ts

@@ -1,156 +0,0 @@
-export declare const Chip: import("@stitches/react/types/styled-component").StyledComponent<"button", {
-    selected?: boolean | "true" | "false" | undefined;
-}, {
-    sm: string;
-    md: string;
-    lg: string;
-}, import("@stitches/react/types/css-util").CSS<{
-    sm: string;
-    md: string;
-    lg: string;
-}, {
-    colors: {
-        primary500: string;
-        primary600: string;
-        secondary100: string;
-        secondary200: string;
-        secondary300: string;
-        secondary400: string;
-        secondary500: string;
-        secondary600: string;
-        secondary700: string;
-        secondary800: string;
-        secondary900: string;
-        neutral100: string;
-        neutral200: string;
-        neutral300: string;
-        neutral400: string;
-        neutral500: string;
-        neutral600: string;
-        neutral700: string;
-        neutral800: string;
-        neutral900: string;
-        error100: string;
-        error300: string;
-        error500: string;
-        error600: string;
-        error700: string;
-        warning100: string;
-        warning300: string;
-        warning500: string;
-        warning600: string;
-        warning700: string;
-        info100: string;
-        info300: string;
-        info500: string;
-        info600: string;
-        info700: string;
-        success100: string;
-        success300: string;
-        success500: string;
-        success600: string;
-        success700: string;
-        background: string;
-        foreground: string;
-    };
-    space: {
-        0: string;
-        5: string;
-        10: string;
-        15: string;
-        20: string;
-        25: string;
-        30: string;
-        40: string;
-        46: string;
-        50: string;
-        60: string;
-        70: string;
-        80: string;
-        90: string;
-        100: string;
-        2: string;
-        4: string;
-        6: string;
-        8: string;
-        12: string;
-        16: string;
-        24: string;
-        28: string;
-        32: string;
-    };
-    radii: {
-        xs: string;
-        sm: string;
-        xm: string;
-        md: string;
-        xl: string;
-        lg: string;
-        primary: string;
-        secondary: string;
-    };
-    fontSizes: {
-        10: string;
-        12: string;
-        14: string;
-        16: string;
-        18: string;
-        20: string;
-        22: string;
-        24: string;
-        28: string;
-        32: string;
-        36: string;
-        40: string;
-        48: string;
-    };
-    fonts: {
-        primary: string;
-        widget: string;
-    };
-    fontWeights: {
-        regular: number;
-        medium: number;
-        semiBold: number;
-        bold: number;
-    };
-    lineHeights: {
-        12: string;
-        16: string;
-        20: string;
-        24: string;
-        26: string;
-        28: string;
-        30: string;
-        36: string;
-        40: string;
-        44: string;
-        52: string;
-        64: string;
-    };
-    letterSpacings: {};
-    sizes: {
-        4: string;
-        6: string;
-        8: string;
-        12: string;
-        16: string;
-        18: string;
-        20: string;
-        24: string;
-        28: string;
-        32: string;
-        36: string;
-        40: string;
-        45: string;
-        48: string;
-    };
-    borderWidths: {};
-    borderStyles: {};
-    shadows: {
-        s: string;
-    };
-    zIndices: {};
-    transitions: {};
-}, import("@stitches/react/types/config").DefaultThemeMap, {}>>;
-//# sourceMappingURL=BlockchainsChip.styles.d.ts.map

package/dist/components/BlockchainsChip/BlockchainsChip.styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BlockchainsChip.styles.d.ts","sourceRoot":"","sources":["../../../src/components/BlockchainsChip/BlockchainsChip.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAuCf,CAAC"}

package/dist/components/BlockchainsChip/BlockchainsChip.types.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export interface PropTypes {
-    selected?: boolean;
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-}
-//# sourceMappingURL=BlockchainsChip.types.d.ts.map

package/dist/components/BlockchainsChip/BlockchainsChip.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BlockchainsChip.types.d.ts","sourceRoot":"","sources":["../../../src/components/BlockchainsChip/BlockchainsChip.types.ts"],"names":[],"mappings":";AAAA,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACtD"}

package/dist/components/BlockchainsChip/index.d.ts

@@ -1,2 +0,0 @@
-export { BlockchainsChip } from './BlockchainsChip';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/BlockchainsChip/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/BlockchainsChip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/SelectableCategoryList/SelectableCategoryList.d.ts

@@ -1,4 +0,0 @@
-import type { PropTypes } from './SelectableCategoryList.types';
-import React from 'react';
-export declare function SelectableCategoryList(props: PropTypes): React.JSX.Element;
-//# sourceMappingURL=SelectableCategoryList.d.ts.map

package/dist/components/SelectableCategoryList/SelectableCategoryList.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectableCategoryList.d.ts","sourceRoot":"","sources":["../../../src/components/SelectableCategoryList/SelectableCategoryList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAIhE,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,SAAS,qBA4DtD"}

package/dist/components/SelectableCategoryList/SelectableCategoryList.helpers.d.ts

@@ -1,4 +0,0 @@
-import { type BlockchainMeta } from 'rango-sdk';
-import { BlockchainCategories } from './SelectableCategoryList.types';
-export declare const generateBlockchainsLogo: (list: BlockchainMeta[], type: Exclude<BlockchainCategories, 'ALL'>) => BlockchainMeta[];
-//# sourceMappingURL=SelectableCategoryList.helpers.d.ts.map

package/dist/components/SelectableCategoryList/SelectableCategoryList.helpers.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectableCategoryList.helpers.d.ts","sourceRoot":"","sources":["../../../src/components/SelectableCategoryList/SelectableCategoryList.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,WAAW,CAAC;AAIhD,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAStE,eAAO,MAAM,uBAAuB,SAC5B,cAAc,EAAE,QAChB,QAAQ,oBAAoB,EAAE,KAAK,CAAC,qBAIoB,CAAC"}