feat: blazingly fast initial accounts load

src/components/Equity/Equity.tsx

@@ -20,8 +20,8 @@ import {
   selectAssetEquityItemsByFilter,
   selectAssets,
   selectEquityTotalBalance,
+  selectIsPortfolioLoading,
   selectOpportunityApiPending,
-  selectPortfolioLoading,
   selectUnderlyingLpAssetsWithBalancesAndIcons,
 } from 'state/slices/selectors'
 import { useAppSelector } from 'state/store'
@@ -41,7 +41,7 @@ const stackDividerStyle = { marginLeft: 14 }
 
 export const Equity = ({ assetId, accountId }: EquityProps) => {
   const translate = useTranslate()
-  const portfolioLoading = useSelector(selectPortfolioLoading)
+  const portfolioLoading = useSelector(selectIsPortfolioLoading)
   const opportunitiesLoading = useAppSelector(selectOpportunityApiPending)
   const isLoading = portfolioLoading || opportunitiesLoading
   const assets = useAppSelector(selectAssets)

src/components/Layout/Header/Header.tsx

@@ -16,9 +16,9 @@ import { useWallet } from 'hooks/useWallet/useWallet'
 import { isUtxoAccountId } from 'lib/utils/utxo'
 import { portfolio } from 'state/slices/portfolioSlice/portfolioSlice'
 import {
+  selectEnabledWalletAccountIds,
   selectPortfolioDegradedState,
   selectShowSnapsModal,
-  selectWalletAccountIds,
   selectWalletId,
 } from 'state/slices/selectors'
 import { useAppDispatch } from 'state/store'
@@ -98,7 +98,7 @@ export const Header = memo(() => {
   )
 
   const currentWalletId = useSelector(selectWalletId)
-  const walletAccountIds = useSelector(selectWalletAccountIds)
+  const walletAccountIds = useSelector(selectEnabledWalletAccountIds)
   const hasUtxoAccountIds = useMemo(
     () => walletAccountIds.some(accountId => isUtxoAccountId(accountId)),
     [walletAccountIds],

src/components/Modals/FiatRamps/views/FiatForm.tsx

@@ -12,9 +12,9 @@ import { parseAddressInputWithChainId } from 'lib/address/address'
 import { useGetFiatRampsQuery } from 'state/apis/fiatRamps/fiatRamps'
 import {
   selectAssetsSortedByMarketCapUserCurrencyBalanceAndName,
+  selectEnabledWalletAccountIds,
   selectHighestMarketCapFeeAsset,
   selectPortfolioAccountMetadata,
-  selectWalletAccountIds,
   selectWalletConnectedChainIds,
 } from 'state/slices/selectors'
 import { useAppSelector } from 'state/store'
@@ -35,7 +35,7 @@ export const FiatForm: React.FC<FiatFormProps> = ({
   fiatRampAction,
   accountId: selectedAccountId,
 }) => {
-  const walletAccountIds = useSelector(selectWalletAccountIds)
+  const walletAccountIds = useSelector(selectEnabledWalletAccountIds)
   const portfolioAccountMetadata = useSelector(selectPortfolioAccountMetadata)
   const sortedAssets = useSelector(selectAssetsSortedByMarketCapUserCurrencyBalanceAndName)
   const [accountId, setAccountId] = useState<AccountId | undefined>(selectedAccountId)

src/components/Modals/Nfts/NftModal.tsx

@@ -53,7 +53,7 @@ import { nft, nftApi, useGetNftCollectionQuery } from 'state/apis/nft/nftApi'
 import { selectNftById, selectNftCollectionById } from 'state/apis/nft/selectors'
 import { chainIdToOpenseaNetwork } from 'state/apis/nft/utils'
 import { getMediaType } from 'state/apis/zapper/validators'
-import { selectWalletAccountIds, selectWalletId } from 'state/slices/common-selectors'
+import { selectEnabledWalletAccountIds, selectWalletId } from 'state/slices/common-selectors'
 import { selectAssetById } from 'state/slices/selectors'
 import { useAppDispatch, useAppSelector } from 'state/store'
 import { breakpoints } from 'theme/theme'
@@ -105,7 +105,7 @@ export const NftModal: React.FC<NftModalProps> = ({ nftAssetId }) => {
   const modalHeaderBg = useColorModeValue('gray.50', 'gray.785')
   const [isLargerThanMd] = useMediaQuery(`(min-width: ${breakpoints['md']})`)
   const walletId = useAppSelector(selectWalletId)
-  const accountIds = useAppSelector(selectWalletAccountIds)
+  const accountIds = useAppSelector(selectEnabledWalletAccountIds)
 
   useGetNftCollectionQuery(
     { accountIds, collectionId: nftItem.collectionId },

src/components/Modals/Settings/ClearCache.tsx

@@ -19,7 +19,7 @@ import { RawText } from 'components/Text'
 import { reloadWebview } from 'context/WalletProvider/MobileWallet/mobileMessageHandlers'
 import { useWallet } from 'hooks/useWallet/useWallet'
 import { isMobile as isMobileApp } from 'lib/globals'
-import { selectWalletAccountIds } from 'state/slices/selectors'
+import { selectEnabledWalletAccountIds } from 'state/slices/selectors'
 import { txHistory, txHistoryApi } from 'state/slices/txHistorySlice/txHistorySlice'
 import { persistor, useAppDispatch, useAppSelector } from 'state/store'
 
@@ -56,7 +56,7 @@ const ClearCacheButton = ({
 
 export const ClearCache = ({ appHistory }: ClearCacheProps) => {
   const dispatch = useAppDispatch()
-  const requestedAccountIds = useAppSelector(selectWalletAccountIds)
+  const requestedAccountIds = useAppSelector(selectEnabledWalletAccountIds)
   const translate = useTranslate()
   const history = useHistory()
   const { disconnect } = useWallet()
@@ -81,7 +81,9 @@ export const ClearCache = ({ appHistory }: ClearCacheProps) => {
   const handleClearTxHistory = useCallback(() => {
     dispatch(txHistory.actions.clear())
     dispatch(txHistoryApi.util.resetApiState())
-    dispatch(txHistoryApi.endpoints.getAllTxHistory.initiate(requestedAccountIds))
+    requestedAccountIds.forEach(requestedAccountId =>
+      dispatch(txHistoryApi.endpoints.getAllTxHistory.initiate(requestedAccountId)),
+    )
   }, [dispatch, requestedAccountIds])
 
   return (

src/components/Nfts/hooks/useNfts.tsx

@@ -1,10 +1,10 @@
 import { useMemo } from 'react'
 import { useGetNftUserTokensQuery } from 'state/apis/nft/nftApi'
-import { selectWalletAccountIds } from 'state/slices/common-selectors'
+import { selectEnabledWalletAccountIds } from 'state/slices/common-selectors'
 import { useAppSelector } from 'state/store'
 
 export const useNfts = () => {
-  const requestedAccountIds = useAppSelector(selectWalletAccountIds)
+  const requestedAccountIds = useAppSelector(selectEnabledWalletAccountIds)
 
   const { isUninitialized, isLoading, isFetching, data } = useGetNftUserTokensQuery(
     {

src/components/StakingVaults/hooks/useFetchOpportunities.tsx

@@ -8,18 +8,18 @@ import {
   useGetZapperUniV2PoolAssetIdsQuery,
 } from 'state/apis/zapper/zapperApi'
 import {
+  selectEnabledWalletAccountIds,
   selectEvmAccountIds,
   selectPortfolioAccounts,
   selectPortfolioAssetIds,
   selectPortfolioLoadingStatus,
-  selectWalletAccountIds,
 } from 'state/slices/selectors'
 import { useAppDispatch } from 'state/store'
 
 export const useFetchOpportunities = () => {
   const dispatch = useAppDispatch()
   const portfolioLoadingStatus = useSelector(selectPortfolioLoadingStatus)
-  const requestedAccountIds = useSelector(selectWalletAccountIds)
+  const requestedAccountIds = useSelector(selectEnabledWalletAccountIds)
   const evmAccountIds = useSelector(selectEvmAccountIds)
   const portfolioAssetIds = useSelector(selectPortfolioAssetIds)
   const portfolioAccounts = useSelector(selectPortfolioAccounts)

src/components/TradeAssetSearch/components/DefaultAssetList.tsx

@@ -1,6 +1,6 @@
 import type { Asset } from '@shapeshiftoss/types'
 import { useMemo } from 'react'
-import { selectPortfolioLoading } from 'state/slices/selectors'
+import { selectIsPortfolioLoading } from 'state/slices/selectors'
 import { useAppSelector } from 'state/store'
 
 import { useGetPopularAssetsQuery } from '../hooks/useGetPopularAssetsQuery'
@@ -17,7 +17,7 @@ export const DefaultAssetList = ({
   popularAssets,
   onAssetClick,
 }: DefaultAssetListProps) => {
-  const isPortfolioLoading = useAppSelector(selectPortfolioLoading)
+  const isPortfolioLoading = useAppSelector(selectIsPortfolioLoading)
   const { isLoading: isPopularAssetIdsLoading } = useGetPopularAssetsQuery()
 
   const groupIsLoading = useMemo(() => {

src/context/AppProvider/AppContext.tsx

@@ -1,4 +1,5 @@
 import { usePrevious, useToast } from '@chakra-ui/react'
+import type { AccountId, ChainId } from '@shapeshiftoss/caip'
 import { fromAccountId } from '@shapeshiftoss/caip'
 import type { LedgerOpenAppEventArgs } from '@shapeshiftoss/chain-adapters'
 import { emitter } from '@shapeshiftoss/chain-adapters'
@@ -33,11 +34,11 @@ import { preferences } from 'state/slices/preferencesSlice/preferencesSlice'
 import {
   selectAccountIdsByChainId,
   selectAssetIds,
+  selectEnabledWalletAccountIds,
   selectPortfolioAssetIds,
   selectPortfolioLoadingStatus,
   selectSelectedCurrency,
   selectSelectedLocale,
-  selectWalletAccountIds,
 } from 'state/slices/selectors'
 import { txHistoryApi } from 'state/slices/txHistorySlice/txHistorySlice'
 import { useAppDispatch, useAppSelector } from 'state/store'
@@ -59,7 +60,7 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
   const { supportedChains } = usePlugins()
   const wallet = useWallet().state.wallet
   const assetIds = useSelector(selectAssetIds)
-  const requestedAccountIds = useSelector(selectWalletAccountIds)
+  const requestedAccountIds = useSelector(selectEnabledWalletAccountIds)
   const portfolioLoadingStatus = useSelector(selectPortfolioLoadingStatus)
   const portfolioAssetIds = useSelector(selectPortfolioAssetIds)
   const routeAssetId = useRouteAssetId()
@@ -144,19 +145,16 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
         // This ensures that we have fresh portfolio data, but accounts added through account management are not accidentally blown away.
         if (hasManagedAccounts) {
           requestedAccountIds.forEach(accountId => {
-            dispatch(
-              portfolioApi.endpoints.getAccount.initiate(
-                { accountId, upsertOnFetch: true },
-                { forceRefetch: true },
-              ),
-            )
+            dispatch(portfolioApi.endpoints.getAccount.initiate({ accountId, upsertOnFetch: true }))
           })
 
           return
         }
 
         if (!wallet || isLedger(wallet)) return
 
+        const walletId = await wallet.getDeviceID()
+
         let chainIds = supportedChains.filter(chainId => {
           return walletSupportsChain({
             chainId,
@@ -192,64 +190,121 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
           Object.assign(accountMetadataByAccountId, accountIdsAndMetadata)
 
           const { getAccount } = portfolioApi.endpoints
-          const accountPromises = accountIds.map(accountId =>
-            dispatch(getAccount.initiate({ accountId }, { forceRefetch: true })),
-          )
 
-          const accountResults = await Promise.allSettled(accountPromises)
+          // Chunks of AccountIds
+          // For UTXOs, each chain gets its own chunk to detect chain activity over other scriptTypes
+          // For others, no need to use chunks, but for the sake of consistency, we keep the same structure
+          const accountNumberAccountIdChunks = (
+            _accountIds: AccountId[],
+          ): Record<ChainId, AccountId[]> => {
+            return _accountIds.reduce(
+              (acc, _accountId) => {
+                const { chainId } = fromAccountId(_accountId)
+
+                if (isUtxoChainId(chainId)) {
+                  acc[chainId] = [_accountId]
+                  return acc
+                }
+
+                if (!acc[chainId]) {
+                  acc[chainId] = []
+                }
+                acc[chainId].push(_accountId)
+
+                return acc
+              },
+              {} as Record<ChainId, AccountId[]>,
+            )
+          }
 
           let chainIdsWithActivity: string[] = []
-          accountResults.forEach((res, idx) => {
-            if (res.status === 'rejected') return
-
-            const { data: account } = res.value
-            if (!account) return
-
-            const accountId = accountIds[idx]
-            const { chainId } = fromAccountId(accountId)
-
-            const { hasActivity } = account.accounts.byId[accountId]
-
-            const accountNumberHasChainActivity = !isUtxoChainId(chainId)
-              ? hasActivity
-              : // For UTXO AccountIds, we need to check if *any* of the scriptTypes have activity, not only the current one
-                // else, we might end up with partial account data, with only the first 1 or 2 out of 3 scriptTypes
-                // being upserted for BTC and LTC
-                accountResults.some((res, _idx) => {
-                  if (res.status === 'rejected') return false
-                  const { data: account } = res.value
-                  if (!account) return false
-                  const accountId = accountIds[_idx]
-                  const { chainId: _chainId } = fromAccountId(accountId)
-                  if (chainId !== _chainId) return false
-                  return account.accounts.byId[accountId].hasActivity
-                })
-
-            // don't add accounts with no activity past account 0
-            if (accountNumber > 0 && !accountNumberHasChainActivity)
-              return delete accountMetadataByAccountId[accountId]
-
-            // unique set to handle utxo chains with multiple account types per account
-            chainIdsWithActivity = Array.from(new Set([...chainIdsWithActivity, chainId]))
-
-            dispatch(portfolio.actions.upsertPortfolio(account))
+          // Chunks of AccountIds promises for accountNumber/AccountId combination
+          // This allows every run of AccountIds per chain/accountNumber to run in parallel vs. all sequentally, so
+          // we can run each chain's side effects immediately
+          const accountNumberAccountIdsPromises = Object.values(
+            accountNumberAccountIdChunks(accountIds),
+          ).map(async accountIds => {
+            const results = await Promise.allSettled(
+              accountIds.map(async id => {
+                const result = await dispatch(getAccount.initiate({ accountId: id }))
+                return result
+              }),
+            )
+
+            results.forEach((res, idx) => {
+              if (res.status === 'rejected') return
+
+              const { data: account } = res.value
+              if (!account) return
+
+              const accountId = accountIds[idx]
+              const { chainId } = fromAccountId(accountId)
+
+              const { hasActivity } = account.accounts.byId[accountId]
+
+              const accountNumberHasChainActivity = !isUtxoChainId(chainId)
+                ? hasActivity
+                : // For UTXO AccountIds, we need to check if *any* of the scriptTypes have activity, not only the current one
+                  // else, we might end up with partial account data, with only the first 1 or 2 out of 3 scriptTypes
+                  // being upserted for BTC and LTC
+                  results.some((res, _idx) => {
+                    if (res.status === 'rejected') return false
+                    const { data: account } = res.value
+                    if (!account) return false
+                    const accountId = accountIds[_idx]
+                    const { chainId: _chainId } = fromAccountId(accountId)
+                    if (chainId !== _chainId) return false
+                    return account.accounts.byId[accountId].hasActivity
+                  })
+
+              // don't add accounts with no activity past account 0
+              if (accountNumber > 0 && !accountNumberHasChainActivity) {
+                chainIdsWithActivity = chainIdsWithActivity.filter(_chainId => _chainId !== chainId)
+                delete accountMetadataByAccountId[accountId]
+              } else {
+                // unique set to handle utxo chains with multiple account types per account
+                chainIdsWithActivity = Array.from(new Set([...chainIdsWithActivity, chainId]))
+
+                dispatch(portfolio.actions.upsertPortfolio(account))
+                const chainIdAccountMetadata = Object.entries(accountMetadataByAccountId).reduce(
+                  (acc, [accountId, metadata]) => {
+                    const { chainId: _chainId } = fromAccountId(accountId)
+                    if (chainId === _chainId) {
+                      acc[accountId] = metadata
+                    }
+                    return acc
+                  },
+                  {} as AccountMetadataById,
+                )
+                dispatch(
+                  portfolio.actions.upsertAccountMetadata({
+                    accountMetadataByAccountId: chainIdAccountMetadata,
+                    walletId,
+                  }),
+                )
+                for (const accountId of Object.keys(accountMetadataByAccountId)) {
+                  dispatch(portfolio.actions.enableAccountId(accountId))
+                }
+              }
+            })
+
+            return results
           })
 
-          chainIds = chainIdsWithActivity
-        }
+          await Promise.allSettled(accountNumberAccountIdsPromises)
 
-        dispatch(
-          portfolio.actions.upsertAccountMetadata({
-            accountMetadataByAccountId,
-            walletId: await wallet.getDeviceID(),
-          }),
-        )
-
-        for (const accountId of Object.keys(accountMetadataByAccountId)) {
-          dispatch(portfolio.actions.enableAccountId(accountId))
+          chainIds = chainIdsWithActivity
         }
       } finally {
         dispatch(portfolio.actions.setIsAccountMetadataLoading(false))
+        // Only fetch and upsert Tx history once all are loaded, otherwise big main thread rug
+        const { getAllTxHistory } = txHistoryApi.endpoints
+
+        await Promise.all(
+          requestedAccountIds.map(requestedAccountId =>
+            dispatch(getAllTxHistory.initiate(requestedAccountId)),
+          ),
+        )
       }
     })()
   }, [
@@ -271,18 +326,6 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
     )
   }, [dispatch, portfolioLoadingStatus])
 
-  // once portfolio is done loading, fetch all transaction history
-  useEffect(() => {
-    ;(async () => {
-      if (!requestedAccountIds.length) return
-      if (portfolioLoadingStatus === 'loading') return
-
-      const { getAllTxHistory } = txHistoryApi.endpoints
-
-      await dispatch(getAllTxHistory.initiate(requestedAccountIds))
-    })()
-  }, [dispatch, requestedAccountIds, portfolioLoadingStatus])
-
   const marketDataPollingInterval = 60 * 15 * 1000 // refetch data every 15 minutes
   useQueries({
     queries: portfolioAssetIds.map(assetId => ({