Merge branch 'develop' into jl/mmp-1033/preferences-controller-networ…

…k-meta
MetaMask · Sep 22, 2023 · aef5ebb · aef5ebb
2 parents 623a52e + f690d9a
commit aef5ebb
Show file tree

Hide file tree

Showing 11 changed files with 153 additions and 119 deletions.
diff --git a/app/background.html b/app/background.html
@@ -4,23 +4,7 @@
     <meta charset="utf-8">
   </head>
   <body>
-    <script src="./snow.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./use-snow.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./globalthis.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./sentry-install.js" type="text/javascript" charset="utf-8"></script>
-    {{@if(it.applyLavaMoat)}}
-      <script src="./runtime-lavamoat.js" type="text/javascript" charset="utf-8"></script>
-      <script src="./lockdown-more.js" type="text/javascript" charset="utf-8"></script>
-      <script src="./policy-load.js" type="text/javascript" charset="utf-8"></script>
-    {{#else}}
-      <script src="./lockdown-install.js" type="text/javascript" charset="utf-8"></script>
-      <script src="./lockdown-run.js" type="text/javascript" charset="utf-8"></script>
-      <script src="./lockdown-more.js" type="text/javascript" charset="utf-8"></script>
-      <script src="./runtime-cjs.js" type="text/javascript" charset="utf-8"></script>
-    {{/if}}
-    {{@each(it.jsBundles) => val}}
-      <script src="{{val}}" type="text/javascript" charset="utf-8"></script>
-    {{/each}}
+    <script src="./load-background.js" type="text/javascript" charset="utf-8"></script>
     <script src="./chromereload.js" type="text/javascript" charset="utf-8"></script>
   </body>
 </html>
diff --git a/app/home.html b/app/home.html
@@ -16,22 +16,6 @@
       <img class="loading-spinner" src="./images/spinner.gif" alt="" />
     </div>
     <div id="popover-content"></div>
-    <script src="./snow.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./use-snow.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./globalthis.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./sentry-install.js" type="text/javascript" charset="utf-8"></script>
-    {{@if(it.applyLavaMoat)}}
-      <script src="./runtime-lavamoat.js" type="text/javascript" charset="utf-8"></script>
-      <script src="./lockdown-more.js" type="text/javascript" charset="utf-8"></script>
-      <script src="./policy-load.js" type="text/javascript" charset="utf-8"></script>
-    {{#else}}
-      <script src="./lockdown-install.js" type="text/javascript" charset="utf-8"></script>
-      <script src="./lockdown-run.js" type="text/javascript" charset="utf-8"></script>
-      <script src="./lockdown-more.js" type="text/javascript" charset="utf-8"></script>
-      <script src="./runtime-cjs.js" type="text/javascript" charset="utf-8"></script>
-    {{/if}}
-    {{@each(it.jsBundles) => val}}
-      <script src="{{val}}" type="text/javascript" charset="utf-8"></script>
-    {{/each}}
+    <script src="./load-app.js" type="text/javascript" charset="utf-8"></script>
   </body>
 </html>
diff --git a/app/notification.html b/app/notification.html
@@ -36,22 +36,6 @@
       <img id="loading__spinner" src="./images/spinner.gif" alt="" />
     </div>
     <div id="popover-content"></div>
-    <script src="./snow.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./use-snow.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./globalthis.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./sentry-install.js" type="text/javascript" charset="utf-8"></script>
-    {{@if(it.applyLavaMoat)}}
-      <script src="./runtime-lavamoat.js" type="text/javascript" charset="utf-8"></script>
-      <script src="./lockdown-more.js" type="text/javascript" charset="utf-8"></script>
-      <script src="./policy-load.js" type="text/javascript" charset="utf-8"></script>
-    {{#else}}
-      <script src="./lockdown-install.js" type="text/javascript" charset="utf-8"></script>
-      <script src="./lockdown-run.js" type="text/javascript" charset="utf-8"></script>
-      <script src="./lockdown-more.js" type="text/javascript" charset="utf-8"></script>
-      <script src="./runtime-cjs.js" type="text/javascript" charset="utf-8"></script>
-    {{/if}}
-    {{@each(it.jsBundles) => val}}
-      <script src="{{val}}" type="text/javascript" charset="utf-8"></script>
-    {{/each}}
+    <script src="./load-app.js" type="text/javascript" charset="utf-8"></script>
   </body>
 </html>
diff --git a/app/popup.html b/app/popup.html
@@ -13,22 +13,6 @@
       <img class="loading-spinner" src="./images/spinner.gif" alt="" />
     </div>
     <div id="popover-content"></div>
-    <script src="./snow.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./use-snow.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./globalthis.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./sentry-install.js" type="text/javascript" charset="utf-8"></script>
-    {{@if(it.applyLavaMoat)}}
-      <script src="./runtime-lavamoat.js" type="text/javascript" charset="utf-8"></script>
-      <script src="./lockdown-more.js" type="text/javascript" charset="utf-8"></script>
-      <script src="./policy-load.js" type="text/javascript" charset="utf-8"></script>
-    {{#else}}
-      <script src="./lockdown-install.js" type="text/javascript" charset="utf-8"></script>
-      <script src="./lockdown-run.js" type="text/javascript" charset="utf-8"></script>
-      <script src="./lockdown-more.js" type="text/javascript" charset="utf-8"></script>
-      <script src="./runtime-cjs.js" type="text/javascript" charset="utf-8"></script>
-    {{/if}}
-    {{@each(it.jsBundles) => val}}
-      <script src="{{val}}" type="text/javascript" charset="utf-8"></script>
-    {{/each}}
+    <script src="./load-app.js" type="text/javascript" charset="utf-8"></script>
   </body>
 </html>
diff --git a/app/scripts/load-app.js b/app/scripts/load-app.js
@@ -0,0 +1,28 @@
+// eslint-disable-next-line import/unambiguous
+'use strict';
+
+setTimeout(() => {
+  // eslint-disable-next-line spaced-comment
+  const scriptsToLoad = [
+    /* SCRIPTS */
+  ];
+
+  const loadScript = (src) => {
+    const script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.async = true;
+    script.onload = loadNext;
+    script.src = src;
+    document.body.appendChild(script);
+  };
+
+  loadNext();
+
+  function loadNext() {
+    if (scriptsToLoad.length) {
+      loadScript(scriptsToLoad.shift());
+    } else {
+      document.documentElement.classList.add('metamask-loaded');
+    }
+  }
+}, 0);
diff --git a/development/build/scripts.js b/development/build/scripts.js
@@ -714,26 +714,27 @@ function createFactoredBuild({
           case 'ui': {
             renderHtmlFile({
               htmlName: 'popup',
-              groupSet,
-              commonSet,
               browserPlatforms,
               applyLavaMoat,
             });
             renderHtmlFile({
               htmlName: 'notification',
-              groupSet,
-              commonSet,
               browserPlatforms,
               applyLavaMoat,
               isMMI: buildType === 'mmi',
             });
             renderHtmlFile({
               htmlName: 'home',
+              browserPlatforms,
+              applyLavaMoat,
+              isMMI: buildType === 'mmi',
+            });
+            renderJavaScriptLoader({
               groupSet,
               commonSet,
               browserPlatforms,
               applyLavaMoat,
-              isMMI: buildType === 'mmi',
+              destinationFileName: 'load-app.js',
             });
             break;
           }
@@ -745,6 +746,13 @@ function createFactoredBuild({
               browserPlatforms,
               applyLavaMoat,
             });
+            renderJavaScriptLoader({
+              groupSet,
+              commonSet,
+              browserPlatforms,
+              applyLavaMoat,
+              destinationFileName: 'load-background.js',
+            });
             if (process.env.ENABLE_MV3) {
               const jsBundles = [
                 ...commonSet.values(),
@@ -1210,29 +1218,65 @@ async function setEnvironmentVariables({
   });
 }
 
-function renderHtmlFile({
-  htmlName,
+function renderJavaScriptLoader({
   groupSet,
   commonSet,
   browserPlatforms,
   applyLavaMoat,
-  isMMI,
+  destinationFileName,
 }) {
   if (applyLavaMoat === undefined) {
     throw new Error(
       'build/scripts/renderHtmlFile - must specify "applyLavaMoat" option',
     );
   }
-  const htmlFilePath = `./app/${htmlName}.html`;
-  const htmlTemplate = readFileSync(htmlFilePath, 'utf8');
+
   const jsBundles = [...commonSet.values(), ...groupSet.values()].map(
     (label) => `./${label}.js`,
   );
-  const htmlOutput = Sqrl.render(htmlTemplate, {
-    jsBundles,
-    applyLavaMoat,
-    isMMI,
+
+  const securityScripts = applyLavaMoat
+    ? ['./runtime-lavamoat.js', './lockdown-more.js', './policy-load.js']
+    : [
+        './lockdown-install.js',
+        './lockdown-run.js',
+        './lockdown-more.js',
+        './runtime-cjs.js',
+      ];
+
+  const requiredScripts = [
+    './snow.js',
+    './use-snow.js',
+    './globalthis.js',
+    './sentry-install.js',
+    ...securityScripts,
+    ...jsBundles,
+  ];
+
+  browserPlatforms.forEach((platform) => {
+    const appLoadFilePath = './app/scripts/load-app.js';
+    const appLoadContents = readFileSync(appLoadFilePath, 'utf8');
+
+    const scriptDest = `./dist/${platform}/${destinationFileName}`;
+    const scriptOutput = appLoadContents.replace(
+      '/* SCRIPTS */',
+      `...${JSON.stringify(requiredScripts)}`,
+    );
+
+    writeFileSync(scriptDest, scriptOutput);
   });
+}
+
+function renderHtmlFile({ htmlName, browserPlatforms, applyLavaMoat, isMMI }) {
+  if (applyLavaMoat === undefined) {
+    throw new Error(
+      'build/scripts/renderHtmlFile - must specify "applyLavaMoat" option',
+    );
+  }
+  const htmlFilePath = `./app/${htmlName}.html`;
+  const htmlTemplate = readFileSync(htmlFilePath, 'utf8');
+
+  const htmlOutput = Sqrl.render(htmlTemplate, { isMMI });
   browserPlatforms.forEach((platform) => {
     const dest = `./dist/${platform}/${htmlName}.html`;
     // we dont have a way of creating async events atm

diff --git a/development/build/static.js b/development/build/static.js
@@ -178,6 +178,10 @@ function getCopyTargets(
       src: './app/scripts/init-globals.js',
       dest: 'init-globals.js',
     },
+    {
+      src: './app/scripts/load-app.js',
+      dest: 'load-app.js',
+    },
     {
       src: shouldIncludeLockdown
         ? `./app/scripts/lockdown-run.js`

diff --git a/test/e2e/webdriver/driver.js b/test/e2e/webdriver/driver.js
@@ -350,7 +350,13 @@ class Driver {
   // Navigation
 
   async navigate(page = Driver.PAGES.HOME) {
-    return await this.driver.get(`${this.extensionUrl}/${page}.html`);
+    const response = await this.driver.get(`${this.extensionUrl}/${page}.html`);
+    // Wait for asyncronous JavaScript to load
+    await this.driver.wait(
+      until.elementLocated(this.buildLocator('.metamask-loaded')),
+      10 * 1000,
+    );
+    return response;
   }
 
   async getCurrentUrl() {

diff --git a/test/scenarios/3. transactions/cancel transaction.csv b/test/scenarios/3. transactions/cancel transaction.csv
@@ -19,12 +19,11 @@ The total amount is shown.",
 The recipient's hexadecimal address is shown in the activity list item.
 The amount is shown in the activity list item.",
 11,Cancel the transaction.,,"The transaction appears in the activity list.
-The recipient's hexadecimal address is shown in the activity list item.
 The amount is shown in the activity list item.",
 12,Wait for the transaction to complete.,,Another activity item appears.,Two activity items; Send and Receive.
 13,Open the Send activity list item.,,"The updated gas fees are shown in the item details.
 The transaction status, recipient's address, nonce, amount, gas and total are shown in the item details.",
 14,Expand the Activity log.,,"The created, submitted, cancel attempt and cancelled activity is shown in the activity log.",
 15,Proceed to view the transaction on the block explorer.,,The block explorer opens in a new tab.,
 16,Open the Receive activity list item.,,"The transaction status, recipient's address, nonce, amount, gas and total are shown in the item details.",
-17,Proceed to view the transaction on the block explorer.,,The block explorer opens in a new tab.,
+17,Proceed to view the transaction on the block explorer.,,The block explorer opens in a new tab.,
diff --git a/ui/components/multichain/global-menu/global-menu.js b/ui/components/multichain/global-menu/global-menu.js
@@ -46,6 +46,7 @@ import {
   getSelectedAddress,
   getUnapprovedTransactions,
   ///: BEGIN:ONLY_INCLUDE_IN(snaps)
+  getNotifySnaps,
   getUnreadNotificationsCount,
   ///: END:ONLY_INCLUDE_IN
 } from '../../../selectors';
@@ -72,6 +73,10 @@ export const GlobalMenu = ({ closeMenu, anchorElement }) => {
   const address = useSelector(getSelectedAddress);
   const unapprovedTransactons = useSelector(getUnapprovedTransactions);
 
+  ///: BEGIN:ONLY_INCLUDE_IN(snaps)
+  const notifySnaps = useSelector(getNotifySnaps);
+  ///: END:ONLY_INCLUDE_IN
+
   const hasUnapprovedTransactions =
     Object.keys(unapprovedTransactons).length > 0;
 
@@ -167,40 +172,42 @@ export const GlobalMenu = ({ closeMenu, anchorElement }) => {
       )}
       {
         ///: BEGIN:ONLY_INCLUDE_IN(snaps)
-        <>
-          <MenuItem
-            iconName={IconName.Notification}
-            onClick={() => {
-              closeMenu();
-              history.push(NOTIFICATIONS_ROUTE);
-            }}
-          >
-            {t('notifications')}
-            {unreadNotificationsCount > 0 && (
-              <Text
-                as="span"
-                display={Display.InlineBlock}
-                justifyContent={JustifyContent.center}
-                alignItems={AlignItems.center}
-                backgroundColor={BackgroundColor.primaryDefault}
-                color={TextColor.primaryInverse}
-                padding={[0, 1, 0, 1]}
-                variant={TextVariant.bodyXs}
-                textAlign={TextAlign.Center}
-                data-testid="global-menu-notification-count"
-                style={{
-                  borderRadius: '16px',
-                  minWidth: '24px',
-                }}
-                marginInlineStart={2}
-              >
-                {unreadNotificationsCount > 99
-                  ? '99+'
-                  : unreadNotificationsCount}
-              </Text>
-            )}
-          </MenuItem>
-        </>
+        notifySnaps.length ? (
+          <>
+            <MenuItem
+              iconName={IconName.Notification}
+              onClick={() => {
+                closeMenu();
+                history.push(NOTIFICATIONS_ROUTE);
+              }}
+            >
+              {t('notifications')}
+              {unreadNotificationsCount > 0 && (
+                <Text
+                  as="span"
+                  display={Display.InlineBlock}
+                  justifyContent={JustifyContent.center}
+                  alignItems={AlignItems.center}
+                  backgroundColor={BackgroundColor.primaryDefault}
+                  color={TextColor.primaryInverse}
+                  padding={[0, 1, 0, 1]}
+                  variant={TextVariant.bodyXs}
+                  textAlign={TextAlign.Center}
+                  data-testid="global-menu-notification-count"
+                  style={{
+                    borderRadius: '16px',
+                    minWidth: '24px',
+                  }}
+                  marginInlineStart={2}
+                >
+                  {unreadNotificationsCount > 99
+                    ? '99+'
+                    : unreadNotificationsCount}
+                </Text>
+              )}
+            </MenuItem>
+          </>
+        ) : null
         ///: END:ONLY_INCLUDE_IN(snaps)
       }
       <MenuItem