@rango-dev/widget-embedded 0.30.1-next.3 → 0.30.1-next.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.30.1-next.3",
+  "version": "0.30.1-next.5",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -53,4 +53,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/containers/Wallets/Wallets.tsx

@@ -31,7 +31,12 @@ export const WidgetContext = createContext<WidgetContextInterface>({
 });
 
 function Main(props: PropsWithChildren<PropTypes>) {
-  const { updateConfig, updateSettings, fetch: fetchMeta } = useAppStore();
+  const {
+    updateConfig,
+    updateSettings,
+    fetch: fetchMeta,
+    fetchStatus,
+  } = useAppStore();
   const blockchains = useAppStore().blockchains();
   const { findToken } = useAppStore();
   const config = useAppStore().config;
@@ -61,7 +66,7 @@ function Main(props: PropsWithChildren<PropTypes>) {
         dappConfig: props.config,
       };
     }
-  }, [props.config]);
+  }, [props.config, fetchStatus]);
 
   const evmBasedChainNames = blockchains
     .filter(isEvmBlockchain)

package/src/services/cacheService.ts

@@ -0,0 +1,35 @@
+import type { Token } from 'rango-sdk';
+
+interface CacheServiceInterface<V> {
+  get<K extends keyof V>(key: K): V[K] | undefined;
+  set<K extends keyof V>(key: K, value: V[K]): void;
+  remove<K extends keyof V>(key: K): void;
+  clear(): void;
+}
+
+class CacheService<T> implements CacheServiceInterface<T> {
+  #cache: Map<string, T[keyof T]> = new Map();
+
+  get<K extends keyof T>(key: K): T[K] | undefined {
+    return this.#cache.get(key as string) as T[K];
+  }
+
+  set<K extends keyof T>(key: K, value: T[K]): void {
+    this.#cache.set(key as string, value);
+  }
+
+  remove<K extends keyof T>(key: K): void {
+    this.#cache.delete(key as string);
+  }
+
+  clear(): void {
+    this.#cache.clear();
+  }
+}
+
+export type CachedEntries = {
+  supportedSourceTokens: Token[];
+  supportedDestinationTokens: Token[];
+};
+
+export const cacheService = new CacheService<CachedEntries>();

package/src/store/notification.ts

