Merge branch 'develop' into issue/replacing-dep-constants

.github/workflows/update-lavamoat-policies.yml

@@ -48,6 +48,8 @@ jobs:
     needs: is-fork-pull-request
     # Early exit if this is a fork, since later steps are skipped for forks
     if: ${{ needs.is-fork-pull-request.outputs.IS_FORK == 'false' }}
+    outputs:
+      COMMIT_SHA: ${{ steps.commit-sha.outputs.COMMIT_SHA }}
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3
@@ -63,6 +65,9 @@ jobs:
           cache: 'yarn'
       - name: Install Yarn dependencies
         run: yarn --immutable
+      - name: Get commit SHA
+        id: commit-sha
+        run: echo "COMMIT_SHA=$(git rev-parse --short HEAD)" >> "$GITHUB_OUTPUT"
 
   update-lavamoat-build-policy:
     name: Update LavaMoat build policy
@@ -90,7 +95,7 @@ jobs:
         uses: actions/cache/save@v3
         with:
           path: lavamoat/build-system
-          key: cache-build-${{ github.run_id }}-${{ github.run_attempt }}
+          key: cache-build-${{ needs.prepare.outputs.COMMIT_SHA }}
 
   update-lavamoat-webapp-policy:
     strategy:
@@ -125,12 +130,13 @@ jobs:
         uses: actions/cache/save@v3
         with:
           path: lavamoat/browserify/${{ matrix.build-type }}
-          key: cache-${{ matrix.build-type }}-${{ github.run_id }}-${{ github.run_attempt }}
+          key: cache-${{ matrix.build-type }}-${{ needs.prepare.outputs.COMMIT_SHA }}
 
   commit-updated-policies:
     name: Commit the updated LavaMoat policies
     runs-on: ubuntu-latest
     needs:
+      - prepare
       - is-fork-pull-request
       - update-lavamoat-build-policy
       - update-lavamoat-webapp-policy
@@ -147,11 +153,14 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.LAVAMOAT_UPDATE_TOKEN }}
           PR_NUMBER: ${{ github.event.issue.number }}
+      - name: Get commit SHA
+        id: commit-sha
+        run: echo "COMMIT_SHA=$(git rev-parse --short HEAD)" >> "$GITHUB_OUTPUT"
       - name: Restore build policy
         uses: actions/cache/restore@v3
         with:
           path: lavamoat/build-system
-          key: cache-build-${{ github.run_id }}-${{ github.run_attempt }}
+          key: cache-build-${{ needs.prepare.outputs.COMMIT_SHA }}
           fail-on-cache-miss: true
       # One restore step per build type: [main, beta, flask, mmi, desktop]
       # Ensure this is synchronized with the list above in the "update-lavamoat-webapp-policy" job
@@ -160,31 +169,31 @@ jobs:
         uses: actions/cache/restore@v3
         with:
           path: lavamoat/browserify/main
-          key: cache-main-${{ github.run_id }}-${{ github.run_attempt }}
+          key: cache-main-${{ needs.prepare.outputs.COMMIT_SHA }}
           fail-on-cache-miss: true
       - name: Restore beta application policy
         uses: actions/cache/restore@v3
         with:
           path: lavamoat/browserify/beta
-          key: cache-beta-${{ github.run_id }}-${{ github.run_attempt }}
+          key: cache-beta-${{ needs.prepare.outputs.COMMIT_SHA }}
           fail-on-cache-miss: true
       - name: Restore flask application policy
         uses: actions/cache/restore@v3
         with:
           path: lavamoat/browserify/flask
-          key: cache-flask-${{ github.run_id }}-${{ github.run_attempt }}
+          key: cache-flask-${{ needs.prepare.outputs.COMMIT_SHA }}
           fail-on-cache-miss: true
       - name: Restore mmi application policy
         uses: actions/cache/restore@v3
         with:
           path: lavamoat/browserify/mmi
-          key: cache-mmi-${{ github.run_id }}-${{ github.run_attempt }}
+          key: cache-mmi-${{ needs.prepare.outputs.COMMIT_SHA }}
           fail-on-cache-miss: true
       - name: Restore desktop application policy
         uses: actions/cache/restore@v3
         with:
           path: lavamoat/browserify/desktop
-          key: cache-desktop-${{ github.run_id }}-${{ github.run_attempt }}
+          key: cache-desktop-${{ needs.prepare.outputs.COMMIT_SHA }}
           fail-on-cache-miss: true
       - name: Check whether there are policy changes
         id: policy-changes
