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

package/src/types/config.ts

@@ -3,7 +3,7 @@ import type { ProviderInterface } from '@rango-dev/wallets-react';
 import type { WalletType } from '@rango-dev/wallets-shared';
 import type { Asset } from 'rango-sdk';
 
-export type WidgetVariant = 'default' | 'expandable';
+export type WidgetVariant = 'default' | 'expanded' | 'full-expanded';
 
 /**
  * The above type defines a set of optional color properties for a widget.
@@ -171,8 +171,8 @@ export type Features = Partial<
  * that defines the various properties of the theme, such as colors, fonts, and others.
  * @property {boolean} externalWallets
  * If `externalWallets` is `true`, you should add `WidgetWallets` to your app.
- * @property {boolean} enableNewLiquiditySources - The `enableNewLiquiditySources` property is a boolean value that when you
- * set it to true, whenever a new liquidity source is added, it will be added to your list as well.
+ * @property {boolean} excludeLiquiditySources - The `excludeLiquiditySources` property is a boolean value that when you
+ * set it to true, the list of liquidity sources provided in `liquiditySources` will be excluded; otherwise, they will be included.
  * @property {Features} features - An optional object for configuring the visibility or enablement of various features.
  *   Keys include:
  *   - 'notification': Visibility state for the notification icon.
@@ -182,8 +182,11 @@ export type Features = Partial<
  *   - 'language': Visibility state for the language.
  *   - 'experimentalRoute': Enablement state for the experimental route.
  * @property {WidgetVariant} variant
- *   If it is expandable, multiple routes will show up on the home page;
+ *   If it is expanded, multiple routes will show up on the home page;
+ *   If it is full-expanded, multiple routes will show up on the home page with full routes;
  *   if not, you will need to go to a different page to see the suggested routes.
+ * @property {boolean} enableCentralizedSwappers
+ * If you want to enable routing from the centralized protocols like XO Swap, you could set this parameter to true.
  */
 
 export type WidgetConfig = {
@@ -202,7 +205,8 @@ export type WidgetConfig = {
   language?: Language;
   theme?: WidgetTheme;
   externalWallets?: boolean;
-  enableNewLiquiditySources?: boolean;
+  excludeLiquiditySources?: boolean;
   features?: Features;
   variant?: WidgetVariant;
+  enableCentralizedSwappers?: boolean;
 };

package/src/utils/colors.ts

@@ -1,68 +1,113 @@
 import type { WidgetColors, WidgetColorsKeys } from '../types';
 
-export const colorShade = (col: string, amt: number) => {
-  const RANGE = 255;
-  const COL = 3;
-  const RADIX = 16;
-
-  col = col.replace(/^#/, '');
-  if (col.length === COL) {
-    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, RADIX) + amt,
-    parseInt(g, RADIX) + amt,
-    parseInt(b, RADIX) + amt,
-  ];
-
-  r = Math.max(Math.min(RANGE, r), 0).toString(RADIX);
-  g = Math.max(Math.min(RANGE, g), 0).toString(RADIX);
-  b = Math.max(Math.min(RANGE, b), 0).toString(RADIX);
-
-  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 function generateShades(
+  baseColor: string,
+  prefix: string,
+  reverse?: boolean
+): { [key: string]: string } {
+  const BASE_SHADE_INDEX = 100;
+  const NUMBER_OF_COLORS = 9;
+  const SHADING_INCREMENT_MAX = 10; // For bright colors
+  const SHADING_INCREMENT_MIN = 6; // For dark colors
 
-export const generateRangeColors = (name: string, color: string) => {
-  const NUMBER_OF_COLORS = 10;
-  const HALF_NUMBER_OF_COLORS = 5;
-  const COLOR_SUFFIX = 100;
-  const AMT = 25;
-
-  let colors = { [name]: color };
-  for (let i = 1; i < NUMBER_OF_COLORS; i++) {
-    if (i < HALF_NUMBER_OF_COLORS) {
-      colors = {
-        ...colors,
-        [name + i * COLOR_SUFFIX]: colorShade(
-          color,
-          (HALF_NUMBER_OF_COLORS - i) * AMT
-        ),
-      };
-    }
-    if (i === HALF_NUMBER_OF_COLORS) {
-      colors = {
-        ...colors,
-        [name + i * COLOR_SUFFIX]: color,
-      };
-    }
-    if (i > HALF_NUMBER_OF_COLORS) {
-      colors = {
-        ...colors,
-        [name + i * COLOR_SUFFIX]: colorShade(
-          color,
-          -((i - HALF_NUMBER_OF_COLORS) * AMT)
-        ),
-      };
+  const HALF_NUMBER_OF_COLORS = 4;
+
+  const shadeIncrements: number[] = [];
+  let increment = 90;
+  for (let i = 0; i < NUMBER_OF_COLORS; i++) {
+    shadeIncrements.push(increment);
+    if (i + 1 === HALF_NUMBER_OF_COLORS) {
+      increment = 0;
+    } else {
+      increment -=
+        i >= HALF_NUMBER_OF_COLORS
+          ? SHADING_INCREMENT_MIN
+          : SHADING_INCREMENT_MAX;
     }
   }
 
-  return colors;
-};
+  // If 'reverse' is true, that means the color should be from dark to light
+  const decrementAmounts = reverse
+    ? shadeIncrements.slice().reverse()
+    : shadeIncrements;
+
+  const shades: { [key: string]: string } = {};
+
+  // Generate shades
+  for (let i = 0; i < NUMBER_OF_COLORS; i++) {
+    const shadeIndex = BASE_SHADE_INDEX + i * BASE_SHADE_INDEX;
+    const decrementAmount = decrementAmounts[i];
+
+    const shade: { [key: string]: string } = {
+      [`${prefix}${shadeIndex}`]: generateShade(baseColor, decrementAmount),
+    };
+    Object.assign(shades, shade);
+  }
+
+  return { ...shades, [prefix]: baseColor };
+}
+
+export function generateShade(
+  baseColor: string,
+  decrementAmount: number
+): string {
+  const [r, g, b] = convertToRGB(baseColor);
+  return `#${clamp(r + decrementAmount)}${clamp(g + decrementAmount)}${clamp(
+    b + decrementAmount
+  )}`;
+}
+
+export function convertToRGB(baseColor: string): number[] {
+  const COLOR_SLICE_START = 1;
+  const COLOR_SLICE_END = 3;
+  const BASE_COLOR_LENGTH = 7;
+
+  // Convert the base color to RGB components
+  const r: number = parseInt(
+    baseColor.slice(COLOR_SLICE_START, COLOR_SLICE_END),
+    16
+  );
+  const g: number = parseInt(
+    baseColor.slice(COLOR_SLICE_END, COLOR_SLICE_END + 2),
+    16
+  );
+  const b: number = parseInt(
+    baseColor.slice(COLOR_SLICE_END + 2, BASE_COLOR_LENGTH),
+    16
+  );
+
+  return [r, g, b];
+}
+
+// Function to clamp color component to valid range [0, 255] and convert to hex
+function clamp(color: number): string {
+  const MAX_COLOR_VALUE = 255;
+  const HEX_BASE = 16;
+  const HEX_LENGTH = -2;
+  return (
+    '0' + Math.max(0, Math.min(MAX_COLOR_VALUE, color)).toString(HEX_BASE)
+  )
+    .slice(HEX_LENGTH)
+    .toUpperCase();
+}
+
+export function isBright(baseColor: string) {
+  const BRIGHTNESS_THRESHOLD = 188;
+  const RED_COEFFICIENT = 299;
+  const GREEN_COEFFICIENT = 587;
+  const BLUE_COEFFICIENT = 114;
+  const BRIGHTNESS_DIVISOR = 1000;
+
+  const [r, g, b] = convertToRGB(baseColor);
+  const brightness =
+    (r * RED_COEFFICIENT + g * GREEN_COEFFICIENT + b * BLUE_COEFFICIENT) /
+    BRIGHTNESS_DIVISOR;
+  if (brightness > BRIGHTNESS_THRESHOLD) {
+    return true;
+  }
+  return false;
+}
+
 export const generateColors = (
   mainColors: { [x: string]: string },
   reverseNeutralRange: boolean,
@@ -83,25 +128,11 @@ export const generateColors = (
           ...listOfColors,
           [colorKey]: color,
         };
-      } else if (colorKey === 'neutral' && reverseNeutralRange) {
-        const range = generateRangeColors(colorKey, color);
-        listOfColors = {
-          ...listOfColors,
-          // Reverse the neutral shade
-          [`${colorKey}100`]: range[`${colorKey}900`],
-          [`${colorKey}200`]: range[`${colorKey}800`],
-          [`${colorKey}300`]: range[`${colorKey}700`],
-          [`${colorKey}400`]: range[`${colorKey}600`],
-          [`${colorKey}500`]: range[`${colorKey}500`],
-          [`${colorKey}600`]: range[`${colorKey}400`],
-          [`${colorKey}700`]: range[`${colorKey}300`],
-          [`${colorKey}800`]: range[`${colorKey}200`],
-          [`${colorKey}900`]: range[`${colorKey}100`],
-        };
       } else {
+        const reverse = colorKey === 'neutral' && reverseNeutralRange;
         listOfColors = {
           ...listOfColors,
-          ...generateRangeColors(colorKey, color),
+          ...generateShades(color, colorKey, reverse),
         };
       }
     }

package/src/utils/common.ts

@@ -1,4 +1,13 @@
+import type { Token } from 'rango-sdk';
+
 import { WIDGET_UI_ID } from '../constants';
+import {
+  MIN_LENGTH_SYMBOL_CONTAINS,
+  MIN_LENGTH_SYMBOL_START_WITH,
+  MIN_LENGTH_TOKEN_ADDRESS_CONTAINS,
+  MIN_LENGTH_TOKEN_NAME_CONTAINS,
+  MIN_LENGTH_TOKEN_NAME_EXACT_MATCH,
+} from '../constants/searchFor';
 
 export function removeDuplicateFrom<T>(array: T[]): T[] {
   return Array.from(new Set(array));
@@ -32,8 +41,180 @@ export function containsText(text: string, searchText: string): boolean {
   return text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
 }
 
+export function exactText(text: string, searchText: string): boolean {
+  return text.toLowerCase() === searchText.toLowerCase();
+}
+
+export function startWithText(text: string, searchText: string): boolean {
+  return text.toLowerCase().startsWith(searchText.toLowerCase());
+}
+
 export const getContainer = () =>
   document.getElementById(WIDGET_UI_ID.SWAP_BOX_ID) as HTMLElement;
 
 export const getExpanded = () =>
   document.getElementById(WIDGET_UI_ID.EXPANDED_BOX_ID) as HTMLElement;
+
+function compareExactMatchText(
+  searchFor: string,
+  textA: string | null,
+  textB: string | null
+) {
+  const exactMatchA = !!textA && exactText(textA, searchFor);
+  const exactMatchB = !!textB && exactText(textB, searchFor);
+  if (exactMatchA !== exactMatchB) {
+    return exactMatchA ? -1 : 1;
+  }
+
+  return 0;
+}
+
+function compareContainsText(
+  searchFor: string,
+  textA: string | null,
+  textB: string | null
+) {
+  const textContainsA = !!textA && containsText(textA, searchFor);
+  const textContainsB = !!textB && containsText(textB, searchFor);
+  if (textContainsA !== textContainsB) {
+    return textContainsA ? -1 : 1;
+  }
+
+  // If both texts contains the searched term, The shorter one has priority
+  if (textContainsA && textContainsB && textA?.length !== textB?.length) {
+    return textA?.length - textB?.length;
+  }
+
+  return 0;
+}
+
+function compareStartWithText(
+  searchFor: string,
+  textA: string | null,
+  textB: string | null
+) {
+  const textStartWithA = !!textA && startWithText(textA, searchFor);
+  const textStartWithB = !!textB && startWithText(textB, searchFor);
+  if (textStartWithA !== textStartWithB) {
+    return textStartWithA ? -1 : 1;
+  }
+
+  // If both texts start with the searched term, The shorter one has priority
+  if (textStartWithA && textStartWithB && textA?.length !== textB?.length) {
+    return textA?.length - textB?.length;
+  }
+
+  return 0;
+}
+
+export function compareWithSearchFor(
+  tokenA: Token,
+  tokenB: Token,
+  searchFor?: string
+): number {
+  if (!searchFor) {
+    return 0;
+  }
+
+  // 1: Check the order to exact match the symbol
+  const symbolExactMatchCompare = compareExactMatchText(
+    searchFor,
+    tokenA.symbol,
+    tokenB.symbol
+  );
+  if (symbolExactMatchCompare) {
+    return symbolExactMatchCompare;
+  }
+
+  // 2: Check the order to exact match the token name
+  if (searchFor.length >= MIN_LENGTH_TOKEN_NAME_EXACT_MATCH) {
+    const tokenNameExactMatchCompare = compareExactMatchText(
+      searchFor,
+      tokenA.name,
+      tokenB.name
+    );
+    if (tokenNameExactMatchCompare) {
+      return tokenNameExactMatchCompare;
+    }
+  }
+
+  // 3: Check symbol start with searchFor
+  if (searchFor.length >= MIN_LENGTH_SYMBOL_START_WITH) {
+    const symbolStartWithCompare = compareStartWithText(
+      searchFor,
+      tokenA.symbol,
+      tokenB.symbol
+    );
+
+    if (symbolStartWithCompare) {
+      return symbolStartWithCompare;
+    }
+  }
+
+  // 4: Check symbol Contains searchFor
+  if (searchFor.length >= MIN_LENGTH_SYMBOL_CONTAINS) {
+    const symbolContainsCompare = compareContainsText(
+      searchFor,
+      tokenA.symbol,
+      tokenB.symbol
+    );
+
+    if (symbolContainsCompare) {
+      return symbolContainsCompare;
+    }
+  }
+
+  // 5: Check token name start with searchFor
+  if (searchFor.length >= MIN_LENGTH_TOKEN_NAME_CONTAINS) {
+    const tokenNameStartWithCompare = compareStartWithText(
+      searchFor,
+      tokenA.name,
+      tokenB.name
+    );
+
+    if (tokenNameStartWithCompare) {
+      return tokenNameStartWithCompare;
+    }
+  }
+
+  // 6: Check token name Contains searchFor
+  if (searchFor.length >= MIN_LENGTH_TOKEN_NAME_CONTAINS) {
+    const tokenNameContainsCompare = compareContainsText(
+      searchFor,
+      tokenA.name,
+      tokenB.name
+    );
+
+    if (tokenNameContainsCompare !== 0) {
+      return tokenNameContainsCompare;
+    }
+  }
+
+  // 7: Check address start with searchFor
+  if (searchFor.length >= MIN_LENGTH_TOKEN_ADDRESS_CONTAINS) {
+    const addressStartWithCompare = compareStartWithText(
+      searchFor,
+      tokenA.address,
+      tokenB.address
+    );
+
+    if (addressStartWithCompare) {
+      return addressStartWithCompare;
+    }
+  }
+
+  // 8: Check address Contains searchFor
+  if (searchFor.length >= MIN_LENGTH_TOKEN_ADDRESS_CONTAINS) {
+    const addressContainCompare = compareContainsText(
+      searchFor,
+      tokenA.address,
+      tokenB.address
+    );
+
+    if (addressContainCompare !== 0) {
+      return addressContainCompare;
+    }
+  }
+
+  return 0;
+}

package/src/utils/configs.ts

@@ -1,4 +1,4 @@
-import type { Tokens } from '../types';
+import type { Tokens, WidgetVariant } from '../types';
 import type { Asset, BlockchainMeta, Token } from 'rango-sdk';
 
 import { RANGO_PUBLIC_API_KEY } from '../constants';
@@ -79,3 +79,14 @@ export const isBlockchainExcludedInConfig = (
     !blockchainsConfig.includes(blockchain.name)
   );
 };
+
+export const isVariantExpandable = (
+  isLargeScreen: boolean,
+  isExtraLargeScreen: boolean,
+  variant?: WidgetVariant
+) => {
+  return (
+    (variant === 'expanded' && (isLargeScreen || isExtraLargeScreen)) ||
+    (variant === 'full-expanded' && isExtraLargeScreen)
+  );
+};

package/src/utils/meta.ts

@@ -31,3 +31,24 @@ export function findToken(t: Asset, tokens: Token[]) {
 export function findBlockchain(name: string, blockchains: BlockchainMeta[]) {
   return blockchains.find((blockchain) => blockchain.name === name) ?? null;
 }
+
+export function isTokenNative(
+  token: Token,
+  blockchain: BlockchainMeta | undefined
+) {
+  if (!blockchain || !token) {
+    return false;
+  }
+
+  for (const feeAsset of blockchain.feeAssets) {
+    if (
+      token?.blockchain === feeAsset?.blockchain &&
+      token?.symbol === feeAsset?.symbol &&
+      token?.address === feeAsset?.address
+    ) {
+      return true;
+    }
+  }
+
+  return false;
+}

package/src/utils/swap.ts

@@ -478,6 +478,7 @@ export function createQuoteRequestBody(params: {
   affiliatePercent: number | null;
   affiliateWallets: { [key: string]: string } | null;
   destination?: string;
+  enableCentralizedSwappers?: boolean;
 }): BestRouteRequest {
   const {
     fromToken,
@@ -493,6 +494,7 @@ export function createQuoteRequestBody(params: {
     affiliatePercent,
     affiliateWallets,
     destination,
+    enableCentralizedSwappers,
   } = params;
   const selectedWalletsMap = selectedWallets?.reduce(
     (
@@ -544,6 +546,7 @@ export function createQuoteRequestBody(params: {
       ),
       swappersGroupsExclude: false,
     }),
+    enableCentralizedSwappers,
   };
   return requestBody;
 }
@@ -747,11 +750,7 @@ export function getLastConvertedTokenInFailedSwap(
 }
 
 export function shouldRetrySwap(pendingSwap: PendingSwap) {
-  return (
-    pendingSwap.status === 'failed' &&
-    !!pendingSwap.finishTime &&
-    new Date().getTime() - parseInt(pendingSwap.finishTime) < 4 * 3600 * 1000
-  );
+  return pendingSwap.status === 'failed';
 }
 
 export function confirmSwapDisabled(
@@ -775,3 +774,11 @@ export function confirmSwapDisabled(
       !isValidAddress(lastStepToBlockchain, customDestination))
   );
 }
+
+export function isTokensIdentical(tokenA: Token, tokenB: Token) {
+  return (
+    tokenA.blockchain === tokenB.blockchain &&
+    tokenA.symbol === tokenB.symbol &&
+    tokenA.address === tokenB.address
+  );
+}

package/src/utils/ui.ts

@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
 import type { WidgetTheme } from '../types';
 import type { createTheme } from '@rango-dev/ui';
-import type React from 'react';
 
 import {
   theme as baseThemeTokens,
   darkColors as defaultDarkColors,
 } from '@rango-dev/ui';
+import React from 'react';
 
 import { generateColors } from '../utils/colors';
 import { toHash } from '../utils/hash';
@@ -73,18 +73,20 @@ export function customizedThemeTokens(
 }
 
 export function joinList(
-  list: React.JSX.Element[],
+  list: { element: React.JSX.Element; key: string }[],
   divider: React.JSX.Element
 ) {
   if (list.length <= 1) {
-    return list;
+    return list.map(({ element, key }) => React.cloneElement(element, { key }));
   }
 
   const output: React.JSX.Element[] = [];
   list.forEach((item, index) => {
-    output.push(item);
+    const { element, key } = item;
+    output.push(React.cloneElement(element, { key }));
     if (index < list.length - 1) {
-      output.push(divider);
+      const key = `divider-${index}`;
+      output.push(React.cloneElement(divider, { key }));
     }
   });
 

package/src/utils/wallets.ts

@@ -381,25 +381,18 @@ export function formatBalance(balance: Balance | null): Balance | null {
   return formattedBalance;
 }
 
-function sortTokensByBalance(
+export function compareTokenBalance(
   token1Balance: Balance | null,
   token2Balance: Balance | null
 ): number {
-  if (token1Balance?.usdValue && token2Balance?.usdValue) {
+  if (token1Balance?.usdValue || token2Balance?.usdValue) {
     return (
-      parseFloat(token2Balance.usdValue) - parseFloat(token1Balance.usdValue)
+      parseFloat(token2Balance?.usdValue || '0') -
+      parseFloat(token1Balance?.usdValue || '0')
     );
   }
 
-  if (!token1Balance?.usdValue && token2Balance?.usdValue) {
-    return 1;
-  }
-
-  if (token1Balance?.usdValue && !token2Balance?.usdValue) {
-    return -1;
-  }
-
-  if (!token1Balance?.usdValue && !token2Balance?.usdValue) {
+  if (token1Balance?.amount || token2Balance?.amount) {
     return (
       parseFloat(token2Balance?.amount || '0') -
       parseFloat(token1Balance?.amount || '0')
@@ -409,41 +402,6 @@ function sortTokensByBalance(
   return 0;
 }
 
-function sortTokensByPinnedToken(
-  token1: Token,
-  token2: Token,
-  isTokenPinned: (token: Token) => boolean
-): number {
-  const isToken1Pinned = isTokenPinned(token1);
-  const isToken2Pinned = isTokenPinned(token2);
-
-  if (isToken1Pinned === isToken2Pinned) {
-    return 0;
-  }
-  if (isToken1Pinned) {
-    return -1;
-  }
-  return 1;
-}
-export function sortTokens(
-  tokens: Token[],
-  getBalanceFor: (token: Token) => Balance | null,
-  isTokenPinned: (token: Token) => boolean
-) {
-  tokens.sort((token1, token2) => {
-    const token1Balance = getBalanceFor(token1);
-    const token2Balance = getBalanceFor(token2);
-    // Check pinned tokens
-    const isTokenPin = sortTokensByPinnedToken(token1, token2, isTokenPinned);
-
-    return isTokenPin !== 0
-      ? isTokenPin
-      : sortTokensByBalance(token1Balance, token2Balance);
-  });
-
-  return tokens;
-}
-
 export function areTokensEqual(
   tokenA: Pick<Token, 'blockchain' | 'symbol' | 'address'> | null,
   tokenB: Pick<Token, 'blockchain' | 'symbol' | 'address'> | null

package/dist/hooks/useMobileDetect.d.ts

@@ -1,3 +0,0 @@
-declare const useMobileDetect: () => boolean;
-export default useMobileDetect;
-//# sourceMappingURL=useMobileDetect.d.ts.map

package/dist/hooks/useMobileDetect.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useMobileDetect.d.ts","sourceRoot":"","sources":["../../src/hooks/useMobileDetect.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,eAAe,eAcpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/pages/ThemePage.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare function ThemePage(): React.JSX.Element;
-//# sourceMappingURL=ThemePage.d.ts.map

package/dist/pages/ThemePage.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ThemePage.d.ts","sourceRoot":"","sources":["../../src/pages/ThemePage.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,wBAAgB,SAAS,sBAiExB"}

package/src/hooks/useMobileDetect.ts

@@ -1,21 +0,0 @@
-import { useEffect, useState } from 'react';
-
-const MIN_WIDTH_WINDOW = 768;
-
-const useMobileDetect = () => {
-  const [isMobile, setIsMobile] = useState(false);
-
-  const handleResize = () => {
-    setIsMobile(window.innerWidth < MIN_WIDTH_WINDOW);
-  };
-
-  useEffect(() => {
-    handleResize(); // Initial check
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
-  return isMobile;
-};
-
-export default useMobileDetect;