@rango-dev/widget-embedded 0.14.1-next.15 → 0.14.1-next.17

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.test.ts

@@ -0,0 +1,273 @@
+import type { BlockchainMeta } from 'rango-sdk';
+
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { MOST_USED_BLOCKChAINS } from './usePrepareBlockchainList.constants';
+import {
+  generateSortByPreferredBlockchainsFor,
+  prepare,
+  sortByMostUsedBlockchains,
+} from './usePrepareBlockchainList.helpers';
+import { sampleBlockchains } from './usePrepareBlockchainList.mock';
+
+describe('usePrepareBlockchainList', () => {
+  let sample: BlockchainMeta[] = [];
+
+  beforeEach(() => {
+    sample = JSON.parse(JSON.stringify(sampleBlockchains));
+  });
+
+  it('should sort blockchains by most used ones.', () => {
+    const sortedBlockchainsList = sample.sort(sortByMostUsedBlockchains);
+
+    const mostUsedCount = MOST_USED_BLOCKChAINS.length;
+    const expected = MOST_USED_BLOCKChAINS;
+    const received = sortedBlockchainsList
+      .map((blockchain) => blockchain.name)
+      .slice(0, mostUsedCount);
+
+    expect(expected).toEqual(received);
+  });
+
+  it('should sort blockchains by user preferences', () => {
+    const preferredBlockchains = ['UMEE', 'BANDCHAIN', 'LINEA'];
+    const sortedBlockchainsList = sample.sort(
+      generateSortByPreferredBlockchainsFor(preferredBlockchains)
+    );
+
+    const expected = [
+      'UMEE',
+      'BANDCHAIN',
+      'LINEA',
+      'ETH',
+      'BSC',
+      'ARBITRUM',
+      'POLYGON',
+      'ZKSYNC',
+      'STARKNET',
+      'OPTIMISM',
+      'AVAX_CCHAIN',
+      'POLYGONZK',
+      'TRON',
+      'BTC',
+      'COSMOS',
+      'OSMOSIS',
+      'NEUTRON',
+      'NOBLE',
+      'SOLANA',
+      'CRONOS',
+      'BNB',
+      'AURORA',
+      'MAYA',
+      'THOR',
+      'BOBA',
+      'MOONBEAM',
+      'MOONRIVER',
+      'OKC',
+      'BOBA_AVALANCHE',
+      'LTC',
+      'BCH',
+      'HECO',
+      'STARGAZE',
+      'CRYPTO_ORG',
+      'CHIHUAHUA',
+      'COMDEX',
+      'REGEN',
+      'IRIS',
+      'EMONEY',
+      'JUNO',
+      'STRIDE',
+      'MARS',
+      'TERRA',
+      'BITSONG',
+      'AKASH',
+      'KI',
+      'PERSISTENCE',
+      'MEDIBLOC',
+      'KUJIRA',
+      'SENTINEL',
+      'INJECTIVE',
+      'SECRET',
+      'KONSTELLATION',
+      'STARNAME',
+      'BITCANNA',
+      'DESMOS',
+      'LUMNETWORK',
+    ];
+    const received = sortedBlockchainsList.map((blockchain) => blockchain.name);
+
+    expect(expected).toEqual(received);
+  });
+
+  it('should prepare the list by most used and user preferences', () => {
+    const listLimit = 10;
+    const preferredBlockchains = ['BTC', 'SOLANA', 'COSMOS', 'ETH'];
+    const expected = [
+      'BTC',
+      'SOLANA',
+      'ETH',
+      'COSMOS',
+      'OSMOSIS',
+      'BSC',
+      'ARBITRUM',
+      'POLYGON',
+      'ZKSYNC',
+      'STARKNET',
+      'OPTIMISM',
+      'AVAX_CCHAIN',
+      'POLYGONZK',
+      'LINEA',
+      'TRON',
+      'NEUTRON',
+      'NOBLE',
+      'CRONOS',
+      'BNB',
+      'AURORA',
+      'MAYA',
+      'THOR',
+      'BOBA',
+      'MOONBEAM',
+      'MOONRIVER',
+      'OKC',
+      'BOBA_AVALANCHE',
+      'LTC',
+      'BCH',
+      'HECO',
+      'STARGAZE',
+      'CRYPTO_ORG',
+      'CHIHUAHUA',
+      'BANDCHAIN',
+      'COMDEX',
+      'REGEN',
+      'IRIS',
+      'EMONEY',
+      'JUNO',
+      'STRIDE',
+      'MARS',
+      'TERRA',
+      'BITSONG',
+      'AKASH',
+      'KI',
+      'PERSISTENCE',
+      'MEDIBLOC',
+      'KUJIRA',
+      'SENTINEL',
+      'INJECTIVE',
+      'SECRET',
+      'KONSTELLATION',
+      'STARNAME',
+      'BITCANNA',
+      'UMEE',
+      'DESMOS',
+      'LUMNETWORK',
+    ];
+    const received = prepare(sample, preferredBlockchains, {
+      limit: listLimit,
+    });
+
+    const receivedListNames = received.list.map(
+      (blockchain) => blockchain.name
+    );
+    const receivedMoreNames = received.more.map(
+      (blockchain) => blockchain.name
+    );
+
+    expect(received.list).toHaveLength(listLimit);
+    expect(received.more).toHaveLength(expected.length - listLimit);
+    expect(expected).toEqual([...receivedListNames, ...receivedMoreNames]);
+
+    // Check duplication
+    receivedListNames.forEach((listName) => {
+      expect(receivedMoreNames).not.toContain(listName);
+    });
+
+    // Check preferred blockchains to be on the main list
+    preferredBlockchains.forEach((blockchain) => {
+      expect(receivedListNames).toContain(blockchain);
+    });
+  });
+
+  it('should prepare the list correctly if user has a long list of preferences ', () => {
+    const listLimit = 10;
+    const preferredBlockchains = [
+      'ETH',
+      'BTC',
+      'SOLANA',
+      'CRYPTO_ORG',
+      'TRON',
+      'BOBA_AVALANCHE',
+      'AKASH',
+      'LUMNETWORK',
+      'KONSTELLATION',
+      'BANDCHAIN',
+      'INJECTIVE',
+    ];
+    const expected = [
+      'ETH',
+      'BTC',
+      'SOLANA',
+      'CRYPTO_ORG',
+      'TRON',
+      'BOBA_AVALANCHE',
+      'AKASH',
+      'LUMNETWORK',
+      'KONSTELLATION',
+      'BANDCHAIN',
+      'INJECTIVE',
+      'COSMOS',
+      'OSMOSIS',
+      'BSC',
+      'ARBITRUM',
+      'POLYGON',
+      'ZKSYNC',
+      'STARKNET',
+      'OPTIMISM',
+      'AVAX_CCHAIN',
+      'POLYGONZK',
+      'LINEA',
+      'NEUTRON',
+      'NOBLE',
+      'CRONOS',
+      'BNB',
+      'AURORA',
+      'MAYA',
+      'THOR',
+      'BOBA',
+      'MOONBEAM',
+      'MOONRIVER',
+      'OKC',
+      'LTC',
+      'BCH',
+      'HECO',
+      'STARGAZE',
+      'CHIHUAHUA',
+      'COMDEX',
+      'REGEN',
+      'IRIS',
+      'EMONEY',
+      'JUNO',
+      'STRIDE',
+      'MARS',
+      'TERRA',
+      'BITSONG',
+      'KI',
+      'PERSISTENCE',
+      'MEDIBLOC',
+      'KUJIRA',
+      'SENTINEL',
+      'SECRET',
+      'STARNAME',
+      'BITCANNA',
+      'UMEE',
+      'DESMOS',
+    ];
+    const received = prepare(sample, preferredBlockchains, {
+      limit: listLimit,
+    });
+
+    expect(expected).toEqual([
+      ...received.list.map((blockchain) => blockchain.name),
+      ...received.more.map((blockchain) => blockchain.name),
+    ]);
+  });
+});

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.ts

