Mv3 migration build updates

.env.example

@@ -1,2 +1,3 @@
 # MANIFEST_TYPE values: MV2 or MV3
-MANIFEST_TYPE=MV3
+MANIFEST_TYPE=MV3
+NODE_ENV=development

.github/workflows/main.yml

@@ -9,7 +9,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '18'
           check-latest: true
       - run: yarn install
       - run: yarn test-all
@@ -20,7 +20,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '18'
           check-latest: true
       - run: yarn install
       - run: |

package.json

@@ -14,11 +14,11 @@
   },
   "scripts": {
     "generate-manifest": "node ./source/config/generateManifest.js",
-    "dev:chrome": "yarn generate-manifest && jq 'del(.environment) | .permissions = if .permissions then (if (.permissions | index(\"webRequest\")) == null then .permissions + [\"webRequest\"] else .permissions end) else [\"webRequest\"] end' manifest.json > modified_manifest.json && mv modified_manifest.json manifest.json && cross-env NODE_ENV=development cross-env TARGET_BROWSER=chrome webpack --watch",
+    "dev:chrome": "yarn generate-manifest && cross-env NODE_ENV=development cross-env TARGET_BROWSER=chrome webpack --config source/config/webpack.dev.js --watch",
+    "build:chrome": "yarn generate-manifest && cross-env NODE_ENV=production cross-env TARGET_BROWSER=chrome webpack --config source/config/webpack.prod.js",
     "dev-watch-requests:chrome": "jq '.permissions = if .permissions then (if (.permissions | index(\"webRequest\")) == null then .permissions + [\"webRequest\"] else .permissions end) else [\"webRequest\"] end | .environment = {\"WATCH_REQUESTS\": \"active\"}' manifest.json > modified_manifest.json && mv modified_manifest.json manifest.json && cross-env NODE_ENV=development cross-env TARGET_BROWSER=chrome webpack --watch",
     "dev:firefox": "jq '.permissions = if .permissions then (if (.permissions | index(\"webRequest\")) == null then .permissions + [\"webRequest\"] else .permissions end) else [\"webRequest\"] end' manifest.json > modified_manifest.json && mv modified_manifest.json manifest.json && cross-env NODE_ENV=development cross-env TARGET_BROWSER=firefox webpack --watch",
     "dev:opera": "jq '.permissions = if .permissions then (if (.permissions | index(\"webRequest\")) == null then .permissions + [\"webRequest\"] else .permissions end) else [\"webRequest\"] end' manifest.json > modified_manifest.json && mv modified_manifest.json manifest.json && cross-env NODE_ENV=development cross-env TARGET_BROWSER=opera webpack --watch",
-    "build:chrome": "jq '.permissions = if .permissions then (.permissions | map(select(. != \"webRequest\"))) else .permissions end' manifest.json > modified_manifest.json && mv modified_manifest.json manifest.json && cross-env NODE_ENV=production cross-env TARGET_BROWSER=chrome webpack",
     "build:firefox": "jq '.permissions = if .permissions then (.permissions | map(select(. != \"webRequest\"))) else .permissions end' manifest.json > modified_manifest.json && mv modified_manifest.json manifest.json && cross-env NODE_ENV=production cross-env TARGET_BROWSER=firefox webpack",
     "build:opera": "jq '.permissions = if .permissions then (.permissions | map(select(. != \"webRequest\"))) else .permissions end' manifest.json > modified_manifest.json && mv modified_manifest.json manifest.json && cross-env NODE_ENV=production cross-env TARGET_BROWSER=opera webpack",
     "build": "yarn run build:chrome && yarn run build:firefox && yarn run build:opera",
@@ -170,10 +170,12 @@
     "ts-jest": "^27.1.3",
     "typescript": "4.1.5",
     "webpack": "^5.82.0",
+    "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.0.2",
     "webpack-dev-server": "^4.13.3",
+    "webpack-merge": "^5.10.0",
     "wext-manifest-loader": "^3.0.0",
-    "wext-manifest-webpack-plugin": "^1.2.1"
+    "wext-manifest-webpack-plugin": "^1.4.1"
   },
   "main": "index.js",
   "bugs": {

source/components/Header/AccountHeader.tsx

@@ -21,7 +21,7 @@ import {
   DefaultModal,
 } from 'components/index';
 import { useUtils } from 'hooks/index';
-import { getController } from 'scripts/Background';
+import { useController } from 'hooks/useController';
 import { RootState } from 'state/store';
 import { ellipsis } from 'utils/index';
 
@@ -288,7 +288,7 @@ const RenderAccountsListByBitcoinBased = (
 
 export const AccountMenu: React.FC = () => {
   const { navigate } = useUtils();
-  const { wallet, dapp } = getController();
+  const { controllerEmitter } = useController();
   const isBitcoinBased = useSelector(
     (state: RootState) => state.vault.isBitcoinBased
   );
@@ -301,11 +301,20 @@ export const AccountMenu: React.FC = () => {
         currentWindow: true,
       });
       const host = new URL(tabs[0].url).hostname;
-      const connectedAccount = dapp.getAccount(host);
-      wallet.setAccount(Number(id), type, host, connectedAccount);
+
+      await controllerEmitter(['dapp', 'getAccount'], [host]).then(
+        async (res) => {
+          await controllerEmitter(
+            ['wallet', 'setAccount'],
+            [Number(id), type, host, res]
+          );
+        }
+      );
+
       return;
     }
-    wallet.setAccount(Number(id), type);
+
+    await controllerEmitter(['wallet', 'setAccount'], [Number(id), type]);
   };
 
   const cursorType = isBitcoinBased ? 'cursor-not-allowed' : 'cursor-pointer';
