fix(background/storage): allow extension be in multiple states

src/background/services/storage.ts

@@ -1,13 +1,14 @@
 import type {
   AmountValue,
+  ExtensionState,
   GrantDetails,
   Storage,
   StorageKey,
   WalletAmount
 } from '@/shared/types'
 import { type Browser } from 'webextension-polyfill'
 import { EventsService } from './events'
-import { bigIntMax, ThrottleBatch } from '@/shared/helpers'
+import { bigIntMax, objectEquals, ThrottleBatch } from '@/shared/helpers'
 import { computeBalance } from '../utils'
 
 const defaultStorage = {
@@ -18,8 +19,8 @@ const defaultStorage = {
    * structural changes would need migrations for keeping compatibility with
    * existing installations.
    */
-  version: 2,
-  state: null,
+  version: 3,
+  state: {},
   connected: false,
   enabled: true,
   exceptionList: {},
@@ -126,23 +127,14 @@ export class StorageService {
     return false
   }
 
-  // TODO: ensure correct transitions between states, while also considering
-  // race conditions.
-  async setState(
-    state: null | Record<Exclude<Storage['state'], null>, boolean>
-  ): Promise<boolean> {
+  async setState(state: Storage['state']): Promise<boolean> {
     const { state: prevState } = await this.get(['state'])
 
-    let newState: Storage['state'] = null
-    if (state !== null) {
-      if (typeof state.missing_host_permissions === 'boolean') {
-        if (state.missing_host_permissions) {
-          newState = 'missing_host_permissions'
-        }
-      }
+    const newState: Storage['state'] = { ...prevState }
+    for (const key of Object.keys(state) as ExtensionState[]) {
+      newState[key] = state[key]
     }
-
-    if (prevState === newState) {
+    if (prevState && objectEquals(prevState, newState)) {
       return false
     }
 
@@ -253,9 +245,17 @@ const MIGRATIONS: Record<Storage['version'], Migration> = {
     }
 
     if (data.hasHostPermissions === false) {
-      data.state = 'missing_host_permissions' satisfies Storage['state']
+      data.state = 'missing_host_permissions'
     }
 
     return [data, deleteKeys]
+  },
+  3: (data) => {
+    const newState =
+      data.state && typeof data.state === 'string'
+        ? { [data.state as ExtensionState]: true }
+        : {}
+    data.state = newState satisfies Storage['state']
+    return [data]
   }
 }

src/popup/components/ProtectedRoute.tsx

@@ -6,7 +6,7 @@ import { ROUTES_PATH } from '../Popup'
 export const ProtectedRoute = () => {
   const { state } = React.useContext(PopupStateContext)
 
-  if (state.state === 'missing_host_permissions') {
+  if (state.state.missing_host_permissions) {
     return <Navigate to={ROUTES_PATH.MISSING_HOST_PERMISSION} />
   }
   if (state.connected === false) {

src/shared/helpers.test.ts

@@ -0,0 +1,15 @@
+import { objectEquals } from './helpers'
+
+describe('objectEquals', () => {
+  it('should return true if objects are equal', () => {
+    expect(objectEquals({}, {})).toBe(true)
+    expect(objectEquals({ a: 1 }, { a: 1 })).toBe(true)
+    expect(objectEquals({ b: 2, a: 1 }, { a: 1, b: 2 })).toBe(true)
+    expect(objectEquals({ a: 1 }, { a: 1, b: undefined })).toBe(true)
+  })
+
+  it('should return false if objects are not equal', () => {
+    expect(objectEquals({ a: 1 }, { a: 2 })).toBe(false)
+    expect(objectEquals({ a: 1 }, { b: 1 })).toBe(false)
+  })
+})

src/shared/helpers.ts

@@ -192,3 +192,12 @@ export function convert(value: bigint, source: number, target: number) {
 export function bigIntMax(a: string, b: string) {
   return BigInt(a) > BigInt(b) ? a : b
 }
+
+type Primitive = string | number | boolean | null | undefined
+
+// Warn: Not a nested object equals or a deepEquals function
+export function objectEquals<T extends Record<string, Primitive>>(a: T, b: T) {
+  const keysA = Object.keys(a)
+  const keysB = Object.keys(b)
+  return JSON.stringify(a, keysA.sort()) === JSON.stringify(b, keysB.sort())
+}

src/shared/types.ts

@@ -36,6 +36,11 @@ export interface RecurringGrant extends GrantDetailsBase {
 }
 export type GrantDetails = OneTimeGrant | RecurringGrant
 
+export type ExtensionState =
+  | never // just added for code formatting
+  /** Extension can't inject scripts and fetch resources from all hosts */
+  | 'missing_host_permissions'
+
 export interface Storage {
   /**
    * Storage structure version. Used in migrations. Numbers are sequential.
@@ -48,12 +53,7 @@ export interface Storage {
   /** If a wallet is connected or not */
   connected: boolean
   /** Extension state */
-  state:
-    | never // just added for code formatting
-    /** Normal */
-    | null
-    /** Extension can't inject scripts and fetch resources from all hosts */
-    | 'missing_host_permissions'
+  state: Partial<Record<ExtensionState, boolean>>
 
   rateOfPay?: string | undefined | null
   minRateOfPay?: string | undefined | null