Migrate to Chrome Manifest V3

.eslintignore

@@ -1,5 +1,6 @@
 .eslintrc.js
 scryptworker.js
+service_worker.js
 global.css
 en_US.json
 logo.svg

CHANGELOG.md

@@ -5,4 +5,11 @@
 - Upgrade metrixjs-wallet, this contains upgrades to the bitcoinjs-lib and various other fixes in preperation for migration to PSBT and the removal of transactionb uilder.
 - Fix big with transaction list failing to display when a new tx is submitted
 - Fix issues with the detection of transactions originating from this wallet
-- Switch build tasks to Node 16.x
+- Switch build tasks to Node 16.x
+# Changelog
+
+## 1.0.8 > 1.0.9
+
+- Upgrade webpack to 5.74
+- Move to Extension manifest v3 and rework to service_worker
+- Upgrade whole host of dependancies

package.json

@@ -1,5 +1,6 @@
 {
   "name": "metrimask",
+  "version": "1.0.6",
   "private": true,
   "scripts": {
     "clean": "rm -rf dist",
@@ -69,13 +70,15 @@
     "chrome-call": "^3.0.0",
     "classnames": "^2.2.6",
     "deep-equal": "^2.0.5",
+    "fetch-absolute": "^1.0.0",
     "follow-redirects": "1.14.8",
     "metrixjs-wallet": "https://github.com/TheLindaProjectInc/metrixjs-wallet.git#bitcoinlib-js-update",
     "mobx": "^5.15.7",
     "mobx-react": "^5.2.3",
     "mobx-react-router": "^4.1.0",
     "moment": "^2.29.4",
     "mweb3": "^1.0.0",
+    "node-fetch": "2",
     "qrcode.react": "^3.1.0",
     "react": "18.0.0",
     "react-dom": "18.0.0",

src/background/controllers/accountController.ts

@@ -410,7 +410,7 @@ export default class AccountController extends IController {
   */
   private startPolling = async () => {
     if (!this.getInfoInterval) {
-      this.getInfoInterval = window.setInterval(() => {
+      this.getInfoInterval = self.setInterval(() => {
         this.getWalletInfo();
       }, AccountController.GET_INFO_INTERVAL_MS);
     }

src/background/controllers/cryptoController.ts

@@ -1,5 +1,5 @@
 import { isEmpty, split } from 'lodash';
-
+import scrypt from 'scryptsy';
 import MetriMaskController from '.';
 import IController from './iController';
 import { STORAGE } from '../../constants';
@@ -49,7 +49,7 @@ export default class CryptoController extends IController {
   public generateAppSaltIfNecessary = () => {
     try {
       if (!this.appSalt) {
-        const appSalt: Uint8Array = window.crypto.getRandomValues(new Uint8Array(16)) ;
+        const appSalt: Uint8Array = self.crypto.getRandomValues(new Uint8Array(16)) ;
         this.appSalt = appSalt;
         chrome.storage.local.set(
           { [STORAGE.APP_SALT]: appSalt.toString() },
@@ -69,28 +69,15 @@ export default class CryptoController extends IController {
       throw Error('appSalt should not be empty');
     }
 
-    /*
-    * Create a web worker for the scrypt key derivation, so that it doesn't freeze the loading screen ui.
-    * File path relative to post bundling of webpack. worker-loader node module did not work for me,
-    * possibly a compatibility issue with chrome.
-    */
-    let sww;
-    if (typeof(sww) === 'undefined') {
-      sww = new Worker('./scryptworker.js');
-
-      sww.postMessage({
-        password,
-        salt: this.appSalt,
-        scryptParams: CryptoController.SCRYPT_PARAMS_PW,
-      });
-
-      sww.onmessage = (e) => {
-        if (e.data.err) {
-          throw Error('scrypt failed to calculate derivedKey');
-        }
-        this.passwordHash = e.data.passwordHash;
-        finish();
-      };
+    try {
+      const saltBuffer = Buffer.from(this.appSalt);
+      const { N, r, p } = CryptoController.SCRYPT_PARAMS_PW;
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      const derivedKey = scrypt(password, saltBuffer, N, r, p, 64);
+      this.passwordHash = derivedKey.toString('hex');
+      finish();
+    } catch (err) {
+      console.log({ err });
     }
   };
 }

src/background/controllers/externalController.ts

@@ -1,4 +1,4 @@
-import axios from 'axios';
+const fetch = require('node-fetch');
 
 import MetriMaskController from '.';
 import IController from './iController';
@@ -30,7 +30,7 @@ export default class ExternalController extends IController {
   public startPolling = async () => {
     await this.getMetrixPrice();
     if (!this.getPriceInterval) {
-      this.getPriceInterval = window.setInterval(() => {
+      this.getPriceInterval = self.setInterval(() => {
         this.getMetrixPrice();
       }, ExternalController.GET_PRICE_INTERVAL_MS);
     }
@@ -51,9 +51,9 @@ export default class ExternalController extends IController {
   */
   private getMetrixPrice = async () => {
     try {
-      // const jsonObj = await axios.get('https://api.coinmarketcap.com/v2/ticker/1684/');
-      const jsonObj = await axios.get('https://api.coingecko.com/api/v3/simple/price?ids=linda&vs_currencies=USD');
-      this.metrixPriceUSD = jsonObj.data.linda.usd;
+      const resjsonObj = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=linda&vs_currencies=USD');
+      const jsonObj = await resjsonObj.json();
+      this.metrixPriceUSD = jsonObj.linda.usd;
 
       if (this.main.account.loggedInAccount
         && this.main.account.loggedInAccount.wallet

src/background/controllers/mrc721Controller.ts

@@ -67,7 +67,7 @@ export default class Mrc721Controller extends IController {
   public startPolling = async () => {
     this.getBalances();
     if (!this.getBalancesInterval) {
-      this.getBalancesInterval = window.setInterval(() => {
+      this.getBalancesInterval = self.setInterval(() => {
         this.getBalances();
       }, Mrc721Controller.GET_BALANCES_INTERVAL_MS);
     }

src/background/controllers/onInstallController.ts

@@ -44,13 +44,16 @@ export default class OnInstallController extends IController {
   private refreshTab(tab: chrome.tabs.Tab) {
      // Tells the content script to post a msg to the inpage window letting it know that MetriMask
      // was installed or updated.
-     chrome.tabs.executeScript(tab.id!, {code:
-      `window.postMessage(
-        {
-          message: { type: 'METRIMASK_INSTALLED_OR_UPDATED' }
-        },
-        '*'
-      )`,
+     chrome.scripting.executeScript({
+      target: {tabId: tab.id!, allFrames: true},
+      func: () => {
+        window.postMessage(
+          {
+            message: { type: 'METRIMASK_INSTALLED_OR_UPDATED' }
+          },
+          '*'
+        );
+      },
     });
   }
 }

src/background/controllers/sessionController.ts

@@ -3,7 +3,8 @@ import IController from './iController';
 import {
   MESSAGE_TYPE,
   RESPONSE_TYPE,
-  METRIMASK_ACCOUNT_CHANGE
+  METRIMASK_ACCOUNT_CHANGE,
+  STORAGE
 } from '../../constants';
 
 export default class SessionController extends IController {
@@ -14,17 +15,24 @@ export default class SessionController extends IController {
   constructor(main: MetriMaskController) {
     super('session', main);
 
-    chrome.runtime.onMessage.addListener(this.handleMessage);
+    // Check for session timeout in local storage, override the wallet default if found
+    chrome.storage.local.get([STORAGE.WALLET_TIMEOUT],({walletTimeout}) => {
+        if(walletTimeout !== undefined) {
+          this.sessionLogoutInterval = walletTimeout;
+        }
+        console.log('Session Logout Interval set to: ' + this.sessionLogoutInterval.toString());
+    });
 
-    // When popup is opened
-    chrome.runtime.onConnect.addListener((port) => {
-      this.onPopupOpened();
+      chrome.runtime.onMessage.addListener(this.handleMessage);
+      // When popup is opened
+      chrome.runtime.onConnect.addListener((port) => {
+        this.onPopupOpened();
 
-      // Add listener for when popup is closed
-      port.onDisconnect.addListener(() => this.onPopupClosed());
-    });
+        // Add listener for when popup is closed
+        port.onDisconnect.addListener(() => this.onPopupClosed());
+      });
 
-    this.initFinished();
+      this.initFinished();
   }
 
   /*
@@ -69,7 +77,7 @@ export default class SessionController extends IController {
     // Check if session logout is enabled
     if (this.sessionLogoutInterval > 0) {
       // Logout from bgp after interval
-      this.sessionTimeout = window.setTimeout(() => {
+      this.sessionTimeout = self.setTimeout(() => {
         this.clearSession();
         this.main.crypto.resetPasswordHash();
         console.log('Session cleared');
@@ -98,7 +106,12 @@ export default class SessionController extends IController {
           sendResponse(this.sessionLogoutInterval);
           break;
         case MESSAGE_TYPE.SAVE_SESSION_LOGOUT_INTERVAL:
-          this.sessionLogoutInterval = request.value;
+          chrome.storage.local.set({ [STORAGE.WALLET_TIMEOUT]: request.value },
+            () => {
+              this.sessionLogoutInterval = request.value;
+              console.log('walletTimeout set');
+            }
+          );
           break;
         default:
           break;

src/background/controllers/tokenController.ts

@@ -67,7 +67,7 @@ export default class TokenController extends IController {
   public startPolling = async () => {
     this.getBalances();
     if (!this.getBalancesInterval) {
-      this.getBalancesInterval = window.setInterval(() => {
+      this.getBalancesInterval = self.setInterval(() => {
         this.getBalances();
       }, TokenController.GET_BALANCES_INTERVAL_MS);
     }

src/background/controllers/transactionController.ts

@@ -73,7 +73,7 @@ export default class TransactionController extends IController {
   private startPolling = async () => {
     await this.fetchFirst();
     if (!this.getTransactionsInterval) {
-      this.getTransactionsInterval = window.setInterval(() => {
+      this.getTransactionsInterval = self.setInterval(() => {
         this.refreshTransactions();
       }, TransactionController.GET_TX_INTERVAL_MS);
     }

src/background/index.ts

@@ -1,5 +1,9 @@
 import MetriMaskController from './controllers';
 
+const keepAlive = () => setInterval(chrome.runtime.getPlatformInfo, 20e3);
+chrome.runtime.onStartup.addListener(keepAlive);
+keepAlive();
+
 // Add instance to window for debugging
 const controller = new MetriMaskController();
-Object.assign(window, { controller });
+Object.assign(chrome.windows.getCurrent, { controller });

src/constants.ts

@@ -119,6 +119,7 @@ export enum STORAGE {
   NETWORK_INDEX = 'networkIndex',
   ACCOUNT_TOKEN_LIST = 'accountTokenList',
   ACCOUNT_MRC721_TOKEN_LIST = 'accountMrc721TokenList',
+  WALLET_TIMEOUT = 'walletTimeout',
 }
 
 export enum IMPORT_TYPE {
@@ -144,7 +145,7 @@ export enum INTERVAL_NAMES {
   TEN_MIN = '10 min',
   THIRTY_MIN = '30 min',
   TWO_HOUR = '2 hr',
-  TWELVE_HOUR = '12 hr'
+  FOUR_HOUR = '4 hr'
 }
 
 export enum TRANSACTION_SPEED {

src/contentscript/inject.ts

@@ -25,29 +25,29 @@ const injectStylesheet = (src: string) => {
 };
 
 export const injectAllScripts = async () => {
-  await injectScript(chrome.extension.getURL('commons.all.js')).then(async () => {
-    await injectScript(chrome.extension.getURL('commons.exclude-background.js'));
-    await injectScript(chrome.extension.getURL('commons.exclude-contentscript.js'));
-    await injectScript(chrome.extension.getURL('commons.exclude-popup.js'));
-    await injectScript(chrome.extension.getURL('commons.background-inpage.js'));
-    await injectScript(chrome.extension.getURL('commons.contentscript-inpage.js'));
-    await injectScript(chrome.extension.getURL('commons.popup-inpage.js'));
-    await injectScript(chrome.extension.getURL('inpage.js'));
+  await injectScript(chrome.runtime.getURL('commons.all.js')).then(async () => {
+    await injectScript(chrome.runtime.getURL('commons.exclude-background.js'));
+    await injectScript(chrome.runtime.getURL('commons.exclude-contentscript.js'));
+    await injectScript(chrome.runtime.getURL('commons.exclude-popup.js'));
+    await injectScript(chrome.runtime.getURL('commons.background-inpage.js'));
+    await injectScript(chrome.runtime.getURL('commons.contentscript-inpage.js'));
+    await injectScript(chrome.runtime.getURL('commons.popup-inpage.js'));
+    await injectScript(chrome.runtime.getURL('inpage.js'));
 
     // Pass the Chrome extension absolute URL of the Sign Transaction dialog to the Inpage
-    const signTxUrl = chrome.extension.getURL('sign-tx.html');
+    const signTxUrl = chrome.runtime.getURL('sign-tx.html');
     postWindowMessage(TARGET_NAME.INPAGE, {
       type: API_TYPE.SIGN_TX_URL_RESOLVED,
       payload: { url: signTxUrl },
     });
 
     // Pass the Chrome extension absolute URL of the Sign Message dialog to the Inpage
-    const signMessageUrl = chrome.extension.getURL('sign-message.html');
+    const signMessageUrl = chrome.runtime.getURL('sign-message.html');
     postWindowMessage(TARGET_NAME.INPAGE, {
       type: API_TYPE.SIGN_MESSAGE_URL_RESOLVED,
       payload: { url: signMessageUrl },
     });
   });
 
-  injectStylesheet(chrome.extension.getURL('css/modal.css'));
+  injectStylesheet(chrome.runtime.getURL('css/modal.css'));
 };

src/models/Wallet.ts

@@ -48,8 +48,10 @@ export default class Wallet implements ISigner {
         this.info = newInfo;
         return true;
       }
-    } catch (e: any) {
-      throw(Error(e as string));
+    } catch (e: unknown) {
+      if (e instanceof Error){
+          throw(e);
+      }
     }
 
     return false;

src/popup/MainContainer.tsx

@@ -2,7 +2,14 @@ import React, { Component } from 'react';
 import { inject, observer } from 'mobx-react';
 import { unstable_HistoryRouter as HistoryRouter, Route, Routes } from 'react-router-dom';
 import { SynchronizedHistory } from 'mobx-react-router';
-import { Button, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions } from '@material-ui/core';
+import {
+  Button,
+   Dialog,
+   DialogTitle,
+   DialogContent,
+   DialogContentText,
+   DialogActions
+  } from '@material-ui/core';
 
 import Loading from './components/Loading';
 import Login from './pages/Login';

src/popup/components/Loading/index.tsx

@@ -9,6 +9,7 @@ const Loading: React.FC<any> = ({ classes }: any) => (
   <div className={cx(classes.root, 'loading')}>
     <div className={classes.container}>
       <Typography className={classes.text}>Loading...</Typography>
+      {/* <div className={classes.anim9}></div> */}
       <CircularProgress disableShrink={true} />
     </div>
   </div>