Extension: docker image and build instructions for firefox (#1414)

* feat(extension): docker image and build instructions for firefox

* feat(firefox): separating build in different stages and updating docs

* feat: ensure amd64 architecture

* feat: tweaking options on webpack

Author: pedrorezende

apps/extension/FIREFOX_README.md

@@ -13,44 +13,25 @@ exactly as they are described below.
 
 ## Build instructions
 
-**NOTE**: You _must_ use `yarn` to install dependencies! This is due to the fact that this is configured as a monorepo
-using yarn workspaces. If you install via `npm install` or `npm i`, it will not resolve dependencies correctly.
-
-If you don't already have Node v22 LTS and NPM v10, please follow these [instructions](#setting-up-node-and-npm)
-
-These instructions should work for the default reviewer build environment.
+1. Certify that Docker 27+ is installed in your system before proceeding with the build:
 
 ```bash
-sudo apt install protobuf-compiler build-essential curl pkg-config libssl-dev binaryen -y
-curl https://sh.rustup.rs -sSf | sh
-
-# Proceed with standard installation when prompted
-
-# Make sure to pull cargo into your current environment:
-. "$HOME/.cargo/env"
-
-# You must use yarn to install dependencies:
-npm install -g yarn
-export PUPPETEER_SKIP_DOWNLOAD=true
-
-# Run yarn to install dependencies
-yarn
+docker --version
+```
 
-# Move into extension app directory
-cd apps/extension
+2. From the **repository root**, build the Docker image:
 
-# Build wasm dependency:
-yarn wasm:build
+```bash
+docker build . --target firefox -t namada-keychain-firefox -f docker/extension/Dockerfile
 ```
 
-Then, issue the final build command for the Firefox add-on:
+3. Wait for the build to complete, and then copy the files from the container by executing the following command in the **repository root**:
 
 ```bash
-# Build the addon:
-yarn build:firefox
+docker run --rm -v ./apps/extension/build:/shared namada-keychain-firefox cp -r /app/apps/extension/build/. /shared/
 ```
 
-The resulting extension is the ZIP file in `apps/extension/build/firefox`.
+4. The resulting extension is the ZIP file in `apps/extension/build/firefox`.
 
 [ [Table of Contents](#table-of-contents) ]
 
@@ -63,25 +44,16 @@ This build was produced using the following environment:
 - Ubuntu 24.04 LTS (Desktop edition)
 - 10GB of system memory (RAM)
 - 6 cores of vCPU
-- Node 22 LTS and npm 10
 - 35GB of storage
+- Docker version 27+ installed and running
 
 Please ensure that this matches your environment!
 
 [ [Table of Contents](#table-of-contents) ]
 
-### Setting up Node and NPM
-
-```bash
-wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
-
-# Enable nvm in current shell
-export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
-[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
+### Installing Docker
 
-# Install v22 LTS
-nvm install v22.0.0
-```
+If Docker is not currently installed in your environment, please refer to the [instructions of the official Docker documentation](https://docs.docker.com/engine/install/ubuntu/).
 
 [ [Table of Contents](#table-of-contents) ]
 

apps/extension/webpack.config.js

@@ -13,12 +13,7 @@ const { getProcessEnv } = require("@namada/config/webpack.js");
 // Load .env from namadillo:
 require("dotenv").config({ path: "./.env" });
 
-const {
-  NODE_ENV,
-  TARGET,
-  BUNDLE_ANALYZE,
-  BETA_RELEASE: isBeta,
-} = process.env;
+const { NODE_ENV, TARGET, BUNDLE_ANALYZE, BETA_RELEASE: isBeta } = process.env;
 
 const OUTPUT_PATH = resolve(__dirname, `./build/${TARGET}`);
 const MANIFEST_VERSION = TARGET === "firefox" ? "v2" : "v3";
@@ -159,14 +154,18 @@ module.exports = {
     path: OUTPUT_PATH,
     //TODO: this might lead to problems with caching
     filename: "[name].namada.js",
+    chunkFilename: "[id].[contenthash].js",
+    hashFunction: "xxhash64",
   },
   module: {
     rules: [
       {
         test: /\.tsx?$/,
         loader: "ts-loader",
         exclude: /node_modules/,
-        options: {},
+        options: {
+          happyPackMode: false, // Ensure single-threaded processing
+        },
       },
       {
         test: /\.css$/i,
@@ -226,4 +225,9 @@ module.exports = {
     // We want to ignore wasm-bindgen-rayon circular dependency warning
     warningsFilter: [/dependency between chunks.+wasm-bindgen-rayon/],
   },
+  optimization: {
+    minimize: false,
+    moduleIds: "deterministic", // Ensures consistent module IDs
+    chunkIds: "deterministic", // Ensures consistent chunk IDs
+  },
 };

docker/extension/Dockerfile

@@ -0,0 +1,36 @@
+FROM --platform=linux/amd64 rust:1.79 AS builder
+
+WORKDIR /app
+
+# Installing required packages
+RUN apt update && apt install -y nodejs npm clang pkg-config libssl-dev protobuf-compiler curl
+RUN npm install -g yarn
+RUN rustup target add wasm32-unknown-unknown
+RUN curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh -s -- -y
+
+# Copying packages and scripts related to the monorepo
+COPY .yarnrc.yml tsconfig.base.json package.json yarn.lock .
+COPY ./.yarn ./.yarn
+COPY ./packages ./packages
+COPY ./scripts ./scripts
+COPY ./apps/extension/package.json ./apps/extension/package.json
+
+# Installing packages
+RUN yarn 
+WORKDIR /app/apps/extension
+
+# Building wasm files
+COPY ./apps/extension/scripts ./scripts
+RUN yarn wasm:build
+
+# Building extension dist files
+COPY ./apps/extension .
+RUN yarn
+
+FROM builder AS firefox
+RUN yarn build:firefox
+
+FROM builder AS chrome
+RUN yarn build:chrome
+
+