[Refactor] Improve state management

packages/background/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@block-wallet/background",
-    "version": "1.0.0",
+    "version": "1.1.0",
     "private": true,
     "dependencies": {
         "@block-wallet/chains-assets": "https://github.com/block-wallet/chains-assets#v0.0.24",

packages/background/src/controllers/AccountTrackerController.ts

@@ -23,7 +23,7 @@ import {
     getAddressBalances as getAddressBalancesFromSingleCallBalancesContract,
     isSingleCallBalancesContractAvailable,
 } from '../utils/balance-checker/balanceChecker';
-import { cloneDeep } from 'lodash';
+import { cloneDeep, isEqual } from 'lodash';
 import {
     ACTIONS_TIME_INTERVALS_DEFAULT_VALUES,
     Network,
@@ -852,7 +852,7 @@ export class AccountTrackerController extends BaseController<AccountTrackerState
         assetAddressToGetBalance: string[],
         deletedUserTokens: string[]
     ): void {
-        const stateAccounts = this.store.getState().accounts;
+        const stateAccounts = cloneDeep(this.store.getState().accounts);
 
         const finalNativeTokenBalance = assetAddressToGetBalance.includes(
             NATIVE_TOKEN_ADDRESS
@@ -886,22 +886,28 @@ export class AccountTrackerController extends BaseController<AccountTrackerState
             }
         }
 
-        this.store.updateState({
-            accounts: {
-                ...this.store.getState().accounts,
-                [accountAddress]: {
-                    ...this.store.getState().accounts[accountAddress],
-                    balances: {
-                        ...this.store.getState().accounts[accountAddress]
-                            .balances,
-                        [chainId]: {
-                            nativeTokenBalance: finalNativeTokenBalance,
-                            tokens: finalTokens,
-                        },
+        const newState: Accounts = {
+            ...this.store.getState().accounts,
+            [accountAddress]: {
+                ...this.store.getState().accounts[accountAddress],
+                balances: {
+                    ...this.store.getState().accounts[accountAddress].balances,
+                    [chainId]: {
+                        nativeTokenBalance: finalNativeTokenBalance,
+                        tokens: finalTokens,
                     },
                 },
             },
-        });
+        };
+
+        const shouldUpdate = !isEqual(newState, this.store.getState().accounts);
+
+        //only update state if it has changed.
+        if (shouldUpdate) {
+            this.store.updateState({
+                accounts: newState,
+            });
+        }
     }
 
     /**

packages/background/src/controllers/ActivityListController.ts

@@ -20,6 +20,7 @@ import { compareAddresses } from './transactions/utils/utils';
 import {
     TransactionTypeEnum,
     TransactionWatcherController,
+    TransactionWatcherControllerState,
 } from './TransactionWatcherController';
 
 export interface IActivityListState {
@@ -53,9 +54,52 @@ export class ActivityListController extends BaseController<IActivityListState> {
         // If any of the following stores were updated trigger the ActivityList update
         this._transactionsController.UIStore.subscribe(this.onStoreUpdate);
         this._privacyController.UIStore.subscribe(this.onStoreUpdate);
-        this._preferencesController.store.subscribe(this.onStoreUpdate);
-        this._networkController.store.subscribe(this.onStoreUpdate);
-        this._transactionWatcherController.store.subscribe(this.onStoreUpdate);
+        this._preferencesController.store.subscribe((newState, oldState) => {
+            if (
+                !compareAddresses(
+                    newState.selectedAddress,
+                    oldState?.selectedAddress
+                )
+            ) {
+                return this.onStoreUpdate();
+            }
+        });
+        this._networkController.store.subscribe((newState, oldState) => {
+            if (newState.selectedNetwork !== oldState?.selectedNetwork) {
+                this.onStoreUpdate();
+            }
+        });
+        this._transactionWatcherController.store.subscribe(
+            (newState, oldState) => {
+                const { selectedAddress } =
+                    this._preferencesController.store.getState();
+
+                const safeGetTxsHashes = (
+                    txWatcherState:
+                        | TransactionWatcherControllerState
+                        | undefined
+                ) => {
+                    if (!txWatcherState) {
+                        return [];
+                    }
+                    return this.parseWatchedTransactions(
+                        this._networkController.network.chainId,
+                        selectedAddress,
+                        txWatcherState.transactions
+                    )
+                        .map((tx) => tx.transactionParams.hash!)
+                        .filter(Boolean);
+                };
+
+                const oldTxs = safeGetTxsHashes(oldState);
+                const newTxs = safeGetTxsHashes(newState);
+
+                //If hashes length has changed, then update the activity list.
+                if (oldTxs.length !== newTxs.length) {
+                    this.onStoreUpdate();
+                }
+            }
+        );
         this._bridgeController.store.subscribe(this.onStoreUpdate);
         this.onStoreUpdate();
     }
@@ -219,11 +263,10 @@ export class ActivityListController extends BaseController<IActivityListState> {
      */
     private parseWatchedTransactions(
         chainId: number,
-        selectedAddress: string
+        selectedAddress: string,
+        transactions: TransactionWatcherControllerState['transactions'] = this._transactionWatcherController.store.getState()
+            .transactions
     ): TransactionMeta[] {
-        const { transactions } =
-            this._transactionWatcherController.store.getState();
-
         const watchedTransactions: TransactionMeta[] = [];
 
         if (chainId in transactions) {

packages/background/src/controllers/AddressBookController.ts

@@ -8,6 +8,7 @@ import {
     TransactionMeta,
 } from './transactions/utils/types';
 import { PreferencesController } from './PreferencesController';
+import { isEqual } from 'lodash';
 import { isNativeTokenAddress } from '../utils/token';
 
 /**
@@ -339,15 +340,22 @@ export class AddressBookController extends BaseController<AddressBookControllerM
             }
         }
 
-        this.store.setState({
-            ...this.store.getState(),
-            recentAddresses: {
-                ...this.store.getState().recentAddresses,
-                [network]: {
-                    ...recentAddresses,
+        if (
+            !isEqual(
+                recentAddresses,
+                this.store.getState().recentAddresses[network] || {}
+            )
+        ) {
+            this.store.setState({
+                ...this.store.getState(),
+                recentAddresses: {
+                    ...this.store.getState().recentAddresses,
+                    [network]: {
+                        ...recentAddresses,
+                    },
                 },
-            },
-        });
+            });
+        }
 
         return recentAddresses;
     }

packages/background/src/controllers/AppStateController.ts

@@ -5,6 +5,15 @@ import { isManifestV3 } from '../utils/manifest';
 import KeyringControllerDerivated from './KeyringControllerDerivated';
 import TransactionController from './transactions/TransactionController';
 
+const STICKY_STORAGE_DATA_TTL = 60000 * 10;
+
+export interface AppStateControllerMemState {
+    expiredStickyStorage: boolean;
+    isAppUnlocked: boolean;
+    lockedByTimeout: boolean;
+    idleTimeout: number;
+}
+
 export interface AppStateControllerState {
     idleTimeout: number; // Minutes until auto-lock - Zero if disabled
     isAppUnlocked: boolean;
@@ -17,15 +26,24 @@ export enum AppStateEvents {
     APP_UNLOCKED = 'APP_UNLOCKED',
 }
 
-export default class AppStateController extends BaseController<AppStateControllerState> {
+export default class AppStateController extends BaseController<
+    AppStateControllerState,
+    AppStateControllerMemState
+> {
     private _timer: ReturnType<typeof setTimeout> | null;
+    private _stickyStorageTimer: ReturnType<typeof setTimeout> | undefined;
 
     constructor(
         initState: AppStateControllerState,
         private readonly _keyringController: KeyringControllerDerivated,
         private readonly _transactionController: TransactionController
     ) {
-        super(initState);
+        super(initState, {
+            idleTimeout: initState.idleTimeout,
+            isAppUnlocked: initState.isAppUnlocked,
+            lockedByTimeout: initState.lockedByTimeout,
+            expiredStickyStorage: false,
+        });
 
         this._timer = null;
 
@@ -44,6 +62,28 @@ export default class AppStateController extends BaseController<AppStateControlle
         }
 
         this._resetTimer();
+        this.store.subscribe(
+            (
+                newState: AppStateControllerState,
+                oldState?: AppStateControllerState
+            ) => {
+                //To avoid sending the lastActiveTime to the UI, update the UIStore based on the store data.
+
+                if (newState.isAppUnlocked !== oldState?.isAppUnlocked) {
+                    this.UIStore.updateState({
+                        isAppUnlocked: newState.isAppUnlocked,
+                        lockedByTimeout: newState.lockedByTimeout,
+                    });
+                    return;
+                }
+
+                if (newState.idleTimeout !== oldState?.idleTimeout) {
+                    this.UIStore.updateState({
+                        idleTimeout: newState.idleTimeout,
+                    });
+                }
+            }
+        );
     }
 
     /**
@@ -53,12 +93,9 @@ export default class AppStateController extends BaseController<AppStateControlle
     public setLastActiveTime = (): void => {
         this.store.updateState({ lastActiveTime: new Date().getTime() });
         this._resetTimer();
+        this._resetStickyStorageTimer();
     };
 
-    public get lastActiveTime(): number {
-        return this.lastActiveTime;
-    }
-
     /**
      * Set a custom time in minutes for the extension auto block
      * The idle timeout should be greater than zero
@@ -138,6 +175,19 @@ export default class AppStateController extends BaseController<AppStateControlle
         }
     };
 
+    private _resetStickyStorageTimer = () => {
+        if (this._stickyStorageTimer) {
+            clearTimeout(this._stickyStorageTimer);
+        }
+        //only update UIStore when it is necessary.
+        if (this.UIStore.getState().expiredStickyStorage) {
+            this.UIStore.updateState({ expiredStickyStorage: false });
+        }
+
+        this._stickyStorageTimer = setTimeout(() => {
+            this.UIStore.updateState({ expiredStickyStorage: true });
+        }, STICKY_STORAGE_DATA_TTL);
+    };
     public autoUnlock = async (): Promise<void> => {
         if (isManifestV3()) {
             const { isAppUnlocked } = this.store.getState();
@@ -170,6 +220,7 @@ export default class AppStateController extends BaseController<AppStateControlle
         // Update controller state
         this.store.updateState({
             isAppUnlocked: true,
+            lockedByTimeout: false,
         });
 
         this._resetTimer();