@@ -36,6 +36,7 @@ export const useNotificationStore = createSelectors(
             creationTime: Date.now(),
             requestId: route.requestId,
             route: {
+              creationTime: parseInt(route.creationTime),
               from: {
                 blockchain: fromStep.fromBlockchain,
                 address: fromStep.fromSymbolAddress,
@@ -67,7 +68,18 @@ export const useNotificationStore = createSelectors(
         getNotifications: () => {
           const { isSynced, notifications } = get();
           return isSynced
-            ? notifications.sort((a, b) => b.creationTime - a.creationTime)
+            ? notifications.sort((a, b) => {
+                if (a.route.creationTime && !b.route.creationTime) {
+                  return -1;
+                }
+                if (!a.route.creationTime && b.route.creationTime) {
+                  return 1;
+                }
+                if (!a.route.creationTime && !b.route.creationTime) {
+                  return b.creationTime - a.creationTime;
+                }
+                return b.route.creationTime - a.route.creationTime;
+              })
             : [];
         },
         syncNotifications: (swaps) => {

package/src/store/slices/config.ts

@@ -1,7 +1,11 @@
+import type { DataSlice } from './data';
 import type { SettingsSlice } from './settings';
 import type { WidgetConfig } from '../../types';
 import type { StateCreatorWithInitialData } from '../app';
 
+import { cacheService } from '../../services/cacheService';
+import { matchTokensFromConfigWithMeta } from '../utils';
+
 export const DEFAULT_CONFIG: WidgetConfig = {
   apiKey: '',
   title: undefined,
@@ -54,7 +58,7 @@ export interface ConfigSlice {
 
 export const createConfigSlice: StateCreatorWithInitialData<
   WidgetConfig,
-  ConfigSlice & SettingsSlice,
+  ConfigSlice & SettingsSlice & DataSlice,
   ConfigSlice
 > = (initialData, set, get) => {
   return {
@@ -87,6 +91,40 @@ export const createConfigSlice: StateCreatorWithInitialData<
     // Actions
     updateConfig: (nextConfig: WidgetConfig) => {
       const currentConfig = get().config;
+      const {
+        _tokensMapByTokenHash: tokensMapByTokenHash,
+        _tokensMapByBlockchainName: tokensMapByBlockchainName,
+      } = get();
+
+      const supportedSourceTokens = matchTokensFromConfigWithMeta({
+        type: 'source',
+        config: {
+          blockchains: nextConfig.from?.blockchains,
+          tokens: nextConfig.from?.tokens,
+        },
+        meta: {
+          tokensMapByBlockchainName,
+          tokensMapByTokenHash,
+        },
+      });
+
+      const supportedDestinationTokens = matchTokensFromConfigWithMeta({
+        type: 'destination',
+        config: {
+          blockchains: nextConfig.to?.blockchains,
+          tokens: nextConfig.to?.tokens,
+        },
+        meta: {
+          tokensMapByBlockchainName,
+          tokensMapByTokenHash,
+        },
+      });
+
+      cacheService.set('supportedSourceTokens', supportedSourceTokens);
+      cacheService.set(
+        'supportedDestinationTokens',
+        supportedDestinationTokens
+      );
 
       set({
         config: {

package/src/store/slices/data.test.ts

@@ -3,6 +3,7 @@ import type { EvmBlockchainMeta, Token } from 'rango-sdk';
 
 import { assert, beforeEach, describe, expect, test } from 'vitest';
 
+import { cacheService } from '../../services/cacheService';
 import {
   createEvmBlockchain,
   createInitialAppStore,
@@ -17,6 +18,7 @@ let customTokens: [Token, Token, Token];
 let rangoBlockchain: EvmBlockchainMeta;
 
 beforeEach(() => {
+  cacheService.clear();
   rangoBlockchain = createEvmBlockchain();
 
   customTokens = [
@@ -52,6 +54,10 @@ beforeEach(() => {
   customTokens.forEach((token) => {
     const tokenHash = createTokenHash(token);
     initData._tokensMapByTokenHash.set(tokenHash, token);
+    if (!initData._tokensMapByBlockchainName[token.blockchain]) {
+      initData._tokensMapByBlockchainName[token.blockchain] = [];
+    }
+    initData._tokensMapByBlockchainName[token.blockchain].push(tokenHash);
   });
 
   const appStore = createAppStore();
@@ -351,3 +357,81 @@ describe('search in tokens', () => {
     expect(secondResult).toBe('RNG');
   });
 });
+
+describe('supported tokens from config', () => {
+  test('Should ensure tokens include only tokens from the config', () => {
+    const rangoToken = customTokens[0];
+    const djangoToken = customTokens[1];
+
+    const configTokens = [rangoToken, djangoToken];
+
+    appStoreState = updateAppStoreConfig(appStoreState, {
+      from: {
+        tokens: configTokens,
+      },
+      to: { tokens: configTokens },
+    });
+
+    let sourceTokens = appStoreState.tokens({
+      type: 'source',
+    });
+
+    let destinationTokens = appStoreState.tokens({
+      type: 'destination',
+    });
+
+    expect(configTokens).toMatchObject(sourceTokens);
+    expect(configTokens).toMatchObject(destinationTokens);
+
+    appStoreState = updateAppStoreConfig(appStoreState, {
+      from: {
+        blockchains: [rangoBlockchain.name],
+        tokens: {
+          [rangoBlockchain.name]: {
+            tokens: configTokens,
+            isExcluded: false,
+          },
+        },
+      },
+      to: {
+        blockchains: [rangoBlockchain.name],
+        tokens: {
+          [rangoBlockchain.name]: {
+            tokens: configTokens,
+            isExcluded: false,
+          },
+        },
+      },
+    });
+
+    sourceTokens = appStoreState.tokens({
+      type: 'source',
+    });
+
+    destinationTokens = appStoreState.tokens({
+      type: 'destination',
+    });
+
+    expect(sourceTokens).toMatchObject(sourceTokens);
+    expect(configTokens).toMatchObject(destinationTokens);
+  });
+
+  test('Check tokens calculation is caching', () => {
+    const rangoToken = customTokens[0];
+    const djangoToken = customTokens[1];
+
+    appStoreState = updateAppStoreConfig(appStoreState, {
+      from: {
+        tokens: [rangoToken, djangoToken],
+      },
+    });
+
+    expect(cacheService.get('supportedSourceTokens')?.length ?? 0).toBe(0);
+
+    appStoreState.tokens({
+      type: 'source',
+    });
+
+    expect(cacheService.get('supportedSourceTokens')?.length ?? 0).toBe(2);
+  });
+});

package/src/store/slices/data.ts

@@ -1,16 +1,18 @@
 // We keep all the received data from server in this slice
 
 import type { ConfigSlice } from './config';
-import type { Balance, TokenHash } from '../../types';
+import type { CachedEntries } from '../../services/cacheService';
+import type { Balance, Blockchain, TokenHash } from '../../types';
 import type { Asset, BlockchainMeta, SwapperMeta, Token } from 'rango-sdk';
 import type { StateCreator } from 'zustand';
 
+import { cacheService } from '../../services/cacheService';
 import { httpService as sdk } from '../../services/httpService';
 import { compareWithSearchFor, containsText } from '../../utils/common';
-import { isTokenExcludedInConfig } from '../../utils/configs';
 import { createTokenHash, isTokenNative } from '../../utils/meta';
 import { sortLiquiditySourcesByGroupTitle } from '../../utils/settings';
 import { areTokensEqual, compareTokenBalance } from '../../utils/wallets';
+import { matchTokensFromConfigWithMeta } from '../utils';
 
 type BlockchainOptions = {
   type?: 'source' | 'destination';
@@ -30,6 +32,7 @@ export type FetchStatus = 'loading' | 'success' | 'failed';
 export interface DataSlice {
   _blockchainsMapByName: Map<string, BlockchainMeta>;
   _tokensMapByTokenHash: Map<TokenHash, Token>;
+  _tokensMapByBlockchainName: Record<Blockchain, TokenHash[]>;
   _popularTokens: Token[];
   _swappers: SwapperMeta[];
   fetchStatus: FetchStatus;
@@ -48,8 +51,9 @@ export const createDataSlice: StateCreator<
   DataSlice
 > = (set, get) => ({
   // State
-  _blockchainsMapByName: new Map<string, BlockchainMeta>(),
-  _tokensMapByTokenHash: new Map<TokenHash, Token>(),
+  _blockchainsMapByName: new Map(),
+  _tokensMapByTokenHash: new Map(),
+  _tokensMapByBlockchainName: {},
   _popularTokens: [],
   _swappers: [],
   fetchStatus: 'loading',
@@ -84,31 +88,41 @@ export const createDataSlice: StateCreator<
     return list;
   },
   tokens: (options) => {
-    const tokensMapByHashToken = get()._tokensMapByTokenHash;
-    const tokensFromState = Array.from(tokensMapByHashToken?.values() || []);
+    const { _tokensMapByTokenHash, _tokensMapByBlockchainName, config } = get();
+    const tokensFromState = Array.from(_tokensMapByTokenHash.values());
     const blockchainsMapByName = get()._blockchainsMapByName;
-
-    if (!options || !options?.type) {
+    if (!options || !options.type) {
       return tokensFromState;
     }
 
-    const config = get().config;
-    const supportedTokensConfig =
-      (options.type === 'source' ? config.from?.tokens : config.to?.tokens) ??
-      {};
+    const configType = options.type === 'source' ? 'from' : 'to';
+    const cacheKey: keyof CachedEntries =
+      options.type === 'source'
+        ? 'supportedSourceTokens'
+        : 'supportedDestinationTokens';
+
+    let supportedTokens = cacheService.get(cacheKey);
+    if (!supportedTokens) {
+      supportedTokens = matchTokensFromConfigWithMeta({
+        type: options.type,
+        config: {
+          blockchains: config[configType]?.blockchains,
+          tokens: config[configType]?.tokens,
+        },
+        meta: {
+          tokensMapByTokenHash: _tokensMapByTokenHash,
+          tokensMapByBlockchainName: _tokensMapByBlockchainName,
+        },
+      });
+      cacheService.set(cacheKey, supportedTokens);
+    }
+
     const blockchains = get().blockchains({
       type: options.type,
     });
 
-    const list = tokensFromState
+    const list = supportedTokens
       .filter((token) => {
-        if (
-          supportedTokensConfig &&
-          isTokenExcludedInConfig(token, supportedTokensConfig)
-        ) {
-          return false;
-        }
-
         // If a specific blockchain has passed, we only keep that blockchain's tokens.
         if (!!options.blockchain && token.blockchain !== options.blockchain) {
           return false;
@@ -261,17 +275,18 @@ export const createDataSlice: StateCreator<
       const response = await sdk().getAllMetadata({
         enableCentralizedSwappers,
       });
-
       set({ fetchStatus: 'success' });
       const blockchainsMapByName: Map<string, BlockchainMeta> = new Map<
         string,
         BlockchainMeta
       >();
 
-      const tokensMapByHashToken: Map<TokenHash, Token> = new Map<
+      const tokensMapByTokenHash: Map<TokenHash, Token> = new Map<
         TokenHash,
         Token
       >();
+      const tokensMapByBlockchainName: DataSlice['_tokensMapByBlockchainName'] =
+        {};
       const tokens: Token[] = [];
       const popularTokens: Token[] = response.popularTokens;
       const swappers: SwapperMeta[] = response.swappers;
@@ -299,12 +314,17 @@ export const createDataSlice: StateCreator<
 
       tokens.forEach((token) => {
         const tokenHash = createTokenHash(token);
-        tokensMapByHashToken.set(tokenHash, token);
+        if (!tokensMapByBlockchainName[token.blockchain]) {
+          tokensMapByBlockchainName[token.blockchain] = [];
+        }
+        tokensMapByTokenHash.set(tokenHash, token);
+        tokensMapByBlockchainName[token.blockchain].push(tokenHash);
       });
 
       set({
         _blockchainsMapByName: blockchainsMapByName,
-        _tokensMapByTokenHash: tokensMapByHashToken,
+        _tokensMapByTokenHash: tokensMapByTokenHash,
+        _tokensMapByBlockchainName: tokensMapByBlockchainName,
         _popularTokens: popularTokens,
         _swappers: swappers,
       });

package/src/store/utils/data.test.ts

@@ -0,0 +1,175 @@
+import type { Token } from 'rango-sdk';
+
+import { describe, expect, test } from 'vitest';
+
+import { createToken } from '../../test-utils/fixtures';
+import { createTokenHash } from '../../utils/meta';
+
+import { matchTokensFromConfigWithMeta } from './data'; // Adjust path as necessary
+
+type MatchTokensFromConfigWithMetaParam = Parameters<
+  typeof matchTokensFromConfigWithMeta
+>[0];
+
+const BLOCKCHAIN_A = 'blockchainA';
+const BLOCKCHAIN_B = 'blockchainB';
+const BLOCKCHAIN_C = 'blockchainC';
+
+const tokens: Token[] = [
+  { ...createToken(), blockchain: BLOCKCHAIN_A },
+  { ...createToken(), blockchain: BLOCKCHAIN_A },
+  { ...createToken(), blockchain: BLOCKCHAIN_B },
+  { ...createToken(), blockchain: BLOCKCHAIN_C },
+];
+
+function createMetaForMockData(
+  tokens: Token[]
+): MatchTokensFromConfigWithMetaParam['meta'] {
+  const meta: MatchTokensFromConfigWithMetaParam['meta'] = {
+    tokensMapByTokenHash: new Map(),
+    tokensMapByBlockchainName: {},
+  };
+  tokens.forEach((token) => {
+    const tokenHash = createTokenHash(token);
+    meta.tokensMapByTokenHash.set(tokenHash, token);
+    if (!meta.tokensMapByBlockchainName[token.blockchain]) {
+      meta.tokensMapByBlockchainName[token.blockchain] = [];
+    }
+    meta.tokensMapByBlockchainName[token.blockchain].push(tokenHash);
+  });
+
+  return meta;
+}
+
+describe('matchTokensFromConfigWithMeta', () => {
+  test('should include tokens from config.tokens array that exist in meta', () => {
+    const mockData: MatchTokensFromConfigWithMetaParam = {
+      type: 'source',
+      meta: createMetaForMockData(tokens),
+      config: {
+        blockchains: undefined,
+        tokens: [tokens[0], tokens[1]],
+      },
+    };
+
+    const result = matchTokensFromConfigWithMeta(mockData);
+    expect(result).toEqual([tokens[0], tokens[1]]);
+  });
+
+  test('If config.blockchains is not defined or is empty, we should include all tokens from the meta for every blockchain that does not have tokens specified in the config, as well as tokens specified in the config that exist in the meta.', () => {
+    const mockData: MatchTokensFromConfigWithMetaParam = {
+      type: 'source',
+      meta: createMetaForMockData(tokens),
+      config: {
+        blockchains: undefined,
+        tokens: {
+          [BLOCKCHAIN_A]: { tokens: [tokens[0]], isExcluded: false },
+        },
+      },
+    };
+
+    const runTestWithConfig = (config: {
+      blockchains: MatchTokensFromConfigWithMetaParam['config']['blockchains'];
+    }) => {
+      mockData.config.blockchains = config.blockchains;
+      const result = matchTokensFromConfigWithMeta(mockData);
+      /**
+       * In this case, the result might differ from what was expected.
+       * To pass the test, we reordered the expected result.
+       * Changing the order of tokens does not impact the overall behavior of our app,
+       * as we have a comprehensive sorting logic applied to tokens within the data slice.
+       */
+      // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+      expect(result).toEqual([tokens[2], tokens[3], tokens[0]]);
+    };
+
+    runTestWithConfig({ blockchains: undefined });
+    runTestWithConfig({ blockchains: [] });
+  });
+
+  test('should include tokens from config.tokens object that exist in meta', () => {
+    const mockData: MatchTokensFromConfigWithMetaParam = {
+      type: 'source',
+      meta: createMetaForMockData(tokens),
+      config: {
+        blockchains: [BLOCKCHAIN_A, BLOCKCHAIN_B],
+        tokens: {
+          [BLOCKCHAIN_A]: { tokens: [tokens[0]], isExcluded: false },
+          [BLOCKCHAIN_B]: { tokens: [tokens[2]], isExcluded: false },
+        },
+      },
+    };
+
+    const result = matchTokensFromConfigWithMeta(mockData);
+    expect(result).toEqual([tokens[0], tokens[2]]);
+  });
+
+  test('should not include tokens from config.tokens whose blockchain does not exist in config.blockchains', () => {
+    const mockData: MatchTokensFromConfigWithMetaParam = {
+      type: 'source',
+      meta: createMetaForMockData(tokens),
+      config: {
+        blockchains: [BLOCKCHAIN_A],
+        tokens: {
+          [BLOCKCHAIN_B]: { tokens: [tokens[2]], isExcluded: false },
+        },
+      },
+    };
+
+    const result = matchTokensFromConfigWithMeta(mockData);
+    expect(result).toEqual([tokens[0], tokens[1]]);
+  });
+
+  test('should include all tokens from a blockchain if that blockchain does not have any tokens in config.tokens', () => {
+    const mockData: MatchTokensFromConfigWithMetaParam = {
+      type: 'source',
+      meta: createMetaForMockData(tokens),
+      config: {
+        blockchains: [BLOCKCHAIN_A],
+        tokens: {},
+      },
+    };
+
+    const result = matchTokensFromConfigWithMeta(mockData);
+    expect(result).toEqual([tokens[0], tokens[1]]);
+  });
+
+  test('should include all tokens from config.blockchains that exist in the meta, except tokens excluded in config.token', () => {
+    const mockData: MatchTokensFromConfigWithMetaParam = {
+      type: 'source',
+      meta: createMetaForMockData(tokens),
+      config: {
+        blockchains: [BLOCKCHAIN_A],
+        tokens: {
+          [BLOCKCHAIN_A]: { tokens: [tokens[0]], isExcluded: true },
+        },
+      },
+    };
+
+    const result = matchTokensFromConfigWithMeta(mockData);
+    expect(result).toEqual([tokens[1]]);
+  });
+
+  test('should include all tokens from the meta when config parameters are empty values', () => {
+    const mockData: MatchTokensFromConfigWithMetaParam = {
+      type: 'source',
+      meta: createMetaForMockData(tokens),
+      config: {
+        blockchains: [],
+        tokens: {},
+      },
+    };
+
+    const runTestWithConfig = (
+      config: MatchTokensFromConfigWithMetaParam['config']
+    ) => {
+      mockData.config = config;
+      const result = matchTokensFromConfigWithMeta(mockData);
+      expect(result).toEqual(tokens);
+    };
+
+    runTestWithConfig({ blockchains: [], tokens: {} });
+    runTestWithConfig({ blockchains: undefined, tokens: undefined });
+    runTestWithConfig({ blockchains: [], tokens: [] });
+  });
+});