@@ -214,3 +223,37 @@ jobs:
           HAS_CHANGES: ${{ steps.policy-changes.outputs.HAS_CHANGES }}
           GITHUB_TOKEN: ${{ secrets.LAVAMOAT_UPDATE_TOKEN }}
           PR_NUMBER: ${{ github.event.issue.number }}
+
+  check-status:
+    name: Check whether the policy update succeeded
+    runs-on: ubuntu-latest
+    needs:
+      - commit-updated-policies
+    outputs:
+      PASSED: ${{ steps.set-output.outputs.PASSED }}
+    steps:
+      - name: Set PASSED output
+        id: set-output
+        run: echo "PASSED=true" >> "$GITHUB_OUTPUT"
+
+  failure-comment:
+    name: Comment about the policy update failure
+    if: ${{ always() && needs.is-fork-pull-request.outputs.IS_FORK == 'false' }}
+    runs-on: ubuntu-latest
+    needs:
+      - is-fork-pull-request
+      - check-status
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          token: ${{ secrets.LAVAMOAT_UPDATE_TOKEN }}
+      - name: Post comment if the update failed
+        run: |
+          passed="${{ needs.check-status.outputs.PASSED }}"
+          if [[ $passed != "true" ]]; then
+            gh pr comment "${PR_NUMBER}" --body "Policy update failed. You can [review the logs or retry the policy update here](${ACTION_RUN_URL})"
+          fi
+        env:
+          GITHUB_TOKEN: ${{ secrets.LAVAMOAT_UPDATE_TOKEN }}
+          PR_NUMBER: ${{ github.event.issue.number }}
+          ACTION_RUN_URL: "${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}"

.storybook/3.COLORS.stories.mdx

