@rango-dev/widget-embedded 0.12.1-next.7 → 0.12.1-next.8

package/src/utils/common.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
 export function removeDuplicateFrom<T>(array: T[]): T[] {
   return Array.from(new Set(array));
 }
@@ -10,9 +11,7 @@ export function areEqual(
     array1.length === array2.length && array1.every((v, i) => v === array2[i])
   );
 }
-
-
-
+// eslint-disable-next-line @typescript-eslint/ban-types
 export function debounce(fn: Function, time: number) {
   let timeoutId: ReturnType<typeof setTimeout> | null;
   return wrapper;
@@ -27,4 +26,55 @@ export function debounce(fn: Function, time: number) {
   }
 }
 
+export function containsText(text: string, searchText: string): boolean {
+  // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+  return text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
+}
+
+export const colorShade = (col: string, amt: number) => {
+  col = col.replace(/^#/, '');
+  if (col.length === 3) {
+    col = col[0] + col[0] + col[1] + col[1] + col[2] + col[2];
+  }
+  let [r, g, b]: any = col.match(/.{2}/g);
+  [r, g, b] = [
+    parseInt(r, 16) + amt,
+    parseInt(g, 16) + amt,
+    parseInt(b, 16) + amt,
+  ];
+
+  r = Math.max(Math.min(255, r), 0).toString(16);
+  g = Math.max(Math.min(255, g), 0).toString(16);
+  b = Math.max(Math.min(255, b), 0).toString(16);
 
+  const rr = (r.length < 2 ? '0' : '') + r;
+  const gg = (g.length < 2 ? '0' : '') + g;
+  const bb = (b.length < 2 ? '0' : '') + b;
+
+  return `#${rr}${gg}${bb}`;
+};
+
+export const generateRangeColors = (name: string, color: string) => {
+  let colors = { [name]: color };
+  for (let i = 1; i < 10; i++) {
+    if (i < 5) {
+      colors = {
+        ...colors,
+        [name + i * 100]: colorShade(color, (5 - i) * 32),
+      };
+    }
+    if (i === 5) {
+      colors = {
+        ...colors,
+        [name + i * 100]: color,
+      };
+    }
+    if (i > 5) {
+      colors = {
+        ...colors,
+        [name + i * 100]: colorShade(color, -((i - 5) * 32)),
+      };
+    }
+  }
+  return colors;
+};

package/src/utils/date.ts

@@ -1,8 +1,9 @@
-import { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
+import type { GroupBy } from '../components/SwapsGroup/SwapsGroup.types';
+import type { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
+
 import dayjs from 'dayjs';
-import { GroupBy } from '@rango-dev/ui';
 
-export const groupSwapsByDate: GroupBy = swaps => {
+export const groupSwapsByDate: GroupBy = (swaps) => {
   const output: Map<
     string,
     {
@@ -17,24 +18,17 @@ export const groupSwapsByDate: GroupBy = swaps => {
         swaps: [],
       },
     ],
-    [
-      'week',
-      {
-        title: 'This week',
-        swaps: [],
-      },
-    ],
     [
       'month',
       {
-        title: 'This month',
+        title: 'Last month',
         swaps: [],
       },
     ],
     [
       'year',
       {
-        title: 'This year',
+        title: 'Last year',
         swaps: [],
       },
     ],
@@ -48,14 +42,17 @@ export const groupSwapsByDate: GroupBy = swaps => {
   ]);
 
   const now = dayjs();
-  swaps.forEach(swap => {
+  swaps.forEach((swap) => {
     const swapDate = dayjs(Number(swap.creationTime));
-    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'))
+    if (now.isSame(swapDate, 'day')) {
+      output.get('today')?.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);
+    } else if (now.isSame(swapDate, 'year')) {
+      output.get('year')?.swaps.push(swap);
+    } else {
+      output.get('history')?.swaps.push(swap);
+    }
   });
 
   return Array.from(output.values());

package/src/utils/meta.ts

@@ -0,0 +1,9 @@
+import type { BlockchainMeta } from 'rango-sdk';
+
+export function getBlockchainDisplayNameFor(
+  blockchainName: string,
+  blockchains: BlockchainMeta[]
+): string | undefined {
+  return blockchains.find((blockchain) => blockchain.name === blockchainName)
+    ?.displayName;
+}

package/src/utils/numbers.ts

@@ -1,5 +1,8 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+
+import type { BestRouteResponse } from 'rango-sdk';
+
 import { BigNumber } from 'bignumber.js';
-import { BestRouteResponse } from 'rango-sdk';
 
 export const percentToString = (p: number, fractions = 0): string =>
   (p * 100).toFixed(fractions);
@@ -17,8 +20,12 @@ export const numberToString = (
   minDecimals: number | null = null,
   maxDecimals: number | null = null
 ): string => {
-  if (number === null || number === undefined) return '';
-  if (number === '') return '';
+  if (number === null || number === undefined) {
+    return '';
+  }
+  if (number === '') {
+    return '';
+  }
   const n = new BigNumber(number);
   const roundingMode = 1;
   let maxI = 1000;
@@ -29,8 +36,10 @@ export const numberToString = (
     }
   }
 
-  if (n.gte(10000)) return n.toFormat(0, roundingMode);
-  if (n.gte(1000))
+  if (n.gte(10000)) {
+    return n.toFormat(0, roundingMode);
+  }
+  if (n.gte(1000)) {
     return n.toFormat(
       Math.min(
         maxI,
@@ -38,7 +47,8 @@ export const numberToString = (
       ),
       roundingMode
     );
-  if (n.gte(100))
+  }
+  if (n.gte(100)) {
     return n.toFormat(
       Math.min(
         maxI,
@@ -46,7 +56,8 @@ export const numberToString = (
       ),
       roundingMode
     );
-  if (n.gte(1))
+  }
+  if (n.gte(1)) {
     return n.toFormat(
       Math.min(
         maxI,
@@ -54,7 +65,8 @@ export const numberToString = (
       ),
       roundingMode
     );
-  if (n.gte(0.01))
+  }
+  if (n.gte(0.01)) {
     return n.toFormat(
       Math.min(
         maxI,
@@ -62,8 +74,9 @@ export const numberToString = (
       ),
       roundingMode
     );
-  for (let i = minDecimals || 4; i < 17; i++)
-    if (n.gte(Math.pow(10, -i)))
+  }
+  for (let i = minDecimals || 4; i < 17; i++) {
+    if (n.gte(Math.pow(10, -i))) {
       return n.toFormat(
         Math.min(
           maxI,
@@ -71,7 +84,11 @@ export const numberToString = (
         ),
         roundingMode
       );
-  if (n.isEqualTo(0)) return '0';
+    }
+  }
+  if (n.isEqualTo(0)) {
+    return '0';
+  }
 
   return n.toFormat(
     Math.min(maxI, Math.min(maxDecimals || 100, Math.max(minDecimals || 0, 8))),
@@ -94,18 +111,32 @@ export const uint8ArrayToHex = (buffer: Uint8Array): string => {
 };
 
 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';
+  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;
+    if (!num.includes('.')) {
+      return num;
+    }
     const [b, f] = num.split('.');
     if (f && f.length > maxDecimals) {
       return `${b}.${f.substring(0, maxDecimals)}`;
@@ -134,3 +165,17 @@ export const containsText = (text: string, searchText: string) =>
 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();
+}

package/src/utils/routing.ts

@@ -1,29 +1,35 @@
-import {
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { BestRouteEqualityParams, Wallet } from '../types';
+import type { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
+import type {
   SimulationAssetAndAmount,
   SimulationValidationStatus,
 } from '@rango-dev/ui/dist/widget/ui/src/types/swaps';
+import type { BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
+
 import BigNumber from 'bignumber.js';
-import { BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
+
 import { areEqual } from './common';
-import { BestRouteEqualityParams, Wallet } from '../types';
 import { numberToString } from './numbers';
-import { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
 
 export function searchParamsToToken(
   tokens: Token[],
   searchParams: string | null,
   chain: BlockchainMeta | null
 ): Token | null {
-  if (!chain) return null;
+  if (!chain) {
+    return null;
+  }
   return (
     tokens.find((token) => {
       const symbolAndAddress = searchParams?.split('--');
-      if (symbolAndAddress?.length === 1)
+      if (symbolAndAddress?.length === 1) {
         return (
           token.symbol === symbolAndAddress[0] &&
           token.address === null &&
           token.blockchain === chain.name
         );
+      }
       return (
         token.symbol === symbolAndAddress?.[0] &&
         token.address === symbolAndAddress?.[1] &&
@@ -98,14 +104,18 @@ export function getRequiredBalanceOfWallet(
   selectedWallet: Wallet,
   fee: SimulationValidationStatus[] | null
 ): SimulationAssetAndAmount[] | null {
-  if (fee === null) return null;
+  if (fee === null) {
+    return null;
+  }
   const relatedFeeStatus = fee
     ?.find((item) => item.blockchain === selectedWallet.chain)
     ?.wallets.find(
       (wallet) =>
         wallet.address?.toLowerCase() === selectedWallet.address.toLowerCase()
     );
-  if (!relatedFeeStatus) return null;
+  if (!relatedFeeStatus) {
+    return null;
+  }
   return relatedFeeStatus.requiredAssets;
 }
 
@@ -115,8 +125,8 @@ export function isRouteParametersChanged(params: BestRouteEqualityParams) {
     return (
       !!currentState.fromToken &&
       !!currentState.toToken &&
-      (prevState.fromChain?.name !== currentState.fromChain?.name ||
-        prevState.toChain?.name !== currentState.toChain?.name ||
+      (prevState.fromBlockchain?.name !== currentState.fromBlockchain?.name ||
+        prevState.toBlockchain?.name !== currentState.toBlockchain?.name ||
         prevState.fromToken?.symbol !== currentState.fromToken?.symbol ||
         prevState.toToken?.symbol !== currentState.toToken?.symbol ||
         prevState.fromToken?.blockchain !== prevState.fromToken?.blockchain ||
@@ -142,7 +152,9 @@ export function isRouteParametersChanged(params: BestRouteEqualityParams) {
 export function getFormatedBestRoute(
   bestRoute: BestRouteResponse | null
 ): BestRouteResponse | null {
-  if (!bestRoute) return null;
+  if (!bestRoute) {
+    return null;
+  }
 
   const formatedSwaps = (bestRoute.result?.swaps || []).map((swap) => ({
     ...swap,
@@ -179,7 +191,11 @@ export function getFormatedPendingSwap(pendingSwap: PendingSwap): PendingSwap {
 
 //todo: refactor bestRoute store and add loadingStatus
 export const getBestRouteStatus = (loading: boolean, error: boolean) => {
-  if (loading) return 'loading';
-  if (error) return 'failed';
-  else return 'success';
+  if (loading) {
+    return 'loading';
+  }
+  if (error) {
+    return 'failed';
+  }
+  return 'success';
 };

package/src/utils/settings.ts

@@ -0,0 +1,57 @@
+import { useMetaStore } from '../store/meta';
+import { useSettingsStore } from '../store/settings';
+
+import { removeDuplicateFrom } from './common';
+
+export type LiquiditySourceType = 'BRIDGE' | 'AGGREGATOR' | 'DEX';
+
+export type UniqueSwappersGroupType = {
+  id: string;
+  groupTitle: string;
+  logo: string;
+  type: LiquiditySourceType;
+  selected: boolean;
+};
+
+export function getUniqueSwappersGroups(
+  supportedSwappers?: string[]
+): UniqueSwappersGroupType[] {
+  const swappers = useMetaStore.use.meta().swappers;
+  const disabledLiquiditySources =
+    useSettingsStore.use.disabledLiquiditySources();
+
+  const uniqueSupportedSwappersGroups: Array<UniqueSwappersGroupType> = [];
+
+  const uniqueGroup = removeDuplicateFrom(swappers.map((s) => s.swapperGroup));
+
+  uniqueGroup.map((uniqueGroupItem) => {
+    const swapperItem = swappers.find(
+      (swapper) => swapper.swapperGroup === uniqueGroupItem
+    );
+
+    if (swapperItem) {
+      let isSupportedSwapper = true;
+      if (supportedSwappers) {
+        isSupportedSwapper = supportedSwappers.some(
+          (supportedItem) => supportedItem === swapperItem.title
+        );
+      }
+
+      if (isSupportedSwapper) {
+        swapperItem.types.map((swapperTypeItem) => {
+          uniqueSupportedSwappersGroups.push({
+            id: swapperItem.swapperGroup,
+            groupTitle: swapperItem.swapperGroup,
+            logo: swapperItem.logo,
+            type: swapperTypeItem,
+            selected: !disabledLiquiditySources.includes(
+              swapperItem.swapperGroup
+            ),
+          });
+        });
+      }
+    }
+  });
+
+  return uniqueSupportedSwappersGroups;
+}