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

package/src/types/routing.ts

@@ -1,9 +1,10 @@
-import { RouteState } from '../store/bestRoute';
-import { SettingsState } from '../store/settings';
+/* eslint-disable @typescript-eslint/prefer-enum-initializers */
+import type { RouteState } from '../store/bestRoute';
+import type { SettingsState } from '../store/settings';
 
 interface BestRouteStoreParams {
-  fromChain?: RouteState['fromChain'];
-  toChain?: RouteState['toChain'];
+  fromBlockchain?: RouteState['fromBlockchain'];
+  toBlockchain?: RouteState['toBlockchain'];
   fromToken?: RouteState['fromToken'];
   toToken?: RouteState['toToken'];
   inputAmount?: RouteState['inputAmount'];
@@ -32,45 +33,45 @@ export enum ConfirmSwapErrorTypes {
   NO_ROUTE,
   ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS,
   REQUEST_FAILED,
-  INSUFFICIENT_SLIPPAGE,
-  INSUFFICIENT_BALANCE,
+  REQUEST_CANCELED,
 }
 
 export type ConfirmSwapError =
   | {
-      type: ConfirmSwapErrorTypes.REQUEST_FAILED;
-      status?: number;
-    }
-  | {
-      type: ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE;
-      minRequiredSlippage: string | null;
+      type: ConfirmSwapErrorTypes.NO_ROUTE;
+      diagnosisMessage?: string;
     }
-  | { type: ConfirmSwapErrorTypes.INSUFFICIENT_BALANCE; messages: string[] }
   | {
-      type: Exclude<
-        ConfirmSwapErrorTypes,
-        | ConfirmSwapErrorTypes.REQUEST_FAILED
-        | ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE
-        | ConfirmSwapErrorTypes.INSUFFICIENT_BALANCE
-      >;
+      type: Exclude<ConfirmSwapErrorTypes, ConfirmSwapErrorTypes.NO_ROUTE>;
     };
 
-export type ConfirmSwapWarnings =
+export enum RouteWarningType {
+  ROUTE_UPDATED,
+  ROUTE_SWAPPERS_UPDATED,
+  ROUTE_COINS_UPDATED,
+  ROUTE_AND_OUTPUT_AMOUNT_UPDATED,
+}
+
+export type RouteWarning =
   | {
-      type: ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED;
+      type: RouteWarningType.ROUTE_AND_OUTPUT_AMOUNT_UPDATED;
       newOutputAmount: string;
       percentageChange: string;
     }
   | {
       type: Exclude<
-        ConfirmSwapWarningTypes,
-        ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED
+        RouteWarningType,
+        RouteWarningType.ROUTE_AND_OUTPUT_AMOUNT_UPDATED
       >;
     };
 
-export enum ConfirmSwapWarningTypes {
-  ROUTE_UPDATED,
-  ROUTE_SWAPPERS_UPDATED,
-  ROUTE_COINS_UPDATED,
-  ROUTE_AND_OUTPUT_AMOUNT_UPDATED,
+export enum SlippageWarningType {
+  INSUFFICIENT_SLIPPAGE,
+  HIGH_SLIPPAGE,
 }
+
+export type ConfirmSwapWarnings = {
+  route: RouteWarning | null;
+  balance: { messages: string[] } | null;
+  slippage: { type: SlippageWarningType; slippage: string | null } | null;
+};

package/src/types/swap.ts

@@ -1,15 +1,23 @@
-import { SwapSavedSettings } from 'rango-types/lib';
+import type { SwapSavedSettings } from 'rango-types/lib';
 
 export type PendingSwapSettings = Omit<
   SwapSavedSettings,
   'disabledSwappersIds'
 >;
 
+export enum ButtonState {
+  WAITFORCONNECTING = 'waitForConnecting',
+  SWAP = 'swap',
+  NEEDTOCONFIRM = 'needToConfirm',
+  WARNING = 'warning',
+}
+
 export type SwapButtonState = (
   | { disabled: true }
   | { disabled: false; hasWarning?: boolean }
 ) & {
   title: string;
+  state: ButtonState;
 };
 
 export type ConvertedToken = {

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,58 @@ 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;
+};
 
+export const getContainer = () =>
+  document.getElementById('swap-box') as HTMLElement;

package/src/utils/configs.ts

@@ -1,9 +1,9 @@
+import { RANGO_PUBLIC_API_KEY } from '../constants';
+
 export interface Configs {
   API_KEY: string;
 }
 
-const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
-
 let configs: Configs = {
   API_KEY: RANGO_PUBLIC_API_KEY,
 };
@@ -18,6 +18,9 @@ export function setConfig(name: keyof Configs, value: any) {
   return value;
 }
 
+/**
+ * Getting new configs from params and reset the value of global `configs` with provided param.
+ */
 export function initConfig(nextConfigs: Configs) {
   let clonedConfigs;
   if (typeof structuredClone === 'function') {
@@ -28,3 +31,6 @@ export function initConfig(nextConfigs: Configs) {
   configs = clonedConfigs;
   return configs;
 }
+
+export const DEFAULT_PRIMARY_RADIUS = 20;
+export const DEFAULT_SECONDARY_RADIUS = 25;

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)}`;
@@ -116,8 +147,9 @@ export function removeExtraDecimals(num: string, maxDecimals: number): string {
   }
 }
 
-export const totalArrivalTime = (data: BestRouteResponse | null) =>
-  data?.result?.swaps?.reduce((a, b) => a + b.estimatedTimeInSeconds, 0) || 0;
+export const totalArrivalTime = (
+  data: { estimatedTimeInSeconds: number | null }[] | undefined
+) => data?.reduce((a, b) => a + (b.estimatedTimeInSeconds ?? 0), 0) || 0;
 
 export const rawFees = (data: BestRouteResponse): string =>
   (
@@ -134,3 +166,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,50 @@
-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 { PriceImpactWarningLevel } from '@rango-dev/ui';
+import type {
   SimulationAssetAndAmount,
   SimulationValidationStatus,
 } from '@rango-dev/ui/dist/widget/ui/src/types/swaps';
+import type {
+  Asset,
+  BestRouteResponse,
+  BlockchainMeta,
+  Token,
+} from 'rango-sdk';
+
 import BigNumber from 'bignumber.js';
-import { BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
+
+import {
+  GAS_FEE_MAX_DECIMALS,
+  GAS_FEE_MIN_DECIMALS,
+  HIGHT_PRICE_IMPACT,
+  LOW_PRICE_IMPACT,
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+} from '../constants/routing';
+
 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 +119,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 +140,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 ||
@@ -139,47 +164,100 @@ export function isRouteParametersChanged(params: BestRouteEqualityParams) {
   return false;
 }
 
-export function getFormatedBestRoute(
+export function getFormattedBestRoute(
   bestRoute: BestRouteResponse | null
 ): BestRouteResponse | null {
-  if (!bestRoute) return null;
+  if (!bestRoute) {
+    return null;
+  }
 
-  const formatedSwaps = (bestRoute.result?.swaps || []).map((swap) => ({
+  const formattedSwaps = (bestRoute.result?.swaps || []).map((swap) => ({
     ...swap,
-    fromAmount: numberToString(swap.fromAmount, 6, 6),
-    toAmount: numberToString(swap.toAmount, 6, 6),
+    fromAmount: numberToString(
+      swap.fromAmount,
+      TOKEN_AMOUNT_MIN_DECIMALS,
+      TOKEN_AMOUNT_MAX_DECIMALS
+    ),
+    toAmount: numberToString(
+      swap.toAmount,
+      TOKEN_AMOUNT_MIN_DECIMALS,
+      TOKEN_AMOUNT_MAX_DECIMALS
+    ),
   }));
 
   return {
     ...bestRoute,
     ...(bestRoute.result && {
-      result: { ...bestRoute.result, swaps: formatedSwaps },
+      result: { ...bestRoute.result, swaps: formattedSwaps },
     }),
   };
 }
 
-export function getFormatedPendingSwap(pendingSwap: PendingSwap): PendingSwap {
-  const formatedSteps = pendingSwap.steps.map((step) => ({
+export function getFormattedPendingSwap(pendingSwap: PendingSwap): PendingSwap {
+  const formattedSteps = pendingSwap.steps.map((step) => ({
     ...step,
-    feeInUsd: numberToString(step.feeInUsd, 4, 4),
-    outputAmount: numberToString(step.outputAmount, 6, 6),
+    feeInUsd: numberToString(
+      step.feeInUsd,
+      GAS_FEE_MIN_DECIMALS,
+      GAS_FEE_MAX_DECIMALS
+    ),
+    outputAmount: numberToString(
+      step.outputAmount,
+      TOKEN_AMOUNT_MIN_DECIMALS,
+      TOKEN_AMOUNT_MAX_DECIMALS
+    ),
     expectedOutputAmountHumanReadable: numberToString(
       step.expectedOutputAmountHumanReadable,
-      6,
-      6
+      TOKEN_AMOUNT_MIN_DECIMALS,
+      TOKEN_AMOUNT_MAX_DECIMALS
     ),
   }));
 
   return {
     ...pendingSwap,
-    inputAmount: numberToString(pendingSwap.inputAmount, 6, 6),
-    steps: formatedSteps,
+    inputAmount: numberToString(
+      pendingSwap.inputAmount,
+      TOKEN_AMOUNT_MIN_DECIMALS,
+      TOKEN_AMOUNT_MAX_DECIMALS
+    ),
+    steps: formattedSteps,
   };
 }
 
 //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';
 };
+
+export function getPriceImpactLevel(
+  priceImpact: number
+): PriceImpactWarningLevel {
+  let warningLevel: PriceImpactWarningLevel = undefined;
+  if (priceImpact <= LOW_PRICE_IMPACT && priceImpact > HIGHT_PRICE_IMPACT) {
+    warningLevel = 'low';
+  } else if (priceImpact <= HIGHT_PRICE_IMPACT) {
+    warningLevel = 'high';
+  }
+
+  return warningLevel;
+}
+
+export function findCommonTokens<T extends Asset[], R extends Asset[]>(
+  listA: T,
+  listB: R
+) {
+  const tokenToString = (token: Asset): string =>
+    `${token.symbol}-${token.blockchain}-${token.address ?? ''}`;
+
+  const set = new Set();
+
+  listA.forEach((token) => set.add(tokenToString(token)));
+
+  return listB.filter((token) => set.has(tokenToString(token))) as R;
+}