@@ -50,7 +50,13 @@ Theme colors are color agnostic, semantically neutral and theme compatible desig
 ```css
 /** Backgrounds */
 var(--color-background-default)
+var(--color-background-default-hover)
+var(--color-background-default-pressed)
 var(--color-background-alternative)
+var(--color-background-alternative-hover)
+var(--color-background-alternative-pressed)
+var(--color-background-hover)
+var(--color-background-pressed)
 
 /** Text */
 var(--color-text-default)

CHANGELOG.md

@@ -6,6 +6,52 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [10.33.0]
+### Added
+- UI Upgrade ([#18903](https://github.com/MetaMask/metamask-extension/pull/18903))
+    - A completely new application header, which contains:
+        - A new network picker, which displays as only an avatar in the popup and as a full dropdown in full screen mode
+        - A new account picker
+        - A new connected icon which displays in popup mode
+        - A new global menu which contains controls that were formally in the account menu as well as account options menu
+    - A new token list
+    - A new token details popover
+- Added the ability to navigate multiple SIWE notifications ([#18103](https://github.com/MetaMask/metamask-extension/pull/18103))
+- Add portfolio button in on home screen, under the balance([#19601](https://github.com/MetaMask/metamask-extension/pull/19601))
+- Add support for ERC721 and ERC1155 tokens to `wallet_watchAsset` API ([#19454](https://github.com/MetaMask/metamask-extension/pull/19454))
+- Add support for Cronos, Moonbeam, Moonriver, Aurora, Harmony and Palm to the 'Buy Crypto' feature ([#19268](https://github.com/MetaMask/metamask-extension/pull/19268))
+- [FLASK] Add Snaps privacy warning on snap install ([#18835](https://github.com/MetaMask/metamask-extension/pull/18835))
+
+### Changed
+- Redesign swaps feature to be faster and easier to use ([#19169](https://github.com/MetaMask/metamask-extension/pull/19169))
+- Update linea testnet rpc url ([#19294](https://github.com/MetaMask/metamask-extension/pull/19294))
+- Make `eth_accounts` return all permitted accounts ([#18516](https://github.com/MetaMask/metamask-extension/pull/18516))
+- When gas fees suggested by dapp is too high, show warning color and icon ([#19088](https://github.com/MetaMask/metamask-extension/pull/19088))
+- Show balance and selected account in the header on the SIWE screen ([#19361](https://github.com/MetaMask/metamask-extension/pull/19361))
+- Submit the account creation form when pressing enter ([#19620](https://github.com/MetaMask/metamask-extension/pull/19620))
+- [FLASK] Rework Snaps headers and footers ([#19442](https://github.com/MetaMask/metamask-extension/pull/19442))
+- Send flow UI update ([#19465](https://github.com/MetaMask/metamask-extension/pull/19465))
+    - Remove Recents
+    - Display a list of "Your accounts" if the user has more than one account
+    - Display "Contacts" in alphabetical order after the final user's account
+    - UI Updates in Contacts Page (AddressBook) in Settings Page
+- [FLASK] Small UI improvements ([#19388](https://github.com/MetaMask/metamask-extension/pull/19388))
+- [FLASK] Limit notification count display to 99+ ([#19449](https://github.com/MetaMask/metamask-extension/pull/19449))
+- [FLASK] Update snap tweaks ([#19410](https://github.com/MetaMask/metamask-extension/pull/19410))
+- [FLASK] Add snap icon SVG validation ([#19377](https://github.com/MetaMask/metamask-extension/pull/19377))
+- [FLASK] Update rate limits for showInAppNotification and showNativeNotification ([#19621](https://github.com/MetaMask/metamask-extension/pull/19621))
+- [FLASK] Align update error state with Figma ([#19547](https://github.com/MetaMask/metamask-extension/pull/19547))
+- [FLASK] Update snap installation permission warning UI ([#19494](https://github.com/MetaMask/metamask-extension/pull/19494))
+- [FLASK] Improve snaps connect flow ([#19461](https://github.com/MetaMask/metamask-extension/pull/19461))
+
+### Fixed
+- Fix centering and spacing of icons in the Add Network screen ([#19513](https://github.com/MetaMask/metamask-extension/pull/19513))
+- Fix details when transferring NFT not added to wallet ([#19045](https://github.com/MetaMask/metamask-extension/pull/19045))
+- Fix capitalization of MetaMask in some translations ([#19466](https://github.com/MetaMask/metamask-extension/pull/19466))
+- Fix space occurring after footer on token approve screen ([#19276](https://github.com/MetaMask/metamask-extension/pull/19276))
+- Fix unknown processing time not showing in warning color on confirmation screens ([#19527](https://github.com/MetaMask/metamask-extension/pull/19527))
+
+
 ## [10.32.0]
 ### Added
 - Enable token detection for the Aurora network ([#19009](https://github.com/MetaMask/metamask-extension/pull/19009))
@@ -3779,7 +3825,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Uncategorized
 - Added the ability to restore accounts from seed words.
 
-[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v10.32.0...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v10.33.0...HEAD
+[10.33.0]: https://github.com/MetaMask/metamask-extension/compare/v10.32.0...v10.33.0
 [10.32.0]: https://github.com/MetaMask/metamask-extension/compare/v10.31.1...v10.32.0
 [10.31.1]: https://github.com/MetaMask/metamask-extension/compare/v10.31.0...v10.31.1
 [10.31.0]: https://github.com/MetaMask/metamask-extension/compare/v10.30.4...v10.31.0

app/notification.html

@@ -4,6 +4,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="utf-8">
     <title>MetaMask Notification</title>
+    {{@if(it.isMMI)}}
+    <title>MetaMask Institutional</title>
+    {{/if}}
     <style>
       #app-content {
         display: flex;

app/scripts/controllers/metametrics.js

@@ -435,7 +435,10 @@ export default class MetaMetricsController {
       this.clearEventsAfterMetricsOptIn();
     }
 
+    ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask)
     this.updateExtensionUninstallUrl(participateInMetaMetrics, metaMetricsId);
+    ///: END:ONLY_INCLUDE_IN
+
     return metaMetricsId;
   }
 

development/build/scripts.js

@@ -725,6 +725,7 @@ function createFactoredBuild({
               commonSet,
               browserPlatforms,
               applyLavaMoat,
+              isMMI: buildType === 'mmi',
             });
             renderHtmlFile({
               htmlName: 'home',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "metamask-crx",
-  "version": "10.32.0",
+  "version": "10.33.0",
   "private": true,
   "repository": {
     "type": "git",
@@ -230,7 +230,7 @@
     "@metamask/browser-passworder": "^4.1.0",
     "@metamask/contract-metadata": "^2.3.1",
     "@metamask/controller-utils": "^4.0.1",
-    "@metamask/design-tokens": "^1.9.0",
+    "@metamask/design-tokens": "^1.12.0",
     "@metamask/desktop": "^0.3.0",
     "@metamask/eth-json-rpc-middleware": "^11.0.0",
     "@metamask/eth-keyring-controller": "^10.0.1",

ui/components/app/hold-to-reveal-button/hold-to-reveal-button.js

@@ -2,11 +2,9 @@ import React, { useCallback, useContext, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { I18nContext } from '../../../contexts/i18n';
-import { Button } from '../../component-library';
-import Box from '../../ui/box';
 import {
   AlignItems,
-  DISPLAY,
+  Display,
   JustifyContent,
 } from '../../../helpers/constants/design-system';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
@@ -15,6 +13,7 @@ import {
   MetaMetricsEventKeyType,
   MetaMetricsEventName,
 } from '../../../../shared/constants/metametrics';
+import { Button, Box } from '../../component-library';
 
 const radius = 14;
 const strokeWidth = 2;
@@ -131,7 +130,7 @@ export default function HoldToRevealButton({ buttonText, onLongPressed }) {
           </svg>
         </Box>
         <Box
-          display={DISPLAY.FLEX}
+          display={Display.Flex}
           alignItems={AlignItems.center}
           justifyContent={JustifyContent.center}
           className="hold-to-reveal-button__lock-icon-container"
@@ -197,10 +196,10 @@ export default function HoldToRevealButton({ buttonText, onLongPressed }) {
 
   return (
     <Button
-      onMouseDown={onMouseDown}
-      onMouseUp={onMouseUp}
+      onPointerDown={onMouseDown} // allows for touch and mouse events
+      onPointerUp={onMouseUp} // allows for touch and mouse events
       className="hold-to-reveal-button__button-hold"
-      textProps={{ display: DISPLAY.FLEX, alignItems: AlignItems.center }}
+      textProps={{ display: Display.Flex, alignItems: AlignItems.center }}
     >
       <Box className="hold-to-reveal-button__icon-container" marginRight={2}>
         {renderPreCompleteContent()}

ui/components/app/hold-to-reveal-button/hold-to-reveal-button.test.js

@@ -86,7 +86,7 @@ describe('HoldToRevealButton', () => {
 
     const button = getByText('Hold to reveal SRP');
 
-    fireEvent.mouseDown(button);
+    fireEvent.pointerDown(button);
 
     const circleLocked = getByLabelText('hold to reveal circle locked');
     fireEvent.transitionEnd(circleLocked);

ui/components/app/modals/export-private-key-modal/export-private-key-modal.component.test.js

@@ -114,7 +114,7 @@ describe('Export Private Key Modal', () => {
     const holdButton = getByText('Hold to reveal Private Key');
     expect(holdButton).toBeInTheDocument();
 
-    fireEvent.mouseDown(holdButton);
+    fireEvent.pointerDown(holdButton);
 
     const circle = getByLabelText('hold to reveal circle locked');
     fireEvent.transitionEnd(circle);

ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.test.js

@@ -67,7 +67,7 @@ describe('Hold to Reveal Modal', () => {
 
     expect(holdButton).toBeDefined();
 
-    fireEvent.mouseUp(holdButton);
+    fireEvent.pointerUp(holdButton);
 
     expect(holdButton).toBeDefined();
   });
@@ -84,15 +84,15 @@ describe('Hold to Reveal Modal', () => {
     const holdButton = getByText('Hold to reveal SRP');
     const circleLocked = queryByLabelText('hold to reveal circle locked');
 
-    fireEvent.mouseDown(holdButton);
+    fireEvent.pointerDown(holdButton);
     fireEvent.transitionEnd(circleLocked);
 
     const circleUnlocked = queryByLabelText('hold to reveal circle unlocked');
     fireEvent.animationEnd(circleUnlocked);
 
     await waitFor(() => {
       expect(holdButton.firstChild).toHaveClass(
-        'box hold-to-reveal-button__icon-container box--flex-direction-row',
+        'hold-to-reveal-button__icon-container',
       );
       expect(onLongPressStub).toHaveBeenCalled();
     });
@@ -164,15 +164,15 @@ describe('Hold to Reveal Modal', () => {
     const holdButton = getByText('Hold to reveal SRP');
     const circleLocked = queryByLabelText('hold to reveal circle locked');
 
-    fireEvent.mouseDown(holdButton);
+    fireEvent.pointerDown(holdButton);
     fireEvent.transitionEnd(circleLocked);
 
     const circleUnlocked = queryByLabelText('hold to reveal circle unlocked');
     fireEvent.animationEnd(circleUnlocked);
 
     await waitFor(() => {
       expect(holdButton.firstChild).toHaveClass(
-        'box hold-to-reveal-button__icon-container box--flex-direction-row',
+        'hold-to-reveal-button__icon-container',
       );
       expect(onLongPressStub).toHaveBeenCalled();
       expect(hideModalStub).not.toHaveBeenCalled();

ui/components/component-library/button-base/button-base.js

@@ -8,7 +8,7 @@ import { Text } from '../text';
 
 import {
   AlignItems,
-  DISPLAY,
+  Display,
   JustifyContent,
   TextColor,
   TextVariant,
@@ -65,7 +65,7 @@ export const ButtonBase = ({
         className,
       )}
       disabled={disabled}
-      display={DISPLAY.INLINE_FLEX}
+      display={Display.InlineFlex}
       justifyContent={JustifyContent.center}
       alignItems={AlignItems.center}
       borderRadius={BorderRadius.pill}