Version v11.12.0

.depcheckrc.yml

@@ -24,7 +24,7 @@ ignores:
   - '@metamask/phishing-warning' # statically hosted as part of some e2e tests
   - '@metamask/test-dapp'
   - '@metamask/design-tokens' # Only imported in index.css
-  - '@tsconfig/node16' # required dynamically by TS, used in tsconfig.json
+  - '@tsconfig/node20' # required dynamically by TS, used in tsconfig.json
   - '@sentry/cli' # invoked as `sentry-cli`
   - 'chromedriver'
   - 'depcheck' # ooo meta
@@ -37,6 +37,7 @@ ignores:
   - 'source-map-explorer'
   - 'playwright'
   - 'wait-on'
+  - 'tsx' #used in .devcontainer
   # development tool
   - 'nyc'
   # storybook

.devcontainer/devcontainer.json

@@ -0,0 +1,58 @@
+{
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "eamodio.gitlens",
+        "github.codespaces",
+        "github.copilot",
+        "github.copilot-chat",
+        "ms-azuretools.vscode-docker",
+        "rvest.vs-code-prettier-eslint"
+      ],
+      "settings": {
+        "editor.formatOnSave": true,
+        "git.autofetch": true,
+        "git.ignoreRebaseWarning": true,
+        "git.rebaseWhenSync": true,
+        "gitlens.showWelcomeOnInstall": false
+      },
+      "tasks": [
+        {
+          "label": "Open noVNC new tab",
+          "type": "shell",
+          "command": "xdg-open https://$CODESPACE_NAME-6080.$GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN",
+          "problemMatcher": []
+        }
+      ]
+    }
+  },
+
+  "forwardPorts": [5901, 6080],
+
+  "image": "mcr.microsoft.com/devcontainers/universal:2-linux",
+
+  "name": "MM Extension Codespace",
+
+  "otherPortsAttributes": { "onAutoForward": "ignore" },
+
+  "portsAttributes": {
+    "5901": {
+      "label": "local VNC",
+      "onAutoForward": "ignore"
+    },
+    "6080": {
+      "label": "noVNC web",
+      "onAutoForward": "openPreview"
+    }
+  },
+
+  "postAttachCommand": "/usr/local/share/desktop-init.sh && git pull --rebase; yarn download-builds",
+
+  // This is a working Infura key, but it's on the Free Plan and has very limited requests per second
+  // If you want to use your own INFURA_PROJECT_ID, follow the instructions in README.md
+  "postCreateCommand": "if [ -z \"$INFURA_PROJECT_ID\" ]; then echo 'INFURA_PROJECT_ID=3d110a0fce9e49b08d2ee584e19a05ba' > .metamaskrc; fi",
+
+  "runArgs": ["--shm-size=1g"],
+
+  "updateContentCommand": "sudo .devcontainer/install.sh && yarn --immutable && yarn tsx .devcontainer/setup-browsers.ts && echo 'export DISPLAY=:1' >> ~/.bashrc"
+}

.devcontainer/download-builds.ts

