Merge branch 'develop' into fix/27046-asset-picker-symbol-theme

.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];

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);
     }
   };

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);

app/scripts/constants/sentry-state.ts

@@ -158,6 +158,7 @@ export const SENTRY_BACKGROUND_STATE = {
     segmentApiCalls: false,
     traits: false,
     dataCollectionForMarketing: false,
+    marketingCampaignCookieId: true,
   },
   NameController: {
     names: false,

app/scripts/constants/stream.ts

@@ -0,0 +1,17 @@
+// contexts
+export const CONTENT_SCRIPT = 'metamask-contentscript';
+export const METAMASK_INPAGE = 'metamask-inpage';
+
+// stream channels
+export const METAMASK_PROVIDER = 'metamask-provider';
+export const METAMASK_COOKIE_HANDLER = 'metamask-cookie-handler';
+export const PHISHING_SAFELIST = 'metamask-phishing-safelist';
+export const PHISHING_STREAM = 'phishing';
+
+// For more information about these legacy streams, see here:
+// https://github.com/MetaMask/metamask-extension/issues/15491
+// TODO:LegacyProvider: Delete
+export const LEGACY_CONTENT_SCRIPT = 'contentscript';
+export const LEGACY_INPAGE = 'inpage';
+export const LEGACY_PROVIDER = 'provider';
+export const LEGACY_PUBLIC_CONFIG = 'publicConfig';