fix(balances): use live balances on the Portfolio screen

apps/next/src/pages/AccountManagement/AccountManagement.tsx

@@ -1,49 +1,40 @@
-import {
-  AccountManagerProvider,
-  BalancesProvider,
-  WalletTotalBalanceProvider,
-} from '@core/ui';
+import { AccountManagerProvider, WalletTotalBalanceProvider } from '@core/ui';
 import { FC } from 'react';
 import { Route, Switch, useRouteMatch } from 'react-router-dom';
 import { AccountDetails } from './components/AccountDetails';
 import { AddOrConnectWallet } from './components/AddOrCreateWallet/AddOrConnectWallet';
 import { DeleteAccount } from './components/DeleteAccount';
+import { ImportKeystoreFile } from './components/ImportKeystoreFile/Page';
 import { ImportPrivateKey } from './components/ImportPrivateKey/Page';
 import { QRCode } from './components/QRCode';
 import { RenamePage } from './components/RenamePage';
 import { ShowPrivateKey } from './components/ShowPrivateKey/ShowPrivateKey';
 import { WalletsHomePage } from './components/Wallets';
-import { ImportKeystoreFile } from './components/ImportKeystoreFile/Page';
 
 const AccountManagement: FC = () => {
   const { path } = useRouteMatch();
   return (
-    <BalancesProvider>
-      <WalletTotalBalanceProvider>
-        <AccountManagerProvider>
-          <Switch>
-            <Route path={path} exact component={WalletsHomePage} />
-            <Route path={`${path}/rename`} component={RenamePage} />
-            <Route path={`${path}/delete-account`} component={DeleteAccount} />
-            <Route path={`${path}/qr-code`} component={QRCode} />
-            <Route path={`${path}/add-wallet`} component={AddOrConnectWallet} />
-            <Route
-              path={`${path}/import-private-key`}
-              component={ImportPrivateKey}
-            />
-            <Route
-              path={`${path}/import-keystore-file`}
-              component={ImportKeystoreFile}
-            />
-            <Route path={`${path}/account`} component={AccountDetails} />
-            <Route
-              path={`${path}/show-private-key`}
-              component={ShowPrivateKey}
-            />
-          </Switch>
-        </AccountManagerProvider>
-      </WalletTotalBalanceProvider>
-    </BalancesProvider>
+    <WalletTotalBalanceProvider>
+      <AccountManagerProvider>
+        <Switch>
+          <Route path={path} exact component={WalletsHomePage} />
+          <Route path={`${path}/rename`} component={RenamePage} />
+          <Route path={`${path}/delete-account`} component={DeleteAccount} />
+          <Route path={`${path}/qr-code`} component={QRCode} />
+          <Route path={`${path}/add-wallet`} component={AddOrConnectWallet} />
+          <Route
+            path={`${path}/import-private-key`}
+            component={ImportPrivateKey}
+          />
+          <Route
+            path={`${path}/import-keystore-file`}
+            component={ImportKeystoreFile}
+          />
+          <Route path={`${path}/account`} component={AccountDetails} />
+          <Route path={`${path}/show-private-key`} component={ShowPrivateKey} />
+        </Switch>
+      </AccountManagerProvider>
+    </WalletTotalBalanceProvider>
   );
 };
 

apps/next/src/pages/AccountManagement/components/Wallets/components/AccountListItem/components/AccountBalance.tsx

@@ -1,9 +1,11 @@
 import { Stack, Tooltip, Typography } from '@avalabs/k2-alpine';
 import { Account } from '@core/types';
 
-import { useBalancesContext } from '@core/ui/src/contexts/BalancesProvider';
-import { useSettingsContext } from '@core/ui/src/contexts/SettingsProvider';
-import { useBalanceTotalInCurrency } from '@core/ui/src/hooks/useBalanceTotalInCurrency';
+import {
+  useBalancesContext,
+  useBalanceTotalInCurrency,
+  useSettingsContext,
+} from '@core/ui';
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import * as Styled from '../../Styled';

apps/next/src/pages/Portfolio/components/PortfolioHome/PortfolioHome.tsx

@@ -1,29 +1,24 @@
-import {
-  CircularProgress,
-  Stack,
-  styled,
-  TabBar,
-  TabBarItemProps,
-} from '@avalabs/k2-alpine';
-import { hasAccountBalances } from '@core/common';
+import { NoScrollStack } from '@/components/NoScrollStack';
+import { Stack, TabBar, TabBarItemProps } from '@avalabs/k2-alpine';
+import { isEmptyAccount } from '@core/common';
 import {
   useAccountsContext,
   useBalancesContext,
   useNetworkContext,
 } from '@core/ui';
 import { FC, useState } from 'react';
-import { NoScrollStack } from '@/components/NoScrollStack';
 
