UI improvements, changes naming conventions: pushNotifications -> not…

…ifications

background/main.ts

@@ -84,10 +84,9 @@ import {
   setShowAnalyticsNotification,
   setSelectedNetwork,
   setAutoLockInterval,
-  togglePushNotifications,
+  toggleNotifications,
   setShownDismissableItems,
   dismissableItemMarkedAsShown,
-  showPushNotifications,
 } from "./redux-slices/ui"
 import {
   estimatedFeesPerGas,
@@ -601,8 +600,6 @@ export default class Main extends BaseService<never> {
     })
 
     this.initializeRedux()
-
-    // shouldShowNotifications
   }
 
   protected override async internalStartService(): Promise<void> {
@@ -1862,7 +1859,7 @@ export default class Main extends BaseService<never> {
           await this.preferenceService.setShouldShowNotifications(
             shouldShowNotifications,
           )
-        this.store.dispatch(togglePushNotifications(isPermissionGranted))
+        this.store.dispatch(toggleNotifications(isPermissionGranted))
       },
     )
 
@@ -2050,10 +2047,6 @@ export default class Main extends BaseService<never> {
 
       const { ui } = this.store.getState()
 
-      if (ui.settings.showPushNotifications === undefined) {
-        this.store.dispatch(showPushNotifications(true))
-      }
-
       const openTime = Date.now()
 
       const originalNetworkName = ui.selectedAccount.network.name

background/redux-slices/ui.ts

@@ -16,7 +16,7 @@ export const defaultSettings = {
   hideDust: false,
   defaultWallet: false,
   showTestNetworks: false,
-  showPushNotifications: undefined,
+  showNotifications: undefined,
   collectAnalytics: false,
   showAnalyticsNotification: false,
   showUnverifiedAssets: false,
@@ -35,7 +35,7 @@ export type UIState = {
     hideDust: boolean
     defaultWallet: boolean
     showTestNetworks: boolean
-    showPushNotifications?: boolean
+    showNotifications?: boolean
     collectAnalytics: boolean
     showAnalyticsNotification: boolean
     showUnverifiedAssets: boolean
@@ -119,11 +119,11 @@ const uiSlice = createSlice({
         showAnalyticsNotification: false,
       },
     }),
-    togglePushNotifications: (
+    toggleNotifications: (
       immerState,
-      { payload: showPushNotifications }: { payload: boolean },
+      { payload: showNotifications }: { payload: boolean },
     ) => {
-      immerState.settings.showPushNotifications = showPushNotifications
+      immerState.settings.showNotifications = showNotifications
     },
     setShowAnalyticsNotification: (
       state,
@@ -235,7 +235,7 @@ export const {
   toggleUseFlashbots,
   setShowAnalyticsNotification,
   toggleHideBanners,
-  togglePushNotifications,
+  toggleNotifications,
   setSelectedAccount,
   setSnackbarMessage,
   setDefaultWallet,
@@ -259,8 +259,8 @@ export const updateAnalyticsPreferences = createBackgroundAsyncThunk(
   },
 )
 
-export const showPushNotifications = createBackgroundAsyncThunk(
-  "ui/showPushNotifications",
+export const showNotifications = createBackgroundAsyncThunk(
+  "ui/showNotifications",
   async (shouldShowNotifications: boolean) => {
     await emitter.emit("shouldShowNotifications", shouldShowNotifications)
   },
@@ -446,9 +446,9 @@ export const selectCollectAnalytics = createSelector(
   (settings) => settings?.collectAnalytics,
 )
 
-export const selectPushNotifications = createSelector(
+export const selectNotifications = createSelector(
   selectSettings,
-  (settings) => settings?.showPushNotifications,
+  (settings) => settings?.showNotifications,
 )
 
 export const selectHideBanners = createSelector(

background/services/preferences/index.ts

@@ -17,7 +17,6 @@ import { EVMNetwork, sameNetwork } from "../../networks"
 import { HexString, UNIXTime } from "../../types"
 import { AccountSignerSettings } from "../../ui"
 import { AccountSignerWithId } from "../../signing"
-import logger from "../../lib/logger"
 
 export {
   AnalyticsPreferences,
@@ -277,17 +276,12 @@ export default class PreferenceService extends BaseService<Events> {
           {
             permissions: ["notifications"],
           },
-          async (granted) => {
+          (granted) => {
             resolve(granted)
           },
         )
       } else {
-        chrome.permissions.remove(
-          { permissions: ["notifications"] },
-          async (removed) => {
-            resolve(!removed)
-          },
-        )
+        resolve(false)
       }
     })
 

ui/_locales/en/messages.json

@@ -559,7 +559,7 @@
     },
     "mainMenu": "Settings",
     "signing": "Signing",
-    "showPushNotifications": "Show notifications",
+    "showNotifications": "Show Subscape notifications",
     "hideSmallAssetBalance": "Hide asset balances under {{sign}}{{amount}}",
     "setAsDefault": "Use Taho as default wallet",
     "enableTestNetworks": "Show testnet networks",

ui/components/Wallet/Banner/PortalBanner.tsx

@@ -13,7 +13,6 @@ export default function PortalBanner(): ReactElement | null {
   const hasIslandAssets = useBackgroundSelector(selectHasIslandAssets)
 
   const showIslandAndDismissBanner = () => {
-    browser.permissions.request({ permissions: ["notifications"] })
     browser.tabs.create({ url: "https://app.taho.xyz" })
   }
 

ui/components/Wallet/WalletSubscapeLink.tsx

@@ -1,17 +1,30 @@
 import React, { ReactElement, useState } from "react"
 import classNames from "classnames"
+import { useDispatch, useSelector } from "react-redux"
+import {
+  selectNotifications,
+  showNotifications,
+} from "@tallyho/tally-background/redux-slices/ui"
 import SharedIcon from "../Shared/SharedIcon"
 
 export default function WalletSubspaceLink(): ReactElement {
+  const dispatch = useDispatch()
+  const shouldShowNotifications = useSelector(selectNotifications)
   const [isIconOnly, setIsIconOnly] = useState(true)
 
+  const onClick = () => {
+    if (!shouldShowNotifications) {
+      dispatch(showNotifications(true))
+    }
+
+    window.open("https://app.taho.xyz/", "_blank")?.focus()
+  }
+
   return (
     <button
       type="button"
       className={classNames("subscape_link", { icon_only: isIconOnly })}
-      onClick={() => {
-        window.open("https://app.taho.xyz/", "_blank")?.focus()
-      }}
+      onClick={onClick}
       onMouseEnter={() => setIsIconOnly(false)}
       onMouseLeave={() => setIsIconOnly(true)}
     >

ui/pages/Settings.tsx

@@ -4,8 +4,8 @@ import { Trans, useTranslation } from "react-i18next"
 import {
   selectHideDust,
   toggleHideDust,
-  selectPushNotifications,
-  showPushNotifications,
+  selectNotifications,
+  showNotifications,
   selectShowTestNetworks,
   toggleTestNetworks,
   toggleHideBanners,
@@ -167,16 +167,16 @@ export default function Settings(): ReactElement {
   const hideBanners = useSelector(selectHideBanners)
   const showTestNetworks = useSelector(selectShowTestNetworks)
   const showUnverifiedAssets = useSelector(selectShowUnverifiedAssets)
-  const shouldShowPushNotifications = useSelector(selectPushNotifications)
+  const shouldShowNotifications = useSelector(selectNotifications)
   const useFlashbots = useSelector(selectUseFlashbots)
   const mainCurrencySign = useBackgroundSelector(selectMainCurrencySign)
 
   const toggleHideDustAssets = (toggleValue: boolean) => {
     dispatch(toggleHideDust(toggleValue))
   }
 
-  const togglePushNotifications = (toggleValue: boolean) => {
-    dispatch(showPushNotifications(toggleValue))
+  const toggleNotifications = (toggleValue: boolean) => {
+    dispatch(showNotifications(toggleValue))
   }
 
   const toggleShowTestNetworks = (defaultWalletValue: boolean) => {
@@ -222,12 +222,12 @@ export default function Settings(): ReactElement {
     ),
   }
 
-  const pushNotifications = {
-    title: t("settings.showPushNotifications"),
+  const toggleShowNotifications = {
+    title: t("settings.showNotifications"),
     component: () => (
       <SharedToggleButton
-        onChange={(toggleValue) => togglePushNotifications(toggleValue)}
-        value={shouldShowPushNotifications}
+        onChange={(toggleValue) => toggleNotifications(toggleValue)}
+        value={shouldShowNotifications}
       />
     ),
   }
@@ -417,7 +417,7 @@ export default function Settings(): ReactElement {
     walletOptions: {
       title: t("settings.group.walletOptions"),
       items: [
-        pushNotifications,
+        toggleShowNotifications,
         hideSmallAssetBalance,
         unverifiedAssets,
         customNetworks,