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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.51.1-next.1",
+  "version": "0.51.1-next.11",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,15 +25,15 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.11.0",
-    "@rango-dev/provider-all": "^0.53.1-next.0",
-    "@rango-dev/queue-manager-core": "^0.32.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.53.0",
-    "@rango-dev/queue-manager-react": "^0.32.0",
+    "@rango-dev/provider-all": "^0.53.1-next.2",
+    "@rango-dev/queue-manager-core": "^0.32.1-next.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.53.1-next.2",
+    "@rango-dev/queue-manager-react": "^0.32.1-next.0",
     "@rango-dev/signer-solana": "^0.44.0",
-    "@rango-dev/ui": "^0.54.0",
-    "@rango-dev/wallets-core": "^0.50.0",
-    "@rango-dev/wallets-react": "^0.37.1-next.0",
-    "@rango-dev/wallets-shared": "^0.51.0",
+    "@rango-dev/ui": "^0.54.1-next.4",
+    "@rango-dev/wallets-core": "^0.50.1-next.1",
+    "@rango-dev/wallets-react": "^0.37.1-next.2",
+    "@rango-dev/wallets-shared": "^0.51.1-next.1",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",
@@ -54,4 +54,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -15,7 +15,6 @@ import React, { useEffect, useState } from 'react';
 
 import { useWallets } from '../..';
 import { WIDGET_UI_ID } from '../../constants';
-import { useDeepLink } from '../../hooks/useDeepLink';
 import { useWalletList } from '../../hooks/useWalletList';
 import { useAppStore } from '../../store/AppStore';
 import { useUiStore } from '../../store/ui';
@@ -39,7 +38,7 @@ export function WalletList(props: PropTypes) {
   const { chain, quoteChains, isSelected, selectWallet, limit, onShowMore } =
     props;
   const isActiveTab = useUiStore.use.isActiveTab();
-  const { checkHasDeepLink, getWalletLink } = useDeepLink();
+
   const { blockchains, connectedWallets } = useAppStore();
   const [selectedWalletToConnect, setSelectedWalletToConnect] =
     useState<ExtendedModalWalletInfo>();
@@ -119,7 +118,9 @@ export function WalletList(props: PropTypes) {
           walletType: wallet.type,
           chain,
         });
-        const isConnected = wallet.state === WalletState.CONNECTED;
+        const isConnected =
+          wallet.state === WalletState.CONNECTED ||
+          wallet.state === WalletState.PARTIALLY_CONNECTED;
         const conciseAddress = address
           ? getConciseAddress(address, ACCOUNT_ADDRESS_MAX_CHARACTERS)
           : '';
@@ -160,9 +161,7 @@ export function WalletList(props: PropTypes) {
           }
         };
 
