@rango-dev/widget-embedded 0.30.1-next.0 → 0.30.1-next.10

package/src/components/SwapDetailsModal/SwapDetailsModal.WalletState.tsx

@@ -68,6 +68,33 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
     }
   };
 
+  const handleWalletItemClick = () => {
+    if (!!walletType && !!walletInfo) {
+      if (!!walletInfo.namespaces?.length) {
+        if (walletInfo.namespaces.length > 1) {
+          setNamespacesModalState({
+            open: true,
+            providerType: walletType,
+            providerImage: walletInfo.img,
+            availableNamespaces: walletInfo.namespaces,
+            singleNamespace: walletInfo.singleNamespace,
+          });
+        } else if (walletInfo.needsDerivationPath) {
+          setDerivationPathModalState({
+            open: true,
+            providerType: walletType,
+            providerImage: walletInfo.img,
+            namespace: walletInfo.namespaces[0],
+          });
+        } else {
+          connect(walletType).catch((error) => debug(error));
+        }
+      } else {
+        connect(walletType).catch((error) => debug(error));
+      }
+    }
+  };
+
   const handleConfirmNamespaces = (selectedNamespaces: Namespace[]) => {
     if (
       !!walletInfo?.needsDerivationPath &&
@@ -117,19 +144,7 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
             link={walletInfo.installLink}
             disabled={walletButtonDisabled}
             // TODO we need to show an error modal when user reject the connection
-            onClick={async () => {
-              if (walletInfo.namespaces) {
-                setNamespacesModalState({
-                  open: true,
-                  providerType: walletType,
-                  providerImage: walletInfo.img,
-                  availableNamespaces: walletInfo.namespaces,
-                  singleNamespace: walletInfo.singleNamespace,
-                });
-              } else {
-                connect(walletType).catch((error) => debug(error));
-              }
-            }}
+            onClick={handleWalletItemClick}
           />
         </WalletContainer>
       )}

package/src/components/WalletDerivationPathModal/WalletDerivationPathModal.tsx

@@ -10,10 +10,10 @@ import {
   Select,
   TextField,
 } from '@rango-dev/ui';
+import { namespaces } from '@rango-dev/wallets-shared';
 import React, { useEffect, useState } from 'react';
 
 import { WIDGET_UI_ID } from '../../constants';
