Merge remote-tracking branch 'refs/remotes/origin/develop' into feat/…

…2403-resolve-on-l2
MetaMask · Sep 16, 2024 · 0afeb71 · 0afeb71
2 parents 2fe6852 + ca6fd53
commit 0afeb71
Show file tree

Hide file tree

Showing 79 changed files with 3,089 additions and 838 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -18,7 +18,6 @@ import { createBrowserHistory } from 'history';
 import { setBackgroundConnection } from '../ui/store/background-connection';
 import { metamaskStorybookTheme } from './metamask-storybook-theme';
 import { DocsContainer } from '@storybook/addon-docs';
-import { useDarkMode } from 'storybook-dark-mode';
 import { themes } from '@storybook/theming';
 import { AlertMetricsProvider } from '../ui/components/app/alert-system/contexts/alertMetricsContext';
 
@@ -36,7 +35,13 @@ export const parameters = {
   },
   docs: {
     container: (context) => {
-      const isDark = useDarkMode();
+      const theme = context?.globals?.theme || 'both';
+      const systemPrefersDark = window.matchMedia(
+        '(prefers-color-scheme: dark)',
+      ).matches;
+
+      const isDark =
+        theme === 'dark' || (theme === 'both' && systemPrefersDark);
 
       const props = {
         ...context,
@@ -82,6 +87,19 @@ export const globalTypes = {
       }),
     },
   },
