[Feat] Multibrowser compatibility (#564)

* Change from chrome to browser which is extended by webextension-polyfill * updated yarn.lock * fix: fixed font sizes on Firefox. * core: added multi manifest/browser logic on build scripts. * core: changed how makefile builds the extension. added logic for firefox. * core: finished Makefile changes. * style: fixed font on popupage for firefox. * fix: layout fixes. * style: fixed visual issues. * feat: added browser detection and disabled Ledger. TODO: message. * feat: added message to ledger. * lint: fixed lint. * tests: fixed tests. * fix: fixed UI tests. * fix: invalid html properties. * fix: fixed default network logo. * fix: replaced remaining chrome references. * Fixing 'DataCloneError' error - https://bugzilla.mozilla.org/show_bug.cgi?id=1370884 - https://stackoverflow.com/questions/68467946/datacloneerror-the-object-could-not-be-cloned-firefox-browser - https://stackoverflow.com/questions/44386656/datacloneerror-the-object-could-not-be-cloned * core: updated release pipeline. * test: release process testing. * core: fixed new manifest path. * core: updated NodeJS for background and provider packages. * core: upgraded NodeJS, react-scripts and webpack versions along with all config and script files. * fix: changed back isolated modules config. * fix: visual fixes. * core: upgraded package versions. * core: fixed webpack config to build chunks and corrected imports. * fix: reconstructed yarn.lock files and background build problems. * fix: lint fix. * fix: lint --------- Co-authored-by: Martin Lecam <[email protected]> Co-authored-by: Rodrigo <[email protected]>
block-wallet · Oct 10, 2023 · 7d28076 · 7d28076
1 parent 43e7c0a
commit 7d28076
Show file tree

Hide file tree

Showing 87 changed files with 10,148 additions and 10,181 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -19,9 +19,10 @@ env:
   RELEASE_BRANCH: release/${{ github.event.inputs.extension-version }}
   GH_ACCESS_TOKEN: ${{ secrets.USER_PAT }}:${{ secrets.PAT }}
   EXTENSION_NAME: block-wallet-${{ github.event.inputs.extension-version }}
+  EXTENSION_NAME_FF: block-wallet-firefox-${{ github.event.inputs.extension-version }}
   ARTIFACTS_FOLDER: artifacts
   S3_PATH: s3://releases.blockwallet.io/extension
-  TARGET_BRANCH: master
+  TARGET_BRANCH: feat/firefox
   CYPRESS_CACHE_FOLDER: cypress/cache
 
 jobs:
@@ -127,7 +128,7 @@ jobs:
         run: |
           wget https://raw.githubusercontent.com/block-wallet/release-helpers/main/update_file.py -O update_file.py
           FILE=package.json python3 update_file.py
-          FILE=public/manifest.json python3 update_file.py
+          FILE=manifest/base.json python3 update_file.py
 
       - name: Update release notes
         env:
@@ -140,7 +141,7 @@ jobs:
       - name: Commit package.json, manifest.json and release-notes.json
         id: version_commit
         run: |
-          git add package.json release-notes.json public/manifest.json
+          git add package.json release-notes.json manifest/base.json
           git commit --message "chore: update files with the new version ${{ github.event.inputs.extension-version }} and also add the new release notes"
           git push origin $RELEASE_BRANCH
 
@@ -191,6 +192,12 @@ jobs:
           if-no-files-found: error
           path: dist
 
+      - name: Save Firefox extension folder
+        uses: actions/upload-artifact@v3
+        with:
+          name: blockwallet-extension-firefox
+          if-no-files-found: error
+          path: dist-firefox
   #tests:
   #  needs: build
   #  container: cypress/browsers:node16.16.0-chrome105-ff99-edge
@@ -282,6 +289,12 @@ jobs:
           name: blockwallet-extension
           path: blockwallet-extension
 
+      - name: Download the extension built folder
+        uses: actions/download-artifact@v3
+        with:
+          name: blockwallet-extension-firefox
+          path: blockwallet-extension-firefox
+
       #- name: Download the extension screenshot (release notes)
       #  uses: actions/download-artifact@v3
       #  with:
@@ -293,13 +306,16 @@ jobs:
         run: |
           mkdir -p $ARTIFACTS_FOLDER
           mv blockwallet-extension dist
+          mv blockwallet-extension-firefox dist-firefox
           zip -r -D $ARTIFACTS_FOLDER/$EXTENSION_NAME.zip dist/
+          zip -r -D $ARTIFACTS_FOLDER/$EXTENSION_NAME_FF.zip dist-firefox/
 
       - name: Calculate SHA of the extension
         id: sha
         run: |
           cd $ARTIFACTS_FOLDER
           sha256sum $EXTENSION_NAME.zip > $EXTENSION_NAME.checksum
+          sha256sum $EXTENSION_NAME_FF.zip > $EXTENSION_NAME_FF.checksum
 
       - name: Configure AWS credentials
         uses: aws-actions/configure-aws-credentials@v2
@@ -312,7 +328,6 @@ jobs:
         run: |
           aws s3 cp --recursive $ARTIFACTS_FOLDER $S3_PATH
       #    aws s3 cp screenshot/$EXTENSION_NAME.png $S3_PATH/$EXTENSION_NAME.png
-
       - name: Upload version and notes to S3
         env:
           DATA: '${{ github.event.inputs.release-notes }}'
@@ -353,7 +368,7 @@ jobs:
         run: |
           s3_url=$(echo "${S3_PATH/s3/https}")
           pr_title="[Automated] Extension release ${{ github.event.inputs.extension-version }}"
-          pr_body=$(echo -e "# PR for release ${{ github.event.inputs.extension-version }}\n\n## Type of change :writing_hand:\n\nClick the correct/s option/s\n\n- [ ] Bug fix (non-breaking change which fixes an issue)\n- [ ] New feature (non-breaking change which adds functionality)\n- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)\n- [ ] This change requires a documentation update\n\n## Manual tests :test_tube:\n\n- [ ] I run the tests and they were succesful\n\n## Artifacts :space_invader:\n\n - [Extension zip]($s3_url/${{ env.EXTENSION_NAME }}.zip)\n - [SHA256 checksum]($s3_url/${{ env.EXTENSION_NAME }}.checksum)\n\n")
+          pr_body=$(echo -e "# PR for release ${{ github.event.inputs.extension-version }}\n\n## Type of change :writing_hand:\n\nClick the correct/s option/s\n\n- [ ] Bug fix (non-breaking change which fixes an issue)\n- [ ] New feature (non-breaking change which adds functionality)\n- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)\n- [ ] This change requires a documentation update\n\n## Manual tests :test_tube:\n\n- [ ] I run the tests and they were succesful\n\n## Artifacts :space_invader:\n\n - [Extension zip]($s3_url/${{ env.EXTENSION_NAME }}.zip)\n - [SHA256 checksum]($s3_url/${{ env.EXTENSION_NAME }}.checksum)\n - [Firefox Extension zip]($s3_url/${{ env.EXTENSION_NAME_FF }}.zip)\n - [SHA256 checksum]($s3_url/${{ env.EXTENSION_NAME_FF }}.checksum)\n\n")
           pr_reviewer="block-wallet/releasereviewers"
           pr_assignee="leablock"
           pr_label="automated,release"

diff --git a/.gitignore b/.gitignore
@@ -18,6 +18,7 @@ eslint-report.html
 # production
 /build
 /dist
+/dist-firefox
 
 # misc
 .DS_Store

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v14.17.6
+v18.18.0
diff --git a/Makefile b/Makefile
@@ -1,4 +1,5 @@
 ENVIRONMENT				?= dev
+BROWSER					?= chrome
 
 depcheck:
 	@cd packages/background && npx depcheck
@@ -27,8 +28,11 @@ install:
 	@cd packages/background && rm -rf node_modules
 	@cd packages/ui && rm -rf node_modules
 	@cd packages/provider && rm -rf node_modules
+	@echo "Installing Background package..."
 	@cd packages/background && yarn install
+	@echo "Installing UI package"
 	@cd packages/ui && yarn install
+	@echo "Installing Provider package"
 	@cd packages/provider && yarn install
 
 install/ci:
@@ -37,35 +41,52 @@ install/ci:
 	@cd packages/provider && yarn install --prefer-offline --frozen-lockfile --network-concurrency 1
 
 build/ui:
-	@cd packages/ui && $(MAKE) build/ui --no-print-directory
+	@cd packages/ui && BROWSER=$(BROWSER) $(MAKE) build/ui --no-print-directory
 
 build/background:
-	@cd packages/background && $(MAKE) build/background --no-print-directory
+	@cd packages/background && BROWSER=$(BROWSER) $(MAKE) build/background --no-print-directory
 
 build/provider:
-	@cd packages/provider && $(MAKE) build/provider --no-print-directory
+	@cd packages/provider && BROWSER=$(BROWSER) $(MAKE) build/provider --no-print-directory
 
 cp/release-notes:
+ifeq ($(BROWSER), firefox)
+	@cp release-notes.json dist-firefox
+else
 	@cp release-notes.json dist
+endif
 
 build:
-	@rm -Rf dist/
+	@rm -Rf dist-firefox
+	@rm -Rf dist
 	@$(MAKE) ENVIRONMENT=$(ENVIRONMENT) build/background --no-print-directory
 	@$(MAKE) ENVIRONMENT=$(ENVIRONMENT) build/provider --no-print-directory
 	@$(MAKE) build/ui --no-print-directory
-	@$(MAKE) cp/release-notes --no-print-directory
+ifeq ($(BROWSER), firefox)
+	@mkdir -p dist-firefox && cp -r dist/* dist-firefox/
+	@rm -Rf dist
+endif
+	@$(MAKE) BROWSER=$(BROWSER) build/manifest --no-print-directory
+	@$(MAKE) BROWSER=$(BROWSER) cp/release-notes --no-print-directory
 
 build/prod:
 	@rm -Rf dist/
+	@rm -Rf dist-firefox/
 	@$(MAKE) ENVIRONMENT=prod build/background --no-print-directory
 	@$(MAKE) ENVIRONMENT=prod build/provider --no-print-directory
 	@$(MAKE) GENERATE_SOURCEMAP=false build/ui --no-print-directory
-	@$(MAKE) cp/release-notes --no-print-directory
+	@mkdir dist-firefox && cp -r dist/* dist-firefox/
+	@$(MAKE) BROWSER=chrome build/manifest --no-print-directory
+	@$(MAKE) BROWSER=firefox build/manifest --no-print-directory
+	@cp release-notes.json dist
+	@cp release-notes.json dist-firefox
+
+
+build/manifest:
+	@cd packages/ui && BROWSER=$(BROWSER) $(MAKE) build/manifest --no-print-directory
 
 build/prod-zip:
 	@rm -Rf dist/
-	@$(MAKE) ENVIRONMENT=prod build/background --no-print-directory
-	@$(MAKE) ENVIRONMENT=prod build/provider --no-print-directory
-	@$(MAKE) build/ui --no-print-directory
-	@$(MAKE) cp/release-notes --no-print-directory
-	@zip -r -D block-extension.zip dist/
+	@$(MAKE) ENVIRONMENT=prod build/prod
+	@zip -r -D block-extension-chrome.zip dist/
+	@zip -r -D block-extension-firefox.zip dist-firefox/
diff --git a/public/manifest.json → manifest/base.json b/public/manifest.json → manifest/base.json
@@ -2,7 +2,6 @@
     "author": "BlockWallet",
     "background": {
         "scripts": [
-            "hot-reload.js",
             "background.js"
         ]
     },
@@ -63,7 +62,7 @@
             }
         }
     },
-    "version": "1.1.7",
+    "version": "1.1.8",
     "web_accessible_resources": [
         "blankProvider.js"
     ]

diff --git a/manifest/chrome.json b/manifest/chrome.json
@@ -0,0 +1,33 @@
+{
+    "background": {
+        "scripts": [
+            "hot-reload.js",
+            "background.js"
+        ]
+    },
+    "content_scripts": [
+        {
+            "js": [
+                "content.js"
+            ],
+            "matches": [
+                "http://*/*",
+                "https://*/*"
+            ],
+            "exclude_matches": [
+                "https://block-wallet.github.io/eth-ledger-bridge-keyring/*",
+                "https://connect.trezor.io/*"
+            ],
+            "run_at": "document_start",
+            "all_frames": true
+        },
+        {
+            "js": [
+                "vendor/trezor/trezor-content.js"
+            ],
+            "matches": [
+                "*://connect.trezor.io/*/popup.html"
+            ]
+        }
+    ]
+}
diff --git a/manifest/firefox.json b/manifest/firefox.json
@@ -0,0 +1,35 @@
+{
+    "background": {
+        "scripts": [
+            "browser-polyfill.min.js",
+            "background.js"
+        ]
+    },
+    "content_scripts": [
+        {
+            "js": [
+                "browser-polyfill.min.js",
+                "content.js"
+            ],
+            "matches": [
+                "http://*/*",
+                "https://*/*"
+            ],
+            "exclude_matches": [
+                "https://block-wallet.github.io/eth-ledger-bridge-keyring/*",
+                "https://connect.trezor.io/*"
+            ],
+            "run_at": "document_start",
+            "all_frames": true
+        },
+        {
+            "js": [
+                "browser-polyfill.min.js",
+                "vendor/trezor/trezor-content.js"
+            ],
+            "matches": [
+                "*://connect.trezor.io/*/popup.html"
+            ]
+        }
+    ]
+}
diff --git a/package.json b/package.json
@@ -8,5 +8,6 @@
         "build": "make build",
         "build-prod": "make build/prod",
         "test": "make test"
