feat: blazingly fast initial accounts load (#7822)

* feat: rm request queue

* feat: rm upsertOnFetch

* feat: don't mark upsertPortfolio as low prio action

* feat: rm prepare

* fix: isPortfolioLoaded heuristics

* feat: make metadata upsertion blazingly fast

* fix: multi-account derp

* fix: incremental load

* fix: filter out chains without history for account number, and revert
back p-queue

* feat: improve chunks grouping

* feat: bring back upsertOnFetch

* feat: fetch txHistory *after* all are done

* feat: split getAllTxHistory by AccountIds

* fix: upsert only per-chain accounts

* chore: rm logs and debugger

* feat: revert DegradedStateBanner refetch failed

* feat: importAccounts revert upsertOnFetch

* feat: update comment

* feat: rm paranoia

* feat: opt-chain selector

* feat: remove chunk terminology and fix grouping of UTXO scriptTypes

* feat: set over array for cleanliness

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(() => {