@rango-dev/widget-embedded 0.29.1-next.1 → 0.29.1-next.11

package/src/pages/WalletsPage.tsx

@@ -1,3 +1,4 @@
+import type { WalletInfoWithNamespaces } from '../types';
 import type { Namespace, WalletType } from '@rango-dev/wallets-shared';
 
 import { i18n } from '@lingui/core';
@@ -18,7 +19,7 @@ import { WalletNamespacesModal } from '../components/WalletNamespacesModal';
 import { useWalletList } from '../hooks/useWalletList';
 import { useAppStore } from '../store/AppStore';
 import { useUiStore } from '../store/ui';
-import { getContainer } from '../utils/common';
+import { getContainer, isSingleWalletActive } from '../utils/common';
 import {
   filterBlockchainsByWalletTypes,
   filterWalletsByCategory,
@@ -51,6 +52,7 @@ export function WalletsPage() {
   const { fetchStatus: fetchMetaStatus } = useAppStore();
   const [blockchainCategory, setBlockchainCategory] = useState<string>('ALL');
   const blockchains = useAppStore().blockchains();
+  const { config } = useAppStore();
 
   const [openModal, setOpenModal] = useState(false);
   const [namespacesModalState, setNamespacesModalState] =
@@ -95,6 +97,25 @@ export function WalletsPage() {
 
   const filteredWallets = filterWalletsByCategory(list, blockchainCategory);
 
+  const handleWalletClick = (
+    type: string,
+    wallet: WalletInfoWithNamespaces
+  ) => {
+    if (!!wallet.namespaces && wallet.state === WalletState.DISCONNECTED) {
+      if (isSingleWalletActive(list, config.multiWallets)) {
+        return;
+      }
+      setNamespacesModalState({
+        providerType: type,
+        providerImage: wallet.image,
+        availableNamespaces: wallet.namespaces,
+        singleNamespace: wallet.singleNamespace,
+      });
+    } else {
+      void handleClick(type);
+    }
+  };
+
   return (
     <Layout
       header={{
@@ -123,21 +144,7 @@ export function WalletsPage() {
                 key={key}
                 {...wallet}
                 container={getContainer()}
-                onClick={(type) => {
-                  if (
-                    !!wallet.namespaces &&
-                    wallet.state === WalletState.DISCONNECTED
-                  ) {
-                    setNamespacesModalState({
-                      providerType: type,
-                      providerImage: wallet.image,
-                      availableNamespaces: wallet.namespaces,
-                      singleNamespace: wallet.singleNamespace,
-                    });
-                  } else {
-                    void handleClick(type);
-                  }
-                }}
+                onClick={(type) => handleWalletClick(type, wallet)}
                 isLoading={fetchMetaStatus === 'loading'}
                 disabled={!isActiveTab}
               />

package/src/store/notification.ts

@@ -66,7 +66,9 @@ export const useNotificationStore = createSelectors(
         },
         getNotifications: () => {
           const { isSynced, notifications } = get();
-          return isSynced ? notifications : [];
+          return isSynced
+            ? notifications.sort((a, b) => b.creationTime - a.creationTime)
+            : [];
         },
         syncNotifications: (swaps) => {
           const { isSynced, notifications } = get();

package/src/store/quote.ts

@@ -6,7 +6,6 @@ import type {
   PreferenceType,
   Token,
 } from 'rango-sdk';
-import type { PendingSwap } from 'rango-types';
 
 import BigNumber from 'bignumber.js';
 import { create } from 'zustand';
@@ -14,7 +13,7 @@ import { subscribeWithSelector } from 'zustand/middleware';
 
 import { ZERO } from '../constants/numbers';
 import { isPositiveNumber } from '../utils/numbers';
-import { createRetryQuote, getQuoteToTokenUsdPrice } from '../utils/quote';
+import { getQuoteToTokenUsdPrice } from '../utils/quote';
 import { calcOutputUsdValue } from '../utils/swap';
 
 import createSelectors from './selectors';
@@ -38,7 +37,13 @@ type SomeQuoteState = {
   error: QuoteError | null;
   warning: QuoteWarning | null;
 };
-
+export type RetryQuote = {
+  fromBlockchain: BlockchainMeta | null;
+  fromToken?: Token;
+  toBlockchain: BlockchainMeta | null;
+  toToken?: Token;
+  inputAmount: string;
+};
 export interface QuoteState {
   fromBlockchain: BlockchainMeta | null;
   toBlockchain: BlockchainMeta | null;
@@ -73,7 +78,7 @@ export interface QuoteState {
   ) => void;
   setInputAmount: (amount: string) => void;
   setSelectedQuote: (quote: SelectedQuote | null) => void;
-  retry: (pendingSwap: PendingSwap, meta: Meta) => void;
+  retry: (retryQuote: RetryQuote) => void;
   switchFromAndTo: () => void;
   setQuoteWalletConfirmed: (flag: boolean) => void;
   setSelectedWallets: (wallets: Wallet[]) => void;
@@ -219,15 +224,15 @@ export const useQuoteStore = createSelectors(
           }),
         }));
       },
-      retry: (pendingSwap, meta) => {
-        const { tokens, blockchains } = meta;
+      retry: (retryQuote) => {
         const {
           fromBlockchain,
           fromToken,
           toBlockchain,
           toToken,
           inputAmount,
-        } = createRetryQuote(pendingSwap, blockchains, tokens);
+        } = retryQuote;
+
         set({
           fromBlockchain,
           fromToken,

package/src/store/selectors.ts

@@ -1,4 +1,4 @@
-import { StoreApi, UseBoundStore } from 'zustand';
+import type { StoreApi, UseBoundStore } from 'zustand';
 
 type State = object;
 
@@ -6,10 +6,12 @@ type WithSelectors<S> = S extends { getState: () => infer T }
   ? S & { use: { [K in keyof T]: () => T[K] } }
   : never;
 
-const createSelectors = <S extends UseBoundStore<StoreApi<State>>>(_store: S) => {
-  let store = _store as WithSelectors<typeof _store>;
+const createSelectors = <S extends UseBoundStore<StoreApi<State>>>(
+  _store: S
+) => {
+  const store = _store as WithSelectors<typeof _store>;
   store.use = {};
-  for (let k of Object.keys(store.getState())) {
+  for (const k of Object.keys(store.getState())) {
     (store.use as any)[k] = () => store((s) => s[k as keyof typeof s]);
   }
 

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

@@ -9,6 +9,7 @@ import {
   createToken,
   updateAppStoreConfig,
 } from '../../test-utils/fixtures';
+import { createTokenHash } from '../../utils/meta';
 import { createAppStore } from '../app';
 
 let appStoreState: AppStoreState;
@@ -48,7 +49,10 @@ beforeEach(() => {
 
   const initData = createInitialAppStore();
   initData._blockchainsMapByName.set(rangoBlockchain.name, rangoBlockchain);
-  customTokens.forEach((token) => initData._tokens.push(token));
+  customTokens.forEach((token) => {
+    const tokenHash = createTokenHash(token);
+    initData._tokensMapByTokenHash.set(tokenHash, token);
+  });
 
   const appStore = createAppStore();
   appStore.setState(initData);
@@ -149,10 +153,10 @@ describe('check sorting tokens is working correctly in app store', () => {
 
   test('put popular token with lowest blockchain sort at first', () => {
     const rangoToken = customTokens[0];
-    const rangoIndex = appStoreState._tokens.findIndex(
-      (tokenItem) => tokenItem.symbol === rangoToken.symbol
-    );
-    appStoreState._tokens[rangoIndex].isPopular = true;
+    const token = appStoreState.findToken(rangoToken);
+    if (token) {
+      token.isPopular = true;
+    }
     appStoreState._blockchainsMapByName.set(rangoToken.blockchain, {
       ...rangoBlockchain,
       sort: 0,

package/src/store/slices/data.ts

@@ -1,14 +1,14 @@
 // 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 { Balance, TokenHash } from '../../types';
+import type { Asset, BlockchainMeta, SwapperMeta, Token } from 'rango-sdk';
 import type { StateCreator } from 'zustand';
 
 import { httpService as sdk } from '../../services/httpService';
 import { compareWithSearchFor, containsText } from '../../utils/common';
 import { isTokenExcludedInConfig } from '../../utils/configs';
-import { isTokenNative } from '../../utils/meta';
+import { createTokenHash, isTokenNative } from '../../utils/meta';
 import { sortLiquiditySourcesByGroupTitle } from '../../utils/settings';
 import { areTokensEqual, compareTokenBalance } from '../../utils/wallets';
 
@@ -24,10 +24,12 @@ type TokenOptions = {
   getBalanceFor?: (token: Token) => Balance | null;
 };
 
+export type FindToken = (asset: Asset) => Token | undefined;
+
 export type FetchStatus = 'loading' | 'success' | 'failed';
 export interface DataSlice {
   _blockchainsMapByName: Map<string, BlockchainMeta>;
-  _tokens: Token[];
+  _tokensMapByTokenHash: Map<TokenHash, Token>;
   _popularTokens: Token[];
   _swappers: SwapperMeta[];
   fetchStatus: FetchStatus;
@@ -35,6 +37,7 @@ export interface DataSlice {
   tokens: (options?: TokenOptions) => Token[];
   swappers: () => SwapperMeta[];
   isTokenPinned: (token: Token, type: 'source' | 'destination') => boolean;
+  findToken: FindToken;
   fetch: () => Promise<void>;
 }
 
@@ -46,7 +49,7 @@ export const createDataSlice: StateCreator<
 > = (set, get) => ({
   // State
   _blockchainsMapByName: new Map<string, BlockchainMeta>(),
-  _tokens: [],
+  _tokensMapByTokenHash: new Map<TokenHash, Token>(),
   _popularTokens: [],
   _swappers: [],
   fetchStatus: 'loading',
@@ -81,7 +84,8 @@ export const createDataSlice: StateCreator<
     return list;
   },
   tokens: (options) => {
-    const tokensFromState = get()._tokens;
+    const tokensMapByHashToken = get()._tokensMapByTokenHash;
+    const tokensFromState = Array.from(tokensMapByHashToken?.values() || []);
     const blockchainsMapByName = get()._blockchainsMapByName;
 
     if (!options || !options?.type) {
@@ -197,6 +201,12 @@ export const createDataSlice: StateCreator<
 
     return list;
   },
+  findToken: (asset) => {
+    const tokensMapByHashToken = get()._tokensMapByTokenHash;
+    const tokenHash = createTokenHash(asset);
+    const token = tokensMapByHashToken.get(tokenHash);
+    return token;
+  },
   isTokenPinned: (token, type) => {
     const pinnedTokens =
       type === 'source'
@@ -258,6 +268,10 @@ export const createDataSlice: StateCreator<
         BlockchainMeta
       >();
 
+      const tokensMapByHashToken: Map<TokenHash, Token> = new Map<
+        TokenHash,
+        Token
+      >();
       const tokens: Token[] = [];
       const popularTokens: Token[] = response.popularTokens;
       const swappers: SwapperMeta[] = response.swappers;
@@ -283,9 +297,14 @@ export const createDataSlice: StateCreator<
         }
       });
 
+      tokens.forEach((token) => {
+        const tokenHash = createTokenHash(token);
+        tokensMapByHashToken.set(tokenHash, token);
+      });
+
       set({
         _blockchainsMapByName: blockchainsMapByName,
-        _tokens: tokens,
+        _tokensMapByTokenHash: tokensMapByHashToken,
         _popularTokens: popularTokens,
         _swappers: swappers,
       });

package/src/store/slices/settings.ts

@@ -169,6 +169,9 @@ export const createSettingsSlice: StateCreator<
       ...(isLiquidityHidden && {
         disabledLiquiditySources: nextConfig.liquiditySources || [],
       }),
+      ...(nextConfig?._INTERNAL_SETTINGS_?.autoUpdateSettings && {
+        language: nextConfig.language || DEFAULT_LANGUAGE,
+      }),
     });
   },
 });

package/src/store/wallets.ts

@@ -1,3 +1,4 @@
+import type { FindToken } from './slices/data';
 import type { Balance, TokensBalance, Wallet } from '../types';
 import type { WalletType } from '@rango-dev/wallets-shared';
 import type { Token } from 'rango-sdk';
@@ -6,8 +7,8 @@ import { create } from 'zustand';
 import { subscribeWithSelector } from 'zustand/middleware';
 
 import { httpService } from '../services/httpService';
+import { createTokenHash } from '../utils/meta';
 import {
-  createTokenHash,
   isAccountAndWalletMatched,
   makeBalanceFor,
   makeTokensBalance,
@@ -39,13 +40,13 @@ interface WalletsStore {
   connectedWallets: ConnectedWallet[];
   balances: TokensBalance;
   loading: boolean;
-  connectWallet: (accounts: Wallet[], tokens: Token[]) => void;
+  connectWallet: (accounts: Wallet[], findToken: FindToken) => void;
   disconnectWallet: (walletType: WalletType) => void;
   selectWallets: (wallets: { walletType: string; chain: string }[]) => void;
   clearConnectedWallet: () => void;
   getWalletsDetails: (
     accounts: Wallet[],
-    tokens: Token[],
+    findToken: FindToken,
     shouldRetry?: boolean
   ) => void;
   getBalanceFor: (token: Token) => Balance | null;
@@ -57,7 +58,7 @@ export const useWalletsStore = createSelectors(
       connectedWallets: [],
       balances: {},
       loading: false,
-      connectWallet: (accounts, tokens) => {
+      connectWallet: (accounts, findToken) => {
         const getWalletsDetails = get().getWalletsDetails;
         set((state) => ({
           loading: true,
@@ -88,7 +89,7 @@ export const useWalletsStore = createSelectors(
               })
             ),
         }));
-        getWalletsDetails(accounts, tokens);
+        getWalletsDetails(accounts, findToken);
       },
       disconnectWallet: (walletType) => {
         set((state) => {
@@ -152,7 +153,7 @@ export const useWalletsStore = createSelectors(
           connectedWallets: [],
           selectedWallets: [],
         })),
-      getWalletsDetails: async (accounts, tokens, shouldRetry = true) => {
+      getWalletsDetails: async (accounts, findToken, shouldRetry = true) => {
         const getWalletsDetails = get().getWalletsDetails;
         set((state) => ({
           loading: true,
@@ -188,7 +189,7 @@ export const useWalletsStore = createSelectors(
                     matchedAccount &&
                     shouldRetry
                   ) {
-                    getWalletsDetails([matchedAccount], tokens, false);
+                    getWalletsDetails([matchedAccount], findToken, false);
                   }
                   return matchedAccount && retrievedBalanceAccount
                     ? {
@@ -196,7 +197,7 @@ export const useWalletsStore = createSelectors(
                         explorerUrl: retrievedBalanceAccount.explorerUrl,
                         balances: makeBalanceFor(
                           retrievedBalanceAccount,
-                          tokens
+                          findToken
                         ),
                         loading: false,
                       }

package/src/test-utils/fixtures.ts

@@ -1,10 +1,12 @@
 import type { AppStoreState } from '../store/app';
-import type { WidgetConfig } from '../types';
+import type { TokenHash, WidgetConfig } from '../types';
 import type { BlockchainMeta, EvmBlockchainMeta, Token } from 'rango-sdk';
 
 import { faker } from '@faker-js/faker';
 import { TransactionType } from 'rango-sdk';
 
+import { createTokenHash } from '../utils/meta';
+
 const TOKENS_COUNT = 20;
 const BLOCKCHAINS_COUNT = 20;
 
@@ -230,7 +232,12 @@ export function createInitialAppStore() {
   });
 
   return {
-    _tokens: tokens,
+    _tokensMapByTokenHash: new Map<TokenHash, Token>(
+      tokens.map((token) => {
+        const tokenHash = createTokenHash(token);
+        return [tokenHash, token];
+      })
+    ),
     _blockchainsMapByName: new Map<string, BlockchainMeta>(
       blockchains.map((meta) => [meta.name, meta])
     ),

package/src/types/config.ts

@@ -224,4 +224,9 @@ export type WidgetConfig = {
   __UNSTABLE_OR_INTERNAL__?: {
     walletConnectListedDesktopWalletLink?: string;
   };
+
+  // Internal configuration options. Not intended for public use or modification.
+  _INTERNAL_SETTINGS_?: {
+    autoUpdateSettings?: boolean; // If true, settings will be updated automatically based on the configuration.
+  };
 };

package/src/utils/common.ts

@@ -1,6 +1,7 @@
+import type { WalletInfoWithNamespaces } from '../types';
 import type { Token } from 'rango-sdk';
 
-import { BlockchainCategories } from '@rango-dev/ui';
+import { BlockchainCategories, WalletState } from '@rango-dev/ui';
 import { TransactionType } from 'rango-sdk';
 
 import { WIDGET_UI_ID } from '../constants';
@@ -247,3 +248,13 @@ export const getFontUrlByName = (fontName: string) => {
   const font = SUPPORTED_FONTS.find((font) => font.value === fontName);
   return font?.url;
 };
+
+export function isSingleWalletActive(
+  wallets: WalletInfoWithNamespaces[],
+  multiWallets?: boolean
+) {
+  const atLeastOneWalletIsConnected = !!wallets.find(
+    (w) => w.state === WalletState.CONNECTED
+  );
+  return multiWallets === false && atLeastOneWalletIsConnected;
+}

package/src/utils/meta.ts

@@ -1,7 +1,6 @@
+import type { TokenHash } from '../types';
 import type { Asset, BlockchainMeta, SwapperMeta, Token } from 'rango-sdk';
 
-import { areTokensEqual } from './wallets';
-
 export function getBlockchainDisplayNameFor(
   blockchainName: string,
   blockchains: BlockchainMeta[]
@@ -17,6 +16,14 @@ export function getBlockchainShortNameFor(
     ?.shortName;
 }
 
+export function getBlockchainImage(
+  blockchainName: string,
+  blockchains: BlockchainMeta[]
+): string | undefined {
+  return blockchains.find((blockchain) => blockchain.name === blockchainName)
+    ?.logo;
+}
+
 export function getSwapperDisplayName(
   swapperId: string,
   swappers: SwapperMeta[]
@@ -24,10 +31,6 @@ export function getSwapperDisplayName(
   return swappers.find((swapper) => swapper.id === swapperId)?.title;
 }
 
-export function findToken(t: Asset, tokens: Token[]) {
-  return tokens.find((token) => areTokensEqual(token, t)) ?? null;
-}
-
 export function findBlockchain(name: string, blockchains: BlockchainMeta[]) {
   return blockchains.find((blockchain) => blockchain.name === name) ?? null;
 }
@@ -52,3 +55,7 @@ export function isTokenNative(
 
   return false;
 }
+
+export function createTokenHash(asset: Asset): TokenHash {
+  return `${asset.blockchain}-${asset.symbol}-${asset.address ?? ''}`;
+}

package/src/utils/quote.ts

@@ -1,4 +1,6 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { RetryQuote } from '../store/quote';
+import type { FindToken } from '../store/slices/data';
 import type { QuoteWarning, SelectedQuote, Wallet } from '../types';
 import type {
   PriceImpactWarningLevel,
@@ -27,7 +29,7 @@ import { getUsdValue } from '../store/quote';
 import { QuoteWarningType } from '../types';
 
 import { areEqual } from './common';
-import { findBlockchain, findToken } from './meta';
+import { createTokenHash, findBlockchain } from './meta';
 import {
   checkSlippageWarnings,
   getMinRequiredSlippage,
@@ -130,27 +132,18 @@ export function findCommonTokens<T extends Asset[], R extends Asset[]>(
   listA: T,
   listB: R
 ) {
-  const tokenToString = (token: Asset): string =>
-    `${token.symbol}-${token.blockchain}-${token.address ?? ''}`;
-
   const set = new Set();
 
-  listA.forEach((token) => set.add(tokenToString(token)));
+  listA.forEach((token) => set.add(createTokenHash(token)));
 
-  return listB.filter((token) => set.has(tokenToString(token))) as R;
+  return listB.filter((token) => set.has(createTokenHash(token))) as R;
 }
 
 export function createRetryQuote(
   pendingSwap: PendingSwap,
   blockchains: BlockchainMeta[],
-  tokens: Token[]
-): {
-  fromBlockchain: BlockchainMeta | null;
-  fromToken: Token | null;
-  toBlockchain: BlockchainMeta | null;
-  toToken: Token | null;
-  inputAmount: string;
-} {
+  findToken: FindToken
+): RetryQuote {
   const firstStep = pendingSwap.steps[0];
   const lastStep = pendingSwap.steps[pendingSwap.steps.length - 1];
   const lastSuccessfulStep = getLastSuccessfulStep(pendingSwap.steps);
@@ -179,10 +172,9 @@ export function createRetryQuote(
           blockchain: fromBlockchainMeta?.name ?? '',
           symbol: firstStep.fromSymbol,
           address: firstStep.fromSymbolAddress,
-        },
-    tokens
+        }
   );
-  const toTokenMeta = findToken(toToken, tokens);
+  const toTokenMeta = findToken(toToken);
   const inputAmount = lastSuccessfulStep
     ? lastSuccessfulStep.outputAmount ?? ''
     : pendingSwap.inputAmount;
@@ -201,11 +193,11 @@ export function generateQuoteWarnings(
   params: {
     fromToken: Token;
     toToken: Token;
-    tokens: Token[];
+    findToken: FindToken;
     userSlippage: number;
   }
 ): QuoteWarning | null {
-  const { fromToken, toToken, tokens, userSlippage } = params;
+  const { fromToken, toToken, findToken, userSlippage } = params;
   const inputUsdValue = getUsdValue(fromToken, quote.requestAmount);
   const outputUsdValue = getUsdValue(toToken, quote?.outputAmount ?? '');
 
@@ -218,7 +210,7 @@ export function generateQuoteWarnings(
       !!priceImpact && hasHighValueLoss(inputUsdValue, priceImpact);
 
     if (highValueLoss) {
-      const totalFee = getTotalFeeInUsd(quote?.swaps, tokens);
+      const totalFee = getTotalFeeInUsd(quote?.swaps, findToken);
       const warningLevel = getPriceImpactLevel(priceImpact);
       return {
         type: QuoteWarningType.HIGH_VALUE_LOSS,

package/src/utils/swap.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
 import type { FeesGroup, NameOfFees } from '../constants/quote';
-import type { FetchStatus } from '../store/slices/data';
+import type { FetchStatus, FindToken } from '../store/slices/data';
 import type { ConnectedWallet } from '../store/wallets';
 import type {
   ConvertedToken,
@@ -260,24 +260,9 @@ export function canComputePriceImpact(
   );
 }
 
-export const getUsdPrice = (
-  blockchain: string,
-  symbol: string,
-  address: string | null,
-  allTokens: Token[]
-): number | null => {
-  const token = allTokens?.find(
-    (t) =>
-      t.blockchain === blockchain &&
-      t.symbol?.toUpperCase() === symbol?.toUpperCase() &&
-      t.address === address
-  );
-  return token?.usdPrice || null;
-};
-
 export function getUsdFeeOfStep(
   step: SwapResult,
-  allTokens: Token[]
+  findToken: FindToken
 ): BigNumber {
   let totalFeeInUsd = ZERO;
   for (let i = 0; i < step.fee.length; i++) {
@@ -286,12 +271,7 @@ export function getUsdFeeOfStep(
       continue;
     }
 
-    const unitPrice = getUsdPrice(
-      fee.asset.blockchain,
-      fee.asset.symbol,
-      fee.asset.address,
-      allTokens
-    );
+    const unitPrice = findToken(fee.asset)?.usdPrice || null;
     totalFeeInUsd = totalFeeInUsd.plus(
       new BigNumber(fee.amount).multipliedBy(unitPrice || 0)
     );
@@ -302,11 +282,11 @@ export function getUsdFeeOfStep(
 
 export function getTotalFeeInUsd(
   swaps: SwapResult[],
-  allTokens: Token[]
+  findToken: FindToken
 ): BigNumber {
   return swaps.reduce(
     (totalFee: BigNumber, step) =>
-      totalFee.plus(getUsdFeeOfStep(step, allTokens)),
+      totalFee.plus(getUsdFeeOfStep(step, findToken)),
     ZERO
   );
 }