Merge branch 'develop' into part-of-MetaMask#19528-in-confirm-add-sug…

…gested-token
pritam1813 · Jan 12, 2024 · c12179b · c12179b
2 parents cfafb8f + 6255979
commit c12179b
Show file tree

Hide file tree

Showing 855 changed files with 27,338 additions and 19,608 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -169,6 +169,9 @@ workflows:
       - test-e2e-chrome-rpc:
           requires:
             - prep-build-test
+      - test-e2e-chrome-multiple-providers:
+          requires:
+            - prep-build-test
       - test-e2e-chrome-flask:
           requires:
             - prep-build-test-flask
@@ -187,6 +190,14 @@ workflows:
       - test-e2e-chrome-mv3:
           requires:
             - prep-build-test-mv3
+      - test-e2e-chrome-vault-decryption:
+          filters:
+            branches:
+              only:
+                - develop
+                - /^Version-v(\d+)[.](\d+)[.](\d+)/
+          requires:
+            - prep-build
       - test-unit-mocha:
           requires:
             - prep-deps
@@ -266,11 +277,13 @@ workflows:
             - test-mozilla-lint-flask
             - test-e2e-chrome
             - test-e2e-chrome-multichain
+            - test-e2e-chrome-multiple-providers
             - test-e2e-firefox
             - test-e2e-chrome-flask
             - test-e2e-firefox-flask
             - test-e2e-chrome-mmi
             - test-e2e-chrome-rpc-mmi
+            - test-e2e-chrome-vault-decryption
             - test-storybook
       - benchmark:
           requires:
@@ -955,6 +968,33 @@ jobs:
       - store_test_results:
           path: test/test-results/e2e
 
+  test-e2e-chrome-multiple-providers:
+    executor: node-browsers
+    parallelism: 1
+    steps:
+      - run: *shallow-git-clone
+      - attach_workspace:
+          at: .
+      - run:
+          name: Move test build to dist
+          command: mv ./dist-test ./dist
+      - run:
+          name: Move test zips to builds
+          command: mv ./builds-test ./builds
+      - run:
+          name: test:e2e:chrome:multi-provider
+          command: |
+            if .circleci/scripts/test-run-e2e.sh
+            then
+              yarn test:e2e:chrome:multi-provider --retries 2
+            fi
+          no_output_timeout: 5m
+      - store_artifacts:
+          path: test-artifacts
+          destination: test-artifacts
+      - store_test_results:
+          path: test/test-results/e2e
+
   test-e2e-chrome-rpc-mmi:
     executor: node-browsers
     steps:
@@ -981,6 +1021,21 @@ jobs:
       - store_test_results:
           path: test/test-results/e2e
 
+  test-e2e-chrome-vault-decryption:
+    executor: node-browsers-large
+    steps:
+      - run: *shallow-git-clone
+      - attach_workspace:
+          at: .
+      - run:
+          name: test:e2e:chrome:vault
+          command: |
+            if .circleci/scripts/test-run-e2e.sh
+            then
+              yarn test:e2e:single test/e2e/vault-decryption-chrome.spec.js --browser chrome --retries 2 --debug
+            fi
+          no_output_timeout: 5m
+
   test-e2e-firefox-flask:
     executor: node-browsers-large
     parallelism: 16