@@ -0,0 +1,38 @@
+import type {
+  PrepareListOptions,
+  PrepareListOutput,
+} from './usePrepareBlockchainList.types';
+import type { BlockchainMeta } from 'rango-sdk';
+
+import { useEffect } from 'react';
+
+import { useSettingsStore } from '../../store/settings';
+
+import { prepare } from './usePrepareBlockchainList.helpers';
+
+/**
+ *
+ * UI needs some specific logics like limiting the list and sorting,
+ * this function is getting the raw blockchains list and return a list for showing in UI.
+ *
+ */
+export function usePrepareBlockchainList(
+  blockchains: BlockchainMeta[],
+  options?: PrepareListOptions
+): PrepareListOutput {
+  const { preferredBlockchains, addPreferredBlockchain } = useSettingsStore();
+
+  useEffect(() => {
+    if (options?.selected) {
+      addPreferredBlockchain(options?.selected);
+    }
+  }, [options?.selected]);
+
+  const output = prepare(blockchains, preferredBlockchains, options);
+
+  return {
+    list: output.list,
+    more: output.more,
+    history: [],
+  };
+}

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.types.ts

@@ -0,0 +1,12 @@
+import type { BlockchainMeta } from 'rango-sdk';
+
+export interface PrepareListOptions {
+  limit?: number;
+  selected?: string;
+}
+
+export interface PrepareListOutput {
+  list: BlockchainMeta[];
+  more: BlockchainMeta[];
+  history: string[];
+}

