feat!: store both recurring/one-time grants & spents; add state

src/background/services/storage.ts

@@ -6,6 +6,7 @@ import type {
 } from '@/shared/types'
 import { type Browser } from 'webextension-polyfill'
 import { EventsService } from './events'
+import { DebounceWithQueue } from '@/shared/helpers'
 
 const defaultStorage = {
   /**
@@ -31,10 +32,25 @@ const defaultStorage = {
 } satisfies Omit<Storage, 'publicKey' | 'privateKey' | 'keyId'>
 
 export class StorageService {
+  private setRemainingBalanceRecurring: DebounceWithQueue<[amount: string]>
+  private setRemainingBalanceOneTime: DebounceWithQueue<[amount: string]>
+
   constructor(
     private browser: Browser,
     private events: EventsService
-  ) {}
+  ) {
+    const bigIntMin = (a: string, b: string) => (BigInt(a) < BigInt(b) ? a : b)
+    this.setRemainingBalanceRecurring = new DebounceWithQueue(
+      (amount: string) => this.set({ recurringGrantRemainingBalance: amount }),
+      (args) => [args.reduce((m, [e]) => (!m ? e : bigIntMin(m, e)), '')],
+      1000
+    )
+    this.setRemainingBalanceOneTime = new DebounceWithQueue(
+      (amount: string) => this.set({ oneTimeGrantRemainingBalance: amount }),
+      (args) => [args.reduce((m, [e]) => (!m ? e : bigIntMin(m, e)), '')],
+      1000
+    )
+  }
 
   async get<TKey extends StorageKey>(
     keys?: TKey[]
@@ -137,6 +153,14 @@ export class StorageService {
     return true
   }
 
+  setRemainingBalance(grant: GrantDetails['type'], balance: string) {
+    if (grant === 'recurring') {
+      this.setRemainingBalanceRecurring.enqueue(balance)
+    } else if (grant === 'one-time') {
+      this.setRemainingBalanceOneTime.enqueue(balance)
+    }
+  }
+
   async updateRate(rate: string): Promise<void> {
     await this.set({ rateOfPay: rate })
     this.events.emit('storage.rate_of_pay_update', { rate })

src/shared/helpers.ts

@@ -88,6 +88,48 @@ export function debounceAsync<T extends unknown[], R extends Promise<unknown>>(
   }
 }
 
+/**
+ * Debounce a function, while allowing the queued arguments to be reduced before
+ * the function is called. With args reducer, we can call the debounced function
+ * with first/last/merged arguments etc.
+ *
+ * @example
+ * ```ts
+ * const debounceWithQueue = new DebounceWithQueue(
+ *   (total: number) => saveToStorage(total),
+ *   (collectedArgs) => collectedArgs.reduce(total, [val] => total + val, 0),
+ *   wait
+ * )
+ * debounceWithQueue.enqueue(10)
+ * debounceWithQueue.enqueue(15)
+ * // results in saveToStorage(25)
+ * ```
+ */
+export class DebounceWithQueue<Args extends unknown[]> {
+  private argsList: Args[] = []
+  private func: () => Promise<unknown>
+
+  constructor(
+    func: (...args: Args) => Promise<unknown>,
+    argsReducer: (args: Args[]) => [...Args],
+    wait: number
+  ) {
+    this.func = debounceAsync(() => {
+      if (this.argsList.length > 0) {
+        const args = argsReducer(this.argsList.slice())
+        this.argsList = []
+        return func(...args)
+      }
+      return Promise.resolve()
+    }, wait)
+  }
+
+  enqueue(...data: Args) {
+    this.argsList.push(data)
+    void this.func()
+  }
+}
+
 export function debounceSync<T extends unknown[], R>(
   func: (...args: T) => R,
   wait: number