-    }
-}
+    },
+    "dependencies": {}
+}
diff --git a/packages/background/.nvmrc b/packages/background/.nvmrc
@@ -1 +1 @@
-v14.17.6
+v18.18.0
diff --git a/packages/background/Makefile b/packages/background/Makefile
@@ -3,6 +3,7 @@ TS_NODE_COMPILER_OPTIONS := $(shell echo {\"module\": \"commonjs\" })
 BRANCH					 := $(shell git symbolic-ref --short -q HEAD | sed 's/[\.\/]/-/g')
 TS_CONFIG_PATHS 		 := true
 ENVIRONMENT				 ?= dev
+BROWSER					 ?= chrome
 export
 
 #test:
@@ -30,14 +31,26 @@ else
 	npx webpack --config ./webpack/webpack.config.js
 endif
 	@cp ./src/infrastructure/hardware/trezor/trezor-usb-permissions.html ../../dist/trezor-usb-permissions.html
+ifeq ($(BROWSER), firefox)
+	$(MAKE) copy/firefox
+endif
+
+
+
+copy/firefox:
+	@mkdir -p ../../dist-firefox
+	@cp ../../dist/background.js ../../dist-firefox/background.js
+	@cp ../../dist/trezor-usb-permissions.html ../../dist-firefox/trezor-usb-permissions.html
+	@cp -r ../../dist/vendor/* ../../dist-firefox/vendor
+
 
 depcheck:
 	@npx depcheck
 
-version/patch: 
+version/patch:
 	@yarn version --patch
 
-version/minor: 
+version/minor:
 	@yarn version --minor
 
 version/major:

diff --git a/packages/background/package.json b/packages/background/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@block-wallet/background",
-    "version": "1.1.12",
+    "version": "1.1.18",
     "private": true,
     "dependencies": {
         "@block-wallet/chains-assets": "https://github.com/block-wallet/chains-assets#v0.0.41",
@@ -22,11 +22,12 @@
         "eth-ens-namehash": "^2.0.8",
         "eth-keyring-controller": "^7.0.2",
         "ethereumjs-wallet": "^1.0.2",
-        "ethers": "^6.0.8",
+        "ethers": "^5.7.0",
         "lodash": "^4.17.21",
         "loglevel": "^1.8.1",
         "schema-validator": "git+https://github.com/block-wallet/schema-validator.git",
-        "uuid": "^9.0.0"
+        "uuid": "^9.0.0",
+        "webextension-polyfill": "^0.10.0"
     },
     "devDependencies": {
         "@types/bn.js": "^5.1.1",
@@ -35,12 +36,14 @@
         "@types/create-hash": "^1.2.2",
         "@types/lodash": "^4.14.191",
         "@types/mocha": "^10.0.1",
-        "@types/node": "^18.11.18",
+        "@types/node": "^20.6.3",
         "@types/semver": "^7.3.13",
         "@types/sinon": "^10.0.13",
         "@types/uuid": "^9.0.0",
+        "@types/webextension-polyfill": "^0.10.1",
         "@typescript-eslint/eslint-plugin": "^5.48.0",
         "@typescript-eslint/parser": "^5.48.0",
+        "browserify-zlib": "^0.2.0",
         "buffer": "^6.0.3",
         "chai": "^4.3.7",
         "crypto-browserify": "^3.12.0",
@@ -51,6 +54,7 @@
         "esm": "^3.2.25",
         "eth-rpc-errors": "^4.0.3",
         "fs-extra": "^11.1.0",
+        "https-browserify": "^1.0.0",
         "isomorphic-fetch": "^3.0.0",
         "jsdom": "^20.0.3",
         "jsdom-global": "^3.0.2",
@@ -64,11 +68,13 @@
         "sinon": "^15.0.1",
         "sinon-chrome": "^3.0.1",
         "stream-browserify": "^3.0.0",
+        "stream-http": "^3.2.0",
         "ts-loader": "^9.4.2",
         "ts-mocha": "^10.0.0",
         "ts-node": "^10.9.1",
         "ts-pnp": "1.2.0",
         "typescript": "^4.9.4",
+        "url": "^0.11.3",
         "webpack": "^5.75.0",
         "webpack-bundle-analyzer": "^4.7.0",
         "webpack-cli": "^5.0.1"
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,6 +18,7 @@ eslint-report.html @@
     # production
     /build
     /dist
+    /dist-firefox
     # misc
     .DS_Store
@@ Expand Down @@