package/src/hooks/useSyncStoresWithConfig.ts

@@ -1,7 +1,7 @@
 import type { WidgetConfig } from '../types';
 import type { Asset } from 'rango-sdk';
 
-import { useEffect, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 
 import { useBestRouteStore } from '../store/bestRoute';
 import { useMetaStore } from '../store/meta';
@@ -15,6 +15,10 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
     setToBlockchain,
     setFromBlockchain,
     setFromToken,
+    fromToken,
+    toToken,
+    fromBlockchain,
+    toBlockchain,
   } = useBestRouteStore();
 
   const {
@@ -25,6 +29,22 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
   const { setAffiliateRef, setAffiliatePercent, setAffiliateWallets } =
     useSettingsStore();
 
+  const fromTokensConfig = useMemo(
+    () => config?.from?.tokens,
+    [config?.from?.tokens]
+  );
+  const fromBlockchainsConfig = useMemo(
+    () => config?.from?.blockchains,
+    [config?.from?.blockchains]
+  );
+  const toTokensConfig = useMemo(
+    () => config?.to?.tokens,
+    [config?.to?.tokens]
+  );
+  const toBlockchainsConfig = useMemo(
+    () => config?.to?.blockchains,
+    [config?.to?.blockchains]
+  );
   const prevConfigFromToken = useRef<Asset | undefined>(undefined);
   const prevConfigToToken = useRef<Asset | undefined>(undefined);
   const prevConfigFromBlockchain = useRef<string | undefined>(undefined);
@@ -62,6 +82,34 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
     loadingMetaStatus,
   ]);
 
