fix: fix performance issues on token selector in widget

widget/embedded/src/components/TokenList/TokenList.helpers.ts

@@ -1,8 +1,8 @@
-import type { TokenWithBalance } from './TokenList.types';
+import type { Token } from 'rango-sdk';
 
 import { containsText } from '../../utils/common';
 
-export const filterTokens = (list: TokenWithBalance[], searchedFor: string) =>
+export const filterTokens = (list: Token[], searchedFor: string) =>
   list.filter(
     (token) =>
       containsText(token.symbol, searchedFor) ||

widget/embedded/src/components/TokenList/TokenList.tsx

@@ -1,9 +1,6 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
-import type {
-  PropTypes,
-  RenderDescProps,
-  TokenWithBalance,
-} from './TokenList.types';
+import type { PropTypes, RenderDescProps } from './TokenList.types';
+import type { Token } from 'rango-sdk';
 import type { CommonProps } from 'react-window';
 
 import { i18n } from '@lingui/core';
@@ -24,6 +21,7 @@ import React, { forwardRef, useEffect, useState } from 'react';
 import { useAppStore } from '../../store/AppStore';
 import { useWalletsStore } from '../../store/wallets';
 import { generateRangeColors } from '../../utils/colors';
+import { formatBalance } from '../../utils/wallets';
 
 import { LoadingTokenList } from './LoadingTokenList';
 import {
@@ -85,11 +83,11 @@ const renderDesc = (props: RenderDescProps) => {
 export function TokenList(props: PropTypes) {
   const { list, searchedFor = '', onChange, selectedBlockchain } = props;
 
-  const [tokens, setTokens] = useState<TokenWithBalance[]>(list);
+  const [tokens, setTokens] = useState<Token[]>(list);
   const fetchStatus = useAppStore().fetchStatus;
   const blockchains = useAppStore().blockchains();
   const [hasNextPage, setHasNextPage] = useState<boolean>(true);
-  const loadingWallet = useWalletsStore.use.loading();
+  const { getBalanceFor, loading: loadingWallet } = useWalletsStore();
   const { isTokenPinned } = useAppStore();
 
   // eslint-disable-next-line react/display-name
@@ -134,7 +132,7 @@ export function TokenList(props: PropTypes) {
       <VirtualizedList
         Item={({ index, style }) => {
           const token = tokens[index];
-
+          const tokenBalance = formatBalance(getBalanceFor(token));
           const address = token.address || '';
           const blockchain = blockchains.find(
             (blockchain) => blockchain.name === token.blockchain
@@ -229,18 +227,18 @@ export function TokenList(props: PropTypes) {
                       <Skeleton variant="text" size="medium" width={50} />
                     </End>
                   ) : (
-                    tokens[index]?.balance && (
+                    tokenBalance && (
                       <BalanceContainer>
                         <Typography variant="title" size="small">
-                          {token.balance?.amount}
+                          {tokenBalance.amount}
                         </Typography>
                         <div />
-                        {token.balance?.usdValue && (
+                        {tokenBalance.usdValue && (
                           <Typography
                             variant="body"
                             className="usd-value"
                             size="xsmall">
-                            {`$${token.balance?.usdValue}`}
+                            {`$${tokenBalance.usdValue}`}
                           </Typography>
                         )}
                       </BalanceContainer>

widget/embedded/src/components/TokenList/TokenList.types.ts

@@ -1,16 +1,9 @@
 import type { Token } from 'rango-sdk';
 
-export interface TokenWithBalance extends Token {
-  balance?: {
-    amount: string;
-    usdValue: string;
-  };
-}
-
 export interface PropTypes {
-  list: TokenWithBalance[];
+  list: Token[];
   searchedFor?: string;
-  onChange: (token: TokenWithBalance) => void;
+  onChange: (token: Token) => void;
   selectedBlockchain?: string;
 }
 
@@ -22,7 +15,7 @@ export interface RenderDescProps {
   name?: string | null;
   address: string;
   url: string;
-  token: TokenWithBalance;
+  token: Token;
   customCssForTag: TagCSS;
   customCssForTagTitle: TitleCSS;
 }

widget/embedded/src/components/TokenList/index.ts

@@ -1,2 +1 @@
 export { TokenList } from './TokenList';
-export type { TokenWithBalance } from './TokenList.types';

widget/embedded/src/containers/Wallets/Wallets.tsx

@@ -27,15 +27,14 @@ export const WidgetContext = createContext<WidgetContextInterface>({
 });
 
 function Main(props: PropsWithChildren<PropTypes>) {
-  const updateConfig = useAppStore().updateConfig;
+  const { updateConfig } = useAppStore();
   const blockchains = useAppStore().blockchains();
   const tokens = useAppStore().tokens();
   const walletOptions: ProvidersOptions = {
     walletConnectProjectId: props.config?.walletConnectProjectId,
   };
   const { providers } = useWalletProviders(props.config.wallets, walletOptions);
-  const disconnectWallet = useWalletsStore.use.disconnectWallet();
-  const connectWallet = useWalletsStore.use.connectWallet();
+  const { connectWallet, disconnectWallet } = useWalletsStore();
   const onConnectWalletHandler = useRef<OnConnectHandler>();
 
   useEffect(() => {

widget/embedded/src/pages/Home.tsx

@@ -9,8 +9,6 @@ import { SwitchFromAndToButton } from '../components/SwitchFromAndTo';
 import { errorMessages } from '../constants/errors';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import {
-  BALANCE_MAX_DECIMALS,
-  BALANCE_MIN_DECIMALS,
   PERCENTAGE_CHANGE_MAX_DECIMALS,
   PERCENTAGE_CHANGE_MIN_DECIMALS,
   TOKEN_AMOUNT_MAX_DECIMALS,
@@ -27,7 +25,7 @@ import { useWalletsStore } from '../store/wallets';
 import { numberToString } from '../utils/numbers';
 import { getPriceImpact, getPriceImpactLevel } from '../utils/quote';
 import { canComputePriceImpact, getSwapButtonState } from '../utils/swap';
-import { getBalanceFromWallet } from '../utils/wallets';
+import { formatBalance } from '../utils/wallets';
 
 const Container = styled('div', {
   display: 'flex',
@@ -73,7 +71,7 @@ export function Home() {
 
   const fetchMetaStatus = useAppStore().fetchStatus;
 
-  const connectedWallets = useWalletsStore.use.connectedWallets();
+  const { connectedWallets, getBalanceFor } = useWalletsStore();
   const setCurrentPage = useUiStore.use.setCurrentPage();
   const [showQuoteWarningModal, setShowQuoteWarningModal] = useState(false);
   const layoutRef = useRef<HTMLDivElement>(null);
@@ -103,36 +101,14 @@ export function Home() {
     needsToWarnEthOnPath,
   });
 
-  const tokenBalance =
-    !!fromBlockchain && !!fromToken
-      ? numberToString(
-          getBalanceFromWallet(
-            connectedWallets,
-            fromBlockchain?.name,
-            fromToken?.symbol,
-            fromToken?.address
-          )?.amount || '0',
-          BALANCE_MIN_DECIMALS,
-          BALANCE_MAX_DECIMALS
-        )
-      : '0';
+  const fromTokenBalance = fromToken ? getBalanceFor(fromToken) : null;
+
+  const fromTokenFormattedBalance =
+    formatBalance(fromTokenBalance)?.amount ?? '0';
 
   const tokenBalanceReal =
     !!fromBlockchain && !!fromToken
-      ? numberToString(
-          getBalanceFromWallet(
-            connectedWallets,
-            fromBlockchain?.name,
-            fromToken?.symbol,
-            fromToken?.address
-          )?.amount || '0',
-          getBalanceFromWallet(
-            connectedWallets,
-            fromBlockchain?.name,
-            fromToken?.symbol,
-            fromToken?.address
-          )?.decimal
-        )
+      ? numberToString(fromTokenBalance?.amount, fromTokenBalance?.decimals)
       : '0';
 
   useEffect(() => {
@@ -194,7 +170,7 @@ export function Home() {
               label={i18n.t('From')}
               mode="From"
               onInputChange={setInputAmount}
-              balance={tokenBalance}
+              balance={fromTokenFormattedBalance}
               chain={{
                 displayName: fromBlockchain?.displayName || '',
                 image: fromBlockchain?.logo || '',
@@ -220,7 +196,7 @@ export function Home() {
               disabled={fetchMetaStatus === 'failed'}
               loading={fetchMetaStatus === 'loading'}
               onSelectMaxBalance={() => {
-                if (tokenBalance !== '0') {
+                if (fromTokenFormattedBalance !== '0') {
                   setInputAmount(tokenBalanceReal.split(',').join(''));
                 }
               }}

widget/embedded/src/pages/SelectSwapItemsPage.tsx

@@ -14,7 +14,7 @@ import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useWalletsStore } from '../store/wallets';
-import { getTokensBalanceFromWalletAndSort } from '../utils/wallets';
+import { sortTokensByBalance } from '../utils/wallets';
 
 interface PropTypes {
   type: 'source' | 'destination';
@@ -32,7 +32,7 @@ export function SelectSwapItemsPage(props: PropTypes) {
     setFromBlockchain,
     setToBlockchain,
   } = useQuoteStore();
-  const { connectedWallets } = useWalletsStore();
+  const getBalanceFor = useWalletsStore.use.getBalanceFor();
   const [searchedFor, setSearchedFor] = useState<string>('');
 
   const selectedBlockchain = type === 'source' ? fromBlockchain : toBlockchain;
@@ -47,10 +47,7 @@ export function SelectSwapItemsPage(props: PropTypes) {
     blockchain: selectedBlockchainName,
     searchFor: searchedFor,
   });
-  const tokensList = getTokensBalanceFromWalletAndSort(
-    tokens,
-    connectedWallets
-  );
+  const tokensList = sortTokensByBalance(tokens, getBalanceFor);
 
   // Actions
   const updateBlockchain = (blockchain: BlockchainMeta) => {

widget/embedded/src/store/quote.ts

@@ -1,4 +1,3 @@
-import type { TokenWithBalance } from '../components/TokenList';
 import type { Wallet } from '../types';
 import type { PendingSwap } from '@rango-dev/queue-manager-rango-preset/dist/shared';
 import type {
@@ -38,8 +37,8 @@ export interface QuoteState {
   inputUsdValue: BigNumber | null;
   outputAmount: BigNumber | null;
   outputUsdValue: BigNumber | null;
-  fromToken: TokenWithBalance | null;
-  toToken: TokenWithBalance | null;
+  fromToken: Token | null;
+  toToken: Token | null;
   quoteWalletsConfirmed: boolean;
   selectedWallets: Wallet[];
   quoteWarningsConfirmed: boolean;