@@ -409,7 +418,7 @@ export const AccountHeader: React.FC = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [isOpenModal, setIsOpenModal] = useState(false);
   const [isReconectModalOpen, setIsReconectModalOpen] = useState(false);
-  const controller = getController();
+  const { controllerEmitter } = useController();
   const isLedger = activeAccount.type === KeyringAccountType.Ledger;
   const url = chrome.runtime.getURL('app.html');
 
@@ -443,25 +452,35 @@ export const AccountHeader: React.FC = () => {
   const handleVerifyAddress = async () => {
     try {
       setIsLoading(true);
-      await controller.wallet.ledgerSigner.utxo.verifyUtxoAddress(
-        activeAccount.id
+
+      await controllerEmitter(
+        ['wallet', 'ledgerSigner', 'utxo', 'verifyUtxoAddress'],
+        [activeAccount.id]
       );
+
       setIsLoading(false);
+
       setIsOpenModal(false);
+
       alert.success(t('home.addressVerified'));
     } catch (error) {
       const isNecessaryReconnect = error.message.includes(
         'read properties of undefined'
       );
+
       if (isNecessaryReconnect) {
         setIsReconectModalOpen(true);
         return;
       }
+
       const wasDeniedByUser = error?.message?.includes('denied by the user');
+
       if (wasDeniedByUser) {
         alert.error(t('home.verificationDeniedByUser'));
       }
+
       setIsOpenModal(false);
+
       setIsLoading(false);
     }
   };

source/components/Header/Header.tsx

@@ -6,7 +6,7 @@ import { useSelector } from 'react-redux';
 import { INetwork } from '@pollum-io/sysweb3-network';
 
 import { ErrorModal, Icon, Modal, PrimaryButton, SecondaryButton } from '..';
-import { getController } from 'scripts/Background';
+import { useController } from 'hooks/useController';
 import { RootState } from 'state/store';
 
 import { AccountHeader } from '.';
@@ -18,7 +18,7 @@ interface IHeader {
 }
 
 export const Header: React.FC<IHeader> = ({ accountHeader = false }) => {
-  const { wallet, dapp } = getController();
+  const { controllerEmitter } = useController();
   const { t } = useTranslation();
   const error = useSelector((state: RootState) => state.vault.error);
 
@@ -54,18 +54,26 @@ export const Header: React.FC<IHeader> = ({ accountHeader = false }) => {
         title: t('header.errorSwitching'),
       });
 
-      wallet.resolveError();
+      controllerEmitter(['wallet', 'resolveError']);
     }
   }, [error]);
 
   const hanldeDisconnectFromDapp = () => {
-    dapp.disconnect(host);
-    wallet.resolveAccountConflict();
+    controllerEmitter(['dapp', 'disconnect'], [host]);
+    controllerEmitter(['wallet', 'resolveAccountConflict']);
   };
   const handleChangeConnectedAccount = () => {
-    dapp.changeAccount(host, newConnectedAccount.id, connectedAccountType);
-    wallet.setAccount(newConnectedAccount.id, connectedAccountType);
-    wallet.resolveAccountConflict();
+    controllerEmitter(
+      ['dapp', 'changeAccount'],
+      [host, newConnectedAccount.id, connectedAccountType]
+    );
+
+    controllerEmitter(
+      ['wallet', 'setAccount'],
+      [newConnectedAccount.id, connectedAccountType]
+    );
+
+    controllerEmitter(['wallet', 'resolveAccountConflict']);
   };
 
   return (
@@ -100,7 +108,9 @@ export const Header: React.FC<IHeader> = ({ accountHeader = false }) => {
 
           <Modal
             show={isChangingConnectedAccount}
-            onClose={() => wallet.resolveAccountConflict()}
+            onClose={() =>
+              controllerEmitter(['wallet', 'resolveAccountConflict'])
+            }
           >
             <div className="inline-block align-middle my-8 p-6 w-full max-w-2xl text-center font-poppins bg-bkg-4 border border-brand-royalblue rounded-2xl shadow-xl overflow-hidden transform transition-all">
               <Dialog.Title