Add configurable notifications (#767)

* initial

* bump ui-keyring

* update names

* lint

Co-authored-by: Jaco Greeff <jacogr@gmail.com>

packages/extension-base/src/background/handlers/State.ts

@@ -9,6 +9,7 @@ import { BehaviorSubject } from 'rxjs';
 
 import { addMetadata, knownMetadata } from '@polkadot/extension-chains';
 import chrome from '@polkadot/extension-inject/chrome';
+import settings from '@polkadot/ui-settings';
 import { assert } from '@polkadot/util';
 
 import { MetadataStore } from '../../stores';
@@ -59,17 +60,30 @@ interface SignRequest extends Resolver<ResponseSigning> {
 
 let idCounter = 0;
 
-const WINDOW_OPTS: chrome.windows.CreateData = {
-  // This is not allowed on FF, only on Chrome - disable completely
-  // focused: true,
+const NOTIFICATION_URL = chrome.extension.getURL('notification.html');
+
+const POPUP_WINDOW_OPTS: chrome.windows.CreateData = {
+  focused: true,
   height: 621,
   left: 150,
   top: 150,
   type: 'popup',
-  url: chrome.extension.getURL('notification.html'),
+  url: NOTIFICATION_URL,
   width: 560
 };
 
+const NORMAL_WINDOW_OPTS: chrome.windows.CreateData = {
+  focused: true,
+  type: 'normal',
+  url: NOTIFICATION_URL
+};
+
+export enum NotificationOptions {
+  None,
+  Normal,
+  PopUp,
+}
+
 const AUTH_URLS_KEY = 'authUrls';
 
 function getId (): string {
@@ -162,6 +176,10 @@ export default class State {
   }
 
   private popupOpen (): void {
+    if (settings.notification === 'extension') { return; }
+
+    const WINDOW_OPTS = settings.notification === 'window' ? NORMAL_WINDOW_OPTS : POPUP_WINDOW_OPTS;
+
     chrome.windows.create({ ...WINDOW_OPTS }, (window?: chrome.windows.Window): void => {
       if (window) {
         this.#windows.push(window.id || 0);

packages/extension-ui/src/partials/MenuSettings.tsx

@@ -25,6 +25,9 @@ interface Props extends ThemeProps {
   reference: React.MutableRefObject<null>;
 }
 
+const notificationOptions = ['Extension', 'PopUp', 'Window']
+  .map((item) => ({ text: item, value: item.toLowerCase() }));
+
 const prefixOptions = settings.availablePrefixes
   .filter(({ value }) => value !== -1)
   .map(({ text, value }): Option => ({ text, value: `${value}` }));
@@ -33,6 +36,7 @@ function MenuSettings ({ className, reference }: Props): React.ReactElement<Prop
   const { t } = useTranslation();
   const [camera, setCamera] = useState(settings.camera === 'on');
   const [prefix, setPrefix] = useState(`${settings.prefix === -1 ? 42 : settings.prefix}`);
+  const [notification, setNotification] = useState(settings.notification);
   const themeContext = useContext<Theme>(ThemeContext);
   const setTheme = useContext(ThemeSwitchContext);
   const isPopup = useIsPopup();
@@ -51,6 +55,14 @@ function MenuSettings ({ className, reference }: Props): React.ReactElement<Prop
     []
   );
 
+  const _onChangeNotification = useCallback(
+    (value: string): void => {
+      setNotification(value);
+      settings.set({ notification: value });
+    },
+    []
+  );
+
   const _onChangeTheme = useCallback(
     (checked: boolean): void => setTheme(checked ? 'dark' : 'light'),
     [setTheme]
@@ -137,6 +149,19 @@ function MenuSettings ({ className, reference }: Props): React.ReactElement<Prop
           value={settings.i18nLang}
         />
       </MenuItem>
+      <MenuDivider />
+      <MenuItem
+        className='setting'
+        title={t<string>('Notifications')}
+      >
+        <Dropdown
+          className='dropdown'
+          label=''
+          onChange={_onChangeNotification}
+          options={notificationOptions}
+          value={notification}
+        />
+      </MenuItem>
       {isPopup && (
         <>
           <MenuDivider />

packages/extension/public/locales/en/translation.json

@@ -158,5 +158,6 @@
   "Export all accounts": "",
   "All account": "",
   "password for encrypting all accounts": "",
-  "I want to export all my accounts": ""
+  "I want to export all my accounts": "",
+  "Notifications": ""
 }