feat: chrome extension compatibility (#24)

* build: add chrome install script

* build(webpack): add start extension in chrome browser

* feat: migrate to manifest v3

* docs: update readme with new scripts

* build(yarn): add scripts to install local browsers

* refactor: remove scrolling bars

* build: move browser installation to post install script

* chore: squash

* feat: add dynamic environment variables

* chore: squash

* build(webpack): only change target flag when setting target

* build(deps): update web-ext package

* build(webpack): seperate manifest files for different targets

* fix: use browser action for firefox

* build: remove extension id in code

* refactor: convert import comments to lowercase

* build: add voi network to dapp walletconnect namespace list

* docs: update readme with new yarn scripts

* ci: use new build process in pull request checks workflow

* build: separate build directories between browsers

* ci: update new manifest file with version

* build(yarn): add script to package build

* ci: add packages to release

* ci: add new action to create a .env file

* test: update env vars in test setup file

* docs: update readme to include package scripts

.env.example

@@ -0,0 +1 @@
+WALLET_CONNECT_PROJECT_ID="Go to WalletConnect and get project ID"

.github/actions/create-env-file/action.yml

@@ -0,0 +1,17 @@
+name: "Create Env File"
+
+description: "Creates an .env file"
+
+inputs:
+  walletconnect_project_id:
+    description: "WalletConnect project ID"
+    required: true
+
+runs:
+  using: "composite"
+  steps:
+    - name: "📝 Create .env file"
+      run: |
+        rm -f .env
+        echo "WALLET_CONNECT_PROJECT_ID=${{ inputs.walletconnect_project_id }}" >> .env
+      shell: bash

.github/workflows/pull_request_checks.yml

@@ -4,6 +4,10 @@ on:
   pull_request:
 
 jobs:
+  ##
+  # install
+  ##
+
   install:
     name: "Install"
     runs-on: ubuntu-latest
@@ -14,7 +18,7 @@ jobs:
         uses: ./.github/actions/use-dependencies
 
   ##
-  # needs install
+  # lint, build and test
   ##
 
   lint:
@@ -29,24 +33,51 @@ jobs:
       - name: "👕 Lint"
         run: yarn lint
 
-  build:
-    name: "Build"
+  build_chrome:
+    name: "Build Chrome"
+    needs: install
+    runs-on: ubuntu-latest
+    steps:
+      - name: "🛎 Checkout"
+        uses: actions/checkout@v3
+      - name: "🔧 Setup"
+        uses: ./.github/actions/use-dependencies
+      - name: "📝 Create .env file"
+        uses: ./.github/actions/create-env-file
+        with:
+          walletconnect_project_id: ${{ secrets.DEVELOPMENT_WALLETCONNECT_PROJECT_ID }}
+      - name: "🏗️ Build"
+        run: yarn build:chrome
+      - name: "🗜️ Zip build"
+        run: zip -qr chrome_build.zip .chrome_build/
+      - name: "📤 Upload build"
+        uses: actions/upload-artifact@v3
+        with:
+          name: chrome_build
+          path: chrome_build.zip
+
+  build_firefox:
+    name: "Build Firefox"
     needs: install
     runs-on: ubuntu-latest
     steps:
       - name: "🛎 Checkout"
         uses: actions/checkout@v3
       - name: "🔧 Setup"
         uses: ./.github/actions/use-dependencies
+      - name: "📝 Create .env file"
+        uses: ./.github/actions/create-env-file
+        with:
+          walletconnect_project_id: ${{ secrets.DEVELOPMENT_WALLETCONNECT_PROJECT_ID }}
       - name: "🏗️ Build"
-        run: yarn build
+        run: yarn build:firefox
       - name: "🗜️ Zip build"
-        run: zip -r build.zip .build/
+        run: zip -qr firefox_build.zip .firefox_build/
       - name: "📤 Upload build"
         uses: actions/upload-artifact@v3
         with:
-          name: build
-          path: build.zip
+          name: firefox_build
+          path: firefox_build.zip
 
   test:
     name: "Test"
@@ -61,12 +92,12 @@ jobs:
         run: yarn test
 
   ##
-  # needs [install, build]
+  # build validation
   ##
 
   validate_firefox:
     name: "Validate Firefox"
-    needs: [install, build]
+    needs: [install, build_firefox]
     runs-on: ubuntu-latest
     steps:
       - name: "🛎 Checkout"
@@ -76,14 +107,14 @@ jobs:
       - name: "📥 Download build"
         uses: actions/download-artifact@v3
         with:
-          name: build
+          name: firefox_build
       - name: "🗜️ Unzip build"
-        run: unzip build.zip
+        run: unzip -q firefox_build.zip
       - name: "✅ Validate"
         run: yarn validate:firefox
 
   ##
-  # needs validate_firefox
+  # clean up
   ##
 
   clean_up:
@@ -96,4 +127,5 @@ jobs:
         with:
           failOnError: false
           name: |
-            build
+            chrome_build
+            firefox_build

.github/workflows/release.yml

@@ -7,20 +7,100 @@ on:
       - main
 
 jobs:
+  ##
+  # install
+  ##
+
+  install:
+    name: "Install"
+    runs-on: ubuntu-latest
+    steps:
+      - name: "🛎 Checkout"
+        uses: actions/checkout@v3
+      - name: "🔧 Setup"
+        uses: ./.github/actions/use-dependencies
+
+  ##
+  # package
+  ##
+
+  build_chrome:
+    name: "Build Chrome"
+    needs: install
+    runs-on: ubuntu-latest
+    steps:
+      - name: "🛎 Checkout"
+        uses: actions/checkout@v3
+      - name: "🔧 Setup"
+        uses: ./.github/actions/use-dependencies
+      - name: "📝 Create .env file"
+        uses: ./.github/actions/create-env-file
+        with:
+          walletconnect_project_id: ${{ secrets.PRODUCTION_WALLETCONNECT_PROJECT_ID }}
+      - name: "🏗️ Build"
+        run: yarn build:chrome
+      - name: "🗜️ Zip build"
+        run: zip -qr chrome_build.zip .chrome_build/
+      - name: "📤 Upload build"
+        uses: actions/upload-artifact@v3
+        with:
+          name: chrome_build
+          path: chrome_build.zip
+
+  build_firefox:
+    name: "Build Firefox"
+    needs: install
+    runs-on: ubuntu-latest
+    steps:
+      - name: "🛎 Checkout"
+        uses: actions/checkout@v3
+      - name: "🔧 Setup"
+        uses: ./.github/actions/use-dependencies
+      - name: "📝 Create .env file"
+        uses: ./.github/actions/create-env-file
+        with:
+          walletconnect_project_id: ${{ secrets.PRODUCTION_WALLETCONNECT_PROJECT_ID }}
+      - name: "🏗️ Build"
+        run: yarn build:firefox
+      - name: "🗜️ Zip build"
+        run: zip -qr firefox_build.zip .firefox_build/
+      - name: "📤 Upload build"
+        uses: actions/upload-artifact@v3
+        with:
+          name: firefox_build
+          path: firefox_build.zip
+
+  ##
+  # release
+  ##
+
   release:
     name: "Release"
+    needs: [install, build_chrome, build_firefox]
     runs-on: ubuntu-latest
     steps:
       - name: "🛎 Checkout"
         uses: actions/checkout@v3
       - name: "🔧 Setup"
-        uses: actions/setup-node@v3
+        uses: ./.github/actions/use-dependencies
+      # download & package chrome build
+      - name: "📥 Download Chrome build"
+        uses: actions/download-artifact@v3
         with:
-          node-version: 'lts/*'
-      - name: "📦 Install"
-        run: yarn install --ignore-scripts
-      - name: "🏗️ Build"
-        run: yarn build
+          name: chrome_build
+      - name: "🗜️ Unzip Chrome build"
+        run: unzip -q chrome_build.zip
+      - name: "📦 Package Chrome build"
+        run: yarn package:chrome
+      # download & package firefox build
+      - name: "📥 Download Firefox build"
+        uses: actions/download-artifact@v3
+        with:
+          name: firefox_build
+      - name: "🗜️ Unzip Firefox build"
+        run: unzip -q firefox_build.zip
+      - name: "📦 Package Firefox build"
+        run: yarn package:firefox
       - name: "🔖 Release"
         env:
           # appears on the release commits
@@ -31,3 +111,20 @@ jobs:
           # used to push the release commit and create the tags
           GITHUB_TOKEN: ${{ secrets.WRITE_REPOS_TOKEN }}
         run: yarn semantic-release
+
+  ##
+  # clean up
+  ##
+
+  clean_up:
+    name: "Clean Up"
+    needs: release
+    runs-on: ubuntu-latest
+    steps:
+      - name: "🗑️ Delete artifacts"
+        uses: geekyeggo/delete-artifact@v2
+        with:
+          failOnError: false
+          name: |
+            chrome_build
+            firefox_build

.gitignore

@@ -279,7 +279,11 @@ fabric.properties
 /coverage
 
 # intermediary directories
-.build/
+.chrome/
+.chrome_build/
+.chrome_profile/
 .dapp/
 .firefox/
+.firefox_build/
 .firefox_profile/
+.tmp/

.releaserc

@@ -8,14 +8,13 @@
     [
       "@semantic-release/exec",
       {
-        "prepareCmd": "./bin/update_manifest_version.sh ${nextRelease.version}",
-        "publishCmd": "yarn package"
+        "prepareCmd": "./bin/update_manifest_version.sh ${nextRelease.version}"
       }
     ],
     [
       "@semantic-release/git",
       {
-        "assets": ["src/manifest.json", "package.json", "CHANGELOG.md"],
+        "assets": ["src/manifest.common.json", "package.json", "CHANGELOG.md"],
         "message": "chore(release): ${nextRelease.version}\n\n${nextRelease.notes}"
       }
     ],

README.md

@@ -9,16 +9,16 @@
 </h1>
 
 <p align="center">
-  <a href="https://github.com/agoralabs-sh/kibisis-web-extension/actions/workflows/lint_build_test.yml" target="_blank">
-    <img src="https://github.com/agoralabs-sh/kibisis-web-extension/actions/workflows/lint_build_test.yml/badge.svg" alt="Build, lint and test" />
+  <a href="https://github.com/agoralabs-sh/kibisis-web-extension/actions/workflows/pull_request_checks.yml" target="_blank">
+    <img src="https://github.com/agoralabs-sh/kibisis-web-extension/actions/workflows/pull_request_checks.yml/badge.svg" alt="Pull Request Checks" />
   </a>
   <a href="https://img.shields.io/amo/v/[email protected]" target="_blank">
     <img src="https://img.shields.io/amo/v/[email protected]" alt="Mozilla add-on" />
   </a>
 </p>
 
 <p align="center">
-  An Algorand wallet browser extension to sign data, send transactions and rekey with another account.
+  An AVM wallet in your browser that goes beyond just DeFi.
 </p>
 
 ### Table of contents
@@ -59,6 +59,7 @@ Coming soon...
 ### 3.1. Requirements
 
 * Install [Yarn v1.22.5+][yarn]
+* Install [jq][jq]
 
 <sup>[Back to top ^][table-of-contents]</sup>
 
@@ -69,30 +70,39 @@ Coming soon...
 $ yarn install
 ```
 
+> ⚠️ **NOTE:** a couple of post install scripts will run that will download and install Chrome and Firefox browser binaries at the project root. These binaries will be used for running development versions of the extension.
+
+2. In the newly created `.env` file, replace the environment values with the desired values.
+
 <sup>[Back to top ^][table-of-contents]</sup>
 
 ### 3.3. Run
 
 * To run simply use:
 ```bash
-$ yarn start
+$ yarn start:<chrome|firefox>
 ```
 
-This will bundle the Typescript source code and the add-on assets into a `build/` directory and once the build files have been bundled, Webpack will start the locally installed Firefox Developer Edition (located at [`./.firefox/`][local-firefox-dir]) with the local extension as a temporary add-on.
+> ⚠️ **NOTE:** this command will bundle the TypeScript source code and extension assets into the `.build/` directory and depending on your intended target (you can choose '`chrome`' or '`firefox`') the corresponding browser will start up with the unpacked extension as a temporary extension.
 
 <sup>[Back to top ^][table-of-contents]</sup>
 
 ## 📑 4. Appendix
 
 ### 4.1 Useful Commands
 
-| Command              | Description                                                                                                                                                                           |
-|----------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `yarn build`         | Bundles the source code and the add-on assets in the `build/` directory.                                                                                                              |
-| `yarn package`       | Packages the contents of the `build/` directory into a `.zip` file, ready for submission. See [use `web-ext`][use-web-ext].                                                           |
-| `yarn prettier`      | Runs `prettier` with the same configuration that is run on the pre-commit hooks.                                                                                                      |
-| `yarn start`         | Bundles the source code & the add-on assets, starts the Firefox Developer edition with the add-on installed. This will watch for changes in the source code and reload the extension. |
-| `yarn start:firefox` | Starts up the local Firefox Developer edition and installs the local add-on as a temporary add-on.                                                                                    |
+| Command                | Description                                                                                                                                                                                            |
+|------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `yarn build:chrome`    | Bundles the source code and Chrome specific assets into the `.chrome_build/` directory.                                                                                                                |
+| `yarn build:firefox`   | Bundles the source code and Firefox specific assets into the `.firefox_build/` directory.                                                                                                              |
+| `yarn install:chrome`  | Installs the latest version of Chrome For Testing browser to the project root. This removes the existing version if it exists.                                                                         |
+| `yarn install:firefox` | Installs the latest version of Firefox Developer Edition browser to the project root. This removes the existing version if it exists.                                                                  |
+| `yarn package:chrome`  | Packages the contents of the `.chrome_build/` directory into a `kibisis-chrome-{version}.zip` file, ready for submission.                                                                              |
+| `yarn package:firefox` | Packages the contents of the `.firefox_build/` directory into a `kibisis-firefox-{version}.zip` file, ready for submission.                                                                            |
+| `yarn prettier`        | Runs `prettier` with the same configuration that is run on the pre-commit hooks.                                                                                                                       |
+| `yarn start:chrome`    | Bundles the source code & the add-on assets, starts the local Chrome For Testing Developer edition with the add-on installed. This will watch for changes in the source code and reload the extension. |
+| `yarn start:firefox`   | Bundles the source code & the add-on assets, starts the local Firefox Developer edition with the add-on installed. This will watch for changes in the source code and reload the extension.            |
+| `yarn start:dapp`      | Starts the example dApp at [http://localhost:8080](http://localhost:8080)                                                                                                                              |
 
 <sup>[Back to top ^][table-of-contents]</sup>
 
@@ -110,8 +120,8 @@ Please refer to the [LICENSE][license] file.
 
 <!-- Links -->
 [contribute]: ./CONTRIBUTING.md
+[jq]: https://github.com/jqlang/jq
 [license]: ./LICENSE
-[local-firefox-dir]: ./.firefox
 [table-of-contents]: #table-of-contents
 [use-web-ext]: https://extensionworkshop.com/documentation/develop/getting-started-with-web-ext/#using-web-ext-section
 [yarn]: https://yarnpkg.com/