-        const info = makeInfo(wallet.state, {
-          hasDeepLink: checkHasDeepLink(wallet.type),
-        });
+        const info = makeInfo(wallet.state);
 
         const getWalletDescription = () => {
           if (couldAddExperimentalChain) {
@@ -179,12 +178,16 @@ export function WalletList(props: PropTypes) {
         };
 
         const getWalletDescriptionColor = () => {
-          if (wallet.state === WalletState.CONNECTED) {
+          if (
+            wallet.state === WalletState.CONNECTED ||
+            wallet.state === WalletState.PARTIALLY_CONNECTED
+          ) {
             if (isConnectedButDifferentThanTargetNamespace) {
               return 'neutral600';
             }
             return 'neutral700';
           }
+
           return info.color;
         };
 
@@ -229,7 +232,6 @@ export function WalletList(props: PropTypes) {
               </WatermarkedModal>
             )}
             <SelectableWallet
-              hasDeepLink={checkHasDeepLink(wallet.type)}
               key={wallet.type}
               id="widget-wallets-list-selectable-wallet-btn"
               description={getWalletDescription()}
@@ -238,7 +240,6 @@ export function WalletList(props: PropTypes) {
               selected={isSelected(wallet.type, chain)}
               disabled={!isActiveTab}
               {...wallet}
-              link={getWalletLink(wallet.type)}
             />
           </React.Fragment>
         );

package/src/components/HeaderButtons/WalletButton.tsx

@@ -1,7 +1,7 @@
 import type { PropTypes } from './HeaderButtons.types';
 
 import { i18n } from '@lingui/core';
-import { Image, Tooltip, WalletIcon } from '@rango-dev/ui';
+import { Image, Tooltip, WalletIcon, WalletState } from '@rango-dev/ui';
 import React from 'react';
 
 import { useWalletList } from '../../hooks/useWalletList';
@@ -16,7 +16,9 @@ import {
 function WalletButton(props: PropTypes) {
   const { list } = useWalletList();
   const connectedWallets = list.filter(
-    (wallet) => wallet.state === 'connected'
+    (wallet) =>
+      wallet.state === WalletState.CONNECTED ||
+      wallet.state === WalletState.PARTIALLY_CONNECTED
   );
   const content = !connectedWallets.length ? (
     i18n.t('Connect Wallet')

package/src/components/HistoryGroupedList/HistoryGroupedList.tsx

@@ -81,6 +81,11 @@ export function HistoryGroupedList(props: PropTypes) {
 
   return (
     <GroupedVirtualizedList
+      style={{
+        // See note on https://github.com/rango-exchange/rango-client/pull/1284
+        flexGrow: 1,
+        minHeight: 0,
+      }}
       endReached={() => {
         if (loadedItems.current < list.length) {
           loadMore();

package/src/components/Layout/Layout.constants.ts

@@ -1,3 +1,5 @@
-export const WIDGET_MAX_HEIGHT = 700;
-export const WIDGET_MIN_HEIGHT = 425;
-export const COMPACT_TOKEN_SELECTOR_THRESHOLD = 640;
+export const WIDGET_MAX_HEIGHT = '700px';
+export const WIDGET_MIN_HEIGHT_FOR_SMALL_SCREENS = '425px';
+export const WIDGET_MIN_HEIGHT_FOR_LARGE_SCREENS = '550px';
+export const COMPACT_TOKEN_SELECTOR_THRESHOLD = '640px';
+export const LARGE_SCREEN_MIN_HEIGHT = '800px';

package/src/components/Layout/Layout.styles.ts

@@ -1,6 +1,11 @@
 import { css, styled } from '@rango-dev/ui';
 
-import { WIDGET_MAX_HEIGHT, WIDGET_MIN_HEIGHT } from './Layout.constants';
+import {
+  LARGE_SCREEN_MIN_HEIGHT,
+  WIDGET_MAX_HEIGHT,
+  WIDGET_MIN_HEIGHT_FOR_LARGE_SCREENS,
+  WIDGET_MIN_HEIGHT_FOR_SMALL_SCREENS,
+} from './Layout.constants';
 
 export const LayoutContainer = css({
   borderRadius: '$primary',
@@ -16,16 +21,18 @@ export const Container = styled('div', {
   minWidth: '300px',
   maxWidth: '390px',
   backgroundColor: '$background',
+  maxHeight: WIDGET_MAX_HEIGHT,
   variants: {
     height: {
       auto: {
         height: 'auto',
-        maxHeight: WIDGET_MAX_HEIGHT,
       },
       fixed: {
-        minHeight: WIDGET_MIN_HEIGHT,
-        maxHeight: WIDGET_MAX_HEIGHT,
-        height: WIDGET_MAX_HEIGHT,
+        height: '100%',
+        minHeight: WIDGET_MIN_HEIGHT_FOR_SMALL_SCREENS,
+        [`@media screen and (min-height: ${LARGE_SCREEN_MIN_HEIGHT})`]: {
+          minHeight: WIDGET_MIN_HEIGHT_FOR_LARGE_SCREENS,
+        },
       },
     },
     showBanner: {

package/src/components/Layout/Layout.tsx

@@ -10,7 +10,6 @@ import { WIDGET_UI_ID } from '../../constants';
 import { useIframe } from '../../hooks/useIframe';
 import { isAppLoadedIntoIframe } from '../../hooks/useIframe/useIframe.helpers';
 import { useNavigateBack } from '../../hooks/useNavigateBack';
-import useScreenDetect from '../../hooks/useScreenDetect';
 import { useTheme } from '../../hooks/useTheme';
 import { useAppStore } from '../../store/AppStore';
 import { tabManager, useUiStore } from '../../store/ui';
@@ -22,10 +21,7 @@ import { ActivateTabModal } from '../common/ActivateTabModal';
 import { BackButton, CancelButton, WalletButton } from '../HeaderButtons';
 import { RefreshModal } from '../RefreshModal';
 
-import {
-  COMPACT_TOKEN_SELECTOR_THRESHOLD,
-  WIDGET_MAX_HEIGHT,
-} from './Layout.constants';
+import { COMPACT_TOKEN_SELECTOR_THRESHOLD } from './Layout.constants';
 import { onScrollContentAttachStatusToContainer } from './Layout.helpers';
 import {
   BannerContainer,
@@ -47,7 +43,7 @@ function Layout(props: PropsWithChildren<PropTypes>) {
   const {
     config: { features, theme },
   } = useAppStore();
-  const { watermark, setShowCompactTokenSelector } = useUiStore();
+  const { watermark } = useUiStore();
 
   const hasWatermark = watermark === 'FULL';
   const { activeTheme } = useTheme(theme || {});
@@ -64,10 +60,10 @@ function Layout(props: PropsWithChildren<PropTypes>) {
     showActivateTabModal,
     setShowActivateTabModal,
     activateCurrentTab,
+    setShowCompactTokenSelector,
   } = useUiStore();
   const navigateBack = useNavigateBack();
   const { manager } = useManager();
-  const { isTablet, isMobile } = useScreenDetect();
   const pendingSwaps: PendingSwap[] = getPendingSwaps(manager).map(
     ({ swap }) => swap
   );
@@ -134,35 +130,25 @@ function Layout(props: PropsWithChildren<PropTypes>) {
   }, [fetchStatus]);
 
   useLayoutEffect(() => {
-    const isFixedHeight =
-      height === 'auto' || !containerRef.current || isAppLoadedIntoIframe();
-    const isSmallScreen = isMobile || isTablet;
-
-    const handler = () => {
-      if (isFixedHeight) {
-        return;
-      }
+    if (!containerRef.current) {
+      return;
+    }
 
-      if (isSmallScreen) {
-        containerRef.current.style.height = `${
-          window.innerHeight - containerRef.current.offsetTop
-        }px`;
-      } else {
-        containerRef.current.style.height = `${WIDGET_MAX_HEIGHT}px`;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.contentRect) {
+          setShowCompactTokenSelector(
+            entry.contentRect.height <
+              parseInt(COMPACT_TOKEN_SELECTOR_THRESHOLD)
+          );
+        }
       }
+    });
 
-      setShowCompactTokenSelector(
-        parseFloat(containerRef.current.style.height) <
-          COMPACT_TOKEN_SELECTOR_THRESHOLD
-      );
-    };
-
-    handler();
+    observer.observe(containerRef.current);
 
-    window.addEventListener('resize', handler);
-
-    return () => window.removeEventListener('resize', handler);
-  }, [height, isMobile, isTablet]);
+    return () => observer.disconnect();
+  }, []);
 
   return (
     <Container

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

@@ -9,14 +9,14 @@ import { WalletState } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
 import React from 'react';
 
-import { mapStatusToWalletState } from '../../utils/wallets';
+import { getWalletConnectionStatus } from '../../utils/wallets';
 
 import { ConnectWalletContent } from './SwapDetailsModal.ConnectWallet';
 import { InstallWalletContent } from './SwapDetailsModal.InstallWallet';
 
 export const WalletStateContent = (props: WalletStateContentProps) => {
   const { swap, onClose } = props;
-  const { state } = useWallets();
+  const { state, getWalletInfo } = useWallets();
 
   const currentStep = getCurrentStep(swap);
   const currentStepWallet = currentStep
@@ -25,7 +25,7 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
 
   const walletType = currentStepWallet?.walletType;
   const walletState = walletType
-    ? mapStatusToWalletState(state(walletType))
+    ? getWalletConnectionStatus(getWalletInfo(walletType), state(walletType))
     : null;
   const currentNamespace = currentStep
     ? getCurrentNamespaceOfOrNull(swap, currentStep)

package/src/components/TokenList/TokenList.styles.ts

@@ -69,8 +69,12 @@ export const Title = styled('div', {
 });
 export const List = styled('ul', {
   flexGrow: 1,
+  height: '100%',
   padding: 0,
   margin: 0,
+  // See note on https://github.com/rango-exchange/rango-client/pull/1284
+  display: 'flex',
+  flexDirection: 'column',
   listStyle: 'none',
 
   '& li': {

package/src/components/TokenList/TokenList.tsx

@@ -195,6 +195,11 @@ export function TokenList(props: PropTypes) {
   const renderList = () => {
     return (
       <VirtualizedList
+        style={{
+          // See note on https://github.com/rango-exchange/rango-client/pull/1284
+          flexGrow: 1,
+          minHeight: 0,
+        }}
         itemContent={(index) => {
           const token = tokens[index];
           if (token === 'skeleton') {

package/src/components/WalletStatefulConnect/ConnectStatus.tsx

@@ -10,7 +10,7 @@ import {
 import { useWallets } from '@rango-dev/wallets-react';
 import React from 'react';
 
-import { mapStatusToWalletState } from '../../utils/wallets';
+import { getWalletConnectionStatus } from '../../utils/wallets';
 
 import { LogoContainer, Spinner } from './ConnectStatus.styles';
 
@@ -18,8 +18,11 @@ export function ConnectStatus(props: ConnectStatusProps) {
   // See `wallet` notes on its type definition
   const { wallet, error } = props;
   const { type, image } = wallet;
-  const { state } = useWallets();
-  const walletState = mapStatusToWalletState(state(type));
+  const { state, getWalletInfo } = useWallets();
+  const walletState = getWalletConnectionStatus(
+    getWalletInfo(type),
+    state(type)
+  );
 
   if (walletState === WalletState.CONNECTED) {
     return (

package/src/components/WalletStatefulConnect/Detached.tsx

@@ -75,7 +75,10 @@ export function Detached(props: PropTypes) {
     if (!!singleSelection) {
       return (
         <>
-          <Divider size={20} />
+          <Divider
+            size={20}
+            className="_detached_namespace_list_header_alert_top_divider"
+          />
           <Alert
             id="widget-wallet-stateful-connect-alert"
             variant="alarm"
@@ -84,13 +87,19 @@ export function Detached(props: PropTypes) {
               'This wallet can only connect to one chain at a time.'
             )}
           />
-          <Divider size={30} />
+          <Divider
+            size={30}
+            className="_detached_namespace_list_header_alert_bottom_divider"
+          />
         </>
       );
     }
     return (
       <>
-        <Divider size={30} />
+        <Divider
+          size={30}
+          className="_detached_namespace_list_header_button_top_divider"
+        />
         <NamespacesHeader>
           <Button
             id="widget-detached-disconnect-wallet-btn"
@@ -102,7 +111,10 @@ export function Detached(props: PropTypes) {
             {i18n.t('Disconnect wallet')}
           </Button>
         </NamespacesHeader>
-        <Divider size={16} />
+        <Divider
+          size={16}
+          className="_detached_namespace_list_header_button_bottom_divider"
+        />
       </>
     );
   };

package/src/components/WalletStatefulConnect/Namespaces.tsx

@@ -120,7 +120,10 @@ export function Namespaces(props: PropTypes) {
       />
       {singleNamespace ? (
         <>
-          <Divider size={20} />
+          <Divider
+            size={20}
+            className="_initial_namespace_list_header_alert_top_divider"
+          />
           <Alert
             id="widget-wallet-stateful-connect-alert"
             variant="alarm"
@@ -129,11 +132,17 @@ export function Namespaces(props: PropTypes) {
               'This wallet can only connect to one chain at a time. '
             )}
           />
-          <Divider size={30} />
+          <Divider
+            size={30}
+            className="_initial_namespace_list_header_alert_bottom_divider"
+          />
         </>
       ) : (
         <>
-          <Divider size={30} />
+          <Divider
+            size={30}
+            className="_initial_namespace_list_header_button_top_divider"
+          />
           <Button
             style={{ marginLeft: 'auto' }}
             id="widget-name-space-select-all-btn"
@@ -145,7 +154,10 @@ export function Namespaces(props: PropTypes) {
               ? i18n.t('Deselect all')
               : i18n.t('Select all')}
           </Button>
-          <Divider size={10} />
+          <Divider
+            size={10}
+            className="_initial_namespace_list_header_button_bottom_divider"
+          />
         </>
       )}
       <NamespaceList>

package/src/containers/App/App.styles.ts

@@ -4,6 +4,7 @@ export const MainContainer = styled('div', {
   fontFamily: '$widget',
   boxSizing: 'border-box',
   textAlign: 'left',
+  height: '100%',
   '& *, *::before, *::after': {
     boxSizing: 'inherit',
   },

package/src/hooks/useScreenDetect.ts

@@ -43,7 +43,13 @@ const useScreenDetect = () => {
     return () => window.removeEventListener('resize', handleResize);
   }, []);
 
-  return { isMobile, isTablet, isNotebook, isLargeScreen, isExtraLargeScreen };
+  return {
+    isMobile,
+    isTablet,
+    isNotebook,
+    isLargeScreen,
+    isExtraLargeScreen,
+  };
 };
 
 export default useScreenDetect;

package/src/hooks/useWalletList.ts

@@ -20,7 +20,6 @@ import {
   sortWalletsBasedOnConnectionState,
 } from '../utils/wallets';
 
-import { useDeepLink } from './useDeepLink';
 import { useStatefulConnect } from './useStatefulConnect/useStatefulConnect';
 
 interface Params {
@@ -45,7 +44,6 @@ export function useWalletList(params?: Params): API {
   const { state, getWalletInfo } = useWallets();
   const blockchains = useAppStore().blockchains();
   const { handleDisconnect } = useStatefulConnect();
-  const { checkHasDeepLink } = useDeepLink();
 
   /** It can be what has been set by widget config or as a fallback we use all the supported wallets by our library */
   const listAvailableWalletTypes = configWalletsToWalletName(
@@ -62,12 +60,11 @@ export function useWalletList(params?: Params): API {
   wallets = detectMobileScreens()
     ? wallets.filter(
         (wallet) =>
-          wallet.showOnMobile !== false &&
-          (state(wallet.type).installed || checkHasDeepLink(wallet.type))
+          wallet.showOnMobile !== false && state(wallet.type).installed
       )
     : wallets;
 
-  const sortedWallets = sortWalletsBasedOnConnectionState(wallets, state);
+  const sortedWallets = sortWalletsBasedOnConnectionState(wallets);
 
   const isExperimentalChainNotAdded = (walletType: string) =>
     !connectedWallets.find(

package/src/pages/HistoryPage.tsx

@@ -40,6 +40,9 @@ const HistoryGroupedListContainer = styled('div', {
   flexDirection: 'column',
   gap: 15,
   height: '100%',
+  // See note on https://github.com/rango-exchange/rango-client/pull/1284
+  minHeight: 0,
+  flexGrow: 1,
 });
 
 const SearchAndFilterBar = styled('div', {

package/src/pages/SelectBlockchainPage.tsx

@@ -6,7 +6,7 @@ import {
   getCategoriesCount,
   SelectableCategoryList,
 } from '@rango-dev/ui';
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { BlockchainList } from '../components/BlockchainList';
@@ -16,6 +16,7 @@ import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useSwapMode } from '../hooks/useSwapMode';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
+import { filterBlockchainsWithAtLeastOneToken } from '../utils/common';
 
 interface PropTypes {
   type: 'source' | 'destination' | 'custom-token';
@@ -37,7 +38,12 @@ export function SelectBlockchainPage(props: PropTypes) {
   const blockchains = useAppStore().blockchains({
     type,
   });
-  const activeCategoriesCount = getCategoriesCount(blockchains);
+  const tokens = useAppStore().tokens();
+  const filteredBlockchains = useMemo(
+    () => filterBlockchainsWithAtLeastOneToken(blockchains, tokens),
+    [blockchains.length, tokens.length]
+  );
+  const activeCategoriesCount = getCategoriesCount(filteredBlockchains);
 
   const showCategory = !props.hideCategory && activeCategoriesCount !== 1;
 
@@ -53,7 +59,10 @@ export function SelectBlockchainPage(props: PropTypes) {
         } else {
           const blockchainNativeToken = findNativeToken(blockchain);
           if (blockchainNativeToken) {
-            setToToken({ token: blockchainNativeToken, meta: { blockchains } });
+            setToToken({
+              token: blockchainNativeToken,
+              meta: { blockchains },
+            });
           }
         }
       }
@@ -72,7 +81,7 @@ export function SelectBlockchainPage(props: PropTypes) {
             <SelectableCategoryList
               setCategory={setBlockchainCategory}
               category={blockchainCategory}
-              blockchains={blockchains}
+              blockchains={filteredBlockchains}
               isLoading={fetchStatus === 'loading'}
             />
             <Divider size={24} />
@@ -93,7 +102,7 @@ export function SelectBlockchainPage(props: PropTypes) {
         <Divider size={16} />
 
         <BlockchainList
-          list={blockchains}
+          list={filteredBlockchains}
           showTitle={type !== 'custom-token'}
           searchedFor={searchedFor}
           blockchainCategory={blockchainCategory}

package/src/pages/WalletsPage.tsx

@@ -8,20 +8,16 @@ import {
   styled,
   Typography,
   Wallet,
-  WalletState,
 } from '@rango-dev/ui';
-import { useWallets } from '@rango-dev/wallets-react';
 import React, { useState } from 'react';
 
 import { Layout, PageContainer } from '../components/Layout';
 import { StatefulConnectModal } from '../components/StatefulConnectModal';
-import { useDeepLink } from '../hooks/useDeepLink';
 import { useWalletList } from '../hooks/useWalletList';
 import { useAppStore } from '../store/AppStore';
 import { useUiStore } from '../store/ui';
 import { getContainer, isSingleWalletActive } from '../utils/common';
 import {
-  checkIsWalletPartiallyConnected,
   filterBlockchainsByWalletTypes,
   filterWalletsByCategory,
 } from '../utils/wallets';
@@ -45,8 +41,6 @@ export function WalletsPage() {
   const [blockchainCategory, setBlockchainCategory] = useState<string>('ALL');
   const blockchains = useAppStore().blockchains();
   const { config } = useAppStore();
-  const { state } = useWallets();
-  const { checkHasDeepLink, getWalletLink } = useDeepLink();
   const [selectedWalletToConnect, setSelectedWalletToConnect] =
     useState<WalletInfoWithExtra>();
   const isActiveTab = useUiStore.use.isActiveTab();
@@ -89,25 +83,12 @@ export function WalletsPage() {
         </Typography>
         <ListContainer>
           {filteredWallets.map((wallet, index) => {
-            const namespacesState = state(wallet.type).namespaces;
             const key = `wallet-${index}-${wallet.type}`;
-            const isWalletPartiallyConnected = checkIsWalletPartiallyConnected(
-              wallet,
-              namespacesState
-            );
-
-            let walletState = wallet.state;
-            if (isWalletPartiallyConnected) {
-              // If the wallet is connected to only a subset of namespaces, and the user has the option to connect to additional ones, we label the wallet as `Partially Connected`
-              walletState = WalletState.PARTIALLY_CONNECTED;
-            }
             return (
               <Wallet
                 key={key}
                 {...wallet}
-                state={walletState}
-                hasDeepLink={checkHasDeepLink(wallet.type)}
-                link={getWalletLink(wallet.type)}
+                state={wallet.state}
                 container={getContainer()}
                 onClick={() => handleWalletItemClick(wallet)}
                 isLoading={fetchMetaStatus === 'loading'}

package/src/store/slices/data.ts

@@ -355,33 +355,22 @@ export const createDataSlice: StateCreator<
       >();
       const tokensMapByBlockchainName: DataSlice['_tokensMapByBlockchainName'] =
         {};
-      const tokens: Token[] = [];
       const popularTokens: Token[] = response.popularTokens;
       const swappers: SwapperMeta[] = response.swappers.filter(
         (swapper) => swapper.enabled
       );
-      const blockchainsWithAtLeastOneToken = new Set();
-
-      response.tokens.forEach((token) => {
-        blockchainsWithAtLeastOneToken.add(token.blockchain);
-
-        tokens.push(token);
-      });
 
       const sortedBlockchain = response.blockchains.sort(
         (a, b) => a.sort - b.sort
       );
 
       sortedBlockchain.forEach((blockchain) => {
-        if (
-          blockchain.enabled &&
-          blockchainsWithAtLeastOneToken.has(blockchain.name)
-        ) {
+        if (blockchain.enabled) {
           blockchainsMapByName.set(blockchain.name, blockchain);
         }
       });
 
-      tokens.forEach((token) => {
+      response.tokens.forEach((token) => {
         const tokenHash = createTokenHash(token);
         if (!tokensMapByBlockchainName[token.blockchain]) {
           tokensMapByBlockchainName[token.blockchain] = [];