Merge pull request #23368 from MetaMask/Version-v11.13.0

Version v11.13.0

.circleci/config.yml

@@ -28,7 +28,7 @@ executors:
     resource_class: small
   playwright:
     docker:
-      - image: mcr.microsoft.com/playwright:v1.41.1-jammy
+      - image: mcr.microsoft.com/playwright:v1.41.1-focal
     resource_class: medium
 
 orbs:

.depcheckrc.yml

@@ -37,7 +37,8 @@ ignores:
   - 'source-map-explorer'
   - 'playwright'
   - 'wait-on'
-  - 'tsx' #used in .devcontainer
+  - 'tsx' # used in .devcontainer
+  - 'prettier-eslint' # used by the Prettier ESLint VSCode extension
   # development tool
   - 'nyc'
   # storybook

.devcontainer/download-builds.ts

@@ -80,7 +80,7 @@ async function downloadBuilds(builds: any[]) {
     console.log(
       'No builds found on CircleCI for the current branch, you will have to build the Extension yourself',
     );
-    return;
+    return false;
   }
 
   const buildPromises = [] as Promise<any>[];
@@ -101,6 +101,8 @@ async function downloadBuilds(builds: any[]) {
   await Promise.all(buildPromises);
 
   console.log('downloads complete');
+
+  return true;
 }
 
 function unzipBuilds(folder: 'builds' | 'builds-test', versionNumber: string) {
@@ -111,7 +113,7 @@ function unzipBuilds(folder: 'builds' | 'builds-test', versionNumber: string) {
   if (process.platform === 'win32') {
     execSync(`rmdir /s /q dist & mkdir dist\\chrome & mkdir dist\\firefox`);
   } else {
-    execSync('sudo rm -rf dist && mkdir -p dist');
+    execSync('rm -rf dist && mkdir -p dist');
   }
 
   for (const browser of ['chrome', 'firefox']) {
@@ -136,12 +138,14 @@ async function main(jobNames: string[]) {
 
   console.log('builds', builds);
 
-  await downloadBuilds(builds);
+  const downloadWorked = await downloadBuilds(builds);
 
-  const versionNumber = getVersionNumber(builds);
-  const folder = builds[0].path.split('/')[0];
+  if (downloadWorked) {
+    const versionNumber = getVersionNumber(builds);
+    const folder = builds[0].path.split('/')[0];
 
-  unzipBuilds(folder, versionNumber);
+    unzipBuilds(folder, versionNumber);
+  }
 }
 
 let args = process.argv.slice(2);

.gitattributes

@@ -20,3 +20,5 @@ app/_locales/** linguist-generated
 # yarn berry suggested .gitattributes
 /.yarn/releases/** binary
 /.yarn/plugins/** binary
+
+app/*.html linguist-language=EJS

.github/CODEOWNERS

@@ -12,6 +12,13 @@
 development/                         @MetaMask/extension-devs @kumavis
 lavamoat/                            @MetaMask/extension-devs @MetaMask/supply-chain @MetaMask/snaps-devs
 
+# The offscreen.ts script file that is included in the offscreedocument html
+# file is responsible, at present, for loading the snaps execution environment
+# for MV3. Any changes to this file should require at least one member of the
+# snaps development team to review and approve the changes.
+offscreen/scripts/offscreen.ts       @MetaMask/snaps-devs
+
+
 # The .circleci/ folder instructs Circle CI on the process by which it
 # should test, build and publish releases of our application. Due to the
 # impact that changes to the files contained within this folder may have

.github/workflows/security-code-scanner.yml

@@ -0,0 +1,36 @@
+name: "MetaMask Security Code Scanner"
+
+on:
+  push:
+    branches: [ 'develop' ]
+  pull_request:
+    branches: [ 'develop' ]
+
+jobs:
+  run-security-scan:
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+    steps:
+      - name: MetaMask Security Code Scanner
+        uses: MetaMask/Security-Code-Scanner@main
+        with:
+          repo: ${{ github.repository }}
+          paths_ignored: |
+            test/
+            docs/
+            storybook/
+            .storybook/
+            '**/*.test.js'
+            '**/*.test.ts'
+            '**/*.test.jsx'
+            '**/*.test.tsx'
+            '**/*.stories.tsx'
+            development/chromereload.js
+            node_modules
+          rules_excluded:
+            example
+          mixpanel_project_token: ${{secrets.SECURITY_CODE_SCANNER_MIXPANEL_TOKEN}}
+          slack_webhook: ${{ secrets.APPSEC_BOT_SLACK_WEBHOOK }}

.storybook/5.BREAKPOINTS.stories.mdx

@@ -34,51 +34,55 @@ $screen-lg-min /* 1280px */
 ### Mixins
 
 ```css
+@use "design-system";
+
 /* Max screen size */
-@include screen-sm-max {
+@include design-system.screen-sm-max {
   /* equivalent css @media screen and (max-width: 575px) */
 }
-@include screen-md-max {
+@include design-system.screen-md-max {
   /* equivalent css @media screen and (max-width: 767px) */
 }
-@include screen-lg-max {
+@include design-system.screen-lg-max {
   /* equivalent css @media screen and (max-width: 1279px) */
 }
 
 /* Min screen size */
-@include screen-sm-min {
+@include design-system.screen-sm-min {
   /* equivalent css @media screen and (min-width: 576px) */
 }
-@include screen-md-min {
+@include design-system.screen-md-min {
   /* equivalent css @media screen and (min-width: 768px) */
 }
-@include screen-lg-min {
+@include design-system.screen-lg-min {
   /* equivalent css @media screen and (min-width: 1280px) */
 }
 ```
 
 Migrating from the old sass variables to the new mixins looks like this
 
 ```css
+@use "design-system";
+
 /* Max width */
 /* Instead of the media query and sass variable */
-@media screen and (max-width: $break-small) {
+@media screen and (max-width: design-system.$break-small) {
   right: 16px;
 }
 
 /* Use the sass mixin */
-@include screen-sm-max {
+@include design-system.screen-sm-max {
   right: 16px;
 }
 
 /* Min width */
 /* Instead of the media query and sass variable */
-@media screen and (min-width: $break-large) {
+@media screen and (min-width: design-system.$break-large) {
   left: 16px;
 }
 
 /* Use the sass mixin */
-@include screen-sm-min {
+@include design-system.screen-sm-min {
   left: 16px;
 }
 ```
@@ -113,12 +117,14 @@ Don't use static media queries in your code.
 Do use the provided Sass mixins
 
 ```css
+@use "design-system";
+
 .account-menu {
-  @include screen-md-min {
+  @include design-system.screen-md-min {
     right: calc((100vw - 80vw) / 2);
   }
 
-  @include screen-lg-min {
+  @include design-system.screen-lg-min {
     right: calc((100vw - 65vw) / 2);
   }
 }

.storybook/main.js

@@ -69,9 +69,9 @@ module.exports = {
           loader: 'sass-loader',
           options: {
             sourceMap: true,
-            implementation: require('sass'),
+            implementation: require('sass-embedded'),
             sassOptions: {
-              includePaths: ['ui/css/'],
+              includePaths: ['ui/css/', 'node_modules/',],
             },
           },
         },

.storybook/test-data.js

@@ -369,6 +369,19 @@ const state = {
           methods: [...Object.values(EthMethod)],
           type: EthAccountType.Eoa,
         },
+        'b990b846-b384-4508-93d9-587461f1123e': {
+          address: '0x71C7656EC7ab88b098defB751B7401B5f6d8976F',
+          id: 'b990b846-b384-4508-93d9-587461f1123e',
+          metadata: {
+            name: 'Test Account 1',
+            keyring: {
+              type: 'Test Keyring',
+            },
+          },
+          options: {},
+          methods: [...Object.values(EthMethod)],
+          type: EthAccountType.Eoa,
+        },
       },
       selectedAccount: 'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3',
     },
@@ -473,7 +486,7 @@ const state = {
       },
     ],
     allDetectedTokens: {
-      '0x5': {
+      '0xaa36a7': {
         '0x9d0ba4ddac06032527b140912ec808ab9451b788': [
           {
             address: '0x514910771AF9Ca656af840dff83E8264EcF986CA',
@@ -673,11 +686,11 @@ const state = {
     swapsWelcomeMessageHasBeenShown: true,
     defaultHomeActiveTabName: 'Tokens',
     providerConfig: {
-      type: 'goerli',
+      type: 'sepolia',
       ticker: 'ETH',
-      nickname: 'Goerli',
+      nickname: 'Sepolia',
       rpcUrl: '',
-      chainId: '0x5',
+      chainId: '0xaa36a7',
     },
     network: '5',
     accounts: {

.vscode/extensions.json

@@ -1,3 +1,7 @@
 {
-  "recommendations": ["rvest.vs-code-prettier-eslint"]
+  "recommendations": [
+    "rvest.vs-code-prettier-eslint",
+    "streetsidesoftware.code-spell-checker",
+    "DigitalBrainstem.javascript-ejs-support"
+  ]
 }

.vscode/package.json-schema.json

@@ -0,0 +1,41 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "allOf": [
+    {
+      "required": ["lavamoat"],
+      "properties": {
+        "scripts": {
+          "properties": {
+            "start:dev": {
+              "description": "Runs `yarn start` with the addition of react/redux backend devtool servers enabled."
+            }
+          }
+        },
+        "devDependencies": {
+          "required": ["lavamoat"],
+          "properties": {
+            "autoprefixer": {
+              "description": "Used by our build systems to automatically add prefixes to CSS rules based on our browserslist."
+            }
+          }
+        },
+        "lavamoat": {
+          "type": "object",
+          "required": ["allowScripts"],
+          "additionalProperties": false,
+          "properties": {
+            "allowScripts": {
+              "type": "object",
+              "additionalProperties": {
+                "type": "boolean"
+              },
+              "description": "Defines which dependencies' scripts are allowed to run upon install. If this setting is true, the scripts are allowed. If false, the scripts are not allowed. Run `yarn allow-scripts auto` to add a dependency to this list (defaults to false)."
+            }
+          }
+        }
+      }
+    }
+  ],
+  "description": "An extension of the standard package.json schema used to document our package.json scripts, dependencies, and miscellaneous fields.",
+  "title": "Extended package.json Schema"
+}

.vscode/settings.json

@@ -1,12 +1,21 @@
 {
+  "cSpell.words": ["blockaid", "lavamoat"],
   "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
   "editor.tabSize": 2,
+  "files.associations": {
+    "app/*.html": "ejs"
+  },
   "files.trimTrailingWhitespace": true,
   "javascript.preferences.importModuleSpecifier": "relative",
   "json.schemas": [
     {
       "fileMatch": ["app/manifest/*/*.json"],
       "url": "https://json.schemastore.org/chrome-manifest"
+    },
+    {
+      // apply our package.json schema to our our root `package.json` only
+      "fileMatch": ["package.json", "!node_modules/**/package.json"],
+      "url": "./.vscode/package.json-schema.json"
     }
   ],
   "typescript.tsdk": "node_modules/typescript/lib"