diff --git a/.eslintrc.js b/.eslintrc.js
@@ -285,6 +285,7 @@ module.exports = {
         'shared/**/*.test.ts',
         'test/helpers/*.js',
         'test/jest/*.js',
+        'test/lib/timer-helpers.js',
         'test/e2e/helpers.test.js',
         'ui/**/*.test.js',
         'ui/__mocks__/*.js',

diff --git a/.github/workflows/create-bug-report.yml b/.github/workflows/create-bug-report.yml
@@ -9,7 +9,7 @@ jobs:
       - name: Extract version from branch name if release branch
         id: extract_version
         run: |
-          if [[ "$GITHUB_REF" == "refs/heads/Version-v"* ]]; then
+          if [[ "$GITHUB_REF" =~ ^refs/heads/Version-v[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
             version="${GITHUB_REF#refs/heads/Version-v}"
             echo "New release branch($version), continue next steps"
             echo "version=$version" >> "$GITHUB_ENV"

diff --git a/.storybook/3.COLORS.stories.mdx b/.storybook/3.COLORS.stories.mdx
@@ -18,7 +18,7 @@ We follow a 3 tiered system for color design tokens and css variables.
 <div
   style={{
     textAlign: 'center',
-    backgroundColor: 'var(--color-background-alternative)',
+    backgroundColor: 'var(--brand-colors-white-white000)',
     padding: 32,
   }}
 >

diff --git a/.storybook/4.SHADOW.stories.mdx b/.storybook/4.SHADOW.stories.mdx
@@ -28,10 +28,10 @@ There are 4 different sizes of shadow in MetaMask
       display: 'grid',
       alignContent: 'center',
       justifyContent: 'center',
-      spanAlign: 'center',
+      color: 'var(--color-text-default)',
     }}
   >
-    XS
+    <span>XS</span>
   </div>
   <div
     style={{
@@ -42,10 +42,10 @@ There are 4 different sizes of shadow in MetaMask
       display: 'grid',
       alignContent: 'center',
       justifyContent: 'center',
-      spanAlign: 'center',
+      color: 'var(--color-text-default)',
     }}
   >
-    SM
+    <span>SM</span>
   </div>
   <div
     style={{
@@ -56,10 +56,10 @@ There are 4 different sizes of shadow in MetaMask
       display: 'grid',
       alignContent: 'center',
       justifyContent: 'center',
-      spanAlign: 'center',
+      color: 'var(--color-text-default)',
     }}
   >
-    MD
+    <span>MD</span>
   </div>
   <div
     style={{
@@ -70,10 +70,10 @@ There are 4 different sizes of shadow in MetaMask
       display: 'grid',
       alignContent: 'center',
       justifyContent: 'center',
-      spanAlign: 'center',
+      color: 'var(--color-text-default)',
     }}
   >
-    LG
+    <span>LG</span>
   </div>
 </div>
 
@@ -106,9 +106,8 @@ As well as the neutral colors for shadow 2 other colors exist that are used for
       display: 'grid',
       alignContent: 'center',
       justifyContent: 'center',
-      spanAlign: 'center',
+      color: 'var(--color-text-default)',
     }}
-    color="default"
   >
     <span>Default</span>
   </div>
@@ -121,7 +120,6 @@ As well as the neutral colors for shadow 2 other colors exist that are used for
       display: 'grid',
       alignContent: 'center',
       justifyContent: 'center',
-      spanAlign: 'center',
       color: 'var(--color-primary-inverse)',
     }}
   >
@@ -136,7 +134,6 @@ As well as the neutral colors for shadow 2 other colors exist that are used for
       display: 'grid',
       alignContent: 'center',
       justifyContent: 'center',
-      spanAlign: 'center',
       color: 'var(--color-error-inverse)',
     }}
   >
@@ -169,10 +166,10 @@ Using both size and color tokens, different shadows can be applied to components
         display: 'grid',
         alignContent: 'center',
         justifyContent: 'center',
-        spanAlign: 'center',
         height: 100,
         textAlign: 'center',
         boxShadow: 'var(--shadow-size-xs) var(--color-shadow-default)',
+        color: 'var(--color-text-default)',
       }}
     >
       <span>Card</span>
@@ -183,10 +180,10 @@ Using both size and color tokens, different shadows can be applied to components
         display: 'grid',
         alignContent: 'center',
         justifyContent: 'center',
-        spanAlign: 'center',
         height: 100,
         textAlign: 'center',
         boxShadow: 'var(--shadow-size-sm) var(--color-shadow-default)',
+        color: 'var(--color-text-default)',
       }}
     >
       <span>Dropdown</span>
@@ -197,10 +194,10 @@ Using both size and color tokens, different shadows can be applied to components
         display: 'grid',
         alignContent: 'center',
         justifyContent: 'center',
-        spanAlign: 'center',
         height: 100,
         textAlign: 'center',
         boxShadow: 'var(--shadow-size-md) var(--color-shadow-default)',
+        color: 'var(--color-text-default)',
       }}
     >
       <span>Toast</span>
