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/DegradedStateBanner.tsx

@@ -59,12 +59,7 @@ export const DegradedStateBanner = memo(() => {
 
   const handleRetry = useCallback(() => {
     erroredAccountIds.forEach(accountId =>
-      dispatch(
-        portfolioApi.endpoints.getAccount.initiate(
-          { accountId, upsertOnFetch: true },
-          { forceRefetch: true },
-        ),
-      ),
+      dispatch(portfolioApi.endpoints.getAccount.initiate({ accountId }, { forceRefetch: true })),
     )
   }, [dispatch, erroredAccountIds])
 

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/ManageAccountsDrawer/components/ImportAccounts.tsx

@@ -326,9 +326,7 @@ export const ImportAccounts = ({ chainId, onClose }: ImportAccountsProps) => {
         if (isEnabled) {
           return
         }
-        await dispatch(
-          portfolioApi.endpoints.getAccount.initiate({ accountId, upsertOnFetch: true }),
-        )
+        await dispatch(portfolioApi.endpoints.getAccount.initiate({ accountId }))
       }),
     )
 

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