Merge remote-tracking branch 'origin/develop' into master-sync

2024-11-22 18:00:18 +01:00 · 2021-11-22 12:34:10 -03:30 · 2021-11-22 12:34:10 -03:30 · 74719a8102
commit 74719a8102
parent f3ade11c74 994a7d5458
165 changed files with 14035 additions and 941 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@ -12,7 +12,7 @@ executors:
      NODE_OPTIONS: --max_old_space_size=2048
  shellcheck:
    docker:
-      - image: koalaman/shellcheck-alpine@sha256:35882cba254810c7de458528011e935ba2c4f3ebcb224275dfa7ebfa930ef294
+      - image: koalaman/shellcheck-alpine@sha256:dfaf08fab58c158549d3be64fb101c626abc5f16f341b569092577ae207db199

 workflows:
  test_and_release:
@ -25,7 +25,9 @@ workflows:
              only:
                - /^Version-v(\d+)[.](\d+)[.](\d+)/
      - prep-deps
-      - test-deps-audit
+      - test-deps-audit:
+          requires:
+            - prep-deps
      - test-deps-depcheck:
          requires:
            - prep-deps
--- a/.circleci/scripts/yarn-audit.sh
+++ b/.circleci/scripts/yarn-audit.sh
@ -1,6 +1,8 @@
 #!/usr/bin/env bash

+set -e
 set -u
+set -x
 set -o pipefail

 # use `improved-yarn-audit` since that allows for exclude
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql-analysis.yml
@ -0,0 +1,70 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ develop, Version-v*, cla-signatures, master, snaps ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ develop ]
+  schedule:
+    - cron: '28 12 * * 0'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        # Learn more about CodeQL language support at https://git.io/codeql-language-support
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v1
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1
--- a/.prettierignore
+++ b/.prettierignore
@ -1,5 +1,5 @@
 node_modules/**
-lavamoat/*/policy.json
+lavamoat/**/policy.json
 dist/**
 builds/**
 test-*/**
