Do notify: Set up base NotificationService

README.md

@@ -56,6 +56,8 @@ to only rebuild the Firefox extension on change:
 $ yarn start --config-name firefox
 # On change, rebuild the firefox and brave extensions but not others.
 $ yarn start --config-name firefox --config-name brave
+# On change, rebuild the chrome
+$ yarn start --config-name chrome
 ```
 
 ### Note for some Linux distributions

background/main.ts

@@ -84,6 +84,7 @@ import {
   setShowAnalyticsNotification,
   setSelectedNetwork,
   setAutoLockInterval,
+  toggleNotifications,
   setShownDismissableItems,
   dismissableItemMarkedAsShown,
 } from "./redux-slices/ui"
@@ -198,6 +199,7 @@ import { getPricePoint, getTokenPrices } from "./lib/prices"
 import { makeFlashbotsProviderCreator } from "./services/chain/serial-fallback-provider"
 import { AnalyticsPreferences, DismissableItem } from "./services/preferences"
 import { newPricePoints } from "./redux-slices/prices"
+import NotificationsService from "./services/notifications"
 
 // This sanitizer runs on store and action data before serializing for remote
 // redux devtools. The goal is to end up with an object that is directly
@@ -351,6 +353,11 @@ export default class Main extends BaseService<never> {
       ledgerService,
     )
 
+    const notificationsService = NotificationsService.create(
+      preferenceService,
+      islandService,
+    )
+
     const walletConnectService = isEnabled(FeatureFlags.SUPPORT_WALLET_CONNECT)
       ? WalletConnectService.create(
           providerBridgeService,
@@ -406,6 +413,7 @@ export default class Main extends BaseService<never> {
       await nftsService,
       await walletConnectService,
       await abilitiesService,
+      await notificationsService,
     )
   }
 
@@ -499,6 +507,11 @@ export default class Main extends BaseService<never> {
      * A promise to the Abilities service which takes care of fetching and storing abilities
      */
     private abilitiesService: AbilitiesService,
+
+    /**
+     * A promise to the Notifications service which takes care of observing and delivering notifications
+     */
+    private notificationsService: NotificationsService,
   ) {
     super({
       initialLoadWaitExpired: {
@@ -609,6 +622,7 @@ export default class Main extends BaseService<never> {
       this.nftsService.startService(),
       this.walletConnectService.startService(),
       this.abilitiesService.startService(),
+      this.notificationsService.startService(),
     ]
 
     await Promise.all(servicesToBeStarted)
@@ -632,6 +646,7 @@ export default class Main extends BaseService<never> {
       this.nftsService.stopService(),
       this.walletConnectService.stopService(),
       this.abilitiesService.stopService(),
+      this.notificationsService.stopService(),
     ]
 
     await Promise.all(servicesToBeStopped)
@@ -690,6 +705,9 @@ export default class Main extends BaseService<never> {
     signer: AccountSigner,
     lastAddressInAccount: boolean,
   ): Promise<void> {
+    // FIXME This whole method should be replaced with a call to
+    // FIXME signerService.removeAccount and an event emission that is
+    // FIXME observed by other services, either directly or indirectly.
     this.store.dispatch(deleteAccount(address))
 
     if (signer.type !== AccountType.ReadOnly && lastAddressInAccount) {
@@ -1834,6 +1852,17 @@ export default class Main extends BaseService<never> {
       },
     )
 
+    uiSliceEmitter.on(
+      "shouldShowNotifications",
+      async (shouldShowNotifications: boolean) => {
+        const isPermissionGranted =
+          await this.preferenceService.setShouldShowNotifications(
+            shouldShowNotifications,
+          )
+        this.store.dispatch(toggleNotifications(isPermissionGranted))
+      },
+    )
+
     uiSliceEmitter.on(
       "updateAnalyticsPreferences",
       async (analyticsPreferences: Partial<AnalyticsPreferences>) => {
@@ -2016,14 +2045,14 @@ export default class Main extends BaseService<never> {
     runtime.onConnect.addListener((port) => {
       if (port.name !== popupMonitorPortName) return
 
+      const { ui } = this.store.getState()
+
       const openTime = Date.now()
 
-      const originalNetworkName =
-        this.store.getState().ui.selectedAccount.network.name
+      const originalNetworkName = ui.selectedAccount.network.name
 
       port.onDisconnect.addListener(() => {
-        const networkNameAtClose =
-          this.store.getState().ui.selectedAccount.network.name
+        const networkNameAtClose = ui.selectedAccount.network.name
         this.analyticsService.sendAnalyticsEvent(AnalyticsEvent.UI_SHOWN, {
           openTime: new Date(openTime).toISOString(),
           closeTime: new Date().toISOString(),

background/redux-slices/ui.ts

@@ -16,6 +16,7 @@ export const defaultSettings = {
   hideDust: false,
   defaultWallet: false,
   showTestNetworks: false,
+  showNotifications: undefined,
   collectAnalytics: false,
   showAnalyticsNotification: false,
   showUnverifiedAssets: false,
@@ -34,6 +35,7 @@ export type UIState = {
     hideDust: boolean
     defaultWallet: boolean
     showTestNetworks: boolean
+    showNotifications?: boolean
     collectAnalytics: boolean
     showAnalyticsNotification: boolean
     showUnverifiedAssets: boolean
@@ -57,6 +59,7 @@ export type Events = {
   newSelectedAccountSwitched: AddressOnNetwork
   userActivityEncountered: AddressOnNetwork
   newSelectedNetwork: EVMNetwork
+  shouldShowNotifications: boolean
   updateAnalyticsPreferences: Partial<AnalyticsPreferences>
   addCustomNetworkResponse: [string, boolean]
   updateAutoLockInterval: number
@@ -116,6 +119,12 @@ const uiSlice = createSlice({
         showAnalyticsNotification: false,
       },
     }),
+    toggleNotifications: (
+      immerState,
+      { payload: showNotifications }: { payload: boolean },
+    ) => {
+      immerState.settings.showNotifications = showNotifications
+    },
     setShowAnalyticsNotification: (
       state,
       { payload: showAnalyticsNotification }: { payload: boolean },
@@ -226,6 +235,7 @@ export const {
   toggleUseFlashbots,
   setShowAnalyticsNotification,
   toggleHideBanners,
+  toggleNotifications,
   setSelectedAccount,
   setSnackbarMessage,
   setDefaultWallet,
@@ -249,6 +259,13 @@ export const updateAnalyticsPreferences = createBackgroundAsyncThunk(
   },
 )
 
+export const showNotifications = createBackgroundAsyncThunk(
+  "ui/showNotifications",
+  async (shouldShowNotifications: boolean) => {
+    await emitter.emit("shouldShowNotifications", shouldShowNotifications)
+  },
+)
+
 export const deleteAnalyticsData = createBackgroundAsyncThunk(
   "ui/deleteAnalyticsData",
   async () => {
@@ -429,6 +446,11 @@ export const selectCollectAnalytics = createSelector(
   (settings) => settings?.collectAnalytics,
 )
 
+export const selectShowNotifications = createSelector(
+  selectSettings,
+  (settings) => settings?.showNotifications,
+)
+
 export const selectHideBanners = createSelector(
   selectSettings,
   (settings) => settings?.hideBanners,

background/services/notifications/index.ts

@@ -0,0 +1,154 @@
+import { uniqueId } from "lodash"
+import BaseService from "../base"
+import IslandService from "../island"
+import PreferenceService from "../preferences"
+import { ServiceCreatorFunction, ServiceLifecycleEvents } from "../types"
+
+type Events = ServiceLifecycleEvents & {
+  notificationDisplayed: string
+  notificationSuppressed: string
+}
+
+type NotificationClickHandler = (() => Promise<void>) | (() => void)
+
+/**
+ * The NotificationService manages all notifications for the extension. It is
+ * charged both with managing the actual notification lifecycle (notification
+ * delivery, dismissal, and reaction to clicks) and delivery (i.e., responding
+ * to user preferences to deliver vs not deliver notifications), but also is
+ * charged with actually creating the notifications themselves.
+ *
+ * Adding a new notification should involve connecting the appropriate event in
+ * another service to a method in NotificationService that will generate the
+ * corresponding notification. In that way, the NotificationService is more part
+ * of the UI aspect of the extension than the background aspect, as it decides
+ * on and creates user-visible content directly.
+ */
+export default class NotificationsService extends BaseService<Events> {
+  private isPermissionGranted: boolean | null = null
+
+  private clickHandlers: {
+    [notificationId: string]: NotificationClickHandler
+  } = {}
+
+  protected boundHandleNotificationClicks =
+    this.handleNotificationClicks.bind(this)
+
+  protected boundCleanUpNotificationClickHandler =
+    this.cleanUpNotificationClickHandler.bind(this)
+
+  /*
+   * Create a new NotificationsService. The service isn't initialized until
+   * startService() is called and resolved.
+   */
+  static create: ServiceCreatorFunction<
+    Events,
+    NotificationsService,
+    [Promise<PreferenceService>, Promise<IslandService>]
+  > = async (preferenceService, islandService) =>
+    new this(await preferenceService, await islandService)
+
+  private constructor(
+    private preferenceService: PreferenceService,
+    private islandService: IslandService,
+  ) {
+    super()
+  }
+
+  protected override async internalStartService(): Promise<void> {
+    await super.internalStartService()
+
+    // Preference and listener setup.
+    // NOTE: Below, we assume if we got `shouldShowNotifications` as true, the
+    // browser notifications permission has been granted. The preferences service
+    // does guard this, but if that ends up not being true, browser.notifications
+    // will be undefined and all of this will explode.
+    this.isPermissionGranted =
+      await this.preferenceService.getShouldShowNotifications()
+
+    this.preferenceService.emitter.on(
+      "setNotificationsPermission",
+      (isPermissionGranted) => {
+        if (isPermissionGranted) {
+          browser.notifications.onClicked.addListener(
+            this.boundHandleNotificationClicks,
+          )
+          browser.notifications.onClosed.addListener(
+            this.boundCleanUpNotificationClickHandler,
+          )
+        } else {
+          browser.notifications.onClicked.removeListener(
+            this.boundHandleNotificationClicks,
+          )
+          browser.notifications.onClosed.removeListener(
+            this.boundCleanUpNotificationClickHandler,
+          )
+        }
+      },
+    )
+
+    if (this.isPermissionGranted) {
+      browser.notifications.onClicked.addListener(
+        this.boundHandleNotificationClicks,
+      )
+      browser.notifications.onClosed.addListener(
+        this.boundCleanUpNotificationClickHandler,
+      )
+    }
+
+    /*
+     * FIXME add below
+    this.islandService.emitter.on("xpDropped", this.notifyXpDrop.bind(this))
+    */
+  }
+
+  // TODO: uncomment when the XP drop is ready
+  // protected async notifyDrop(/* xpInfos: XpInfo[] */): Promise<void> {
+  //   const callback = () => {
+  //     browser.tabs.create({
+  //       url: "dapp url for realm claim, XpInfo must include realm id, ideally some way to communicate if the address is right as well",
+  //     })
+  //   }
+  //   this.notify({ callback })
+  // }
+
+  // Fires the click handler for the given notification id.
+  protected handleNotificationClicks(notificationId: string): void {
+    this.clickHandlers?.[notificationId]()
+  }
+
+  // Clears the click handler for the given notification id.
+  protected cleanUpNotificationClickHandler(notificationId: string): void {
+    delete this.clickHandlers?.[notificationId]
+  }
+
+  /**
+   * Issues a notification with the given title, message, and context message.
+   * The click action, if specified, will be fired when the user clicks on the
+   * notification.
+   */
+  protected async notify({
+    title = "",
+    message = "",
+    contextMessage = "",
+    callback,
+  }: {
+    title?: string
+    message?: string
+    contextMessage?: string
+    callback?: () => void
+  }) {
+    if (!this.isPermissionGranted) {
+      return
+    }
+    const notificationId = uniqueId("notification-")
+
+    await browser.notifications.create(notificationId, {
+      type: "basic",
+      title,
+      message,
+      contextMessage,
+      isClickable: !!callback,
+    })
+  }
+}

background/services/preferences/db.ts

@@ -64,6 +64,7 @@ export type Preferences = {
   accountSignersSettings: AccountSignerSettings[]
   analytics: AnalyticsPreferences
   autoLockInterval: UNIXTime
+  shouldShowNotifications: boolean
 }
 
 /**
@@ -423,6 +424,16 @@ export class PreferenceDatabase extends Dexie {
         }),
     )
 
+    // Add default notifications and set as default off.
+    this.version(21).upgrade((tx) =>
+      tx
+        .table("preferences")
+        .toCollection()
+        .modify((storedPreferences: Omit<Preferences, "showNotifications">) => {
+          Object.assign(storedPreferences, { showNotifications: false })
+        }),
+    )
+
     // This is the old version for populate
     // https://dexie.org/docs/Dexie/Dexie.on.populate-(old-version)
     // The this does not behave according the new docs, but works
@@ -452,6 +463,18 @@ export class PreferenceDatabase extends Dexie {
       })
   }
 
+  async setShouldShowNotifications(newValue: boolean): Promise<void> {
+    await this.preferences
+      .toCollection()
+      .modify((storedPreferences: Preferences) => {
+        const update: Partial<Preferences> = {
+          shouldShowNotifications: newValue,
+        }
+
+        Object.assign(storedPreferences, update)
+      })
+  }
+
   async upsertAnalyticsPreferences(
     analyticsPreferences: Partial<AnalyticsPreferences>,
   ): Promise<void> {

background/services/preferences/defaults.ts

@@ -34,6 +34,7 @@ const defaultPreferences = {
     hasDefaultOnBeenTurnedOn: false,
   },
   autoLockInterval: DEFAULT_AUTOLOCK_INTERVAL,
+  shouldShowNotifications: false,
 }
 
 export default defaultPreferences