+  theme: {
+    name: 'Color Theme',
+    description: 'The color theme for the component',
+    defaultValue: 'both',
+    toolbar: {
+      items: [
+        { value: 'light', title: 'Light', icon: 'sun' },
+        { value: 'dark', title: 'Dark', icon: 'moon' },
+        { value: 'both', title: 'Light/Dark', icon: 'paintbrush' },
+      ],
+      dynamicTitle: true,
+    },
+  },
 };
 
 export const getNewState = (state, props) => {
@@ -104,7 +122,13 @@ const proxiedBackground = new Proxy(
 setBackgroundConnection(proxiedBackground);
 
 const metamaskDecorator = (story, context) => {
-  const isDark = useDarkMode();
+  const { theme } = context.globals;
+  const systemPrefersDark = window.matchMedia(
+    '(prefers-color-scheme: dark)',
+  ).matches;
+
+  const isDark = theme === 'dark' || (theme === 'both' && systemPrefersDark);
+
   const currentLocale = context.globals.locale;
   const current = allLocales[currentLocale];
 
@@ -146,4 +170,55 @@ const metamaskDecorator = (story, context) => {
   );
 };
 
-export const decorators = [metamaskDecorator];
+// Add the withColorScheme decorator
+const withColorScheme = (Story, context) => {
+  const { theme } = context.globals;
+  const systemPrefersDark = window.matchMedia(
+    '(prefers-color-scheme: dark)',
+  ).matches;
+
+  const isDark = theme === 'dark' || (theme === 'both' && systemPrefersDark);
+
+  function Wrapper(props) {
+    return (
+      <div
+        {...props}
+        style={{
+          display: 'flex',
+          padding: '1rem',
+          backgroundColor: 'var(--color-background-default)',
+          color: 'var(--color-text-default)',
+        }}
+      />
+    );
+  }
+
+  if (theme === 'light') {
+    return (
+      <Wrapper data-theme="light">
+        <Story />
+      </Wrapper>
+    );
+  }
+
+  if (theme === 'dark') {
+    return (
+      <Wrapper data-theme="dark">
+        <Story />
+      </Wrapper>
+    );
+  }
+
+  return (
+    <div data-theme={isDark ? 'dark' : 'light'}>
+      <Wrapper data-theme="light">
+        <Story />
+      </Wrapper>
+      <Wrapper data-theme="dark">
+        <Story />
+      </Wrapper>
+    </div>
+  );
+};
+
+export const decorators = [metamaskDecorator, withColorScheme];
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,40 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [12.2.2]
+### Fixed
+- This build was needed to fix release publishing on our master branch. It also includes the addition of the missing v12.2.0 changelog. Functionality and code is equivalent to v12.2.0.
+
+## [12.2.1]
+### Fixed
+- This build was needed to fix release publishing on our master branch. It also includes the addition of the missing v12.2.0 changelog. Functionality and code is equivalent to v12.2.0.
+
+## [12.2.0]
+### Added
+- Enabled the redesigned SIWE (Sign-In with Ethereum) signature pages ([#25660](https://github.com/MetaMask/metamask-extension/pull/25660))
+- Added support for security alerts on zkSync, Berachain, Scroll, and Metachain One networks ([#25555](https://github.com/MetaMask/metamask-extension/pull/25555))
+- Added an account mismatch warning alert to the SIWE redesign page ([#25613](https://github.com/MetaMask/metamask-extension/pull/25613))
+
+### Changed
+- Improved the display of large and small token values on the permit signature page ([#25438](https://github.com/MetaMask/metamask-extension/pull/25438))
+- Removed the modals prompting users to enable token and NFT detection ([#26403](https://github.com/MetaMask/metamask-extension/pull/26403))
+- Enabled the redesigned confirmations by default ([#25769](https://github.com/MetaMask/metamask-extension/pull/25769))
+- Improved error messaging during Ledger pairing to guide users when the device is locked or the Ethereum app is not open ([#25462](https://github.com/MetaMask/metamask-extension/pull/25462))
+
+### Fixed
+- Fixed an issue where removing non-EVM accounts was broken if there was an existing EVM dapp permission ([#25739](https://github.com/MetaMask/metamask-extension/pull/25739))
+- Fixed the issue to show the connected toast only for EVM accounts, hiding it for non-EVM accounts ([#25628](https://github.com/MetaMask/metamask-extension/pull/25628))
+- Fixed an issue where the connected account was missing on the connection page ([#25500](https://github.com/MetaMask/metamask-extension/pull/25500))
+- Fixed an issue where the account name was out of sync in the account list during the connect account flow ([#26542](https://github.com/MetaMask/metamask-extension/pull/26542))
+- Fixed the display of decimal places for token values on permit pages ([#25410](https://github.com/MetaMask/metamask-extension/pull/25410))
+- Fixed the page width for the send page in fullscreen mode ([#25639](https://github.com/MetaMask/metamask-extension/pull/25639))
+- Updated the accounts mismatch banner on the signature page to the new design ([#25626](https://github.com/MetaMask/metamask-extension/pull/25626))
+- Fixed the alignment of the install origin text in the expanded authorship view for Snaps ([#25583](https://github.com/MetaMask/metamask-extension/pull/25583))
+
+## [12.1.3]
+### Fixed
+- Fix `eth_signTypedData` error when `verifyingContract` is not provided ([#26914](https://github.com/MetaMask/metamask-extension/pull/26914))
+
 ## [12.1.2]
 ### Fixed
 - Fix Trezor signing and connecting accounts ([#26882](https://github.com/MetaMask/metamask-extension/pull/26882))
@@ -5010,7 +5044,11 @@ Update styles and spacing on the critical error page  ([#20350](https://github.c
 - Added the ability to restore accounts from seed words.
 
 
-[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v12.1.2...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v12.2.2...HEAD
+[12.2.2]: https://github.com/MetaMask/metamask-extension/compare/v12.2.1...v12.2.2
+[12.2.1]: https://github.com/MetaMask/metamask-extension/compare/v12.2.0...v12.2.1
+[12.2.0]: https://github.com/MetaMask/metamask-extension/compare/v12.1.3...v12.2.0
+[12.1.3]: https://github.com/MetaMask/metamask-extension/compare/v12.1.2...v12.1.3
 [12.1.2]: https://github.com/MetaMask/metamask-extension/compare/v12.1.1...v12.1.2
 [12.1.1]: https://github.com/MetaMask/metamask-extension/compare/v12.1.0...v12.1.1
 [12.1.0]: https://github.com/MetaMask/metamask-extension/compare/v12.0.6...v12.1.0

diff --git a/app/_locales/de/messages.json b/app/_locales/de/messages.json
diff --git a/app/_locales/el/messages.json b/app/_locales/el/messages.json
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/app/_locales/en_GB/messages.json b/app/_locales/en_GB/messages.json
diff --git a/app/_locales/es/messages.json b/app/_locales/es/messages.json
diff --git a/app/_locales/fr/messages.json b/app/_locales/fr/messages.json
diff --git a/app/_locales/hi/messages.json b/app/_locales/hi/messages.json
diff --git a/app/_locales/id/messages.json b/app/_locales/id/messages.json
diff --git a/app/_locales/ja/messages.json b/app/_locales/ja/messages.json
diff --git a/app/_locales/ko/messages.json b/app/_locales/ko/messages.json
diff --git a/app/_locales/pt/messages.json b/app/_locales/pt/messages.json
diff --git a/app/_locales/ru/messages.json b/app/_locales/ru/messages.json
diff --git a/app/_locales/tl/messages.json b/app/_locales/tl/messages.json
diff --git a/app/_locales/tr/messages.json b/app/_locales/tr/messages.json
diff --git a/app/_locales/vi/messages.json b/app/_locales/vi/messages.json
diff --git a/app/_locales/zh_CN/messages.json b/app/_locales/zh_CN/messages.json
diff --git a/app/scripts/background.js b/app/scripts/background.js
@@ -82,6 +82,8 @@ import { createOffscreen } from './offscreen';
 
 /* eslint-enable import/first */
 
+import { COOKIE_ID_MARKETING_WHITELIST_ORIGINS } from './constants/marketing-site-whitelist';
+
 // eslint-disable-next-line @metamask/design-tokens/color-no-hex
 const BADGE_COLOR_APPROVAL = '#0376C9';
 // eslint-disable-next-line @metamask/design-tokens/color-no-hex
@@ -124,6 +126,7 @@ if (inTest || process.env.METAMASK_DEBUG) {
 }
 
 const phishingPageUrl = new URL(process.env.PHISHING_WARNING_PAGE_URL);
+
 // normalized (adds a trailing slash to the end of the domain if it's missing)
 // the URL once and reuse it:
 const phishingPageHref = phishingPageUrl.toString();
@@ -883,10 +886,10 @@ export function setupController(
       senderUrl.origin === phishingPageUrl.origin &&
       senderUrl.pathname === phishingPageUrl.pathname
     ) {
-      const portStream =
+      const portStreamForPhishingPage =
         overrides?.getPortStream?.(remotePort) || new PortStream(remotePort);
       controller.setupPhishingCommunication({
-        connectionStream: portStream,
+        connectionStream: portStreamForPhishingPage,
       });
     } else {
       // this is triggered when a new tab is opened, or origin(url) is changed
@@ -906,6 +909,18 @@ export function setupController(
           }
         });
       }
+      if (
+        senderUrl &&
+        COOKIE_ID_MARKETING_WHITELIST_ORIGINS.some(
+          (origin) => origin === senderUrl.origin,
+        )
+      ) {
+        const portStreamForCookieHandlerPage =
+          overrides?.getPortStream?.(remotePort) || new PortStream(remotePort);
+        controller.setUpCookieHandlerCommunication({
+          connectionStream: portStreamForCookieHandlerPage,
+        });
+      }
       connectExternalExtension(remotePort);
     }
   };

diff --git a/app/scripts/constants/marketing-site-whitelist.ts b/app/scripts/constants/marketing-site-whitelist.ts
@@ -0,0 +1,15 @@
+export const COOKIE_ID_MARKETING_WHITELIST = [
+  'https://metamask.io',
+  'https://learn.metamask.io',
+  'https://mmi-support.zendesk.com',
+  'https://community.metamask.io',
+  'https://support.metamask.io',
+];
+
+if (process.env.IN_TEST) {
+  COOKIE_ID_MARKETING_WHITELIST.push('http://127.0.0.1:8080');
+}
+
+// Extract the origin of each URL in the whitelist
+export const COOKIE_ID_MARKETING_WHITELIST_ORIGINS =
+  COOKIE_ID_MARKETING_WHITELIST.map((url) => new URL(url).origin);