UX/ Reduce RPC error banners

src/controllers/accounts/accounts.ts

@@ -91,23 +91,25 @@ export class AccountsController extends EventEmitter {
   async updateAccountState(
     accountAddr: Account['addr'],
     blockTag: 'pending' | 'latest' = 'latest',
-    networks: NetworkId[] = []
+    networks: NetworkId[] = [],
+    isManualUpdate = false
   ) {
     const accountData = this.accounts.find((account) => account.addr === accountAddr)
 
     if (!accountData) return
 
     await this.withStatus(
       'updateAccountState',
-      async () => this.#updateAccountStates([accountData], blockTag, networks),
+      async () => this.#updateAccountStates([accountData], blockTag, networks, isManualUpdate),
       true
     )
   }
 
   async #updateAccountStates(
     accounts: Account[],
     blockTag: string | number = 'latest',
-    updateOnlyNetworksWithIds: NetworkId[] = []
+    updateOnlyNetworksWithIds: NetworkId[] = [],
+    isManualUpdate = false
   ) {
     // if any, update the account state only for the passed networks; else - all
     const updateOnlyPassedNetworks = updateOnlyNetworksWithIds.length
@@ -138,6 +140,17 @@ export class AccountsController extends EventEmitter {
           })
         } catch (err) {
           console.error(`account state update error for ${network.name}: `, err)
+
+          if (isManualUpdate) {
+            accounts.forEach((account) => {
+              const state = this.accountStates?.[account.addr]?.[network.id]
+
+              if (!state) return
+              // Reset the account state updatedAt timestamp so a banner is displayed
+              state.updatedAt = 0
+            })
+          }
+
           this.#updateProviderIsWorking(network.id, false)
         }
 
@@ -216,4 +229,11 @@ export class AccountsController extends EventEmitter {
     await this.#storage.set('accounts', this.accounts)
     this.emitUpdate()
   }
+
+  get areAccountStatesLoading() {
+    return (
+      this.statuses.updateAccountStates === 'LOADING' ||
+      this.statuses.updateAccountState === 'LOADING'
+    )
+  }
 }

src/controllers/main/main.ts

