@rango-dev/widget-embedded 0.23.1-next.8 → 0.24.0

package/src/pages/SelectSwapItemsPage.tsx

@@ -14,7 +14,6 @@ import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useWalletsStore } from '../store/wallets';
-import { sortTokens } from '../utils/wallets';
 
 interface PropTypes {
   type: 'source' | 'destination';
@@ -34,7 +33,6 @@ export function SelectSwapItemsPage(props: PropTypes) {
   } = useQuoteStore();
   const getBalanceFor = useWalletsStore.use.getBalanceFor();
   const [searchedFor, setSearchedFor] = useState<string>('');
-  const { isTokenPinned } = useAppStore();
 
   const selectedBlockchain = type === 'source' ? fromBlockchain : toBlockchain;
   const selectedBlockchainName = selectedBlockchain?.name ?? '';
@@ -47,12 +45,9 @@ export function SelectSwapItemsPage(props: PropTypes) {
     type,
     blockchain: selectedBlockchainName,
     searchFor: searchedFor,
+    getBalanceFor: getBalanceFor,
   });
 
-  const checkIsTokenPinned = (token: Token) => isTokenPinned(token, type);
-
-  const tokensList = sortTokens(tokens, getBalanceFor, checkIsTokenPinned);
-
   const updateBlockchain = (blockchain: BlockchainMeta) => {
     if (type === 'source') {
       setFromBlockchain(blockchain);
@@ -101,7 +96,7 @@ export function SelectSwapItemsPage(props: PropTypes) {
         />
         <Divider size={16} />
         <TokenList
-          list={tokensList}
+          list={tokens}
           selectedBlockchain={selectedBlockchainName}
           searchedFor={searchedFor}
           type={type}

package/src/pages/SettingsPage.tsx

@@ -32,7 +32,6 @@ export function SettingsPage() {
       updateCampaignMode('liquiditySources', undefined);
     }
   };
-
   return (
     <Layout
       header={{

package/src/store/slices/config.ts

@@ -6,8 +6,9 @@ export const DEFAULT_CONFIG: WidgetConfig = {
   apiKey: '',
   title: undefined,
   multiWallets: true,
-  enableNewLiquiditySources: true,
+  excludeLiquiditySources: true,
   customDestination: true,
+  variant: 'default',
 };
 
 interface IframeConfigs {
@@ -72,7 +73,7 @@ export const createConfigSlice: StateCreatorWithInitialData<
       const { config, campaignMode } = get();
       return campaignMode.liquiditySources?.length
         ? false
-        : !!config.enableNewLiquiditySources;
+        : !!config.excludeLiquiditySources;
     },
     isInCampaignMode: () => {
       const { campaignMode } = get();

package/src/store/slices/data.ts

@@ -1,14 +1,16 @@
 // We keep all the received data from server in this slice
 
 import type { ConfigSlice } from './config';
+import type { Balance } from '../../types';
 import type { BlockchainMeta, SwapperMeta, Token } from 'rango-sdk';
 import type { StateCreator } from 'zustand';
 
 import { httpService as sdk } from '../../services/httpService';
-import { containsText } from '../../utils/common';
+import { compareWithSearchFor, containsText } from '../../utils/common';
 import { isTokenExcludedInConfig } from '../../utils/configs';
+import { isTokenNative } from '../../utils/meta';
 import { sortLiquiditySourcesByGroupTitle } from '../../utils/settings';
-import { areTokensEqual } from '../../utils/wallets';
+import { areTokensEqual, compareTokenBalance } from '../../utils/wallets';
 
 type BlockchainOptions = {
   type?: 'source' | 'destination';
@@ -19,10 +21,12 @@ type TokenOptions = {
   // filter by an specific blockchain
   blockchain?: string;
   searchFor?: string;
+  getBalanceFor?: (token: Token) => Balance | null;
 };
+
 export type FetchStatus = 'loading' | 'success' | 'failed';
 export interface DataSlice {
-  _blockchains: BlockchainMeta[];
+  _blockchainsMapByName: Map<string, BlockchainMeta>;
   _tokens: Token[];
   _popularTokens: Token[];
   _swappers: SwapperMeta[];
@@ -31,7 +35,6 @@ export interface DataSlice {
   tokens: (options?: TokenOptions) => Token[];
   swappers: () => SwapperMeta[];
   isTokenPinned: (token: Token, type: 'source' | 'destination') => boolean;
-
   fetch: () => Promise<void>;
 }
 
@@ -42,14 +45,17 @@ export const createDataSlice: StateCreator<
   DataSlice
 > = (set, get) => ({
   // State
-  _blockchains: [],
+  _blockchainsMapByName: new Map<string, BlockchainMeta>(),
   _tokens: [],
   _popularTokens: [],
   _swappers: [],
   fetchStatus: 'loading',
   // Selectors
   blockchains: (options) => {
-    const blockchainsFromState = get()._blockchains;
+    const blockchainsMapByName = get()._blockchainsMapByName;
+    const blockchainsFromState = Array.from(
+      blockchainsMapByName?.values() || []
+    );
 
     if (!options || !options?.type) {
       return blockchainsFromState;
@@ -76,6 +82,7 @@ export const createDataSlice: StateCreator<
   },
   tokens: (options) => {
     const tokensFromState = get()._tokens;
+    const blockchainsMapByName = get()._blockchainsMapByName;
 
     if (!options || !options?.type) {
       return tokensFromState;
@@ -127,29 +134,62 @@ export const createDataSlice: StateCreator<
 
         return true;
       })
-      .sort((a, b) => {
-        // Check pinned tokens
-        if (get().isTokenPinned(a, options.type)) {
-          return -1;
+      .sort((tokenA, tokenB) => {
+        //1. sort by pinned tokens
+        const isToken1Pinned = get().isTokenPinned(tokenA, options.type);
+        const isToken2Pinned = get().isTokenPinned(tokenB, options.type);
+        if (isToken1Pinned !== isToken2Pinned) {
+          return isToken1Pinned ? -1 : 1;
         }
-        if (get().isTokenPinned(b, options.type)) {
-          return 1;
+
+        //2. sort by balance
+        if (options.getBalanceFor) {
+          const token1Balance = options.getBalanceFor(tokenA);
+          const token2Balance = options.getBalanceFor(tokenB);
+          const balanceCompare = compareTokenBalance(
+            token1Balance,
+            token2Balance
+          );
+          if (balanceCompare !== 0) {
+            return balanceCompare;
+          }
         }
 
-        // Check secondary coins
-        if (a.isSecondaryCoin) {
-          return 1;
+        //3. sort by token popularity
+        if (tokenA.isPopular !== tokenB.isPopular) {
+          return tokenA.isPopular ? -1 : 1;
         }
-        if (b.isSecondaryCoin) {
-          return -1;
+
+        //4. sort by search phrase
+        if (options.searchFor) {
+          const symbolSearchForCompare = compareWithSearchFor(
+            tokenA,
+            tokenB,
+            options.searchFor
+          );
+          if (symbolSearchForCompare) {
+            return symbolSearchForCompare;
+          }
         }
 
-        // Check it has an address or not.
-        if (!a.address && b.address) {
-          return -1;
+        const blockChainA = blockchainsMapByName.get(tokenA.blockchain);
+        const blockChainB = blockchainsMapByName.get(tokenB.blockchain);
+
+        //5. sort by native token
+        const isNativeTokenA = isTokenNative(tokenA, blockChainA);
+        const isNativeTokenB = isTokenNative(tokenB, blockChainB);
+        if (isNativeTokenA !== isNativeTokenB) {
+          return isNativeTokenA ? -1 : 1;
         }
-        if (a.address && !b.address) {
-          return 1;
+
+        //6. sort by token isSecondary
+        if (tokenA.isSecondaryCoin !== tokenB.isSecondaryCoin) {
+          return tokenA.isSecondaryCoin ? 1 : -1;
+        }
+
+        //7. sort by blockchain order
+        if (!!blockChainA && !!blockChainB) {
+          return blockChainA.sort - blockChainB.sort;
         }
 
         return 0;
@@ -177,12 +217,12 @@ export const createDataSlice: StateCreator<
     const liquiditySources =
       campaignModeLiquiditySource ?? config.liquiditySources;
 
-    const enableNewLiquiditySources = campaignModeLiquiditySource
+    const excludeLiquiditySources = campaignModeLiquiditySource
       ? false
-      : config.enableNewLiquiditySources;
+      : config.excludeLiquiditySources;
 
     /*
-     * If the enableNewLiquiditySources flag is set to true, we return all swappers that are not included in the config.
+     * If the excludeLiquiditySources flag is set to true, we return all swappers that are not included in the config.
      * Otherwise, we return all swappers that are included in the config.
      */
     const swappers = get()._swappers.filter((swapper) => {
@@ -191,7 +231,7 @@ export const createDataSlice: StateCreator<
       );
 
       const shouldExcludeLiquiditySources =
-        enableNewLiquiditySources ||
+        excludeLiquiditySources ||
         !liquiditySources ||
         liquiditySources.length === 0;
 
@@ -207,10 +247,17 @@ export const createDataSlice: StateCreator<
   // Actions
   fetch: async () => {
     try {
-      const response = await sdk().getAllMetadata();
+      const { enableCentralizedSwappers } = get().config;
+      const response = await sdk().getAllMetadata({
+        enableCentralizedSwappers,
+      });
 
       set({ fetchStatus: 'success' });
-      const blockchains: BlockchainMeta[] = [];
+      const blockchainsMapByName: Map<string, BlockchainMeta> = new Map<
+        string,
+        BlockchainMeta
+      >();
+
       const tokens: Token[] = [];
       const popularTokens: Token[] = response.popularTokens;
       const swappers: SwapperMeta[] = response.swappers;
@@ -223,20 +270,21 @@ export const createDataSlice: StateCreator<
         tokens.push(token);
       });
 
-      response.blockchains.forEach((blockchain) => {
+      const sortedBlockchain = response.blockchains.sort(
+        (a, b) => a.sort - b.sort
+      );
+
+      sortedBlockchain.forEach((blockchain) => {
         if (
           blockchain.enabled &&
           blockchainsWithAtLeastOneToken.has(blockchain.name)
         ) {
-          blockchains.push(blockchain);
+          blockchainsMapByName.set(blockchain.name, blockchain);
         }
       });
 
-      // Sort
-      blockchains.sort((a, b) => a.sort - b.sort);
-
       set({
-        _blockchains: blockchains,
+        _blockchainsMapByName: blockchainsMapByName,
         _tokens: tokens,
         _popularTokens: popularTokens,
         _swappers: swappers,

package/src/store/slices/settings.ts

@@ -153,16 +153,22 @@ export const createSettingsSlice: StateCreator<
       language,
     })),
   updateSettings: (nextConfig: WidgetConfig) => {
-    const { features } = nextConfig;
+    const { features, theme } = nextConfig;
 
     const isThemeHidden = isFeatureHidden('theme', features);
     const isLanguageHidden = isFeatureHidden('language', features);
     const isLiquidityHidden = isFeatureHidden('liquiditySource', features);
+    const singleTheme = theme?.singleTheme;
 
     set({
-      ...(isThemeHidden && { theme: 'auto' }),
-      ...(isLanguageHidden && { language: DEFAULT_LANGUAGE }),
-      ...(isLiquidityHidden && { disabledLiquiditySources: [] }),
+      ...(isThemeHidden && { theme: nextConfig.theme?.mode || 'auto' }),
+      ...(singleTheme && { theme: nextConfig.theme?.mode || 'light' }),
+      ...(isLanguageHidden && {
+        language: nextConfig.language || DEFAULT_LANGUAGE,
+      }),
+      ...(isLiquidityHidden && {
+        disabledLiquiditySources: nextConfig.liquiditySources || [],
+      }),
     });
   },
 });

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