-import { namespaces } from '../../constants/namespaces';
 import { WatermarkedModal } from '../common/WatermarkedModal';
 import {
   LogoContainer,

package/src/components/WalletNamespacesModal/WalletNamespacesModal.tsx

@@ -13,10 +13,10 @@ import {
   Radio,
   RadioRoot,
 } from '@rango-dev/ui';
+import { namespaces } from '@rango-dev/wallets-shared';
 import React, { useMemo, useState } from 'react';
 
 import { WIDGET_UI_ID } from '../../constants';
-import { namespaces } from '../../constants/namespaces';
 import { useAppStore } from '../../store/AppStore';
 import { WatermarkedModal } from '../common/WatermarkedModal';
 import { WalletImageContainer } from '../HeaderButtons/HeaderButtons.styles';

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/hooks/useTheme.ts

@@ -15,6 +15,13 @@ import {
 } from '../utils/configs';
 import { customizedThemeTokens } from '../utils/ui';
 
+function doesWindowPreferDarkColorScheme() {
+  return (
+    window.matchMedia &&
+    window.matchMedia('(prefers-color-scheme: dark)').matches
+  );
+}
+
 export function useTheme(props: WidgetTheme) {
   const {
     colors,
@@ -23,7 +30,9 @@ export function useTheme(props: WidgetTheme) {
     secondaryBorderRadius = DEFAULT_SECONDARY_RADIUS,
   } = props;
 
-  const [OSTheme, setOSTheme] = useState('light');
+  const [OSTheme, setOSTheme] = useState(
+    doesWindowPreferDarkColorScheme() ? 'dark' : 'light'
+  );
 
   const { theme } = useAppStore();
 
@@ -64,10 +73,7 @@ export function useTheme(props: WidgetTheme) {
       }
     };
 
-    if (
-      window.matchMedia &&
-      window.matchMedia('(prefers-color-scheme: dark)').matches
-    ) {
+    if (doesWindowPreferDarkColorScheme()) {
       setOSTheme('dark');
     }
 

package/src/index.ts

@@ -4,6 +4,7 @@ import type {
   BlockchainAndTokenConfig,
   QuoteEventData,
   Tokens,
+  UiEventData,
   WalletEventData,
   WalletInfoWithExtra,
   WidgetColors,
@@ -71,6 +72,7 @@ import { widgetEventEmitter } from './services/eventEmitter';
 import {
   WidgetEvents as MainEvents,
   QuoteEventTypes,
+  UiEventTypes,
   WalletEventTypes,
   WidgetEvents,
 } from './types';
@@ -108,6 +110,7 @@ export type {
   WidgetVariant,
   WalletEventData,
   QuoteEventData,
+  UiEventData,
   WalletInfoWithExtra,
 };
 export {
@@ -133,6 +136,7 @@ export {
   MainEvents,
   QuoteEventTypes,
   WalletEventTypes,
+  UiEventTypes,
   RouteEventType,
   StepEventType,
   StepExecutionEventStatus,

package/src/pages/Home.tsx

@@ -19,7 +19,9 @@ import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
 import { useWalletsStore } from '../store/wallets';
+import { UiEventTypes } from '../types';
 import { isVariantExpandable } from '../utils/configs';
+import { emitPreventableEvent } from '../utils/events';
 import { getSwapButtonState, isTokensIdentical } from '../utils/swap';
 
 const MainContainer = styled('div', {
@@ -115,14 +117,12 @@ export function Home() {
       navigate(route);
     }
   };
-
   const onClickOnQuote = (quote: SelectedQuote) => {
     if (selectedQuote?.requestId !== quote.requestId) {
       setShowQuoteWarningModal(false);
       setSelectedQuote(quote);
     }
   };
-
   return (
     <MainContainer>
       <Layout
@@ -138,7 +138,10 @@ export function Home() {
             fullWidth
             onClick={() => {
               if (swapButtonState.action === 'connect-wallet') {
-                onHandleNavigation(navigationRoutes.wallets);
+                emitPreventableEvent(
+                  { type: UiEventTypes.CLICK_CONNECT_WALLET },
+                  () => onHandleNavigation(navigationRoutes.wallets)
+                );
               } else if (swapButtonState.action === 'confirm-warning') {
                 setShowQuoteWarningModal(true);
               } else {

package/src/pages/WalletsPage.tsx

@@ -126,21 +126,35 @@ export function WalletsPage() {
 
   const filteredWallets = filterWalletsByCategory(list, blockchainCategory);
 
-  const handleWalletItemClick = (type: string, wallet: WalletInfoWithExtra) => {
+  const handleWalletItemClick = (wallet: WalletInfoWithExtra) => {
     if (isSingleWalletActive(list, config.multiWallets)) {
       return;
     }
 
-    if (!!wallet.namespaces && wallet.state === WalletState.DISCONNECTED) {
-      setNamespacesModalState({
-        open: true,
-        providerType: type,
-        providerImage: wallet.image,
-        availableNamespaces: wallet.namespaces,
-        singleNamespace: wallet.singleNamespace,
-      });
+    if (
+      !!wallet.namespaces?.length &&
+      wallet.state === WalletState.DISCONNECTED
+    ) {
+      if (wallet.namespaces.length > 1) {
+        setNamespacesModalState({
+          open: true,
+          providerType: wallet.type,
+          providerImage: wallet.image,
+          availableNamespaces: wallet.namespaces,
+          singleNamespace: wallet.singleNamespace,
+        });
+      } else if (wallet.needsDerivationPath) {
+        setDerivationPathModalState({
+          open: true,
+          providerType: wallet.type,
+          providerImage: wallet.image,
+          namespace: wallet.namespaces[0],
+        });
+      } else {
+        void handleClick(wallet.type);
+      }
     } else {
-      void handleClick(type);
+      void handleClick(wallet.type);
     }
   };
 
@@ -208,7 +222,7 @@ export function WalletsPage() {
                 key={key}
                 {...wallet}
                 container={getContainer()}
-                onClick={(type) => handleWalletItemClick(type, wallet)}
+                onClick={() => handleWalletItemClick(wallet)}
                 isLoading={fetchMetaStatus === 'loading'}
                 disabled={!isActiveTab}
               />

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