Merge branch 'feat/firefox' into tmp/20241018

build/paths.js

@@ -14,6 +14,7 @@ module.exports = {
   backgroundHtml: rootResolve('src/background/background.html'),
   offscreenHtml: rootResolve('src/offscreen/offscreen.html'),
   dist: rootResolve('dist'),
+  distMv2: rootResolve('dist-mv2'),
 
   rootResolve,
 };

build/webpack.common.config.js

@@ -21,6 +21,12 @@ const BUILD_GIT_HASH = child_process
   .toString()
   .trim();
 
+// 'chrome-mv2', 'chrome-mv3', 'firefox-mv2', 'firefox-mv3'
+const MANIFEST_TYPE = process.env.MANIFEST_TYPE || 'chrome-mv2';
+const IS_MANIFEST_MV3 = MANIFEST_TYPE.includes('-mv3');
+const FINAL_DIST = IS_MANIFEST_MV3 ? paths.dist : paths.distMv2;
+const IS_FIREFOX = MANIFEST_TYPE.includes('firefox');
+
 const config = {
   entry: {
     background: paths.rootResolve('src/background/index.ts'),
@@ -32,7 +38,7 @@ const config = {
     offscreen: paths.rootResolve('src/offscreen/scripts/offscreen.ts'),
   },
   output: {
-    path: paths.dist,
+    path: FINAL_DIST,
     filename: '[name].js',
     publicPath: '/',
   },
@@ -193,25 +199,27 @@ const config = {
     new HtmlWebpackPlugin({
       inject: true,
       template: paths.popupHtml,
-      chunks: ['ui'],
+      chunks: ['ui', 'ui-vender'],
       filename: 'popup.html',
     }),
     new HtmlWebpackPlugin({
       inject: true,
       template: paths.notificationHtml,
-      chunks: ['ui'],
+      chunks: ['ui', 'ui-vender'],
       filename: 'notification.html',
     }),
     new HtmlWebpackPlugin({
       inject: true,
       template: paths.indexHtml,
-      chunks: ['ui'],
+      chunks: ['ui', 'ui-vender'],
       filename: 'index.html',
     }),
     new HtmlWebpackPlugin({
       inject: true,
       template: paths.backgroundHtml,
-      chunks: ['background'],
+      chunks: ['background'].concat(
+        IS_FIREFOX ? ['bg-chunk1', 'bg-chunk2', 'bg-chunk3'] : []
+      ),
       filename: 'background.html',
     }),
     new HtmlWebpackPlugin({
@@ -233,45 +241,49 @@ const config = {
     }),
     new CopyPlugin({
       patterns: [
-        { from: paths.rootResolve('_raw'), to: paths.rootResolve('dist') },
+        { from: paths.rootResolve('_raw'), to: FINAL_DIST },
         {
-          from: process.env.ENABLE_MV3
-            ? paths.rootResolve('src/manifest/mv3/manifest.json')
-            : paths.rootResolve('src/manifest/mv2/manifest.json'),
-          to: paths.dist,
+          from: paths.rootResolve(
+            `src/manifest/${MANIFEST_TYPE}/manifest.json`
+          ),
+          to: FINAL_DIST,
         },
-        process.env.ENABLE_MV3
+        IS_MANIFEST_MV3
           ? {
               from: require.resolve(
                 '@trezor/connect-webextension/build/content-script.js'
               ),
-              to: paths.rootResolve(
-                'dist/vendor/trezor/trezor-content-script.js'
+              to: path.resolve(
+                FINAL_DIST,
+                './vendor/trezor/trezor-content-script.js'
               ),
             }
           : {
               from: require.resolve(
                 '@trezor/connect-web/lib/webextension/trezor-content-script.js'
               ),
-              to: paths.rootResolve(
-                'dist/vendor/trezor/trezor-content-script.js'
+              to: path.resolve(
+                FINAL_DIST,
+                './vendor/trezor/trezor-content-script.js'
               ),
             },
-        process.env.ENABLE_MV3
+        IS_MANIFEST_MV3
           ? {
               from: require.resolve(
                 '@trezor/connect-webextension/build/trezor-connect-webextension.js'
               ),
-              to: paths.rootResolve(
-                'dist/vendor/trezor/trezor-connect-webextension.js'
+              to: path.resolve(
+                FINAL_DIST,
+                './vendor/trezor/trezor-connect-webextension.js'
               ),
             }
           : {
               from: require.resolve(
                 '@trezor/connect-web/lib/webextension/trezor-usb-permissions.js'
               ),
-              to: paths.rootResolve(
-                'dist/vendor/trezor/trezor-usb-permissions.js'
+              to: path.resolve(
+                FINAL_DIST,
+                './vendor/trezor/trezor-usb-permissions.js'
               ),
             },
       ],
@@ -303,6 +315,32 @@ const config = {
           name: 'webextension-polyfill',
           chunks: 'all',
         },
+        ...(IS_FIREFOX && {
+          bgChunk1: {
+            test: /[\\/]node_modules[\\/](@rabby-wallet|ethers|@ethersproject|@chainsafe|@trezor|@safe-global|@walletconnect)[\\/]/,
+            name: 'bg-chunk1',
+            chunks: (chunk) => chunk.name === 'background',
+            minSize: 0,
+          },
+          bgChunk2: {
+            test: /[\\/]node_modules[\\/](@keystonehq|@eth-optimism|@coinbase|gridplus-sdk)[\\/]/,
+            name: 'bg-chunk2',
+            chunks: (chunk) => chunk.name === 'background',
+            minSize: 0,
+          },
+          bgChunk3: {
+            test: /[\\/]node_modules[\\/](@imkey|@onekeyfe|@ethereumjs|viem|@metamask)[\\/]/,
+            name: 'bg-chunk3',
+            chunks: (chunk) => chunk.name === 'background',
+            minSize: 0,
+          },
+        }),
+        uiVender: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'ui-vender',
+          chunks: (chunk) => chunk.name === 'ui',
+          minSize: 0,
+        },
       },
     },
   },

package.json

@@ -8,12 +8,12 @@
     "build:dev:default": "npm run clean && npm run make-theme && cross-env TAILWIND_MODE=watch webpack --progress --env config=dev",
     "build:pro:default": "npm run clean && npm run make-theme && webpack --progress --env config=pro",
     "build:debug:default": "npm run clean && npm run make-theme && webpack --progress --env config=debug",
-    "build:dev:mv2": "npm run build:dev:default",
-    "build:pro:mv2": "npm run build:pro:default",
-    "build:debug:mv2": "npm run build:debug:default",
-    "build:dev": "cross-env ENABLE_MV3=true npm run build:dev:default",
-    "build:pro": "cross-env ENABLE_MV3=true npm run build:pro:default",
-    "build:debug": "cross-env ENABLE_MV3=true npm run build:debug:default",
+    "build:dev:mv2": "cross-env MANIFEST_TYPE=firefox-mv2 npm run build:dev:default",
+    "build:pro:mv2": "cross-env MANIFEST_TYPE=firefox-mv2 npm run build:pro:default",
+    "build:debug:mv2": "cross-env MANIFEST_TYPE=firefox-mv2 npm run build:debug:default",
+    "build:dev": "cross-env MANIFEST_TYPE=chrome-mv3 npm run build:dev:default",
+    "build:pro": "cross-env MANIFEST_TYPE=chrome-mv3 npm run build:pro:default",
+    "build:debug": "cross-env MANIFEST_TYPE=chrome-mv3 npm run build:debug:default",
     "build:sourcemap": "npm run clean && npm run make-theme && webpack --progress --env config=sourcemap",
     "sync-chain": "node ./scripts/sync-support-chain.js",
     "lint:fix": "eslint --fix --ext .js,.jsx,.ts,.tsx ./src",

src/background/index.ts

@@ -1,4 +1,4 @@
-import { groupBy } from 'lodash';
+import { groupBy, isNull } from 'lodash';
 import 'reflect-metadata';
 import * as Sentry from '@sentry/browser';
 import browser from 'webextension-polyfill';
@@ -36,7 +36,7 @@ import {
   gasAccountService,
 } from './service';
 import { providerController, walletController } from './controller';
-import { getOriginFromUrl } from '@/utils';
+import { getOriginFromUrl, transformFunctionsToZero } from '@/utils';
 import rpcCache from './utils/rpcCache';
 import eventBus from '@/eventBus';
 import migrateData from '@/migrations';
@@ -268,7 +268,22 @@ browser.runtime.onConnect.addListener((port) => {
           case 'controller':
           default:
             if (data.method) {
-              return walletController[data.method].apply(null, data.params);
+              const res = walletController[data.method].apply(
+                null,
+                data.params
+              );
+              if (typeof res?.then === 'function') {
+                return res.then((x) => {
+                  if (typeof x !== 'object' || isNull(x)) {
+                    return x;
+                  }
+                  return transformFunctionsToZero(x);
+                });
+              }
+              if (typeof res !== 'object' || isNull(res)) {
+                return res;
+              }
+              return transformFunctionsToZero(res);
             }
         }
       }

src/background/service/contextMenu.ts

@@ -4,6 +4,7 @@ import {
   preferenceService,
   sessionService,
 } from 'background/service';
+import Browser, { Menus, Tabs } from 'webextension-polyfill';
 
 const getTabsOriginList = () => {
   const res: string[] = [];
@@ -27,15 +28,15 @@ export class ContextMenu {
   store = new Set<string>();
 
   constructor() {
-    chrome.contextMenus.onClicked.addListener(this.listener);
+    Browser.contextMenus.onClicked.addListener(this.listener);
   }
 
   create(origin: string) {
     if (this.store.has(origin) || !preferenceService.getHasOtherProvider()) {
       return;
     }
 
-    chrome.contextMenus.create(
+    Browser.contextMenus.create(
       {
         id: origin,
         title: getContextMenuTitle(origin),
@@ -58,21 +59,21 @@ export class ContextMenu {
       return;
     }
 
-    chrome.contextMenus.update(origin, {
+    Browser.contextMenus.update(origin, {
       title: getContextMenuTitle(origin),
     });
   }
   remove(origin: string) {
     if (!this.store.has(origin)) {
       return;
     }
-    chrome.contextMenus.remove(origin, () => {
+    Browser.contextMenus.remove(origin).then(() => {
       this.store.delete(origin);
     });
   }
   removeAll() {
     this.store.clear();
-    chrome.contextMenus.removeAll();
+    Browser.contextMenus.removeAll();
   }
 
   async sync() {
@@ -97,10 +98,7 @@ export class ContextMenu {
     });
   }
 
-  private listener = (
-    info: chrome.contextMenus.OnClickData,
-    tab?: chrome.tabs.Tab
-  ) => {
+  private listener = (info: Menus.OnClickData, tab: Tabs.Tab | undefined) => {
     if (!info.menuItemId) {
       return;
     }

src/background/service/keyring/eth-bitbox02-keyring/bitbox02-offscreen-bridge.ts

@@ -27,7 +27,7 @@ export default class BitBox02OffscreenBridge
   }
 
   init: BitBox02BridgeInterface['init'] = async (hdPath) => {
-    chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
+    browser.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
       if (
         msg.target === OffscreenCommunicationTarget.extension &&
         msg.event === OffscreenCommunicationEvents.bitbox02DeviceConnect

src/background/service/keyring/eth-lattice-keyring/eth-lattice-keyring.ts

@@ -11,6 +11,7 @@ import {
   KnownOrigins,
   OffscreenCommunicationTarget,
 } from '@/constant/offscreen-communication';
+import Browser from 'webextension-polyfill';
 
 const HD_PATH_BASE = {
   [HDPathType.BIP44]: "m/44'/60'/0'/0/x",
@@ -47,27 +48,12 @@ class LatticeKeyring extends OldLatticeKeyring {
 
       // send a msg to the render process to open lattice connector
       // and collect the credentials
-      const creds = await new Promise<{
-        deviceID: string;
-        password: string;
-        endpoint: string;
-      }>((resolve, reject) => {
-        chrome.runtime.sendMessage(
-          {
-            target: OffscreenCommunicationTarget.latticeOffscreen,
-            params: {
-              url,
-            },
-          },
-          (response) => {
-            if (response.error) {
-              reject(response.error);
-            }
-
-            resolve(response.result);
-          }
-        );
-      });
+      const creds = await Browser.runtime.sendMessage({
+        target: OffscreenCommunicationTarget.latticeOffscreen,
+        params: {
+          url,
+        },
+      })
 
       return creds;
     } catch (err: any) {

src/background/service/notification.ts

@@ -6,7 +6,6 @@ import * as Sentry from '@sentry/browser';
 import { EthereumProviderError } from 'eth-rpc-errors/dist/classes';
 import { winMgr } from 'background/webapi';
 import {
-  CHAINS,
   KEYRING_CATEGORY_MAP,
   IS_LINUX,
   IS_VIVALDI,
@@ -17,7 +16,6 @@ import {
 import transactionHistoryService from './transactionHistory';
 import preferenceService from './preference';
 import stats from '@/stats';
-import BigNumber from 'bignumber.js';
 import { findChain } from '@/utils/chain';
 import { isManifestV3 } from '@/utils/env';
 
@@ -134,7 +132,7 @@ class NotificationService extends Events {
       if (IS_VIVALDI) return;
       if (
         IS_CHROME &&
-        winId === chrome.windows.WINDOW_ID_NONE &&
+        winId === browser.windows.WINDOW_ID_NONE &&
         (IS_LINUX || IS_WINDOWS)
       ) {
         // When sign on Linux or Windows, will focus on -1 first then focus on sign window

src/background/webapi/window.ts

@@ -29,23 +29,16 @@ const WINDOW_SIZE = {
 };
 
 const createFullScreenWindow = ({ url, ...rest }) => {
-  return new Promise((resolve) => {
-    chrome.windows.create(
-      {
-        focused: true,
-        url,
-        type: 'popup',
-        ...rest,
-        width: undefined,
-        height: undefined,
-        left: undefined,
-        top: undefined,
-        state: 'fullscreen',
-      },
-      (win) => {
-        resolve(win);
-      }
-    );
+  return browser.windows.create({
+    focused: true,
+    url,
+    type: 'popup',
+    ...rest,
+    width: undefined,
+    height: undefined,
+    left: undefined,
+    top: undefined,
+    state: 'fullscreen',
   });
 };