--- a/README.md
+++ b/README.md
@ -67,9 +67,17 @@ Whenever you change dependencies (adding, removing, or updating, either in `pack
 * The `allow-scripts` configuration in `package.json`
  * Run `yarn allow-scripts auto` to update the `allow-scripts` configuration automatically. This config determines whether the package's install/postinstall scripts are allowed to run. Review each new package to determine whether the install script needs to run or not, testing if necessary.
  * Unfortunately, `yarn allow-scripts auto` will behave inconsistently on different platforms. macOS and Windows users may see extraneous changes relating to optional dependencies.
-* The LavaMoat auto-generated policy in `lavamoat/node/policy.json`
-  * Run `yarn lavamoat:auto` to re-generate this policy file. Review the changes to determine whether the access granted to each package seems appropriate.
-  * Unfortunately, `yarn lavamoat:auto` will behave inconsistently on different platforms. macOS and Windows users may see extraneous changes relating to optional dependencies.
+* The LavaMoat policy files. The _tl;dr_ is to run `yarn lavamoat:auto` to update these files, but there can be devils in the details. Continue reading for more information.
+  * There are two sets of LavaMoat policy files:
+    * The production LavaMoat policy files (`lavamoat/browserify/*/policy.json`), which are re-generated using `yarn lavamoat:background:auto`.
+      * These should be regenerated whenever the production dependencies for the background change.
+    * The build system LavaMoat policy file (`lavamoat/build-system/policy.json`), which is re-generated using `yarn lavamoat:build:auto`.
+      * This should be regenerated whenever the dependencies used by the build system itself change.
+  * Whenever you regenerate a policy file, review the changes to determine whether the access granted to each package seems appropriate.
+  * Unfortunately, `yarn lavamoat:auto` will behave inconsistently on different platforms.
+  macOS and Windows users may see extraneous changes relating to optional dependencies.
+  * Keep in mind that any kind of dynamic import or dynamic use of globals may elude LavaMoat's static analysis.
+  Refer to the LavaMoat documentation or ask for help if you run into any issues.

 ## Architecture

--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@ -43,9 +43,15 @@
  "activityLog": {
    "message": "activity log"
  },
+  "add": {
+    "message": "Add"
+  },
  "addANetwork": {
    "message": "Add a network"
  },
+  "addANickname": {
+    "message": "Add a nickname"
+  },
  "addAcquiredTokens": {
    "message": "Add the tokens you've acquired using MetaMask"
  },
@ -82,6 +88,9 @@
  "addFriendsAndAddresses": {
    "message": "Add friends and addresses you trust"
  },
+  "addMemo": {
+    "message": "Add memo"
+  },
  "addNFT": {
    "message": "Add NFT"
  },
@ -100,6 +109,9 @@
  "addToken": {
    "message": "Add Token"
  },
+  "address": {
+    "message": "Address"
+  },
  "addressBookIcon": {
    "message": "Address book icon"
  },
@ -167,6 +179,14 @@
    "message": "MetaMask",
    "description": "The name of the application"
  },
+  "appNameBeta": {
+    "message": "MetaMask Beta",
+    "description": "The name of the application (Beta)"
+  },
+  "appNameFlask": {
+    "message": "MetaMask Flask",
+    "description": "The name of the application (Flask)"
+  },
  "approvalAndAggregatorTxFeeCost": {
    "message": "Approval and aggregator network fee"
  },
@ -549,6 +569,9 @@
  "currentlyUnavailable": {
    "message": "Unavailable on this network"
  },
+  "custom": {
+    "message": "Advanced"
+  },
  "customGas": {
    "message": "Customize Gas"
  },
@ -561,6 +584,16 @@
  "customToken": {
    "message": "Custom Token"
  },
+  "dappSuggested": {
+    "message": "Site suggested"
+  },
+  "dappSuggestedShortLabel": {
+    "message": "Site"
+  },
+  "dappSuggestedTooltip": {
+    "message": "$1 has recommended this price.",
+    "description": "$1 represents the Dapp's origin"
+  },
  "data": {
    "message": "Data"
  },
@ -665,6 +698,9 @@
  "edit": {
    "message": "Edit"
  },
+  "editAddressNickname": {
+    "message": "Edit address nickname"
+  },
  "editContact": {
    "message": "Edit Contact"
  },
@ -686,6 +722,9 @@
  "editGasEducationModalTitle": {
    "message": "How to choose?"
  },
+  "editGasFeeModalTitle": {
+    "message": "Edit gas fee"
+  },
  "editGasHigh": {
    "message": "High"
  },
@ -891,6 +930,9 @@
  "etherscanView": {
    "message": "View account on Etherscan"
  },
+  "etherscanViewOn": {
+    "message": "View on Etherscan"
+  },
  "expandView": {
    "message": "Expand view"
  },
@ -984,6 +1026,9 @@
    "message": "Gas limit must be at least $1",
    "description": "$1 is the custom gas limit, in decimal."
  },
+  "gasOption": {
+    "message": "Gas option"
+  },
  "gasPrice": {
    "message": "Gas Price (GWEI)"
  },
@ -1002,10 +1047,18 @@
  "gasPriceInfoTooltipContent": {
    "message": "Gas price specifies the amount of Ether you are willing to pay for each unit of gas."
  },
+  "gasTimingHoursShort": {
+    "message": "$1 hrs",
+    "description": "$1 represents a number of hours"
+  },
  "gasTimingMinutes": {
    "message": "$1 minutes",
    "description": "$1 represents a number of minutes"
  },
+  "gasTimingMinutesShort": {
+    "message": "$1 min",
+    "description": "$1 represents a number of minutes"
+  },
  "gasTimingNegative": {
    "message": "Maybe in $1",
    "description": "$1 represents an amount of time"
@ -1018,6 +1071,10 @@
    "message": "$1 seconds",
    "description": "$1 represents a number of seconds"
  },
+  "gasTimingSecondsShort": {
+    "message": "$1 sec",
+    "description": "$1 represents a number of seconds"
+  },
  "gasTimingVeryPositive": {
    "message": "Very likely in < $1",
    "description": "$1 represents an amount of time"
@ -1100,9 +1157,15 @@
  "hideZeroBalanceTokens": {
    "message": "Hide Tokens Without Balance"
  },
+  "high": {
+    "message": "Aggressive"
+  },
  "history": {
    "message": "History"
  },
+  "id": {
+    "message": "ID"
+  },
  "import": {
    "message": "Import",
    "description": "Button to import an account from a selected file"
@ -1117,7 +1180,7 @@
    "message": "import using Secret Recovery Phrase"
  },
  "importAccountMsg": {
-    "message": " Imported accounts will not be associated with your originally created MetaMask account Secret Recovery Phrase. Learn more about imported accounts "
+    "message": "Imported accounts will not be associated with your originally created MetaMask account Secret Recovery Phrase. Learn more about imported accounts"
  },
  "importAccountSeedPhrase": {
    "message": "Import a wallet with Secret Recovery Phrase"
@ -1336,6 +1399,12 @@
  "lockTimeTooGreat": {
    "message": "Lock time is too great"
  },
+  "low": {
+    "message": "Low"
+  },
+  "lowPriorityMessage": {
+    "message": "Future transactions will queue after this one. This price was last seen was some time ago."
+  },
  "mainnet": {
    "message": "Ethereum Mainnet"
  },
@ -1349,12 +1418,18 @@
  "max": {
    "message": "Max"
  },
+  "maxBaseFee": {
+    "message": "Max base fee"
+  },
  "maxFee": {
    "message": "Max fee"
  },
  "maxPriorityFee": {
    "message": "Max priority fee"
  },
+  "medium": {
+    "message": "Market"
+  },
  "memo": {
    "message": "memo"
  },
@ -1538,6 +1613,12 @@
  "newContract": {
    "message": "New Contract"
  },
+  "newNFTsDetected": {
+    "message": "New NFTs detected"
+  },
+  "newNFTsDetectedInfo": {
+    "message": "One or more new NFTs were detected in your wallet."
+  },
  "newNetworkAdded": {
    "message": "“$1” was successfully added!"
  },
@ -1560,9 +1641,15 @@
    "message": "Nonce is higher than suggested nonce of $1",
    "description": "The next nonce according to MetaMask's internal logic"
  },
+  "nftTokenIdPlaceholder": {
+    "message": "Enter the collectible ID"
+  },
  "nfts": {
    "message": "NFTs"
  },
+  "nickname": {
+    "message": "Nickname"
+  },
  "noAccountsFound": {
    "message": "No accounts found for the given search query"
  },
@ -2129,6 +2216,9 @@
  "selectHdPath": {
    "message": "Select HD Path"
  },
+  "selectNFTPrivacyPreference": {
+    "message": "Select NFT privacy preference"
+  },
  "selectPathHelp": {
    "message": "If you don't see the accounts you expect, try switching the HD path."
  },
@ -2236,6 +2326,9 @@
  "signed": {
    "message": "Signed"
  },
+  "simulationErrorMessage": {
+    "message": "This transaction is expected to fail. Trying to execute it is expected to be expensive but fail, and is not recommended."
+  },
  "skip": {
    "message": "Skip"
  },
@ -2742,6 +2835,9 @@
  "thisWillCreate": {
    "message": "This will create a new wallet and Secret Recovery Phrase"
  },
+  "time": {
+    "message": "Time"
+  },
  "tips": {
    "message": "Tips"
  },
@ -2896,6 +2992,9 @@
  "tryAgain": {
    "message": "Try again"
  },
+  "tryAnywayOption": {
+    "message": "I will try anyway"
+  },
  "turnOnTokenDetection": {
    "message": "Turn on enhanced token detection"
  },
--- a/app/_locales/zh_CN/messages.json
+++ b/app/_locales/zh_CN/messages.json
@ -503,7 +503,7 @@
    "message": "编辑权限"
  },
  "encryptionPublicKeyNotice": {
-    "message": "$1 希望得到您的加密公钥。同意后该网站将可以想您发送加密信息。",
+    "message": "$1 希望得到您的加密公钥。同意后该网站将可以向您发送加密信息。",
    "description": "$1 is the web3 site name"
  },
  "encryptionPublicKeyRequest": {
--- a/app/build-types/beta/manifest/_base.json
+++ b/app/build-types/beta/manifest/_base.json
@ -21,6 +21,6 @@
    "128": "images/icon-128.png",
    "512": "images/icon-512.png"
  },
-  "name": "__MSG_appName__ Beta",
-  "short_name": "__MSG_appName__ Beta"
+  "name": "__MSG_appNameBeta__",
+  "short_name": "__MSG_appNameBeta__"
 }
--- a/app/build-types/flask/manifest/_base.json
+++ b/app/build-types/flask/manifest/_base.json
@ -21,6 +21,6 @@
    "128": "images/icon-128.png",
    "512": "images/icon-512.png"
  },
-  "name": "__MSG_appName__ Flask",
-  "short_name": "__MSG_appName__ Flask"
+  "name": "__MSG_appNameFlask__",
+  "short_name": "__MSG_appNameFlask__"
 }
--- a/app/scripts/background.js
+++ b/app/scripts/background.js
@ -17,13 +17,19 @@ import {
  ENVIRONMENT_TYPE_FULLSCREEN,
 } from '../../shared/constants/app';
 import { SECOND } from '../../shared/constants/time';
+import {
+  REJECT_NOTFICIATION_CLOSE,
+  REJECT_NOTFICIATION_CLOSE_SIG,
+} from '../../shared/constants/metametrics';
 import migrations from './migrations';
 import Migrator from './lib/migrator';
 import ExtensionPlatform from './platforms/extension';
 import LocalStore from './lib/local-store';
 import ReadOnlyNetworkStore from './lib/network-store';
 import createStreamSink from './lib/createStreamSink';
-import NotificationManager from './lib/notification-manager';
+import NotificationManager, {
+  NOTIFICATION_MANAGER_EVENTS,
+} from './lib/notification-manager';
 import MetamaskController, {
  METAMASK_CONTROLLER_EVENTS,
 } from './metamask-controller';
@ -475,6 +481,69 @@ function setupController(initState, initLangCode) {
    extension.browserAction.setBadgeBackgroundColor({ color: '#037DD6' });
  }

+  notificationManager.on(
+    NOTIFICATION_MANAGER_EVENTS.POPUP_CLOSED,
+    rejectUnapprovedNotifications,
+  );
+
+  function rejectUnapprovedNotifications() {
+    Object.keys(
+      controller.txController.txStateManager.getUnapprovedTxList(),
+    ).forEach((txId) =>
+      controller.txController.txStateManager.setTxStatusRejected(txId),
+    );
+    controller.messageManager.messages
+      .filter((msg) => msg.status === 'unapproved')
+      .forEach((tx) =>
+        controller.messageManager.rejectMsg(
+          tx.id,
+          REJECT_NOTFICIATION_CLOSE_SIG,
+        ),
+      );
+    controller.personalMessageManager.messages
+      .filter((msg) => msg.status === 'unapproved')
+      .forEach((tx) =>
+        controller.personalMessageManager.rejectMsg(
+          tx.id,
+          REJECT_NOTFICIATION_CLOSE_SIG,
+        ),
+      );
+    controller.typedMessageManager.messages
+      .filter((msg) => msg.status === 'unapproved')
+      .forEach((tx) =>
+        controller.typedMessageManager.rejectMsg(
+          tx.id,
+          REJECT_NOTFICIATION_CLOSE_SIG,
+        ),
+      );
+    controller.decryptMessageManager.messages
+      .filter((msg) => msg.status === 'unapproved')
+      .forEach((tx) =>
+        controller.decryptMessageManager.rejectMsg(
+          tx.id,
+          REJECT_NOTFICIATION_CLOSE,
+        ),
+      );
+    controller.encryptionPublicKeyManager.messages
+      .filter((msg) => msg.status === 'unapproved')
+      .forEach((tx) =>
+        controller.encryptionPublicKeyManager.rejectMsg(
+          tx.id,
+          REJECT_NOTFICIATION_CLOSE,
+        ),
+      );
+
+    // We're specifcally avoid using approvalController directly for better
+    // Error support during rejection
+    Object.keys(
+      controller.permissionsController.approvals.state.pendingApprovals,
+    ).forEach((approvalId) =>
+      controller.permissionsController.rejectPermissionsRequest(approvalId),
+    );
+
+    updateBadge();
+  }
+
  return Promise.resolve();
 }

--- a/app/scripts/controllers/network/createInfuraClient.js
+++ b/app/scripts/controllers/network/createInfuraClient.js
@ -1,10 +1,13 @@
 import { createScaffoldMiddleware, mergeMiddleware } from 'json-rpc-engine';
-import createBlockRefMiddleware from 'eth-json-rpc-middleware/block-ref';
-import createRetryOnEmptyMiddleware from 'eth-json-rpc-middleware/retryOnEmpty';
-import createBlockCacheMiddleware from 'eth-json-rpc-middleware/block-cache';
-import createInflightCacheMiddleware from 'eth-json-rpc-middleware/inflight-cache';
-import createBlockTrackerInspectorMiddleware from 'eth-json-rpc-middleware/block-tracker-inspector';
-import providerFromMiddleware from 'eth-json-rpc-middleware/providerFromMiddleware';
+import {
+  createBlockRefMiddleware,
+  createRetryOnEmptyMiddleware,
+  createBlockCacheMiddleware,
+  createInflightCacheMiddleware,
+  createBlockTrackerInspectorMiddleware,
+  providerFromMiddleware,
+} from 'eth-json-rpc-middleware';
+
 import createInfuraMiddleware from 'eth-json-rpc-infura';
 import { PollingBlockTracker } from 'eth-block-tracker';

--- a/app/scripts/controllers/network/createJsonRpcClient.js
+++ b/app/scripts/controllers/network/createJsonRpcClient.js
@ -1,10 +1,12 @@
 import { createAsyncMiddleware, mergeMiddleware } from 'json-rpc-engine';
-import createFetchMiddleware from 'eth-json-rpc-middleware/fetch';
-import createBlockRefRewriteMiddleware from 'eth-json-rpc-middleware/block-ref-rewrite';
-import createBlockCacheMiddleware from 'eth-json-rpc-middleware/block-cache';
-import createInflightMiddleware from 'eth-json-rpc-middleware/inflight-cache';
-import createBlockTrackerInspectorMiddleware from 'eth-json-rpc-middleware/block-tracker-inspector';
-import providerFromMiddleware from 'eth-json-rpc-middleware/providerFromMiddleware';
+import {
+  createFetchMiddleware,
+  createBlockRefRewriteMiddleware,
+  createBlockCacheMiddleware,
+  createInflightCacheMiddleware,
+  createBlockTrackerInspectorMiddleware,
+  providerFromMiddleware,
+} from 'eth-json-rpc-middleware';
 import { PollingBlockTracker } from 'eth-block-tracker';
 import { SECOND } from '../../../../shared/constants/time';

@ -27,7 +29,7 @@ export default function createJsonRpcClient({ rpcUrl, chainId }) {
    createChainIdMiddleware(chainId),
    createBlockRefRewriteMiddleware({ blockTracker }),
    createBlockCacheMiddleware({ blockTracker }),
-    createInflightMiddleware(),
+    createInflightCacheMiddleware(),
    createBlockTrackerInspectorMiddleware({ blockTracker }),
    fetchMiddleware,
  ]);
--- a/app/scripts/controllers/network/createMetamaskMiddleware.js
+++ b/app/scripts/controllers/network/createMetamaskMiddleware.js
@ -1,5 +1,5 @@
 import { createScaffoldMiddleware, mergeMiddleware } from 'json-rpc-engine';
-import createWalletSubprovider from 'eth-json-rpc-middleware/wallet';
+import { createWalletMiddleware } from 'eth-json-rpc-middleware';
 import {
  createPendingNonceMiddleware,
  createPendingTxMiddleware,
@ -21,11 +21,10 @@ export default function createMetamaskMiddleware({
 }) {
  const metamaskMiddleware = mergeMiddleware([
    createScaffoldMiddleware({
-      // staticSubprovider
      eth_syncing: false,
      web3_clientVersion: `MetaMask/v${version}`,
    }),
-    createWalletSubprovider({
+    createWalletMiddleware({
      getAccounts,
      processTransaction,
      processEthSignMessage,
--- a/app/scripts/controllers/network/network.js
+++ b/app/scripts/controllers/network/network.js
@ -2,7 +2,7 @@ import { strict as assert } from 'assert';
 import EventEmitter from 'events';
 import { ComposedStore, ObservableStore } from '@metamask/obs-store';
 import { JsonRpcEngine } from 'json-rpc-engine';
-import providerFromEngine from 'eth-json-rpc-middleware/providerFromEngine';
+import { providerFromEngine } from 'eth-json-rpc-middleware';
 import log from 'loglevel';
 import {
  createSwappableProxy,
@ -430,7 +430,7 @@ export default class NetworkController extends EventEmitter {
  }

  _setProviderAndBlockTracker({ provider, blockTracker }) {
-    // update or intialize proxies
+    // update or initialize proxies
    if (this._providerProxy) {
      this._providerProxy.setTarget(provider);
    } else {
--- a/app/scripts/controllers/preferences.js
+++ b/app/scripts/controllers/preferences.js
@ -37,6 +37,7 @@ export default class PreferencesController {
      // set to true means the dynamic list from the API is being used
      // set to false will be using the static list from contract-metadata
      useTokenDetection: false,
+      advancedGasFee: null,

      // WARNING: Do not use feature flags for security-sensitive things.
      // Feature flag toggling is available in the global namespace
@ -129,6 +130,16 @@ export default class PreferencesController {
    this.store.updateState({ useTokenDetection: val });
  }

+  /**
+   * Setter for the `advancedGasFee` property
+   *
+   * @param {object} val - holds the maxBaseFee and PriorityFee that the user set as default advanced settings.
+   *
+   */
+  setAdvancedGasFee(val) {
+    this.store.updateState({ advancedGasFee: val });
+  }
+
  /**
   * Add new methodData to state, to avoid requesting this information again through Infura
   *
--- a/app/scripts/controllers/preferences.test.js
+++ b/app/scripts/controllers/preferences.test.js
@ -266,4 +266,28 @@ describe('preferences controller', function () {
      );
    });
  });
+
+  describe('setAdvancedGasFee', function () {
+    it('should default to null', function () {
+      const state = preferencesController.store.getState();
+      assert.equal(state.advancedGasFee, null);
+    });
+
+    it('should set the setAdvancedGasFee property in state', function () {
+      const state = preferencesController.store.getState();
+      assert.equal(state.advancedGasFee, null);
+      preferencesController.setAdvancedGasFee({
+        maxBaseFee: '1.5',
+        priorityFee: '2',
+      });
+      assert.equal(
+        preferencesController.store.getState().advancedGasFee.maxBaseFee,
+        '1.5',
+      );
+      assert.equal(
+        preferencesController.store.getState().advancedGasFee.priorityFee,
+        '2',
+      );
+    });
+  });
 });
--- a/app/scripts/controllers/swaps.js
+++ b/app/scripts/controllers/swaps.js
@ -28,6 +28,7 @@ import {
 } from '../../../ui/pages/swaps/swaps.util';
 import fetchWithCache from '../../../ui/helpers/utils/fetch-with-cache';
 import { MINUTE, SECOND } from '../../../shared/constants/time';
+import { isEqualCaseInsensitive } from '../../../ui/helpers/utils/util';
 import { NETWORK_EVENTS } from './network';

 // The MAX_GAS_LIMIT is a number that is higher than the maximum gas costs we have observed on any aggregator
@ -91,7 +92,7 @@ export default class SwapsController {
    networkController,
    provider,
    getProviderConfig,
-    tokenRatesStore,
+    getTokenRatesState,
    fetchTradesInfo = defaultFetchTradesInfo,
    getCurrentChainId,
    getEIP1559GasFeeEstimates,
@ -105,7 +106,7 @@ export default class SwapsController {
    this._getEIP1559GasFeeEstimates = getEIP1559GasFeeEstimates;

    this.getBufferedGasLimit = getBufferedGasLimit;
-    this.tokenRatesStore = tokenRatesStore;
+    this.getTokenRatesState = getTokenRatesState;

    this.pollCount = 0;
    this.getProviderConfig = getProviderConfig;
@ -280,7 +281,7 @@ export default class SwapsController {

      // For a user to be able to swap a token, they need to have approved the MetaSwap contract to withdraw that token.
      // _getERC20Allowance() returns the amount of the token they have approved for withdrawal. If that amount is greater
-      // than 0, it means that approval has already occured and is not needed. Otherwise, for tokens to be swapped, a new
+      // than 0, it means that approval has already occurred and is not needed. Otherwise, for tokens to be swapped, a new
      // call of the ERC-20 approve method is required.
      approvalRequired =
        allowance.eq(0) &&
@ -610,7 +611,9 @@ export default class SwapsController {
  }

  async _findTopQuoteAndCalculateSavings(quotes = {}) {
-    const tokenConversionRates = this.tokenRatesStore.contractExchangeRates;
+    const {
+      contractExchangeRates: tokenConversionRates,
+    } = this.getTokenRatesState();
    const {
      swapsState: { customGasPrice, customMaxPriorityFeePerGas },
    } = this.store.getState();
@ -734,7 +737,12 @@ export default class SwapsController {
        decimalAdjustedDestinationAmount,
      );

-      const tokenConversionRate = tokenConversionRates[destinationToken];
+      const tokenConversionRate =
+        tokenConversionRates[
+          Object.keys(tokenConversionRates).find((tokenAddress) =>
+            isEqualCaseInsensitive(tokenAddress, destinationToken),
+          )
+        ];
      const conversionRateForSorting = tokenConversionRate || 1;

      const ethValueOfTokens = decimalAdjustedDestinationAmount.times(
@ -777,7 +785,17 @@ export default class SwapsController {
      isSwapsDefaultTokenAddress(
        newQuotes[topAggId].destinationToken,
        chainId,
-      ) || Boolean(tokenConversionRates[newQuotes[topAggId]?.destinationToken]);
+      ) ||
+      Boolean(
+        tokenConversionRates[
+          Object.keys(tokenConversionRates).find((tokenAddress) =>
+            isEqualCaseInsensitive(
+              tokenAddress,
+              newQuotes[topAggId]?.destinationToken,
+            ),
+          )
+        ],
+      );

    let savings = null;

--- a/app/scripts/controllers/swaps.test.js
+++ b/app/scripts/controllers/swaps.test.js
@ -82,12 +82,12 @@ const MOCK_FETCH_METADATA = {
  chainId: MAINNET_CHAIN_ID,
 };

-const MOCK_TOKEN_RATES_STORE = {
+const MOCK_TOKEN_RATES_STORE = () => ({
  contractExchangeRates: {
    '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48': 2,
    '0x1111111111111111111111111111111111111111': 0.1,
  },
-};
+});

 const MOCK_GET_PROVIDER_CONFIG = () => ({ type: 'FAKE_NETWORK' });

@ -161,7 +161,7 @@ describe('SwapsController', function () {
      networkController: getMockNetworkController(),
      provider,
      getProviderConfig: MOCK_GET_PROVIDER_CONFIG,
-      tokenRatesStore: MOCK_TOKEN_RATES_STORE,
+      getTokenRatesState: MOCK_TOKEN_RATES_STORE,
      fetchTradesInfo: fetchTradesInfoStub,
      getCurrentChainId: getCurrentChainIdStub,
      getEIP1559GasFeeEstimates: getEIP1559GasFeeEstimatesStub,
@ -211,7 +211,7 @@ describe('SwapsController', function () {
        networkController,
        provider,
        getProviderConfig: MOCK_GET_PROVIDER_CONFIG,
-        tokenRatesStore: MOCK_TOKEN_RATES_STORE,
+        getTokenRatesState: MOCK_TOKEN_RATES_STORE,
        fetchTradesInfo: fetchTradesInfoStub,
        getCurrentChainId: getCurrentChainIdStub,
      });
@ -235,7 +235,7 @@ describe('SwapsController', function () {
        networkController,
        provider,
        getProviderConfig: MOCK_GET_PROVIDER_CONFIG,
-        tokenRatesStore: MOCK_TOKEN_RATES_STORE,
+        getTokenRatesState: MOCK_TOKEN_RATES_STORE,
        fetchTradesInfo: fetchTradesInfoStub,
        getCurrentChainId: getCurrentChainIdStub,
      });
@ -259,7 +259,7 @@ describe('SwapsController', function () {
        networkController,
        provider,
        getProviderConfig: MOCK_GET_PROVIDER_CONFIG,
-        tokenRatesStore: MOCK_TOKEN_RATES_STORE,
+        getTokenRatesState: MOCK_TOKEN_RATES_STORE,
        fetchTradesInfo: fetchTradesInfoStub,
        getCurrentChainId: getCurrentChainIdStub,
      });
@ -816,9 +816,10 @@ describe('SwapsController', function () {
          .stub(swapsController, '_getERC20Allowance')
          .resolves(ethers.BigNumber.from(1));

-        swapsController.tokenRatesStore = {
+        swapsController.getTokenRatesState = () => ({
          contractExchangeRates: {},
-        };
+        });
+
        const [newQuotes, topAggId] = await swapsController.fetchAndSetQuotes(
          MOCK_FETCH_PARAMS,
          MOCK_FETCH_METADATA,
--- a/app/scripts/controllers/threebox.js
+++ b/app/scripts/controllers/threebox.js
@ -8,7 +8,7 @@ const Box = process.env.IN_TEST

 import log from 'loglevel';
 import { JsonRpcEngine } from 'json-rpc-engine';
-import providerFromEngine from 'eth-json-rpc-middleware/providerFromEngine';
+import { providerFromEngine } from 'eth-json-rpc-middleware';
 import Migrator from '../lib/migrator';
 import migrations from '../migrations';
 import createOriginMiddleware from '../lib/createOriginMiddleware';
--- a/app/scripts/controllers/transactions/index.js
+++ b/app/scripts/controllers/transactions/index.js
@ -26,6 +26,7 @@ import {
  TRANSACTION_TYPES,
  TRANSACTION_ENVELOPE_TYPES,
 } from '../../../../shared/constants/transaction';
+import { TRANSACTION_ENVELOPE_TYPE_NAMES } from '../../../../ui/helpers/constants/transactions';
 import { METAMASK_CONTROLLER_EVENTS } from '../../metamask-controller';
 import {
  GAS_LIMITS,
@ -1447,8 +1448,8 @@ export default class TransactionController extends EventEmitter {
      sensitiveProperties: {
        status,
        transaction_envelope_type: isEIP1559Transaction(txMeta)
-          ? 'fee-market'
-          : 'legacy',
+          ? TRANSACTION_ENVELOPE_TYPE_NAMES.FEE_MARKET
+          : TRANSACTION_ENVELOPE_TYPE_NAMES.LEGACY,
        first_seen: time,
        gas_limit: gasLimit,
        ...gasParamsInGwei,
--- a/app/scripts/controllers/transactions/index.test.js
+++ b/app/scripts/controllers/transactions/index.test.js
@ -20,6 +20,7 @@ import {
  GAS_ESTIMATE_TYPES,
  GAS_RECOMMENDATIONS,
 } from '../../../../shared/constants/gas';
+import { TRANSACTION_ENVELOPE_TYPE_NAMES } from '../../../../ui/helpers/constants/transactions';
 import { METAMASK_CONTROLLER_EVENTS } from '../../metamask-controller';
 import TransactionController, { TRANSACTION_EVENTS } from '.';

@ -774,7 +775,7 @@ describe('Transaction Controller', function () {
          nonce: '0x4b',
        },
        type: TRANSACTION_TYPES.SIMPLE_SEND,
-        transaction_envelope_type: 'legacy',
+        transaction_envelope_type: TRANSACTION_ENVELOPE_TYPE_NAMES.LEGACY,
        origin: 'metamask',
        chainId: currentChainId,
        time: 1624408066355,
@ -1578,7 +1579,7 @@ describe('Transaction Controller', function () {
          gas_price: '2',
          gas_limit: '0x7b0d',
          first_seen: 1624408066355,
-          transaction_envelope_type: 'legacy',
+          transaction_envelope_type: TRANSACTION_ENVELOPE_TYPE_NAMES.LEGACY,
          status: 'unapproved',
        },
      };
@ -1625,7 +1626,7 @@ describe('Transaction Controller', function () {
          gas_price: '2',
          gas_limit: '0x7b0d',
          first_seen: 1624408066355,
-          transaction_envelope_type: 'legacy',
+          transaction_envelope_type: TRANSACTION_ENVELOPE_TYPE_NAMES.LEGACY,
          status: 'unapproved',
        },
      };
@ -1674,7 +1675,7 @@ describe('Transaction Controller', function () {
          gas_price: '2',
          gas_limit: '0x7b0d',
          first_seen: 1624408066355,
-          transaction_envelope_type: 'legacy',
+          transaction_envelope_type: TRANSACTION_ENVELOPE_TYPE_NAMES.LEGACY,
          status: 'unapproved',
        },
      };
@ -1731,7 +1732,7 @@ describe('Transaction Controller', function () {
          max_priority_fee_per_gas: '2',
          gas_limit: '0x7b0d',
          first_seen: 1624408066355,
-          transaction_envelope_type: 'fee-market',
+          transaction_envelope_type: TRANSACTION_ENVELOPE_TYPE_NAMES.FEE_MARKET,
          status: 'unapproved',
          estimate_suggested: GAS_RECOMMENDATIONS.MEDIUM,
          estimate_used: GAS_RECOMMENDATIONS.HIGH,
--- a/app/scripts/lib/buy-eth-url.js
+++ b/app/scripts/lib/buy-eth-url.js
@ -1,12 +1,13 @@
 import log from 'loglevel';

-import { METASWAP_CHAINID_API_HOST_MAP } from '../../../shared/constants/swaps';
+import { SWAPS_API_V2_BASE_URL } from '../../../shared/constants/swaps';
 import {
  GOERLI_CHAIN_ID,
  KOVAN_CHAIN_ID,
  MAINNET_CHAIN_ID,
  RINKEBY_CHAIN_ID,
  ROPSTEN_CHAIN_ID,
+  MAINNET_NETWORK_ID,
 } from '../../../shared/constants/network';
 import { SECOND } from '../../../shared/constants/time';
 import getFetchWithTimeout from '../../../shared/modules/fetch-with-timeout';
@ -20,7 +21,7 @@ const fetchWithTimeout = getFetchWithTimeout(SECOND * 30);
 * @returns String
 */
 const createWyrePurchaseUrl = async (address) => {
-  const fiatOnRampUrlApi = `${METASWAP_CHAINID_API_HOST_MAP[MAINNET_CHAIN_ID]}/fiatOnRampUrl?serviceName=wyre&destinationAddress=${address}`;
+  const fiatOnRampUrlApi = `${SWAPS_API_V2_BASE_URL}/networks/${MAINNET_NETWORK_ID}/fiatOnRampUrl?serviceName=wyre&destinationAddress=${address}`;
  const wyrePurchaseUrlFallback = `https://pay.sendwyre.com/purchase?dest=ethereum:${address}&destCurrency=ETH&accountId=AC-7AG3W4XH4N2&paymentMethod=debit-card`;
  try {
    const response = await fetchWithTimeout(fiatOnRampUrlApi, {
--- a/app/scripts/lib/buy-eth-url.test.js
+++ b/app/scripts/lib/buy-eth-url.test.js
@ -7,6 +7,7 @@ import {
  ROPSTEN_CHAIN_ID,
 } from '../../../shared/constants/network';
 import { TRANSAK_API_KEY } from '../constants/on-ramp';
+import { SWAPS_API_V2_BASE_URL } from '../../../shared/constants/swaps';
 import getBuyEthUrl from './buy-eth-url';

 const WYRE_ACCOUNT_ID = 'AC-7AG3W4XH4N2';
@ -28,8 +29,10 @@ const KOVAN = {

 describe('buy-eth-url', function () {
  it('returns Wyre url with an ETH address for Ethereum mainnet', async function () {
-    nock('https://api.metaswap.codefi.network')
-      .get(`/fiatOnRampUrl?serviceName=wyre&destinationAddress=${ETH_ADDRESS}`)
+    nock(SWAPS_API_V2_BASE_URL)
+      .get(
+        `/networks/1/fiatOnRampUrl?serviceName=wyre&destinationAddress=${ETH_ADDRESS}`,
+      )
      .reply(200, {
        url: `https://pay.sendwyre.com/purchase?accountId=${WYRE_ACCOUNT_ID}&utm_campaign=${WYRE_ACCOUNT_ID}&destCurrency=ETH&utm_medium=widget&paymentMethod=debit-card&reservation=MLZVUF8FMXZUMARJC23B&dest=ethereum%3A${ETH_ADDRESS}&utm_source=checkout`,
      });
--- a/app/scripts/lib/decrypt-message-manager.js
+++ b/app/scripts/lib/decrypt-message-manager.js
@ -38,13 +38,14 @@ export default class DecryptMessageManager extends EventEmitter {
   * @property {Array} messages Holds all messages that have been created by this DecryptMessageManager
   *
   */
-  constructor() {
+  constructor(opts) {
    super();
    this.memStore = new ObservableStore({
      unapprovedDecryptMsgs: {},
      unapprovedDecryptMsgCount: 0,
    });
    this.messages = [];
+    this.metricsEvent = opts.metricsEvent;
  }

  /**
@ -237,7 +238,16 @@ export default class DecryptMessageManager extends EventEmitter {
   * @param {number} msgId The id of the DecryptMessage to reject.
   *
   */
-  rejectMsg(msgId) {
+  rejectMsg(msgId, reason = undefined) {
+    if (reason) {
+      this.metricsEvent({
+        event: reason,
+        category: 'Messages',
+        properties: {
+          action: 'Decrypt Message Request',
+        },
+      });
+    }
    this._setMsgStatus(msgId, 'rejected');
  }

--- a/app/scripts/lib/encryption-public-key-manager.js
+++ b/app/scripts/lib/encryption-public-key-manager.js
@ -34,13 +34,14 @@ export default class EncryptionPublicKeyManager extends EventEmitter {
   * @property {Array} messages Holds all messages that have been created by this EncryptionPublicKeyManager
   *
   */
-  constructor() {
+  constructor(opts) {
    super();
    this.memStore = new ObservableStore({
      unapprovedEncryptionPublicKeyMsgs: {},
      unapprovedEncryptionPublicKeyMsgCount: 0,
    });
    this.messages = [];
+    this.metricsEvent = opts.metricsEvent;
  }

  /**
@ -226,7 +227,16 @@ export default class EncryptionPublicKeyManager extends EventEmitter {
   * @param {number} msgId The id of the EncryptionPublicKey to reject.
   *
   */
-  rejectMsg(msgId) {
+  rejectMsg(msgId, reason = undefined) {
+    if (reason) {
+      this.metricsEvent({
+        event: reason,
+        category: 'Messages',
+        properties: {
+          action: 'Encryption public key Request',
+        },
+      });
+    }
    this._setMsgStatus(msgId, 'rejected');
  }

--- a/app/scripts/lib/message-manager.js
+++ b/app/scripts/lib/message-manager.js
@ -35,13 +35,14 @@ export default class MessageManager extends EventEmitter {
   * @property {Array} messages Holds all messages that have been created by this MessageManager
   *
   */
-  constructor() {
+  constructor({ metricsEvent }) {
    super();
    this.memStore = new ObservableStore({
      unapprovedMsgs: {},
      unapprovedMsgCount: 0,
    });
    this.messages = [];
+    this.metricsEvent = metricsEvent;
  }

  /**
@ -78,9 +79,9 @@ export default class MessageManager extends EventEmitter {
   * @returns {promise} after signature has been
   *
   */
-  addUnapprovedMessageAsync(msgParams, req) {
-    return new Promise((resolve, reject) => {
-      const msgId = this.addUnapprovedMessage(msgParams, req);
+  async addUnapprovedMessageAsync(msgParams, req) {
+    const msgId = this.addUnapprovedMessage(msgParams, req);
+    return await new Promise((resolve, reject) => {
      // await finished
      this.once(`${msgId}:finished`, (data) => {
        switch (data.status) {
@ -92,6 +93,10 @@ export default class MessageManager extends EventEmitter {
                'MetaMask Message Signature: User denied message signature.',
              ),
            );
+          case 'errored':
+            return reject(
+              new Error(`MetaMask Message Signature: ${data.error}`),
+            );
          default:
            return reject(
              new Error(
@ -217,10 +222,34 @@ export default class MessageManager extends EventEmitter {
   * @param {number} msgId - The id of the Message to reject.
   *
   */
-  rejectMsg(msgId) {
+  rejectMsg(msgId, reason = undefined) {
+    if (reason) {
+      const msg = this.getMsg(msgId);
+      this.metricsEvent({
+        event: reason,
+        category: 'Transactions',
+        properties: {
+          action: 'Sign Request',
+          type: msg.type,
+        },
+      });
+    }
    this._setMsgStatus(msgId, 'rejected');
  }

+  /**
+   * Sets a Message status to 'errored' via a call to this._setMsgStatus.
+   *
+   * @param {number} msgId - The id of the Message to error
+   *
+   */
+  errorMessage(msgId, error) {
+    const msg = this.getMsg(msgId);
+    msg.error = error;
+    this._updateMsg(msg);
+    this._setMsgStatus(msgId, 'errored');
+  }
+
  /**
   * Clears all unapproved messages from memory.
   */
@ -292,7 +321,7 @@ export default class MessageManager extends EventEmitter {
 * @returns {string} A hex string conversion of the buffer data
 *
 */
-function normalizeMsgData(data) {
+export function normalizeMsgData(data) {
  if (data.slice(0, 2) === '0x') {
    // data is already hex
    return data;
--- a/app/scripts/lib/message-manager.test.js
+++ b/app/scripts/lib/message-manager.test.js
@ -1,4 +1,5 @@
 import { strict as assert } from 'assert';
+import sinon from 'sinon';
 import { TRANSACTION_STATUSES } from '../../../shared/constants/transaction';
 import MessageManager from './message-manager';

@ -6,7 +7,9 @@ describe('Message Manager', function () {
  let messageManager;

  beforeEach(function () {
-    messageManager = new MessageManager();
+    messageManager = new MessageManager({
+      metricsEvent: sinon.fake(),
+    });
  });

  describe('#getMsgList', function () {
--- a/app/scripts/lib/notification-manager.js
+++ b/app/scripts/lib/notification-manager.js
@ -1,9 +1,14 @@
+import EventEmitter from 'safe-event-emitter';
 import ExtensionPlatform from '../platforms/extension';

 const NOTIFICATION_HEIGHT = 620;
 const NOTIFICATION_WIDTH = 360;

-export default class NotificationManager {
+export const NOTIFICATION_MANAGER_EVENTS = {
+  POPUP_CLOSED: 'onPopupClosed',
+};
+
+export default class NotificationManager extends EventEmitter {
  /**
   * A collection of methods for controlling the showing and hiding of the notification popup.
   *
@ -12,7 +17,9 @@ export default class NotificationManager {
   */

  constructor() {
+    super();
    this.platform = new ExtensionPlatform();
+    this.platform.addOnRemovedListener(this._onWindowClosed.bind(this));
  }

  /**
@ -62,6 +69,13 @@ export default class NotificationManager {
    }
  }

+  _onWindowClosed(windowId) {
+    if (windowId === this._popupId) {
+      this._popupId = undefined;
+      this.emit(NOTIFICATION_MANAGER_EVENTS.POPUP_CLOSED);
+    }
+  }
+
  /**
   * Checks all open MetaMask windows, and returns the first one it finds that is a notification window (i.e. has the
   * type 'popup')
--- a/app/scripts/lib/personal-message-manager.js
+++ b/app/scripts/lib/personal-message-manager.js
@ -40,13 +40,14 @@ export default class PersonalMessageManager extends EventEmitter {
   * @property {Array} messages Holds all messages that have been created by this PersonalMessageManager
   *
   */
-  constructor() {
+  constructor({ metricsEvent }) {
    super();
    this.memStore = new ObservableStore({
      unapprovedPersonalMsgs: {},
      unapprovedPersonalMsgCount: 0,
    });
    this.messages = [];
+    this.metricsEvent = metricsEvent;
  }

  /**
@ -106,6 +107,9 @@ export default class PersonalMessageManager extends EventEmitter {
              ),
            );
            return;
+          case 'errored':
+            reject(new Error(`MetaMask Message Signature: ${data.error}`));
+            return;
          default:
            reject(
              new Error(
@ -238,10 +242,34 @@ export default class PersonalMessageManager extends EventEmitter {
   * @param {number} msgId - The id of the PersonalMessage to reject.
   *
   */
-  rejectMsg(msgId) {
+  rejectMsg(msgId, reason = undefined) {
+    if (reason) {
+      const msg = this.getMsg(msgId);
+      this.metricsEvent({
+        event: reason,
+        category: 'Transactions',
+        properties: {
+          action: 'Sign Request',
+          type: msg.type,
+        },
+      });
+    }
    this._setMsgStatus(msgId, 'rejected');
  }

+  /**
+   * Sets a Message status to 'errored' via a call to this._setMsgStatus.
+   *
+   * @param {number} msgId - The id of the Message to error
+   *
+   */
+  errorMessage(msgId, error) {
+    const msg = this.getMsg(msgId);
+    msg.error = error;
+    this._updateMsg(msg);
+    this._setMsgStatus(msgId, 'errored');
+  }
+
  /**
   * Clears all unapproved messages from memory.
   */
--- a/app/scripts/lib/personal-message-manager.test.js
+++ b/app/scripts/lib/personal-message-manager.test.js
@ -1,4 +1,5 @@
 import { strict as assert } from 'assert';
+import sinon from 'sinon';
 import { TRANSACTION_STATUSES } from '../../../shared/constants/transaction';
 import PersonalMessageManager from './personal-message-manager';

@ -6,7 +7,7 @@ describe('Personal Message Manager', function () {
  let messageManager;

  beforeEach(function () {
-    messageManager = new PersonalMessageManager();
+    messageManager = new PersonalMessageManager({ metricsEvent: sinon.fake() });
  });

  describe('#getMsgList', function () {
--- a/app/scripts/lib/rpc-method-middleware/createMethodMiddleware.js
+++ b/app/scripts/lib/rpc-method-middleware/createMethodMiddleware.js
@ -1,8 +1,10 @@
+import { ethErrors } from 'eth-rpc-errors';
+import { UNSUPPORTED_RPC_METHODS } from '../../../../shared/constants/network';
 import handlers from './handlers';

 const handlerMap = handlers.reduce((map, handler) => {
  for (const methodName of handler.methodNames) {
-    map.set(methodName, handler.implementation);
+    map.set(methodName, handler);
  }
  return map;
 }, new Map());
@ -21,14 +23,41 @@ const handlerMap = handlers.reduce((map, handler) => {
 * Eventually, we'll want to extract this middleware into its own package.
 *
 * @param {Object} opts - The middleware options
- * @param {Function} opts.sendMetrics - A function for sending a metrics event
 * @returns {(req: Object, res: Object, next: Function, end: Function) => void}
 */
 export default function createMethodMiddleware(opts) {
  return function methodMiddleware(req, res, next, end) {
-    if (handlerMap.has(req.method)) {
-      return handlerMap.get(req.method)(req, res, next, end, opts);
+    // Reject unsupported methods.
+    if (UNSUPPORTED_RPC_METHODS.has(req.method)) {
+      return end(ethErrors.rpc.methodNotSupported());
    }
+
+    const handler = handlerMap.get(req.method);
+    if (handler) {
+      const { implementation, hookNames } = handler;
+      return implementation(req, res, next, end, selectHooks(opts, hookNames));
+    }
+
    return next();
  };
 }
+
+/**
+ * Returns the subset of the specified `hooks` that are included in the
+ * `hookNames` object. This is a Principle of Least Authority (POLA) measure
+ * to ensure that each RPC method implementation only has access to the
+ * API "hooks" it needs to do its job.
+ *
+ * @param {Record<string, unknown>} hooks - The hooks to select from.
+ * @param {Record<string, true>} hookNames - The names of the hooks to select.
+ * @returns {Record<string, unknown> | undefined} The selected hooks.
+ */
+function selectHooks(hooks, hookNames) {
+  if (hookNames) {
+    return Object.keys(hookNames).reduce((hookSubset, hookName) => {
+      hookSubset[hookName] = hooks[hookName];
+      return hookSubset;
+    }, {});
+  }
+  return undefined;
+}
--- a/app/scripts/lib/rpc-method-middleware/handlers/add-ethereum-chain.js
+++ b/app/scripts/lib/rpc-method-middleware/handlers/add-ethereum-chain.js
@ -12,6 +12,14 @@ import { CHAIN_ID_TO_NETWORK_ID_MAP } from '../../../../../shared/constants/netw
 const addEthereumChain = {
  methodNames: [MESSAGE_TYPE.ADD_ETHEREUM_CHAIN],
  implementation: addEthereumChainHandler,
+  hookNames: {
+    addCustomRpc: true,
+    getCurrentChainId: true,
+    findCustomRpcBy: true,
+    updateRpcTarget: true,
+    requestUserApproval: true,
+    sendMetrics: true,
+  },
 };
 export default addEthereumChain;

--- a/app/scripts/lib/rpc-method-middleware/handlers/get-provider-state.js
+++ b/app/scripts/lib/rpc-method-middleware/handlers/get-provider-state.js
@ -9,6 +9,9 @@ import { MESSAGE_TYPE } from '../../../../../shared/constants/app';
 const getProviderState = {
  methodNames: [MESSAGE_TYPE.GET_PROVIDER_STATE],
  implementation: getProviderStateHandler,
+  hookNames: {
+    getProviderState: true,
+  },
 };
 export default getProviderState;

--- a/app/scripts/lib/rpc-method-middleware/handlers/log-web3-shim-usage.js
+++ b/app/scripts/lib/rpc-method-middleware/handlers/log-web3-shim-usage.js
@ -10,6 +10,11 @@ import { MESSAGE_TYPE } from '../../../../../shared/constants/app';
 const logWeb3ShimUsage = {
  methodNames: [MESSAGE_TYPE.LOG_WEB3_SHIM_USAGE],
  implementation: logWeb3ShimUsageHandler,
+  hookNames: {
+    sendMetrics: true,
+    getWeb3ShimUsageState: true,
+    setWeb3ShimUsageRecorded: true,
+  },
 };
 export default logWeb3ShimUsage;

--- a/app/scripts/lib/rpc-method-middleware/handlers/switch-ethereum-chain.js
+++ b/app/scripts/lib/rpc-method-middleware/handlers/switch-ethereum-chain.js
@ -15,6 +15,13 @@ import {
 const switchEthereumChain = {
  methodNames: [MESSAGE_TYPE.SWITCH_ETHEREUM_CHAIN],
  implementation: switchEthereumChainHandler,
+  hookNames: {
+    getCurrentChainId: true,
+    findCustomRpcBy: true,
+    setProviderType: true,
+    updateRpcTarget: true,
+    requestUserApproval: true,
+  },
 };
 export default switchEthereumChain;

--- a/app/scripts/lib/rpc-method-middleware/handlers/watch-asset.js
+++ b/app/scripts/lib/rpc-method-middleware/handlers/watch-asset.js
@ -3,6 +3,9 @@ import { MESSAGE_TYPE } from '../../../../../shared/constants/app';
 const watchAsset = {
  methodNames: [MESSAGE_TYPE.WATCH_ASSET, MESSAGE_TYPE.WATCH_ASSET_LEGACY],
  implementation: watchAssetHandler,
+  hookNames: {
+    handleWatchAssetRequest: true,
+  },
 };
 export default watchAsset;

--- a/app/scripts/lib/typed-message-manager.js
+++ b/app/scripts/lib/typed-message-manager.js
@ -32,7 +32,7 @@ export default class TypedMessageManager extends EventEmitter {
  /**
   * Controller in charge of managing - storing, adding, removing, updating - TypedMessage.
   */
-  constructor({ getCurrentChainId }) {
+  constructor({ getCurrentChainId, metricEvents }) {
    super();
    this._getCurrentChainId = getCurrentChainId;
    this.memStore = new ObservableStore({
@ -40,6 +40,7 @@ export default class TypedMessageManager extends EventEmitter {
      unapprovedTypedMessagesCount: 0,
    });
    this.messages = [];
+    this.metricEvents = metricEvents;
  }

  /**
@ -301,7 +302,19 @@ export default class TypedMessageManager extends EventEmitter {
   * @param {number} msgId - The id of the TypedMessage to reject.
   *
   */
-  rejectMsg(msgId) {
+  rejectMsg(msgId, reason = undefined) {
+    if (reason) {
+      const msg = this.getMsg(msgId);
+      this.metricsEvent({
+        event: reason,
+        category: 'Transactions',
+        properties: {
+          action: 'Sign Request',
+          version: msg.msgParams.version,
+          type: msg.type,
+        },
+      });
+    }
    this._setMsgStatus(msgId, 'rejected');
  }

--- a/app/scripts/lib/typed-message-manager.test.js
+++ b/app/scripts/lib/typed-message-manager.test.js
@ -17,6 +17,7 @@ describe('Typed Message Manager', function () {
  beforeEach(async function () {
    typedMessageManager = new TypedMessageManager({
      getCurrentChainId: sinon.fake.returns('0x1'),
+      metricsEvent: sinon.fake(),
    });

    msgParamsV1 = {
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@ -7,7 +7,7 @@ import { debounce } from 'lodash';
 import createEngineStream from 'json-rpc-middleware-stream/engineStream';
 import createFilterMiddleware from 'eth-json-rpc-filters';
 import createSubscriptionManager from 'eth-json-rpc-filters/subscriptionManager';
-import providerAsMiddleware from 'eth-json-rpc-middleware/providerAsMiddleware';
+import { providerAsMiddleware } from 'eth-json-rpc-middleware';
 import KeyringController from 'eth-keyring-controller';
 import { Mutex } from 'await-semaphore';
 import { stripHexPrefix } from 'ethereumjs-util';
@ -17,6 +17,7 @@ import LedgerBridgeKeyring from '@metamask/eth-ledger-bridge-keyring';
 import LatticeKeyring from 'eth-lattice-keyring';
 import EthQuery from 'eth-query';
 import nanoid from 'nanoid';
+import { ethErrors } from 'eth-rpc-errors';
 import { captureException } from '@sentry/browser';
 import {
  AddressBookController,
@ -29,6 +30,9 @@ import {
  TokenListController,
  TokensController,
  TokenRatesController,
+  CollectiblesController,
+  AssetsContractController,
+  CollectibleDetectionController,
 } from '@metamask/controllers';
 import { TRANSACTION_STATUSES } from '../../shared/constants/transaction';
 import {
@ -61,7 +65,7 @@ import AlertController from './controllers/alert';
 import OnboardingController from './controllers/onboarding';
 import ThreeBoxController from './controllers/threebox';
 import IncomingTransactionsController from './controllers/incoming-transactions';
-import MessageManager from './lib/message-manager';
+import MessageManager, { normalizeMsgData } from './lib/message-manager';
 import DecryptMessageManager from './lib/decrypt-message-manager';
 import EncryptionPublicKeyManager from './lib/encryption-public-key-manager';
 import PersonalMessageManager from './lib/personal-message-manager';
@ -175,6 +179,57 @@ export default class MetamaskController extends EventEmitter {
      state: initState.TokensController,
    });

+    this.assetsContractController = new AssetsContractController();
+
+    this.collectiblesController = new CollectiblesController({
+      onPreferencesStateChange: this.preferencesController.store.subscribe.bind(
+        this.preferencesController.store,
+      ),
+      onNetworkStateChange: this.networkController.store.subscribe.bind(
+        this.networkController.store,
+      ),
+      getAssetName: this.assetsContractController.getAssetName.bind(
+        this.assetsContractController,
+      ),
+      getAssetSymbol: this.assetsContractController.getAssetSymbol.bind(
+        this.assetsContractController,
+      ),
+      getCollectibleTokenURI: this.assetsContractController.getCollectibleTokenURI.bind(
+        this.assetsContractController,
+      ),
+      getOwnerOf: this.assetsContractController.getOwnerOf.bind(
+        this.assetsContractController,
+      ),
+      balanceOfERC1155Collectible: this.assetsContractController.balanceOfERC1155Collectible.bind(
+        this.assetsContractController,
+      ),
+      uriERC1155Collectible: this.assetsContractController.uriERC1155Collectible.bind(
+        this.assetsContractController,
+      ),
+    });
+
+    process.env.COLLECTIBLES_V1 &&
+      (this.collectibleDetectionController = new CollectibleDetectionController(
+        {
+          onCollectiblesStateChange: (listener) =>
+            this.collectiblesController.subscribe(listener),
+          onPreferencesStateChange: this.preferencesController.store.subscribe.bind(
+            this.preferencesController.store,
+          ),
+          onNetworkStateChange: this.networkController.store.subscribe.bind(
+            this.networkController.store,
+          ),
+          getOpenSeaApiKey: () => this.collectiblesController.openSeaApiKey,
+          getBalancesInSingleCall: this.assetsContractController.getBalancesInSingleCall.bind(
+            this.assetsContractController,
+          ),
+          addCollectible: this.collectiblesController.addCollectible.bind(
+            this.collectiblesController,
+          ),
+          getCollectiblesState: () => this.collectiblesController.state,
+        },
+      ));
+
    this.metaMetricsController = new MetaMetricsController({
      segment,
      preferencesStore: this.preferencesController.store,
@ -526,14 +581,33 @@ export default class MetamaskController extends EventEmitter {
      }
    });
    this.networkController.lookupNetwork();
-    this.messageManager = new MessageManager();
-    this.personalMessageManager = new PersonalMessageManager();
-    this.decryptMessageManager = new DecryptMessageManager();
-    this.encryptionPublicKeyManager = new EncryptionPublicKeyManager();
+    this.messageManager = new MessageManager({
+      metricsEvent: this.metaMetricsController.trackEvent.bind(
+        this.metaMetricsController,
+      ),
+    });
+    this.personalMessageManager = new PersonalMessageManager({
+      metricsEvent: this.metaMetricsController.trackEvent.bind(
+        this.metaMetricsController,
+      ),
+    });
+    this.decryptMessageManager = new DecryptMessageManager({
+      metricsEvent: this.metaMetricsController.trackEvent.bind(
+        this.metaMetricsController,
+      ),
+    });
+    this.encryptionPublicKeyManager = new EncryptionPublicKeyManager({
+      metricsEvent: this.metaMetricsController.trackEvent.bind(
+        this.metaMetricsController,
+      ),
+    });
    this.typedMessageManager = new TypedMessageManager({
      getCurrentChainId: this.networkController.getCurrentChainId.bind(
        this.networkController,
      ),
+      metricsEvent: this.metaMetricsController.trackEvent.bind(
+        this.metaMetricsController,
+      ),
    });

    this.swapsController = new SwapsController({
@ -545,7 +619,7 @@ export default class MetamaskController extends EventEmitter {
      getProviderConfig: this.networkController.getProviderConfig.bind(
        this.networkController,
      ),
-      tokenRatesStore: this.tokenRatesController.state,
+      getTokenRatesState: () => this.tokenRatesController.state,
      getCurrentChainId: this.networkController.getCurrentChainId.bind(
        this.networkController,
      ),
@ -592,6 +666,7 @@ export default class MetamaskController extends EventEmitter {
      GasFeeController: this.gasFeeController,
      TokenListController: this.tokenListController,
      TokensController: this.tokensController,
+      CollectiblesController: this.collectiblesController,
    });

    this.memStore = new ComposableObservableStore({
@ -626,6 +701,7 @@ export default class MetamaskController extends EventEmitter {
        GasFeeController: this.gasFeeController,
        TokenListController: this.tokenListController,
        TokensController: this.tokensController,
+        CollectiblesController: this.collectiblesController,
      },
      controllerMessenger: this.controllerMessenger,
    });
@ -807,6 +883,7 @@ export default class MetamaskController extends EventEmitter {
      threeBoxController,
      txController,
      tokensController,
+      collectiblesController,
    } = this;

    return {
@ -924,6 +1001,26 @@ export default class MetamaskController extends EventEmitter {
        this.preferencesController.setDismissSeedBackUpReminder,
        this.preferencesController,
      ),
+      setAdvancedGasFee: nodeify(
+        preferencesController.setAdvancedGasFee,
+        preferencesController,
+      ),
+
+      // CollectiblesController
+      addCollectible: nodeify(
+        collectiblesController.addCollectible,
+        collectiblesController,
+      ),
+
+      removeAndIgnoreCollectible: nodeify(
+        collectiblesController.removeAndIgnoreCollectible,
+        collectiblesController,
+      ),
+
+      removeCollectible: nodeify(
+        collectiblesController.removeCollectible,
+        collectiblesController,
+      ),

      // AddressController
      setAddressBook: nodeify(
@ -985,9 +1082,7 @@ export default class MetamaskController extends EventEmitter {
      ),
      createCancelTransaction: nodeify(this.createCancelTransaction, this),
      createSpeedUpTransaction: nodeify(this.createSpeedUpTransaction, this),
-      isNonceTaken: nodeify(txController.isNonceTaken, txController),
      estimateGas: nodeify(this.estimateGas, this),
-      getPendingNonce: nodeify(this.getPendingNonce, this),
      getNextNonce: nodeify(this.getNextNonce, this),
      addUnapprovedTransaction: nodeify(
        txController.addUnapprovedTransaction,
@ -1071,13 +1166,6 @@ export default class MetamaskController extends EventEmitter {
        permissionsController.approvePermissionsRequest,
        permissionsController,
      ),
-      clearPermissions: permissionsController.clearPermissions.bind(
-        permissionsController,
-      ),
-      getApprovedAccounts: nodeify(
-        permissionsController.getAccounts,
-        permissionsController,
-      ),
      rejectPermissionsRequest: nodeify(
        permissionsController.rejectPermissionsRequest,
        permissionsController,
@ -1232,6 +1320,14 @@ export default class MetamaskController extends EventEmitter {
        this.detectTokensController.detectNewTokens,
        this.detectTokensController,
      ),
+
+      // DetectCollectibleController
+      detectCollectibles: process.env.COLLECTIBLES_V1
+        ? nodeify(
+            this.collectibleDetectionController.detectCollectibles,
+            this.collectibleDetectionController,
+          )
+        : null,
    };
  }

@ -1829,14 +1925,22 @@ export default class MetamaskController extends EventEmitter {
   * @param {Object} msgParams - The params passed to eth_sign.
   * @param {Function} cb - The callback function called with the signature.
   */
-  newUnsignedMessage(msgParams, req) {
-    const promise = this.messageManager.addUnapprovedMessageAsync(
-      msgParams,
-      req,
-    );
-    this.sendUpdate();
-    this.opts.showUserConfirmation();
-    return promise;
+  async newUnsignedMessage(msgParams, req) {
+    const data = normalizeMsgData(msgParams.data);
+    let promise;
+    // 64 hex + "0x" at the beginning
+    // This is needed because Ethereum's EcSign works only on 32 byte numbers
+    // For 67 length see: https://github.com/MetaMask/metamask-extension/pull/12679/files#r749479607
+    if (data.length === 66 || data.length === 67) {
+      promise = this.messageManager.addUnapprovedMessageAsync(msgParams, req);
+      this.sendUpdate();
+      this.opts.showUserConfirmation();
+    } else {
+      throw ethErrors.rpc.invalidParams(
+        'eth_sign requires 32 byte message hash',
+      );
+    }
+    return await promise;
  }

  /**
@ -1845,24 +1949,23 @@ export default class MetamaskController extends EventEmitter {
   * @param {Object} msgParams - The params passed to eth_call.
   * @returns {Promise<Object>} Full state update.
   */
-  signMessage(msgParams) {
+  async signMessage(msgParams) {
    log.info('MetaMaskController - signMessage');
    const msgId = msgParams.metamaskId;
-
-    // sets the status op the message to 'approved'
-    // and removes the metamaskId for signing
-    return this.messageManager
-      .approveMessage(msgParams)
-      .then((cleanMsgParams) => {
-        // signs the message
-        return this.keyringController.signMessage(cleanMsgParams);
-      })
-      .then((rawSig) => {
-        // tells the listener that the message has been signed
-        // and can be returned to the dapp
-        this.messageManager.setMsgStatusSigned(msgId, rawSig);
-        return this.getState();
-      });
+    try {
+      // sets the status op the message to 'approved'
+      // and removes the metamaskId for signing
+      const cleanMsgParams = await this.messageManager.approveMessage(
+        msgParams,
+      );
+      const rawSig = await this.keyringController.signMessage(cleanMsgParams);
+      this.messageManager.setMsgStatusSigned(msgId, rawSig);
+      return this.getState();
+    } catch (error) {
+      log.info('MetaMaskController - eth_sign failed', error);
+      this.messageManager.errorMessage(msgId, error);
+      throw error;
+    }
  }

  /**
@ -1909,23 +2012,27 @@ export default class MetamaskController extends EventEmitter {
   * @param {Object} msgParams - The params of the message to sign & return to the Dapp.
   * @returns {Promise<Object>} A full state update.
   */
-  signPersonalMessage(msgParams) {
+  async signPersonalMessage(msgParams) {
    log.info('MetaMaskController - signPersonalMessage');
    const msgId = msgParams.metamaskId;
    // sets the status op the message to 'approved'
    // and removes the metamaskId for signing
-    return this.personalMessageManager
-      .approveMessage(msgParams)
-      .then((cleanMsgParams) => {
-        // signs the message
-        return this.keyringController.signPersonalMessage(cleanMsgParams);
-      })
-      .then((rawSig) => {
-        // tells the listener that the message has been signed
-        // and can be returned to the dapp
-        this.personalMessageManager.setMsgStatusSigned(msgId, rawSig);
-        return this.getState();
-      });
+    try {
+      const cleanMsgParams = await this.personalMessageManager.approveMessage(
+        msgParams,
+      );
+      const rawSig = await this.keyringController.signPersonalMessage(
+        cleanMsgParams,
+      );
+      // tells the listener that the message has been signed
+      // and can be returned to the dapp
+      this.personalMessageManager.setMsgStatusSigned(msgId, rawSig);
+      return this.getState();
+    } catch (error) {
+      log.info('MetaMaskController - eth_personalSign failed', error);
+      this.personalMessageManager.errorMessage(msgId, error);
+      throw error;
+    }
  }

  /**
--- a/app/scripts/metamask-controller.test.js
+++ b/app/scripts/metamask-controller.test.js
@ -835,7 +835,8 @@ describe('MetaMaskController', function () {
    let msgParams, metamaskMsgs, messages, msgId;

    const address = '0xc42edfcc21ed14dda456aa0756c153f7985d8813';
-    const data = '0x43727970746f6b697474696573';
+    const data =
+      '0x0000000000000000000000000000000000000043727970746f6b697474696573';

    beforeEach(async function () {
      sandbox.stub(metamaskController, 'getBalance');
@ -885,6 +886,19 @@ describe('MetaMaskController', function () {
      assert.equal(messages[0].status, TRANSACTION_STATUSES.REJECTED);
    });

+    it('checks message length', async function () {
+      msgParams = {
+        from: address,
+        data: '0xDEADBEEF',
+      };
+
+      try {
+        await metamaskController.newUnsignedMessage(msgParams);
+      } catch (error) {
+        assert.equal(error.message, 'eth_sign requires 32 byte message hash');
+      }
+    });
+
    it('errors when signing a message', async function () {
      try {
        await metamaskController.signMessage(messages[0].msgParams);
--- a/app/scripts/platforms/extension.js
+++ b/app/scripts/platforms/extension.js
@ -162,6 +162,10 @@ export default class ExtensionPlatform {
    }
  }

+  addOnRemovedListener(listener) {
+    extension.windows.onRemoved.addListener(listener);
+  }
+
  getAllWindows() {
    return new Promise((resolve, reject) => {
      extension.windows.getAll((windows) => {
--- a/development/build/scripts.js
+++ b/development/build/scripts.js
@ -358,10 +358,14 @@ function createFactoredBuild({
    // lavamoat will add lavapack but it will be removed by bify-module-groups
    // we will re-add it later by installing a lavapack runtime
    const lavamoatOpts = {
-      policy: path.resolve(__dirname, '../../lavamoat/browserify/policy.json'),
+      policy: path.resolve(
+        __dirname,
+        `../../lavamoat/browserify/${buildType}/policy.json`,
+      ),
+      policyName: buildType,
      policyOverride: path.resolve(
        __dirname,
-        '../../lavamoat/browserify/policy-override.json',
+        `../../lavamoat/browserify/${buildType}/policy-override.json`,
      ),
      writeAutoPolicy: process.env.WRITE_AUTO_POLICY,
    };
@ -456,7 +460,7 @@ function createFactoredBuild({
              groupSet,
              commonSet,
              browserPlatforms,
-              useLavamoat: false,
+              useLavamoat: true,
            });
            break;
          }
--- a/development/build/transforms/remove-fenced-code.js
+++ b/development/build/transforms/remove-fenced-code.js
@ -41,11 +41,16 @@ class RemoveFencedCodeTransform extends Transform {
  // stream, immediately before the "end" event is emitted.
  // It applies the transform to the concatenated file contents.
  _flush(end) {
-    const [fileContent, didModify] = removeFencedCode(
-      this.filePath,
-      this.buildType,
-      Buffer.concat(this._fileBuffers).toString('utf8'),
-    );
+    let fileContent, didModify;
+    try {
+      [fileContent, didModify] = removeFencedCode(
+        this.filePath,
+        this.buildType,
+        Buffer.concat(this._fileBuffers).toString('utf8'),
+      );
+    } catch (error) {
+      return end(error);
+    }

    const pushAndEnd = () => {
      this.push(fileContent);
@ -53,12 +58,11 @@ class RemoveFencedCodeTransform extends Transform {
    };

    if (this.shouldLintTransformedFiles && didModify) {
-      lintTransformedFile(fileContent, this.filePath)
+      return lintTransformedFile(fileContent, this.filePath)
        .then(pushAndEnd)
        .catch((error) => end(error));
-    } else {
-      pushAndEnd();
    }
+    return pushAndEnd();
  }
 }

--- a/development/build/transforms/remove-fenced-code.test.js
+++ b/development/build/transforms/remove-fenced-code.test.js
@ -161,6 +161,28 @@ describe('build/transforms/remove-fenced-code', () => {
      });
    });

+    it('handles error during code fence removal or parsing', async () => {
+      const fileContent = getMinimalFencedCode().concat(
+        '///: END:ONLY_INCLUDE_IN',
+      );
+
+      const stream = createRemoveFencedCodeTransform('main')(mockJsFileName);
+
+      await new Promise((resolve) => {
+        stream.on('error', (error) => {
+          expect(error.message).toStrictEqual(
+            expect.stringContaining(
+              'A valid fence consists of two fence lines, but the file contains an uneven number, "3", of fence lines.',
+            ),
+          );
+          expect(lintTransformedFileMock).toHaveBeenCalledTimes(0);
+          resolve();
+        });
+
+        stream.end(fileContent);
+      });
+    });
+
    it('handles transformed file lint failure', async () => {
      lintTransformedFileMock.mockImplementationOnce(() =>
        Promise.reject(new Error('lint failure')),
--- a/development/generate-lavamoat-policies.sh
+++ b/development/generate-lavamoat-policies.sh
@ -0,0 +1,13 @@
+#!/usr/bin/env bash
+
+set -e
+set -u
+set -o pipefail
+
+# Generate LavaMoat policies for the extension background script for each build
+# type.
+# ATTN: This may tax your device when running it locally.
+concurrently --kill-others-on-fail -n main,beta,flask \
+  "WRITE_AUTO_POLICY=1 yarn dist" \
+  "WRITE_AUTO_POLICY=1 yarn dist --build-type beta" \
+  "WRITE_AUTO_POLICY=1 yarn dist --build-type flask"
--- a/development/verify-locale-strings.js
+++ b/development/verify-locale-strings.js
@ -216,7 +216,12 @@ async function verifyEnglishLocale() {
  }

  // never consider these messages as unused
-  const messageExceptions = ['appName', 'appDescription'];
+  const messageExceptions = [
+    'appName',
+    'appNameBeta',
+    'appNameFlask',
+    'appDescription',
+  ];

  const englishMessages = Object.keys(englishLocale);
  const unusedMessages = englishMessages.filter(
--- a/lavamoat/browserify/beta/policy-override.json
+++ b/lavamoat/browserify/beta/policy-override.json
--- a/lavamoat/browserify/beta/policy.json
+++ b/lavamoat/browserify/beta/policy.json
@ -325,6 +325,7 @@
        "@ethersproject/bignumber": true,
        "@ethersproject/bytes": true,
        "@ethersproject/keccak256": true,
+        "@ethersproject/logger": true,
        "@ethersproject/sha2": true,
        "@ethersproject/strings": true
      }
@ -525,6 +526,7 @@
        "ethjs-util": true,
        "events": true,
        "human-standard-collectible-abi": true,
+        "human-standard-multi-collectible-abi": true,
        "human-standard-token-abi": true,
        "immer": true,
        "isomorphic-fetch": true,
@ -1555,11 +1557,15 @@
    },
    "eth-json-rpc-middleware": {
      "globals": {
+        "URL": true,
+        "btoa": true,
        "console.error": true,
        "fetch": true,
        "setTimeout": true
      },
      "packages": {
+        "@metamask/safe-event-emitter": true,
+        "browser-resolve": true,
        "btoa": true,
        "clone": true,
        "eth-rpc-errors": true,
--- a/lavamoat/browserify/flask/policy-override.json
+++ b/lavamoat/browserify/flask/policy-override.json
@ -0,0 +1,55 @@
+{
+  "resources": {
+    "browser-resolve": {
+      "packages": {
+        "core-js": true
+      }
+    },
+    "babel-runtime": {
+      "packages": {
+        "@babel/runtime": true
+      }
+    },
+    "node-fetch": {
+      "globals": {
+        "fetch": true
+      }
+    },
+    "lodash": {
+      "globals": {
+        "setTimeout": true,
+        "clearTimeout": true
+      }
+    },
+    "@ethersproject/random": {
+      "globals": {
+        "crypto.getRandomValues": true
+      }
+    },
+    "browser-passworder": {
+      "globals": {
+        "crypto": true
+      }
+    },
+    "randombytes": {
+      "globals": {
+        "crypto.getRandomValues": true
+      }
+    },
+    "extensionizer": {
+      "globals": {
+        "console": true
+      }
+    },
+    "web3": {
+      "globals": {
+        "XMLHttpRequest": true
+      }
+    },
+    "storage": {
+      "globals": {
+        "localStorage": true
+      }
+    }
+  }
+}
--- a/lavamoat/browserify/flask/policy.json
+++ b/lavamoat/browserify/flask/policy.json
--- a/lavamoat/browserify/main/policy-override.json
+++ b/lavamoat/browserify/main/policy-override.json
@ -0,0 +1,55 @@
+{
+  "resources": {
+    "browser-resolve": {
+      "packages": {
+        "core-js": true
+      }
+    },
+    "babel-runtime": {
+      "packages": {
+        "@babel/runtime": true
+      }
+    },
+    "node-fetch": {
+      "globals": {
+        "fetch": true
+      }
+    },
+    "lodash": {
+      "globals": {
+        "setTimeout": true,
+        "clearTimeout": true
+      }
+    },
+    "@ethersproject/random": {
+      "globals": {
+        "crypto.getRandomValues": true
+      }
+    },
+    "browser-passworder": {
+      "globals": {
+        "crypto": true
+      }
+    },
+    "randombytes": {
+      "globals": {
+        "crypto.getRandomValues": true
+      }
+    },
+    "extensionizer": {
+      "globals": {
+        "console": true
+      }
+    },
+    "web3": {
+      "globals": {
+        "XMLHttpRequest": true
+      }
+    },
+    "storage": {
+      "globals": {
+        "localStorage": true
+      }
+    }
+  }
+}
--- a/lavamoat/browserify/main/policy.json
+++ b/lavamoat/browserify/main/policy.json
--- a/lavamoat/build-system/policy-override.json
+++ b/lavamoat/build-system/policy-override.json
--- a/lavamoat/build-system/policy.json
+++ b/lavamoat/build-system/policy.json
--- a/package.json
+++ b/package.json
@ -12,7 +12,7 @@
    "start": "yarn build:dev dev",
    "start:lavamoat": "yarn build dev",
    "dist": "yarn build prod",
-    "build": "lavamoat development/build/index.js",
+    "build": "yarn lavamoat:build",
    "build:dev": "node development/build/index.js",
    "start:test": "yarn build testDev",
    "benchmark:chrome": "SELENIUM_BROWSER=chrome node test/e2e/benchmark.js",
@ -41,8 +41,9 @@
    "test:coverage:path": "nyc --check-coverage yarn test:unit:path",
    "ganache:start": "./development/run-ganache.sh",
    "sentry:publish": "node ./development/sentry-publish.js",
-    "lint": "prettier --check '**/*.json' && eslint . --ext js,snap --cache && yarn lint:styles",
-    "lint:fix": "prettier --write '**/*.json' && eslint . --ext js --cache --fix",
+    "lint:prettier": "prettier '**/*.json'",
+    "lint": "yarn lint:prettier --check '**/*.json' && eslint . --ext js,snap --cache && yarn lint:styles",
+    "lint:fix": "yarn lint:prettier --write '**/*.json' && eslint . --ext js --cache --fix",
    "lint:changed": "{ git ls-files --others --exclude-standard ; git diff-index --name-only --diff-filter=d HEAD ; } | grep --regexp='[.]js$' | tr '\\n' '\\0' | xargs -0 eslint",
    "lint:changed:fix": "{ git ls-files --others --exclude-standard ; git diff-index --name-only --diff-filter=d HEAD ; } | grep --regexp='[.]js$' | tr '\\n' '\\0' | xargs -0 eslint --fix",
    "lint:changelog": "auto-changelog validate",
@ -63,9 +64,10 @@
    "storybook:deploy": "storybook-to-ghpages --existing-output-dir storybook-build --remote storybook --branch master",
    "update-changelog": "auto-changelog update",
    "generate:migration": "./development/generate-migration.sh",
-    "lavamoat:build:auto": "lavamoat ./development/build/index.js --writeAutoPolicy",
-    "lavamoat:debug:build": "lavamoat ./development/build/index.js --writeAutoPolicyDebug",
-    "lavamoat:background:auto": "WRITE_AUTO_POLICY=1 yarn build prod",
+    "lavamoat:build": "lavamoat development/build/index.js --policy lavamoat/build-system/policy.json --policyOverride lavamoat/build-system/policy-override.json",
+    "lavamoat:build:auto": "yarn lavamoat:build --writeAutoPolicy",
+    "lavamoat:debug:build": "yarn lavamoat:build --writeAutoPolicyDebug --policydebug lavamoat/build-system/policy-debug.json",
+    "lavamoat:background:auto": "./development/generate-lavamoat-policies.sh",
    "lavamoat:auto": "yarn lavamoat:build:auto && yarn lavamoat:background:auto"
  },
  "resolutions": {
@ -91,7 +93,8 @@
    "netmask": "^2.0.1",
    "pubnub/superagent-proxy": "^3.0.0",
    "pull-ws": "^3.3.2",
-    "ws": "^7.4.6"
+    "ws": "^7.4.6",
+    "json-schema": "^0.4.0"
  },
  "dependencies": {
    "3box": "^1.10.2",
@ -105,7 +108,7 @@
    "@fortawesome/fontawesome-free": "^5.13.0",
    "@material-ui/core": "^4.11.0",
    "@metamask/contract-metadata": "^1.28.0",
-    "@metamask/controllers": "^17.0.0",
+    "@metamask/controllers": "^20.0.0",
    "@metamask/eth-ledger-bridge-keyring": "^0.10.0",
    "@metamask/eth-token-tracker": "^3.0.1",
    "@metamask/etherscan-link": "^2.1.0",
@ -135,7 +138,7 @@
    "eth-ens-namehash": "^2.0.8",
    "eth-json-rpc-filters": "^4.2.1",
    "eth-json-rpc-infura": "^5.1.0",
-    "eth-json-rpc-middleware": "^6.0.0",
+    "eth-json-rpc-middleware": "^8.0.0",
    "eth-keyring-controller": "^6.2.0",
    "eth-lattice-keyring": "^0.4.0",
    "eth-method-registry": "^2.0.0",
@ -221,7 +224,7 @@
    "@babel/preset-react": "^7.0.0",
    "@babel/register": "^7.5.5",
    "@lavamoat/allow-scripts": "^1.0.6",
-    "@lavamoat/lavapack": "^2.0.3",
+    "@lavamoat/lavapack": "^2.0.4",
    "@metamask/auto-changelog": "^2.1.0",
    "@metamask/eslint-config": "^6.0.0",
    "@metamask/eslint-config-jest": "^6.0.0",
--- a/shared/constants/gas.js
+++ b/shared/constants/gas.js
@ -30,6 +30,17 @@ export const GAS_RECOMMENDATIONS = {
  HIGH: 'high',
 };

+/**
+ * These represent types of gas estimation
+ */
+export const PRIORITY_LEVELS = {
+  LOW: 'low',
+  MEDIUM: 'medium',
+  HIGH: 'high',
+  CUSTOM: 'custom',
+  DAPP_SUGGESTED: 'dappSuggested',
+};
+
 /**
 * Represents the user customizing their gas preference
 */
--- a/shared/constants/metametrics.js
+++ b/shared/constants/metametrics.js
@ -140,3 +140,7 @@ export const METAMETRICS_BACKGROUND_PAGE_OBJECT = {
 * @property {() => void} identify - Identify an anonymous user. We do not
 *  currently use this method.
 */
+
+export const REJECT_NOTFICIATION_CLOSE = 'Cancel Via Notification Close';
+export const REJECT_NOTFICIATION_CLOSE_SIG =
+  'Cancel Sig Request Via Notification Close';
--- a/shared/constants/network.js
+++ b/shared/constants/network.js
@ -161,3 +161,13 @@ export const CHAIN_ID_TO_GAS_LIMIT_BUFFER_MAP = {
  [OPTIMISM_CHAIN_ID]: 1,
  [OPTIMISM_TESTNET_CHAIN_ID]: 1,
 };
+
+/**
+ * Ethereum JSON-RPC methods that are known to exist but that we intentionally
+ * do not support.
+ */
+export const UNSUPPORTED_RPC_METHODS = new Set([
+  // This is implemented later in our middleware stack – specifically, in
+  // eth-json-rpc-middleware – but our UI does not support it.
+  'eth_signTransaction',
+]);
--- a/test/data/mock-state.json
+++ b/test/data/mock-state.json
@ -160,6 +160,10 @@
      "toNickname": ""
    },
    "useTokenDetection": true,
+    "advancedGasFee": {
+      "maxBaseFee": "1.5",
+      "priorityFee": "2"
+    },
    "tokenList": {
      "0x2260fac5e5542a773aa44fbcfedf7c193bc2c599": {
        "address": "0x2260fac5e5542a773aa44fbcfedf7c193bc2c599",
--- a/test/e2e/tests/from-import-ui.spec.js
+++ b/test/e2e/tests/from-import-ui.spec.js
@ -27,38 +27,72 @@ describe('Metamask Import UI', function () {
      async ({ driver }) => {
        await driver.navigate();

-        // clicks the continue button on the welcome screen
-        await driver.findElement('.welcome-page__header');
-        await driver.clickElement({
-          text: enLocaleMessages.getStarted.message,
-          tag: 'button',
-        });
+        if (process.env.ONBOARDING_V2 === '1') {
+          // welcome
+          await driver.clickElement('[data-testid="onboarding-import-wallet"]');

-        // clicks the "Import Wallet" option
-        await driver.clickElement({ text: 'Import wallet', tag: 'button' });
+          // metrics
+          await driver.clickElement('[data-testid="metametrics-no-thanks"]');

-        // clicks the "No thanks" option on the metametrics opt-in screen
-        await driver.clickElement('.btn-secondary');
+          // import with recovery phrase
+          await driver.fill('[data-testid="import-srp-text"]', testSeedPhrase);
+          await driver.clickElement('[data-testid="import-srp-confirm"]');

-        // Import Secret Recovery Phrase
-        await driver.fill(
-          'input[placeholder="Paste Secret Recovery Phrase from clipboard"]',
-          testSeedPhrase,
-        );
+          // create password
+          await driver.fill(
+            '[data-testid="create-password-new"]',
+            'correct horse battery staple',
+          );
+          await driver.fill(
+            '[data-testid="create-password-confirm"]',
+            'correct horse battery staple',
+          );
+          await driver.clickElement('[data-testid="create-password-terms"]');
+          await driver.clickElement('[data-testid="create-password-import"]');

-        await driver.fill('#password', 'correct horse battery staple');
-        await driver.fill('#confirm-password', 'correct horse battery staple');
+          // complete
+          await driver.clickElement('[data-testid="onboarding-complete-done"]');

-        await driver.clickElement('.first-time-flow__terms');
+          // pin extension
+          await driver.clickElement('[data-testid="pin-extension-next"]');
+          await driver.clickElement('[data-testid="pin-extension-done"]');
+        } else {
+          // clicks the continue button on the welcome screen
+          await driver.findElement('.welcome-page__header');
+          await driver.clickElement({
+            text: enLocaleMessages.getStarted.message,
+            tag: 'button',
+          });

-        await driver.clickElement({ text: 'Import', tag: 'button' });
+          // clicks the "Import Wallet" option
+          await driver.clickElement({ text: 'Import wallet', tag: 'button' });

-        // clicks through the success screen
-        await driver.findElement({ text: 'Congratulations', tag: 'div' });
-        await driver.clickElement({
-          text: enLocaleMessages.endOfFlowMessage10.message,
-          tag: 'button',
-        });
+          // clicks the "No thanks" option on the metametrics opt-in screen
+          await driver.clickElement('.btn-secondary');
+
+          // Import Secret Recovery Phrase
+          await driver.fill(
+            'input[placeholder="Paste Secret Recovery Phrase from clipboard"]',
+            testSeedPhrase,
+          );
+
+          await driver.fill('#password', 'correct horse battery staple');
+          await driver.fill(
+            '#confirm-password',
+            'correct horse battery staple',
+          );
+
+          await driver.clickElement('.first-time-flow__terms');
+
+          await driver.clickElement({ text: 'Import', tag: 'button' });
+
+          // clicks through the success screen
+          await driver.findElement({ text: 'Congratulations', tag: 'div' });
+          await driver.clickElement({
+            text: enLocaleMessages.endOfFlowMessage10.message,
+            tag: 'button',
+          });
+        }

        // Show account information
        await driver.clickElement(
@ -233,10 +267,15 @@ describe('Metamask Import UI', function () {
        // should remove the account
        await driver.clickElement({ text: 'Remove', tag: 'button' });

-        const currentActiveAccountName = await driver.findElement(
-          '.selected-account__name',
+        // Wait until selected account switches away from removed account to first account
+        await driver.waitForSelector(
+          {
+            css: '.selected-account__name',
+            text: 'Account 1',
+          },
+          { timeout: 10000 },
        );
-        assert.equal(await currentActiveAccountName.getText(), 'Account 1');
+
        await driver.delay(regularDelayMs);
        await driver.clickElement('.account-menu__icon');

--- a/test/e2e/tests/metamask-responsive-ui.spec.js
+++ b/test/e2e/tests/metamask-responsive-ui.spec.js
@ -16,50 +16,6 @@ describe('Metamask Responsive UI', function () {
      async ({ driver }) => {
        await driver.navigate();

-        // clicks the continue button on the welcome screen
-        await driver.findElement('.welcome-page__header');
-        await driver.clickElement({
-          text: enLocaleMessages.getStarted.message,
-          tag: 'button',
-        });
-        await driver.delay(tinyDelayMs);
-
-        // clicks the "Create New Wallet" option
-        await driver.clickElement({ text: 'Create a Wallet', tag: 'button' });
-
-        // clicks the "I Agree" option on the metametrics opt-in screen
-        await driver.clickElement('.btn-primary');
-
-        // accepts a secure password
-        await driver.fill(
-          '.first-time-flow__form #create-password',
-          'correct horse battery staple',
-        );
-        await driver.fill(
-          '.first-time-flow__form #confirm-password',
-          'correct horse battery staple',
-        );
-        await driver.clickElement('.first-time-flow__checkbox');
-        await driver.clickElement('.first-time-flow__form button');
-
-        // renders the Secret Recovery Phrase intro screen
-        await driver.clickElement('.seed-phrase-intro__left button');
-
-        // reveals the Secret Recovery Phrase
-        await driver.clickElement(
-          '.reveal-seed-phrase__secret-blocker .reveal-seed-phrase__reveal-button',
-        );
-        const revealedSeedPhrase = await driver.findElement(
-          '.reveal-seed-phrase__secret-words',
-        );
-        const seedPhrase = await revealedSeedPhrase.getText();
-        assert.equal(seedPhrase.split(' ').length, 12);
-
-        await driver.clickElement({
-          text: enLocaleMessages.next.message,
-          tag: 'button',
-        });
-
        async function clickWordAndWait(word) {
          await driver.clickElement(
            `[data-testid="seed-phrase-sorted"] [data-testid="draggable-seed-${word}"]`,
@ -67,26 +23,126 @@ describe('Metamask Responsive UI', function () {
          await driver.delay(tinyDelayMs);
        }

-        // can retype the Secret Recovery Phrase
-        const words = seedPhrase.split(' ');
-        for (const word of words) {
-          await clickWordAndWait(word);
+        if (process.env.ONBOARDING_V2 === '1') {
+          // welcome
+          await driver.clickElement('[data-testid="onboarding-create-wallet"]');
+
+          // metrics
+          await driver.clickElement('[data-testid="metametrics-no-thanks"]');
+
+          // create password
+          await driver.fill(
+            '[data-testid="create-password-new"]',
+            'correct horse battery staple',
+          );
+          await driver.fill(
+            '[data-testid="create-password-confirm"]',
+            'correct horse battery staple',
+          );
+          await driver.clickElement('[data-testid="create-password-terms"]');
+          await driver.clickElement('[data-testid="create-password-wallet"]');
+
+          // secure wallet
+          await driver.clickElement(
+            '[data-testid="secure-wallet-recommended"]',
+          );
+
+          // review
+          await driver.clickElement('[data-testid="recovery-phrase-reveal"]');
+          const chipTwo = await (
+            await driver.findElement('[data-testid="recovery-phrase-chip-2"]')
+          ).getText();
+          const chipThree = await (
+            await driver.findElement('[data-testid="recovery-phrase-chip-3"]')
+          ).getText();
+          const chipSeven = await (
+            await driver.findElement('[data-testid="recovery-phrase-chip-7"]')
+          ).getText();
+          await driver.clickElement('[data-testid="recovery-phrase-next"]');
+
+          // confirm
+          await driver.fill('[data-testid="recovery-phrase-input-2"]', chipTwo);
+          await driver.fill(
+            '[data-testid="recovery-phrase-input-3"]',
+            chipThree,
+          );
+          await driver.fill(
+            '[data-testid="recovery-phrase-input-7"]',
+            chipSeven,
+          );
+          await driver.clickElement('[data-testid="recovery-phrase-confirm"]');
+
+          // complete
+          await driver.clickElement('[data-testid="onboarding-complete-done"]');
+
+          // pin extension
+          await driver.clickElement('[data-testid="pin-extension-next"]');
+          await driver.clickElement('[data-testid="pin-extension-done"]');
+        } else {
+          // clicks the continue button on the welcome screen
+          await driver.findElement('.welcome-page__header');
+          await driver.clickElement({
+            text: enLocaleMessages.getStarted.message,
+            tag: 'button',
+          });
+          await driver.delay(tinyDelayMs);
+
+          // clicks the "Create New Wallet" option
+          await driver.clickElement({ text: 'Create a Wallet', tag: 'button' });
+
+          // clicks the "I Agree" option on the metametrics opt-in screen
+          await driver.clickElement('.btn-primary');
+
+          // accepts a secure password
+          await driver.fill(
+            '.first-time-flow__form #create-password',
+            'correct horse battery staple',
+          );
+          await driver.fill(
+            '.first-time-flow__form #confirm-password',
+            'correct horse battery staple',
+          );
+          await driver.clickElement('.first-time-flow__checkbox');
+          await driver.clickElement('.first-time-flow__form button');
+
+          // renders the Secret Recovery Phrase intro screen
+          await driver.clickElement('.seed-phrase-intro__left button');
+
+          // reveals the Secret Recovery Phrase
+          await driver.clickElement(
+            '.reveal-seed-phrase__secret-blocker .reveal-seed-phrase__reveal-button',
+          );
+          const revealedSeedPhrase = await driver.findElement(
+            '.reveal-seed-phrase__secret-words',
+          );
+          const seedPhrase = await revealedSeedPhrase.getText();
+          assert.equal(seedPhrase.split(' ').length, 12);
+
+          await driver.clickElement({
+            text: enLocaleMessages.next.message,
+            tag: 'button',
+          });
+
+          // can retype the Secret Recovery Phrase
+          const words = seedPhrase.split(' ');
+          for (const word of words) {
+            await clickWordAndWait(word);
+          }
+          await driver.clickElement({ text: 'Confirm', tag: 'button' });
+
+          // clicks through the success screen
+          await driver.findElement({ text: 'Congratulations', tag: 'div' });
+          await driver.clickElement({
+            text: enLocaleMessages.endOfFlowMessage10.message,
+            tag: 'button',
+          });
        }
-        await driver.clickElement({ text: 'Confirm', tag: 'button' });

-        // clicks through the success screen
-        await driver.findElement({ text: 'Congratulations', tag: 'div' });
-        await driver.clickElement({
-          text: enLocaleMessages.endOfFlowMessage10.message,
-          tag: 'button',
-        });
-
-        // Show account information
-        // balance renders
-        await driver.waitForSelector({
-          css: '[data-testid="eth-overview__primary-currency"]',
-          text: '0 ETH',
-        });
+        // assert balance
+        const balance = await driver.findElement(
+          '[data-testid="wallet-balance"]',
+        );
+        assert.ok(/^0\sETH$/u.test(await balance.getText()));
      },
    );
  });
--- a/test/e2e/tests/provider-events.spec.js
+++ b/test/e2e/tests/provider-events.spec.js
@ -1,17 +1,19 @@
 const { strict: assert } = require('assert');
+const { errorCodes } = require('eth-rpc-errors');
 const { withFixtures } = require('../helpers');

 describe('MetaMask', function () {
+  const ganacheOptions = {
+    accounts: [
+      {
+        secretKey:
+          '0x7C9529A67102755B7E6102D6D950AC5D5863C98713805CEC576B945B15B71EAC',
+        balance: 25000000000000000000,
+      },
+    ],
+  };
+
  it('provider should inform dapp when switching networks', async function () {
-    const ganacheOptions = {
-      accounts: [
-        {
-          secretKey:
-            '0x7C9529A67102755B7E6102D6D950AC5D5863C98713805CEC576B945B15B71EAC',
-          balance: 25000000000000000000,
-        },
-      ],
-    };
    await withFixtures(
      {
        dapp: true,
@ -62,4 +64,48 @@ describe('MetaMask', function () {
      },
    );
  });
+
+  it('should reject unsupported methods', async function () {
+    await withFixtures(
+      {
+        dapp: true,
+        failOnConsoleError: false,
+        fixtures: 'connected-state',
+        ganacheOptions,
+        title: this.test.title,
+      },
+      async ({ driver }) => {
+        await driver.navigate();
+        await driver.fill('#password', 'correct horse battery staple');
+        await driver.press('#password', driver.Key.ENTER);
+
+        await driver.openNewPage('http://127.0.0.1:8080/');
+        for (const unsupportedMethod of ['eth_signTransaction']) {
+          assert.equal(
+            await driver.executeAsyncScript(`
+              const webDriverCallback = arguments[arguments.length - 1];
+              window.ethereum.request({ method: '${unsupportedMethod}' })
+                .then(() => {
+                  console.error('The unsupported method "${unsupportedMethod}" was not rejected.');
+                  webDriverCallback(false);
+                })
+                .catch((error) => {
+                  if (error.code === ${errorCodes.rpc.methodNotSupported}) {
+                    webDriverCallback(true);
+                  }
+
+                  console.error(
+                    'The unsupported method "${unsupportedMethod}" was rejected with an unexpected error.',
+                    error,
+                  );
+                  webDriverCallback(false);
+                })
+            `),
+            true,
+            `The unsupported method "${unsupportedMethod}" should be rejected by the provider.`,
+          );
+        }
+      },
+    );
+  });
 });
--- a/test/e2e/webdriver/driver.js
+++ b/test/e2e/webdriver/driver.js
@ -29,6 +29,10 @@ function wrapElementWithAPI(element, driver) {
  return element;
 }

+/**
+ * For Selenium WebDriver API documentation, see:
+ * https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
+ */
 class Driver {
  /**
   * @param {!ThenableWebDriver} driver - A {@code WebDriver} instance
@ -49,6 +53,10 @@ class Driver {
    };
  }

+  async executeAsyncScript(script, ...args) {
+    return this.driver.executeAsyncScript(script, args);
+  }
+
  async executeScript(script, ...args) {
    return this.driver.executeScript(script, args);
  }
--- a/test/stub/provider.js
+++ b/test/stub/provider.js
@ -1,6 +1,5 @@
-import { JsonRpcEngine } from 'json-rpc-engine';
-import scaffoldMiddleware from 'eth-json-rpc-middleware/scaffold';
-import providerAsMiddleware from 'eth-json-rpc-middleware/providerAsMiddleware';
+import { JsonRpcEngine, createScaffoldMiddleware } from 'json-rpc-engine';
+import { providerAsMiddleware } from 'eth-json-rpc-middleware';
 import GanacheCore from 'ganache-core';

 export function getTestSeed() {
@ -45,7 +44,7 @@ export function providerFromEngine(engine) {
 export function createTestProviderTools(opts = {}) {
  const engine = createEngineForTestData();
  // handle provided hooks
-  engine.push(scaffoldMiddleware(opts.scaffold || {}));
+  engine.push(createScaffoldMiddleware(opts.scaffold || {}));
  // handle block tracker methods
  engine.push(
    providerAsMiddleware(
--- a/ui/components/app/app-components.scss
+++ b/ui/components/app/app-components.scss
@ -13,6 +13,8 @@
@import 'connected-status-indicator/index';
@import 'edit-gas-display/index';
@import 'edit-gas-display-education/index';
+@import 'edit-gas-fee-popover/index';
+@import 'edit-gas-fee-popover/edit-gas-item/index';
@import 'gas-customization/gas-modal-page-container/index';
@import 'gas-customization/gas-price-button-group/index';
@import 'gas-customization/index';
--- a/ui/components/app/collectibles-list/collectibles-list.component.js
+++ b/ui/components/app/collectibles-list/collectibles-list.component.js
@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import Box from '../../ui/box';
 import Button from '../../ui/button';
 import Typography from '../../ui/typography/typography';
+import NewCollectiblesNotice from '../new-collectibles-notice';
 import {
  COLORS,
  TYPOGRAPHY,
@ -15,6 +16,7 @@ import { useI18nContext } from '../../../hooks/useI18nContext';

 export default function CollectiblesList({ onAddNFT }) {
  const collectibles = [];
+  const newNFTsDetected = true;
  const t = useI18nContext();

  return (
@ -22,7 +24,8 @@ export default function CollectiblesList({ onAddNFT }) {
      {collectibles.length > 0 ? (
        <span>{JSON.stringify(collectibles)}</span>
      ) : (
-        <Box padding={[4, 0, 4, 0]}>
+        <Box padding={[6, 12, 6, 12]}>
+          {newNFTsDetected ? <NewCollectiblesNotice /> : null}
          <Box justifyContent={JUSTIFY_CONTENT.CENTER}>
            <img src="./images/no-nfts.svg" />
          </Box>
--- a/ui/components/app/confirm-page-container/confirm-page-container-container.test.js
+++ b/ui/components/app/confirm-page-container/confirm-page-container-container.test.js
@ -10,6 +10,14 @@ import ConfirmPageContainer, {
  ConfirmPageContainerNavigation,
 } from '.';

+jest.mock('../../../store/actions', () => ({
+  disconnectGasFeeEstimatePoller: jest.fn(),
+  getGasFeeEstimatesAndStartPolling: jest
+    .fn()
+    .mockImplementation(() => Promise.resolve()),
+  addPollingTokenToAppState: jest.fn(),
+}));
+
 describe('Confirm Page Container Container Test', () => {
  let wrapper;

@ -31,6 +39,8 @@ describe('Confirm Page Container Container Test', () => {
      selectedAddress: '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5',
      addressBook: [],
      chainId: 'test',
+      identities: [],
+      featureFlags: {},
    },
  };

--- a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
+++ b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Tabs, Tab } from '../../../ui/tabs';
 import ErrorMessage from '../../../ui/error-message';
+import ActionableMessage from '../../../ui/actionable-message/actionable-message';
 import { PageContainerFooter } from '../../../ui/page-container';
 import { ConfirmPageContainerSummary, ConfirmPageContainerWarning } from '.';

@ -17,6 +18,7 @@ export default class ConfirmPageContainerContent extends Component {
    detailsComponent: PropTypes.node,
    errorKey: PropTypes.string,
    errorMessage: PropTypes.string,
+    hasSimulationError: PropTypes.bool,
    hideSubtitle: PropTypes.bool,
    identiconAddress: PropTypes.string,
    nonce: PropTypes.string,
@ -31,8 +33,10 @@ export default class ConfirmPageContainerContent extends Component {
    onCancel: PropTypes.func,
    cancelText: PropTypes.string,
    onSubmit: PropTypes.func,
+    onConfirmAnyways: PropTypes.func,
    submitText: PropTypes.string,
    disabled: PropTypes.bool,
+    hideConfirmAnyways: PropTypes.bool,
    unapprovedTxCount: PropTypes.number,
    rejectNText: PropTypes.string,
    hideTitle: PropTypes.boolean,
@ -71,6 +75,7 @@ export default class ConfirmPageContainerContent extends Component {
      action,
      errorKey,
      errorMessage,
+      hasSimulationError,
      title,
      titleComponent,
      subtitleComponent,
@ -91,14 +96,32 @@ export default class ConfirmPageContainerContent extends Component {
      origin,
      ethGasPriceWarning,
      hideTitle,
+      onConfirmAnyways,
+      hideConfirmAnyways,
    } = this.props;

+    const primaryAction = hideConfirmAnyways
+      ? null
+      : {
+          label: this.context.t('tryAnywayOption'),
+          onClick: onConfirmAnyways,
+        };
+
    return (
      <div className="confirm-page-container-content">
        {warning ? <ConfirmPageContainerWarning warning={warning} /> : null}
        {ethGasPriceWarning && (
          <ConfirmPageContainerWarning warning={ethGasPriceWarning} />
        )}
+        {hasSimulationError && (
+          <div className="confirm-page-container-content__error-container">
+            <ActionableMessage
+              type="danger"
+              primaryAction={primaryAction}
+              message={this.context.t('simulationErrorMessage')}
+            />
+          </div>
+        )}
        <ConfirmPageContainerSummary
          className={classnames({
            'confirm-page-container-summary--border':
@ -115,7 +138,7 @@ export default class ConfirmPageContainerContent extends Component {
          hideTitle={hideTitle}
        />
        {this.renderContent()}
-        {(errorKey || errorMessage) && (
+        {(errorKey || errorMessage) && !hasSimulationError && (
          <div className="confirm-page-container-content__error-container">
            <ErrorMessage errorMessage={errorMessage} errorKey={errorKey} />
          </div>
--- a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.test.js
+++ b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.test.js
@ -0,0 +1,124 @@
+import { fireEvent } from '@testing-library/react';
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+import { renderWithProvider } from '../../../../../test/lib/render-helpers';
+import { TRANSACTION_ERROR_KEY } from '../../../../helpers/constants/error-keys';
+import ConfirmPageContainerContent from './confirm-page-container-content.component';
+
+describe('Confirm Page Container Content', () => {
+  const mockStore = {
+    metamask: {
+      provider: {
+        type: 'test',
+      },
+    },
+  };
+
+  const store = configureMockStore()(mockStore);
+
+  let props = {};
+
+  beforeEach(() => {
+    const mockOnCancel = jest.fn();
+    const mockOnCancelAll = jest.fn();
+    const mockOnSubmit = jest.fn();
+    const mockOnConfirmAnyways = jest.fn();
+    props = {
+      action: ' Withdraw Stake',
+      errorMessage: null,
+      errorKey: null,
+      hasSimulationError: true,
+      onCancelAll: mockOnCancelAll,
+      onCancel: mockOnCancel,
+      cancelText: 'Reject',
+      onSubmit: mockOnSubmit,
+      onConfirmAnyways: mockOnConfirmAnyways,
+      submitText: 'Confirm',
+      disabled: true,
+      origin: 'http://localhost:4200',
+      hideTitle: false,
+    };
+  });
+
+  it('render ConfirmPageContainer component with simulation error', async () => {
+    const { queryByText, getByText } = renderWithProvider(
+      <ConfirmPageContainerContent {...props} />,
+      store,
+    );
+
+    expect(
+      queryByText('Transaction Error. Exception thrown in contract code.'),
+    ).not.toBeInTheDocument();
+    expect(
+      queryByText(
+        'This transaction is expected to fail. Trying to execute it is expected to be expensive but fail, and is not recommended.',
+      ),
+    ).toBeInTheDocument();
+    expect(queryByText('I will try anyway')).toBeInTheDocument();
+
+    const confirmButton = getByText('Confirm');
+    expect(getByText('Confirm').closest('button')).toBeDisabled();
+    fireEvent.click(confirmButton);
+    expect(props.onSubmit).toHaveBeenCalledTimes(0);
+
+    const iWillTryButton = getByText('I will try anyway');
+    fireEvent.click(iWillTryButton);
+    expect(props.onConfirmAnyways).toHaveBeenCalledTimes(1);
+
+    const cancelButton = getByText('Reject');
+    fireEvent.click(cancelButton);
+    expect(props.onCancel).toHaveBeenCalledTimes(1);
+  });
+
+  it('render ConfirmPageContainer component with another error', async () => {
+    props.hasSimulationError = false;
+    props.disabled = true;
+    props.errorKey = TRANSACTION_ERROR_KEY;
+    const { queryByText, getByText } = renderWithProvider(
+      <ConfirmPageContainerContent {...props} />,
+      store,
+    );
+
+    expect(
+      queryByText(
+        'This transaction is expected to fail. Trying to execute it is expected to be expensive but fail, and is not recommended.',
+      ),
+    ).not.toBeInTheDocument();
+    expect(queryByText('I will try anyway')).not.toBeInTheDocument();
+    expect(getByText('Confirm').closest('button')).toBeDisabled();
+    expect(
+      getByText('Transaction Error. Exception thrown in contract code.'),
+    ).toBeInTheDocument();
+
+    const cancelButton = getByText('Reject');
+    fireEvent.click(cancelButton);
+    expect(props.onCancel).toHaveBeenCalledTimes(1);
+  });
+
+  it('render ConfirmPageContainer component with no errors', async () => {
+    props.hasSimulationError = false;
+    props.disabled = false;
+    const { queryByText, getByText } = renderWithProvider(
+      <ConfirmPageContainerContent {...props} />,
+      store,
+    );
+
+    expect(
+      queryByText(
+        'This transaction is expected to fail. Trying to execute it is expected to be expensive but fail, and is not recommended.',
+      ),
+    ).not.toBeInTheDocument();
+    expect(
+      queryByText('Transaction Error. Exception thrown in contract code.'),
+    ).not.toBeInTheDocument();
+    expect(queryByText('I will try anyway')).not.toBeInTheDocument();
+
+    const confirmButton = getByText('Confirm');
+    fireEvent.click(confirmButton);
+    expect(props.onSubmit).toHaveBeenCalledTimes(1);
+
+    const cancelButton = getByText('Reject');
+    fireEvent.click(cancelButton);
+    expect(props.onCancel).toHaveBeenCalledTimes(1);
+  });
+});
--- a/ui/components/app/confirm-page-container/confirm-page-container.component.js
+++ b/ui/components/app/confirm-page-container/confirm-page-container.component.js
@ -4,15 +4,20 @@ import SenderToRecipient from '../../ui/sender-to-recipient';
 import { PageContainerFooter } from '../../ui/page-container';
 import EditGasPopover from '../edit-gas-popover';
 import { EDIT_GAS_MODES } from '../../../../shared/constants/gas';
+import { GasFeeContextProvider } from '../../../contexts/gasFee';
 import ErrorMessage from '../../ui/error-message';
 import { TRANSACTION_TYPES } from '../../../../shared/constants/transaction';
 import Dialog from '../../ui/dialog';
+import EditGasFeePopover from '../edit-gas-fee-popover/edit-gas-fee-popover';
 import {
  ConfirmPageContainerHeader,
  ConfirmPageContainerContent,
  ConfirmPageContainerNavigation,
 } from '.';

+// eslint-disable-next-line prefer-destructuring
+const EIP_1559_V2 = process.env.EIP_1559_V2;
+
 export default class ConfirmPageContainer extends Component {
  static contextTypes = {
    t: PropTypes.func,
@ -135,102 +140,107 @@ export default class ConfirmPageContainer extends Component {
      currentTransaction.txParams?.value === '0x0';

    return (
-      <div className="page-container">
-        <ConfirmPageContainerNavigation
-          totalTx={totalTx}
-          positionOfCurrentTx={positionOfCurrentTx}
-          nextTxId={nextTxId}
-          prevTxId={prevTxId}
-          showNavigation={showNavigation}
-          onNextTx={(txId) => onNextTx(txId)}
-          firstTx={firstTx}
-          lastTx={lastTx}
-          ofText={ofText}
-          requestsWaitingText={requestsWaitingText}
-        />
-        <ConfirmPageContainerHeader
-          showEdit={showEdit}
-          onEdit={() => onEdit()}
-          showAccountInHeader={showAccountInHeader}
-          accountAddress={fromAddress}
-        >
-          {hideSenderToRecipient ? null : (
-            <SenderToRecipient
-              senderName={fromName}
-              senderAddress={fromAddress}
-              recipientName={toName}
-              recipientAddress={toAddress}
-              recipientEns={toEns}
-              recipientNickname={toNickname}
+      <GasFeeContextProvider transaction={currentTransaction}>
+        <div className="page-container">
+          <ConfirmPageContainerNavigation
+            totalTx={totalTx}
+            positionOfCurrentTx={positionOfCurrentTx}
+            nextTxId={nextTxId}
+            prevTxId={prevTxId}
+            showNavigation={showNavigation}
+            onNextTx={(txId) => onNextTx(txId)}
+            firstTx={firstTx}
+            lastTx={lastTx}
+            ofText={ofText}
+            requestsWaitingText={requestsWaitingText}
+          />
+          <ConfirmPageContainerHeader
+            showEdit={showEdit}
+            onEdit={() => onEdit()}
+            showAccountInHeader={showAccountInHeader}
+            accountAddress={fromAddress}
+          >
+            {hideSenderToRecipient ? null : (
+              <SenderToRecipient
+                senderName={fromName}
+                senderAddress={fromAddress}
+                recipientName={toName}
+                recipientAddress={toAddress}
+                recipientEns={toEns}
+                recipientNickname={toNickname}
+              />
+            )}
+          </ConfirmPageContainerHeader>
+          <div>
+            {showAddToAddressDialog && (
+              <Dialog
+                type="message"
+                className="send__dialog"
+                onClick={() => showAddToAddressBookModal()}
+              >
+                {this.context.t('newAccountDetectedDialogMessage')}
+              </Dialog>
+            )}
+          </div>
+          {contentComponent || (
+            <ConfirmPageContainerContent
+              action={action}
+              title={title}
+              titleComponent={titleComponent}
+              subtitleComponent={subtitleComponent}
+              hideSubtitle={hideSubtitle}
+              detailsComponent={detailsComponent}
+              dataComponent={dataComponent}
+              errorMessage={errorMessage}
+              errorKey={errorKey}
+              identiconAddress={identiconAddress}
+              nonce={nonce}
+              warning={warning}
+              onCancelAll={onCancelAll}
+              onCancel={onCancel}
+              cancelText={this.context.t('reject')}
+              onSubmit={onSubmit}
+              submitText={this.context.t('confirm')}
+              disabled={disabled}
+              unapprovedTxCount={unapprovedTxCount}
+              rejectNText={this.context.t('rejectTxsN', [unapprovedTxCount])}
+              origin={origin}
+              ethGasPriceWarning={ethGasPriceWarning}
+              hideTitle={hideTitle}
            />
          )}
-        </ConfirmPageContainerHeader>
-        <div>
-          {showAddToAddressDialog && (
-            <Dialog
-              type="message"
-              className="send__dialog"
-              onClick={() => showAddToAddressBookModal()}
+          {shouldDisplayWarning && (
+            <div className="confirm-approve-content__warning">
+              <ErrorMessage errorKey={errorKey} />
+            </div>
+          )}
+          {contentComponent && (
+            <PageContainerFooter
+              onCancel={onCancel}
+              cancelText={this.context.t('reject')}
+              onSubmit={onSubmit}
+              submitText={this.context.t('confirm')}
+              disabled={disabled}
            >
-              {this.context.t('newAccountDetectedDialogMessage')}
-            </Dialog>
+              {unapprovedTxCount > 1 && (
+                <a onClick={onCancelAll}>
+                  {this.context.t('rejectTxsN', [unapprovedTxCount])}
+                </a>
+              )}
+            </PageContainerFooter>
+          )}
+          {editingGas && !EIP_1559_V2 && (
+            <EditGasPopover
+              mode={EDIT_GAS_MODES.MODIFY_IN_PLACE}
+              onClose={handleCloseEditGas}
+              transaction={currentTransaction}
+            />
+          )}
+          {editingGas && EIP_1559_V2 && (
+            <EditGasFeePopover onClose={handleCloseEditGas} />
          )}
        </div>
-        {contentComponent || (
-          <ConfirmPageContainerContent
-            action={action}
-            title={title}
-            titleComponent={titleComponent}
-            subtitleComponent={subtitleComponent}
-            hideSubtitle={hideSubtitle}
-            detailsComponent={detailsComponent}
-            dataComponent={dataComponent}
-            errorMessage={errorMessage}
-            errorKey={errorKey}
-            identiconAddress={identiconAddress}
-            nonce={nonce}
-            warning={warning}
-            onCancelAll={onCancelAll}
-            onCancel={onCancel}
-            cancelText={this.context.t('reject')}
-            onSubmit={onSubmit}
-            submitText={this.context.t('confirm')}
-            disabled={disabled}
-            unapprovedTxCount={unapprovedTxCount}
-            rejectNText={this.context.t('rejectTxsN', [unapprovedTxCount])}
-            origin={origin}
-            ethGasPriceWarning={ethGasPriceWarning}
-            hideTitle={hideTitle}
-          />
-        )}
-        {shouldDisplayWarning && (
-          <div className="confirm-approve-content__warning">
-            <ErrorMessage errorKey={errorKey} />
-          </div>
-        )}
-        {contentComponent && (
-          <PageContainerFooter
-            onCancel={onCancel}
-            cancelText={this.context.t('reject')}
-            onSubmit={onSubmit}
-            submitText={this.context.t('confirm')}
-            disabled={disabled}
-          >
-            {unapprovedTxCount > 1 && (
-              <a onClick={onCancelAll}>
-                {this.context.t('rejectTxsN', [unapprovedTxCount])}
-              </a>
-            )}
-          </PageContainerFooter>
-        )}
-        {editingGas && (
-          <EditGasPopover
-            mode={EDIT_GAS_MODES.MODIFY_IN_PLACE}
-            onClose={handleCloseEditGas}
-            transaction={currentTransaction}
-          />
-        )}
-      </div>
+      </GasFeeContextProvider>
    );
  }
 }
--- a/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.js
+++ b/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.js
@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { PRIORITY_LEVELS } from '../../../../shared/constants/gas';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import Popover from '../../ui/popover';
+import I18nValue from '../../ui/i18n-value';
+import LoadingHeartBeat from '../../ui/loading-heartbeat';
+
+import EditGasItem from './edit-gas-item';
+
+const EditGasFeePopover = ({ onClose }) => {
+  const t = useI18nContext();
+
+  return (
+    <Popover
+      title={t('editGasFeeModalTitle')}
+      onClose={onClose}
+      className="edit-gas-fee-popover"
+    >
+      <>
+        {process.env.IN_TEST === 'true' ? null : <LoadingHeartBeat />}
+        <div className="edit-gas-fee-popover__wrapper">
+          <div className="edit-gas-fee-popover__content">
+            <div className="edit-gas-fee-popover__content__header">
+              <span className="edit-gas-fee-popover__content__header-option">
+                <I18nValue messageKey="gasOption" />
+              </span>
+              <span className="edit-gas-fee-popover__content__header-time">
+                <I18nValue messageKey="time" />
+              </span>
+              <span className="edit-gas-fee-popover__content__header-max-fee">
+                <I18nValue messageKey="maxFee" />
+              </span>
+            </div>
+            <EditGasItem
+              priorityLevel={PRIORITY_LEVELS.LOW}
+              onClose={onClose}
+            />
+            <EditGasItem
+              priorityLevel={PRIORITY_LEVELS.MEDIUM}
+              onClose={onClose}
+            />
+            <EditGasItem
+              priorityLevel={PRIORITY_LEVELS.HIGH}
+              onClose={onClose}
+            />
+            <div className="edit-gas-fee-popover__content__separator" />
+            <EditGasItem
+              priorityLevel={PRIORITY_LEVELS.DAPP_SUGGESTED}
+              onClose={onClose}
+            />
+            <EditGasItem
+              priorityLevel={PRIORITY_LEVELS.CUSTOM}
+              onClose={onClose}
+            />
+          </div>
+        </div>
+      </>
+    </Popover>
+  );
+};
+
+EditGasFeePopover.propTypes = {
+  onClose: PropTypes.func,
+};
+
+export default EditGasFeePopover;
--- a/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.test.js
+++ b/ui/components/app/edit-gas-fee-popover/edit-gas-fee-popover.test.js
@ -0,0 +1,95 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import { ETH } from '../../../helpers/constants/common';
+import configureStore from '../../../store/store';
+import { GasFeeContextProvider } from '../../../contexts/gasFee';
+
+import EditGasFeePopover from './edit-gas-fee-popover';
+
+jest.mock('../../../store/actions', () => ({
+  disconnectGasFeeEstimatePoller: jest.fn(),
+  getGasFeeEstimatesAndStartPolling: jest
+    .fn()
+    .mockImplementation(() => Promise.resolve()),
+  addPollingTokenToAppState: jest.fn(),
+}));
+
+const MOCK_FEE_ESTIMATE = {
+  low: {
+    minWaitTimeEstimate: 360000,
+    maxWaitTimeEstimate: 300000,
+    suggestedMaxPriorityFeePerGas: '3',
+    suggestedMaxFeePerGas: '53',
+  },
+  medium: {
+    minWaitTimeEstimate: 30000,
+    maxWaitTimeEstimate: 60000,
+    suggestedMaxPriorityFeePerGas: '7',
+    suggestedMaxFeePerGas: '70',
+  },
+  high: {
+    minWaitTimeEstimate: 15000,
+    maxWaitTimeEstimate: 15000,
+    suggestedMaxPriorityFeePerGas: '10',
+    suggestedMaxFeePerGas: '100',
+  },
+  estimatedBaseFee: '50',
+};
+
+const renderComponent = () => {
+  const store = configureStore({
+    metamask: {
+      nativeCurrency: ETH,
+      provider: {},
+      cachedBalances: {},
+      accounts: {
+        '0xAddress': {
+          address: '0xAddress',
+          balance: '0x176e5b6f173ebe66',
+        },
+      },
+      selectedAddress: '0xAddress',
+      featureFlags: { advancedInlineGas: true },
+      gasFeeEstimates: MOCK_FEE_ESTIMATE,
+    },
+  });
+
+  return renderWithProvider(
+    <GasFeeContextProvider transaction={{ txParams: { gas: '0x5208' } }}>
+      <EditGasFeePopover />
+    </GasFeeContextProvider>,
+    store,
+  );
+};
+
+describe('EditGasFeePopover', () => {
+  it('should renders low / medium / high options', () => {
+    renderComponent();
+
+    expect(screen.queryByText('🐢')).toBeInTheDocument();
+    expect(screen.queryByText('🦊')).toBeInTheDocument();
+    expect(screen.queryByText('🦍')).toBeInTheDocument();
+    expect(screen.queryByText('🌐')).toBeInTheDocument();
+    expect(screen.queryByText('⚙')).toBeInTheDocument();
+    expect(screen.queryByText('Low')).toBeInTheDocument();
+    expect(screen.queryByText('Market')).toBeInTheDocument();
+    expect(screen.queryByText('Aggressive')).toBeInTheDocument();
+    expect(screen.queryByText('Site')).toBeInTheDocument();
+    expect(screen.queryByText('Advanced')).toBeInTheDocument();
+  });
+
+  it('should show time estimates', () => {
+    renderComponent();
+    expect(screen.queryAllByText('5 min')).toHaveLength(2);
+    expect(screen.queryByText('15 sec')).toBeInTheDocument();
+  });
+
+  it('should show gas fee estimates', () => {
+    renderComponent();
+    expect(screen.queryByTitle('0.001113 ETH')).toBeInTheDocument();
+    expect(screen.queryByTitle('0.00147 ETH')).toBeInTheDocument();
+    expect(screen.queryByTitle('0.0021 ETH')).toBeInTheDocument();
+  });
+});
--- a/ui/components/app/edit-gas-fee-popover/edit-gas-item/edit-gas-item.js
+++ b/ui/components/app/edit-gas-fee-popover/edit-gas-item/edit-gas-item.js
@ -0,0 +1,150 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+
+import { getMaximumGasTotalInHexWei } from '../../../../../shared/modules/gas.utils';
+import { PRIORITY_LEVELS } from '../../../../../shared/constants/gas';
+import { PRIORITY_LEVEL_ICON_MAP } from '../../../../helpers/constants/gas';
+import { PRIMARY } from '../../../../helpers/constants/common';
+import {
+  decGWEIToHexWEI,
+  decimalToHex,
+  hexWEIToDecGWEI,
+} from '../../../../helpers/utils/conversions.util';
+import { getAdvancedGasFeeValues } from '../../../../selectors';
+import { toHumanReadableTime } from '../../../../helpers/utils/util';
+import { useGasFeeContext } from '../../../../contexts/gasFee';
+import { useI18nContext } from '../../../../hooks/useI18nContext';
+import I18nValue from '../../../ui/i18n-value';
+import InfoTooltip from '../../../ui/info-tooltip';
+import UserPreferencedCurrencyDisplay from '../../user-preferenced-currency-display';
+
+import { useCustomTimeEstimate } from './useCustomTimeEstimate';
+
+const EditGasItem = ({ priorityLevel, onClose }) => {
+  const {
+    estimateUsed,
+    gasFeeEstimates,
+    gasLimit,
+    maxFeePerGas: maxFeePerGasValue,
+    maxPriorityFeePerGas: maxPriorityFeePerGasValue,
+    updateTransactionUsingGasFeeEstimates,
+    transaction: { dappSuggestedGasFees },
+  } = useGasFeeContext();
+  const t = useI18nContext();
+  const advancedGasFeeValues = useSelector(getAdvancedGasFeeValues);
+  let maxFeePerGas;
+  let maxPriorityFeePerGas;
+  let minWaitTime;
+
+  if (gasFeeEstimates[priorityLevel]) {
+    maxFeePerGas = gasFeeEstimates[priorityLevel].suggestedMaxFeePerGas;
+  } else if (
+    priorityLevel === PRIORITY_LEVELS.DAPP_SUGGESTED &&
+    dappSuggestedGasFees
+  ) {
+    maxFeePerGas = hexWEIToDecGWEI(dappSuggestedGasFees.maxFeePerGas);
+    maxPriorityFeePerGas = hexWEIToDecGWEI(
+      dappSuggestedGasFees.maxPriorityFeePerGas,
+    );
+  } else if (priorityLevel === PRIORITY_LEVELS.CUSTOM) {
+    if (estimateUsed === PRIORITY_LEVELS.CUSTOM) {
+      maxFeePerGas = maxFeePerGasValue;
+      maxPriorityFeePerGas = maxPriorityFeePerGasValue;
+    } else if (advancedGasFeeValues) {
+      maxFeePerGas =
+        gasFeeEstimates.estimatedBaseFee *
+        parseFloat(advancedGasFeeValues.maxBaseFee);
+      maxPriorityFeePerGas = advancedGasFeeValues.priorityFee;
+    }
+  }
+
+  const { waitTimeEstimate } = useCustomTimeEstimate({
+    gasFeeEstimates,
+    maxFeePerGas,
+    maxPriorityFeePerGas,
+  });
+
+  if (gasFeeEstimates[priorityLevel]) {
+    minWaitTime =
+      priorityLevel === PRIORITY_LEVELS.HIGH
+        ? gasFeeEstimates?.high.minWaitTimeEstimate
+        : gasFeeEstimates?.low.maxWaitTimeEstimate;
+  } else {
+    minWaitTime = waitTimeEstimate;
+  }
+
+  const hexMaximumTransactionFee = maxFeePerGas
+    ? getMaximumGasTotalInHexWei({
+        gasLimit: decimalToHex(gasLimit),
+        maxFeePerGas: decGWEIToHexWEI(maxFeePerGas),
+      })
+    : null;
+
+  const onOptionSelect = () => {
+    if (priorityLevel !== PRIORITY_LEVELS.CUSTOM) {
+      updateTransactionUsingGasFeeEstimates(priorityLevel);
+    }
+    // todo: open advance modal if priorityLevel is custom
+    onClose();
+  };
+
+  return (
+    <div
+      className={classNames('edit-gas-item', {
+        'edit-gas-item-selected': priorityLevel === estimateUsed,
+        'edit-gas-item-disabled':
+          priorityLevel === PRIORITY_LEVELS.DAPP_SUGGESTED &&
+          !dappSuggestedGasFees,
+      })}
+      role="button"
+      onClick={onOptionSelect}
+    >
+      <span className="edit-gas-item__name">
+        <span
+          className={`edit-gas-item__icon edit-gas-item__icon-${priorityLevel}`}
+        >
+          {PRIORITY_LEVEL_ICON_MAP[priorityLevel]}
+        </span>
+        <I18nValue
+          messageKey={
+            priorityLevel === PRIORITY_LEVELS.DAPP_SUGGESTED
+              ? 'dappSuggestedShortLabel'
+              : priorityLevel
+          }
+        />
+      </span>
+      <span
+        className={`edit-gas-item__time-estimate edit-gas-item__time-estimate-${priorityLevel}`}
+      >
+        {minWaitTime
+          ? minWaitTime && toHumanReadableTime(t, minWaitTime)
+          : '--'}
+      </span>
+      <span
+        className={`edit-gas-item__fee-estimate edit-gas-item__fee-estimate-${priorityLevel}`}
+      >
+        {hexMaximumTransactionFee ? (
+          <UserPreferencedCurrencyDisplay
+            key="editGasSubTextFeeAmount"
+            type={PRIMARY}
+            value={hexMaximumTransactionFee}
+          />
+        ) : (
+          '--'
+        )}
+      </span>
+      <span className="edit-gas-item__tooltip">
+        <InfoTooltip position="top" />
+      </span>
+    </div>
+  );
+};
+
+EditGasItem.propTypes = {
+  priorityLevel: PropTypes.string,
+  onClose: PropTypes.func,
+};
+
+export default EditGasItem;
--- a/ui/components/app/edit-gas-fee-popover/edit-gas-item/edit-gas-item.test.js
+++ b/ui/components/app/edit-gas-fee-popover/edit-gas-item/edit-gas-item.test.js
@ -0,0 +1,138 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+
+import { renderWithProvider } from '../../../../../test/lib/render-helpers';
+import { ETH } from '../../../../helpers/constants/common';
+import configureStore from '../../../../store/store';
+import { GasFeeContextProvider } from '../../../../contexts/gasFee';
+
+import EditGasItem from './edit-gas-item';
+
+jest.mock('../../../../store/actions', () => ({
+  disconnectGasFeeEstimatePoller: jest.fn(),
+  getGasFeeEstimatesAndStartPolling: jest
+    .fn()
+    .mockImplementation(() => Promise.resolve()),
+  addPollingTokenToAppState: jest.fn(),
+  getGasFeeTimeEstimate: jest
+    .fn()
+    .mockImplementation(() => Promise.resolve('unknown')),
+}));
+
+const MOCK_FEE_ESTIMATE = {
+  low: {
+    minWaitTimeEstimate: 360000,
+    maxWaitTimeEstimate: 300000,
+    suggestedMaxPriorityFeePerGas: '3',
+    suggestedMaxFeePerGas: '53',
+  },
+  medium: {
+    minWaitTimeEstimate: 30000,
+    maxWaitTimeEstimate: 60000,
+    suggestedMaxPriorityFeePerGas: '7',
+    suggestedMaxFeePerGas: '70',
+  },
+  high: {
+    minWaitTimeEstimate: 15000,
+    maxWaitTimeEstimate: 15000,
+    suggestedMaxPriorityFeePerGas: '10',
+    suggestedMaxFeePerGas: '100',
+  },
+  estimatedBaseFee: '50',
+};
+
+const DAPP_SUGGESTED_ESTIMATE = {
+  maxFeePerGas: '0x59682f10',
+  maxPriorityFeePerGas: '0x59682f00',
+};
+
+const renderComponent = (props, transactionProps, gasFeeContextProps) => {
+  const store = configureStore({
+    metamask: {
+      nativeCurrency: ETH,
+      provider: {},
+      cachedBalances: {},
+      accounts: {
+        '0xAddress': {
+          address: '0xAddress',
+          balance: '0x176e5b6f173ebe66',
+        },
+      },
+      selectedAddress: '0xAddress',
+      featureFlags: { advancedInlineGas: true },
+      gasFeeEstimates: MOCK_FEE_ESTIMATE,
+      advancedGasFee: {
+        maxBaseFee: '1.5',
+        priorityFee: '2',
+      },
+    },
+  });
+
+  return renderWithProvider(
+    <GasFeeContextProvider
+      transaction={{ txParams: { gas: '0x5208' }, ...transactionProps }}
+      {...gasFeeContextProps}
+    >
+      <EditGasItem priorityLevel="low" {...props} />
+    </GasFeeContextProvider>,
+    store,
+  );
+};
+
+describe('EditGasItem', () => {
+  it('should renders low gas estimate option for priorityLevel low', () => {
+    renderComponent({ priorityLevel: 'low' });
+    expect(screen.queryByText('🐢')).toBeInTheDocument();
+    expect(screen.queryByText('Low')).toBeInTheDocument();
+    expect(screen.queryByText('5 min')).toBeInTheDocument();
+    expect(screen.queryByTitle('0.001113 ETH')).toBeInTheDocument();
+  });
+
+  it('should renders market gas estimate option for priorityLevel medium', () => {
+    renderComponent({ priorityLevel: 'medium' });
+    expect(screen.queryByText('🦊')).toBeInTheDocument();
+    expect(screen.queryByText('Market')).toBeInTheDocument();
+    expect(screen.queryByText('5 min')).toBeInTheDocument();
+    expect(screen.queryByTitle('0.00147 ETH')).toBeInTheDocument();
+  });
+
+  it('should renders aggressive gas estimate option for priorityLevel high', () => {
+    renderComponent({ priorityLevel: 'high' });
+    expect(screen.queryByText('🦍')).toBeInTheDocument();
+    expect(screen.queryByText('Aggressive')).toBeInTheDocument();
+    expect(screen.queryByText('15 sec')).toBeInTheDocument();
+    expect(screen.queryByTitle('0.0021 ETH')).toBeInTheDocument();
+  });
+
+  it('should highlight option is priorityLevel is currently selected', () => {
+    renderComponent({ priorityLevel: 'high' }, { userFeeLevel: 'high' });
+    expect(
+      document.getElementsByClassName('edit-gas-item-selected'),
+    ).toHaveLength(1);
+  });
+
+  it('should renders site gas estimate option for priorityLevel dappSuggested', () => {
+    renderComponent(
+      { priorityLevel: 'dappSuggested' },
+      { dappSuggestedGasFees: DAPP_SUGGESTED_ESTIMATE },
+    );
+    expect(screen.queryByText('🌐')).toBeInTheDocument();
+    expect(screen.queryByText('Site')).toBeInTheDocument();
+    expect(screen.queryByTitle('0.0000315 ETH')).toBeInTheDocument();
+  });
+
+  it('should disable site gas estimate option for is transaction does not have dappSuggestedGasFees', async () => {
+    renderComponent({ priorityLevel: 'dappSuggested' });
+    expect(
+      document.getElementsByClassName('edit-gas-item-disabled'),
+    ).toHaveLength(1);
+  });
+
+  it('should renders advance gas estimate option for priorityLevel custom', () => {
+    renderComponent({ priorityLevel: 'custom' });
+    expect(screen.queryByText('⚙')).toBeInTheDocument();
+    expect(screen.queryByText('Advanced')).toBeInTheDocument();
+    // below value of custom gas fee estimate is default obtained from state.metamask.advancedGasFee
+    expect(screen.queryByTitle('0.001575 ETH')).toBeInTheDocument();
+  });
+});
--- a/ui/components/app/edit-gas-fee-popover/edit-gas-item/index.js
+++ b/ui/components/app/edit-gas-fee-popover/edit-gas-item/index.js
@ -0,0 +1 @@
+export { default } from './edit-gas-item';
--- a/ui/components/app/edit-gas-fee-popover/edit-gas-item/index.scss
+++ b/ui/components/app/edit-gas-fee-popover/edit-gas-item/index.scss
@ -0,0 +1,68 @@
+.edit-gas-item {
+  border-radius: 24px;
+  color: $ui-4;
+  cursor: pointer;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  margin: 12px 0;
+  padding: 4px 12px;
+  height: 32px;
+
+  &--selected {
+    background-color: $ui-1;
+  }
+
+  &-disabled {
+    cursor: default;
+  }
+
+  &__name {
+    display: inline-flex;
+    align-items: center;
+    color: $ui-black;
+    font-size: 12px;
+    font-weight: bold;
+    width: 40%;
+  }
+
+  &__icon {
+    margin-right: 4px;
+
+    &-custom {
+      font-size: 20px;
+      line-height: 0;
+    }
+  }
+
+  &__time-estimate {
+    display: inline-block;
+    width: 20%;
+  }
+
+  &__fee-estimate {
+    display: inline-block;
+    width: 30%;
+    white-space: nowrap;
+  }
+
+  &__tooltip {
+    display: inline-block;
+    text-align: right;
+    width: 10%;
+
+    .info-tooltip {
+      display: inline-block;
+    }
+  }
+
+  &__time-estimate-low,
+  &__fee-estimate-high {
+    color: $secondary-1;
+  }
+
+  &__time-estimate-medium,
+  &__time-estimate-high {
+    color: $success-3;
+  }
+}
--- a/ui/components/app/edit-gas-fee-popover/edit-gas-item/useCustomTimeEstimate.js
+++ b/ui/components/app/edit-gas-fee-popover/edit-gas-item/useCustomTimeEstimate.js
@ -0,0 +1,83 @@
+import { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import BigNumber from 'bignumber.js';
+
+import { GAS_ESTIMATE_TYPES } from '../../../../../shared/constants/gas';
+import {
+  getGasEstimateType,
+  getIsGasEstimatesLoading,
+} from '../../../../ducks/metamask/metamask';
+import { getGasFeeTimeEstimate } from '../../../../store/actions';
+
+export const useCustomTimeEstimate = ({
+  gasFeeEstimates,
+  maxFeePerGas,
+  maxPriorityFeePerGas,
+}) => {
+  const gasEstimateType = useSelector(getGasEstimateType);
+  const isGasEstimatesLoading = useSelector(getIsGasEstimatesLoading);
+
+  const [customEstimatedTime, setCustomEstimatedTime] = useState(null);
+
+  const returnNoEstimates =
+    isGasEstimatesLoading ||
+    gasEstimateType !== GAS_ESTIMATE_TYPES.FEE_MARKET ||
+    !maxPriorityFeePerGas;
+
+  // If the user has chosen a value lower than the low gas fee estimate,
+  // We'll need to use the useEffect hook below to make a call to calculate
+  // the time to show
+  const isUnknownLow =
+    gasFeeEstimates?.low &&
+    Number(maxPriorityFeePerGas) <
+      Number(gasFeeEstimates.low.suggestedMaxPriorityFeePerGas);
+
+  useEffect(() => {
+    if (
+      isGasEstimatesLoading ||
+      gasEstimateType !== GAS_ESTIMATE_TYPES.FEE_MARKET ||
+      !maxPriorityFeePerGas
+    )
+      return;
+    if (isUnknownLow) {
+      // getGasFeeTimeEstimate requires parameters in string format
+      getGasFeeTimeEstimate(
+        new BigNumber(maxPriorityFeePerGas, 10).toString(10),
+        new BigNumber(maxFeePerGas, 10).toString(10),
+      ).then((result) => {
+        setCustomEstimatedTime(result);
+      });
+    }
+  }, [
+    gasEstimateType,
+    isUnknownLow,
+    isGasEstimatesLoading,
+    maxFeePerGas,
+    maxPriorityFeePerGas,
+    returnNoEstimates,
+  ]);
+
+  if (returnNoEstimates) {
+    return {};
+  }
+
+  const { low = {}, medium = {}, high = {} } = gasFeeEstimates;
+  let waitTimeEstimate = '';
+
+  if (
+    isUnknownLow &&
+    customEstimatedTime &&
+    customEstimatedTime !== 'unknown' &&
+    customEstimatedTime?.upperTimeBound !== 'unknown'
+  ) {
+    waitTimeEstimate = Number(customEstimatedTime?.upperTimeBound);
+  } else if (
+    Number(maxPriorityFeePerGas) >= Number(medium.suggestedMaxPriorityFeePerGas)
+  ) {
+    waitTimeEstimate = high.minWaitTimeEstimate;
+  } else {
+    waitTimeEstimate = low.maxWaitTimeEstimate;
+  }
+
+  return { waitTimeEstimate };
+};
--- a/ui/components/app/edit-gas-fee-popover/index.js
+++ b/ui/components/app/edit-gas-fee-popover/index.js
@ -0,0 +1 @@
+export { default } from './edit-gas-fee-popover';
--- a/ui/components/app/edit-gas-fee-popover/index.scss
+++ b/ui/components/app/edit-gas-fee-popover/index.scss
@ -0,0 +1,40 @@
+.edit-gas-fee-popover {
+  @media screen and (min-width: $break-large) {
+    max-height: 84vh;
+  }
+
+  &__wrapper {
+    border-top: 1px solid $ui-grey;
+  }
+
+  &__content {
+    padding: 16px 12px;
+
+    &__header {
+      color: $ui-4;
+      font-size: 10px;
+      font-weight: 700;
+      margin: 0 12px;
+
+      &-option {
+        display: inline-block;
+        width: 40%;
+      }
+
+      &-time {
+        display: inline-block;
+        width: 20%;
+      }
+
+      &-max-fee {
+        display: inline-block;
+        width: 30%;
+      }
+    }
+
+    &__separator {
+      border-top: 1px solid $ui-grey;
+      margin: 8px 12px;
+    }
+  }
+}
--- a/ui/components/app/gas-timing/gas-timing.component.js
+++ b/ui/components/app/gas-timing/gas-timing.component.js
@ -24,6 +24,7 @@ import InfoTooltip from '../../ui/info-tooltip/info-tooltip';

 import { getGasFeeTimeEstimate } from '../../../store/actions';
 import { GAS_FORM_ERRORS } from '../../../helpers/constants/gas';
+import { useGasFeeContext } from '../../../contexts/gasFee';

 // Once we reach this second threshold, we switch to minutes as a unit
 const SECOND_CUTOFF = 90;
@ -49,6 +50,7 @@ export default function GasTiming({

  const [customEstimatedTime, setCustomEstimatedTime] = useState(null);
  const t = useContext(I18nContext);
+  const { estimateUsed } = useGasFeeContext();

  // If the user has chosen a value lower than the low gas fee estimate,
  // We'll need to use the useEffect hook below to make a call to calculate
@ -94,12 +96,17 @@ export default function GasTiming({
    previousIsUnknownLow,
  ]);

-  const unknownProcessingTimeText = (
-    <>
-      {t('editGasTooLow')}{' '}
-      <InfoTooltip position="top" contentText={t('editGasTooLowTooltip')} />
-    </>
-  );
+  let unknownProcessingTimeText;
+  if (EIP_1559_V2) {
+    unknownProcessingTimeText = t('editGasTooLow');
+  } else {
+    unknownProcessingTimeText = (
+      <>
+        {t('editGasTooLow')}{' '}
+        <InfoTooltip position="top" contentText={t('editGasTooLowTooltip')} />
+      </>
+    );
+  }

  if (
    gasWarnings?.maxPriorityFee === GAS_FORM_ERRORS.MAX_PRIORITY_FEE_TOO_LOW ||
@ -148,8 +155,9 @@ export default function GasTiming({
      ]);
    }
  } else {
-    attitude = 'negative';
-
+    if (!EIP_1559_V2 || estimateUsed === 'low') {
+      attitude = 'negative';
+    }
    // If the user has chosen a value less than our low estimate,
    // calculate a potential wait time
    if (isUnknownLow) {
@ -191,7 +199,8 @@ export default function GasTiming({
    <Typography
      variant={TYPOGRAPHY.H7}
      className={classNames('gas-timing', {
-        [`gas-timing--${attitude}`]: attitude,
+        [`gas-timing--${attitude}`]: attitude && !EIP_1559_V2,
+        [`gas-timing--${attitude}-V2`]: attitude && EIP_1559_V2,
      })}
    >
      {text}
--- a/ui/components/app/gas-timing/index.scss
+++ b/ui/components/app/gas-timing/index.scss
@ -14,6 +14,11 @@
    font-weight: bold;
  }

+  &--negative-V2 {
+    color: $secondary-1;
+    font-weight: bold;
+  }
+
  .info-tooltip {
    display: inline-block;
    margin-inline-start: 4px;
--- a/ui/components/app/modals/account-details-modal/account-details-modal.component.js
+++ b/ui/components/app/modals/account-details-modal/account-details-modal.component.js
@ -84,9 +84,7 @@ export default class AccountDetailsModal extends Component {
            ? this.context.t('blockExplorerView', [
                getURLHostName(rpcPrefs.blockExplorerUrl),
              ])
-            : this.context.t('viewOnEtherscan', [
-                this.context.t('blockExplorerAccountAction'),
-              ])}
+            : this.context.t('etherscanViewOn')}
        </Button>

        {exportPrivateKeyFeatureEnabled ? (
--- a/ui/components/app/modals/account-details-modal/index.scss
+++ b/ui/components/app/modals/account-details-modal/index.scss
@ -8,13 +8,13 @@
  & &__button {
    margin-top: 17px;
    padding: 10px 22px;
-    width: 286px;
+    width: 284px;
  }

  &__divider {
    width: 100%;
    height: 1px;
-    margin: 19px 0 8px 0;
+    margin: 16px 0 8px 0;
    background-color: $alto;
  }

--- a/ui/components/app/modals/modal.js
+++ b/ui/components/app/modals/modal.js
@ -64,7 +64,7 @@ const accountModalStyle = {
    margin: '0 auto',
  },
  laptopModalStyle: {
-    width: '360px',
+    width: '335px',
    // top: 'calc(33% + 45px)',
    boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
    borderRadius: '4px',
--- a/ui/components/app/new-collectibles-notice/index.js
+++ b/ui/components/app/new-collectibles-notice/index.js
@ -0,0 +1 @@
+export { default } from './new-collectibles-notice.component';
--- a/ui/components/app/new-collectibles-notice/new-collectibles-notice.component.js
+++ b/ui/components/app/new-collectibles-notice/new-collectibles-notice.component.js
@ -0,0 +1,56 @@
+import React from 'react';
+import Box from '../../ui/box';
+import Dialog from '../../ui/dialog';
+import Typography from '../../ui/typography/typography';
+import {
+  COLORS,
+  TYPOGRAPHY,
+  TEXT_ALIGN,
+  FONT_WEIGHT,
+  DISPLAY,
+} from '../../../helpers/constants/design-system';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+
+export default function NewCollectiblesNotice() {
+  const t = useI18nContext();
+
+  return (
+    <Box marginBottom={8}>
+      <Dialog type="message">
+        <Box display={DISPLAY.FLEX}>
+          <Box paddingTop={2}>
+            <i style={{ fontSize: '1rem' }} className="fa fa-info-circle" />
+          </Box>
+          <Box paddingLeft={4}>
+            <Typography
+              color={COLORS.BLACK}
+              align={TEXT_ALIGN.LEFT}
+              variant={TYPOGRAPHY.Paragraph}
+              fontWeight={FONT_WEIGHT.BOLD}
+            >
+              {t('newNFTsDetected')}
+            </Typography>
+            <Typography
+              color={COLORS.BLACK}
+              align={TEXT_ALIGN.LEFT}
+              variant={TYPOGRAPHY.Paragraph}
+              boxProps={{ marginBottom: 4 }}
+            >
+              {t('newNFTsDetectedInfo')}
+            </Typography>
+            <a
+              href="#"
+              onClick={(e) => {
+                e.preventDefault();
+                console.log('show preference popover');
+              }}
+              style={{ fontSize: '.9rem' }}
+            >
+              {t('selectNFTPrivacyPreference')}
+            </a>
+          </Box>
+        </Box>
+      </Dialog>
+    </Box>
+  );
+}
--- a/ui/components/app/signature-request-original/signature-request-original.component.js
+++ b/ui/components/app/signature-request-original/signature-request-original.component.js
@ -5,11 +5,7 @@ import classnames from 'classnames';
 import { ObjectInspector } from 'react-inspector';
 import LedgerInstructionField from '../ledger-instruction-field';

-import {
-  ENVIRONMENT_TYPE_NOTIFICATION,
-  MESSAGE_TYPE,
-} from '../../../../shared/constants/app';
-import { getEnvironmentType } from '../../../../app/scripts/lib/util';
+import { MESSAGE_TYPE } from '../../../../shared/constants/app';
 import Identicon from '../../ui/identicon';
 import AccountListItem from '../account-list-item';
 import { conversionUtil } from '../../../../shared/modules/conversion.utils';
@ -39,42 +35,13 @@ export default class SignatureRequestOriginal extends Component {
    domainMetadata: PropTypes.object,
    hardwareWalletRequiresConnection: PropTypes.bool,
    isLedgerWallet: PropTypes.bool,
+    nativeCurrency: PropTypes.string.isRequired,
  };

  state = {
    fromAccount: this.props.fromAccount,
  };

-  componentDidMount = () => {
-    if (getEnvironmentType() === ENVIRONMENT_TYPE_NOTIFICATION) {
-      window.addEventListener('beforeunload', this._beforeUnload);
-    }
-  };
-
-  componentWillUnmount = () => {
-    this._removeBeforeUnload();
-  };
-
-  _beforeUnload = (event) => {
-    const { clearConfirmTransaction, cancel } = this.props;
-    const { metricsEvent } = this.context;
-    metricsEvent({
-      eventOpts: {
-        category: 'Transactions',
-        action: 'Sign Request',
-        name: 'Cancel Sig Request Via Notification Close',
-      },
-    });
-    clearConfirmTransaction();
-    cancel(event);
-  };
-
-  _removeBeforeUnload = () => {
-    if (getEnvironmentType() === ENVIRONMENT_TYPE_NOTIFICATION) {
-      window.removeEventListener('beforeunload', this._beforeUnload);
-    }
-  };
-
  renderHeader = () => {
    return (
      <div className="request-signature__header">
@ -108,12 +75,12 @@ export default class SignatureRequestOriginal extends Component {
  };

  renderBalance = () => {
-    const { conversionRate } = this.props;
+    const { conversionRate, nativeCurrency } = this.props;
    const {
      fromAccount: { balance },
    } = this.state;

-    const balanceInEther = conversionUtil(balance, {
+    const balanceInBaseAsset = conversionUtil(balance, {
      fromNumericBase: 'hex',
      toNumericBase: 'dec',
      fromDenomination: 'WEI',
@ -127,7 +94,7 @@ export default class SignatureRequestOriginal extends Component {
          {`${this.context.t('balance')}:`}
        </div>
        <div className="request-signature__balance-value">
-          {`${balanceInEther} ETH`}
+          {`${balanceInBaseAsset} ${nativeCurrency}`}
        </div>
      </div>
    );
@ -300,7 +267,6 @@ export default class SignatureRequestOriginal extends Component {
          large
          className="request-signature__footer__cancel-button"
          onClick={async (event) => {
-            this._removeBeforeUnload();
            await cancel(event);
            metricsEvent({
              eventOpts: {
@ -325,7 +291,6 @@ export default class SignatureRequestOriginal extends Component {
          className="request-signature__footer__sign-button"
          disabled={hardwareWalletRequiresConnection}
          onClick={async (event) => {
-            this._removeBeforeUnload();
            await sign(event);
            metricsEvent({
              eventOpts: {
--- a/ui/components/app/signature-request-original/signature-request-original.container.js
+++ b/ui/components/app/signature-request-original/signature-request-original.container.js
@ -13,7 +13,10 @@ import {
 import { getAccountByAddress } from '../../../helpers/utils/util';
 import { clearConfirmTransaction } from '../../../ducks/confirm-transaction/confirm-transaction.duck';
 import { getMostRecentOverviewPage } from '../../../ducks/history/history';
-import { isAddressLedger } from '../../../ducks/metamask/metamask';
+import {
+  isAddressLedger,
+  getNativeCurrency,
+} from '../../../ducks/metamask/metamask';
 import SignatureRequestOriginal from './signature-request-original.component';

 function mapStateToProps(state, ownProps) {
@ -34,6 +37,7 @@ function mapStateToProps(state, ownProps) {
    mostRecentOverviewPage: getMostRecentOverviewPage(state),
    hardwareWalletRequiresConnection,
    isLedgerWallet,
+    nativeCurrency: getNativeCurrency(state),
    // not passed to component
    allAccounts: accountsWithSendEtherInfoSelector(state),
    domainMetadata: getDomainMetadata(state),
--- a/ui/components/app/signature-request/signature-request.component.js
+++ b/ui/components/app/signature-request/signature-request.component.js
@ -1,12 +1,10 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import { getEnvironmentType } from '../../../../app/scripts/lib/util';
 import Identicon from '../../ui/identicon';
 import LedgerInstructionField from '../ledger-instruction-field';
 import Header from './signature-request-header';
 import Footer from './signature-request-footer';
 import Message from './signature-request-message';
-import { ENVIRONMENT_TYPE_NOTIFICATION } from './signature-request.constants';

 export default class SignatureRequest extends PureComponent {
  static propTypes = {
@ -17,7 +15,6 @@ export default class SignatureRequest extends PureComponent {
      name: PropTypes.string,
    }).isRequired,
    isLedgerWallet: PropTypes.bool,
-    clearConfirmTransaction: PropTypes.func.isRequired,
    cancel: PropTypes.func.isRequired,
    sign: PropTypes.func.isRequired,
    hardwareWalletRequiresConnection: PropTypes.func.isRequired,
@ -28,33 +25,6 @@ export default class SignatureRequest extends PureComponent {
    metricsEvent: PropTypes.func,
  };

-  componentDidMount() {
-    if (getEnvironmentType() === ENVIRONMENT_TYPE_NOTIFICATION) {
-      window.addEventListener('beforeunload', this._beforeUnload);
-    }
-  }
-
-  _beforeUnload = (event) => {
-    const {
-      clearConfirmTransaction,
-      cancel,
-      txData: { type },
-    } = this.props;
-    const { metricsEvent } = this.context;
-    metricsEvent({
-      eventOpts: {
-        category: 'Transactions',
-        action: 'Sign Request',
-        name: 'Cancel Sig Request Via Notification Close',
-      },
-      customVariables: {
-        type,
-      },
-    });
-    clearConfirmTransaction();
-    cancel(event);
-  };
-
  formatWallet(wallet) {
    return `${wallet.slice(0, 8)}...${wallet.slice(
      wallet.length - 8,
@ -79,7 +49,6 @@ export default class SignatureRequest extends PureComponent {
    const { metricsEvent } = this.context;

    const onSign = (event) => {
-      window.removeEventListener('beforeunload', this._beforeUnload);
      sign(event);
      metricsEvent({
        eventOpts: {
@ -95,7 +64,6 @@ export default class SignatureRequest extends PureComponent {
    };

    const onCancel = (event) => {
-      window.removeEventListener('beforeunload', this._beforeUnload);
      cancel(event);
      metricsEvent({
        eventOpts: {
--- a/ui/components/app/signature-request/signature-request.container.js
+++ b/ui/components/app/signature-request/signature-request.container.js
@ -1,5 +1,4 @@
 import { connect } from 'react-redux';
-import { clearConfirmTransaction } from '../../../ducks/confirm-transaction/confirm-transaction.duck';
 import {
  accountsWithSendEtherInfoSelector,
  doesAddressRequireLedgerHidConnection,
@ -28,12 +27,6 @@ function mapStateToProps(state, ownProps) {
  };
 }

-function mapDispatchToProps(dispatch) {
-  return {
-    clearConfirmTransaction: () => dispatch(clearConfirmTransaction()),
-  };
-}
-
 function mergeProps(stateProps, dispatchProps, ownProps) {
  const {
    allAccounts,
@ -83,8 +76,4 @@ function mergeProps(stateProps, dispatchProps, ownProps) {
  };
 }

-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-  mergeProps,
-)(SignatureRequest);
+export default connect(mapStateToProps, null, mergeProps)(SignatureRequest);
--- a/ui/components/app/transaction-detail/index.scss
+++ b/ui/components/app/transaction-detail/index.scss
@ -15,4 +15,55 @@
      text-transform: uppercase;
    }
  }
+
+  &-edit-V2 {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: baseline;
+    justify-content: flex-end;
+    padding-top: 20px;
+
+    button {
+      @include H7;
+
+      display: flex;
+      align-items: baseline;
+      color: $primary-1;
+      background: transparent;
+      border: 0;
+      padding-inline-end: 0;
+      white-space: pre;
+    }
+
+    i {
+      color: $primary-1;
+      margin-right: 2px;
+    }
+
+    &__icon {
+      font-size: 1rem;
+    }
+
+    &__label {
+      font-size: 12px;
+      margin-right: 8px;
+    }
+
+    .info-tooltip {
+      align-self: center;
+      margin-left: 6px;
+    }
+
+    &__tooltip {
+      p {
+        color: $Grey-500;
+      }
+
+      b {
+        color: $neutral-black;
+        display: inline-block;
+        min-width: 60%;
+      }
+    }
+  }
 }
--- a/ui/components/app/transaction-detail/transaction-detail.component.js
+++ b/ui/components/app/transaction-detail/transaction-detail.component.js
@ -1,12 +1,73 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';

-import { I18nContext } from '../../../contexts/i18n';
+import { useGasFeeContext } from '../../../contexts/gasFee';
+import InfoTooltip from '../../ui/info-tooltip/info-tooltip';
+import Typography from '../../ui/typography/typography';

 import TransactionDetailItem from '../transaction-detail-item/transaction-detail-item.component';
+import { COLORS } from '../../../helpers/constants/design-system';
+import { PRIORITY_LEVEL_ICON_MAP } from '../../../helpers/constants/gas';
+import { useI18nContext } from '../../../hooks/useI18nContext';

 export default function TransactionDetail({ rows = [], onEdit }) {
-  const t = useContext(I18nContext);
+  // eslint-disable-next-line prefer-destructuring
+  const EIP_1559_V2 = process.env.EIP_1559_V2;
+
+  const t = useI18nContext();
+  const {
+    gasLimit,
+    estimateUsed,
+    maxFeePerGas,
+    maxPriorityFeePerGas,
+    transaction,
+  } = useGasFeeContext();
+
+  if (EIP_1559_V2 && estimateUsed) {
+    return (
+      <div className="transaction-detail">
+        <div className="transaction-detail-edit-V2">
+          <button onClick={onEdit}>
+            <span className="transaction-detail-edit-V2__icon">
+              {`${PRIORITY_LEVEL_ICON_MAP[estimateUsed]} `}
+            </span>
+            <span className="transaction-detail-edit-V2__label">
+              {t(estimateUsed)}
+            </span>
+            <i className="fas fa-chevron-right asset-list-item__chevron-right" />
+          </button>
+          {estimateUsed === 'custom' && onEdit && (
+            <button onClick={onEdit}>{t('edit')}</button>
+          )}
+          {estimateUsed === 'dappSuggested' && (
+            <InfoTooltip
+              contentText={
+                <div className="transaction-detail-edit-V2__tooltip">
+                  <Typography fontSize="12px" color={COLORS.GREY}>
+                    {t('dappSuggestedTooltip', [transaction.origin])}
+                  </Typography>
+                  <Typography fontSize="12px">
+                    <b>{t('maxBaseFee')}</b>
+                    {maxFeePerGas}
+                  </Typography>
+                  <Typography fontSize="12px">
+                    <b>{t('maxPriorityFee')}</b>
+                    {maxPriorityFeePerGas}
+                  </Typography>
+                  <Typography fontSize="12px">
+                    <b>{t('gasLimit')}</b>
+                    {gasLimit}
+                  </Typography>
+                </div>
+              }
+              position="top"
+            />
+          )}
+        </div>
+        <div className="transaction-detail-rows">{rows}</div>
+      </div>
+    );
+  }

  return (
    <div className="transaction-detail">
--- a/ui/components/app/transaction-detail/transaction-detail.component.test.js
+++ b/ui/components/app/transaction-detail/transaction-detail.component.test.js
@ -0,0 +1,94 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+
+import { ETH } from '../../../helpers/constants/common';
+import { GasFeeContextProvider } from '../../../contexts/gasFee';
+import { renderWithProvider } from '../../../../test/jest';
+import configureStore from '../../../store/store';
+
+import TransactionDetail from './transaction-detail.component';
+
+jest.mock('../../../store/actions', () => ({
+  disconnectGasFeeEstimatePoller: jest.fn(),
+  getGasFeeEstimatesAndStartPolling: jest
+    .fn()
+    .mockImplementation(() => Promise.resolve()),
+  addPollingTokenToAppState: jest.fn(),
+}));
+
+const render = (props) => {
+  const store = configureStore({
+    metamask: {
+      nativeCurrency: ETH,
+      preferences: {
+        useNativeCurrencyAsPrimaryCurrency: true,
+      },
+      provider: {},
+      cachedBalances: {},
+      accounts: {
+        '0xAddress': {
+          address: '0xAddress',
+          balance: '0x176e5b6f173ebe66',
+        },
+      },
+      selectedAddress: '0xAddress',
+      featureFlags: { advancedInlineGas: true },
+    },
+  });
+
+  return renderWithProvider(
+    <GasFeeContextProvider {...props}>
+      <TransactionDetail
+        onEdit={() => {
+          console.log('on edit');
+        }}
+        rows={[]}
+        {...props}
+      />
+    </GasFeeContextProvider>,
+    store,
+  );
+};
+
+describe('TransactionDetail', () => {
+  beforeEach(() => {
+    process.env.EIP_1559_V2 = true;
+  });
+  afterEach(() => {
+    process.env.EIP_1559_V2 = false;
+  });
+  it('should render edit link with text low if low gas estimates are selected', () => {
+    render({ transaction: { userFeeLevel: 'low' } });
+    expect(screen.queryByText('🐢')).toBeInTheDocument();
+    expect(screen.queryByText('Low')).toBeInTheDocument();
+  });
+  it('should render edit link with text markey if medium gas estimates are selected', () => {
+    render({ transaction: { userFeeLevel: 'medium' } });
+    expect(screen.queryByText('🦊')).toBeInTheDocument();
+    expect(screen.queryByText('Market')).toBeInTheDocument();
+  });
+  it('should render edit link with text agressive if high gas estimates are selected', () => {
+    render({ transaction: { userFeeLevel: 'high' } });
+    expect(screen.queryByText('🦍')).toBeInTheDocument();
+    expect(screen.queryByText('Aggressive')).toBeInTheDocument();
+  });
+  it('should render edit link with text Site suggested if site suggested estimated are used', () => {
+    render({
+      transaction: {
+        dappSuggestedGasFees: { maxFeePerGas: 1, maxPriorityFeePerGas: 1 },
+        txParams: { maxFeePerGas: 1, maxPriorityFeePerGas: 1 },
+      },
+    });
+    expect(screen.queryByText('🌐')).toBeInTheDocument();
+    expect(screen.queryByText('Site suggested')).toBeInTheDocument();
+    expect(document.getElementsByClassName('info-tooltip')).toHaveLength(1);
+  });
+  it('should render edit link with text advance if custom gas estimates are used', () => {
+    render({
+      defaultEstimateToUse: 'custom',
+    });
+    expect(screen.queryByText('⚙')).toBeInTheDocument();
+    expect(screen.queryByText('Advanced')).toBeInTheDocument();
+    expect(screen.queryByText('Edit')).toBeInTheDocument();
+  });
+});
--- a/ui/components/ui/actionable-message/actionable-message.js
+++ b/ui/components/ui/actionable-message/actionable-message.js
@ -26,6 +26,7 @@ export default function ActionableMessage({
  type = 'default',
  useIcon = false,
  iconFillColor = '',
+  roundedButtons,
 }) {
  const actionableMessageClassName = classnames(
    'actionable-message',
@ -35,6 +36,9 @@ export default function ActionableMessage({
    { 'actionable-message--with-icon': useIcon },
  );

+  const onlyOneAction =
+    (primaryAction && !secondaryAction) || (secondaryAction && !primaryAction);
+
  return (
    <div className={actionableMessageClassName}>
      {useIcon ? <InfoTooltipIcon fillColor={iconFillColor} /> : null}
@ -47,12 +51,19 @@ export default function ActionableMessage({
      )}
      <div className="actionable-message__message">{message}</div>
      {(primaryAction || secondaryAction) && (
-        <div className="actionable-message__actions">
+        <div
+          className={classnames('actionable-message__actions', {
+            'actionable-message__actions--single': onlyOneAction,
+          })}
+        >
          {primaryAction && (
            <button
              className={classnames(
                'actionable-message__action',
                'actionable-message__action--primary',
+                {
+                  'actionable-message__action--rounded': roundedButtons,
+                },
              )}
              onClick={primaryAction.onClick}
            >
@ -64,6 +75,9 @@ export default function ActionableMessage({
              className={classnames(
                'actionable-message__action',
                'actionable-message__action--secondary',
+                {
+                  'actionable-message__action--rounded': roundedButtons,
+                },
              )}
              onClick={secondaryAction.onClick}
            >
@ -92,4 +106,5 @@ ActionableMessage.propTypes = {
  infoTooltipText: PropTypes.string,
  useIcon: PropTypes.bool,
  iconFillColor: PropTypes.string,
+  roundedButtons: PropTypes.bool,
 };
--- a/ui/components/ui/actionable-message/index.scss
+++ b/ui/components/ui/actionable-message/index.scss
@ -38,14 +38,22 @@
  &__actions {
    display: flex;
    width: 80%;
-    justify-content: space-evenly;
+    justify-content: flex-end;
    align-items: center;
    margin-top: 10px;
    color: $Blue-600;
+
+    &--single {
+      width: 100%;
+    }
  }

  &__action {
    font-weight: bold;
+
+    &--rounded {
+      border-radius: 8px;
+    }
  }

  &__info-tooltip-wrapper {
--- a/ui/components/ui/card/README.mdx
+++ b/ui/components/ui/card/README.mdx
@ -0,0 +1,42 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import Card from '.';
+
+# Card
+
+Cards are used to group related content or actions together.
+
+<Canvas>
+  <Story id="ui-components-ui-card-card-stories-js--default-story" />
+</Canvas>
+
+## Component API
+
+The `Card` component extends the `Box` component. See the `Box` component for an extended list of props.
+
+<ArgsTable of={Card} />
+
+## Usage
+
+The following describes the props and example usage for this component.
+
+### Padding, Border and Background Color
+
+The Card component has a set of default props that should meet most card use cases. There is a strong recommendation to not overwrite these to ensure our cards stay consistent across the app.
+
+That being said all props can be overwritten if necessary.
+
+```jsx
+import { COLORS } from '../../../helpers/constants/design-system';
+
+// To remove the border
+<Card border={false} />
+// All border related props of the Box component will work
+
+// To remove or change padding
+<Card padding={0} />
+// All padding related props of the Box component will work
+
+// To change the background color
+<Card backgroundColor={COLORS.UI4} />
+```
--- a/ui/components/ui/card/card.component.js
+++ b/ui/components/ui/card/card.component.js
@ -1,23 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-
-export default class Card extends PureComponent {
-  static propTypes = {
-    className: PropTypes.string,
-    overrideClassName: PropTypes.bool,
-    title: PropTypes.string,
-    children: PropTypes.node,
-  };
-
-  render() {
-    const { className, overrideClassName, title } = this.props;
-
-    return (
-      <div className={classnames({ card: !overrideClassName }, className)}>
-        <div className="card__title">{title}</div>
-        {this.props.children}
-      </div>
-    );
-  }
-}
--- a/ui/components/ui/card/card.component.test.js
+++ b/ui/components/ui/card/card.component.test.js
@ -1,21 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import Card from './card.component';
-
-describe('Card Component', () => {
-  it('should render a card with a title and child element', () => {
-    const wrapper = shallow(
-      <Card title="Test" className="card-test-class">
-        <div className="child-test-class">Child</div>
-      </Card>,
-    );
-
-    expect(wrapper.hasClass('card-test-class')).toStrictEqual(true);
-    const title = wrapper.find('.card__title');
-    expect(title).toHaveLength(1);
-    expect(title.text()).toStrictEqual('Test');
-    const child = wrapper.find('.child-test-class');
-    expect(child).toHaveLength(1);
-    expect(child.text()).toStrictEqual('Child');
-  });
-});
--- a/ui/components/ui/card/card.js
+++ b/ui/components/ui/card/card.js
@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Box from '../box';
+import {
+  BORDER_STYLE,
+  COLORS,
+  SIZES,
+} from '../../../helpers/constants/design-system';
+
+const Card = ({
+  border = true,
+  padding = 4,
+  backgroundColor = COLORS.WHITE,
+  children,
+  ...props
+}) => {
+  const defaultBorderProps = {
+    borderColor: border && COLORS.UI2,
+    borderRadius: border && SIZES.MD,
+    borderStyle: border && BORDER_STYLE.SOLID,
+  };
+
+  return (
+    <Box
+      {...{
+        padding,
+        backgroundColor,
+        ...defaultBorderProps,
+        ...props,
+      }}
+    >
+      {children}
+    </Box>
+  );
+};
+
+Card.propTypes = {
+  /**
+   * Whether the Card has a border or not.
+   * Defaults to true
+   */
+  border: PropTypes.bool,
+  /**
+   * Padding of the Card component accepts number or an array of 2 numbers.
+   * Defaults to 4 (16px)
+   */
+  padding: Box.propTypes.padding,
+  /**
+   * The background color of the card
+   * Defaults to COLORS.WHITE
+   */
+  backgroundColor: Box.propTypes.backgroundColor,
+  /**
+   * The Card component accepts all Box component props
+   */
+  ...Box.propTypes,
+};
+
+export default Card;
--- a/ui/components/ui/card/card.stories.js
+++ b/ui/components/ui/card/card.stories.js
@ -0,0 +1,169 @@
+import React from 'react';
+import {
+  ALIGN_ITEMS,
+  BLOCK_SIZES,
+  BORDER_STYLE,
+  COLORS,
+  DISPLAY,
+  JUSTIFY_CONTENT,
+  TEXT_ALIGN,
+} from '../../../helpers/constants/design-system';
+
+import README from './README.mdx';
+import Card from '.';
+
+const sizeOptions = [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+
+export default {
+  title: 'UI/Card',
+  id: __filename,
+  component: Card,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    children: { control: 'text' },
+    border: {
+      control: 'boolean',
+    },
+    borderStyle: {
+      control: {
+        type: 'select',
+      },
+      options: Object.values(BORDER_STYLE),
+    },
+    borderWidth: {
+      control: {
+        type: 'select',
+      },
+      options: [...sizeOptions],
+    },
+    borderColor: {
+      control: {
+        type: 'select',
+      },
+      options: Object.values(COLORS),
+    },
+    backgroundColor: {
+      control: {
+        type: 'select',
+      },
+      options: Object.values(COLORS),
+    },
+    width: {
+      control: {
+        type: 'select',
+      },
+      options: Object.values(BLOCK_SIZES),
+    },
+    height: {
+      control: {
+        type: 'select',
+      },
+      options: Object.values(BLOCK_SIZES),
+    },
+    textAlign: {
+      control: {
+        type: 'select',
+      },
+      options: Object.values(TEXT_ALIGN),
+    },
+    margin: {
+      control: {
+        type: 'select',
+      },
+      options: [...sizeOptions],
+    },
+    marginTop: {
+      control: {
+        type: 'select',
+      },
+      options: [...sizeOptions],
+    },
+    marginRight: {
+      control: {
+        type: 'select',
+      },
+      options: [...sizeOptions],
+    },
+    marginBottom: {
+      control: {
+        type: 'select',
+      },
+      options: [...sizeOptions],
+    },
+    marginLeft: {
+      control: {
+        type: 'select',
+      },
+      options: [...sizeOptions],
+    },
+    padding: {
+      control: {
+        type: 'select',
+      },
+      options: [...sizeOptions],
+    },
+    paddingTop: {
+      control: {
+        type: 'select',
+      },
+      options: [...sizeOptions],
+    },
+    paddingRight: {
+      control: {
+        type: 'select',
+      },
+      options: [...sizeOptions],
+    },
+    paddingBottom: {
+      control: {
+        type: 'select',
+      },
+      options: [...sizeOptions],
+    },
+    paddingLeft: {
+      control: {
+        type: 'select',
+      },
+      options: [...sizeOptions],
+    },
+    display: {
+      control: {
+        type: 'select',
+      },
+      options: Object.values(DISPLAY),
+    },
+    justifyContent: {
+      control: {
+        type: 'select',
+      },
+      options: Object.values(JUSTIFY_CONTENT),
+    },
+    alignItems: {
+      control: {
+        type: 'select',
+      },
+      options: Object.values(ALIGN_ITEMS),
+    },
+  },
+  args: {
+    children: 'Card children',
+  },
+};
+
+export const DefaultStory = (args) => <Card {...args}>{args.children}</Card>;
+
+DefaultStory.storyName = 'Default';
+
+DefaultStory.args = {
+  padding: 4,
+  border: true,
+  borderWidth: 1,
+  borderColor: COLORS.UI2,
+  borderStyle: BORDER_STYLE.SOLID,
+  backgroundColor: COLORS.WHITE,
+  display: DISPLAY.BLOCK,
+};
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`export { default } from './edit-gas-fee-popover';`
				`@ -0,0 +1 @@`
				`export { default } from './new-collectibles-notice.component';`