+import { TestnetModeOverlay } from '@/components/TestnetModeOverlay';
+import { TESTNET_MODE_BACKGROUND_COLOR } from '@/config/constants';
+import { useTranslation } from 'react-i18next';
+import { useHistory, useLocation } from 'react-router-dom';
 import AccountInfo from './components/AccountInfo';
 import { EmptyState } from './components/EmptyState';
+import { LoadingState } from './components/LoadingState';
 import { PortfolioDetails } from './components/PortolioDetails';
-import { useTranslation } from 'react-i18next';
-import { TESTNET_MODE_BACKGROUND_COLOR } from '@/config/constants';
-import { TestnetModeOverlay } from '@/components/TestnetModeOverlay';
-import { useHistory, useLocation } from 'react-router-dom';
 import { TabsContainer } from './styled';
 
-export type TabName = 'assets' | 'collectibles' | 'defi' | 'activity';
+import { TabName } from './types';
 
 export const PortfolioHome: FC = () => {
   const { t } = useTranslation();
@@ -42,13 +37,10 @@ export const PortfolioHome: FC = () => {
   );
   const { networks, isDeveloperMode } = useNetworkContext();
   const { totalBalance, balances } = useBalancesContext();
-  const isLoading = !totalBalance;
+
+  const isLoading = balances.loading || !totalBalance;
   const isAccountEmpty =
-    !hasAccountBalances(
-      balances.tokens ?? {},
-      accounts.active ?? {},
-      networks.map((n) => n.chainId),
-    ) && !isLoading;
+    !isLoading && isEmptyAccount(balances.tokens, accounts.active, networks);
 
   const TABS: TabBarItemProps[] = [
     {
@@ -92,7 +84,7 @@ export const PortfolioHome: FC = () => {
           />
           <Stack flexGrow={1} gap={2.5}>
             {isLoading ? (
-              <CenteredSpinner />
+              <LoadingState />
             ) : (
               <PortfolioContent tab={activeTab} />
             )}
@@ -123,7 +115,3 @@ export const PortfolioHome: FC = () => {
     </>
   );
 };
-
-const CenteredSpinner = styled(CircularProgress)({
-  margin: 'auto',
-});

apps/next/src/pages/Portfolio/components/PortfolioHome/components/LoadingState.tsx

@@ -0,0 +1,54 @@
+import { Box, Skeleton, Stack } from '@avalabs/k2-alpine';
+import { FC } from 'react';
+
+export const LoadingState: FC = () => {
+  return (
+    <Stack gap={1.25} height={1} overflow="clip">
+      <ActionButtonsSkeleton />
+      <TrendingTokensSkeleton />
+      <FiltersBarSkeleton />
+      <TokensListSkeleton />
+    </Stack>
+  );
+};
+
+const ActionButtonsSkeleton: FC = () => {
+  return (
+    <Stack direction="row" gap={1}>
+      <Skeleton height={60} width={60} animation="wave" variant="rounded" />
+      <Skeleton height={60} width={60} animation="wave" variant="rounded" />
+      <Skeleton height={60} width={60} animation="wave" variant="rounded" />
+      <Skeleton height={60} width={60} animation="wave" variant="rounded" />
+    </Stack>
+  );
+};
+
+const TrendingTokensSkeleton: FC = () => {
+  return (
+    <Box pt={1.25}>
+      <Skeleton height={40} animation="wave" variant="rounded" />
+    </Box>
+  );
+};
+
+const FiltersBarSkeleton: FC = () => {
+  return (
+    <Stack direction="row" justifyContent="space-between">
+      <Stack direction="row" gap={1}>
+        <Skeleton width={65} height={24} animation="wave" variant="rounded" />
+        <Skeleton width={62} height={24} animation="wave" variant="rounded" />
+      </Stack>
+      <Skeleton width={70} height={24} animation="wave" variant="rounded" />
+    </Stack>
+  );
+};
+
+const TokensListSkeleton: FC = () => {
+  return (
+    <Stack gap={1}>
+      <Skeleton width="100%" height={50} animation="wave" variant="rounded" />
+      <Skeleton width="100%" height={50} animation="wave" variant="rounded" />
+      <Skeleton width="100%" height={50} animation="wave" variant="rounded" />
+    </Stack>
+  );
+};

apps/next/src/pages/Portfolio/components/PortfolioHome/components/PortolioDetails/PortfolioDetails.tsx

@@ -1,21 +1,34 @@
-import { FC } from 'react';
+import { TokenType } from '@avalabs/vm-module-types';
+import { useLiveBalance } from '@core/ui';
+import { ComponentType, FC } from 'react';
+import { TabName } from '../../types';
 import { ActivityTab, AssetsTab, CollectiblesTab, DeFiTab } from './components';
 import { PortfolioActionButtons } from './components/PortfolioActionButtons';
-import { TabName } from '../../PortfolioHome';
 
 type Props = {
   tab: TabName;
 };
 
-const tabComponents: Record<TabName, FC> = {
-  assets: AssetsTab,
-  collectibles: CollectiblesTab,
-  defi: DeFiTab,
-  activity: ActivityTab,
+type TabConfig = {
+  TabComponent: ComponentType;
+  balancesFor: TokenType[];
+};
+const tabConfig: Record<TabName, TabConfig> = {
+  assets: {
+    TabComponent: AssetsTab,
+    balancesFor: [TokenType.NATIVE, TokenType.ERC20],
+  },
+  collectibles: {
+    TabComponent: CollectiblesTab,
+    balancesFor: [TokenType.ERC721, TokenType.ERC1155],
+  },
+  defi: { TabComponent: DeFiTab, balancesFor: [] },
+  activity: { TabComponent: ActivityTab, balancesFor: [] },
 };
 
 export const PortfolioDetails: FC<Props> = ({ tab }) => {
-  const TabComponent = tabComponents[tab];
+  const { TabComponent, balancesFor } = tabConfig[tab];
+  useLiveBalance(balancesFor);
 
   return (
     <>

apps/next/src/pages/Portfolio/components/PortfolioHome/components/PortolioDetails/components/CollectiblesTab/CollectiblesTab.tsx

@@ -1,25 +1,24 @@
+import { Box, CircularProgress, Stack } from '@avalabs/k2-alpine';
+import { NftTokenWithBalance } from '@avalabs/vm-module-types';
+import { useAccountsContext, useNetworkContext, useNfts } from '@core/ui';
+import { isEmpty } from 'lodash';
 import { useCallback, useMemo } from 'react';
-import { Stack, Box, CircularProgress } from '@avalabs/k2-alpine';
-import { CollectibleListEmpty } from './components/CollectibleListEmpty';
+import { useTranslation } from 'react-i18next';
 import { CollectibleCard } from './components/CollectibleCard';
+import { CollectibleListEmpty } from './components/CollectibleListEmpty';
+import { CollectibleToolbar } from './components/CollectibleToolbar';
+import { CollectiblesManagePopup } from './components/CollectiblesManagePopup';
 import { VirtualizedGrid } from './components/VirtualizedGrid';
-import { useAccountsContext, useNetworkContext, useNfts } from '@core/ui';
-import { useLiveBalance } from '@core/ui';
-import { NftTokenWithBalance, TokenType } from '@avalabs/vm-module-types';
 import {
   FilterType,
   useCollectiblesToolbar,
 } from './hooks/useCollectiblesToolbar';
 import {
-  getUniqueCollectibleId,
-  getStaticMimeType,
   getCollectibleMediaType,
   getCoreCollectibleUrl,
+  getStaticMimeType,
+  getUniqueCollectibleId,
 } from './utils';
-import { CollectibleToolbar } from './components/CollectibleToolbar';
-import { CollectiblesManagePopup } from './components/CollectiblesManagePopup';
-import { useTranslation } from 'react-i18next';
-import { isEmpty } from 'lodash';
 
 export type FormattedCollectible = NftTokenWithBalance & {
   collectibleTypeMedia: FilterType;
@@ -29,11 +28,7 @@ export type FormattedCollectible = NftTokenWithBalance & {
   coreCollectibleUrl?: string;
 };
 
-const POLLED_BALANCES = [TokenType.ERC721, TokenType.ERC1155];
-
 export function CollectiblesTab() {
-  useLiveBalance(POLLED_BALANCES);
-
   const { collectibles, loading } = useNfts();
   const { t } = useTranslation();
   const { isDeveloperMode } = useNetworkContext();

apps/next/src/pages/Portfolio/components/PortfolioHome/types.ts

@@ -0,0 +1 @@
+export type TabName = 'assets' | 'collectibles' | 'defi' | 'activity';

apps/next/src/popup/app.tsx

@@ -65,7 +65,6 @@ const pagesWithoutHeader = [
   '/asset', // Token details path
 ];
 
-// Create a client for React Query
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {

packages/common/src/utils/hasAccountBalances.test.ts

@@ -1,9 +1,9 @@
 import { ChainId, NetworkToken } from '@avalabs/core-chains-sdk';
+import { NetworkTokenWithBalance, TokenType } from '@avalabs/vm-module-types';
 import { Account, AccountType, Balances } from '@core/types';
 import { hasAccountBalances } from './hasAccountBalances';
-import { NetworkTokenWithBalance, TokenType } from '@avalabs/vm-module-types';
 
-describe('utils/calculateTotalBalance', () => {
+describe('utils/hasAccountBalances', () => {
   const account1: Account = {
     id: 'account1 ID',
     name: 'account1 name',