@@ -588,6 +588,7 @@ export class MainController extends EventEmitter {
 
     this.signAccountOp = new SignAccountOpController(
       this.accounts,
+      this.providers,
       this.keystore,
       this.portfolio,
       this.#externalSignerControllers,
@@ -963,7 +964,12 @@ export class MainController extends EventEmitter {
       // However, even if we don't trigger an update here, it's not a big problem,
       // as the account state will be updated anyway, and its update will be very recent.
       !isUpdatingAccount && this.selectedAccount.account?.addr
-        ? this.accounts.updateAccountState(this.selectedAccount.account.addr, 'pending')
+        ? this.accounts.updateAccountState(
+            this.selectedAccount.account.addr,
+            'pending',
+            undefined,
+            true
+          )
         : Promise.resolve(),
       // `updateSelectedAccountPortfolio` doesn't rely on `withStatus` validation internally,
       // as the PortfolioController already exposes flags that are highly sufficient for the UX.

src/controllers/selectedAccount/selectedAccount.ts

@@ -322,12 +322,20 @@ export class SelectedAccountController extends EventEmitter {
   }
 
   #updatePortfolioBanners(skipUpdate?: boolean) {
-    if (!this.account || !this.#networks || !this.#providers || !this.#portfolio) return
+    if (
+      !this.account ||
+      !this.#networks ||
+      !this.#providers ||
+      !this.#portfolio ||
+      this.#accounts.areAccountStatesLoading
+    )
+      return
 
     const networksWithFailedRPCBanners = getNetworksWithFailedRPCBanners({
       providers: this.#providers.providers,
       networks: this.#networks.networks,
-      networksWithAssets: this.#portfolio.getNetworksWithAssets(this.account.addr)
+      networksWithAssets: this.#portfolio.getNetworksWithAssets(this.account.addr),
+      accountState: this.#accounts.accountStates[this.account.addr]
     })
 
     const errorBanners = getNetworksWithPortfolioErrorBanners({

src/controllers/signAccountOp/signAccountOp.test.ts

@@ -454,6 +454,7 @@ const init = async (
   const callRelayer = relayerCall.bind({ url: '', fetch })
   const controller = new SignAccountOpController(
     accountsCtrl,
+    providersCtrl,
     keystore,
     portfolio,
     {},

src/controllers/signAccountOp/signAccountOp.ts

@@ -59,6 +59,7 @@ import { AccountOpAction } from '../actions/actions'
 import EventEmitter from '../eventEmitter/eventEmitter'
 import { KeystoreController } from '../keystore/keystore'
 import { PortfolioController } from '../portfolio/portfolio'
+import { ProvidersController } from '../providers/providers'
 import {
   getFeeSpeedIdentifier,
   getFeeTokenPriceUnavailableWarning,
@@ -115,6 +116,8 @@ export class SignAccountOpController extends EventEmitter {
 
   #keystore: KeystoreController
 
+  #providers: ProvidersController
+
   #portfolio: PortfolioController
 
   #externalSignerControllers: ExternalSignerControllers
@@ -175,6 +178,7 @@ export class SignAccountOpController extends EventEmitter {
 
   constructor(
     accounts: AccountsController,
+    providers: ProvidersController,
     keystore: KeystoreController,
     portfolio: PortfolioController,
     externalSignerControllers: ExternalSignerControllers,
@@ -189,6 +193,7 @@ export class SignAccountOpController extends EventEmitter {
     super()
 
     this.#accounts = accounts
+    this.#providers = providers
     this.#keystore = keystore
     this.#portfolio = portfolio
     this.#externalSignerControllers = externalSignerControllers

src/interfaces/account.ts

@@ -43,6 +43,7 @@ export interface AccountOnchainState {
   isErc4337Nonce: boolean
   isV2: boolean
   currentBlock: bigint
+  updatedAt: number
 }
 
 export type AccountStates = {

src/libs/accountState/accountState.ts

@@ -82,7 +82,8 @@ export async function getAccountState(
       ),
       currentBlock: accResult.currentBlock,
       deployError:
-        accounts[index].associatedKeys.length > 0 && accResult.associatedKeyPrivileges.length === 0
+        accounts[index].associatedKeys.length > 0 && accResult.associatedKeyPrivileges.length === 0,
+      updatedAt: Date.now()
     }
 
     return res

src/libs/banners/banners.ts

@@ -1,4 +1,4 @@
-import { Account } from '../../interfaces/account'
+import { Account, AccountStates } from '../../interfaces/account'
 import { AccountOpAction, Action as ActionFromActionsQueue } from '../../interfaces/actions'
 // eslint-disable-next-line import/no-cycle
 import { Action, Banner } from '../../interfaces/banner'
@@ -327,14 +327,16 @@ export const getKeySyncBanner = (addr: string, email: string, keys: string[]) =>
 export const getNetworksWithFailedRPCBanners = ({
   providers,
   networks,
-  networksWithAssets
+  networksWithAssets,
+  accountState
 }: {
   providers: RPCProviders
   networks: Network[]
   networksWithAssets: NetworkId[]
+  accountState: AccountStates[string]
 }): Banner[] => {
   const banners: Banner[] = []
-  const networkIds = getNetworksWithFailedRPC({ providers }).filter((networkId) =>
+  const networkIds = getNetworksWithFailedRPC({ providers, accountState }).filter((networkId) =>
     networksWithAssets.includes(networkId)
   )
 

src/libs/errorHumanizer/errors.ts

@@ -14,7 +14,12 @@ const BROADCAST_OR_ESTIMATION_ERRORS: ErrorHumanizerError[] = [
       'the RPC provider does not support the requested operation. Please check your RPC settings or contact the dApp team.'
   },
   {
-    reasons: [RPC_HARDCODED_ERRORS.rpcTimeout, 'Unable to connect to provider'],
+    reasons: [
+      RPC_HARDCODED_ERRORS.rpcTimeout,
+      'Unable to connect to provider',
+      'SERVER_ERROR',
+      'NETWORK_ERROR'
+    ],
     message:
       'of a problem with the RPC on this network. Please try again later, change the RPC or contact support for assistance.'
   },

src/libs/networks/networks.ts

@@ -2,6 +2,7 @@
 
 import { AMBIRE_ACCOUNT_FACTORY, OPTIMISTIC_ORACLE, SINGLETON } from '../../consts/deploy'
 import { networks as predefinedNetworks } from '../../consts/networks'
+import { AccountStates } from '../../interfaces/account'
 import { Fetch } from '../../interfaces/fetch'
 import {
   Erc4337settings,
@@ -59,11 +60,25 @@ export function is4337Enabled(
   return hasBundlerSupport
 }
 
-export const getNetworksWithFailedRPC = ({ providers }: { providers: RPCProviders }): string[] => {
-  return Object.keys(providers).filter(
-    (networkId) =>
-      typeof providers[networkId].isWorking === 'boolean' && !providers[networkId].isWorking
-  )
+export const getNetworksWithFailedRPC = ({
+  providers,
+  accountState
+}: {
+  providers: RPCProviders
+  accountState: AccountStates[string]
+}): string[] => {
+  return Object.keys(providers).filter((networkId) => {
+    const isProviderWorking =
+      typeof providers[networkId].isWorking !== 'boolean' || providers[networkId].isWorking
+
+    if (isProviderWorking) return false
+    if (!accountState || !accountState[networkId]) return true
+
+    const EIGHT_MINUTES = 1000 * 60 * 8
+    const lastUpdate = accountState[networkId]?.updatedAt || 0
+
+    return Date.now() - lastUpdate > EIGHT_MINUTES
+  })
 }
 
 async function retryRequest(init: Function, counter = 0): Promise<any> {