@@ -0,0 +1,153 @@
+import { execSync } from 'child_process';
+import util from 'util';
+
+const exec = util.promisify(require('node:child_process').exec);
+
+function getGitBranch() {
+  const gitOutput = execSync('git status').toString();
+
+  const branchRegex = /On branch (?<branch>.*)\n/;
+  return gitOutput.match(branchRegex)?.groups?.branch || 'develop';
+}
+
+async function getCircleJobs(branch: string) {
+  let response = await fetch(
+    `https://circleci.com/api/v2/project/gh/MetaMask/metamask-extension/pipeline?branch=${branch}`,
+  );
+
+  const pipelineId = (await response.json()).items[0].id;
+
+  console.log('pipelineId:', pipelineId);
+
+  response = await fetch(
+    `https://circleci.com/api/v2/pipeline/${pipelineId}/workflow`,
+  );
+
+  const workflowId = (await response.json()).items[0].id;
+
+  console.log('workflowId:', workflowId);
+
+  response = await fetch(
+    `https://circleci.com/api/v2/workflow/${workflowId}/job`,
+  );
+
+  const jobs = (await response.json()).items;
+
+  return jobs;
+}
+
+async function getBuilds(branch: string, jobNames: string[]) {
+  const jobs = await getCircleJobs(branch);
+  let builds = [] as any[];
+
+  for (const jobName of jobNames) {
+    const jobId = jobs.find((job: any) => job.name === jobName).job_number;
+
+    console.log(`jobName: ${jobName}, jobId: ${jobId}`);
+
+    const response = await fetch(
+      `https://circleci.com/api/v2/project/gh/MetaMask/metamask-extension/${jobId}/artifacts`,
+    );
+
+    const artifacts = (await response.json()).items;
+
+    if (!artifacts || artifacts.length === 0) {
+      return [];
+    }
+
+    builds = builds.concat(
+      artifacts.filter((artifact: any) => artifact.path.endsWith('.zip')),
+    );
+  }
+
+  return builds;
+}
+
+function getVersionNumber(builds: any[]) {
+  for (const build of builds) {
+    const versionRegex = /metamask-chrome-(?<version>\d+\.\d+\.\d+).zip/;
+
+    const versionNumber = build.path.match(versionRegex)?.groups?.version;
+
+    if (versionNumber) {
+      return versionNumber;
+    }
+  }
+}
+
+async function downloadBuilds(builds: any[]) {
+  if (!builds || builds.length === 0) {
+    console.log(
+      'No builds found on CircleCI for the current branch, you will have to build the Extension yourself',
+    );
+    return;
+  }
+
+  const buildPromises = [] as Promise<any>[];
+
+  for (const build of builds) {
+    if (
+      build.path.startsWith('builds/') ||
+      build.path.startsWith('builds-test/')
+    ) {
+      const { url } = build;
+
+      console.log('downloading', build.path);
+
+      buildPromises.push(exec(`curl -L --create-dirs -o ${build.path} ${url}`));
+    }
+  }
+
+  await Promise.all(buildPromises);
+
+  console.log('downloads complete');
+}
+
+function unzipBuilds(folder: 'builds' | 'builds-test', versionNumber: string) {
+  if (!versionNumber) {
+    return;
+  }
+
+  if (process.platform === 'win32') {
+    execSync(`rmdir /s /q dist & mkdir dist\\chrome & mkdir dist\\firefox`);
+  } else {
+    execSync('sudo rm -rf dist && mkdir -p dist');
+  }
+
+  for (const browser of ['chrome', 'firefox']) {
+    if (process.platform === 'win32') {
+      execSync(
+        `tar -xf ${folder}/metamask-${browser}-${versionNumber}.zip -C dist/${browser}`,
+      );
+    } else {
+      execSync(
+        `unzip ${folder}/metamask-${browser}-${versionNumber}.zip -d dist/${browser}`,
+      );
+    }
+  }
+
+  console.log(`unzipped ${folder} into ./dist`);
+}
+
+async function main(jobNames: string[]) {
+  const branch = getGitBranch();
+
+  const builds = await getBuilds(branch, jobNames);
+
+  console.log('builds', builds);
+
+  await downloadBuilds(builds);
+
+  const versionNumber = getVersionNumber(builds);
+  const folder = builds[0].path.split('/')[0];
+
+  unzipBuilds(folder, versionNumber);
+}
+
+let args = process.argv.slice(2);
+
+if (!args || args.length === 0) {
+  args = ['prep-build'];
+}
+
+main(args);

.devcontainer/first-run-notice.txt

@@ -0,0 +1,22 @@
+Welcome to MetaMask Codespaces!
+
+## Quickstart Instructions
+
+1. A "Simple Browser" will open inside the browser with noVNC -- click Connect
+   - Optional steps:
+     - Click the button at the upper-right of the Simple Browser tab to open the noVNC window in its own tab
+     - Open the noVNC sidebar on the left, click the gear icon, change the Scaling Mode to Remote Resizing
+2. Wait about 20 extra seconds on the first launch, for the scripts to finish
+3. Right-click on the noVNC desktop to launch Chrome or Firefox with MetaMask pre-installed
+4. Change some code, then run `yarn start` to build in dev mode
+5. After a minute or two, it will finish building, and you can see your changes in the noVNC desktop
+
+## Tips to keep your Codespaces usage lower
+
+- You are billed for both time spent running, and for storage used
+- Codespaces pause after 30 minutes of inactivity, and auto-delete after 30 days of inactivity
+- You can manage your Codespaces here: https://github.com/codespaces
+  - You may want to manually pause them before the 30 minute timeout
+  - If you have several idle Codespaces hanging around for several days, you can quickly run out of storage quota.
+    You should delete the ones you do not plan to use anymore, and probably keep only 1 or 2 in the long-term.
+    It's also possible to re-use old Codespaces and switch the branch, instead of creating new ones and deleting the old ones.