@rango-dev/widget-embedded 0.20.1-next.0 → 0.20.1-next.10

package/src/pages/LiquiditySourcePage.tsx

@@ -40,6 +40,7 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
   const supportedUniqueSwappersGroups: Array<UniqueSwappersGroupType> =
     getUniqueSwappersGroups(swappers, disabledLiquiditySources);
 
+  const types = { Exchanges: i18n.t('Exchanges'), Bridges: i18n.t('Bridges') };
   const validTypes: Array<LiquiditySourceType> = [];
   if (sourceType === 'Exchanges') {
     validTypes.push('DEX');
@@ -103,7 +104,7 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
         suffix: (
           <LiquiditySourceSuffix>
             <Button variant="ghost" size="xsmall" onClick={toggleAllSources}>
-              {i18n.t(hasSelectAll ? 'Deselect all' : 'Select all')}
+              {hasSelectAll ? i18n.t('Deselect all') : i18n.t('Select all')}
             </Button>
           </LiquiditySourceSuffix>
         ),
@@ -115,7 +116,9 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
           fullWidth
           color="light"
           variant="contained"
-          placeholder={i18n.t('Search {sourceType}', { sourceType })}
+          placeholder={i18n.t('Search {sourceType}', {
+            sourceType: types[sourceType],
+          })}
           onChange={searchHandler}
         />
         {fetchStatus === 'loading' && <LoadingLiquiditySourceList />}

package/src/pages/SelectBlockchainPage.tsx

@@ -2,7 +2,7 @@ import { i18n } from '@lingui/core';
 import {
   Divider,
   getCountCategories,
-  SelectableCategoryList
+  SelectableCategoryList,
 } from '@rango-dev/ui';
 import React, { useState } from 'react';
 
@@ -27,7 +27,7 @@ export function SelectBlockchainPage(props: PropTypes) {
   const fetchStatus = useAppStore().fetchStatus;
 
   const blockchains = useAppStore().blockchains({
-    type: type
+    type,
   });
 
   const countActiveCategories = getCountCategories(blockchains);
@@ -37,7 +37,7 @@ export function SelectBlockchainPage(props: PropTypes) {
   return (
     <Layout
       header={{
-        title: i18n.t(`Select Blockchain`)
+        title: i18n.t(`Select Blockchain`),
       }}>
       <Divider size={12} />
 

package/src/pages/SelectSwapItemsPage.tsx

@@ -68,11 +68,15 @@ export function SelectSwapItemsPage(props: PropTypes) {
       setToToken({ token, meta: { blockchains, tokens } });
     }
   };
+  const types = {
+    source: i18n.t('Source'),
+    destination: i18n.t('Destination'),
+  };
 
   return (
     <Layout
       header={{
-        title: i18n.t('Swap {type}', { type }),
+        title: i18n.t('Swap {type}', { type: types[type] }),
       }}>
       <BlockchainsSection
         blockchains={blockchains}

package/src/store/slices/data.ts

@@ -6,6 +6,7 @@ import type { StateCreator } from 'zustand';
 
 import { httpService as sdk } from '../../services/httpService';
 import { containsText } from '../../utils/common';
+import { isTokenExcludedInConfig } from '../../utils/configs';
 import { sortLiquiditySourcesByGroupTitle } from '../../utils/settings';
 import { tokensAreEqual } from '../../utils/wallets';
 
@@ -81,21 +82,18 @@ export const createDataSlice: StateCreator<
     }
 
     const config = get().config;
-    const supportedTokensFromConfig =
+    const supportedTokensConfig =
       (options.type === 'source' ? config.from?.tokens : config.to?.tokens) ??
-      [];
+      {};
     const blockchains = get().blockchains({
       type: options.type,
     });
 
     const list = tokensFromState
       .filter((token) => {
-        // If there is a list of tokens in config, we only keep them.
         if (
-          supportedTokensFromConfig.length > 0 &&
-          !supportedTokensFromConfig.some((asset) => {
-            return tokensAreEqual(asset, token);
-          })
+          supportedTokensConfig &&
+          isTokenExcludedInConfig(token, supportedTokensConfig)
         ) {
           return false;
         }

package/src/types/config.ts

@@ -67,6 +67,19 @@ export type WidgetAffiliate = {
   wallets?: { [key: string]: string };
 };
 
+/**
+ * `Tokens`
+ *
+ * @property {boolean} isExcluded - This is a boolean property capable of removing tokens from all or a blockchain.
+ * @property {Asset[]} tokens - The `tokens` property is an array of `Asset` objects that
+ * you could use that to limit tokens to some limited ones.
+ */
+
+export type Tokens = {
+  isExcluded: boolean;
+  tokens: Asset[];
+};
+
 /**
  * `BlockchainAndTokenConfig`
  *
@@ -75,8 +88,8 @@ export type WidgetAffiliate = {
  * which is selected. e.g. {blockchain: 'BSC', symbol: 'BNB', address: null}
  * @property {string[]} blockchains - An optional array of strings representing the supported
  * blockchains. e.g. ['BSC','ETHEREUM']
- * @property {Asset[]} tokens - The `tokens` property is an optional array of `Asset` objects that
- * you could use that to limit tokens to some limited ones.
+ * @property {Asset[] |{ [blockchain: string]: Tokens }} tokens - The `tokens` property is an optional object of `blockchain` objects or array of `Asset` objects
+ * that you could use that to limit tokens to some limited ones.
  * @property {Asset} pinnedTokens - The `pinnedTokens` property is an optional array of `Asset` objects that
  * you could use to pin tokens of your choice to the top of the token list.
  */
@@ -84,8 +97,8 @@ export type BlockchainAndTokenConfig = {
   blockchain?: string;
   token?: Asset;
   blockchains?: string[];
-  tokens?: Asset[];
   pinnedTokens?: Asset[];
+  tokens?: Asset[] | { [blockchain: string]: Tokens };
 };
 
 /**

package/src/utils/common.ts

@@ -1,3 +1,5 @@
+import { RANGO_SWAP_BOX_ID } from '../constants';
+
 export function removeDuplicateFrom<T>(array: T[]): T[] {
   return Array.from(new Set(array));
 }
@@ -31,4 +33,4 @@ export function containsText(text: string, searchText: string): boolean {
 }
 
 export const getContainer = () =>
-  document.getElementById('swap-box') as HTMLElement;
+  document.getElementById(RANGO_SWAP_BOX_ID) as HTMLElement;

package/src/utils/configs.ts

@@ -1,10 +1,21 @@
+import type { Tokens } from '../types';
+import type { Asset, BlockchainMeta, Token } from 'rango-sdk';
+
 import { RANGO_PUBLIC_API_KEY } from '../constants';
 
+import { tokensAreEqual } from './wallets';
+
 export interface Configs {
   API_KEY: string;
   BASE_URL?: string;
 }
 
+type TokensConfig =
+  | Asset[]
+  | {
+      [blockchain: string]: Tokens;
+    };
+
 let configs: Configs = {
   API_KEY: RANGO_PUBLIC_API_KEY,
 };
@@ -38,3 +49,33 @@ export const DEFAULT_SECONDARY_RADIUS = 25;
 export const DEFAULT_FONT_FAMILY = 'Roboto';
 
 export const THEME_CLASS_NAME_PREFIX = `theme-widget`;
+
+export const isTokenExcludedInConfig = (
+  token: Token | null,
+  tokensConfig?: TokensConfig
+) => {
+  let result = false;
+  if (tokensConfig && token) {
+    if (Array.isArray(tokensConfig)) {
+      result = !tokensConfig.some((asset) => tokensAreEqual(asset, token));
+    } else if (!Array.isArray(tokensConfig) && tokensConfig[token.blockchain]) {
+      result = tokensConfig[token.blockchain].tokens.some((asset) =>
+        tokensAreEqual(asset, token)
+      );
+      const isExcluded = tokensConfig[token.blockchain].isExcluded;
+      return (!isExcluded && !result) || (isExcluded && result);
+    }
+  }
+  return result;
+};
+
+export const isBlockchainExcludedInConfig = (
+  blockchain: BlockchainMeta | null,
+  blockchainsConfig?: string[]
+) => {
+  return (
+    blockchain &&
+    blockchainsConfig &&
+    !blockchainsConfig.includes(blockchain.name)
+  );
+};

package/src/utils/date.ts

@@ -1,6 +1,7 @@
 import type { GroupBy } from '../components/SwapsGroup/SwapsGroup.types';
 import type { PendingSwap } from 'rango-types';
 
+import { i18n } from '@lingui/core';
 import dayjs from 'dayjs';
 
 export const groupSwapsByDate: GroupBy = (swaps) => {
@@ -14,44 +15,58 @@ export const groupSwapsByDate: GroupBy = (swaps) => {
     [
       'today',
       {
-        title: 'Today',
+        title: i18n.t('Today'),
         swaps: [],
       },
     ],
     [
-      'month',
+      'week',
       {
-        title: 'Last month',
+        title: i18n.t('This week'),
         swaps: [],
       },
     ],
     [
-      'year',
+      'month',
       {
-        title: 'Last year',
+        title: i18n.t('This month'),
         swaps: [],
       },
     ],
     [
-      'history',
+      'year',
       {
-        title: 'History',
+        title: i18n.t('This year'),
         swaps: [],
       },
     ],
   ]);
 
+  function addYearsToOutput(key: string, swap: PendingSwap) {
+    if (!output.has(key)) {
+      output.set(key, {
+        title: key,
+        swaps: [],
+      });
+    }
+    output.get(key)?.swaps.push(swap);
+  }
+
   const now = dayjs();
   swaps.forEach((swap) => {
-    const swapDate = dayjs(Number(swap.creationTime));
+    const time = Number(swap.creationTime);
+    const swapDate = dayjs(time);
     if (now.isSame(swapDate, 'day')) {
       output.get('today')?.swaps.push(swap);
+    } else if (now.isSame(swapDate, 'week')) {
+      output.get('week')?.swaps.push(swap);
     } else if (now.isSame(swapDate, 'month')) {
       output.get('month')?.swaps.push(swap);
     } else if (now.isSame(swapDate, 'year')) {
       output.get('year')?.swaps.push(swap);
     } else {
-      output.get('history')?.swaps.push(swap);
+      const year = new Date(time).getFullYear().toString();
+      addYearsToOutput(year, swap);
     }
   });
 

package/src/utils/numbers.ts

@@ -4,8 +4,7 @@ import type { BestRouteResponse } from 'rango-sdk';
 
 import { BigNumber } from 'bignumber.js';
 
-export const percentToString = (p: number, fractions = 0): string =>
-  (p * 100).toFixed(fractions);
+import { TOOLTIP_DECIMALS } from '../constants/routing';
 
 export const secondsToString = (s: number): string => {
   const seconds = (s % 60).toString().padStart(2, '0');
@@ -96,13 +95,6 @@ export const numberToString = (
   );
 };
 
-export const convertBigNumberToHex = (
-  value: BigNumber,
-  decimals: number
-): string => {
-  return '0x' + value.shiftedBy(decimals).toString(16);
-};
-
 export const uint8ArrayToHex = (buffer: Uint8Array): string => {
   // buffer is an ArrayBuffer
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -110,43 +102,6 @@ export const uint8ArrayToHex = (buffer: Uint8Array): string => {
   return [...buffer].map((x) => x.toString(16).padStart(2, '0')).join('');
 };
 
-export function dollarToConciseString(num: number | undefined): string {
-  if (!num) {
-    return '-';
-  }
-  if (num < 1) {
-    return ' < 1$';
-  }
-  if (num < 1000) {
-    return numberToString(new BigNumber(num)) + '$';
-  }
-  if (num < 10_000) {
-    return parseInt((num / 100).toString()) / 10 + 'K';
-  }
-  if (num < 1_000_000) {
-    return parseInt((num / 1000).toString()) + 'K';
-  }
-  if (num < 100_000_000) {
-    return parseInt((num / 100000).toString()) / 10 + 'M';
-  }
-  return parseInt((num / 1000000).toString()) + 'M';
-}
-
-export function removeExtraDecimals(num: string, maxDecimals: number): string {
-  try {
-    if (!num.includes('.')) {
-      return num;
-    }
-    const [b, f] = num.split('.');
-    if (f && f.length > maxDecimals) {
-      return `${b}.${f.substring(0, maxDecimals)}`;
-    }
-    return num;
-  } catch (e) {
-    return num;
-  }
-}
-
 export const totalArrivalTime = (
   data: { estimatedTimeInSeconds: number | null }[] | undefined
 ) => data?.reduce((a, b) => a + (b.estimatedTimeInSeconds ?? 0), 0) || 0;
@@ -167,16 +122,11 @@ export const isPositiveNumber = (text?: string) =>
   !!text && parseFloat(text) > 0;
 10;
 
-export function limitDecimalPlaces(
-  numberString: string,
-  maxDecimalPlaces = 4
-): string {
-  const number = parseFloat(numberString);
-  if (isNaN(number)) {
-    return numberString;
-  } // Return the original string if it's not a valid number
-
-  const multiplier = Math.pow(10, maxDecimalPlaces);
-  const roundedNumber = Math.round(number * multiplier) / multiplier;
-  return roundedNumber.toString();
+export function formatTooltipNumbers(
+  number: BigNumber | string | number | null | undefined
+) {
+  return numberToString(number, TOOLTIP_DECIMALS, TOOLTIP_DECIMALS).replace(
+    /(?:\.0*|(\.\d+?)0*)$/,
+    '$1'
+  );
 }

package/src/utils/time.ts

@@ -2,76 +2,32 @@ import type { PendingSwap } from 'rango-types';
 
 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 (seconds > 1) {
-    return `${seconds} ${i18n.t('seconds')}`;
-  }
-
-  return `${seconds} ${i18n.t('second')}`;
+const daysOfWeek = [
+  i18n.t('Sunday'),
+  i18n.t('Monday'),
+  i18n.t('Tuesday'),
+  i18n.t('Wednesday'),
+  i18n.t('Thursday'),
+  i18n.t('Friday'),
+  i18n.t('Saturday'),
+];
+
+export function timeSince(millisecond: number) {
+  const date = new Date(millisecond);
+  const day = date.getDate();
+  const month = date.toLocaleString('default', { month: 'long' });
+  const year = date.getFullYear();
+  const isToday = date.getDay() === new Date().getDay();
+  const formattedDate = isToday
+    ? i18n.t('Today')
+    : `${daysOfWeek[date.getDay()]} ${day} ${month} ${year}`;
+
+  return `${formattedDate}, ${new Date(millisecond).toLocaleTimeString()}`;
 }
 
 export function getSwapDate(pendingSwap: PendingSwap) {
-  return pendingSwap.finishTime
-    ? i18n.t({
-        id: '{time} ago',
-        values: { time: timeSince(parseInt(pendingSwap.finishTime)) },
-      })
-    : i18n.t({
-        id: '{time} ago',
-        values: { time: timeSince(parseInt(pendingSwap.creationTime)) },
-      });
+  const time = pendingSwap.finishTime
+    ? timeSince(parseInt(pendingSwap.finishTime))
+    : timeSince(parseInt(pendingSwap.creationTime));
+  return time;
 }