feat: settings button rework to be less complex

Hopefully this fixes some issues people were running into with the
settings button.

This avoids us injecting the settings at all into the webpage.

Author: jqphu

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pocketuniverse",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "description": "A transaction checker that helps you avoid crypto scams.",
   "scripts": {
     "build:chrome": "TARGET_BROWSER=chrome node utils/build.js ",

src/lib/request.ts

@@ -119,19 +119,19 @@ export class RequestManager {
   public request(
     args:
       | {
-          chainId: string;
-          transaction: Transaction;
-        }
+        chainId: string;
+        transaction: Transaction;
+      }
       | {
-          chainId: string;
-          domain: any;
-          message: any;
-          primaryType: string;
-        }
+        chainId: string;
+        domain: any;
+        message: any;
+        primaryType: string;
+      }
       | {
-          chainId: string;
-          hash: string;
-        }
+        chainId: string;
+        hash: string;
+      }
   ): Promise<Response> {
     return new Promise((resolve) => {
       let request: RequestArgs;
@@ -200,7 +200,7 @@ const DISPATCH_REQUEST = 'POCKET_UNIVERSE_DISPATCH_REQUEST';
  * Listen to request
  */
 export const listenToRequest = (callback: (request: RequestArgs) => void) => {
-  document.addEventListener(DISPATCH_REQUEST, (event: any) => {
+  document.addEventListener(DISPATCH_REQUEST, async (event: any) => {
     callback(event.detail);
   });
 };

src/lib/settings.ts

@@ -114,9 +114,9 @@ export const updateSimulationState = async (
   simulations = simulations.map((x: StoredSimulation) =>
     x.id === id
       ? {
-          ...x,
-          state,
-        }
+        ...x,
+        state,
+      }
       : x
   );
 
@@ -131,10 +131,10 @@ const updateSimulatioWithErrorMsg = async (id: string, error?: string) => {
   simulations = simulations.map((x: StoredSimulation) =>
     x.id === id
       ? {
-          ...x,
-          error,
-          state: StoredSimulationState.Error,
-        }
+        ...x,
+        error,
+        state: StoredSimulationState.Error,
+      }
       : x
   );
 
@@ -212,7 +212,9 @@ export const clearOldSimulations = async () => {
   return browser.storage.local.set({ simulations });
 };
 
-export const SETTINGS_KEY = 'settings';
+// NOTE: be cautious changing this variable. We need to update the variables in setSettings and getSettings if we do.
+// TODO(jqphu): fix this.
+export const SETTINGS_KEY = 'pocket_universe_settings';
 
 export interface Settings {
   /**
@@ -236,28 +238,28 @@ const updateIcon = (settings: Settings) => {
  */
 export const setSettings = async (args: Settings) => {
   // Default is enabled.
-  let { settings = { disable: false } } = await browser.storage.sync.get(
+  let { pocket_universe_settings = { disable: false } } = await browser.storage.local.get(
     SETTINGS_KEY
   );
-  log.info({ settings: settings, msg: 'Updating settings' });
+  log.info({ settings: pocket_universe_settings, msg: 'Updating settings' });
 
-  settings.disable = args.disable;
+  pocket_universe_settings.disable = args.disable;
 
-  updateIcon(settings);
+  updateIcon(pocket_universe_settings);
 
-  return browser.storage.sync.set({ settings });
+  return browser.storage.local.set({ [SETTINGS_KEY]: pocket_universe_settings });
 };
 
 /**
  * Get the settings.
  */
 export const getSettings = async (): Promise<Settings> => {
-  const { settings = { disable: false } } = await browser.storage.sync.get(
+  const { pocket_universe_settings = { disable: false } } = await browser.storage.local.get(
     SETTINGS_KEY
   );
-  log.info({ settings: settings, msg: 'Getting settings.' });
+  log.info({ settings: pocket_universe_settings, msg: 'Getting settings.' });
 
-  return settings as Settings;
+  return pocket_universe_settings as Settings;
 };
 
 /**

src/lib/storage.ts

@@ -3,7 +3,7 @@
   "__firefox__manifest_version": 2,
 
   "name": "Pocket Universe",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "description": "A transaction checker that helps you avoid crypto scams.",
   "background": {
     "__chrome__service_worker": "background.bundle.js",

src/manifest.json

@@ -6,9 +6,8 @@ import {
   REQUEST_COMMAND,
   Response,
 } from '../../lib/request';
-import { dispatchSettings } from '../../lib/settings';
 import type { StoredSimulation } from '../../lib/storage';
-import { removeSimulation, StoredSimulationState } from '../../lib/storage';
+import { Settings, getSettings, removeSimulation, StoredSimulationState } from '../../lib/storage';
 
 import browser from 'webextension-polyfill';
 
@@ -39,50 +38,58 @@ const maybeRemoveId = (id: string) => {
   }
 };
 
-browser.storage.onChanged.addListener((changes, area) => {
-  if (area === 'sync' && changes.settings?.newValue) {
-    dispatchSettings(changes.settings.newValue);
-  }
-});
-
-listenToRequest((request: RequestArgs) => {
+listenToRequest(async (request: RequestArgs) => {
   log.info({ request }, 'Request');
   ids.push(request.id);
 
-  // Page has sent an event, start listening to storage changes.
-  // This ensures we don't listen to storage changes on every singel webpage.
-  browser.storage.onChanged.addListener((changes, area) => {
-    if (area === 'local' && changes.simulations?.newValue) {
-      const newSimulations = changes.simulations.newValue;
-      log.info(newSimulations, 'Dispatching new values for simulation');
+  getSettings().then((args: Settings) => {
+    if (args.disable) {
 
-      // Note: this will dispatch to **all** content pages.
-      // To address this later we can generate a random id for each page. Append it to the request.
-      // Either way, this should be pretty cheap. It's just DOM communication.
-      // TODO(jqphu): measure & generate random id's so we don't dispatch so many events.
-      newSimulations.forEach((simulation: StoredSimulation) => {
-        // Either dispatch the corresponding event, or push the item to new simulations.
-        if (simulation.state === StoredSimulationState.Confirmed) {
-          log.debug('Dispatch confirmed', simulation.id);
-          dispatchResponse({
-            id: simulation.id,
-            type: Response.Continue,
-          });
-          maybeRemoveId(simulation.id);
-        } else if (simulation.state === StoredSimulationState.Rejected) {
-          log.debug('Dispatch rejected', simulation.id);
-          dispatchResponse({
-            id: simulation.id,
-            type: Response.Reject,
-          });
-          maybeRemoveId(simulation.id);
-        }
+      // Immediately respond continue.
+      dispatchResponse({
+        id: request.id,
+        type: Response.Continue,
       });
+
+      return;
     }
-  });
 
-  browser.runtime.sendMessage({
-    command: REQUEST_COMMAND,
-    data: request,
-  });
+    // Page has sent an event, start listening to storage changes.
+    // This ensures we don't listen to storage changes on every singel webpage.
+    browser.storage.onChanged.addListener((changes, area) => {
+      if (area === 'local' && changes.simulations?.newValue) {
+        const newSimulations = changes.simulations.newValue;
+        log.info(newSimulations, 'Dispatching new values for simulation');
+
+        // Note: this will dispatch to **all** content pages.
+        // To address this later we can generate a random id for each page. Append it to the request.
+        // Either way, this should be pretty cheap. It's just DOM communication.
+        // TODO(jqphu): measure & generate random id's so we don't dispatch so many events.
+        newSimulations.forEach((simulation: StoredSimulation) => {
+          // Either dispatch the corresponding event, or push the item to new simulations.
+          if (simulation.state === StoredSimulationState.Confirmed) {
+            log.debug('Dispatch confirmed', simulation.id);
+            dispatchResponse({
+              id: simulation.id,
+              type: Response.Continue,
+            });
+            maybeRemoveId(simulation.id);
+          } else if (simulation.state === StoredSimulationState.Rejected) {
+            log.debug('Dispatch rejected', simulation.id);
+            dispatchResponse({
+              id: simulation.id,
+              type: Response.Reject,
+            });
+            maybeRemoveId(simulation.id);
+          }
+        });
+      }
+    });
+
+    browser.runtime.sendMessage({
+      command: REQUEST_COMMAND,
+      data: request,
+    });
+
+  })
 });

src/pages/Content/index.ts

@@ -28,7 +28,6 @@ let POCKET = `
 
 import logger from '../../lib/logger';
 import { RequestManager, Response } from '../../lib/request';
-import { settings, listenForSettingsUpdates } from '../../lib/settings';
 import { ethErrors } from 'eth-rpc-errors';
 
 declare global {
@@ -42,7 +41,6 @@ log.debug({ msg: 'Injected script loaded.' });
 
 /// Handling all the request communication.
 const REQUEST_MANAGER = new RequestManager();
-listenForSettingsUpdates();
 
 // Heavily taken from RevokeCash to ensure consistency. Thanks Rosco :)!
 //
@@ -76,13 +74,6 @@ const sendHandler = {
 
 const requestHandler = {
   apply: async (target: any, thisArg: any, args: any[]) => {
-    /*
-     * User has disabled PU, just reflect.
-     */
-    if (settings.disable) {
-      return Reflect.apply(target, thisArg, args);
-    }
-
     const [request] = args;
     if (!request) {
       return Reflect.apply(target, thisArg, args);
@@ -166,13 +157,6 @@ const requestHandler = {
 
 const sendAsyncHandler = {
   apply: async (target: any, thisArg: any, args: any[]) => {
-    /*
-     * User has disabled PU, just reflect.
-     */
-    if (settings.disable) {
-      return Reflect.apply(target, thisArg, args);
-    }
-
     const [request, callback] = args;
     if (!request) {
       return Reflect.apply(target, thisArg, args);