@rango-dev/widget-embedded 0.17.1-next.14 → 0.17.1-next.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.17.1-next.14",
+  "version": "0.17.1-next.16",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",
@@ -23,7 +23,7 @@
     "@rango-dev/queue-manager-core": "^0.22.1-next.0",
     "@rango-dev/queue-manager-rango-preset": "^0.22.1-next.5",
     "@rango-dev/queue-manager-react": "^0.22.1-next.0",
-    "@rango-dev/ui": "^0.22.1-next.7",
+    "@rango-dev/ui": "^0.22.1-next.8",
     "@rango-dev/wallets-react": "^0.8.1-next.3",
     "@rango-dev/wallets-shared": "^0.21.1-next.3",
     "bignumber.js": "^9.1.1",

package/src/containers/App/App.tsx

@@ -42,9 +42,7 @@ export function Main() {
     widgetContext.onConnectWallet(setLastConnectedWalletWithNetwork);
   }, []);
   useEffect(() => {
-    if (config?.language) {
-      changeLanguage(config.language);
-    }
+    changeLanguage(config?.language);
   }, [config?.language]);
 
   return (

package/src/hooks/useLanguage.ts

@@ -9,7 +9,7 @@ interface UseLanguage {
   languages: LanguageItem[];
   defaultLanguage: Language;
   activeLanguage: Language;
-  changeLanguage: (language: Language) => void;
+  changeLanguage: (language?: Language) => void;
 }
 
 export function useLanguage(): UseLanguage {
@@ -22,6 +22,6 @@ export function useLanguage(): UseLanguage {
     activeLanguage: language,
     languages,
     defaultLanguage,
-    changeLanguage: setLanguage,
+    changeLanguage: (language) => setLanguage(language || DEFAULT_LANGUAGE),
   };
 }

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.constants.ts

@@ -1 +1 @@
-export const MOST_USED_BLOCKChAINS = ['ETH', 'COSMOS', 'OSMOSIS'];
+export const MOST_USED_BLOCKCHAINS = ['ETH', 'COSMOS', 'OSMOSIS'];

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.helpers.ts

@@ -1,13 +1,16 @@
-import type { PrepareListOptions } from './usePrepareBlockchainList.types';
+import type {
+  PrepareListOptions,
+  PrepareOutput,
+} from './usePrepareBlockchainList.types';
 import type { BlockchainMeta } from 'rango-sdk';
 
-import { MOST_USED_BLOCKChAINS } from './usePrepareBlockchainList.constants';
+import { MOST_USED_BLOCKCHAINS } from './usePrepareBlockchainList.constants';
 
 export function prepare(
   blockchains: BlockchainMeta[],
   preferredBlockchains: string[],
   options?: PrepareListOptions
-) {
+): PrepareOutput {
   /*
    * TODO:
    * We copying the `blockchains` which can causes performance penalties but we should because we are mutating the original object.
@@ -25,17 +28,37 @@ export function prepare(
     let preferredBlockchainsWithoutMainList = preferredBlockchains;
 
     if (preferredBlockchains.length <= options.limit) {
-      /*
-       * For first X (limit) numbers, we need to remove them from preferred if exists.
+      /**
+       *
+       * if we want to show 10 items (aka `options.limit`)
+       * and have these items as our preferred list: [x,y,z]
+       * and these as our main list: [A, B, C, D, E, F, G, H, I, J]
+       * the final list will be like this: [...preferred, ...mainList].
+       *
+       * Since we have a limit (e.g. 10) on our list (preferred + mainList),
+       * we only should check those items from main list that will be in final list.
+       *
+       * finalListWithoutLimit = [x,y,z, A, B, C, D, E, F, G, H, I, J]
+       * finalListWithLimit = [x,y,z, A, B, C, D, E, F, G]
+       *
+       * As you can see, [H, I, J] will not be in our list.
+       *
+       * The following code only check preffred blockchain
+       * shouldn't be in first 7 of 10 items in main list. (Since, the last 3 items will not be in the final list and we should check those.)
        */
-      for (let i = 0; i < options.limit; i++) {
+      const howManyItemsShouldBeCheckedFromMainList =
+        options.limit - preferredBlockchains.length;
+
+      for (let i = 0; i <= howManyItemsShouldBeCheckedFromMainList; i++) {
         const blockchain = list[i];
+
         preferredBlockchainsWithoutMainList =
           preferredBlockchainsWithoutMainList.filter((preferredBlockchain) => {
             return blockchain.name !== preferredBlockchain;
           });
       }
     }
+
     list.sort(
       generateSortByPreferredBlockchainsFor(preferredBlockchainsWithoutMainList)
     );
@@ -57,7 +80,7 @@ export function sortByMostUsedBlockchains(
   a: BlockchainMeta,
   b: BlockchainMeta
 ) {
-  const mostUsed = MOST_USED_BLOCKChAINS;
+  const mostUsed = MOST_USED_BLOCKCHAINS;
   const aIndexInMostUsed = mostUsed.findIndex((token) => token === a.name);
   const bIndexInMostUsed = mostUsed.findIndex((token) => token === b.name);
   const aIsMostUsed = aIndexInMostUsed > -1;
@@ -106,3 +129,10 @@ export function generateSortByPreferredBlockchainsFor(
     return 0;
   };
 }
+
+export function isInVisibleList(
+  blockchain: string,
+  prepareOutput: PrepareOutput
+): boolean {
+  return !!prepareOutput.list.find((item) => item.name === blockchain);
+}

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.mock.ts

@@ -2,6 +2,66 @@ import type { BlockchainMeta } from 'rango-sdk';
 
 import { TransactionType } from 'rango-sdk';
 
+export const sampleDefaultBlockchainNames = [
+  'ETH',
+  'COSMOS',
+  'OSMOSIS',
+  'BSC',
+  'ARBITRUM',
+  'POLYGON',
+  'ZKSYNC',
+  'STARKNET',
+  'OPTIMISM',
+  'AVAX_CCHAIN',
+  'POLYGONZK',
+  'LINEA',
+  'TRON',
+  'BTC',
+  'NEUTRON',
+  'NOBLE',
+  'SOLANA',
+  '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',
+];
+
 export const sampleBlockchains: BlockchainMeta[] = [
   {
     name: 'ETH',

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

@@ -2,7 +2,7 @@ import type { BlockchainMeta } from 'rango-sdk';
 
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { MOST_USED_BLOCKChAINS } from './usePrepareBlockchainList.constants';
+import { MOST_USED_BLOCKCHAINS } from './usePrepareBlockchainList.constants';
 import {
   generateSortByPreferredBlockchainsFor,
   prepare,
@@ -20,8 +20,8 @@ describe('usePrepareBlockchainList', () => {
   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 mostUsedCount = MOST_USED_BLOCKCHAINS.length;
+    const expected = MOST_USED_BLOCKCHAINS;
     const received = sortedBlockchainsList
       .map((blockchain) => blockchain.name)
       .slice(0, mostUsedCount);
@@ -270,4 +270,79 @@ describe('usePrepareBlockchainList', () => {
       ...received.more.map((blockchain) => blockchain.name),
     ]);
   });
+
+  it.only('Last item of the main list should be moved to front if it selected again.', () => {
+    const listLimit = 10;
+    const preferredBlockchains = ['AVAX_CCHAIN', 'BTC'];
+    const expected = [
+      'AVAX_CCHAIN',
+      'BTC',
+      'ETH',
+      'COSMOS',
+      'OSMOSIS',
+      'BSC',
+      'ARBITRUM',
+      'POLYGON',
+      'ZKSYNC',
+      'STARKNET',
+      'OPTIMISM',
+      'POLYGONZK',
+      'LINEA',
+      'TRON',
+      'NEUTRON',
+      'NOBLE',
+      'SOLANA',
+      '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 output = prepare(sample, preferredBlockchains, {
+      limit: listLimit,
+    });
+
+    const received = [
+      ...output.list.map((blockchain) => blockchain.name),
+      ...output.more.map((blockchain) => blockchain.name),
+    ];
+
+    expect(expected).toEqual(received);
+  });
 });

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.ts

@@ -1,6 +1,6 @@
 import type {
   PrepareListOptions,
-  PrepareListOutput,
+  UsePrepareList,
 } from './usePrepareBlockchainList.types';
 import type { BlockchainMeta } from 'rango-sdk';
 
@@ -8,7 +8,7 @@ import { useEffect } from 'react';
 
 import { useSettingsStore } from '../../store/settings';
 
-import { prepare } from './usePrepareBlockchainList.helpers';
+import { isInVisibleList, prepare } from './usePrepareBlockchainList.helpers';
 
 /**
  *
@@ -19,12 +19,21 @@ import { prepare } from './usePrepareBlockchainList.helpers';
 export function usePrepareBlockchainList(
   blockchains: BlockchainMeta[],
   options?: PrepareListOptions
-): PrepareListOutput {
+): UsePrepareList {
   const { preferredBlockchains, addPreferredBlockchain } = useSettingsStore();
 
   useEffect(() => {
     if (options?.selected) {
-      addPreferredBlockchain(options?.selected);
+      const output = prepare(blockchains, preferredBlockchains, options);
+
+      /**
+       * We only add a new blockchain to preferred when it's not in the main list
+       * In this way we can guarantee we will be able to regenerate the same list always.
+       * And also it helps us to avoid jumping for the last item of the main list (e.g. tenth item of our list).
+       */
+      if (!isInVisibleList(options.selected, output)) {
+        addPreferredBlockchain(options?.selected);
+      }
     }
   }, [options?.selected]);
 

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

@@ -5,8 +5,13 @@ export interface PrepareListOptions {
   selected?: string;
 }
 
-export interface PrepareListOutput {
+export interface PrepareOutput {
   list: BlockchainMeta[];
   more: BlockchainMeta[];
+}
+
+export interface UsePrepareList {
+  list: PrepareOutput['list'];
+  more: PrepareOutput['more'];
   history: string[];
 }