@@ -211,10 +208,10 @@ Using both size and color tokens, different shadows can be applied to components
         display: 'grid',
         alignContent: 'center',
         justifyContent: 'center',
-        spanAlign: 'center',
         height: 100,
         textAlign: 'center',
         boxShadow: 'var(--shadow-size-lg) var(--color-shadow-default)',
+        color: 'var(--color-text-default)',
       }}
     >
       <span>Modal</span>
@@ -233,7 +230,6 @@ Using both size and color tokens, different shadows can be applied to components
         display: 'grid',
         alignContent: 'center',
         justifyContent: 'center',
-        spanAlign: 'center',
         height: 100,
         textAlign: 'center',
         boxShadow: 'var(--component-button-primary-shadow)',
@@ -249,7 +245,6 @@ Using both size and color tokens, different shadows can be applied to components
         display: 'grid',
         alignContent: 'center',
         justifyContent: 'center',
-        spanAlign: 'center',
         height: 100,
         textAlign: 'center',
         boxShadow: 'var(--component-button-danger-shadow)',

diff --git a/.storybook/manager.js b/.storybook/manager.js
diff --git a/.storybook/metamask-storybook-theme.js b/.storybook/metamask-storybook-theme.js
@@ -1,12 +1,6 @@
-// .storybook/YourTheme.js
-
-import { create } from '@storybook/theming';
-
-export default create({
-  base: 'light',
+// MetaMask Storybook Theme
+export const metamaskStorybookTheme = {
   brandTitle: 'MetaMask Storybook',
-
   // Typography
   fontBase: 'Euclid Circular B, Roboto, Helvetica, Arial, sans-serif',
-  fontCode: 'Inconsolata, monospace',
-});
+};
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -3,7 +3,7 @@
 
 Instead, use export const parameters = {}; and export const decorators = []; in your .storybook/preview.js. Addon authors similarly should use such an export in a preview entry file (see Preview entries).
   * */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { action } from '@storybook/addon-actions';
 import { Provider } from 'react-redux';
 import configureStore from '../ui/store/store';
@@ -16,8 +16,10 @@ import testData from './test-data.js';
 import { Router } from 'react-router-dom';
 import { createBrowserHistory } from 'history';
 import { setBackgroundConnection } from '../ui/store/background-connection';
-import MetaMaskStorybookTheme from './metamask-storybook-theme';
-import { addons } from '@storybook/addons';
+import { metamaskStorybookTheme } from './metamask-storybook-theme';
+import { DocsContainer } from '@storybook/addon-docs';
+import { useDarkMode } from 'storybook-dark-mode';
+import { themes } from '@storybook/theming';
 
 export const parameters = {
   backgrounds: {
@@ -28,7 +30,23 @@ export const parameters = {
     ],
   },
   docs: {
-    theme: MetaMaskStorybookTheme,
+    container: (context) => {
+      const isDark = useDarkMode();
+
+      const props = {
+        ...context,
+        theme: isDark
+          ? { ...themes.dark, ...metamaskStorybookTheme }
+          : { ...themes.light, ...metamaskStorybookTheme },
+        'data-theme': isDark ? 'dark' : 'light',
+      };
+
+      return (
+        <div data-theme={isDark ? 'dark' : 'light'}>
+          <DocsContainer {...props} />
+        </div>
+      );
+    },
   },
   options: {
     storySort: {
@@ -81,16 +99,10 @@ const proxiedBackground = new Proxy(
 setBackgroundConnection(proxiedBackground);
 
 const metamaskDecorator = (story, context) => {
-  const [isDark, setDark] = useState(false);
-  const channel = addons.getChannel();
+  const isDark = useDarkMode();
   const currentLocale = context.globals.locale;
   const current = allLocales[currentLocale];
 
-  useEffect(() => {
-    channel.on('DARK_MODE', setDark);
-    return () => channel.off('DARK_MODE', setDark);
-  }, [channel, setDark]);
-
   useEffect(() => {
     const currentTheme = document.documentElement.getAttribute('data-theme');
 
@@ -121,6 +133,4 @@ const metamaskDecorator = (story, context) => {
   );
 };
 
-export const decorators = [
-  metamaskDecorator,
-];
+export const decorators = [metamaskDecorator];