+  useEffect(() => {
+    if (fromToken && fromTokensConfig) {
+      if (!fromTokensConfig.some((token) => tokensAreEqual(token, fromToken))) {
+        setFromToken(null);
+      }
+    }
+
+    if (fromBlockchain && fromBlockchainsConfig) {
+      if (!fromBlockchainsConfig.includes(fromBlockchain.name)) {
+        setFromBlockchain(null);
+      }
+    }
+  }, [fromTokensConfig, fromBlockchainsConfig]);
+
+  useEffect(() => {
+    if (toToken && toTokensConfig) {
+      if (!toTokensConfig.some((token) => tokensAreEqual(token, toToken))) {
+        setToToken(null);
+      }
+    }
+
+    if (toBlockchain && toBlockchainsConfig) {
+      if (!toBlockchainsConfig.includes(toBlockchain.name)) {
+        setToBlockchain(null);
+      }
+    }
+  }, [toTokensConfig, toBlockchainsConfig]);
+
   useEffect(() => {
     if (loadingMetaStatus === 'success') {
       const chain = blockchains.find(

package/src/store/settings.ts

@@ -2,6 +2,7 @@ import { type Language } from '@rango-dev/ui';
 import { create } from 'zustand';
 import { persist, subscribeWithSelector } from 'zustand/middleware';
 
+import { BLOCKCHAIN_LIST_SIZE } from '../constants/configs';
 import { DEFAULT_LANGUAGE } from '../constants/languages';
 import { DEFAULT_SLIPPAGE } from '../constants/swapSettings';
 import { removeDuplicateFrom } from '../utils/common';
@@ -12,6 +13,8 @@ import createSelectors from './selectors';
 export type ThemeMode = 'auto' | 'dark' | 'light';
 
 export interface SettingsState {
+  /** Keeping a history of blockchains that user has selected (in Swap process) */
+  preferredBlockchains: string[];
   slippage: number;
   customSlippage: number | null;
   infiniteApprove: boolean;
@@ -21,6 +24,7 @@ export interface SettingsState {
   affiliateRef: string | null;
   affiliatePercent: number | null;
   affiliateWallets: { [key: string]: string } | null;
+
   setSlippage: (slippage: number) => void;
   setCustomSlippage: (customSlippage: number | null) => void;
   toggleInfiniteApprove: () => void;
@@ -33,12 +37,14 @@ export interface SettingsState {
   setAffiliateWallets: (
     affiliateWallets: { [key: string]: string } | null
   ) => void;
+  addPreferredBlockchain: (blockchain: string) => void;
 }
 
 export const useSettingsStore = createSelectors(
   create<SettingsState>()(
     persist(
-      subscribeWithSelector((set) => ({
+      subscribeWithSelector((set, get) => ({
+        preferredBlockchains: [],
         slippage: DEFAULT_SLIPPAGE,
         customSlippage: null,
         infiniteApprove: false,
@@ -48,6 +54,33 @@ export const useSettingsStore = createSelectors(
         disabledLiquiditySources: [],
         theme: 'auto',
         language: DEFAULT_LANGUAGE,
+        addPreferredBlockchain: (blockchain) => {
+          const currentPreferredBlockchains = get().preferredBlockchains;
+
+          const noNeedToDoAnything = currentPreferredBlockchains.find(
+            (preferredBlockchain, index) => {
+              const isSameBlockchain = preferredBlockchain === blockchain;
+              const isInVisibleList = index <= BLOCKCHAIN_LIST_SIZE - 1;
+
+              return isSameBlockchain && isInVisibleList;
+            }
+          );
+
+          if (noNeedToDoAnything) {
+            return;
+          }
+
+          const nextPreferredBlockchains: string[] =
+            currentPreferredBlockchains.filter((preferredBlockchain) => {
+              const isSameBlockchain = preferredBlockchain === blockchain;
+
+              return !isSameBlockchain;
+            });
+
+          set(() => ({
+            preferredBlockchains: [blockchain, ...nextPreferredBlockchains],
+          }));
+        },
         setSlippage: (slippage) =>
           set(() => ({
             slippage: slippage,

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

@@ -1 +0,0 @@
-{"version":3,"file":"usePrepareBlockchainList.d.ts","sourceRoot":"","sources":["../../src/hooks/usePrepareBlockchainList.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAIhD,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,iBAAiB;IACzB,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,IAAI,EAAE,cAAc,EAAE,CAAC;CACxB;AAED;;;;;GAKG;AACH,wBAAgB,wBAAwB,CACtC,WAAW,EAAE,cAAc,EAAE,EAC7B,OAAO,CAAC,EAAE,kBAAkB,GAC3B,iBAAiB,CAgEnB"}

package/src/hooks/usePrepareBlockchainList.ts

@@ -1,125 +0,0 @@
-import type { BlockchainMeta } from 'rango-sdk';
-
-import { useMemo, useRef } from 'react';
-
-interface PrepareListOptions {
-  limit?: number;
-  selected?: string;
-}
-
-interface PrepareListOutput {
-  list: BlockchainMeta[];
-  more: BlockchainMeta[];
-}
-
-/**
- *
- * UI needs some specific logics like limiting the list and sorting,
- * this function is getting the raw blockchains list and return a list for showing in UI.
- *
- */
-export function usePrepareBlockchainList(
-  blockchains: BlockchainMeta[],
-  options?: PrepareListOptions
-): PrepareListOutput {
-  const prevSelectedBlockchain = useRef({ index: -1, name: '' });
-
-  blockchains.sort(sortByMostUsedBlockchains);
-
-  const blockchainsHash = blockchains
-    .map((blockchain) => blockchain.name)
-    .join('-');
-
-  return useMemo(() => {
-    const list: BlockchainMeta[] = blockchains;
-    let more: BlockchainMeta[] = [];
-
-    // Checking `limit` has set and it should be more than of the list items.
-    if (options?.limit && blockchains.length > options.limit) {
-      const start = options.limit;
-      /** Try find the blockchain and returns the index. */
-      const selectedIndex = options.selected
-        ? blockchains.findIndex(
-            (blockchains) => blockchains.name === options.selected
-          )
-        : -1;
-
-      const prevSelectedBlockchainWasInMoreSection =
-        prevSelectedBlockchain.current.index > options.limit - 1 &&
-        !!blockchains.find(
-          (blockchains) =>
-            blockchains.name === prevSelectedBlockchain.current.name
-        );
-
-      /*
-       * If the selected blockchain is in `more` section, we should move it to front of the list
-       */
-      if (
-        options.selected &&
-        ((prevSelectedBlockchainWasInMoreSection &&
-          selectedIndex < options.limit - 1) ||
-          selectedIndex > options.limit - 1)
-      ) {
-        blockchains.sort(
-          generateSortBySelectedFor(
-            prevSelectedBlockchainWasInMoreSection
-              ? prevSelectedBlockchain.current.name
-              : options.selected
-          )
-        );
-      }
-
-      /*
-       * Splice will modify the original list and returns the deleted items
-       * We use the deleted items as `more`
-       */
-      more = list.splice(start);
-      prevSelectedBlockchain.current = {
-        index: selectedIndex,
-        name: options.selected ?? '',
-      };
-    }
-
-    return {
-      list,
-      more,
-    };
-  }, [blockchainsHash]);
-}
-
-function generateSortBySelectedFor(selected: string) {
-  /** Move `selected` blockchain to the front of list. */
-  return function sortBySelected(a: BlockchainMeta, b: BlockchainMeta) {
-    if (a.name === selected) {
-      return -1;
-    }
-    if (b.name === selected) {
-      return 1;
-    }
-
-    return 0;
-  };
-}
-
-/** There is a hardcoded list of blockchains that we want to show them first in the list. */
-function sortByMostUsedBlockchains(a: BlockchainMeta, b: BlockchainMeta) {
-  const mostUsed = ['ETH', 'COSMOS', 'OSMOSIS'];
-  const aIndexInMostUsed = mostUsed.findIndex((token) => token === a.name);
-  const bIndexInMostUsed = mostUsed.findIndex((token) => token === b.name);
-  const aIsMostUsed = aIndexInMostUsed > -1;
-  const bIsMostUsed = bIndexInMostUsed > -1;
-
-  if (aIsMostUsed && bIsMostUsed) {
-    return aIndexInMostUsed > bIndexInMostUsed ? 1 : -1;
-  }
-
-  if (aIsMostUsed) {
-    return -1;
-  }
-
-  if (bIsMostUsed) {
-    return 1;
-  }
-
-  return 0;
-}