diff --git a/.browserslistrc b/.browserslistrc
new file mode 100644
index 000000000..b604b35eb
--- /dev/null
+++ b/.browserslistrc
@@ -0,0 +1 @@
+chrome >= 66, firefox >= 68
\ No newline at end of file
diff --git a/.circleci/config.yml b/.circleci/config.yml
index 7d1068879..f9decf829 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -516,6 +516,7 @@ jobs:
 
   test-e2e-chrome:
     executor: node-browsers
+    parallelism: 8
     steps:
       - checkout
       - run:
@@ -540,9 +541,10 @@ jobs:
       - store_artifacts:
           path: test-artifacts
           destination: test-artifacts
-    
+
   test-e2e-chrome-mv3:
     executor: node-browsers
+    parallelism: 8
     steps:
       - checkout
       - run:
@@ -570,6 +572,7 @@ jobs:
 
   test-e2e-firefox-snaps:
     executor: node-browsers
+    parallelism: 2
     steps:
       - checkout
       - run:
@@ -597,6 +600,7 @@ jobs:
 
   test-e2e-chrome-snaps:
     executor: node-browsers
+    parallelism: 2
     steps:
       - checkout
       - run:
@@ -624,6 +628,7 @@ jobs:
 
   test-e2e-firefox:
     executor: node-browsers-medium-plus
+    parallelism: 8
     steps:
       - checkout
       - run:
@@ -792,6 +797,11 @@ jobs:
       - store_artifacts:
           path: development/ts-migration-dashboard/build
           destination: ts-migration-dashboard
+      - run:
+          name: Set branch parent commit env var
+          command: |
+            echo "export PARENT_COMMIT=$(git rev-parse "$(git rev-list --topo-order --reverse HEAD ^origin/develop | head -1)"^)" >> $BASH_ENV
+            source $BASH_ENV
       - run:
           name: build:announce
           command: ./development/metamaskbot-build-announce.js
diff --git a/.circleci/scripts/firefox-install.sh b/.circleci/scripts/firefox-install.sh
index f2f9f284d..fb574f13e 100755
--- a/.circleci/scripts/firefox-install.sh
+++ b/.circleci/scripts/firefox-install.sh
@@ -4,7 +4,7 @@ set -e
 set -u
 set -o pipefail
 
-FIREFOX_VERSION='102.0'
+FIREFOX_VERSION='106.0.4'
 FIREFOX_BINARY="firefox-${FIREFOX_VERSION}.tar.bz2"
 FIREFOX_BINARY_URL="https://ftp.mozilla.org/pub/firefox/releases/${FIREFOX_VERSION}/linux-x86_64/en-US/${FIREFOX_BINARY}"
 FIREFOX_PATH='/opt/firefox'
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 6df4c6e65..8f4c7ba9e 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -6,18 +6,6 @@ Thanks for the pull request. Take a moment to answer these questions so that rev
 * What is the current state of things and why does it need to change?
 * What is the solution your changes offer and how does it work?
 
-Below is a template to give you some ideas. Feel free to use your own words!
-
-Currently, ...
-
-This is a problem because ...
-
-In order to solve this problem, this pull request ...
--->
-
-## More Information
-
-<!--
 Are there any issues, Slack conversations, Zendesk issues, user stories, etc. reviewers should consult to understand this pull request better? For instance:
 
 * Fixes #12345
@@ -46,14 +34,20 @@ How should reviewers and QA manually test your changes? For instance:
 - Then do this
 -->
 
-## Pre-Merge Checklist
+## Pre-merge author checklist
 
-- [ ] PR template is filled out
-- [ ] **IF** this PR fixes a bug, a test that _would have_ caught the bug has been added
+- [ ] I've clearly explained:
+  - [ ] What problem this PR is solving
+  - [ ] How this problem was solved
+  - [ ] How reviewers can test my changes
+- [ ] Sufficient automated test coverage has been added
+
+## Pre-merge reviewer checklist
+
+- [ ] Manual testing (e.g. pull and build branch, run in browser, test code being changed)
 - [ ] PR is linked to the appropriate GitHub issue
-- [ ] PR has been added to the appropriate release Milestone
+- [ ] **IF** this PR fixes a bug in the release milestone, add this PR to the release milestone
 
-### + If there are functional changes:
+If further QA is required (e.g. new feature, complex testing steps, large refactor), add the `Extension QA Board` label.
 
-- [ ] Manual testing complete & passed
-- [ ] "Extension QA Board" label has been applied
+In this case, a QA Engineer approval will be be required.
diff --git a/.github/workflows/cla.yml b/.github/workflows/cla.yml
index 93758bae9..0f7977000 100644
--- a/.github/workflows/cla.yml
+++ b/.github/workflows/cla.yml
@@ -8,7 +8,7 @@ on:
 jobs:
   CLABot:
     if: github.event_name == 'pull_request_target' || contains(github.event.comment.html_url, '/pull/')
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     permissions:
       pull-requests: write
       contents: write
diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml
index 6f004d274..f945eb7b7 100644
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql-analysis.yml
@@ -23,7 +23,7 @@ on:
 jobs:
   analyze:
     name: Analyze
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     permissions:
       actions: read
       contents: read
diff --git a/.github/workflows/crowdin_action.yml b/.github/workflows/crowdin_action.yml
index f476277ed..a77592321 100644
--- a/.github/workflows/crowdin_action.yml
+++ b/.github/workflows/crowdin_action.yml
@@ -13,7 +13,7 @@ on:
 
 jobs:
   synchronize-with-crowdin:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
 
     steps:
 
diff --git a/.storybook/initial-states/transactions.js b/.storybook/initial-states/transactions.js
index fefafefc4..70885e4a6 100644
--- a/.storybook/initial-states/transactions.js
+++ b/.storybook/initial-states/transactions.js
@@ -1454,7 +1454,7 @@ export const MOCK_TRANSACTION_BY_TYPE = {
     dappSuggestedGasFees: null,
     sendFlowHistory: [
       {
-        entry: 'sendFlow - user set asset type to COLLECTIBLE',
+        entry: 'sendFlow - user set asset type to NFT',
         timestamp: 1653457317999,
       },
       {
@@ -1504,7 +1504,7 @@ export const MOCK_TRANSACTION_BY_TYPE = {
         dappSuggestedGasFees: null,
         sendFlowHistory: [
           {
-            entry: 'sendFlow - user set asset type to COLLECTIBLE',
+            entry: 'sendFlow - user set asset type to NFT',
             timestamp: 1653457317999,
           },
           {
diff --git a/README.md b/README.md
index 21a67235a..302c32ca6 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,7 @@ To learn how to contribute to the MetaMask project itself, visit our [Internal D
 ## Building locally
 
 - Install [Node.js](https://nodejs.org) version 16
-    - If you are using [nvm](https://github.com/creationix/nvm#installation) (recommended) running `nvm use` will automatically choose the right node version for you.
+    - If you are using [nvm](https://github.com/nvm-sh/nvm#installing-and-updating) (recommended) running `nvm use` will automatically choose the right node version for you.
 - Install [Yarn](https://yarnpkg.com/en/docs/install)
 - Install dependencies: `yarn setup` (not the usual install command)
 - Copy the `.metamaskrc.dist` file to `.metamaskrc`
@@ -61,13 +61,16 @@ You can run the linter by itself with `yarn lint`, and you can automatically fix
 
 ### Running E2E Tests
 
-Our e2e test suite can be run on either Firefox or Chrome. In either case, start by creating a test build by running `yarn build:test`.
+Our e2e test suite can be run on either Firefox or Chrome.
 
-- Firefox e2e tests can be run with `yarn test:e2e:firefox`.
+1. **required** `yarn build:test` to create a test build.
+2. run tests, targetting the browser:
+ * Firefox e2e tests can be run with `yarn test:e2e:firefox`.
+ * Chrome e2e tests can be run with `yarn test:e2e:chrome`. The `chromedriver` package major version must match the major version of your local Chrome installation. If they don't match, update whichever is behind before running Chrome e2e tests.
 
-- Chrome e2e tests can be run with `yarn test:e2e:chrome`. The `chromedriver` package major version must match the major version of your local Chrome installation. If they don't match, update whichever is behind before running Chrome e2e tests.
+#### Running a single e2e test
 
-- Single e2e tests can be run with `yarn test:e2e:single test/e2e/tests/TEST_NAME.spec.js` along with the options below.
+Single e2e tests can be run with `yarn test:e2e:single test/e2e/tests/TEST_NAME.spec.js` along with the options below.
 
 ```console
 --browser             Set the browser used; either 'chrome' or 'firefox'.
diff --git a/app/_locales/de/messages.json b/app/_locales/de/messages.json
index 9bb059502..42aa54bfd 100644
--- a/app/_locales/de/messages.json
+++ b/app/_locales/de/messages.json
@@ -1853,7 +1853,7 @@
     "message": "Richtungspfeil"
   },
   "lightTheme": {
-    "message": "Leicht"
+    "message": "Hell"
   },
   "likeToImportTokens": {
     "message": "Möchtest du diese Token hinzufügen?"
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 71eaf9cd9..078fda863 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -434,18 +434,35 @@
   "beCareful": {
     "message": "Be careful"
   },
+  "beta": {
+    "message": "Beta"
+  },
+  "betaHeaderText": {
+    "message": "This is a BETA version. Please report bugs $1",
+    "description": "$1 represents the word 'here' in a hyperlink"
+  },
   "betaMetamaskDescription": {
     "message": "Trusted by millions, MetaMask is a secure wallet making the world of web3 accessible to all."
   },
+  "betaMetamaskDescriptionDisclaimerHeading": {
+    "message": "Beta version disclaimer"
+  },
   "betaMetamaskDescriptionExplanation": {
-    "message": "Use this version to test upcoming features before they’re released. Your use and feedback helps us build the best version of MetaMask possible. Your use of MetaMask Beta is subject to our standard $1 as well as our $2. As a Beta, there may be an increased risk of bugs. By proceeding, you accept and acknowledge these risks, as well as those risks found in our Terms and Beta Terms.",
+    "message": "This version allows you to test upcoming features before they’re released, which helps make MetaMask even better. As with all beta versions, there may be an increased risk of bugs.  MetaMask Beta is subject to our $1 as well as our $2.",
     "description": "$1 represents localization item betaMetamaskDescriptionExplanationTermsLinkText.  $2 represents localization item betaMetamaskDescriptionExplanationBetaTermsLinkText"
   },
+  "betaMetamaskDescriptionExplanation2": {
+    "message": "By proceeding, you accept and acknowledge these risks, our $1, and $2.",
+    "description": "$1 represents localization item betaMetamaskDescriptionExplanationTermsLinkText.  $2 represents localization item betaMetamaskDescriptionExplanation2BetaTermsLinkText"
+  },
+  "betaMetamaskDescriptionExplanation2BetaTermsLinkText": {
+    "message": "Beta Terms"
+  },
   "betaMetamaskDescriptionExplanationBetaTermsLinkText": {
-    "message": "Supplemental Beta Terms"
+    "message": "supplemental Beta Terms"
   },
   "betaMetamaskDescriptionExplanationTermsLinkText": {
-    "message": "Terms"
+    "message": "standard Terms"
   },
   "betaMetamaskVersion": {
     "message": "MetaMask Beta Version"
@@ -454,13 +471,13 @@
     "message": "beta portfolio site"
   },
   "betaTerms": {
-    "message": "BETA Terms of use"
+    "message": "Beta Terms of use"
   },
   "betaWalletCreationSuccessReminder1": {
-    "message": "MetaMask BETA can’t recover your Secret Recovery Phrase."
+    "message": "MetaMask Beta can’t recover your Secret Recovery Phrase."
   },
   "betaWalletCreationSuccessReminder2": {
-    "message": "MetaMask BETA will never ask you for your Secret Recovery Phrase."
+    "message": "MetaMask Beta will never ask you for your Secret Recovery Phrase."
   },
   "betaWelcome": {
     "message": "Welcome to MetaMask Beta"
@@ -767,6 +784,12 @@
   "contractInteraction": {
     "message": "Contract interaction"
   },
+  "contractNFT": {
+    "message": "NFT contract"
+  },
+  "contractRequestingAccess": {
+    "message": "Contract requesting access"
+  },
   "contractRequestingSpendingCap": {
     "message": "Contract requesting spending cap"
   },
@@ -1694,6 +1717,12 @@
     "message": "Imported",
     "description": "status showing that an account has been fully loaded into the keyring"
   },
+  "improvedTokenAllowance": {
+    "message": "Improved token allowance experience"
+  },
+  "improvedTokenAllowanceDescription": {
+    "message": "Turn this on to go through the improved token allowance experience whenever a dapp requests an ERC20 approve"
+  },
   "inYourSettings": {
     "message": "in your Settings"
   },
@@ -2146,6 +2175,9 @@
   "networkName": {
     "message": "Network name"
   },
+  "networkNameArbitrum": {
+    "message": "Arbitrum"
+  },
   "networkNameAvalanche": {
     "message": "Avalanche"
   },
@@ -2161,6 +2193,9 @@
   "networkNameGoerli": {
     "message": "Goerli"
   },
+  "networkNameOptimism": {
+    "message": "Optimism"
+  },
   "networkNamePolygon": {
     "message": "Polygon"
   },
@@ -2380,6 +2415,15 @@
   "notifications15Title": {
     "message": "The Ethereum Merge is here!"
   },
+  "notifications16ActionText": {
+    "message": "Try it out here"
+  },
+  "notifications16Description": {
+    "message": "We redesigned our token allowance confirmation to help you make more informed decisions."
+  },
+  "notifications16Title": {
+    "message": "Improved token allowance experience"
+  },
   "notifications1Description": {
     "message": "MetaMask Mobile users can now swap tokens inside their mobile wallet. Scan the QR code to get the mobile app and start swapping.",
     "description": "Description of a notification in the 'See What's New' popup. Describes the swapping on mobile feature."
@@ -2657,6 +2701,10 @@
     "message": "Connect to the $1 Snap.",
     "description": "The description for the `wallet_snap_*` permission. $1 is the name of the Snap."
   },
+  "permission_cronjob": {
+    "message": "Schedule and execute periodic actions.",
+    "description": "The description for the `snap_cronjob` permission"
+  },
   "permission_customConfirmation": {
     "message": "Display a confirmation in MetaMask.",
     "description": "The description for the `snap_confirm` permission"
@@ -2940,6 +2988,9 @@
     "message": "By revoking permission, the following $1 will no longer be able to access your $2",
     "description": "$1 is either key 'account' or 'contract', and $2 is either a string or link of a given token symbol or name"
   },
+  "revokeSpendingCap": {
+    "message": "Revoke spending cap for your"
+  },
   "revokeSpendingCapTooltipText": {
     "message": "This contract will be unable to spend any more of your current or future tokens."
   },
@@ -3263,6 +3314,10 @@
   "snaps": {
     "message": "Snaps"
   },
+  "snapsInsightError": {
+    "message": "An error occured with $1: $2",
+    "description": "This is shown when the insight snap throws an error. $1 is the snap name, $2 is the error message."
+  },
   "snapsInsightLoading": {
     "message": "Loading transaction insight..."
   },
@@ -3281,6 +3336,9 @@
   "someNetworksMayPoseSecurity": {
     "message": "Some networks may pose security and/or privacy risks. Understand the risks before adding & using a network."
   },
+  "somethingIsWrong": {
+    "message": "Something's gone wrong. Try reloading the page."
+  },
   "somethingWentWrong": {
     "message": "Oops! Something went wrong."
   },
diff --git a/app/_locales/zh_TW/messages.json b/app/_locales/zh_TW/messages.json
index a4ac39f5c..19e8a579b 100644
--- a/app/_locales/zh_TW/messages.json
+++ b/app/_locales/zh_TW/messages.json
@@ -2,6 +2,14 @@
   "about": {
     "message": "關於"
   },
+  "acceptTermsOfUse": {
+    "message": "我已閱讀並同意$1",
+    "description": "$1 is the `terms` message"
+  },
+  "accessAndSpendNotice": {
+    "message": "$1 可能會存取並最多花費以下額度",
+    "description": "$1 is the url of the site requesting ability to spend"
+  },
   "accessingYourCamera": {
     "message": "正在存取您的攝影鏡頭..."
   },
@@ -18,7 +26,10 @@
     "message": "帳戶"
   },
   "accountSelectionRequired": {
-    "message": "必須先選擇一個帳戶!"
+    "message": "您必須先選擇一個帳戶！"
+  },
+  "active": {
+    "message": "啟用"
   },
   "activity": {
     "message": "交易紀錄"
@@ -32,6 +43,32 @@
   "addAlias": {
     "message": "新增化名"
   },
+  "addContact": {
+    "message": "新增合約"
+  },
+  "addCustomToken": {
+    "message": "Add Custom Token"
+  },
+  "addEthereumChainConfirmationDescription": {
+    "message": "這會允許在 MetaMask 內使用這個網路。"
+  },
+  "addEthereumChainConfirmationRisks": {
+    "message": "MetaMask 不會對自訂的網路做驗證。"
+  },
+  "addEthereumChainConfirmationRisksLearnMore": {
+    "message": "了解更多關於$1的事。",
+    "description": "$1 is a link with text that is provided by the 'addEthereumChainConfirmationRisksLearnMoreLink' key"
+  },
+  "addEthereumChainConfirmationRisksLearnMoreLink": {
+    "message": "詐騙與網路安全風險",
+    "description": "Link text for the 'addEthereumChainConfirmationRisksLearnMore' translation key"
+  },
+  "addEthereumChainConfirmationTitle": {
+    "message": "允許這個網站新增一個網路？"
+  },
+  "addFriendsAndAddresses": {
+    "message": "新增朋友和您信任的位址"
+  },
   "addNetwork": {
     "message": "新增網路"
   },
@@ -47,6 +84,37 @@
   "advancedOptions": {
     "message": "進階選項"
   },
+  "affirmAgree": {
+    "message": "我同意"
+  },
+  "alertDisableTooltip": {
+    "message": "這可以在「設定 > 提醒」裡變更"
+  },
+  "alertSettingsUnconnectedAccount": {
+    "message": "選擇尚未連結的帳戶瀏覽一個網站時"
+  },
+  "alertSettingsUnconnectedAccountDescription": {
+    "message": "當您瀏覽一個使用 web3 的網站，但目前選擇的帳戶沒有連結時，這個提醒會顯示在一個彈跳視窗。"
+  },
+  "alertSettingsWeb3ShimUsage": {
+    "message": "當一個網站試著使用已經移除的 window.web3 API"
+  },
+  "alertSettingsWeb3ShimUsageDescription": {
+    "message": "當您瀏覽一個嘗試使用已經移除的 window.web3 API 的網站，可能會因此故障時，這個提醒會顯示在一個彈跳視窗。"
+  },
+  "alerts": {
+    "message": "提醒"
+  },
+  "allowExternalExtensionTo": {
+    "message": "允許這個外部擴充功能："
+  },
+  "allowThisSiteTo": {
+    "message": "允許這個網站："
+  },
+  "allowWithdrawAndSpend": {
+    "message": "允許 $1 提款或最多花費以下額度：",
+    "description": "The url of the site that requested permission to 'withdraw and spend'"
+  },
   "amount": {
     "message": "數量"
   },
@@ -54,42 +122,43 @@
     "message": "以太坊瀏覽器擴充插件",
     "description": "The description of the application"
   },
-  "appName": {
-    "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)"
-  },
   "approve": {
+    "message": "批准花費上限"
+  },
+  "approveButtonText": {
     "message": "批准"
   },
+  "approveSpendLimit": {
+    "message": "批准 $1 花費限額",
+    "description": "The token symbol that is being approved"
+  },
   "approved": {
-    "message": "已批准"
+    "message": "已許可"
   },
   "asset": {
     "message": "資產"
   },
+  "assetOptions": {
+    "message": "資產選項"
+  },
   "assets": {
     "message": "資產"
   },
   "attemptToCancel": {
-    "message": "嘗試取消?"
+    "message": "嘗試取消？"
   },
   "attemptToCancelDescription": {
-    "message": "送出取消並不保證您的交易一定會被取消。若取消成功，將會收取上方顯示交易費用"
+    "message": "送出取消請求並不保證您原本的交易一定會被取消。若取消成功，將會收取上方顯示交易費用。"
   },
   "attemptingConnect": {
-    "message": "正在嘗試連接區塊鏈。"
+    "message": "正在嘗試連結區塊鏈。"
   },
   "attributions": {
     "message": "來源"
   },
+  "authorizedPermissions": {
+    "message": "您已經授予以下權限"
+  },
   "autoLockTimeLimit": {
     "message": "自動登出計時器（分）"
   },
@@ -103,13 +172,13 @@
     "message": "上一頁"
   },
   "backToAll": {
-    "message": "回到所有"
+    "message": "回到全部"
   },
   "backupApprovalInfo": {
     "message": "在裝置遺失、忘記密碼、需要重新安裝 MetaMask、或是想在另一裝置開啟錢包的情形下，你需要此秘密代碼來復原錢包。"
   },
   "backupApprovalNotice": {
-    "message": "備份你的秘密還原代碼，安全防護錢包與資金。"
+    "message": "備份你的助憶詞，保護你的錢包與資金。"
   },
   "backupNow": {
     "message": "現在備份"
@@ -126,8 +195,11 @@
   "blockExplorerUrl": {
     "message": "區塊鏈瀏覽器"
   },
+  "blockExplorerUrlDefinition": {
+    "message": "這個網路的區塊鏈瀏覽器網址。"
+  },
   "blockExplorerView": {
-    "message": "在 $1 觀看帳號 ",
+    "message": "在 $1 檢視帳戶",
     "description": "$1 replaced by URL for custom block explorer"
   },
   "browserNotSupported": {
@@ -140,14 +212,23 @@
     "message": "用 Wyre 購買 $1"
   },
   "buyWithWyreDescription": {
-    "message": "Wyre 讓你使用信用卡在 MetaMask 帳號中直接存入 $1 。"
+    "message": "Wyre 讓你使用信用卡在 MetaMask 帳戶中直接存入 $1 。"
   },
   "bytes": {
     "message": "位元組"
   },
+  "canToggleInSettings": {
+    "message": "您可以在「設定 -> 提醒」中重新啟用這個通知。"
+  },
   "cancel": {
     "message": "取消"
   },
+  "cancelEdit": {
+    "message": "Cancel Edit"
+  },
+  "cancelSpeedUp": {
+    "message": "cancel or speed up a tranaction."
+  },
   "cancellationGasFee": {
     "message": "需要的手續費"
   },
@@ -157,8 +238,11 @@
   "chainId": {
     "message": "鏈 ID"
   },
+  "chainIdDefinition": {
+    "message": "鏈 ID 用來簽署這個網路上的交易。"
+  },
   "chromeRequiredForHardwareWallets": {
-    "message": "您需要在 Google Chrome 瀏覽器使用 MetaMask 連結您的硬體錢包"
+    "message": "您需要在 Google Chrome 瀏覽器使用 MetaMask 連結您的硬體錢包。"
   },
   "clickToRevealSeed": {
     "message": "點選顯示助憶詞"
@@ -178,26 +262,103 @@
   "confirmed": {
     "message": "已確認"
   },
+  "confusableUnicode": {
+    "message": "'$1' 和 '$2' 相像。"
+  },
+  "confusableZeroWidthUnicode": {
+    "message": "發現零寬度字元。"
+  },
+  "confusingEnsDomain": {
+    "message": "我們在 ENS 名稱中偵測到一些容易混淆的字元。請再次確認 ENS 名稱來避免被詐騙的可能。"
+  },
   "congratulations": {
     "message": "恭喜"
   },
   "connect": {
     "message": "連線"
   },
+  "connectAccountOrCreate": {
+    "message": "連結帳戶或建立新的"
+  },
   "connectHardwareWallet": {
     "message": "連線硬體錢包"
   },
+  "connectManually": {
+    "message": "手動連結到目前的網站"
+  },
+  "connectTo": {
+    "message": "連結到 $1",
+    "description": "$1 is the name/origin of a web3 site/application that the user can connect to metamask"
+  },
+  "connectToAll": {
+    "message": "連結到您的全部$1",
+    "description": "$1 will be replaced by the translation of connectToAllAccounts"
+  },
+  "connectToAllAccounts": {
+    "message": "帳戶",
+    "description": "will replace $1 in connectToAll, completing the sentence 'connect to all of your accounts', will be text that shows list of accounts on hover"
+  },
+  "connectToMultiple": {
+    "message": "連結到 $1",
+    "description": "$1 will be replaced by the translation of connectToMultipleNumberOfAccounts"
+  },
+  "connectToMultipleNumberOfAccounts": {
+    "message": "$1 個帳戶",
+    "description": "$1 is the number of accounts to which the web3 site/application is asking to connect; this will substitute $1 in connectToMultiple"
+  },
+  "connectWithMetaMask": {
+    "message": "連結到 MetaMask"
+  },
+  "connectedAccountsDescriptionPlural": {
+    "message": "您有 $1 個帳戶已連結到這個網站。",
+    "description": "$1 is the number of accounts"
+  },
+  "connectedAccountsDescriptionSingular": {
+    "message": "您有 1 個帳戶已連結到這個網站。"
+  },
+  "connectedAccountsEmptyDescription": {
+    "message": "MetaMask 尚未連結到這個網站。要連結到一個 web3 的網站，在該網站上尋找「連線」的按鈕。"
+  },
+  "connectedSites": {
+    "message": "已連結的網站"
+  },
+  "connectedSitesDescription": {
+    "message": "$1 已經連結到這些網站。他們可以檢視您的帳戶位址。",
+    "description": "$1 is the account name"
+  },
+  "connectedSitesEmptyDescription": {
+    "message": "$1 尚未連結到任何網站。",
+    "description": "$1 is the account name"
+  },
+  "connecting": {
+    "message": "連線中..."
+  },
   "connectingTo": {
-    "message": "連線到$1"
+    "message": "連線到 $1"
   },
   "connectingToGoerli": {
-    "message": "連接至 Goerli 測試網路"
+    "message": "連線到 Goerli 測試網路"
   },
   "connectingToMainnet": {
-    "message": "連線到主 Ethereum 網路"
+    "message": "連線到 Ethereum 主網路"
+  },
+  "connectingToSepolia": {
+    "message": "連線到 Sepolia 測試網路"
+  },
+  "contactUs": {
+    "message": "聯絡我們"
+  },
+  "contacts": {
+    "message": "聯絡人"
+  },
+  "continue": {
+    "message": "繼續"
   },
   "continueToWyre": {
-    "message": "繼續至 Wyre"
+    "message": "繼續前往 Wyre"
+  },
+  "contractAddressError": {
+    "message": "您正在將代幣傳送到代幣合約的位址。這可能會導致這些代幣遺失。"
   },
   "contractDeployment": {
     "message": "部署合約"
@@ -235,23 +396,61 @@
   "currencyConversion": {
     "message": "轉換匯率"
   },
+  "currencySymbol": {
+    "message": "貨幣代碼"
+  },
+  "currencySymbolDefinition": {
+    "message": "用來代表這個網路的貨幣的代碼。"
+  },
+  "currentAccountNotConnected": {
+    "message": "您目前的帳戶並未連結"
+  },
+  "currentExtension": {
+    "message": "目前擴充功能頁面"
+  },
   "currentLanguage": {
-    "message": "當前語言"
+    "message": "目前語言"
+  },
+  "customSpendLimit": {
+    "message": "自訂花費限制"
+  },
+  "customSpendingCap": {
+    "message": "自訂花費上限"
   },
   "customToken": {
     "message": "自訂代幣"
   },
   "decimal": {
-    "message": "小數點精度"
+    "message": "小數點位數"
   },
   "decimalsMustZerotoTen": {
-    "message": "小數點後位數至少為0, 最多為36."
+    "message": "小數點位數至少為 0，至多為 36。"
+  },
+  "decrypt": {
+    "message": "解密"
+  },
+  "decryptCopy": {
+    "message": "複製已加密的訊息"
+  },
+  "decryptInlineError": {
+    "message": "這個訊息無法被解密，因為以下錯誤：$1",
+    "description": "$1 is error message"
+  },
+  "decryptMessageNotice": {
+    "message": "$1 想要讀取這個訊息來完成您的動作",
+    "description": "$1 is the web3 site name"
+  },
+  "decryptMetamask": {
+    "message": "解密訊息"
+  },
+  "decryptRequest": {
+    "message": "解密請求"
   },
   "delete": {
     "message": "刪除"
   },
   "deleteAccount": {
-    "message": "刪除帳號"
+    "message": "刪除帳戶"
   },
   "deleteNetwork": {
     "message": "刪除網路？"
@@ -259,12 +458,52 @@
   "deleteNetworkDescription": {
     "message": "你確定要刪除網路嗎？"
   },
+  "depositCrypto": {
+    "message": "存入 $1",
+    "description": "$1 represents the crypto symbol to be purchased"
+  },
   "details": {
     "message": "詳情"
   },
+  "directDepositCrypto": {
+    "message": "直接存入 $1"
+  },
+  "directDepositCryptoExplainer": {
+    "message": "如果您已經擁有一些 $1，直接存入功能是讓新錢包最快取得的方式。"
+  },
+  "disconnect": {
+    "message": "中斷連結"
+  },
+  "disconnectAllAccounts": {
+    "message": "中斷所有帳戶的連結"
+  },
+  "disconnectAllAccountsConfirmationDescription": {
+    "message": "您確定要中斷連結？您可能會失去網站的一些功能。"
+  },
+  "disconnectPrompt": {
+    "message": "中斷 $1"
+  },
+  "disconnectThisAccount": {
+    "message": "中斷這個帳戶的連結"
+  },
+  "dismiss": {
+    "message": "忽略"
+  },
+  "dismissReminderDescriptionField": {
+    "message": "把這個選項打開來忽略備份助憶詞的提醒。我們強烈建議您備份助憶詞，避免資金遺失"
+  },
+  "dismissReminderField": {
+    "message": "忽略備份助憶詞的提醒"
+  },
+  "domain": {
+    "message": "網域"
+  },
   "done": {
     "message": "完成"
   },
+  "dontShowThisAgain": {
+    "message": "不要再顯示"
+  },
   "downloadGoogleChrome": {
     "message": "下載 Google Chrome 瀏覽器"
   },
@@ -283,8 +522,27 @@
   "editContact": {
     "message": "編輯聯絡資訊"
   },
+  "editNonceField": {
+    "message": "編輯 nonce"
+  },
+  "editNonceMessage": {
+    "message": "這是一個進階功能，請小心使用。"
+  },
+  "editPermission": {
+    "message": "編輯權限"
+  },
+  "enableAutoDetect": {
+    "message": " Enable Autodetect"
+  },
+  "encryptionPublicKeyNotice": {
+    "message": "$1 想要取得您的加密公鑰。同意之後，這個網站就可以向您發送加密訊息。",
+    "description": "$1 is the web3 site name"
+  },
+  "encryptionPublicKeyRequest": {
+    "message": "請求加密公鑰"
+  },
   "endOfFlowMessage1": {
-    "message": "你通過測試了—安全存放助記詞，這是你的責任！"
+    "message": "您通過測試了—安全存放助憶詞，這是您的責任！"
   },
   "endOfFlowMessage10": {
     "message": "都完成了"
@@ -296,32 +554,84 @@
     "message": "在多處儲存備份。"
   },
   "endOfFlowMessage4": {
-    "message": "不要分享此助記祠給任何人"
+    "message": "不要分享此助憶詞給任何人。"
   },
   "endOfFlowMessage5": {
-    "message": "小心網路釣魚！MetaMask 永遠不會主動詢問你的助記詞。"
+    "message": "小心網路釣魚！MetaMask 永遠不會主動詢問你的助憶詞。"
   },
   "endOfFlowMessage6": {
-    "message": "如你需要再次備份助記詞，可至設定 -> 安全。"
+    "message": "如你需要再次備份助憶詞，可至「設定 -> 安全」。"
+  },
+  "endOfFlowMessage7": {
+    "message": "如果您有任何疑問或看到哪裡怪怪的，從$1聯絡我們尋求支援。",
+    "description": "$1 is a clickable link with text defined by the 'here' key. The link will open to a form where users can file support tickets."
   },
   "endOfFlowMessage8": {
-    "message": "MetaMask 無法還原你的助記詞。暸解更多"
+    "message": "MetaMask 無法還原你的助憶詞。"
   },
   "endOfFlowMessage9": {
     "message": "深入瞭解。"
   },
+  "endpointReturnedDifferentChainId": {
+    "message": "這個 RPC 端點回傳了一個不同的鏈 ID：$1",
+    "description": "$1 is the return value of eth_chainId from an RPC endpoint"
+  },
+  "ensIllegalCharacter": {
+    "message": "Illegal Character for ENS."
+  },
   "ensNotFoundOnCurrentNetwork": {
     "message": "現有網路中找不到 ENS 名稱。嘗試轉換到主要以太坊網路。"
   },
   "ensRegistrationError": {
     "message": "ENS 名稱註冊錯誤"
   },
+  "ensUnknownError": {
+    "message": "ENS Lookup failed."
+  },
+  "enterMaxSpendLimit": {
+    "message": "輸入最大花費限制"
+  },
   "enterPassword": {
     "message": "請輸入密碼"
   },
   "enterPasswordContinue": {
     "message": "請輸入密碼"
   },
+  "errorCode": {
+    "message": "代碼：$1",
+    "description": "Displayed error code for debugging purposes. $1 is the error code"
+  },
+  "errorDetails": {
+    "message": "錯誤詳細資訊",
+    "description": "Title for collapsible section that displays error details for debugging purposes"
+  },
+  "errorMessage": {
+    "message": "訊息：$1",
+    "description": "Displayed error message for debugging purposes. $1 is the error message"
+  },
+  "errorName": {
+    "message": "代碼：$1",
+    "description": "Displayed error name for debugging purposes. $1 is the error name"
+  },
+  "errorPageMessage": {
+    "message": "重新整理頁面然後再試一次，或從$1聯絡我們尋求支援。",
+    "description": "Message displayed on generic error page in the fullscreen or notification UI, $1 is a clickable link with text defined by the 'here' key. The link will open to a form where users can file support tickets."
+  },
+  "errorPagePopupMessage": {
+    "message": "重新開啟彈跳視窗然後再試一次，或從$1聯絡我們尋求支援。",
+    "description": "Message displayed on generic error page in the popup UI, $1 is a clickable link with text defined by the 'here' key. The link will open to a form where users can file support tickets."
+  },
+  "errorPageTitle": {
+    "message": "MetaMask 遭遇錯誤",
+    "description": "Title of generic error page"
+  },
+  "errorStack": {
+    "message": "堆疊資訊：",
+    "description": "Title for error stack, which is displayed for debugging purposes"
+  },
+  "ethGasPriceFetchWarning": {
+    "message": "顯示備用 gas 價格，因為目前主要的 gas 估計服務無法使用。"
+  },
   "ethereumPublicAddress": {
     "message": "以太坊公開位址"
   },
@@ -332,14 +642,26 @@
     "message": "展開畫面"
   },
   "exportPrivateKey": {
-    "message": "導出私鑰"
+    "message": "匯出私鑰"
+  },
+  "externalExtension": {
+    "message": "外部擴充功能"
   },
   "failed": {
-    "message": "交易失败"
+    "message": "交易失敗"
+  },
+  "failedToFetchChainId": {
+    "message": "無法取得鏈 ID。您的 RPC URL 正確嗎？"
+  },
+  "failureMessage": {
+    "message": "有東西出錯了，所以無法完成這個動作"
   },
   "fast": {
     "message": "快"
   },
+  "feeAssociatedRequest": {
+    "message": "這個請求會附帶一筆手續費。"
+  },
   "fiat": {
     "message": "法定貨幣",
     "description": "Exchange type"
@@ -348,14 +670,24 @@
     "message": "檔案匯入失敗？點擊這裡！",
     "description": "Helps user import their account from a JSON file"
   },
+  "forbiddenIpfsGateway": {
+    "message": "禁止使用的 IPFS Gateway：請指定一個 CID gateway"
+  },
   "forgetDevice": {
-    "message": "移除此裝置"
+    "message": "忘記此裝置"
   },
   "from": {
     "message": "來源帳戶"
   },
+  "fromAddress": {
+    "message": "來自：$1",
+    "description": "$1 is the address to include in the From label. It is typically shortened first using shortenAddress"
+  },
+  "functionApprove": {
+    "message": "函式：Approve"
+  },
   "functionType": {
-    "message": "功能類型"
+    "message": "函式型別"
   },
   "gasLimit": {
     "message": "Gas 上限"
@@ -366,18 +698,35 @@
   "gasLimitTooLow": {
     "message": "Gas 上限至少為 21000"
   },
+  "gasLimitTooLowWithDynamicFee": {
+    "message": "Gas 上限至少為 $1",
+    "description": "$1 is the custom gas limit, in decimal."
+  },
   "gasPrice": {
     "message": "Gas 價格 (GWEI)"
   },
+  "gasPriceExcessive": {
+    "message": "您的 gas 費用設定得太高了。考慮降低一些。"
+  },
+  "gasPriceExcessiveInput": {
+    "message": "Gas 價格極高"
+  },
   "gasPriceExtremelyLow": {
     "message": "Gas 價格極低"
   },
+  "gasPriceFetchFailed": {
+    "message": "由於網路錯誤，gas 價格估計失敗。"
+  },
   "gasPriceInfoTooltipContent": {
-    "message": "Gas 價格代表願意為交易手續費付出的單位價格，價格越高交易處理速度越快"
+    "message": "Gas 價格代表願意為交易手續費付出的單位價格，價格越高交易處理速度越快。"
   },
   "gasUsed": {
     "message": "Gas 用量"
   },
+  "gdprMessagePrivacyPolicy": {
+    "message": "Privacy Policy here",
+    "description": "this translation is intended to be exclusively used as the replacement for the $1 in the gdprMessage translation"
+  },
   "general": {
     "message": "一般"
   },
@@ -385,12 +734,15 @@
     "message": "取得以太幣"
   },
   "getEtherFromFaucet": {
-    "message": "從水管取得 $1 以太幣。",
+    "message": "從水龍頭取得 $1 上的以太幣",
     "description": "Displays network name for Ether faucet"
   },
   "getStarted": {
     "message": "開始使用"
   },
+  "goBack": {
+    "message": "Go Back"
+  },
   "goerli": {
     "message": "Goerli 測試網路"
   },
@@ -403,6 +755,13 @@
   "hardwareWalletConnected": {
     "message": "硬體錢包已連線"
   },
+  "hardwareWalletLegacyDescription": {
+    "message": "(舊版)",
+    "description": "Text representing the MEW path"
+  },
+  "hardwareWalletSupportLinkConversion": {
+    "message": "點選這裡"
+  },
   "hardwareWallets": {
     "message": "連線硬體錢包"
   },
@@ -414,7 +773,7 @@
     "description": "as in -click here- for more information (goes with troubleTokenBalances)"
   },
   "hexData": {
-    "message": "16進位資料"
+    "message": "十六進位資料"
   },
   "hide": {
     "message": "隱藏"
@@ -422,6 +781,13 @@
   "hideTokenPrompt": {
     "message": "隱藏代幣？"
   },
+  "hideTokenSymbol": {
+    "message": "隱藏 $1",
+    "description": "$1 is the symbol for a token (e.g. 'DAI')"
+  },
+  "hideZeroBalanceTokens": {
+    "message": "隱藏零餘額的代幣"
+  },
   "history": {
     "message": "紀錄"
   },
@@ -433,29 +799,42 @@
     "message": "匯入帳戶"
   },
   "importAccountMsg": {
-    "message": " 匯入的帳戶與您原有 MetaMask 帳戶的助憶詞並無關聯。請查看與匯入帳戶相關的資料 "
+    "message": " 匯入的帳戶並不會與您原有 MetaMask 帳戶助憶詞建立關聯。請用以下連結瞭解匯入帳戶相關的資料： "
   },
   "importAccountSeedPhrase": {
     "message": "利用助憶詞還原"
   },
+  "importMyWallet": {
+    "message": "Import My Wallet"
+  },
+  "importTokensCamelCase": {
+    "message": "Import Tokens"
+  },
   "importWallet": {
     "message": "匯入錢包"
   },
+  "importYourExisting": {
+    "message": "使用助憶詞匯入您既有的錢包"
+  },
   "imported": {
     "message": "已匯入私鑰",
     "description": "status showing that an account has been fully loaded into the keyring"
   },
+  "infuraBlockedNotification": {
+    "message": "MetaMask 無法連線到區塊鏈主機。在$1查看可能的原因。",
+    "description": "$1 is a clickable link with with text defined by the 'here' key"
+  },
   "initialTransactionConfirmed": {
     "message": "交易已確認"
   },
   "insufficientBalance": {
-    "message": "餘額不足"
+    "message": "餘額不足。"
   },
   "insufficientFunds": {
-    "message": "資金不足"
+    "message": "資金不足。"
   },
   "insufficientTokens": {
-    "message": "代幣不足"
+    "message": "代幣不足。"
   },
   "invalidAddress": {
     "message": "錯誤的位址"
@@ -464,17 +843,52 @@
     "message": "接收位址錯誤"
   },
   "invalidAddressRecipientNotEthNetwork": {
-    "message": "非 ETH 網路，設定至小寫"
+    "message": "非 ETH 網路，請設定至小寫"
   },
   "invalidBlockExplorerURL": {
     "message": "無效的區塊鏈瀏覽器 URL"
   },
+  "invalidChainIdTooBig": {
+    "message": "無效的鏈 ID。鏈 ID 數值過大。"
+  },
+  "invalidCustomNetworkAlertContent1": {
+    "message": "必須重新輸入自訂網路 '$1' 的鏈 ID。",
+    "description": "$1 is the name/identifier of the network."
+  },
+  "invalidCustomNetworkAlertContent2": {
+    "message": "為了避免您被惡意或錯誤設定的網路提供者侵害，自訂網路現在一律需要提供鏈 ID。"
+  },
+  "invalidCustomNetworkAlertContent3": {
+    "message": "前往「設定 > 網路」然後輸入鏈 ID。您可以在 $1 找到大部分熱門網路的鏈 ID。",
+    "description": "$1 is a link to https://chainid.network"
+  },
+  "invalidCustomNetworkAlertTitle": {
+    "message": "無效的自訂網路"
+  },
+  "invalidHexNumber": {
+    "message": "無效的十六進位數值。"
+  },
+  "invalidHexNumberLeadingZeros": {
+    "message": "無效的十六進位數值。請去掉開頭的零。"
+  },
+  "invalidIpfsGateway": {
+    "message": "無效的 IPFS Gateway：值必須要是一個合法的 URL"
+  },
+  "invalidNumber": {
+    "message": "無效的數值。輸入一個小數或 0x開頭的十六進位數值。"
+  },
+  "invalidNumberLeadingZeros": {
+    "message": "無效的數值。請去掉開頭的零。"
+  },
   "invalidRPC": {
-    "message": "無效的 RPC URI"
+    "message": "無效的 RPC URL"
   },
   "invalidSeedPhrase": {
     "message": "無效的助憶詞"
   },
+  "ipfsGatewayDescription": {
+    "message": "輸入用於解析 ENS 內容的 IPFS CID gateway URL。"
+  },
   "jsonFile": {
     "message": "JSON 格式檔案",
     "description": "format for importing an account"
@@ -482,11 +896,23 @@
   "knownAddressRecipient": {
     "message": "已知合約位址"
   },
+  "knownTokenWarning": {
+    "message": "This action will edit tokens that are already listed in your wallet, which can be used to phish you. Only approve if you are certain that you mean to change what these tokens represent."
+  },
+  "lastConnected": {
+    "message": "最近連結"
+  },
   "learnMore": {
     "message": "了解更多"
   },
   "ledgerAccountRestriction": {
-    "message": "您必須使用最後的帳戶才能產生新帳戶"
+    "message": "您必須使用最後一個的帳戶才能產生新帳戶"
+  },
+  "ledgerLocked": {
+    "message": "無法連上 Ledger 裝置。請確定您的裝置已解鎖，而且已開啟 Ethereum 應用程式。"
+  },
+  "ledgerTimeout": {
+    "message": "Ledger Live 花了太多時間回應，或連線逾時。請確定您的 Ledger Live 應用程式已開啟而且裝置已解鎖。"
   },
   "letsGoSetUp": {
     "message": "好，我們開始吧！"
@@ -509,9 +935,15 @@
   "lock": {
     "message": "鎖定"
   },
+  "lockTimeTooGreat": {
+    "message": "鎖定時間過長"
+  },
   "mainnet": {
     "message": "以太坊 主網路"
   },
+  "makeAnotherSwap": {
+    "message": "建立新的 swap"
+  },
   "max": {
     "message": "最大值"
   },
@@ -524,28 +956,76 @@
   "message": {
     "message": "訊息"
   },
+  "metaMaskConnectStatusParagraphOne": {
+    "message": "您現在能夠在 MetaMask 裡更仔細地控制您帳戶的連結。"
+  },
+  "metaMaskConnectStatusParagraphThree": {
+    "message": "按這裡管理您已連結的帳戶。"
+  },
+  "metaMaskConnectStatusParagraphTwo": {
+    "message": "連線狀態按鈕會顯示您正在造訪的網站是否已經連結到您目前選擇的帳戶。"
+  },
   "metamaskDescription": {
     "message": "MetaMask 是以太坊安全身份識別金庫"
   },
+  "metamaskSwapsOfflineDescription": {
+    "message": "MetaMask Swaps 正在維護。請晚點再來看看。"
+  },
   "metamaskVersion": {
     "message": "MetaMask 版本"
   },
+  "mismatchedChainLinkText": {
+    "message": "驗證網路的詳細資料",
+    "description": "Serves as link text for the 'mismatchedChain' key. This text will be embedded inside the translation for that key."
+  },
   "mustSelectOne": {
-    "message": "必須選擇至少 1 代幣"
+    "message": "必須選擇至少 1 代幣。"
   },
   "myAccounts": {
     "message": "我的帳戶"
   },
+  "name": {
+    "message": "名稱"
+  },
+  "needCryptoInWallet": {
+    "message": "要使用 MetaMask 存取去中心化應用程式時，您的錢包中需要有 $1。",
+    "description": "$1 represents the cypto symbol to be purchased"
+  },
+  "needHelp": {
+    "message": "需要幫助？聯繫$1",
+    "description": "$1 represents `needHelpLinkText`, the text which goes in the help link"
+  },
+  "needHelpLinkText": {
+    "message": "MetaMask 支援"
+  },
   "needImportFile": {
-    "message": "您必須選擇一個檔案來匯入",
+    "message": "您必須選擇一個檔案來匯入。",
     "description": "User is important an account and needs to add a file to continue"
   },
   "negativeETH": {
-    "message": "不能送出負值的以太幣"
+    "message": "不能送出負值的以太幣。"
+  },
+  "networkDetails": {
+    "message": "網路詳細資料"
   },
   "networkName": {
     "message": "網路名稱"
   },
+  "networkNameDefinition": {
+    "message": "對應這個網路的名稱。"
+  },
+  "networkNameTestnet": {
+    "message": "測試網路"
+  },
+  "networkSettingsChainIdDescription": {
+    "message": "鏈 ID 用來簽署交易。它必須和該網路回傳的鏈 ID 一致。您可以輸入一個十進位數值或 0x 開頭的十六進位數值，但我們會顯示成十進位。"
+  },
+  "networkURL": {
+    "message": "網路 URL"
+  },
+  "networkURLDefinition": {
+    "message": "用來存取這個網路的 URL。"
+  },
   "networks": {
     "message": "網路"
   },
@@ -577,15 +1057,28 @@
   "next": {
     "message": "下一頁"
   },
+  "nextNonceWarning": {
+    "message": "Nonce 比建議的 $1 高",
+    "description": "The next nonce according to MetaMask's internal logic"
+  },
+  "nftTokenIdPlaceholder": {
+    "message": "Enter the collectible ID"
+  },
+  "noAccountsFound": {
+    "message": "指定的搜尋條件找不到帳戶"
+  },
   "noAddressForName": {
     "message": "此 ENS 尚未指定位址。"
   },
   "noAlreadyHaveSeed": {
-    "message": "不，我已經有助記詞"
+    "message": "不，我已經有助憶詞"
   },
   "noConversionRateAvailable": {
     "message": "尚未有匯率比較值"
   },
+  "noThanks": {
+    "message": "不了"
+  },
   "noTransactions": {
     "message": "尚未有交易"
   },
@@ -595,15 +1088,49 @@
   "noWebcamFoundTitle": {
     "message": "找不到攝影鏡頭"
   },
+  "nonceField": {
+    "message": "自訂交易 nonce"
+  },
+  "nonceFieldDescription": {
+    "message": "打開此選項來在交易確認視窗中更改 nonce (交易編號)。這是一個進階功能，請小心使用。"
+  },
+  "nonceFieldHeading": {
+    "message": "自訂 nonce"
+  },
+  "notCurrentAccount": {
+    "message": "這是正確的帳戶嗎？它與您的錢包目前所選擇的帳戶不同"
+  },
   "notEnoughGas": {
     "message": "Gas 不夠"
   },
+  "ofTextNofM": {
+    "message": "之"
+  },
   "off": {
-    "message": "關"
+    "message": "關閉"
+  },
+  "offlineForMaintenance": {
+    "message": "離線維護中"
+  },
+  "ok": {
+    "message": "確認"
   },
   "on": {
     "message": "開啟"
   },
+  "onboardingPinExtensionBillboardAccess": {
+    "message": "Full Access"
+  },
+  "onboardingReturnNotice": {
+    "message": "\"$1\" 將會關閉這個分頁並且導回到 $2",
+    "description": "Return the user to the site that initiated onboarding"
+  },
+  "onlyAddTrustedNetworks": {
+    "message": "惡意的網路提供者可以欺騙您區塊鏈上的狀態或記錄您的網路活動。請只新增您信任的自訂網路。"
+  },
+  "onlyConnectTrust": {
+    "message": "記住，只連線到您信任的網站。"
+  },
   "origin": {
     "message": "來源"
   },
@@ -626,20 +1153,30 @@
     "message": "您所輸入的密碼不一致"
   },
   "pastePrivateKey": {
-    "message": "請貼上您的私鑰字串:",
+    "message": "請貼上您的私鑰字串：",
     "description": "For importing an account from a private key"
   },
   "pending": {
     "message": "等待處理"
   },
+  "permissions": {
+    "message": "權限"
+  },
   "personalAddressDetected": {
-    "message": "偵測為個人位址，請輸入代幣合約位址"
+    "message": "偵測到這是個人位址，請輸入代幣合約位址"
+  },
+  "plusXMore": {
+    "message": "+ $1 更多",
+    "description": "$1 is a number of additional but unshown items in a list- this message will be shown in place of those items"
+  },
+  "prev": {
+    "message": "前一頁"
   },
   "primaryCurrencySetting": {
-    "message": "主要顯示"
+    "message": "主要貨幣"
   },
   "primaryCurrencySettingDescription": {
-    "message": "選擇使用以太幣(ETH)或是法定貨幣(例如：美金)為主要錢幣顯示單位"
+    "message": "選擇原生來優先使用鏈上原生貨幣 (例如 ETH) 顯示金額。選擇法定貨幣來優先使用您選擇的法定貨幣顯示金額。"
   },
   "privacyMsg": {
     "message": "隱私政策"
@@ -649,22 +1186,37 @@
     "description": "select this type of file to use to import an account"
   },
   "privateKeyWarning": {
-    "message": "注意：永遠不要公開這個私鑰。任何取得這把私鑰的人都可以竊取這個帳戶中的所有資產。"
+    "message": "警告：永遠不要公開這個私鑰。任何取得這把私鑰的人都可以竊取這個帳戶中的所有資產。"
   },
   "privateNetwork": {
     "message": "私有網路"
   },
+  "proposedApprovalLimit": {
+    "message": "提議的允許量限制"
+  },
+  "provide": {
+    "message": "提供"
+  },
+  "publicAddress": {
+    "message": "公開位址"
+  },
   "queue": {
     "message": "佇列"
   },
+  "queued": {
+    "message": "已排入佇列"
+  },
   "readdToken": {
-    "message": "未來可以隨時重新加入此代幣"
+    "message": "您未來可以在帳戶選項中的「新增代幣」重新加入此代幣。"
+  },
+  "receive": {
+    "message": "接收"
   },
   "recents": {
     "message": "最近"
   },
   "recipientAddressPlaceholder": {
-    "message": "搜尋，公開地址 (0x)，或 ENS"
+    "message": "搜尋、公開位址 (0x)、或 ENS"
   },
   "reject": {
     "message": "拒絕"
@@ -673,7 +1225,7 @@
     "message": "全部拒絕"
   },
   "rejectTxsDescription": {
-    "message": "您將批次拒絕 $1 筆交易."
+    "message": "您將批次拒絕 $1 筆交易。"
   },
   "rejectTxsN": {
     "message": "拒絕 $1 筆交易"
@@ -691,7 +1243,7 @@
     "message": "移除帳戶"
   },
   "removeAccountDescription": {
-    "message": "此帳戶將由錢包中移除。在繼續進行之前請確認您已經匯出並妥善備份助憶詞或私鑰。"
+    "message": "此帳戶將由錢包中移除。在繼續進行之前請確認您已經匯出並妥善備份助憶詞或私鑰。您可以從帳戶下拉選單中匯入或再次建立帳戶。"
   },
   "requestsAwaitingAcknowledgement": {
     "message": "請求正在等待確認"
@@ -706,7 +1258,16 @@
     "message": "重置帳戶"
   },
   "resetAccountDescription": {
-    "message": "重置帳戶將清除您的交易紀錄"
+    "message": "重置帳戶將清除您的交易紀錄。這將不會改變您的帳戶餘額或要求您重新輸入助憶詞。"
+  },
+  "restore": {
+    "message": "還原"
+  },
+  "retryTransaction": {
+    "message": "重試交易"
+  },
+  "reusedTokenNameWarning": {
+    "message": "這裡的其中一個代幣重複使用了您關注的另一個代幣的符號，這可能會造成混淆甚至讓您被誤導。"
   },
   "revealSeedWords": {
     "message": "顯示助憶詞"
@@ -718,7 +1279,7 @@
     "message": "絕對不要在公共場合輸入助憶詞！這可被用來竊取您的帳戶。"
   },
   "revealSeedWordsWarningTitle": {
-    "message": "請勿將助憶詞洩漏予他人"
+    "message": "請勿將助憶詞洩漏予他人！"
   },
   "rpcUrl": {
     "message": "新的 RPC URL"
@@ -727,7 +1288,7 @@
     "message": "儲存"
   },
   "saveAsCsvFile": {
-    "message": "儲存為CSV格式檔案"
+    "message": "儲存為 CSV 格式檔案"
   },
   "scanInstructions": {
     "message": "請將 QR code 放在攝影鏡頭前面"
@@ -735,9 +1296,15 @@
   "scanQrCode": {
     "message": "掃描 QR Code"
   },
+  "scrollDown": {
+    "message": "向下捲動"
+  },
   "search": {
     "message": "搜尋"
   },
+  "searchAccounts": {
+    "message": "搜尋帳戶"
+  },
   "searchResults": {
     "message": "搜尋結果"
   },
@@ -748,29 +1315,90 @@
     "message": "助憶詞將可協助您用更簡單的方式備份帳戶資訊。"
   },
   "secretBackupPhraseWarning": {
-    "message": "警告: 絕對不要洩漏您的助憶詞。任何人只要得知助憶詞代表他可以竊取您所有的以太幣和代幣。"
+    "message": "警告：絕對不要洩漏您的助憶詞。任何人只要得知助憶詞就能竊取您所有的以太幣和代幣。"
+  },
+  "secretPhrase": {
+    "message": "在輸入您的助憶詞來還原您的金庫。"
+  },
+  "secureWallet": {
+    "message": "Secure Wallet"
   },
   "securityAndPrivacy": {
     "message": "安全＆隱私"
   },
+  "seedPhraseIntroSidebarBulletFour": {
+    "message": "寫下來並且存放在不同的秘密地點。"
+  },
+  "seedPhraseIntroSidebarBulletOne": {
+    "message": "儲存在密碼管理器裡"
+  },
+  "seedPhraseIntroSidebarBulletThree": {
+    "message": "存在安全保管箱裡。"
+  },
+  "seedPhraseIntroSidebarBulletTwo": {
+    "message": "存在銀行保險箱。"
+  },
+  "seedPhraseIntroSidebarCopyOne": {
+    "message": "您的助憶詞就是您的錢包與資金的「總鑰匙」。"
+  },
+  "seedPhraseIntroSidebarCopyThree": {
+    "message": "如果有人向您詢問您的助憶詞，他們十之八九是在詐騙您。"
+  },
+  "seedPhraseIntroSidebarCopyTwo": {
+    "message": "永遠永遠不要洩漏您的助憶詞，即使是 MetaMask 官方也一樣！"
+  },
+  "seedPhraseIntroSidebarTitleOne": {
+    "message": "什麼是助憶詞？"
+  },
+  "seedPhraseIntroSidebarTitleThree": {
+    "message": "我應該分享我的助憶詞嗎？"
+  },
+  "seedPhraseIntroSidebarTitleTwo": {
+    "message": "我該如何存放我的助憶詞？"
+  },
+  "seedPhraseIntroTitle": {
+    "message": "保護您的錢包"
+  },
+  "seedPhraseIntroTitleCopy": {
+    "message": "在開始之前，觀賞這段短片來了解何謂助憶詞，以及如何保持您錢包的安全。"
+  },
   "seedPhraseReq": {
-    "message": "助憶詞為 12 個詞語"
+    "message": "助憶詞為 12, 15, 18, 21 或 24 個單字"
+  },
+  "selectAccounts": {
+    "message": "選擇一個或多個帳戶"
+  },
+  "selectAll": {
+    "message": "選擇全部"
   },
   "selectAnAccount": {
     "message": "選擇帳戶"
   },
+  "selectAnAccountAlreadyConnected": {
+    "message": "這個帳戶已經連結到 MetaMask 了"
+  },
   "selectEachPhrase": {
     "message": "請依照正確順序點選助憶詞"
   },
+  "selectHdPath": {
+    "message": "選擇 HD Path"
+  },
   "selectPathHelp": {
     "message": "若看不到您已經擁有的 Ledger 帳戶，請嘗試切換路徑為 \"Legacy (MEW / MyCrypto)\""
   },
   "selectType": {
     "message": "選擇類型"
   },
+  "selectingAllWillAllow": {
+    "message": "選擇全部會讓這個網站能瀏覽您目前的全部帳戶。請再次確認您信任這個網站。"
+  },
   "send": {
     "message": "發送"
   },
+  "sendSpecifiedTokens": {
+    "message": "發送 $1",
+    "description": "Symbol of the specified token"
+  },
   "sendTokens": {
     "message": "發送代幣"
   },
@@ -778,10 +1406,10 @@
     "message": "設定"
   },
   "showAdvancedGasInline": {
-    "message": "顯示進階 Gas 控制選項"
+    "message": "顯示進階 gas 控制選項"
   },
   "showAdvancedGasInlineDescription": {
-    "message": "在交易時顯示可微調 Gas 價格以及 Gas 上限的功能"
+    "message": "選擇此項會在傳送或確認畫面顯示可微調 gas 價格以及 gas 上限的功能"
   },
   "showFiatConversionInTestnets": {
     "message": "在測試網上顯示匯率"
@@ -790,10 +1418,19 @@
     "message": "選擇此來在測試網上顯示法定貨幣匯率"
   },
   "showHexData": {
-    "message": "顯示16進位資料"
+    "message": "顯示十六進位資料"
   },
   "showHexDataDescription": {
-    "message": "在交易時顯示16進位資料"
+    "message": "在交易時顯示十六進位資料"
+  },
+  "showIncomingTransactions": {
+    "message": "顯示傳入的交易"
+  },
+  "showIncomingTransactionsDescription": {
+    "message": "選擇此項來利用 Etherscan 在交易列表裡顯示傳入的交易"
+  },
+  "showPermissions": {
+    "message": "顯示權限"
   },
   "showPrivateKeys": {
     "message": "顯示私鑰"
@@ -805,14 +1442,20 @@
     "message": "簽署"
   },
   "signNotice": {
-    "message": "簽署此訊息可能會產生危險地副作用。 \n只從您完全信任的網站上簽署。這種危險的方法，將在未來的版本中被移除。"
+    "message": "簽署此訊息可能會產生危險的副作用。\n請只從您完全信任的網站上簽署。\n這種危險的方法將在未來的版本中被移除。"
   },
   "signatureRequest": {
     "message": "請求簽署"
   },
+  "signatureRequest1": {
+    "message": "訊息"
+  },
   "signed": {
     "message": "已簽署"
   },
+  "skipAccountSecurity": {
+    "message": "Skip Account Security?"
+  },
   "somethingWentWrong": {
     "message": "糟糕！出了點問題。"
   },
@@ -820,13 +1463,35 @@
     "message": "加速"
   },
   "speedUpCancellation": {
-    "message": "加速取消"
+    "message": "加速這個取消請求"
   },
   "speedUpTransaction": {
     "message": "加速這筆交易"
   },
+  "spendLimitAmount": {
+    "message": "花費額度上限"
+  },
+  "spendLimitInsufficient": {
+    "message": "花費額度上限不足"
+  },
+  "spendLimitInvalid": {
+    "message": "花費額度上限無效；必須是正值"
+  },
+  "spendLimitPermission": {
+    "message": "花費額度上限的權限"
+  },
+  "spendLimitRequestedBy": {
+    "message": "$1 請求的花費額度上限",
+    "description": "Origin of the site requesting the spend limit"
+  },
+  "spendLimitTooLarge": {
+    "message": "花費額度上限太大"
+  },
   "stateLogError": {
-    "message": "在取得狀態紀錄時發生錯誤."
+    "message": "在取得狀態紀錄時發生錯誤。"
+  },
+  "stateLogFileName": {
+    "message": "MetaMask 狀態紀錄"
   },
   "stateLogs": {
     "message": "狀態紀錄"
@@ -834,53 +1499,103 @@
   "stateLogsDescription": {
     "message": "狀態紀錄包含您的公開帳戶位址和已傳送的交易資訊"
   },
+  "statusConnected": {
+    "message": "已連結"
+  },
+  "statusNotConnected": {
+    "message": "未連結"
+  },
+  "step1LedgerWallet": {
+    "message": "下載 Ledger 應用程式"
+  },
+  "step1LedgerWalletMsg": {
+    "message": "下載、安裝、然後輸入密碼來解鎖 $1。",
+    "description": "$1 represents the `ledgerLiveApp` localization value"
+  },
+  "step1TrezorWallet": {
+    "message": "插入 Trezor 錢包"
+  },
+  "step1TrezorWalletMsg": {
+    "message": "直接將錢包連接到電腦上。關於更多使用您的硬體錢包的詳細資訊，$1",
+    "description": "$1 represents the `hardwareWalletSupportLinkConversion` localization key"
+  },
+  "step2LedgerWallet": {
+    "message": "插入 Ledger 錢包"
+  },
   "storePhrase": {
     "message": "您可以用密碼管理系統例如 1Password 等軟體儲存助憶詞。"
   },
+  "submit": {
+    "message": "傳送"
+  },
   "submitted": {
-    "message": "已送出"
+    "message": "已傳送"
+  },
+  "support": {
+    "message": "支援"
   },
   "supportCenter": {
     "message": "造訪我們的協助中心"
   },
+  "swapSearchNameOrAddress": {
+    "message": "用名稱搜尋或貼上地址"
+  },
+  "switchEthereumChainConfirmationDescription": {
+    "message": "這將在 MetaMask 中將目前選擇的網路切換到剛才新增的網路："
+  },
+  "switchEthereumChainConfirmationTitle": {
+    "message": "允許這個網站切換網路？"
+  },
+  "switchNetwork": {
+    "message": "切換網路"
+  },
   "switchNetworks": {
     "message": "切換網路"
   },
+  "switchToThisAccount": {
+    "message": "切換到這個帳戶"
+  },
+  "switchingNetworksCancelsPendingConfirmations": {
+    "message": "切換網路將會取消所有等待確認的請求"
+  },
   "symbol": {
     "message": "符號"
   },
   "symbolBetweenZeroTwelve": {
-    "message": "符號不得超過11個字符。"
+    "message": "符號不得超過 11 個字元。"
   },
   "syncWithMobile": {
-    "message": "和移動裝置同步"
+    "message": "和行動裝置同步"
   },
   "syncWithMobileBeCareful": {
     "message": "掃描代碼時確保沒有其他人在看你的螢幕"
   },
   "syncWithMobileComplete": {
-    "message": "你的資料已成功同步。開始活用 MetaMask 移動 app！"
+    "message": "你的資料已成功同步。開始活用 MetaMask 行動應用程式！"
   },
   "syncWithMobileDesc": {
-    "message": "你可以用移動裝置同步帳號與資訊。開啟 MetaMask 移動 app，至「設定」並點擊「自瀏覽器擴充功能同步」"
+    "message": "你可以用行動裝置同步帳戶與資訊。開啟 MetaMask 行動應用程式，至「設定」並點擊「自瀏覽器擴充功能同步」"
   },
   "syncWithMobileDescNewUsers": {
-    "message": "如你是第一次開啟 MetaMask 移動 app，只要跟著手機上的指示操作即可。"
+    "message": "如果您是第一次開啟 MetaMask 行動應用程式，只要跟著手機上的指示操作即可。"
   },
   "syncWithMobileScanThisCode": {
-    "message": "用你的 MetaMask 移動 app 掃描此代碼"
+    "message": "用您的 MetaMask 行動應用程式 掃描此條碼"
   },
   "syncWithMobileTitle": {
-    "message": "和移動裝置同步"
+    "message": "和行動裝置同步"
   },
   "terms": {
     "message": "使用條款"
   },
+  "termsOfService": {
+    "message": "服務條款"
+  },
   "testFaucet": {
-    "message": "測試水管"
+    "message": "測試水龍頭"
   },
   "thisWillCreate": {
-    "message": "這將創建新的錢包與助記詞"
+    "message": "這將創建新的錢包與助憶詞"
   },
   "tips": {
     "message": "提示"
@@ -888,6 +1603,10 @@
   "to": {
     "message": "目的帳戶"
   },
+  "toAddress": {
+    "message": "傳送到：$1",
+    "description": "$1 is the address to include in the To label. It is typically shortened first using shortenAddress"
+  },
   "token": {
     "message": "代碼"
   },
@@ -895,11 +1614,17 @@
     "message": "已加入過此代幣。"
   },
   "tokenContractAddress": {
-    "message": "代幣合同位址"
+    "message": "代幣合約位址"
+  },
+  "tokenDecimalFetchFailed": {
+    "message": "需要填入代幣的小數位數。"
   },
   "tokenSymbol": {
     "message": "代幣代號"
   },
+  "tooltipApproveButton": {
+    "message": "我了解了"
+  },
   "total": {
     "message": "總量"
   },
@@ -907,54 +1632,61 @@
     "message": "交易"
   },
   "transactionCancelAttempted": {
-    "message": "交易取消請求 手續費 $1 時間 $2"
+    "message": "交易取消請求，手續費 $1 @ $2"
   },
   "transactionCancelSuccess": {
-    "message": "交易取消成功 $2"
+    "message": "交易成功取消 @ $2"
   },
   "transactionConfirmed": {
-    "message": "交易確認 時間 $2."
+    "message": "交易確認 @ $2。"
   },
   "transactionCreated": {
-    "message": "交易產生 數量 $1 時間 $2"
+    "message": "交易建立，數量 $1 @ $2。"
   },
   "transactionDropped": {
-    "message": "交易廢除 時間 $2"
+    "message": "交易被捨棄 @ $2。"
   },
   "transactionError": {
-    "message": "交易失敗。合約代碼拋出錯誤資訊"
+    "message": "交易失敗。合約程式碼拋出錯誤。"
   },
   "transactionErrorNoContract": {
-    "message": "合約位址錯誤"
+    "message": "嘗試在非合約位址呼叫合約函式。"
   },
   "transactionErrored": {
-    "message": "交易錯誤"
+    "message": "交易遇到錯誤。"
   },
   "transactionFee": {
-    "message": "交易費"
+    "message": "交易手續費"
   },
   "transactionResubmitted": {
-    "message": "交易重新送出 手續費提高至 $1 時間 $2"
+    "message": "交易重新送出，手續費提高至 $1 @ $2"
   },
   "transactionSubmitted": {
-    "message": "交易送出 手續費 $1 時間 $2"
+    "message": "交易送出，手續費 $1 @ $2。"
   },
   "transactionUpdated": {
-    "message": "交易狀態更新 時間 $2"
+    "message": "交易狀態更新於 $2。"
   },
   "transfer": {
     "message": "交易"
   },
   "transferBetweenAccounts": {
-    "message": "在我的帳號間轉帳"
+    "message": "在我的帳戶間轉帳"
   },
   "transferFrom": {
     "message": "交易來源"
   },
+  "troubleConnectingToWallet": {
+    "message": "我們在連線到您的 $1 的時候遇到問題，試著檢查 $2 然後再試一次。",
+    "description": "$1 is the wallet device name; $2 is a link to wallet connection guide"
+  },
   "troubleTokenBalances": {
-    "message": "無法取得代幣餘額。您k可以到這裡查看 ",
+    "message": "無法取得代幣餘額。您可以到這裡查看 ",
     "description": "Followed by a link (here) to view token balances"
   },
+  "trustSiteApprovePermission": {
+    "message": "您信任這個網站嗎？當您授予這個權限，$1 就能提領您的 $2 並且代替您自動發送交易。"
+  },
   "tryAgain": {
     "message": "再試一次"
   },
@@ -982,17 +1714,33 @@
   "unknownQrCode": {
     "message": "錯誤：無法辨識 QR code"
   },
+  "unlimited": {
+    "message": "無限"
+  },
   "unlock": {
     "message": "解鎖"
   },
   "unlockMessage": {
     "message": "去中心化網路世界等待著您"
   },
+  "unrecognizedChain": {
+    "message": "無法辨識這個自訂網路。我們建議您先$1再繼續。",
+    "description": "$1 is a clickable link with text defined by the 'unrecognizedChanLinkText' key. The link will open to instructions for users to validate custom network details."
+  },
   "updatedWithDate": {
     "message": "更新時間 $1"
   },
   "urlErrorMsg": {
-    "message": "URIs 需要加入適當的 HTTP/HTTPS 前綴字"
+    "message": "URL 需要以適當的 HTTP/HTTPS 作為開頭"
+  },
+  "urlExistsErrorMsg": {
+    "message": "URL 已經在既有的網路列表裡了"
+  },
+  "usePhishingDetection": {
+    "message": "使用網路釣魚偵測"
+  },
+  "usePhishingDetectionDescription": {
+    "message": "遇到針對以太坊使用者的釣魚網域名稱的時候顯示警告"
   },
   "usedByClients": {
     "message": "可用於各種不同的客戶端"
@@ -1000,24 +1748,68 @@
   "userName": {
     "message": "使用者名稱"
   },
+  "verifyThisTokenDecimalOn": {
+    "message": "代幣的小數位數可以在 $1 找到",
+    "description": "Points the user to etherscan as a place they can verify information about a token. $1 is replaced with the translation for \"etherscan\""
+  },
+  "verifyThisTokenOn": {
+    "message": "在 $1 驗證這個代幣的資訊",
+    "description": "Points the user to etherscan as a place they can verify information about a token. $1 is replaced with the translation for \"etherscan\""
+  },
   "viewAccount": {
     "message": "查看帳戶"
   },
+  "viewAllDetails": {
+    "message": "查看所有詳情"
+  },
   "viewContact": {
     "message": "觀看聯絡資訊"
   },
+  "viewMore": {
+    "message": "檢視更多"
+  },
+  "viewOnCustomBlockExplorer": {
+    "message": "在 $1 瀏覽",
+    "description": "$1 is the action type. e.g (Account, Transaction, Swap) and $2 is the Custom Block Exporer URL"
+  },
+  "viewOnEtherscan": {
+    "message": "在 Etherscan 上瀏覽",
+    "description": "$1 is the action type. e.g (Account, Transaction, Swap)"
+  },
+  "viewinExplorer": {
+    "message": "在 Explorer 上瀏覽",
+    "description": "$1 is the action type. e.g (Account, Transaction, Swap)"
+  },
   "visitWebSite": {
     "message": "造訪我們的網站"
   },
+  "walletConnectionGuide": {
+    "message": "我們的硬體錢包連線指南"
+  },
+  "web3ShimUsageNotification": {
+    "message": "我們注意到目前的網站試著要使用已經移除的 window.web3 API。如果網站看起來壞了，請$1了解更多資訊。",
+    "description": "$1 is a clickable link."
+  },
   "welcome": {
     "message": "歡迎來到 MetaMask"
   },
   "welcomeBack": {
     "message": "歡迎回來!"
   },
+  "whatsThis": {
+    "message": "這是什麼？"
+  },
   "writePhrase": {
     "message": "將助憶詞寫在紙上，並保存在安全的場所。若想要更安全，將助憶詞分別寫在不同紙張上並存放在不同的地方。"
   },
+  "xOfY": {
+    "message": "$1 之 $2",
+    "description": "$1 and $2 are intended to be two numbers, where $2 is a total, and $1 is a count towards that total"
+  },
+  "xOfYPending": {
+    "message": "$1 之 $2 等待中",
+    "description": "$1 and $2 are intended to be two numbers, where $2 is a total number of pending confirmations, and $1 is a count towards that total"
+  },
   "yesLetsTry": {
     "message": "了解，試試看"
   },
diff --git a/app/build-types/beta/images/beta-mascot.json b/app/build-types/beta/images/beta-mascot.json
deleted file mode 100644
index 4db57f543..000000000
--- a/app/build-types/beta/images/beta-mascot.json
+++ /dev/null
@@ -1,830 +0,0 @@
-{
-  "chunks": [
-    {
-      "faces": [
-        [0, 1, 2],
-        [2, 3, 0],
-        [4, 5, 2],
-        [6, 3, 2],
-        [2, 5, 6],
-        [7, 8, 9],
-        [10, 3, 6],
-        [10, 50, 7],
-        [7, 3, 10],
-        [7, 9, 3],
-        [49, 0, 9],
-        [3, 9, 0],
-        [2, 1, 4]
-      ],
-      "name": "left ear",
-      "gradient": "left-ear-gradient"
-    },
-    {
-      "faces": [
-        [53, 54, 55],
-        [55, 56, 53],
-        [57, 56, 55],
-        [58, 59, 55],
-        [55, 54, 58],
-        [60, 61, 62],
-        [63, 58, 54],
-        [63, 60, 89],
-        [60, 63, 54],
-        [60, 54, 61],
-        [88, 61, 53],
-        [54, 53, 61],
-        [55, 59, 57]
-      ],
-      "name": "right ear",
-      "gradient": "right-ear-gradient"
-    },
-    {
-      "color": [22, 22, 22],
-      "faces": [[11, 12, 13]],
-      "name": "left eye"
-    },
-    {
-      "color": [22, 22, 22],
-      "faces": [[64, 65, 66]],
-      "name": "right eye"
-    },
-    {
-      "faces": [
-        [14, 15, 11],
-        [11, 16, 14]
-      ],
-      "name": "left inner eye",
-      "gradient": "left-inner-eye-gradient"
-    },
-    {
-      "faces": [[17, 12, 18]],
-      "name": "left outer eye",
-      "gradient": "left-outer-eye-gradient"
-    },
-    {
-      "faces": [[41, 64, 37]],
-      "name": "right lower inner eye",
-      "gradient": "right-inner-eye-gradient"
-    },
-    {
-      "faces": [[67, 68, 66]],
-      "name": "right outer eye",
-      "gradient": "right-outer-eye-gradient"
-    },
-    {
-      "color": [192, 173, 158],
-      "faces": [
-        [19, 20, 21],
-        [21, 22, 19],
-        [20, 19, 23],
-        [23, 24, 20],
-        [23, 25, 24],
-        [19, 22, 26],
-        [26, 27, 19],
-        [23, 28, 29],
-        [23, 29, 30],
-        [25, 23, 30],
-        [29, 51, 52],
-        [52, 30, 29],
-        [27, 26, 69],
-        [69, 70, 27],
-        [70, 71, 72],
-        [72, 27, 70],
-        [72, 71, 73],
-        [51, 74, 72],
-        [52, 51, 72],
-        [73, 52, 72],
-        [19, 27, 74],
-        [74, 28, 19],
-        [51, 29, 28],
-        [28, 74, 51],
-        [74, 27, 72],
-        [28, 23, 19]
-      ],
-      "name": "lower chin"
-    },
-    {
-      "color": [215, 193, 179],
-      "faces": [
-        [21, 20, 24],
-        [24, 31, 21]
-      ],
-      "name": "left lower snout"
-    },
-    {
-      "color": [215, 193, 179],
-      "faces": [
-        [69, 71, 70],
-        [71, 69, 75]
-      ],
-      "name": "right lower snout"
-    },
-    {
-      "faces": [[31, 24, 18]],
-      "name": "left upper snout",
-      "gradient": "left-upper-snout-gradient"
-    },
-    {
-      "faces": [
-        [6, 5, 16],
-        [16, 17, 6]
-      ],
-      "name": "left forehead",
-      "gradient": "left-forehead-gradient"
-    },
-    {
-      "faces": [
-        [24, 32, 33],
-        [33, 34, 24]
-      ],
-      "name": "left lower cheek",
-      "gradient": "left-lower-cheek-gradient"
-    },
-    {
-      "faces": [[5, 4, 35]],
-      "name": "left top ear",
-      "gradient": "left-top-ear-gradient"
-    },
-    {
-      "faces": [[75, 68, 71]],
-      "name": "right upper snout",
-      "gradient": "right-upper-snout-gradient"
-    },
-    {
-      "faces": [
-        [58, 67, 40],
-        [40, 59, 58]
-      ],
-      "name": "right forhead",
-      "gradient": "right-forehead-gradient"
-    },
-    {
-      "faces": [
-        [71, 76, 77],
-        [77, 78, 71]
-      ],
-      "name": "right lower cheek",
-      "gradient": "right-lower-cheek-gradient"
-    },
-    {
-      "faces": [[24, 34, 18]],
-      "name": "left middle cheek",
-      "gradient": "left-middle-cheek-gradient"
-    },
-    {
-      "color": [35, 151, 119],
-      "faces": [
-        [16, 13, 12],
-        [12, 17, 16],
-        [13, 16, 11]
-      ],
-      "name": "left above eye"
-    },
-    {
-      "faces": [[71, 68, 76]],
-      "name": "right middle cheek",
-      "gradient": "right-middle-cheek-gradient"
-    },
-    {
-      "color": [35, 151, 119],
-      "faces": [
-        [40, 67, 66],
-        [66, 65, 40],
-        [65, 64, 40]
-      ],
-      "name": "right above eye"
-    },
-    {
-      "color": [22, 22, 22],
-      "faces": [
-        [36, 15, 37],
-        [37, 38, 36],
-        [31, 39, 22],
-        [22, 21, 31],
-        [31, 15, 36],
-        [36, 39, 31],
-        [75, 69, 26],
-        [26, 80, 75],
-        [75, 80, 38],
-        [38, 37, 75],
-        [38, 80, 39],
-        [39, 36, 38],
-        [39, 80, 26],
-        [26, 22, 39]
-      ],
-      "name": "nose"
-    },
-    {
-      "faces": [
-        [17, 33, 10],
-        [17, 18, 34],
-        [34, 33, 17],
-        [10, 6, 17]
-      ],
-      "name": "left upper cheek",
-      "gradient": "left-upper-cheek-gradient"
-    },
-    {
-      "faces": [
-        [11, 15, 31],
-        [31, 18, 11],
-        [18, 12, 11]
-      ],
-      "name": "left below eye",
-      "gradient": "left-below-eye-gradient"
-    },
-    {
-      "faces": [
-        [14, 16, 40],
-        [40, 41, 14],
-        [59, 5, 35],
-        [35, 79, 59],
-        [14, 41, 37],
-        [37, 15, 14],
-        [5, 59, 40],
-        [40, 16, 5]
-      ],
-      "name": "forehead",
-      "gradient": "forehead-gradient"
-    },
-    {
-      "faces": [
-        [67, 63, 77],
-        [67, 77, 76],
-        [76, 68, 67],
-        [63, 67, 58]
-      ],
-      "name": "right upper cheek",
-      "gradient": "right-upper-cheek-gradient"
-    },
-    {
-      "faces": [
-        [64, 68, 75],
-        [75, 37, 64],
-        [68, 64, 66]
-      ],
-      "name": "right below eye",
-      "gradient": "right-below-eye-gradient"
-    },
-    {
-      "faces": [
-        [35, 4, 42],
-        [4, 1, 42],
-        [42, 43, 44],
-        [44, 35, 42],
-        [45, 43, 42],
-        [42, 10, 45],
-        [30, 32, 24],
-        [24, 25, 30],
-        [30, 33, 32],
-        [33, 30, 10],
-        [44, 43, 46],
-        [43, 45, 47],
-        [47, 46, 43],
-        [48, 47, 45],
-        [45, 30, 48],
-        [30, 45, 10],
-        [49, 42, 0],
-        [8, 7, 42],
-        [50, 42, 7],
-        [50, 10, 42],
-        [1, 0, 42],
-        [42, 9, 8],
-        [42, 49, 9],
-        [79, 81, 57],
-        [57, 81, 56],
-        [82, 79, 35],
-        [35, 44, 82],
-        [81, 79, 82],
-        [82, 83, 81],
-        [84, 63, 81],
-        [81, 83, 84],
-        [44, 46, 85],
-        [85, 82, 44],
-        [52, 73, 71],
-        [71, 78, 52],
-        [52, 78, 77],
-        [77, 63, 52],
-        [82, 85, 83],
-        [83, 85, 86],
-        [86, 84, 83],
-        [87, 52, 84],
-        [84, 86, 87],
-        [52, 63, 84],
-        [88, 53, 81],
-        [62, 81, 60],
-        [89, 60, 81],
-        [89, 81, 63],
-        [56, 81, 53],
-        [81, 62, 61],
-        [81, 61, 88],
-        [48, 87, 86],
-        [86, 47, 48],
-        [47, 86, 85],
-        [85, 46, 47],
-        [48, 30, 52],
-        [52, 87, 48]
-      ],
-      "name": "back",
-      "gradient": "back-gradient"
-    },
-    {
-      "faces": [[57, 59, 79]],
-      "name": "right top ear",
-      "gradient": "right-top-ear-gradient"
-    },
-    {
-      "faces": [[64, 41, 40]],
-      "name": "right inner upper eye",
-      "gradient": "right-inner-eye-gradient"
-    }
-  ],
-  "gradients": {
-    "forehead-gradient": {
-      "type": "linear",
-      "stops": [
-        {
-          "stop-color": "#23FE4A"
-        },
-        {
-          "offset": 1,
-          "stop-color": "#BAD8EF"
-        }
-      ],
-      "x1": "50%",
-      "y1": "20.232164948453608%",
-      "x2": "50%",
-      "y2": "74.87123711340206%",
-      "gradientUnits": "userSpaceOnUse"
-    },
-    "right-upper-cheek-gradient": {
-      "type": "linear",
-      "stops": [
-        {
-          "stop-color": "#20B475"
-        },
-        {
-          "offset": 1,
-          "stop-color": "#70BDCE"
-        }
-      ],
-      "x1": "77.19501199040768%",
-      "y1": "44.68123711340206%",
-      "x2": "77.19501199040768%",
-      "y2": "68.2861855670103%",
-      "gradientUnits": "userSpaceOnUse"
-    },
-    "left-upper-cheek-gradient": {
-      "type": "linear",
-      "stops": [
-        {
-          "stop-color": "#20B475"
-        },
-        {
-          "offset": 1,
-          "stop-color": "#70BDCE"
-        }
-      ],
-      "x1": "22.820719424460435%",
-      "y1": "44.68123711340206%",
-      "x2": "22.820719424460435%",
-      "y2": "68.2861855670103%",
-      "gradientUnits": "userSpaceOnUse"
-    },
-    "right-below-eye-gradient": {
-      "type": "linear",
-      "stops": [
-        {
-          "stop-color": "#85BBE1"
-        },
-        {
-          "offset": 1,
-          "stop-color": "#7CCACA"
-        }
-      ],
-      "x1": "54.34676258992806%",
-      "y1": "68.26917525773197%",
-      "x2": "65.3001438848921%",
-      "y2": "68.26917525773197%",
-      "gradientUnits": "userSpaceOnUse"
-    },
-    "left-below-eye-gradient": {
-      "type": "linear",
-      "stops": [
-        {
-          "stop-color": "#7CCACA"
-        },
-        {
-          "offset": 1,
-          "stop-color": "#85BBE1"
-        }
-      ],
-      "x1": "34.731223021582736%",
-      "y1": "68.26917525773197%",
-      "x2": "45.65323741007194%",
-      "y2": "68.26917525773197%",
-      "gradientUnits": "userSpaceOnUse"
-    },
-    "right-ear-gradient": {
-      "type": "linear",
-      "stops": [
-        {
-          "stop-color": "#074F1E"
-        },
-        {
-          "offset": 0.4286,
-          "stop-color": "#05541C"
-        },
-        {
-          "offset": 0.62,
-          "stop-color": "#006A13"
-        },
-        {
-          "offset": 1,
-          "stop-color": "#007514"
-        }
-      ],
-      "x1": "61.443549160671466%",
-      "y1": "44.51773195876289%",
-      "x2": "93.802206235012%",
-      "y2": "24.439072164948456%",
-      "gradientUnits": "userSpaceOnUse"
-    },
-    "left-ear-gradient": {
-      "type": "linear",
-      "stops": [
-        {
-          "stop-color": "#074F1E"
-        },
-        {
-          "offset": 0.4286,
-          "stop-color": "#05541C"
-        },
-        {
-          "offset": 0.62,
-          "stop-color": "#006A13"
-        },
-        {
-          "offset": 1,
-          "stop-color": "#007514"
-        }
-      ],
-      "x1": "32.7432134292566%",
-      "y1": "44.33329896907217%",
-      "x2": "4.853390887290168%",
-      "y2": "19.18181443298969%",
-      "gradientUnits": "userSpaceOnUse"
-    },
-    "left-outer-eye-gradient": {
-      "type": "linear",
-      "stops": [
-        {
-          "stop-color": "#43C3A2"
-        },
-        {
-          "offset": 1,
-          "stop-color": "#4FAFC0"
-        },
-        {
-          "offset": 1,
-          "stop-color": "#4FAFC0"
-        }
-      ],
-      "x1": "27.575539568345324%",
-      "y1": "60.519278350515464%",
-      "x2": "34.982350119904076%",
-      "y2": "60.519278350515464%",
-      "gradientUnits": "userSpaceOnUse"
-    },
-    "right-outer-eye-gradient": {
-      "type": "linear",
-      "stops": [
-        {
-          "stop-color": "#4FAFC0"
-        },
-        {
-          "offset": 1,
-          "stop-color": "#43C3A2"
-        }
-      ],
-      "x1": "65.01764988009592%",
-      "y1": "60.519278350515464%",
-      "x2": "72.42446043165468%",
-      "y2": "60.519278350515464%",
-      "gradientUnits": "userSpaceOnUse"
-    },
-    "right-lower-cheek-gradient": {
-      "type": "linear",
-      "stops": [
-        {
-          "stop-color": "#59ADCB"
-        },
-        {
-          "offset": 1,
-          "stop-color": "#436CC8"
-        }
-      ],
-      "x1": "77.93247002398083%",
-      "y1": "68.15113402061857%",
-      "x2": "77.93247002398083%",
-      "y2": "86.82577319587631%",
-      "gradientUnits": "userSpaceOnUse"
-    },
-    "left-lower-cheek-gradient": {
-      "type": "linear",
-      "stops": [
-        {
-          "stop-color": "#59ADCB"
-        },
-        {
-          "offset": 1,
-          "stop-color": "#436CC8"
-        }
-      ],
-      "x1": "22.083165467625896%",
-      "y1": "68.15113402061857%",
-      "x2": "22.083165467625896%",
-      "y2": "86.82577319587631%",
-      "gradientUnits": "userSpaceOnUse"
-    },
-    "left-top-ear-gradient": {
-      "type": "linear",
-      "stops": [
-        {
-          "stop-color": "#0ED54A"
-        },
-        {
-          "offset": 1,
-          "stop-color": "#0ED54A"
-        }
-      ],
-      "x1": "13.954513189448441%",
-      "y1": "22.055670103092787%",
-      "x2": "44.146762589928066%",
-      "y2": "22.055670103092787%",
-      "gradientUnits": "userSpaceOnUse"
-    },
-    "right-top-ear-gradient": {
-      "type": "linear",
-      "stops": [
-        {
-          "stop-color": "#0ED54A"
-        },
-        {
-          "offset": 1,
-          "stop-color": "#11EB36"
-        }
-      ],
-      "x1": "55.85333333333334%",
-      "y1": "22.055670103092787%",
-      "x2": "86.04556354916068%",
-      "y2": "22.055670103092787%",
-      "gradientUnits": "userSpaceOnUse"
-    },
-    "left-forehead-gradient": {
-      "type": "linear",
-      "stops": [
-        {
-          "stop-color": "#15DC5D"
-        },
-        {
-          "offset": 1,
-          "stop-color": "#48CA9F"
-        }
-      ],
-      "x1": "36.3947242206235%",
-      "y1": "34.11144329896908%",
-      "x2": "36.3947242206235%",
-      "y2": "53.59649484536083%",
-      "gradientUnits": "userSpaceOnUse"
-    },
-    "right-forehead-gradient": {
-      "type": "linear",
-      "stops": [
-        {
-          "stop-color": "#15DC5D"
-        },
-        {
-          "offset": 1,
-          "stop-color": "#48CA9F"
-        }
-      ],
-      "x1": "63.6052757793765%",
-      "y1": "34.11144329896908%",
-      "x2": "63.6052757793765%",
-      "y2": "53.59649484536083%",
-      "gradientUnits": "userSpaceOnUse"
-    },
-    "left-upper-snout-gradient": {
-      "type": "linear",
-      "stops": [
-        {
-          "stop-color": "#54A8CF"
-        },
-        {
-          "offset": 1,
-          "stop-color": "#5393E3"
-        }
-      ],
-      "x1": "38.829736211031175%",
-      "y1": "68.28865979381443%",
-      "x2": "38.829736211031175%",
-      "y2": "81.55670103092784%",
-      "gradientUnits": "userSpaceOnUse"
-    },
-    "right-upper-snout-gradient": {
-      "type": "linear",
-      "stops": [
-        {
-          "stop-color": "#54A8CF"
-        },
-        {
-          "offset": 1,
-          "stop-color": "#5393E3"
-        }
-      ],
-      "x1": "61.17026378896883%",
-      "y1": "68.28865979381443%",
-      "x2": "61.17026378896883%",
-      "y2": "81.55670103092784%",
-      "gradientUnits": "userSpaceOnUse"
-    },
-    "right-middle-cheek-gradient": {
-      "type": "linear",
-      "stops": [
-        {
-          "stop-color": "#32819D"
-        },
-        {
-          "offset": 0.3363,
-          "stop-color": "#447DCD"
-        }
-      ],
-      "x1": "69.9137649880096%",
-      "y1": "51.063505154639174%",
-      "x2": "69.9137649880096%",
-      "y2": "85.81041237113402%",
-      "gradientUnits": "userSpaceOnUse"
-    },
-    "left-middle-cheek-gradient": {
-      "type": "linear",
-      "stops": [
-        {
-          "stop-color": "#32819D"
-        },
-        {
-          "offset": 0.3363,
-          "stop-color": "#447DCD"
-        }
-      ],
-      "x1": "30.086330935251798%",
-      "y1": "68.15092783505153%",
-      "x2": "30.086330935251798%",
-      "y2": "81.55752577319588%",
-      "gradientUnits": "userSpaceOnUse"
-    },
-    "right-inner-eye-gradient": {
-      "type": "linear",
-      "stops": [
-        {
-          "stop-color": "#53A9CB"
-        },
-        {
-          "offset": 1,
-          "stop-color": "#44C0A6"
-        }
-      ],
-      "x1": "55.38244604316547%",
-      "y1": "74.87123711340206%",
-      "x2": "55.38244604316547%",
-      "y2": "53.59659793814433%",
-      "gradientUnits": "userSpaceOnUse"
-    },
-    "left-inner-eye-gradient": {
-      "type": "linear",
-      "stops": [
-        {
-          "stop-color": "#53A9CB"
-        },
-        {
-          "offset": 1,
-          "stop-color": "#44C0A6"
-        }
-      ],
-      "x1": "43.58177458033573%",
-      "y1": "64.2339175257732%",
-      "x2": "45.65323741007194%",
-      "y2": "64.2339175257732%",
-      "gradientUnits": "userSpaceOnUse"
-    },
-    "back-gradient": {
-      "type": "linear",
-      "stops": [
-        {
-          "stop-color": "#27FC4E"
-        },
-        {
-          "offset": 1,
-          "stop-color": "#446FC9"
-        }
-      ],
-      "x1": "50%",
-      "y1": "0%",
-      "x2": "50%",
-      "y2": "100%",
-      "gradientUnits": "userSpaceOnUse"
-    }
-  },
-  "positions": [
-    [111.024597, 52.604599, 46.225899],
-    [114.025002, 87.673302, 58.9818],
-    [66.192001, 80.898003, 55.394299],
-    [72.113297, 35.491798, 30.871401],
-    [97.804497, 116.560997, 73.978798],
-    [16.7623, 58.010899, 58.078201],
-    [52.608898, 30.3641, 42.556099],
-    [106.881401, 31.945499, 46.9133],
-    [113.484596, 38.6049, 49.121498],
-    [108.6633, 43.2332, 46.315399],
-    [101.216599, 15.9822, 46.308201],
-    [16.6605, -16.2883, 93.618698],
-    [40.775002, -10.2288, 85.276398],
-    [23.926901, -2.5103, 86.736504],
-    [11.1691, -7.0037, 99.377602],
-    [9.5692, -34.393902, 141.671997],
-    [12.596, 7.1655, 88.740997],
-    [61.180901, 8.8142, 76.996803],
-    [39.719501, -28.927099, 88.963799],
-    [13.7962, -68.575699, 132.057007],
-    [15.2674, -62.32, 129.688004],
-    [14.8446, -52.6096, 140.113007],
-    [12.8917, -49.771599, 144.740997],
-    [35.604198, -71.758003, 81.063904],
-    [47.462502, -68.606102, 63.369701],
-    [38.2486, -64.730202, 38.909901],
-    [-12.8917, -49.771599, 144.740997],
-    [-13.7962, -68.575699, 132.057007],
-    [17.802099, -71.758003, 81.063904],
-    [19.1243, -69.0168, 49.420101],
-    [38.2486, -66.275597, 17.776199],
-    [12.8928, -36.703499, 141.671997],
-    [109.283997, -93.589897, 27.824301],
-    [122.117996, -36.8894, 35.025002],
-    [67.7668, -30.197001, 78.417801],
-    [33.180698, 101.851997, 25.3186],
-    [9.4063, -35.589802, 150.722],
-    [-9.5692, -34.393902, 141.671997],
-    [-9.4063, -35.589802, 150.722],
-    [11.4565, -37.899399, 150.722],
-    [-12.596, 7.1655, 88.740997],
-    [-11.1691, -7.0037, 99.377602],
-    [70.236504, 62.836201, -3.9475],
-    [47.263401, 54.293999, -27.414801],
-    [28.7302, 91.731102, -24.972601],
-    [69.167603, 6.5862, -12.7757],
-    [28.7302, 49.1003, -48.3596],
-    [31.903, 5.692, -47.821999],
-    [35.075802, -34.432899, -16.280899],
-    [115.284103, 48.681499, 48.684101],
-    [110.842796, 28.4821, 49.176201],
-    [-19.1243, -69.0168, 49.420101],
-    [-38.2486, -66.275597, 17.776199],
-    [-111.024597, 52.604599, 46.225899],
-    [-72.113297, 35.491798, 30.871401],
-    [-66.192001, 80.898003, 55.394299],
-    [-114.025002, 87.673302, 58.9818],
-    [-97.804497, 116.560997, 73.978798],
-    [-52.608898, 30.3641, 42.556099],
-    [-16.7623, 58.010899, 58.078201],
-    [-106.881401, 31.945499, 46.9133],
-    [-108.6633, 43.2332, 46.315399],
-    [-113.484596, 38.6049, 49.121498],
-    [-101.216599, 15.9822, 46.308201],
-    [-16.6605, -16.2883, 93.618698],
-    [-23.926901, -2.5103, 86.736504],
-    [-40.775002, -10.2288, 85.276398],
-    [-61.180901, 8.8142, 76.996803],
-    [-39.719501, -28.927099, 88.963799],
-    [-14.8446, -52.6096, 140.113007],
-    [-15.2674, -62.32, 129.688004],
-    [-47.462502, -68.606102, 63.369701],
-    [-35.604198, -71.758003, 81.063904],
-    [-38.2486, -64.730202, 38.909901],
-    [-17.802099, -71.758003, 81.063904],
-    [-12.8928, -36.703499, 141.671997],
-    [-67.7668, -30.197001, 78.417801],
-    [-122.117996, -36.8894, 35.025002],
-    [-109.283997, -93.589897, 27.824301],
-    [-33.180698, 101.851997, 25.3186],
-    [-11.4565, -37.899399, 150.722],
-    [-70.236504, 62.836201, -3.9475],
-    [-28.7302, 91.731102, -24.972601],
-    [-47.263401, 54.293999, -27.414801],
-    [-69.167603, 6.5862, -12.7757],
-    [-28.7302, 49.1003, -48.3596],
-    [-31.903, 5.692, -47.821999],
-    [-35.075802, -34.432899, -16.280899],
-    [-115.284103, 48.681499, 48.684101],
-    [-110.842796, 28.4821, 49.176201]
-  ]
-}
diff --git a/app/build-types/beta/images/icon-128.png b/app/build-types/beta/images/icon-128.png
index 97762ff99..95b2ec2c7 100644
Binary files a/app/build-types/beta/images/icon-128.png and b/app/build-types/beta/images/icon-128.png differ
diff --git a/app/build-types/beta/images/icon-16.png b/app/build-types/beta/images/icon-16.png
index 216b4ad06..e1c32722f 100644
Binary files a/app/build-types/beta/images/icon-16.png and b/app/build-types/beta/images/icon-16.png differ
diff --git a/app/build-types/beta/images/icon-19.png b/app/build-types/beta/images/icon-19.png
index f7da09c5e..5073efb79 100644
Binary files a/app/build-types/beta/images/icon-19.png and b/app/build-types/beta/images/icon-19.png differ
diff --git a/app/build-types/beta/images/icon-32.png b/app/build-types/beta/images/icon-32.png
index fb2a55a57..f0ac3fb28 100644
Binary files a/app/build-types/beta/images/icon-32.png and b/app/build-types/beta/images/icon-32.png differ
diff --git a/app/build-types/beta/images/icon-34.png b/app/build-types/beta/images/icon-34.png
new file mode 100644
index 000000000..bd70156f3
Binary files /dev/null and b/app/build-types/beta/images/icon-34.png differ
diff --git a/app/build-types/beta/images/icon-38.png b/app/build-types/beta/images/icon-38.png
index e9449d4d0..ae868f268 100644
Binary files a/app/build-types/beta/images/icon-38.png and b/app/build-types/beta/images/icon-38.png differ
diff --git a/app/build-types/beta/images/icon-48.png b/app/build-types/beta/images/icon-48.png
index 0fdfeb25c..306a7bce0 100644
Binary files a/app/build-types/beta/images/icon-48.png and b/app/build-types/beta/images/icon-48.png differ
diff --git a/app/build-types/beta/images/icon-512.png b/app/build-types/beta/images/icon-512.png
index 09690ab1b..0b9ccdc08 100644
Binary files a/app/build-types/beta/images/icon-512.png and b/app/build-types/beta/images/icon-512.png differ
diff --git a/app/build-types/beta/images/icon-64.png b/app/build-types/beta/images/icon-64.png
index b60b7d5d5..2bcda034c 100644
Binary files a/app/build-types/beta/images/icon-64.png and b/app/build-types/beta/images/icon-64.png differ
diff --git a/app/build-types/beta/images/info-logo.png b/app/build-types/beta/images/info-logo.png
index 97762ff99..a855a15b1 100644
Binary files a/app/build-types/beta/images/info-logo.png and b/app/build-types/beta/images/info-logo.png differ
diff --git a/app/build-types/beta/images/logo/metamask-fox.svg b/app/build-types/beta/images/logo/metamask-fox.svg
index 53698aefd..b6516605d 100644
--- a/app/build-types/beta/images/logo/metamask-fox.svg
+++ b/app/build-types/beta/images/logo/metamask-fox.svg
@@ -1,130 +1,36 @@
-<svg width="35" height="33" viewBox="0 0 35 33" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<path d="M19.5938 17.6064L20.1705 9.73742L22.5185 4.13232H12.4812L14.8292 9.73742L15.4059 17.6064L15.5844 20.0884L15.5981 26.1981H19.4016L19.4153 20.0884L19.5938 17.6064Z" fill="url(#paint0_linear)"/>
-<path d="M32.3226 16.0925L25.1413 14.006L27.3108 17.2654L24.0703 23.5387L28.3543 23.4842H34.7255L32.3226 16.0925Z" fill="url(#paint1_linear)"/>
-<path d="M9.85875 14.006L2.6775 16.0925L0.28833 23.4842H6.65946L10.9298 23.5387L7.68927 17.2654L9.85875 14.006Z" fill="url(#paint2_linear)"/>
-<path d="M20.3078 21.5476L19.4016 26.198L20.0607 26.6481L24.0701 23.5387L24.1937 20.4156L20.3078 21.5476Z" fill="url(#paint3_linear)"/>
-<path d="M10.8198 20.4156L10.9297 23.5387L14.9391 26.6481L15.5982 26.198L14.6919 21.5476L10.8198 20.4156Z" fill="url(#paint4_linear)"/>
-<path d="M33.8466 10.7329L35 5.16869L33.2699 0L20.0608 9.73731L24.9902 14.1286L32.3225 16.0925L33.9015 14.2514L33.215 13.7604L34.3134 12.7649L33.4759 12.1103L34.5743 11.2784L33.8466 10.7329Z" fill="url(#paint5_linear)"/>
-<path d="M0 5.16869L1.16712 10.7329L0.425657 11.2784L1.52413 12.1103L0.686544 12.7649L1.78501 13.7604L1.09847 14.2514L2.67752 16.0925L10.0235 14.1286L14.9392 9.73731L1.73009 0L0 5.16869Z" fill="url(#paint6_linear)"/>
-<path d="M7.68921 17.2653L10.8198 20.4156L10.9297 23.5386L7.68921 17.2653Z" fill="url(#paint7_linear)"/>
-<path d="M27.3105 17.2653L24.0701 23.5386L24.1936 20.4156L27.3105 17.2653Z" fill="url(#paint8_linear)"/>
-<path d="M24.7156 28.8983L20.0608 26.6481L20.4315 29.662L20.3903 30.9303L24.7156 28.8983Z" fill="#D7C1B3"/>
-<path d="M10.2844 28.8983L14.6096 30.9303L14.5822 29.662L14.9392 26.6481L10.2844 28.8983Z" fill="#D7C1B3"/>
-<path d="M28.3543 23.484L24.7156 28.8982L32.501 31.0256L34.7254 23.484H28.3543Z" fill="url(#paint9_linear)"/>
-<path d="M0.28833 23.484L2.499 31.0256L10.2844 28.8982L6.65946 23.484H0.28833Z" fill="url(#paint10_linear)"/>
-<path d="M1.72998 0L14.9391 9.73731L12.8657 4.13222L1.72998 0Z" fill="url(#paint11_linear)"/>
-<path d="M22.1339 4.13222L20.0605 9.73731L33.2697 0L22.1339 4.13222Z" fill="url(#paint12_linear)"/>
-<path d="M9.85869 14.0059L7.68921 17.2653L15.406 17.6063L14.9391 9.7373L9.85869 14.0059Z" fill="url(#paint13_linear)"/>
-<path d="M25.141 14.0059L20.0606 9.7373L19.5938 17.6063L27.3105 17.2653L25.141 14.0059Z" fill="url(#paint14_linear)"/>
-<path d="M10.2844 28.8983L14.9392 26.6481L10.9298 23.5387L10.2844 28.8983Z" fill="url(#paint15_linear)"/>
-<path d="M20.0608 26.6481L24.7156 28.8983L24.0702 23.5387L20.0608 26.6481Z" fill="url(#paint16_linear)"/>
-<path d="M10.2844 28.8982L10.9297 23.5386L6.65942 23.484L10.2844 28.8982Z" fill="url(#paint17_linear)"/>
-<path d="M24.0701 23.5386L24.7154 28.8982L28.3541 23.484L24.0701 23.5386Z" fill="url(#paint18_linear)"/>
-<path d="M27.3107 17.2653L19.594 17.6062L20.308 21.5475L21.4477 19.1745L24.1938 20.4156L27.3107 17.2653Z" fill="url(#paint19_linear)"/>
-<path d="M10.8198 20.4156L13.5523 19.1745L14.692 21.5475L15.406 17.6062L7.68921 17.2653L10.8198 20.4156Z" fill="url(#paint20_linear)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.4156 20.0884L20.3081 21.5476L19.5941 17.6063L19.4156 20.0884ZM20.3081 21.5476L19.4156 20.0884L19.4019 26.1981L20.3081 21.5476Z" fill="url(#paint21_linear)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4061 17.6063L14.6921 21.5476V21.5476L15.5984 26.1981L15.5846 20.0884L14.6921 21.5476L15.5846 20.0884L15.4061 17.6063Z" fill="url(#paint22_linear)"/>
-<path d="M20.4151 30.914L20.4315 29.662L20.0883 29.362H14.9117L14.5822 29.662L14.6096 30.9303L10.2844 28.8983L11.7948 30.1257L14.8705 32.2396H20.1295L23.2052 30.1257L24.7156 28.8983L20.4151 30.914Z" fill="#C0AD9E"/>
-<path d="M20.0606 26.648L19.4016 26.198H15.5981L14.939 26.648L14.582 29.662L14.9116 29.3619H20.0881L20.4314 29.662L20.0606 26.648Z" fill="#161616" stroke="#161616" stroke-width="0.142167" stroke-miterlimit="10" stroke-linejoin="round"/>
-<path d="M21.4475 19.1746L20.3079 21.5475L24.1937 20.4156L21.4475 19.1746Z" fill="#161616"/>
-<path d="M13.5525 19.1746L14.6922 21.5475L10.8201 20.4156L13.5525 19.1746Z" fill="#161616"/>
-</g>
-<defs>
-<linearGradient id="paint0_linear" x1="17.4998" y1="4.13232" x2="17.4998" y2="26.1981" gradientUnits="userSpaceOnUse">
-<stop stop-color="#21FF47"/>
-<stop offset="1" stop-color="#BCD8F0"/>
-</linearGradient>
-<linearGradient id="paint1_linear" x1="29.3979" y1="14.006" x2="29.3979" y2="23.5387" gradientUnits="userSpaceOnUse">
-<stop stop-color="#1CAD68"/>
-<stop offset="1" stop-color="#77BDD4"/>
-</linearGradient>
-<linearGradient id="paint2_linear" x1="5.60904" y1="14.006" x2="5.60904" y2="23.5387" gradientUnits="userSpaceOnUse">
-<stop stop-color="#1CAD68"/>
-<stop offset="1" stop-color="#77BDD4"/>
-</linearGradient>
-<linearGradient id="paint3_linear" x1="21.7977" y1="20.4156" x2="21.7977" y2="26.6481" gradientUnits="userSpaceOnUse">
-<stop stop-color="#7BCBC8"/>
-<stop offset="1" stop-color="#87B9E6"/>
-</linearGradient>
-<linearGradient id="paint4_linear" x1="13.209" y1="20.4156" x2="13.209" y2="26.6481" gradientUnits="userSpaceOnUse">
-<stop stop-color="#7BCBC8"/>
-<stop offset="1" stop-color="#87B9E6"/>
-</linearGradient>
-<linearGradient id="paint5_linear" x1="27.5304" y1="0" x2="27.5304" y2="16.0925" gradientUnits="userSpaceOnUse">
-<stop stop-color="#007715"/>
-<stop offset="1" stop-color="#0A3424"/>
-</linearGradient>
-<linearGradient id="paint6_linear" x1="7.4696" y1="0" x2="7.4696" y2="16.0925" gradientUnits="userSpaceOnUse">
-<stop stop-color="#007715"/>
-<stop offset="1" stop-color="#0A3424"/>
-</linearGradient>
-<linearGradient id="paint7_linear" x1="9.30945" y1="17.2653" x2="9.30945" y2="23.5386" gradientUnits="userSpaceOnUse">
-<stop stop-color="#42C4A0"/>
-<stop offset="1" stop-color="#51ACC7"/>
-</linearGradient>
-<linearGradient id="paint8_linear" x1="25.6903" y1="17.2653" x2="25.6903" y2="23.5386" gradientUnits="userSpaceOnUse">
-<stop stop-color="#42C4A0"/>
-<stop offset="1" stop-color="#51ACC7"/>
-</linearGradient>
-<linearGradient id="paint9_linear" x1="29.7205" y1="23.484" x2="29.7205" y2="31.0256" gradientUnits="userSpaceOnUse">
-<stop stop-color="#5BAECB"/>
-<stop offset="1" stop-color="#4160C1"/>
-</linearGradient>
-<linearGradient id="paint10_linear" x1="5.28637" y1="23.484" x2="5.28637" y2="31.0256" gradientUnits="userSpaceOnUse">
-<stop stop-color="#5BAECB"/>
-<stop offset="1" stop-color="#4160C1"/>
-</linearGradient>
-<linearGradient id="paint11_linear" x1="8.33453" y1="0" x2="8.33453" y2="9.73731" gradientUnits="userSpaceOnUse">
-<stop stop-color="#01EA28"/>
-<stop offset="1" stop-color="#10D24F"/>
-</linearGradient>
-<linearGradient id="paint12_linear" x1="26.6651" y1="0" x2="26.6651" y2="9.73731" gradientUnits="userSpaceOnUse">
-<stop stop-color="#01EA28"/>
-<stop offset="1" stop-color="#10D24F"/>
-</linearGradient>
-<linearGradient id="paint13_linear" x1="11.5476" y1="9.7373" x2="11.5476" y2="17.6063" gradientUnits="userSpaceOnUse">
-<stop stop-color="#12DB56"/>
-<stop offset="1" stop-color="#4CC9A3"/>
-</linearGradient>
-<linearGradient id="paint14_linear" x1="23.4521" y1="9.7373" x2="23.4521" y2="17.6063" gradientUnits="userSpaceOnUse">
-<stop stop-color="#12DB56"/>
-<stop offset="1" stop-color="#4CC9A3"/>
-</linearGradient>
-<linearGradient id="paint15_linear" x1="12.6118" y1="23.5387" x2="12.6118" y2="28.8983" gradientUnits="userSpaceOnUse">
-<stop stop-color="#5BAECB"/>
-<stop offset="1" stop-color="#4160C1"/>
-</linearGradient>
-<linearGradient id="paint16_linear" x1="22.3882" y1="23.5387" x2="22.3882" y2="28.8983" gradientUnits="userSpaceOnUse">
-<stop stop-color="#5BAECB"/>
-<stop offset="1" stop-color="#4160C1"/>
-</linearGradient>
-<linearGradient id="paint17_linear" x1="8.79458" y1="23.484" x2="8.79458" y2="28.8982" gradientUnits="userSpaceOnUse">
-<stop stop-color="#32809D"/>
-<stop offset="1" stop-color="#477DD5"/>
-</linearGradient>
-<linearGradient id="paint18_linear" x1="26.2121" y1="23.484" x2="26.2121" y2="28.8982" gradientUnits="userSpaceOnUse">
-<stop stop-color="#32809D"/>
-<stop offset="1" stop-color="#477DD5"/>
-</linearGradient>
-<linearGradient id="paint19_linear" x1="23.4524" y1="17.2653" x2="23.4524" y2="21.5475" gradientUnits="userSpaceOnUse">
-<stop stop-color="#239777"/>
-<stop offset="1" stop-color="#2C8A8D"/>
-</linearGradient>
-<linearGradient id="paint20_linear" x1="11.5476" y1="17.2653" x2="11.5476" y2="21.5475" gradientUnits="userSpaceOnUse">
-<stop stop-color="#239777"/>
-<stop offset="1" stop-color="#2C8A8D"/>
-</linearGradient>
-<linearGradient id="paint21_linear" x1="19.855" y1="17.6063" x2="19.855" y2="26.1981" gradientUnits="userSpaceOnUse">
-<stop stop-color="#42C4A0"/>
-<stop offset="1" stop-color="#51ACC7"/>
-</linearGradient>
-<linearGradient id="paint22_linear" x1="15.1453" y1="17.6063" x2="15.1453" y2="26.1981" gradientUnits="userSpaceOnUse">
-<stop stop-color="#42C4A0"/>
-<stop offset="1" stop-color="#51ACC7"/>
-</linearGradient>
-<clipPath id="clip0">
-<rect width="35" height="33" fill="white"/>
-</clipPath>
-</defs>
+<svg width="158" height="129" viewBox="0 0 158 129" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M128.133 1L75.8844 39.6606L85.6003 16.8766L128.133 1Z" fill="#E17726" stroke="#E17726" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.61512 1L59.3988 40.0214L50.148 16.8766L7.61512 1Z" fill="#E27625" stroke="#E27625" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M109.322 90.641L95.42 111.879L125.188 120.075L133.715 91.1049L109.322 90.641Z" fill="#E27625" stroke="#E27625" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.08499 91.1049L10.5606 120.075L40.2767 111.879L26.4264 90.641L2.08499 91.1049Z" fill="#E27625" stroke="#E27625" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M38.6748 54.7639L30.406 67.2384L59.8637 68.5786L58.8818 36.877L38.6748 54.7639Z" fill="#E27625" stroke="#E27625" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M97.0738 54.7639L76.5567 36.5161L75.8848 68.5786L105.343 67.2384L97.0738 54.7639Z" fill="#E27625" stroke="#E27625" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M40.2766 111.879L58.1063 103.27L42.7573 91.3112L40.2766 111.879Z" fill="#E27625" stroke="#E27625" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M77.6414 103.27L95.4195 111.879L92.9905 91.3112L77.6414 103.27Z" fill="#E27625" stroke="#E27625" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M95.4198 111.879L77.6417 103.27L79.0888 114.817L78.9337 119.714L95.4198 111.879Z" fill="#D5BFB2" stroke="#D5BFB2" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M40.2772 111.879L56.8149 119.714L56.7115 114.817L58.1069 103.27L40.2772 111.879Z" fill="#D5BFB2" stroke="#D5BFB2" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M57.1248 83.682L42.3442 79.352L52.7837 74.5581L57.1248 83.682Z" fill="#233447" stroke="#233447" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M78.6233 83.682L82.9644 74.5581L93.4555 79.352L78.6233 83.682Z" fill="#233447" stroke="#233447" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M40.2768 111.879L42.8609 90.641L26.4265 91.1049L40.2768 111.879Z" fill="#CC6228" stroke="#CC6228" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M92.8869 90.641L95.4193 111.879L109.321 91.1049L92.8869 90.641Z" fill="#CC6228" stroke="#CC6228" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M105.342 67.2385L75.8843 68.5788L78.6233 83.6821L82.9645 74.5583L93.4556 79.3522L105.342 67.2385Z" fill="#CC6228" stroke="#CC6228" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M42.3441 79.3522L52.7835 74.5583L57.1246 83.6821L59.8637 68.5788L30.4059 67.2385L42.3441 79.3522Z" fill="#CC6228" stroke="#CC6228" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M30.406 67.2385L42.7576 91.3112L42.3442 79.3522L30.406 67.2385Z" fill="#E27525" stroke="#E27525" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M93.4563 79.3522L92.9912 91.3112L105.343 67.2385L93.4563 79.3522Z" fill="#E27525" stroke="#E27525" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M59.864 68.5789L57.1249 83.6823L60.5875 101.518L61.3627 78.012L59.864 68.5789Z" fill="#E27525" stroke="#E27525" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M75.8848 68.5789L74.4378 77.9605L75.1613 101.518L78.6239 83.6823L75.8848 68.5789Z" fill="#E27525" stroke="#E27525" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M78.624 83.682L75.1614 101.517L77.6421 103.27L92.9912 91.311L93.4563 79.3521L78.624 83.682Z" fill="#F5841F" stroke="#F5841F" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M42.3442 79.3521L42.7577 91.311L58.1067 103.27L60.5874 101.517L57.1248 83.682L42.3442 79.3521Z" fill="#F5841F" stroke="#F5841F" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M78.9341 119.714L79.0891 114.817L77.7454 113.683H58.0035L56.7115 114.817L56.8149 119.714L40.2772 111.879L46.0654 116.621L57.7968 124.714H77.9005L89.6836 116.621L95.4201 111.879L78.9341 119.714Z" fill="#C0AC9D" stroke="#C0AC9D" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M77.6417 103.27L75.161 101.517H60.5871L58.1065 103.27L56.7111 114.817L58.0031 113.683H77.745L79.0887 114.817L77.6417 103.27Z" fill="#161616" stroke="#161616" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M130.356 42.1864L134.749 20.8458L128.133 1L77.6418 38.3719L97.0736 54.764L124.516 62.7538L130.562 55.6918L127.927 53.7846L132.113 49.9701L128.909 47.4958L133.095 44.2998L130.356 42.1864Z" fill="#763E1A" stroke="#763E1A" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1 20.8458L5.44451 42.1864L2.60209 44.2998L6.83988 47.4958L3.6357 49.9701L7.8218 53.7846L5.18611 55.6918L11.2327 62.7538L38.675 54.764L58.1068 38.3719L7.61508 1L1 20.8458Z" fill="#763E1A" stroke="#763E1A" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M124.516 62.7538L97.0739 54.7639L105.343 67.2384L92.9911 91.311L109.322 91.1048H133.715L124.516 62.7538Z" fill="#F5841F" stroke="#F5841F" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M38.6747 54.7639L11.2325 62.7538L2.08507 91.1048H26.4265L42.7575 91.311L30.4059 67.2384L38.6747 54.7639Z" fill="#F5841F" stroke="#F5841F" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M75.8851 68.5787L77.6423 38.3719L85.601 16.8766H50.1483L58.1071 38.3719L59.8642 68.5787L60.5361 78.0634L60.5878 101.517H75.1616L75.2133 78.0634L75.8851 68.5787Z" fill="#F5841F" stroke="#F5841F" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M149.801 129H91.7084C87.3698 129 83.8491 125.479 83.8491 121.141V104.024C83.8491 99.6853 87.3698 96.1646 91.7084 96.1646H149.801C154.139 96.1646 157.66 99.6853 157.66 104.024V121.141C157.66 125.485 154.139 129 149.801 129Z" fill="#037DD6"/>
+<path d="M96.0903 105.317H101.808C102.42 105.317 103.007 105.436 103.556 105.673C104.106 105.91 104.586 106.229 105.005 106.634C105.417 107.04 105.741 107.521 105.978 108.07C106.216 108.62 106.334 109.206 106.334 109.837C106.334 110.38 106.234 110.867 106.035 111.304C105.835 111.741 105.573 112.122 105.242 112.452C105.885 112.783 106.403 113.258 106.809 113.888C107.208 114.519 107.408 115.237 107.408 116.054C107.408 116.685 107.289 117.265 107.052 117.808C106.815 118.352 106.49 118.826 106.078 119.232C105.666 119.638 105.173 119.956 104.611 120.187C104.049 120.418 103.438 120.53 102.782 120.53H96.0965V105.317H96.0903ZM101.421 111.466C101.877 111.466 102.258 111.323 102.557 111.029C102.857 110.736 103.007 110.386 103.007 109.968C103.007 109.556 102.857 109.194 102.557 108.888C102.258 108.582 101.877 108.426 101.421 108.426H99.4924V111.466H101.421ZM102.495 117.396C102.951 117.396 103.332 117.253 103.631 116.959C103.931 116.666 104.081 116.304 104.081 115.88C104.081 115.468 103.925 115.105 103.619 114.806C103.313 114.506 102.932 114.356 102.47 114.356H99.4924V117.396H102.495Z" fill="#FCFCFC"/>
+<path d="M109.693 105.316H119.331V108.575H113.095V111.297H118.045V114.555H113.095V117.277H119.331V120.536H109.693V105.316Z" fill="#FCFCFC"/>
+<path d="M124.663 108.568H120.786V105.31H132.01V108.568H128.09V120.523H124.663V108.568Z" fill="#FCFCFC"/>
+<path d="M137.428 105.316H140.512L147.023 120.523H143.465L142.117 117.308H135.818L134.47 120.523H130.911L137.428 105.316ZM137.048 114.356H140.881L138.977 109.792L137.048 114.356Z" fill="#FCFCFC"/>
 </svg>
diff --git a/app/scripts/background.js b/app/scripts/background.js
index f3ed3dc3a..ec2aff120 100644
--- a/app/scripts/background.js
+++ b/app/scripts/background.js
@@ -15,6 +15,7 @@ import {
   ENVIRONMENT_TYPE_POPUP,
   ENVIRONMENT_TYPE_NOTIFICATION,
   ENVIRONMENT_TYPE_FULLSCREEN,
+  EXTENSION_MESSAGES,
   PLATFORM_FIREFOX,
 } from '../../shared/constants/app';
 import { SECOND } from '../../shared/constants/time';
@@ -25,6 +26,7 @@ import {
   EVENT_NAMES,
   TRAITS,
 } from '../../shared/constants/metametrics';
+import { checkForLastErrorAndLog } from '../../shared/modules/browser-runtime.utils';
 import { isManifestV3 } from '../../shared/modules/mv3.utils';
 import { maskObject } from '../../shared/modules/object.utils';
 import migrations from './migrations';
@@ -79,7 +81,7 @@ const localStore = inTest ? new ReadOnlyNetworkStore() : new LocalStore();
 let versionedData;
 
 if (inTest || process.env.METAMASK_DEBUG) {
-  global.metamaskGetState = localStore.get.bind(localStore);
+  global.stateHooks.metamaskGetState = localStore.get.bind(localStore);
 }
 
 const phishingPageUrl = new URL(process.env.PHISHING_WARNING_PAGE_URL);
@@ -88,19 +90,73 @@ const ONE_SECOND_IN_MILLISECONDS = 1_000;
 // Timeout for initializing phishing warning page.
 const PHISHING_WARNING_PAGE_TIMEOUT = ONE_SECOND_IN_MILLISECONDS;
 
+const ACK_KEEP_ALIVE_MESSAGE = 'ACK_KEEP_ALIVE_MESSAGE';
+const WORKER_KEEP_ALIVE_MESSAGE = 'WORKER_KEEP_ALIVE_MESSAGE';
+
 /**
  * In case of MV3 we attach a "onConnect" event listener as soon as the application is initialised.
  * Reason is that in case of MV3 a delay in doing this was resulting in missing first connect event after service worker is re-activated.
+ *
+ * @param remotePort
  */
-
 const initApp = async (remotePort) => {
   browser.runtime.onConnect.removeListener(initApp);
   await initialize(remotePort);
   log.info('MetaMask initialization complete.');
 };
 
+/**
+ * Sends a message to the dapp(s) content script to signal it can connect to MetaMask background as
+ * the backend is not active. It is required to re-connect dapps after service worker re-activates.
+ * For non-dapp pages, the message will be sent and ignored.
+ */
+const sendReadyMessageToTabs = async () => {
+  const tabs = await browser.tabs
+    .query({
+      /**
+       * Only query tabs that our extension can run in. To do this, we query for all URLs that our
+       * extension can inject scripts in, which is by using the "<all_urls>" value and __without__
+       * the "tabs" manifest permission. If we included the "tabs" permission, this would also fetch
+       * URLs that we'd not be able to inject in, e.g. chrome://pages, chrome://extension, which
+       * is not what we'd want.
+       *
+       * You might be wondering, how does the "url" param work without the "tabs" permission?
+       *
+       * @see {@link https://bugs.chromium.org/p/chromium/issues/detail?id=661311#c1}
+       *  "If the extension has access to inject scripts into Tab, then we can return the url
+       *   of Tab (because the extension could just inject a script to message the location.href)."
+       */
+      url: '<all_urls>',
+      windowType: 'normal',
+    })
+    .then((result) => {
+      checkForLastErrorAndLog();
+      return result;
+    })
+    .catch(() => {
+      checkForLastErrorAndLog();
+    });
+
+  /** @todo we should only sendMessage to dapp tabs, not all tabs. */
+  for (const tab of tabs) {
+    browser.tabs
+      .sendMessage(tab.id, {
+        name: EXTENSION_MESSAGES.READY,
+      })
+      .then(() => {
+        checkForLastErrorAndLog();
+      })
+      .catch(() => {
+        // An error may happen if the contentscript is blocked from loading,
+        // and thus there is no runtime.onMessage handler to listen to the message.
+        checkForLastErrorAndLog();
+      });
+  }
+};
+
 if (isManifestV3) {
   browser.runtime.onConnect.addListener(initApp);
+  sendReadyMessageToTabs();
 } else {
   // initialization flow
   initialize().catch(log.error);
@@ -439,6 +495,14 @@ function setupController(initState, initLangCode, remoteSourcePort) {
         // This ensures that UI is initialised only after background is ready
         // It fixes the issue of blank screen coming when extension is loaded, the issue is very frequent in MV3
         remotePort.postMessage({ name: 'CONNECTION_READY' });
+
+        // If we get a WORKER_KEEP_ALIVE message, we respond with an ACK
+        remotePort.onMessage.addListener((message) => {
+          if (message.name === WORKER_KEEP_ALIVE_MESSAGE) {
+            // To test un-comment this line and wait for 1 minute. An error should be shown on MetaMask UI.
+            remotePort.postMessage({ name: ACK_KEEP_ALIVE_MESSAGE });
+          }
+        });
       }
 
       if (processName === ENVIRONMENT_TYPE_POPUP) {
@@ -742,7 +806,7 @@ browser.runtime.onInstalled.addListener(({ reason }) => {
 });
 
 function setupSentryGetStateGlobal(store) {
-  global.sentryHooks.getSentryState = function () {
+  global.stateHooks.getSentryState = function () {
     const fullState = store.getState();
     const debugState = maskObject({ metamask: fullState }, SENTRY_STATE);
     return {
diff --git a/app/scripts/contentscript.js b/app/scripts/contentscript.js
index dcaa6c59b..c2bcbad5e 100644
--- a/app/scripts/contentscript.js
+++ b/app/scripts/contentscript.js
@@ -5,6 +5,11 @@ import browser from 'webextension-polyfill';
 import PortStream from 'extension-port-stream';
 import { obj as createThoughStream } from 'through2';
 
+import { EXTENSION_MESSAGES, MESSAGE_TYPE } from '../../shared/constants/app';
+import {
+  checkForLastError,
+  checkForLastErrorAndWarn,
+} from '../../shared/modules/browser-runtime.utils';
 import { isManifestV3 } from '../../shared/modules/mv3.utils';
 import shouldInjectProvider from '../../shared/modules/provider-injection';
 
@@ -44,9 +49,6 @@ let legacyExtMux,
   legacyPagePublicConfigChannel,
   notificationTransformStream;
 
-const WORKER_KEEP_ALIVE_INTERVAL = 1000;
-const WORKER_KEEP_ALIVE_MESSAGE = 'WORKER_KEEP_ALIVE_MESSAGE';
-
 const phishingPageUrl = new URL(process.env.PHISHING_WARNING_PAGE_URL);
 
 let phishingExtChannel,
@@ -82,6 +84,51 @@ function injectScript(content) {
   }
 }
 
+/**
+ * SERVICE WORKER LOGIC
+ */
+
+const WORKER_KEEP_ALIVE_INTERVAL = 1000;
+const WORKER_KEEP_ALIVE_MESSAGE = 'WORKER_KEEP_ALIVE_MESSAGE';
+const TIME_45_MIN_IN_MS = 45 * 60 * 1000;
+
+/**
+ * Don't run the keep-worker-alive logic for JSON-RPC methods called on initial load.
+ * This is to prevent the service worker from being kept alive when accounts are not
+ * connected to the dapp or when the user is not interacting with the extension.
+ * The keep-alive logic should not work for non-dapp pages.
+ */
+const IGNORE_INIT_METHODS_FOR_KEEP_ALIVE = [
+  MESSAGE_TYPE.GET_PROVIDER_STATE,
+  MESSAGE_TYPE.SEND_METADATA,
+];
+
+let keepAliveInterval;
+let keepAliveTimer;
+
+/**
+ * Running this method will ensure the service worker is kept alive for 45 minutes.
+ * The first message is sent immediately and subsequent messages are sent at an
+ * interval of WORKER_KEEP_ALIVE_INTERVAL.
+ */
+const runWorkerKeepAliveInterval = () => {
+  clearTimeout(keepAliveTimer);
+
+  keepAliveTimer = setTimeout(() => {
+    clearInterval(keepAliveInterval);
+  }, TIME_45_MIN_IN_MS);
+
+  clearInterval(keepAliveInterval);
+
+  browser.runtime.sendMessage({ name: WORKER_KEEP_ALIVE_MESSAGE });
+
+  keepAliveInterval = setInterval(() => {
+    if (browser.runtime.id) {
+      browser.runtime.sendMessage({ name: WORKER_KEEP_ALIVE_MESSAGE });
+    }
+  }, WORKER_KEEP_ALIVE_INTERVAL);
+};
+
 /**
  * PHISHING STREAM LOGIC
  */
@@ -93,6 +140,14 @@ function setupPhishingPageStreams() {
     target: PHISHING_WARNING_PAGE,
   });
 
+  if (isManifestV3) {
+    phishingPageStream.on('data', ({ data: { method } }) => {
+      if (!IGNORE_INIT_METHODS_FOR_KEEP_ALIVE.includes(method)) {
+        runWorkerKeepAliveInterval();
+      }
+    });
+  }
+
   // create and connect channel muxers
   // so we can handle the channels individually
   phishingPageMux = new ObjectMultiplex();
@@ -142,6 +197,9 @@ const setupPhishingExtStreams = () => {
       error,
     ),
   );
+
+  // eslint-disable-next-line no-use-before-define
+  phishingExtPort.onDisconnect.addListener(onDisconnectDestroyPhishingStreams);
 };
 
 /** Destroys all of the phishing extension streams */
@@ -153,19 +211,42 @@ const destroyPhishingExtStreams = () => {
 
   phishingExtChannel.removeAllListeners();
   phishingExtChannel.destroy();
+
+  phishingExtStream = null;
 };
 
 /**
- * Resets the extension stream with new streams to channel with the phishing page streams,
- * and creates a new event listener to the reestablished extension port.
+ * This listener destroys the phishing extension streams when the extension port is disconnected,
+ * so that streams may be re-established later the phishing extension port is reconnected.
  */
-const resetPhishingStreamAndListeners = () => {
-  phishingExtPort.onDisconnect.removeListener(resetPhishingStreamAndListeners);
+const onDisconnectDestroyPhishingStreams = () => {
+  checkForLastErrorAndWarn();
+
+  phishingExtPort.onDisconnect.removeListener(
+    onDisconnectDestroyPhishingStreams,
+  );
 
   destroyPhishingExtStreams();
-  setupPhishingExtStreams();
+};
 
-  phishingExtPort.onDisconnect.addListener(resetPhishingStreamAndListeners);
+/**
+ * When the extension background is loaded it sends the EXTENSION_MESSAGES.READY message to the browser tabs.
+ * This listener/callback receives the message to set up the streams after service worker in-activity.
+ *
+ * @param {object} msg
+ * @param {string} msg.name - custom property and name to identify the message received
+ * @returns {Promise|undefined}
+ */
+const onMessageSetUpPhishingStreams = (msg) => {
+  if (msg.name === EXTENSION_MESSAGES.READY) {
+    if (!phishingExtStream) {
+      setupPhishingExtStreams();
+    }
+    return Promise.resolve(
+      `MetaMask: handled "${EXTENSION_MESSAGES.READY}" for phishing streams`,
+    );
+  }
+  return undefined;
 };
 
 /**
@@ -177,7 +258,7 @@ const initPhishingStreams = () => {
   setupPhishingPageStreams();
   setupPhishingExtStreams();
 
-  phishingExtPort.onDisconnect.addListener(resetPhishingStreamAndListeners);
+  browser.runtime.onMessage.addListener(onMessageSetUpPhishingStreams);
 };
 
 /**
@@ -191,6 +272,14 @@ const setupPageStreams = () => {
     target: INPAGE,
   });
 
+  if (isManifestV3) {
+    pageStream.on('data', ({ data: { method } }) => {
+      if (!IGNORE_INIT_METHODS_FOR_KEEP_ALIVE.includes(method)) {
+        runWorkerKeepAliveInterval();
+      }
+    });
+  }
+
   // create and connect channel muxers
   // so we can handle the channels individually
   pageMux = new ObjectMultiplex();
@@ -231,7 +320,8 @@ const setupExtensionStreams = () => {
   extensionPhishingStream = extensionMux.createStream('phishing');
   extensionPhishingStream.once('data', redirectToPhishingWarning);
 
-  notifyInpageOfExtensionStreamConnect();
+  // eslint-disable-next-line no-use-before-define
+  extensionPort.onDisconnect.addListener(onDisconnectDestroyStreams);
 };
 
 /** Destroys all of the extension streams */
@@ -243,10 +333,13 @@ const destroyExtensionStreams = () => {
 
   extensionChannel.removeAllListeners();
   extensionChannel.destroy();
+
+  extensionStream = null;
 };
 
 /**
  * LEGACY STREAM LOGIC
+ * TODO:LegacyProvider: Delete
  */
 
 // TODO:LegacyProvider: Delete
@@ -256,6 +349,14 @@ const setupLegacyPageStreams = () => {
     target: LEGACY_INPAGE,
   });
 
+  if (isManifestV3) {
+    legacyPageStream.on('data', ({ data: { method } }) => {
+      if (!IGNORE_INIT_METHODS_FOR_KEEP_ALIVE.includes(method)) {
+        runWorkerKeepAliveInterval();
+      }
+    });
+  }
+
   legacyPageMux = new ObjectMultiplex();
   legacyPageMux.setMaxListeners(25);
 
@@ -331,19 +432,47 @@ const destroyLegacyExtensionStreams = () => {
 };
 
 /**
- * Resets the extension stream with new streams to channel with the in page streams,
- * and creates a new event listener to the reestablished extension port.
+ * When the extension background is loaded it sends the EXTENSION_MESSAGES.READY message to the browser tabs.
+ * This listener/callback receives the message to set up the streams after service worker in-activity.
+ *
+ * @param {object} msg
+ * @param {string} msg.name - custom property and name to identify the message received
+ * @returns {Promise|undefined}
  */
-const resetStreamAndListeners = () => {
-  extensionPort.onDisconnect.removeListener(resetStreamAndListeners);
+const onMessageSetUpExtensionStreams = (msg) => {
+  if (msg.name === EXTENSION_MESSAGES.READY) {
+    if (!extensionStream) {
+      setupExtensionStreams();
+      setupLegacyExtensionStreams();
+    }
+    return Promise.resolve(`MetaMask: handled ${EXTENSION_MESSAGES.READY}`);
+  }
+  return undefined;
+};
+
+/**
+ * This listener destroys the extension streams when the extension port is disconnected,
+ * so that streams may be re-established later when the extension port is reconnected.
+ */
+const onDisconnectDestroyStreams = () => {
+  const err = checkForLastError();
+
+  extensionPort.onDisconnect.removeListener(onDisconnectDestroyStreams);
 
   destroyExtensionStreams();
-  setupExtensionStreams();
-
   destroyLegacyExtensionStreams();
-  setupLegacyExtensionStreams();
 
-  extensionPort.onDisconnect.addListener(resetStreamAndListeners);
+  /**
+   * If an error is found, reset the streams. When running two or more dapps, resetting the service
+   * worker may cause the error, "Error: Could not establish connection. Receiving end does not
+   * exist.", due to a race-condition. The disconnect event may be called by runtime.connect which
+   * may cause issues. We suspect that this is a chromium bug as this event should only be called
+   * once the port and connections are ready. Delay time is arbitrary.
+   */
+  if (err) {
+    console.warn(`${err} Resetting the streams.`);
+    setTimeout(setupExtensionStreams, 1000);
+  }
 };
 
 /**
@@ -353,13 +482,12 @@ const resetStreamAndListeners = () => {
  */
 const initStreams = () => {
   setupPageStreams();
-  setupExtensionStreams();
-
-  // TODO:LegacyProvider: Delete
   setupLegacyPageStreams();
+
+  setupExtensionStreams();
   setupLegacyExtensionStreams();
 
-  extensionPort.onDisconnect.addListener(resetStreamAndListeners);
+  browser.runtime.onMessage.addListener(onMessageSetUpExtensionStreams);
 };
 
 // TODO:LegacyProvider: Delete
@@ -389,26 +517,6 @@ function logStreamDisconnectWarning(remoteLabel, error) {
   );
 }
 
-/**
- * The function send message to inpage to notify it of extension stream connection
- */
-function notifyInpageOfExtensionStreamConnect() {
-  window.postMessage(
-    {
-      target: INPAGE, // the post-message-stream "target"
-      data: {
-        // this object gets passed to obj-multiplex
-        name: PROVIDER, // the obj-multiplex channel name
-        data: {
-          jsonrpc: '2.0',
-          method: 'METAMASK_EXTENSION_STREAM_CONNECT',
-        },
-      },
-    },
-    window.location.origin,
-  );
-}
-
 /**
  * This function must ONLY be called in pump destruction/close callbacks.
  * Notifies the inpage context that streams have failed, via window.postMessage.
@@ -446,12 +554,6 @@ function redirectToPhishingWarning(data = {}) {
   window.location.href = `${baseUrl}#${querystring}`;
 }
 
-const initKeepWorkerAlive = () => {
-  setInterval(() => {
-    browser.runtime.sendMessage({ name: WORKER_KEEP_ALIVE_MESSAGE });
-  }, WORKER_KEEP_ALIVE_INTERVAL);
-};
-
 const start = () => {
   const isDetectedPhishingSite =
     window.location.origin === phishingPageUrl.origin &&
@@ -463,9 +565,7 @@ const start = () => {
   }
 
   if (shouldInjectProvider()) {
-    if (isManifestV3) {
-      initKeepWorkerAlive();
-    } else {
+    if (!isManifestV3) {
       injectScript(inpageBundle);
     }
     initStreams();
diff --git a/app/scripts/controllers/app-state.js b/app/scripts/controllers/app-state.js
index 0cf5fc24b..9b62cf3e2 100644
--- a/app/scripts/controllers/app-state.js
+++ b/app/scripts/controllers/app-state.js
@@ -4,6 +4,7 @@ import { METAMASK_CONTROLLER_EVENTS } from '../metamask-controller';
 import { MINUTE } from '../../../shared/constants/time';
 import { AUTO_LOCK_TIMEOUT_ALARM } from '../../../shared/constants/alarms';
 import { isManifestV3 } from '../../../shared/modules/mv3.utils';
+import { isBeta } from '../../../ui/helpers/utils/build-types';
 
 export default class AppStateController extends EventEmitter {
   /**
@@ -36,6 +37,7 @@ export default class AppStateController extends EventEmitter {
       enableEIP1559V2NoticeDismissed: false,
       showTestnetMessageInDropdown: true,
       showPortfolioTooltip: true,
+      showBetaHeader: isBeta(),
       trezorModel: null,
       ...initState,
       qrHardware: {},
@@ -191,11 +193,9 @@ export default class AppStateController extends EventEmitter {
     const { timeoutMinutes } = this.store.getState();
 
     if (this.timer) {
-      if (isManifestV3) {
-        chrome.alarms.clear(AUTO_LOCK_TIMEOUT_ALARM);
-      } else {
-        clearTimeout(this.timer);
-      }
+      clearTimeout(this.timer);
+    } else if (isManifestV3) {
+      chrome.alarms.clear(AUTO_LOCK_TIMEOUT_ALARM);
     }
 
     if (!timeoutMinutes) {
@@ -207,16 +207,11 @@ export default class AppStateController extends EventEmitter {
         delayInMinutes: timeoutMinutes,
         periodInMinutes: timeoutMinutes,
       });
-      chrome.alarms.onAlarm.addListener(() => {
-        chrome.alarms.getAll((alarms) => {
-          const hasAlarm = alarms.find(
-            (alarm) => alarm.name === AUTO_LOCK_TIMEOUT_ALARM,
-          );
-          if (hasAlarm) {
-            this.onInactiveTimeout();
-            chrome.alarms.clear(AUTO_LOCK_TIMEOUT_ALARM);
-          }
-        });
+      chrome.alarms.onAlarm.addListener((alarmInfo) => {
+        if (alarmInfo.name === AUTO_LOCK_TIMEOUT_ALARM) {
+          this.onInactiveTimeout();
+          chrome.alarms.clear(AUTO_LOCK_TIMEOUT_ALARM);
+        }
       });
     } else {
       this.timer = setTimeout(
@@ -291,6 +286,15 @@ export default class AppStateController extends EventEmitter {
     this.store.updateState({ showPortfolioTooltip });
   }
 
+  /**
+   * Sets whether the beta notification heading on the home page
+   *
+   * @param showBetaHeader
+   */
+  setShowBetaHeader(showBetaHeader) {
+    this.store.updateState({ showBetaHeader });
+  }
+
   /**
    * Sets a property indicating the model of the user's Trezor hardware wallet
    *
diff --git a/app/scripts/controllers/metametrics.js b/app/scripts/controllers/metametrics.js
index 212b9a908..1c87c6181 100644
--- a/app/scripts/controllers/metametrics.js
+++ b/app/scripts/controllers/metametrics.js
@@ -20,7 +20,7 @@ import {
 import { SECOND } from '../../../shared/constants/time';
 import { isManifestV3 } from '../../../shared/modules/mv3.utils';
 import { METAMETRICS_FINALIZE_EVENT_FRAGMENT_ALARM } from '../../../shared/constants/alarms';
-import { checkAlarmExists } from '../lib/util';
+import { checkAlarmExists, generateRandomId, isValidDate } from '../lib/util';
 
 const EXTENSION_UNINSTALL_URL = 'https://metamask.io/uninstalled';
 
@@ -32,6 +32,22 @@ const defaultCaptureException = (err) => {
   });
 };
 
+// The function is used to build a unique messageId for segment messages
+// It uses actionId and uniqueIdentifier from event if present
+const buildUniqueMessageId = (args) => {
+  let messageId = '';
+  if (args.uniqueIdentifier) {
+    messageId += `${args.uniqueIdentifier}-`;
+  }
+  if (args.actionId) {
+    messageId += args.actionId;
+  }
+  if (messageId.length) {
+    return messageId;
+  }
+  return generateRandomId();
+};
+
 const exceptionsToFilter = {
   [`You must pass either an "anonymousId" or a "userId".`]: true,
 };
@@ -60,6 +76,8 @@ const exceptionsToFilter = {
  * @property {Array} [eventsBeforeMetricsOptIn] - Array of queued events added before
  *  a user opts into metrics.
  * @property {object} [traits] - Traits that are not derived from other state keys.
+ * @property {Record<string any>} [previousUserTraits] - The user traits the last
+ *  time they were computed.
  */
 
 export default class MetaMetricsController {
@@ -110,6 +128,7 @@ export default class MetaMetricsController {
     this.environment = environment;
 
     const abandonedFragments = omitBy(initState?.fragments, 'persist');
+    const segmentApiCalls = initState?.segmentApiCalls || {};
 
     this.store = new ObservableStore({
       participateInMetaMetrics: null,
@@ -120,6 +139,9 @@ export default class MetaMetricsController {
       fragments: {
         ...initState?.fragments,
       },
+      segmentApiCalls: {
+        ...segmentApiCalls,
+      },
     });
 
     preferencesStore.subscribe(({ currentLocale }) => {
@@ -142,6 +164,15 @@ export default class MetaMetricsController {
       this.finalizeEventFragment(fragment.id, { abandoned: true });
     });
 
+    // Code below submits any pending segmentApiCalls to Segment if/when the controller is re-instantiated
+    if (isManifestV3) {
+      Object.values(segmentApiCalls).forEach(
+        ({ eventType, payload, callback }) => {
+          this._submitSegmentAPICall(eventType, payload, callback);
+        },
+      );
+    }
+
     // Close out event fragments that were created but not progressed. An
     // interval is used to routinely check if a fragment has not been updated
     // within the fragment's timeout window. When creating a new event fragment
@@ -162,17 +193,10 @@ export default class MetaMetricsController {
           });
         }
       });
-      chrome.alarms.onAlarm.addListener(() => {
-        chrome.alarms.getAll((alarms) => {
-          const hasAlarm = checkAlarmExists(
-            alarms,
-            METAMETRICS_FINALIZE_EVENT_FRAGMENT_ALARM,
-          );
-
-          if (hasAlarm) {
-            this.finalizeAbandonedFragments();
-          }
-        });
+      chrome.alarms.onAlarm.addListener((alarmInfo) => {
+        if (alarmInfo.name === METAMETRICS_FINALIZE_EVENT_FRAGMENT_ALARM) {
+          this.finalizeAbandonedFragments();
+        }
       });
     } else {
       setInterval(() => {
@@ -225,14 +249,6 @@ export default class MetaMetricsController {
       );
     }
 
-    const existingFragment = this.getExistingEventFragment(
-      options.actionId,
-      options.uniqueIdentifier,
-    );
-    if (existingFragment) {
-      return existingFragment;
-    }
-
     const { fragments } = this.store.getState();
 
     const id = options.uniqueIdentifier ?? uuidv4();
@@ -260,6 +276,8 @@ export default class MetaMetricsController {
         value: fragment.value,
         currency: fragment.currency,
         environmentType: fragment.environmentType,
+        actionId: options.actionId,
+        uniqueIdentifier: options.uniqueIdentifier,
       });
     }
 
@@ -281,26 +299,6 @@ export default class MetaMetricsController {
     return fragment;
   }
 
-  /**
-   * Returns the fragment stored in memory with provided id or undefined if it
-   * does not exist.
-   *
-   * @param {string} actionId - actionId passed from UI
-   * @param {string} uniqueIdentifier - uniqueIdentifier of the event
-   * @returns {[MetaMetricsEventFragment]}
-   */
-  getExistingEventFragment(actionId, uniqueIdentifier) {
-    const { fragments } = this.store.getState();
-
-    const existingFragment = Object.values(fragments).find(
-      (fragment) =>
-        fragment.actionId === actionId &&
-        fragment.uniqueIdentifier === uniqueIdentifier,
-    );
-
-    return existingFragment;
-  }
-
   /**
    * Updates an event fragment in state
    *
@@ -361,6 +359,8 @@ export default class MetaMetricsController {
       value: fragment.value,
       currency: fragment.currency,
       environmentType: fragment.environmentType,
+      actionId: fragment.actionId,
+      uniqueIdentifier: fragment.uniqueIdentifier,
     });
     const { fragments } = this.store.getState();
     delete fragments[id];
@@ -447,7 +447,10 @@ export default class MetaMetricsController {
    * @param {MetaMetricsPageOptions} [options] - options for handling the page
    *  view
    */
-  trackPage({ name, params, environmentType, page, referrer }, options) {
+  trackPage(
+    { name, params, environmentType, page, referrer, actionId },
+    options,
+  ) {
     try {
       if (this.state.participateInMetaMetrics === false) {
         return;
@@ -462,7 +465,8 @@ export default class MetaMetricsController {
       const { metaMetricsId } = this.state;
       const idTrait = metaMetricsId ? 'userId' : 'anonymousId';
       const idValue = metaMetricsId ?? METAMETRICS_ANONYMOUS_ID;
-      this.segment.page({
+      this._submitSegmentAPICall('page', {
+        messageId: buildUniqueMessageId({ actionId }),
         [idTrait]: idValue,
         name,
         properties: {
@@ -653,6 +657,7 @@ export default class MetaMetricsController {
     } = rawPayload;
     return {
       event,
+      messageId: buildUniqueMessageId(rawPayload),
       properties: {
         // These values are omitted from properties because they have special meaning
         // in segment. https://segment.com/docs/connections/spec/track/#properties.
@@ -682,7 +687,7 @@ export default class MetaMetricsController {
    * @returns {MetaMetricsTraits | null} traits that have changed since last update
    */
   _buildUserTraitsObject(metamaskState) {
-    const { traits } = this.store.getState();
+    const { traits, previousUserTraits } = this.store.getState();
     /** @type {MetaMetricsTraits} */
     const currentTraits = {
       [TRAITS.ADDRESS_BOOK_ENTRIES]: sum(
@@ -703,15 +708,14 @@ export default class MetaMetricsController {
           },
           [],
         ),
-      [TRAITS.NFT_AUTODETECTION_ENABLED]: metamaskState.useCollectibleDetection,
+      [TRAITS.NFT_AUTODETECTION_ENABLED]: metamaskState.useNftDetection,
       [TRAITS.NUMBER_OF_ACCOUNTS]: Object.values(metamaskState.identities)
         .length,
       [TRAITS.NUMBER_OF_NFT_COLLECTIONS]: this._getAllUniqueNFTAddressesLength(
-        metamaskState.allCollectibles,
+        metamaskState.allNfts,
       ),
-      [TRAITS.NUMBER_OF_NFTS]: this._getAllNFTsFlattened(
-        metamaskState.allCollectibles,
-      ).length,
+      [TRAITS.NUMBER_OF_NFTS]: this._getAllNFTsFlattened(metamaskState.allNfts)
+        .length,
       [TRAITS.NUMBER_OF_TOKENS]: this._getNumberOfTokens(metamaskState),
       [TRAITS.OPENSEA_API_ENABLED]: metamaskState.openSeaEnabled,
       [TRAITS.THREE_BOX_ENABLED]: false, // deprecated, hard-coded as false
@@ -719,17 +723,17 @@ export default class MetaMetricsController {
       [TRAITS.TOKEN_DETECTION_ENABLED]: metamaskState.useTokenDetection,
     };
 
-    if (!this.previousTraits) {
-      this.previousTraits = currentTraits;
+    if (!previousUserTraits) {
+      this.store.updateState({ previousUserTraits: currentTraits });
       return currentTraits;
     }
 
-    if (this.previousTraits && !isEqual(this.previousTraits, currentTraits)) {
+    if (previousUserTraits && !isEqual(previousUserTraits, currentTraits)) {
       const updates = pickBy(
         currentTraits,
-        (v, k) => !isEqual(this.previousTraits[k], v),
+        (v, k) => !isEqual(previousUserTraits[k], v),
       );
-      this.previousTraits = currentTraits;
+      this.store.updateState({ previousUserTraits: currentTraits });
       return updates;
     }
 
@@ -762,11 +766,11 @@ export default class MetaMetricsController {
    * Returns an array of all of the collectibles/NFTs the user
    * possesses across all networks and accounts.
    *
-   * @param {object} allCollectibles
+   * @param {object} allNfts
    * @returns {[]}
    */
-  _getAllNFTsFlattened = memoize((allCollectibles = {}) => {
-    return Object.values(allCollectibles).reduce((result, chainNFTs) => {
+  _getAllNFTsFlattened = memoize((allNfts = {}) => {
+    return Object.values(allNfts).reduce((result, chainNFTs) => {
       return result.concat(...Object.values(chainNFTs));
     }, []);
   });
@@ -775,11 +779,11 @@ export default class MetaMetricsController {
    * Returns the number of unique collectible/NFT addresses the user
    * possesses across all networks and accounts.
    *
-   * @param {object} allCollectibles
+   * @param {object} allNfts
    * @returns {number}
    */
-  _getAllUniqueNFTAddressesLength(allCollectibles = {}) {
-    const allNFTAddresses = this._getAllNFTsFlattened(allCollectibles).map(
+  _getAllUniqueNFTAddressesLength(allNfts = {}) {
+    const allNFTAddresses = this._getAllNFTsFlattened(allNfts).map(
       (nft) => nft.address,
     );
     const uniqueAddresses = new Set(allNFTAddresses);
@@ -815,7 +819,7 @@ export default class MetaMetricsController {
     }
 
     try {
-      this.segment.identify({
+      this._submitSegmentAPICall('identify', {
         userId: metaMetricsId,
         traits: userTraits,
       });
@@ -944,10 +948,49 @@ export default class MetaMetricsController {
         return resolve();
       };
 
-      this.segment.track(payload, callback);
+      this._submitSegmentAPICall('track', payload, callback);
       if (flushImmediately) {
         this.segment.flush();
       }
     });
   }
+
+  // Method below submits the request to analytics SDK.
+  // It will also add event to controller store
+  // and pass a callback to remove it from store once request is submitted to segment
+  // Saving segmentApiCalls in controller store in MV3 ensures that events are tracked
+  // even if service worker terminates before events are submiteed to segment.
+  _submitSegmentAPICall(eventType, payload, callback) {
+    const messageId = payload.messageId || generateRandomId();
+    let timestamp = new Date();
+    if (payload.timestamp) {
+      const payloadDate = new Date(payload.timestamp);
+      if (isValidDate(payloadDate)) {
+        timestamp = payloadDate;
+      }
+    }
+    const modifiedPayload = { ...payload, messageId, timestamp };
+    this.store.updateState({
+      segmentApiCalls: {
+        ...this.store.getState().segmentApiCalls,
+        [messageId]: {
+          eventType,
+          payload: {
+            ...modifiedPayload,
+            timestamp: modifiedPayload.timestamp.toString(),
+          },
+          callback,
+        },
+      },
+    });
+    const modifiedCallback = (result) => {
+      const { segmentApiCalls } = this.store.getState();
+      delete segmentApiCalls[messageId];
+      this.store.updateState({
+        segmentApiCalls,
+      });
+      return callback?.(result);
+    };
+    this.segment[eventType](modifiedPayload, modifiedCallback);
+  }
 }
diff --git a/app/scripts/controllers/metametrics.test.js b/app/scripts/controllers/metametrics.test.js
index 1925da7a9..297a21912 100644
--- a/app/scripts/controllers/metametrics.test.js
+++ b/app/scripts/controllers/metametrics.test.js
@@ -9,6 +9,7 @@ import {
 } from '../../../shared/constants/metametrics';
 import waitUntilCalled from '../../../test/lib/wait-until-called';
 import { CHAIN_IDS, CURRENCY_SYMBOLS } from '../../../shared/constants/network';
+import * as Utils from '../lib/util';
 import MetaMetricsController from './metametrics';
 import { NETWORK_EVENTS } from './network';
 
@@ -19,6 +20,7 @@ const NETWORK = 'Mainnet';
 const FAKE_CHAIN_ID = '0x1338';
 const LOCALE = 'en_US';
 const TEST_META_METRICS_ID = '0xabc';
+const DUMMY_ACTION_ID = 'DUMMY_ACTION_ID';
 
 const MOCK_TRAITS = {
   test_boolean: true,
@@ -124,9 +126,10 @@ function getMetaMetricsController({
   metaMetricsId = TEST_META_METRICS_ID,
   preferencesStore = getMockPreferencesStore(),
   networkController = getMockNetworkController(),
+  segmentInstance,
 } = {}) {
   return new MetaMetricsController({
-    segment,
+    segment: segmentInstance || segment,
     getNetworkIdentifier:
       networkController.getNetworkIdentifier.bind(networkController),
     getCurrentChainId:
@@ -145,10 +148,17 @@ function getMetaMetricsController({
         testid: SAMPLE_PERSISTED_EVENT,
         testid2: SAMPLE_NON_PERSISTED_EVENT,
       },
+      events: {},
     },
   });
 }
 describe('MetaMetricsController', function () {
+  const now = new Date();
+  let clock;
+  beforeEach(function () {
+    clock = sinon.useFakeTimers(now.getTime());
+    sinon.stub(Utils, 'generateRandomId').returns('DUMMY_RANDOM_ID');
+  });
   describe('constructor', function () {
     it('should properly initialize', function () {
       const mock = sinon.mock(segment);
@@ -163,6 +173,8 @@ describe('MetaMetricsController', function () {
             ...DEFAULT_EVENT_PROPERTIES,
             test: true,
           },
+          messageId: Utils.generateRandomId(),
+          timestamp: new Date(),
         });
       const metaMetricsController = getMetaMetricsController();
       assert.strictEqual(metaMetricsController.version, VERSION);
@@ -233,15 +245,18 @@ describe('MetaMetricsController', function () {
       });
       const mock = sinon.mock(segment);
 
-      mock
-        .expects('identify')
-        .once()
-        .withArgs({ userId: TEST_META_METRICS_ID, traits: MOCK_TRAITS });
+      mock.expects('identify').once().withArgs({
+        userId: TEST_META_METRICS_ID,
+        traits: MOCK_TRAITS,
+        messageId: Utils.generateRandomId(),
+        timestamp: new Date(),
+      });
 
       metaMetricsController.identify({
         ...MOCK_TRAITS,
         ...MOCK_INVALID_TRAITS,
       });
+
       mock.verify();
     });
 
@@ -263,6 +278,8 @@ describe('MetaMetricsController', function () {
           traits: {
             test_date: mockDateISOString,
           },
+          messageId: Utils.generateRandomId(),
+          timestamp: new Date(),
         });
 
       metaMetricsController.identify({
@@ -358,6 +375,8 @@ describe('MetaMetricsController', function () {
             test: 1,
             ...DEFAULT_EVENT_PROPERTIES,
           },
+          messageId: Utils.generateRandomId(),
+          timestamp: new Date(),
         });
       metaMetricsController.submitEvent(
         {
@@ -388,6 +407,8 @@ describe('MetaMetricsController', function () {
             test: 1,
             ...DEFAULT_EVENT_PROPERTIES,
           },
+          messageId: Utils.generateRandomId(),
+          timestamp: new Date(),
         });
       metaMetricsController.submitEvent(
         {
@@ -417,6 +438,8 @@ describe('MetaMetricsController', function () {
             legacy_event: true,
             ...DEFAULT_EVENT_PROPERTIES,
           },
+          messageId: Utils.generateRandomId(),
+          timestamp: new Date(),
         });
       metaMetricsController.submitEvent(
         {
@@ -439,12 +462,14 @@ describe('MetaMetricsController', function () {
         .once()
         .withArgs({
           event: 'Fake Event',
-          userId: TEST_META_METRICS_ID,
-          context: DEFAULT_TEST_CONTEXT,
           properties: {
             test: 1,
             ...DEFAULT_EVENT_PROPERTIES,
           },
+          context: DEFAULT_TEST_CONTEXT,
+          userId: TEST_META_METRICS_ID,
+          messageId: Utils.generateRandomId(),
+          timestamp: new Date(),
         });
       metaMetricsController.submitEvent({
         event: 'Fake Event',
@@ -519,6 +544,8 @@ describe('MetaMetricsController', function () {
             foo: 'bar',
             ...DEFAULT_EVENT_PROPERTIES,
           },
+          messageId: Utils.generateRandomId(),
+          timestamp: new Date(),
         }),
       );
       assert.ok(
@@ -527,6 +554,8 @@ describe('MetaMetricsController', function () {
           userId: TEST_META_METRICS_ID,
           context: DEFAULT_TEST_CONTEXT,
           properties: DEFAULT_EVENT_PROPERTIES,
+          messageId: Utils.generateRandomId(),
+          timestamp: new Date(),
         }),
       );
     });
@@ -547,6 +576,8 @@ describe('MetaMetricsController', function () {
             params: null,
             ...DEFAULT_PAGE_PROPERTIES,
           },
+          messageId: Utils.generateRandomId(),
+          timestamp: new Date(),
         });
       metaMetricsController.trackPage({
         name: 'home',
@@ -590,6 +621,8 @@ describe('MetaMetricsController', function () {
             params: null,
             ...DEFAULT_PAGE_PROPERTIES,
           },
+          messageId: Utils.generateRandomId(),
+          timestamp: new Date(),
         });
       metaMetricsController.trackPage(
         {
@@ -602,6 +635,50 @@ describe('MetaMetricsController', function () {
       );
       mock.verify();
     });
+
+    it('multiple trackPage call with same actionId should result in same messageId being sent to segment', function () {
+      const mock = sinon.mock(segment);
+      const metaMetricsController = getMetaMetricsController({
+        preferencesStore: getMockPreferencesStore({
+          participateInMetaMetrics: null,
+        }),
+      });
+      mock
+        .expects('page')
+        .twice()
+        .withArgs({
+          name: 'home',
+          userId: TEST_META_METRICS_ID,
+          context: DEFAULT_TEST_CONTEXT,
+          properties: {
+            params: null,
+            ...DEFAULT_PAGE_PROPERTIES,
+          },
+          messageId: DUMMY_ACTION_ID,
+          timestamp: new Date(),
+        });
+      metaMetricsController.trackPage(
+        {
+          name: 'home',
+          params: null,
+          actionId: DUMMY_ACTION_ID,
+          environmentType: ENVIRONMENT_TYPE_BACKGROUND,
+          page: METAMETRICS_BACKGROUND_PAGE_OBJECT,
+        },
+        { isOptInPath: true },
+      );
+      metaMetricsController.trackPage(
+        {
+          name: 'home',
+          params: null,
+          actionId: DUMMY_ACTION_ID,
+          environmentType: ENVIRONMENT_TYPE_BACKGROUND,
+          page: METAMETRICS_BACKGROUND_PAGE_OBJECT,
+        },
+        { isOptInPath: true },
+      );
+      mock.verify();
+    });
   });
 
   describe('_buildUserTraitsObject', function () {
@@ -640,7 +717,7 @@ describe('MetaMetricsController', function () {
           [CHAIN_IDS.MAINNET]: [{ address: '0x' }],
           [CHAIN_IDS.GOERLI]: [{ address: '0x' }, { address: '0x0' }],
         },
-        allCollectibles: {
+        allNfts: {
           '0xac706cE8A9BF27Afecf080fB298d0ee13cfb978A': {
             56: [
               {
@@ -675,7 +752,7 @@ describe('MetaMetricsController', function () {
         identities: [{}, {}],
         ledgerTransportType: 'web-hid',
         openSeaEnabled: true,
-        useCollectibleDetection: false,
+        useNftDetection: false,
         theme: 'default',
         useTokenDetection: true,
       });
@@ -713,7 +790,7 @@ describe('MetaMetricsController', function () {
         ledgerTransportType: 'web-hid',
         openSeaEnabled: true,
         identities: [{}, {}],
-        useCollectibleDetection: false,
+        useNftDetection: false,
         theme: 'default',
         useTokenDetection: true,
       });
@@ -733,7 +810,7 @@ describe('MetaMetricsController', function () {
         ledgerTransportType: 'web-hid',
         openSeaEnabled: false,
         identities: [{}, {}, {}],
-        useCollectibleDetection: false,
+        useNftDetection: false,
         theme: 'default',
         useTokenDetection: true,
       });
@@ -761,7 +838,7 @@ describe('MetaMetricsController', function () {
         ledgerTransportType: 'web-hid',
         openSeaEnabled: true,
         identities: [{}, {}],
-        useCollectibleDetection: true,
+        useNftDetection: true,
         theme: 'default',
         useTokenDetection: true,
       });
@@ -779,7 +856,7 @@ describe('MetaMetricsController', function () {
         ledgerTransportType: 'web-hid',
         openSeaEnabled: true,
         identities: [{}, {}],
-        useCollectibleDetection: true,
+        useNftDetection: true,
         theme: 'default',
         useTokenDetection: true,
       });
@@ -788,9 +865,35 @@ describe('MetaMetricsController', function () {
     });
   });
 
+  describe('submitting segmentApiCalls to segment SDK', function () {
+    it('should add event to store when submitting to SDK', function () {
+      const metaMetricsController = getMetaMetricsController({});
+      metaMetricsController.trackPage({}, { isOptIn: true });
+      const { segmentApiCalls } = metaMetricsController.store.getState();
+      assert(Object.keys(segmentApiCalls).length > 0);
+    });
+
+    it('should remove event from store when callback is invoked', function () {
+      const segmentInstance = createSegmentMock(2, 10000);
+      const stubFn = (_, cb) => {
+        cb();
+      };
+      sinon.stub(segmentInstance, 'track').callsFake(stubFn);
+      sinon.stub(segmentInstance, 'page').callsFake(stubFn);
+
+      const metaMetricsController = getMetaMetricsController({
+        segmentInstance,
+      });
+      metaMetricsController.trackPage({}, { isOptIn: true });
+      const { segmentApiCalls } = metaMetricsController.store.getState();
+      assert(Object.keys(segmentApiCalls).length === 0);
+    });
+  });
+
   afterEach(function () {
     // flush the queues manually after each test
     segment.flush();
+    clock.restore();
     sinon.restore();
   });
 });
diff --git a/app/scripts/controllers/permissions/specifications.test.js b/app/scripts/controllers/permissions/specifications.test.js
index 4d313b12c..f199e9122 100644
--- a/app/scripts/controllers/permissions/specifications.test.js
+++ b/app/scripts/controllers/permissions/specifications.test.js
@@ -16,7 +16,7 @@ describe('PermissionController specifications', () => {
   describe('caveat specifications', () => {
     it('getCaveatSpecifications returns the expected specifications object', () => {
       const caveatSpecifications = getCaveatSpecifications({});
-      expect(Object.keys(caveatSpecifications)).toHaveLength(4);
+      expect(Object.keys(caveatSpecifications)).toHaveLength(5);
       expect(
         caveatSpecifications[CaveatTypes.restrictReturnedAccounts].type,
       ).toStrictEqual(CaveatTypes.restrictReturnedAccounts);
@@ -30,6 +30,9 @@ describe('PermissionController specifications', () => {
       expect(caveatSpecifications.snapKeyring.type).toStrictEqual(
         SnapCaveatType.SnapKeyring,
       );
+      expect(caveatSpecifications.snapCronjob.type).toStrictEqual(
+        SnapCaveatType.SnapCronjob,
+      );
     });
 
     describe('restrictReturnedAccounts', () => {
diff --git a/app/scripts/controllers/preferences.js b/app/scripts/controllers/preferences.js
index e2bb9045c..569d09750 100644
--- a/app/scripts/controllers/preferences.js
+++ b/app/scripts/controllers/preferences.js
@@ -39,7 +39,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,
-      useCollectibleDetection: false,
+      useNftDetection: false,
       openSeaEnabled: false,
       advancedGasFee: null,
 
@@ -69,6 +69,7 @@ export default class PreferencesController {
         ? LEDGER_TRANSPORT_TYPES.WEBHID
         : LEDGER_TRANSPORT_TYPES.U2F,
       theme: 'light',
+      improvedTokenAllowanceEnabled: false,
       ...opts.initState,
     };
 
@@ -141,12 +142,12 @@ export default class PreferencesController {
   }
 
   /**
-   * Setter for the `useCollectibleDetection` property
+   * Setter for the `useNftDetection` property
    *
-   * @param {boolean} useCollectibleDetection - Whether or not the user prefers to autodetect collectibles.
+   * @param {boolean} useNftDetection - Whether or not the user prefers to autodetect collectibles.
    */
-  setUseCollectibleDetection(useCollectibleDetection) {
-    this.store.updateState({ useCollectibleDetection });
+  setUseNftDetection(useNftDetection) {
+    this.store.updateState({ useNftDetection });
   }
 
   /**
@@ -187,6 +188,17 @@ export default class PreferencesController {
     this.store.updateState({ theme: val });
   }
 
+  /**
+   * Setter for the `improvedTokenAllowanceEnabled` property
+   *
+   * @param improvedTokenAllowanceEnabled
+   */
+  setImprovedTokenAllowanceEnabled(improvedTokenAllowanceEnabled) {
+    this.store.updateState({
+      improvedTokenAllowanceEnabled,
+    });
+  }
+
   /**
    * Add new methodData to state, to avoid requesting this information again through Infura
    *
diff --git a/app/scripts/controllers/preferences.test.js b/app/scripts/controllers/preferences.test.js
index ee19e216f..488e03010 100644
--- a/app/scripts/controllers/preferences.test.js
+++ b/app/scripts/controllers/preferences.test.js
@@ -308,21 +308,21 @@ describe('preferences controller', function () {
     });
   });
 
-  describe('setUseCollectibleDetection', function () {
+  describe('setUseNftDetection', function () {
     it('should default to false', function () {
       const state = preferencesController.store.getState();
-      assert.equal(state.useCollectibleDetection, false);
+      assert.equal(state.useNftDetection, false);
     });
 
-    it('should set the useCollectibleDetection property in state', function () {
+    it('should set the useNftDetection property in state', function () {
       assert.equal(
-        preferencesController.store.getState().useCollectibleDetection,
+        preferencesController.store.getState().useNftDetection,
         false,
       );
       preferencesController.setOpenSeaEnabled(true);
-      preferencesController.setUseCollectibleDetection(true);
+      preferencesController.setUseNftDetection(true);
       assert.equal(
-        preferencesController.store.getState().useCollectibleDetection,
+        preferencesController.store.getState().useNftDetection,
         true,
       );
     });
diff --git a/app/scripts/lib/account-tracker.js b/app/scripts/lib/account-tracker.js
index 024ed6c24..7e57a8ee9 100644
--- a/app/scripts/lib/account-tracker.js
+++ b/app/scripts/lib/account-tracker.js
@@ -14,7 +14,10 @@ import log from 'loglevel';
 import pify from 'pify';
 import { ethers } from 'ethers';
 import SINGLE_CALL_BALANCES_ABI from 'single-call-balance-checker-abi';
-import { CHAIN_IDS } from '../../../shared/constants/network';
+import {
+  CHAIN_IDS,
+  LOCALHOST_RPC_URL,
+} from '../../../shared/constants/network';
 
 import {
   SINGLE_CALL_BALANCES_ADDRESS,
@@ -50,6 +53,7 @@ export default class AccountTracker {
    * @param {object} opts.provider - An EIP-1193 provider instance that uses the current global network
    * @param {object} opts.blockTracker - A block tracker, which emits events for each new block
    * @param {Function} opts.getCurrentChainId - A function that returns the `chainId` for the current global network
+   * @param {Function} opts.getNetworkIdentifier - A function that returns the current network
    */
   constructor(opts = {}) {
     const initState = {
@@ -69,6 +73,7 @@ export default class AccountTracker {
     // bind function for easier listener syntax
     this._updateForBlock = this._updateForBlock.bind(this);
     this.getCurrentChainId = opts.getCurrentChainId;
+    this.getNetworkIdentifier = opts.getNetworkIdentifier;
 
     this.ethersProvider = new ethers.providers.Web3Provider(this._provider);
   }
@@ -199,73 +204,79 @@ export default class AccountTracker {
     const { accounts } = this.store.getState();
     const addresses = Object.keys(accounts);
     const chainId = this.getCurrentChainId();
+    const networkId = this.getNetworkIdentifier();
+    const rpcUrl = 'http://127.0.0.1:8545';
 
-    switch (chainId) {
-      case CHAIN_IDS.MAINNET:
-        await this._updateAccountsViaBalanceChecker(
-          addresses,
-          SINGLE_CALL_BALANCES_ADDRESS,
-        );
-        break;
+    if (networkId === LOCALHOST_RPC_URL || networkId === rpcUrl) {
+      await Promise.all(addresses.map(this._updateAccount.bind(this)));
+    } else {
+      switch (chainId) {
+        case CHAIN_IDS.MAINNET:
+          await this._updateAccountsViaBalanceChecker(
+            addresses,
+            SINGLE_CALL_BALANCES_ADDRESS,
+          );
+          break;
 
-      case CHAIN_IDS.GOERLI:
-        await this._updateAccountsViaBalanceChecker(
-          addresses,
-          SINGLE_CALL_BALANCES_ADDRESS_GOERLI,
-        );
-        break;
+        case CHAIN_IDS.GOERLI:
+          await this._updateAccountsViaBalanceChecker(
+            addresses,
+            SINGLE_CALL_BALANCES_ADDRESS_GOERLI,
+          );
+          break;
 
-      case CHAIN_IDS.SEPOLIA:
-        await this._updateAccountsViaBalanceChecker(
-          addresses,
-          SINGLE_CALL_BALANCES_ADDRESS_SEPOLIA,
-        );
-        break;
+        case CHAIN_IDS.SEPOLIA:
+          await this._updateAccountsViaBalanceChecker(
+            addresses,
+            SINGLE_CALL_BALANCES_ADDRESS_SEPOLIA,
+          );
+          break;
 
-      case CHAIN_IDS.BSC:
-        await this._updateAccountsViaBalanceChecker(
-          addresses,
-          SINGLE_CALL_BALANCES_ADDRESS_BSC,
-        );
-        break;
+        case CHAIN_IDS.BSC:
+          await this._updateAccountsViaBalanceChecker(
+            addresses,
+            SINGLE_CALL_BALANCES_ADDRESS_BSC,
+          );
+          break;
 
-      case CHAIN_IDS.OPTIMISM:
-        await this._updateAccountsViaBalanceChecker(
-          addresses,
-          SINGLE_CALL_BALANCES_ADDRESS_OPTIMISM,
-        );
-        break;
+        case CHAIN_IDS.OPTIMISM:
+          await this._updateAccountsViaBalanceChecker(
+            addresses,
+            SINGLE_CALL_BALANCES_ADDRESS_OPTIMISM,
+          );
+          break;
 
-      case CHAIN_IDS.POLYGON:
-        await this._updateAccountsViaBalanceChecker(
-          addresses,
-          SINGLE_CALL_BALANCES_ADDRESS_POLYGON,
-        );
-        break;
+        case CHAIN_IDS.POLYGON:
+          await this._updateAccountsViaBalanceChecker(
+            addresses,
+            SINGLE_CALL_BALANCES_ADDRESS_POLYGON,
+          );
+          break;
 
-      case CHAIN_IDS.AVALANCHE:
-        await this._updateAccountsViaBalanceChecker(
-          addresses,
-          SINGLE_CALL_BALANCES_ADDRESS_AVALANCHE,
-        );
-        break;
+        case CHAIN_IDS.AVALANCHE:
+          await this._updateAccountsViaBalanceChecker(
+            addresses,
+            SINGLE_CALL_BALANCES_ADDRESS_AVALANCHE,
+          );
+          break;
 
-      case CHAIN_IDS.FANTOM:
-        await this._updateAccountsViaBalanceChecker(
-          addresses,
-          SINGLE_CALL_BALANCES_ADDRESS_FANTOM,
-        );
-        break;
+        case CHAIN_IDS.FANTOM:
+          await this._updateAccountsViaBalanceChecker(
+            addresses,
+            SINGLE_CALL_BALANCES_ADDRESS_FANTOM,
+          );
+          break;
 
-      case CHAIN_IDS.ARBITRUM:
-        await this._updateAccountsViaBalanceChecker(
-          addresses,
-          SINGLE_CALL_BALANCES_ADDRESS_ARBITRUM,
-        );
-        break;
+        case CHAIN_IDS.ARBITRUM:
+          await this._updateAccountsViaBalanceChecker(
+            addresses,
+            SINGLE_CALL_BALANCES_ADDRESS_ARBITRUM,
+          );
+          break;
 
-      default:
-        await Promise.all(addresses.map(this._updateAccount.bind(this)));
+        default:
+          await Promise.all(addresses.map(this._updateAccount.bind(this)));
+      }
     }
   }
 
diff --git a/app/scripts/lib/segment/analytics.js b/app/scripts/lib/segment/analytics.js
index c93275f94..8966c8eeb 100644
--- a/app/scripts/lib/segment/analytics.js
+++ b/app/scripts/lib/segment/analytics.js
@@ -2,21 +2,10 @@ import removeSlash from 'remove-trailing-slash';
 import looselyValidate from '@segment/loosely-validate-event';
 import { isString } from 'lodash';
 import isRetryAllowed from 'is-retry-allowed';
+import { generateRandomId } from '../util';
 
 const noop = () => ({});
 
-// Taken from https://stackoverflow.com/a/1349426/3696652
-const characters =
-  'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-const generateRandomId = () => {
-  let result = '';
-  const charactersLength = characters.length;
-  for (let i = 0; i < 20; i++) {
-    result += characters.charAt(Math.floor(Math.random() * charactersLength));
-  }
-  return result;
-};
-
 // Method below is inspired from axios-retry https://github.com/softonic/axios-retry
 function isNetworkError(error) {
   return (
diff --git a/app/scripts/lib/stream-utils.js b/app/scripts/lib/stream-utils.js
index 6fa4d7a6c..cac30c066 100644
--- a/app/scripts/lib/stream-utils.js
+++ b/app/scripts/lib/stream-utils.js
@@ -9,6 +9,14 @@ import pump from 'pump';
  */
 export function setupMultiplex(connectionStream) {
   const mux = new ObjectMultiplex();
+  /**
+   * We are using this streams to send keep alive message between backend/ui without setting up a multiplexer
+   * We need to tell the multiplexer to ignore them, else we get the " orphaned data for stream " warnings
+   * https://github.com/MetaMask/object-multiplex/blob/280385401de84f57ef57054d92cfeb8361ef2680/src/ObjectMultiplex.ts#L63
+   */
+  mux.ignoreStream('CONNECTION_READY');
+  mux.ignoreStream('ACK_KEEP_ALIVE_MESSAGE');
+  mux.ignoreStream('WORKER_KEEP_ALIVE_MESSAGE');
   pump(connectionStream, mux, connectionStream, (err) => {
     if (err) {
       console.error(err);
diff --git a/app/scripts/lib/util.js b/app/scripts/lib/util.js
index 6539e1f23..58c0b3c89 100644
--- a/app/scripts/lib/util.js
+++ b/app/scripts/lib/util.js
@@ -96,6 +96,7 @@ function BnMultiplyByFraction(targetBN, numerator, denominator) {
  * Returns an Error if extension.runtime.lastError is present
  * this is a workaround for the non-standard error object that's used
  *
+ * @deprecated use checkForLastError in shared/modules/browser-runtime.utils.js
  * @returns {Error|undefined}
  */
 function checkForError() {
@@ -174,3 +175,19 @@ export {
   getChainType,
   checkAlarmExists,
 };
+
+// Taken from https://stackoverflow.com/a/1349426/3696652
+const characters =
+  'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+export const generateRandomId = () => {
+  let result = '';
+  const charactersLength = characters.length;
+  for (let i = 0; i < 20; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+  return result;
+};
+
+export const isValidDate = (d) => {
+  return d instanceof Date && !isNaN(d);
+};
diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
index 05c698635..b56b17f2e 100644
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@@ -34,9 +34,9 @@ import {
   TokenListController,
   TokensController,
   TokenRatesController,
-  CollectiblesController,
+  NftController,
   AssetsContractController,
-  CollectibleDetectionController,
+  NftDetectionController,
   PermissionController,
   SubjectMetadataController,
   PermissionsRequestNotFoundError,
@@ -49,6 +49,7 @@ import {
 import SmartTransactionsController from '@metamask/smart-transactions-controller';
 ///: BEGIN:ONLY_INCLUDE_IN(flask)
 import {
+  CronjobController,
   SnapController,
   IframeExecutionService,
 } from '@metamask/snap-controllers';
@@ -313,7 +314,7 @@ export default class MetamaskController extends EventEmitter {
       initState.AssetsContractController,
     );
 
-    this.collectiblesController = new CollectiblesController(
+    this.nftController = new NftController(
       {
         onPreferencesStateChange:
           this.preferencesController.store.subscribe.bind(
@@ -344,14 +345,14 @@ export default class MetamaskController extends EventEmitter {
           this.assetsContractController.getERC1155TokenURI.bind(
             this.assetsContractController,
           ),
-        onCollectibleAdded: ({ address, symbol, tokenId, standard, source }) =>
+        onNftAdded: ({ address, symbol, tokenId, standard, source }) =>
           this.metaMetricsController.trackEvent({
             event: EVENT_NAMES.NFT_ADDED,
             category: EVENT.CATEGORIES.WALLET,
             properties: {
               token_contract_address: address,
               token_symbol: symbol,
-              asset_type: ASSET_TYPES.COLLECTIBLE,
+              asset_type: ASSET_TYPES.NFT,
               token_standard: standard,
               source,
             },
@@ -361,34 +362,29 @@ export default class MetamaskController extends EventEmitter {
           }),
       },
       {},
-      initState.CollectiblesController,
+      initState.NftController,
     );
 
-    this.collectiblesController.setApiKey(process.env.OPENSEA_KEY);
+    this.nftController.setApiKey(process.env.OPENSEA_KEY);
 
     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,
+      (this.nftDetectionController = new NftDetectionController({
+        onNftsStateChange: (listener) => this.nftController.subscribe(listener),
+        onPreferencesStateChange:
+          this.preferencesController.store.subscribe.bind(
+            this.preferencesController.store,
           ),
-          getOpenSeaApiKey: () => this.collectiblesController.openSeaApiKey,
-          getBalancesInSingleCall:
-            this.assetsContractController.getBalancesInSingleCall.bind(
-              this.assetsContractController,
-            ),
-          addCollectible: this.collectiblesController.addCollectible.bind(
-            this.collectiblesController,
+        onNetworkStateChange: this.networkController.store.subscribe.bind(
+          this.networkController.store,
+        ),
+        getOpenSeaApiKey: () => this.nftController.openSeaApiKey,
+        getBalancesInSingleCall:
+          this.assetsContractController.getBalancesInSingleCall.bind(
+            this.assetsContractController,
           ),
-          getCollectiblesState: () => this.collectiblesController.state,
-        },
-      ));
+        addNft: this.nftController.addNft.bind(this.nftController),
+        getNftState: () => this.nftController.state,
+      }));
 
     this.metaMetricsController = new MetaMetricsController({
       segment,
@@ -539,6 +535,9 @@ export default class MetamaskController extends EventEmitter {
       getCurrentChainId: this.networkController.getCurrentChainId.bind(
         this.networkController,
       ),
+      getNetworkIdentifier: this.networkController.getNetworkIdentifier.bind(
+        this.networkController,
+      ),
     });
 
     // start and stop polling for balances based on activeControllerConnections
@@ -664,7 +663,7 @@ export default class MetamaskController extends EventEmitter {
     ///: BEGIN:ONLY_INCLUDE_IN(flask)
     this.snapExecutionService = new IframeExecutionService({
       iframeUrl: new URL(
-        'https://metamask.github.io/iframe-execution-environment/0.9.1',
+        'https://metamask.github.io/iframe-execution-environment/0.10.0',
       ),
       messenger: this.controllerMessenger.getRestricted({
         name: 'ExecutionService',
@@ -750,6 +749,24 @@ export default class MetamaskController extends EventEmitter {
         },
       },
     });
+    // --- Snaps Cronjob Controller configuration
+    const cronjobControllerMessenger = this.controllerMessenger.getRestricted({
+      name: 'CronjobController',
+      allowedEvents: [
+        'SnapController:snapInstalled',
+        'SnapController:snapUpdated',
+        'SnapController:snapRemoved',
+      ],
+      allowedActions: [
+        `${this.permissionController.name}:getPermissions`,
+        'SnapController:handleRequest',
+        'SnapController:getAll',
+      ],
+    });
+    this.cronjobController = new CronjobController({
+      state: initState.CronjobController,
+      messenger: cronjobControllerMessenger,
+    });
     ///: END:ONLY_INCLUDE_IN
     this.detectTokensController = new DetectTokensController({
       preferences: this.preferencesController,
@@ -875,12 +892,10 @@ export default class MetamaskController extends EventEmitter {
           const transactionDataTokenId =
             getTokenIdParam(transactionData) ??
             getTokenValueParam(transactionData);
-          const { allCollectibles } = this.collectiblesController.state;
+          const { allNfts } = this.nftController.state;
 
           // check if its a known collectible
-          const knownCollectible = allCollectibles?.[userAddress]?.[
-            chainId
-          ].find(
+          const knownCollectible = allNfts?.[userAddress]?.[chainId].find(
             ({ address, tokenId }) =>
               isEqualCaseInsensitive(address, contractAddress) &&
               tokenId === transactionDataTokenId,
@@ -888,7 +903,7 @@ export default class MetamaskController extends EventEmitter {
 
           // if it is we check and update ownership status.
           if (knownCollectible) {
-            this.collectiblesController.checkAndUpdateSingleCollectibleOwnershipStatus(
+            this.nftController.checkAndUpdateSingleNftOwnershipStatus(
               knownCollectible,
               false,
               { userAddress, chainId },
@@ -896,7 +911,7 @@ export default class MetamaskController extends EventEmitter {
           }
         }
 
-        const metamaskState = await this.getState();
+        const metamaskState = this.getState();
 
         if (txReceipt && txReceipt.status === '0x0') {
           this.metaMetricsController.trackEvent(
@@ -1038,9 +1053,10 @@ export default class MetamaskController extends EventEmitter {
       TokenListController: this.tokenListController,
       TokensController: this.tokensController,
       SmartTransactionsController: this.smartTransactionsController,
-      CollectiblesController: this.collectiblesController,
+      NftController: this.nftController,
       ///: BEGIN:ONLY_INCLUDE_IN(flask)
       SnapController: this.snapController,
+      CronjobController: this.cronjobController,
       NotificationController: this.notificationController,
       ///: END:ONLY_INCLUDE_IN
     });
@@ -1079,9 +1095,10 @@ export default class MetamaskController extends EventEmitter {
         TokenListController: this.tokenListController,
         TokensController: this.tokensController,
         SmartTransactionsController: this.smartTransactionsController,
-        CollectiblesController: this.collectiblesController,
+        NftController: this.nftController,
         ///: BEGIN:ONLY_INCLUDE_IN(flask)
         SnapController: this.snapController,
+        CronjobController: this.cronjobController,
         NotificationController: this.notificationController,
         ///: END:ONLY_INCLUDE_IN
       },
@@ -1130,10 +1147,6 @@ export default class MetamaskController extends EventEmitter {
     return {
       ...buildSnapEndowmentSpecifications(),
       ...buildSnapRestrictedMethodSpecifications({
-        addSnap: this.controllerMessenger.call.bind(
-          this.controllerMessenger,
-          'SnapController:add',
-        ),
         clearSnapState: this.controllerMessenger.call.bind(
           this.controllerMessenger,
           'SnapController:clearSnapState',
@@ -1486,8 +1499,8 @@ export default class MetamaskController extends EventEmitter {
       addressBookController,
       alertController,
       appStateController,
-      collectiblesController,
-      collectibleDetectionController,
+      nftController,
+      nftDetectionController,
       currencyRateController,
       detectTokensController,
       ensController,
@@ -1526,10 +1539,9 @@ export default class MetamaskController extends EventEmitter {
       setUseTokenDetection: preferencesController.setUseTokenDetection.bind(
         preferencesController,
       ),
-      setUseCollectibleDetection:
-        preferencesController.setUseCollectibleDetection.bind(
-          preferencesController,
-        ),
+      setUseNftDetection: preferencesController.setUseNftDetection.bind(
+        preferencesController,
+      ),
       setOpenSeaEnabled: preferencesController.setOpenSeaEnabled.bind(
         preferencesController,
       ),
@@ -1632,41 +1644,32 @@ export default class MetamaskController extends EventEmitter {
         preferencesController,
       ),
       setTheme: preferencesController.setTheme.bind(preferencesController),
+      setImprovedTokenAllowanceEnabled:
+        preferencesController.setImprovedTokenAllowanceEnabled.bind(
+          preferencesController,
+        ),
       // AssetsContractController
       getTokenStandardAndDetails: this.getTokenStandardAndDetails.bind(this),
 
-      // CollectiblesController
-      addCollectible: collectiblesController.addCollectible.bind(
-        collectiblesController,
-      ),
+      // NftController
+      addNft: nftController.addNft.bind(nftController),
 
-      addCollectibleVerifyOwnership:
-        collectiblesController.addCollectibleVerifyOwnership.bind(
-          collectiblesController,
+      addNftVerifyOwnership:
+        nftController.addNftVerifyOwnership.bind(nftController),
+
+      removeAndIgnoreNft: nftController.removeAndIgnoreNft.bind(nftController),
+
+      removeNft: nftController.removeNft.bind(nftController),
+
+      checkAndUpdateAllNftsOwnershipStatus:
+        nftController.checkAndUpdateAllNftsOwnershipStatus.bind(nftController),
+
+      checkAndUpdateSingleNftOwnershipStatus:
+        nftController.checkAndUpdateSingleNftOwnershipStatus.bind(
+          nftController,
         ),
 
-      removeAndIgnoreCollectible:
-        collectiblesController.removeAndIgnoreCollectible.bind(
-          collectiblesController,
-        ),
-
-      removeCollectible: collectiblesController.removeCollectible.bind(
-        collectiblesController,
-      ),
-
-      checkAndUpdateAllCollectiblesOwnershipStatus:
-        collectiblesController.checkAndUpdateAllCollectiblesOwnershipStatus.bind(
-          collectiblesController,
-        ),
-
-      checkAndUpdateSingleCollectibleOwnershipStatus:
-        collectiblesController.checkAndUpdateSingleCollectibleOwnershipStatus.bind(
-          collectiblesController,
-        ),
-
-      isCollectibleOwner: collectiblesController.isCollectibleOwner.bind(
-        collectiblesController,
-      ),
+      isNftOwner: nftController.isNftOwner.bind(nftController),
 
       // AddressController
       setAddressBook: addressBookController.set.bind(addressBookController),
@@ -1697,6 +1700,8 @@ export default class MetamaskController extends EventEmitter {
         ),
       setShowPortfolioTooltip:
         appStateController.setShowPortfolioTooltip.bind(appStateController),
+      setShowBetaHeader:
+        appStateController.setShowBetaHeader.bind(appStateController),
       setCollectiblesDetectionNoticeDismissed:
         appStateController.setCollectiblesDetectionNoticeDismissed.bind(
           appStateController,
@@ -1946,10 +1951,8 @@ export default class MetamaskController extends EventEmitter {
       ),
 
       // DetectCollectibleController
-      detectCollectibles: process.env.COLLECTIBLES_V1
-        ? collectibleDetectionController.detectCollectibles.bind(
-            collectibleDetectionController,
-          )
+      detectNfts: process.env.COLLECTIBLES_V1
+        ? nftDetectionController.detectNfts.bind(nftDetectionController)
         : null,
 
       /** Token Detection V2 */
@@ -2040,10 +2043,10 @@ export default class MetamaskController extends EventEmitter {
     }
   }
 
-  async addCustomNetwork(customRpc) {
+  async addCustomNetwork(customRpc, actionId) {
     const { chainId, chainName, rpcUrl, ticker, blockExplorerUrl } = customRpc;
 
-    await this.preferencesController.addToFrequentRpcList(
+    this.preferencesController.addToFrequentRpcList(
       rpcUrl,
       chainId,
       ticker,
@@ -2076,6 +2079,7 @@ export default class MetamaskController extends EventEmitter {
       sensitiveProperties: {
         rpc_url: rpcUrlOrigin,
       },
+      actionId,
     });
   }
 
@@ -2758,7 +2762,7 @@ export default class MetamaskController extends EventEmitter {
     const allAccounts = await this.keyringController.getAccounts();
     this.preferencesController.setAddresses(allAccounts);
     // set new account as selected
-    await this.preferencesController.setSelectedAddress(firstAccount);
+    this.preferencesController.setSelectedAddress(firstAccount);
   }
 
   // ---------------------------------------------------------------------------
@@ -3220,7 +3224,7 @@ export default class MetamaskController extends EventEmitter {
       customGasSettings,
       options,
     );
-    const state = await this.getState();
+    const state = this.getState();
     return state;
   }
 
@@ -3243,7 +3247,7 @@ export default class MetamaskController extends EventEmitter {
       customGasSettings,
       options,
     );
-    const state = await this.getState();
+    const state = this.getState();
     return state;
   }
 
diff --git a/app/scripts/migrations/076.js b/app/scripts/migrations/076.js
new file mode 100644
index 000000000..98ca9e29f
--- /dev/null
+++ b/app/scripts/migrations/076.js
@@ -0,0 +1,46 @@
+import { cloneDeep } from 'lodash';
+
+const version = 76;
+
+/**
+ * Update to `@metamask/controllers@33.0.0` (rename "Collectible" to "NFT").
+ */
+export default {
+  version,
+  async migrate(originalVersionedData) {
+    const versionedData = cloneDeep(originalVersionedData);
+    versionedData.meta.version = version;
+    const state = versionedData.data;
+    const newState = transformState(state);
+    versionedData.data = newState;
+    return versionedData;
+  },
+};
+
+function transformState(state) {
+  if (state.CollectiblesController) {
+    const {
+      allCollectibleContracts,
+      allCollectibles,
+      ignoredCollectibles,
+      ...remainingState
+    } = state.CollectiblesController;
+    state.NftController = {
+      ...(allCollectibleContracts
+        ? { allNftContracts: allCollectibleContracts }
+        : {}),
+      ...(allCollectibles ? { allNfts: allCollectibles } : {}),
+      ...(ignoredCollectibles ? { ignoredNfts: ignoredCollectibles } : {}),
+      ...remainingState,
+    };
+    delete state.CollectiblesController;
+  }
+
+  if (state.PreferencesController?.useCollectibleDetection) {
+    state.PreferencesController.useNftDetection =
+      state.PreferencesController.useCollectibleDetection;
+    delete state.PreferencesController.useCollectibleDetection;
+  }
+
+  return state;
+}
diff --git a/app/scripts/migrations/076.test.js b/app/scripts/migrations/076.test.js
new file mode 100644
index 000000000..c25c04e6c
--- /dev/null
+++ b/app/scripts/migrations/076.test.js
@@ -0,0 +1,143 @@
+import migration76 from './076';
+
+describe('migration #76', () => {
+  it('should update the version metadata', async () => {
+    const oldStorage = {
+      meta: {
+        version: 75,
+      },
+      data: {},
+    };
+
+    const newStorage = await migration76.migrate(oldStorage);
+    expect(newStorage.meta).toStrictEqual({
+      version: 76,
+    });
+  });
+
+  it('should migrate known controller state properties', async () => {
+    const oldStorage = {
+      meta: {
+        version: 75,
+      },
+      data: {
+        CollectiblesController: {
+          allCollectibleContracts: 'foo',
+          allCollectibles: 'bar',
+          ignoredCollectibles: 'baz',
+        },
+        PreferencesController: {
+          useCollectibleDetection: 'foobar',
+        },
+      },
+    };
+
+    const newStorage = await migration76.migrate(oldStorage);
+    expect(newStorage).toStrictEqual({
+      meta: {
+        version: 76,
+      },
+      data: {
+        NftController: {
+          allNftContracts: 'foo',
+          allNfts: 'bar',
+          ignoredNfts: 'baz',
+        },
+        PreferencesController: {
+          useNftDetection: 'foobar',
+        },
+      },
+    });
+  });
+
+  it('should migrate unknown controller state properties', async () => {
+    const oldStorage = {
+      meta: {
+        version: 75,
+      },
+      data: {
+        CollectiblesController: {
+          allCollectibleContracts: 'foo',
+          allCollectibles: 'bar',
+          ignoredCollectibles: 'baz',
+          extra: 'extra',
+        },
+        PreferencesController: {
+          extra: 'extra',
+          useCollectibleDetection: 'foobar',
+        },
+      },
+    };
+
+    const newStorage = await migration76.migrate(oldStorage);
+    expect(newStorage).toStrictEqual({
+      meta: {
+        version: 76,
+      },
+      data: {
+        NftController: {
+          allNftContracts: 'foo',
+          allNfts: 'bar',
+          ignoredNfts: 'baz',
+          extra: 'extra',
+        },
+        PreferencesController: {
+          extra: 'extra',
+          useNftDetection: 'foobar',
+        },
+      },
+    });
+  });
+
+  it('should handle missing controller state', async () => {
+    const oldStorage = {
+      meta: {
+        version: 75,
+      },
+      data: {
+        CollectiblesController: {
+          extra: 'extra',
+        },
+        PreferencesController: {
+          extra: 'extra',
+        },
+      },
+    };
+
+    const newStorage = await migration76.migrate(oldStorage);
+    expect(newStorage).toStrictEqual({
+      meta: {
+        version: 76,
+      },
+      data: {
+        NftController: {
+          extra: 'extra',
+        },
+        PreferencesController: {
+          extra: 'extra',
+        },
+      },
+    });
+  });
+
+  it('should handle missing CollectiblesController and PreferencesController', async () => {
+    const oldStorage = {
+      meta: {
+        version: 75,
+      },
+      data: {
+        FooController: { a: 'b' },
+      },
+    };
+
+    const newStorage = await migration76.migrate(oldStorage);
+    expect(newStorage).toStrictEqual({
+      meta: {
+        version: 76,
+      },
+      data: {
+        FooController: { a: 'b' },
+      },
+    });
+  });
+});
diff --git a/app/scripts/migrations/index.js b/app/scripts/migrations/index.js
index ab7c6b3d5..f3c65061b 100644
--- a/app/scripts/migrations/index.js
+++ b/app/scripts/migrations/index.js
@@ -79,6 +79,7 @@ import m072 from './072';
 import m073 from './073';
 import m074 from './074';
 import m075 from './075';
+import m076 from './076';
 
 const migrations = [
   m002,
@@ -155,6 +156,7 @@ const migrations = [
   m073,
   m074,
   m075,
+  m076,
 ];
 
 export default migrations;
diff --git a/app/scripts/sentry-install.js b/app/scripts/sentry-install.js
index 1f0b87bd5..fc654371b 100644
--- a/app/scripts/sentry-install.js
+++ b/app/scripts/sentry-install.js
@@ -1,10 +1,10 @@
 import setupSentry from './lib/setupSentry';
 
 // The root compartment will populate this with hooks
-global.sentryHooks = {};
+global.stateHooks = {};
 
 // setup sentry error reporting
 global.sentry = setupSentry({
   release: process.env.METAMASK_VERSION,
-  getState: () => global.sentryHooks?.getSentryState?.() || {},
+  getState: () => global.stateHooks?.getSentryState?.() || {},
 });
diff --git a/app/scripts/ui.js b/app/scripts/ui.js
index d9569f043..13516becd 100644
--- a/app/scripts/ui.js
+++ b/app/scripts/ui.js
@@ -30,22 +30,65 @@ const container = document.getElementById('app-content');
 const ONE_SECOND_IN_MILLISECONDS = 1_000;
 
 const WORKER_KEEP_ALIVE_INTERVAL = ONE_SECOND_IN_MILLISECONDS;
+// Service Worker Keep Alive Message Constants
 const WORKER_KEEP_ALIVE_MESSAGE = 'WORKER_KEEP_ALIVE_MESSAGE';
+const ACK_KEEP_ALIVE_WAIT_TIME = 60_000; // 1 minute
+const ACK_KEEP_ALIVE_MESSAGE = 'ACK_KEEP_ALIVE_MESSAGE';
 
 // Timeout for initializing phishing warning page.
 const PHISHING_WARNING_PAGE_TIMEOUT = ONE_SECOND_IN_MILLISECONDS;
 
 const PHISHING_WARNING_SW_STORAGE_KEY = 'phishing-warning-sw-registered';
 
+let lastMessageRecievedTimestamp = Date.now();
 /*
  * As long as UI is open it will keep sending messages to service worker
  * In service worker as this message is received
  * if service worker is inactive it is reactivated and script re-loaded
  * Time has been kept to 1000ms but can be reduced for even faster re-activation of service worker
  */
+let extensionPort;
+let timeoutHandle;
+
 if (isManifestV3) {
-  setInterval(() => {
+  // Checking for SW aliveness (or stuckness) flow
+  // 1. Check if we have an extensionPort, if yes
+  // 2a. Send a keep alive message to the background via extensionPort
+  // 2b. Add a listener to it (if not already added)
+  // 3a. Set a timeout to check if we have received an ACK from background
+  // 3b. If we have not received an ACK within Xs, we know the background is stuck or dead
+  // 4. If we recieve an ACK_KEEP_ALIVE_MESSAGE from the service worker, we know it is alive
+
+  const ackKeepAliveListener = (message) => {
+    if (message.name === ACK_KEEP_ALIVE_MESSAGE) {
+      lastMessageRecievedTimestamp = Date.now();
+      clearTimeout(timeoutHandle);
+    }
+  };
+
+  const handle = setInterval(() => {
     browser.runtime.sendMessage({ name: WORKER_KEEP_ALIVE_MESSAGE });
+
+    if (extensionPort !== null && extensionPort !== undefined) {
+      extensionPort.postMessage({ name: WORKER_KEEP_ALIVE_MESSAGE });
+
+      if (extensionPort.onMessage.hasListener(ackKeepAliveListener) === false) {
+        extensionPort.onMessage.addListener(ackKeepAliveListener);
+      }
+    }
+
+    timeoutHandle = setTimeout(() => {
+      if (
+        Date.now() - lastMessageRecievedTimestamp >
+        ACK_KEEP_ALIVE_WAIT_TIME
+      ) {
+        clearInterval(handle);
+        displayCriticalError(
+          'somethingIsWrong',
+          new Error("Something's gone wrong. Try reloading the page."),
+        );
+      }
+    }, ACK_KEEP_ALIVE_WAIT_TIME);
   }, WORKER_KEEP_ALIVE_INTERVAL);
 }
 
@@ -61,7 +104,7 @@ async function start() {
   let isUIInitialised = false;
 
   // setup stream to background
-  let extensionPort = browser.runtime.connect({ name: windowType });
+  extensionPort = browser.runtime.connect({ name: windowType });
   let connectionStream = new PortStream(extensionPort);
 
   const activeTab = await queryCurrentActiveTab(windowType);
@@ -208,7 +251,7 @@ async function start() {
     initializeUi(tab, connectionStream, (err, store) => {
       if (err) {
         // if there's an error, store will be = metamaskState
-        displayCriticalError(err, store);
+        displayCriticalError('troubleStarting', err, store);
         return;
       }
       isUIInitialised = true;
@@ -226,7 +269,7 @@ async function start() {
   function updateUiStreams() {
     connectToAccountManager(connectionStream, (err, backgroundConnection) => {
       if (err) {
-        displayCriticalError(err);
+        displayCriticalError('troubleStarting', err);
         return;
       }
 
@@ -277,8 +320,8 @@ function initializeUi(activeTab, connectionStream, cb) {
   });
 }
 
-async function displayCriticalError(err, metamaskState) {
-  const html = await getErrorHtml(SUPPORT_LINK, metamaskState);
+async function displayCriticalError(errorKey, err, metamaskState) {
+  const html = await getErrorHtml(errorKey, SUPPORT_LINK, metamaskState);
 
   container.innerHTML = html;
 
diff --git a/development/build/index.js b/development/build/index.js
index 628cbbbac..a1a6874e6 100755
--- a/development/build/index.js
+++ b/development/build/index.js
@@ -71,7 +71,7 @@ async function defineAndRunBuildTasks() {
     version,
   } = await parseArgv();
 
-  const browserPlatforms = ['firefox', 'chrome', 'brave', 'opera'];
+  const browserPlatforms = ['firefox', 'chrome'];
 
   const browserVersionMap = getBrowserVersionMap(browserPlatforms, version);
 
diff --git a/development/build/styles.js b/development/build/styles.js
index 47c5e5c66..8b5ccf29e 100644
--- a/development/build/styles.js
+++ b/development/build/styles.js
@@ -58,10 +58,8 @@ function createStyleTasks({ livereload }) {
     };
 
     async function buildScss() {
-      await Promise.all([
-        buildScssPipeline(src, dest, devMode, false),
-        buildScssPipeline(src, dest, devMode, true),
-      ]);
+      await buildScssPipeline(src, dest, devMode, false);
+      await buildScssPipeline(src, dest, devMode, true);
     }
   }
 }
diff --git a/development/generate-icon-names.js b/development/generate-icon-names.js
index 60637ae86..a89887de7 100644
--- a/development/generate-icon-names.js
+++ b/development/generate-icon-names.js
@@ -4,7 +4,7 @@
  * Reads all the icon svg files in app/images/icons
  * and returns an object of icon name key value pairs
  * stored in the environment variable ICON_NAMES
- * Used with the Icon component in ./ui/component-library/icon
+ * Used with the Icon component in ./ui/components/component-library/icon/icon.js
  */
 const fs = require('fs');
 const path = require('path');
diff --git a/development/metamaskbot-build-announce.js b/development/metamaskbot-build-announce.js
index 8ce98ce67..6e929969c 100755
--- a/development/metamaskbot-build-announce.js
+++ b/development/metamaskbot-build-announce.js
@@ -23,6 +23,8 @@ async function start() {
   console.log('CIRCLE_BUILD_NUM', CIRCLE_BUILD_NUM);
   const { CIRCLE_WORKFLOW_JOB_ID } = process.env;
   console.log('CIRCLE_WORKFLOW_JOB_ID', CIRCLE_WORKFLOW_JOB_ID);
+  const { PARENT_COMMIT } = process.env;
+  console.log('PARENT_COMMIT', PARENT_COMMIT);
 
   if (!CIRCLE_PULL_REQUEST) {
     console.warn(`No pull request detected for commit "${CIRCLE_SHA1}"`);
@@ -36,7 +38,7 @@ async function start() {
   // build the github comment content
 
   // links to extension builds
-  const platforms = ['chrome', 'firefox', 'opera'];
+  const platforms = ['chrome', 'firefox'];
   const buildLinks = platforms
     .map((platform) => {
       const url = `${BUILD_LINK_BASE}/builds/metamask-${platform}-${VERSION}.zip`;
@@ -87,6 +89,9 @@ async function start() {
     .map((key) => `<li>${key}: ${bundles[key].join(', ')}</li>`)
     .join('')}</ul>`;
 
+  const bundleSizeDataUrl =
+    'https://raw.githubusercontent.com/MetaMask/extension_bundlesize_stats/main/stats/bundle_size_data.json';
+
   const coverageUrl = `${BUILD_LINK_BASE}/coverage/index.html`;
   const coverageLink = `<a href="${coverageUrl}">Report</a>`;
 
@@ -243,6 +248,67 @@ async function start() {
     console.log(`No results for ${summaryPlatform} found; skipping benchmark`);
   }
 
+  try {
+    const prBundleSizeStats = JSON.parse(
+      await fs.readFile(
+        path.resolve(
+          __dirname,
+          '..',
+          path.join('test-artifacts', 'chrome', 'mv3', 'bundle_size.json'),
+        ),
+        'utf-8',
+      ),
+    );
+
+    const devBundleSizeStats = await (
+      await fetch(bundleSizeDataUrl, {
+        method: 'GET',
+      })
+    ).json();
+
+    const prSizes = {
+      background: prBundleSizeStats.background.size,
+      ui: prBundleSizeStats.ui.size,
+      common: prBundleSizeStats.common.size,
+    };
+
+    const devSizes = Object.keys(prSizes).reduce((sizes, part) => {
+      sizes[part] = devBundleSizeStats[PARENT_COMMIT][part] || 0;
+      return sizes;
+    }, {});
+
+    const diffs = Object.keys(prSizes).reduce((output, part) => {
+      output[part] = prSizes[part] - devSizes[part];
+      return output;
+    }, {});
+
+    const sizeDiffRows = Object.keys(diffs).map(
+      (part) => `${part}: ${diffs[part]} bytes`,
+    );
+
+    const sizeDiffHiddenContent = `<ul>${sizeDiffRows
+      .map((row) => `<li>${row}</li>`)
+      .join('\n')}</ul>`;
+
+    const sizeDiff = diffs.background + diffs.common;
+
+    const sizeDiffWarning =
+      sizeDiff > 0
+        ? `🚨 Warning! Bundle size has increased!`
+        : `🚀 Bundle size reduced!`;
+
+    const sizeDiffExposedContent =
+      sizeDiff === 0
+        ? `Bundle size diffs`
+        : `Bundle size diffs [${sizeDiffWarning}]`;
+
+    const sizeDiffBody = `<details><summary>${sizeDiffExposedContent}</summary>${sizeDiffHiddenContent}</details>\n\n`;
+
+    commentBody += sizeDiffBody;
+  } catch (error) {
+    console.error(`Error constructing bundle size diffs results: '${error}'`);
+  }
+
   try {
     const highlights = await getHighlights({ artifactBase: BUILD_LINK_BASE });
     if (highlights) {
diff --git a/development/ts-migration-dashboard/files-to-convert.json b/development/ts-migration-dashboard/files-to-convert.json
index 6cce4cb55..bc94b3e44 100644
--- a/development/ts-migration-dashboard/files-to-convert.json
+++ b/development/ts-migration-dashboard/files-to-convert.json
@@ -698,7 +698,7 @@
   "ui/components/app/signature-request/signature-request-header/signature-request-header.component.js",
   "ui/components/app/signature-request/signature-request-header/signature-request-header.stories.js",
   "ui/components/app/signature-request/signature-request-message/index.js",
-  "ui/components/app/signature-request/signature-request-message/signature-request-message.component.js",
+  "ui/components/app/signature-request/signature-request-message/signature-request-message.js",
   "ui/components/app/signature-request/signature-request.component.js",
   "ui/components/app/signature-request/signature-request.component.test.js",
   "ui/components/app/signature-request/signature-request.container.js",
diff --git a/docs/QA_Guide.md b/docs/QA_Guide.md
index dc5b94c40..a615d5f60 100644
--- a/docs/QA_Guide.md
+++ b/docs/QA_Guide.md
@@ -2,6 +2,7 @@
 
 Steps to mark a full pass of QA complete.
 * Browsers: Opera, Chrome, Firefox, Edge.
+  * Use the Chrome build for all Chromium-derived browsers (e.g. Opera and Edge)
 * OS: Ubuntu, Mac OSX, Windows
 * Load older version of MetaMask and attempt to simulate updating the extension.
 * Open Developer Console in background and popup, inspect errors.
diff --git a/docs/generating-fixture-data.md b/docs/generating-fixture-data.md
index 77b90f3c2..274945765 100644
--- a/docs/generating-fixture-data.md
+++ b/docs/generating-fixture-data.md
@@ -4,12 +4,12 @@ Fixture data can be generated by following these steps:
 
 1. Load the unpacked extension in development or test mode
 2. Inspecting the background context of the extension
-3. Call `metamaskGetState`, then call [`copy`][1] on the results
+3. Call `stateHooks.metamaskGetState`, then call [`copy`][1] on the results
 
 You can then paste the contents directly in your fixture file.
 
 ```js
-copy(await metamaskGetState())
+copy(await stateHooks.metamaskGetState())
 ```
 
 
diff --git a/lavamoat/browserify/beta/policy.json b/lavamoat/browserify/beta/policy.json
index d134a6a9f..ac2f28d58 100644
--- a/lavamoat/browserify/beta/policy.json
+++ b/lavamoat/browserify/beta/policy.json
@@ -1238,14 +1238,145 @@
       "packages": {
         "@ethersproject/bignumber": true,
         "@ethersproject/bignumber>@ethersproject/bytes": true,
-        "@metamask/controllers": true,
         "@metamask/controllers>@ethersproject/providers": true,
         "@metamask/controllers>isomorphic-fetch": true,
+        "@metamask/smart-transactions-controller>@metamask/controllers": true,
         "@metamask/smart-transactions-controller>bignumber.js": true,
         "@metamask/smart-transactions-controller>fast-json-patch": true,
         "lodash": true
       }
     },
+    "@metamask/smart-transactions-controller>@metamask/controllers": {
+      "globals": {
+        "Headers": true,
+        "URL": true,
+        "clearInterval": true,
+        "clearTimeout": true,
+        "console.error": true,
+        "console.log": true,
+        "fetch": true,
+        "setInterval": true,
+        "setTimeout": true
+      },
+      "packages": {
+        "@ethereumjs/common": true,
+        "@ethereumjs/tx": true,
+        "@metamask/contract-metadata": true,
+        "@metamask/controllers>@ethersproject/abi": true,
+        "@metamask/controllers>@ethersproject/contracts": true,
+        "@metamask/controllers>@ethersproject/providers": true,
+        "@metamask/controllers>abort-controller": true,
+        "@metamask/controllers>async-mutex": true,
+        "@metamask/controllers>eth-json-rpc-infura": true,
+        "@metamask/controllers>eth-phishing-detect": true,
+        "@metamask/controllers>isomorphic-fetch": true,
+        "@metamask/controllers>multiformats": true,
+        "@metamask/controllers>web3": true,
+        "@metamask/controllers>web3-provider-engine": true,
+        "@metamask/metamask-eth-abis": true,
+        "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry": true,
+        "@metamask/smart-transactions-controller>@metamask/controllers>ethereumjs-wallet": true,
+        "@metamask/smart-transactions-controller>@metamask/controllers>nanoid": true,
+        "browserify>buffer": true,
+        "browserify>events": true,
+        "deep-freeze-strict": true,
+        "eslint>fast-deep-equal": true,
+        "eth-ens-namehash": true,
+        "eth-keyring-controller": true,
+        "eth-query": true,
+        "eth-rpc-errors": true,
+        "eth-sig-util": true,
+        "ethereumjs-util": true,
+        "ethjs>ethjs-unit": true,
+        "immer": true,
+        "json-rpc-engine": true,
+        "jsonschema": true,
+        "punycode": true,
+        "single-call-balance-checker-abi": true,
+        "uuid": true
+      }
+    },
+    "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry": {
+      "packages": {
+        "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs": true
+      }
+    },
+    "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs": {
+      "globals": {
+        "clearInterval": true,
+        "setInterval": true
+      },
+      "packages": {
+        "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs>bn.js": true,
+        "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs>ethjs-abi": true,
+        "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs>ethjs-contract": true,
+        "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs>ethjs-query": true,
+        "browserify>buffer": true,
+        "ethjs>ethjs-filter": true,
+        "ethjs>ethjs-provider-http": true,
+        "ethjs>ethjs-unit": true,
+        "ethjs>ethjs-util": true,
+        "ethjs>js-sha3": true,
+        "ethjs>number-to-bn": true
+      }
+    },
+    "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs>ethjs-abi": {
+      "packages": {
+        "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs>bn.js": true,
+        "browserify>buffer": true,
+        "ethjs>js-sha3": true,
+        "ethjs>number-to-bn": true
+      }
+    },
+    "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs>ethjs-contract": {
+      "packages": {
+        "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs>ethjs-contract>ethjs-abi": true,
+        "ethjs-query>babel-runtime": true,
+        "ethjs>ethjs-filter": true,
+        "ethjs>ethjs-util": true,
+        "ethjs>js-sha3": true,
+        "promise-to-callback": true
+      }
+    },
+    "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs>ethjs-contract>ethjs-abi": {
+      "packages": {
+        "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs>bn.js": true,
+        "browserify>buffer": true,
+        "ethjs>js-sha3": true,
+        "ethjs>number-to-bn": true
+      }
+    },
+    "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs>ethjs-query": {
+      "globals": {
+        "console": true
+      },
+      "packages": {
+        "ethjs-query>babel-runtime": true,
+        "ethjs-query>ethjs-format": true,
+        "ethjs-query>ethjs-rpc": true,
+        "promise-to-callback": true
+      }
+    },
+    "@metamask/smart-transactions-controller>@metamask/controllers>ethereumjs-wallet": {
+      "packages": {
+        "@metamask/smart-transactions-controller>@metamask/controllers>ethereumjs-wallet>uuid": true,
+        "@truffle/codec>utf8": true,
+        "browserify>buffer": true,
+        "browserify>crypto-browserify": true,
+        "ethereumjs-util": true,
+        "ethereumjs-util>ethereum-cryptography": true,
+        "ethereumjs-wallet>aes-js": true,
+        "ethereumjs-wallet>bs58check": true,
+        "ethereumjs-wallet>randombytes": true,
+        "ethers>@ethersproject/json-wallets>scrypt-js": true
+      }
+    },
+    "@metamask/smart-transactions-controller>@metamask/controllers>ethereumjs-wallet>uuid": {
+      "globals": {
+        "crypto": true,
+        "msCrypto": true
+      }
+    },
     "@metamask/smart-transactions-controller>@metamask/controllers>nanoid": {
       "globals": {
         "crypto.getRandomValues": true
diff --git a/lavamoat/browserify/flask/policy.json b/lavamoat/browserify/flask/policy.json
index 5853f5d74..f2fa87fe8 100644
--- a/lavamoat/browserify/flask/policy.json
+++ b/lavamoat/browserify/flask/policy.json
@@ -1366,6 +1366,50 @@
         "watchify>xtend": true
       }
     },
+    "@metamask/post-message-stream": {
+      "globals": {
+        "WorkerGlobalScope": true,
+        "addEventListener": true,
+        "location.origin": true,
+        "onmessage": "write",
+        "postMessage": true,
+        "removeEventListener": true
+      },
+      "packages": {
+        "@metamask/post-message-stream>@metamask/utils": true,
+        "@metamask/post-message-stream>readable-stream": true
+      }
+    },
+    "@metamask/post-message-stream>@metamask/utils": {
+      "packages": {
+        "eslint>fast-deep-equal": true
+      }
+    },
+    "@metamask/post-message-stream>readable-stream": {
+      "packages": {
+        "@metamask/post-message-stream>readable-stream>safe-buffer": true,
+        "@metamask/post-message-stream>readable-stream>string_decoder": true,
+        "@storybook/api>util-deprecate": true,
+        "browserify>browser-resolve": true,
+        "browserify>events": true,
+        "browserify>process": true,
+        "browserify>timers-browserify": true,
+        "pumpify>inherits": true,
+        "readable-stream>core-util-is": true,
+        "readable-stream>isarray": true,
+        "vinyl>cloneable-readable>process-nextick-args": true
+      }
+    },
+    "@metamask/post-message-stream>readable-stream>safe-buffer": {
+      "packages": {
+        "browserify>buffer": true
+      }
+    },
+    "@metamask/post-message-stream>readable-stream>string_decoder": {
+      "packages": {
+        "@metamask/post-message-stream>readable-stream>safe-buffer": true
+      }
+    },
     "@metamask/providers>@metamask/object-multiplex": {
       "globals": {
         "console.warn": true
@@ -1528,7 +1572,7 @@
         "@metamask/rpc-methods>@metamask/key-tree>@scure/bip39": true,
         "@metamask/snap-utils>@noble/hashes": true,
         "@metamask/snap-utils>@scure/base": true,
-        "browserify>buffer": true
+        "eth-block-tracker>@metamask/utils": true
       }
     },
     "@metamask/rpc-methods>@metamask/key-tree>@noble/ed25519": {
@@ -1570,14 +1614,145 @@
       "packages": {
         "@ethersproject/bignumber": true,
         "@ethersproject/bignumber>@ethersproject/bytes": true,
-        "@metamask/controllers": true,
         "@metamask/controllers>@ethersproject/providers": true,
         "@metamask/controllers>isomorphic-fetch": true,
+        "@metamask/smart-transactions-controller>@metamask/controllers": true,
         "@metamask/smart-transactions-controller>bignumber.js": true,
         "@metamask/smart-transactions-controller>fast-json-patch": true,
         "lodash": true
       }
     },
+    "@metamask/smart-transactions-controller>@metamask/controllers": {
+      "globals": {
+        "Headers": true,
+        "URL": true,
+        "clearInterval": true,
+        "clearTimeout": true,
+        "console.error": true,
+        "console.log": true,
+        "fetch": true,
+        "setInterval": true,
+        "setTimeout": true
+      },
+      "packages": {
+        "@ethereumjs/common": true,
+        "@ethereumjs/tx": true,
+        "@metamask/contract-metadata": true,
+        "@metamask/controllers>@ethersproject/abi": true,
+        "@metamask/controllers>@ethersproject/contracts": true,
+        "@metamask/controllers>@ethersproject/providers": true,
+        "@metamask/controllers>abort-controller": true,
+        "@metamask/controllers>async-mutex": true,
+        "@metamask/controllers>eth-json-rpc-infura": true,
+        "@metamask/controllers>eth-phishing-detect": true,
+        "@metamask/controllers>isomorphic-fetch": true,
+        "@metamask/controllers>multiformats": true,
+        "@metamask/controllers>web3": true,
+        "@metamask/controllers>web3-provider-engine": true,
+        "@metamask/metamask-eth-abis": true,
+        "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry": true,
+        "@metamask/smart-transactions-controller>@metamask/controllers>ethereumjs-wallet": true,
+        "@metamask/smart-transactions-controller>@metamask/controllers>nanoid": true,
+        "browserify>buffer": true,
+        "browserify>events": true,
+        "deep-freeze-strict": true,
+        "eslint>fast-deep-equal": true,
+        "eth-ens-namehash": true,
+        "eth-keyring-controller": true,
+        "eth-query": true,
+        "eth-rpc-errors": true,
+        "eth-sig-util": true,
+        "ethereumjs-util": true,
+        "ethjs>ethjs-unit": true,
+        "immer": true,
+        "json-rpc-engine": true,
+        "jsonschema": true,
+        "punycode": true,
+        "single-call-balance-checker-abi": true,
+        "uuid": true
+      }
+    },
+    "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry": {
+      "packages": {
+        "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs": true
+      }
+    },
+    "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs": {
+      "globals": {
+        "clearInterval": true,
+        "setInterval": true
+      },
+      "packages": {
+        "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs>bn.js": true,
+        "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs>ethjs-abi": true,
+        "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs>ethjs-contract": true,
+        "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs>ethjs-query": true,
+        "browserify>buffer": true,
+        "ethjs>ethjs-filter": true,
+        "ethjs>ethjs-provider-http": true,
+        "ethjs>ethjs-unit": true,
+        "ethjs>ethjs-util": true,
+        "ethjs>js-sha3": true,
+        "ethjs>number-to-bn": true
+      }
+    },
+    "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs>ethjs-abi": {
+      "packages": {
+        "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs>bn.js": true,
+        "browserify>buffer": true,
+        "ethjs>js-sha3": true,
+        "ethjs>number-to-bn": true
+      }
+    },
+    "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs>ethjs-contract": {
+      "packages": {
+        "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs>ethjs-contract>ethjs-abi": true,
+        "ethjs-query>babel-runtime": true,
+        "ethjs>ethjs-filter": true,
+        "ethjs>ethjs-util": true,
+        "ethjs>js-sha3": true,
+        "promise-to-callback": true
+      }
+    },
+    "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs>ethjs-contract>ethjs-abi": {
+      "packages": {
+        "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs>bn.js": true,
+        "browserify>buffer": true,
+        "ethjs>js-sha3": true,
+        "ethjs>number-to-bn": true
+      }
+    },
+    "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs>ethjs-query": {
+      "globals": {
+        "console": true
+      },
+      "packages": {
+        "ethjs-query>babel-runtime": true,
+        "ethjs-query>ethjs-format": true,
+        "ethjs-query>ethjs-rpc": true,
+        "promise-to-callback": true
+      }
+    },
+    "@metamask/smart-transactions-controller>@metamask/controllers>ethereumjs-wallet": {
+      "packages": {
+        "@metamask/smart-transactions-controller>@metamask/controllers>ethereumjs-wallet>uuid": true,
+        "@truffle/codec>utf8": true,
+        "browserify>buffer": true,
+        "browserify>crypto-browserify": true,
+        "ethereumjs-util": true,
+        "ethereumjs-util>ethereum-cryptography": true,
+        "ethereumjs-wallet>aes-js": true,
+        "ethereumjs-wallet>bs58check": true,
+        "ethereumjs-wallet>randombytes": true,
+        "ethers>@ethersproject/json-wallets>scrypt-js": true
+      }
+    },
+    "@metamask/smart-transactions-controller>@metamask/controllers>ethereumjs-wallet>uuid": {
+      "globals": {
+        "crypto": true,
+        "msCrypto": true
+      }
+    },
     "@metamask/smart-transactions-controller>@metamask/controllers>nanoid": {
       "globals": {
         "crypto.getRandomValues": true
@@ -1612,11 +1787,11 @@
         "setTimeout": true
       },
       "packages": {
+        "@metamask/post-message-stream": true,
         "@metamask/providers>@metamask/object-multiplex": true,
         "@metamask/rpc-methods": true,
         "@metamask/snap-controllers>@metamask/browser-passworder": true,
         "@metamask/snap-controllers>@metamask/controllers": true,
-        "@metamask/snap-controllers>@metamask/post-message-stream": true,
         "@metamask/snap-controllers>@xstate/fsm": true,
         "@metamask/snap-controllers>concat-stream": true,
         "@metamask/snap-controllers>gunzip-maybe": true,
@@ -1775,45 +1950,6 @@
         "msCrypto": true
       }
     },
-    "@metamask/snap-controllers>@metamask/post-message-stream": {
-      "globals": {
-        "WorkerGlobalScope": true,
-        "addEventListener": true,
-        "location.origin": true,
-        "onmessage": "write",
-        "postMessage": true,
-        "removeEventListener": true
-      },
-      "packages": {
-        "@metamask/snap-controllers>@metamask/post-message-stream>@metamask/utils": true,
-        "@metamask/snap-controllers>@metamask/post-message-stream>readable-stream": true
-      }
-    },
-    "@metamask/snap-controllers>@metamask/post-message-stream>@metamask/utils": {
-      "packages": {
-        "eslint>fast-deep-equal": true
-      }
-    },
-    "@metamask/snap-controllers>@metamask/post-message-stream>readable-stream": {
-      "packages": {
-        "@metamask/snap-controllers>@metamask/post-message-stream>readable-stream>string_decoder": true,
-        "@metamask/snap-controllers>json-rpc-middleware-stream>readable-stream>safe-buffer": true,
-        "@storybook/api>util-deprecate": true,
-        "browserify>browser-resolve": true,
-        "browserify>events": true,
-        "browserify>process": true,
-        "browserify>timers-browserify": true,
-        "pumpify>inherits": true,
-        "readable-stream>core-util-is": true,
-        "readable-stream>isarray": true,
-        "vinyl>cloneable-readable>process-nextick-args": true
-      }
-    },
-    "@metamask/snap-controllers>@metamask/post-message-stream>readable-stream>string_decoder": {
-      "packages": {
-        "@metamask/snap-controllers>json-rpc-middleware-stream>readable-stream>safe-buffer": true
-      }
-    },
     "@metamask/snap-controllers>concat-stream": {
       "packages": {
         "@metamask/snap-controllers>concat-stream>readable-stream": true,
@@ -1915,38 +2051,8 @@
         "setTimeout": true
       },
       "packages": {
-        "@metamask/snap-controllers>json-rpc-middleware-stream>readable-stream": true,
-        "json-rpc-engine>@metamask/safe-event-emitter": true
-      }
-    },
-    "@metamask/snap-controllers>json-rpc-middleware-stream>readable-stream": {
-      "packages": {
-        "@metamask/snap-controllers>json-rpc-middleware-stream>readable-stream>process-nextick-args": true,
-        "@metamask/snap-controllers>json-rpc-middleware-stream>readable-stream>safe-buffer": true,
-        "@metamask/snap-controllers>json-rpc-middleware-stream>readable-stream>string_decoder": true,
-        "@storybook/api>util-deprecate": true,
-        "browserify>browser-resolve": true,
-        "browserify>events": true,
-        "browserify>process": true,
-        "browserify>timers-browserify": true,
-        "pumpify>inherits": true,
-        "readable-stream>core-util-is": true,
-        "readable-stream>isarray": true
-      }
-    },
-    "@metamask/snap-controllers>json-rpc-middleware-stream>readable-stream>process-nextick-args": {
-      "packages": {
-        "browserify>process": true
-      }
-    },
-    "@metamask/snap-controllers>json-rpc-middleware-stream>readable-stream>safe-buffer": {
-      "packages": {
-        "browserify>buffer": true
-      }
-    },
-    "@metamask/snap-controllers>json-rpc-middleware-stream>readable-stream>string_decoder": {
-      "packages": {
-        "@metamask/snap-controllers>json-rpc-middleware-stream>readable-stream>safe-buffer": true
+        "json-rpc-engine>@metamask/safe-event-emitter": true,
+        "readable-stream": true
       }
     },
     "@metamask/snap-controllers>nanoid": {
@@ -2008,7 +2114,7 @@
         "@babel/core>@babel/types": true,
         "@metamask/snap-utils>@noble/hashes": true,
         "@metamask/snap-utils>@scure/base": true,
-        "@metamask/snap-utils>ajv": true,
+        "@metamask/snap-utils>cron-parser": true,
         "@metamask/snap-utils>rfdc": true,
         "@metamask/snap-utils>superstruct": true,
         "browserify": true,
@@ -2033,6 +2139,12 @@
         "TextEncoder": true
       }
     },
+    "@metamask/snap-utils>cron-parser": {
+      "packages": {
+        "browserify>browser-resolve": true,
+        "luxon": true
+      }
+    },
     "@metamask/snap-utils>rfdc": {
       "packages": {
         "browserify>buffer": true
diff --git a/lavamoat/browserify/main/policy.json b/lavamoat/browserify/main/policy.json
index d134a6a9f..ac2f28d58 100644
--- a/lavamoat/browserify/main/policy.json
+++ b/lavamoat/browserify/main/policy.json
@@ -1238,14 +1238,145 @@
       "packages": {
         "@ethersproject/bignumber": true,
         "@ethersproject/bignumber>@ethersproject/bytes": true,
-        "@metamask/controllers": true,
         "@metamask/controllers>@ethersproject/providers": true,
         "@metamask/controllers>isomorphic-fetch": true,
+        "@metamask/smart-transactions-controller>@metamask/controllers": true,
         "@metamask/smart-transactions-controller>bignumber.js": true,
         "@metamask/smart-transactions-controller>fast-json-patch": true,
         "lodash": true
       }
     },
+    "@metamask/smart-transactions-controller>@metamask/controllers": {
+      "globals": {
+        "Headers": true,
+        "URL": true,
+        "clearInterval": true,
+        "clearTimeout": true,
+        "console.error": true,
+        "console.log": true,
+        "fetch": true,
+        "setInterval": true,
+        "setTimeout": true
+      },
+      "packages": {
+        "@ethereumjs/common": true,
+        "@ethereumjs/tx": true,
+        "@metamask/contract-metadata": true,
+        "@metamask/controllers>@ethersproject/abi": true,
+        "@metamask/controllers>@ethersproject/contracts": true,
+        "@metamask/controllers>@ethersproject/providers": true,
+        "@metamask/controllers>abort-controller": true,
+        "@metamask/controllers>async-mutex": true,
+        "@metamask/controllers>eth-json-rpc-infura": true,
+        "@metamask/controllers>eth-phishing-detect": true,
+        "@metamask/controllers>isomorphic-fetch": true,
+        "@metamask/controllers>multiformats": true,
+        "@metamask/controllers>web3": true,
+        "@metamask/controllers>web3-provider-engine": true,
+        "@metamask/metamask-eth-abis": true,
+        "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry": true,
+        "@metamask/smart-transactions-controller>@metamask/controllers>ethereumjs-wallet": true,
+        "@metamask/smart-transactions-controller>@metamask/controllers>nanoid": true,
+        "browserify>buffer": true,
+        "browserify>events": true,
+        "deep-freeze-strict": true,
+        "eslint>fast-deep-equal": true,
+        "eth-ens-namehash": true,
+        "eth-keyring-controller": true,
+        "eth-query": true,
+        "eth-rpc-errors": true,
+        "eth-sig-util": true,
+        "ethereumjs-util": true,
+        "ethjs>ethjs-unit": true,
+        "immer": true,
+        "json-rpc-engine": true,
+        "jsonschema": true,
+        "punycode": true,
+        "single-call-balance-checker-abi": true,
+        "uuid": true
+      }
+    },
+    "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry": {
+      "packages": {
+        "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs": true
+      }
+    },
+    "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs": {
+      "globals": {
+        "clearInterval": true,
+        "setInterval": true
+      },
+      "packages": {
+        "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs>bn.js": true,
+        "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs>ethjs-abi": true,
+        "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs>ethjs-contract": true,
+        "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs>ethjs-query": true,
+        "browserify>buffer": true,
+        "ethjs>ethjs-filter": true,
+        "ethjs>ethjs-provider-http": true,
+        "ethjs>ethjs-unit": true,
+        "ethjs>ethjs-util": true,
+        "ethjs>js-sha3": true,
+        "ethjs>number-to-bn": true
+      }
+    },
+    "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs>ethjs-abi": {
+      "packages": {
+        "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs>bn.js": true,
+        "browserify>buffer": true,
+        "ethjs>js-sha3": true,
+        "ethjs>number-to-bn": true
+      }
+    },
+    "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs>ethjs-contract": {
+      "packages": {
+        "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs>ethjs-contract>ethjs-abi": true,
+        "ethjs-query>babel-runtime": true,
+        "ethjs>ethjs-filter": true,
+        "ethjs>ethjs-util": true,
+        "ethjs>js-sha3": true,
+        "promise-to-callback": true
+      }
+    },
+    "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs>ethjs-contract>ethjs-abi": {
+      "packages": {
+        "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs>bn.js": true,
+        "browserify>buffer": true,
+        "ethjs>js-sha3": true,
+        "ethjs>number-to-bn": true
+      }
+    },
+    "@metamask/smart-transactions-controller>@metamask/controllers>eth-method-registry>ethjs>ethjs-query": {
+      "globals": {
+        "console": true
+      },
+      "packages": {
+        "ethjs-query>babel-runtime": true,
+        "ethjs-query>ethjs-format": true,
+        "ethjs-query>ethjs-rpc": true,
+        "promise-to-callback": true
+      }
+    },
+    "@metamask/smart-transactions-controller>@metamask/controllers>ethereumjs-wallet": {
+      "packages": {
+        "@metamask/smart-transactions-controller>@metamask/controllers>ethereumjs-wallet>uuid": true,
+        "@truffle/codec>utf8": true,
+        "browserify>buffer": true,
+        "browserify>crypto-browserify": true,
+        "ethereumjs-util": true,
+        "ethereumjs-util>ethereum-cryptography": true,
+        "ethereumjs-wallet>aes-js": true,
+        "ethereumjs-wallet>bs58check": true,
+        "ethereumjs-wallet>randombytes": true,
+        "ethers>@ethersproject/json-wallets>scrypt-js": true
+      }
+    },
+    "@metamask/smart-transactions-controller>@metamask/controllers>ethereumjs-wallet>uuid": {
+      "globals": {
+        "crypto": true,
+        "msCrypto": true
+      }
+    },
     "@metamask/smart-transactions-controller>@metamask/controllers>nanoid": {
       "globals": {
         "crypto.getRandomValues": true
diff --git a/lavamoat/build-system/policy.json b/lavamoat/build-system/policy.json
index b50930cc5..de3161d63 100644
--- a/lavamoat/build-system/policy.json
+++ b/lavamoat/build-system/policy.json
@@ -1187,6 +1187,16 @@
         "typescript": true
       }
     },
+    "addons-linter>postcss>picocolors": {
+      "builtin": {
+        "tty.isatty": true
+      },
+      "globals": {
+        "process.argv.includes": true,
+        "process.env": true,
+        "process.platform": true
+      }
+    },
     "babelify": {
       "builtin": {
         "path.extname": true,
@@ -3206,106 +3216,58 @@
         "fancy-log": true,
         "gulp-autoprefixer>autoprefixer": true,
         "gulp-autoprefixer>postcss": true,
-        "gulp-autoprefixer>through2": true,
         "gulp-zip>plugin-error": true,
+        "through2": true,
         "vinyl-sourcemaps-apply": true
       }
     },
     "gulp-autoprefixer>autoprefixer": {
       "globals": {
-        "process.cwd": true
+        "console": true,
+        "process.cwd": true,
+        "process.env.AUTOPREFIXER_GRID": true
       },
       "packages": {
-        "gulp-autoprefixer>autoprefixer>browserslist": true,
-        "gulp-autoprefixer>autoprefixer>postcss-value-parser": true,
+        "addons-linter>postcss>picocolors": true,
+        "gulp-autoprefixer>autoprefixer>fraction.js": true,
         "gulp-autoprefixer>postcss": true,
+        "stylelint>autoprefixer>browserslist": true,
         "stylelint>autoprefixer>caniuse-lite": true,
         "stylelint>autoprefixer>normalize-range": true,
-        "stylelint>autoprefixer>num2fraction": true
+        "stylelint>postcss-value-parser": true
       }
     },
-    "gulp-autoprefixer>autoprefixer>browserslist": {
-      "builtin": {
-        "fs.existsSync": true,
-        "fs.readFileSync": true,
-        "fs.statSync": true,
-        "path.basename": true,
-        "path.dirname": true,
-        "path.join": true,
-        "path.resolve": true
-      },
+    "gulp-autoprefixer>autoprefixer>fraction.js": {
       "globals": {
-        "console.warn": true,
-        "process.env.BROWSERSLIST": true,
-        "process.env.BROWSERSLIST_CONFIG": true,
-        "process.env.BROWSERSLIST_DISABLE_CACHE": true,
-        "process.env.BROWSERSLIST_ENV": true,
-        "process.env.BROWSERSLIST_STATS": true,
-        "process.env.NODE_ENV": true
-      },
-      "packages": {
-        "stylelint>autoprefixer>browserslist>electron-to-chromium": true,
-        "stylelint>autoprefixer>caniuse-lite": true
+        "define": true
       }
     },
     "gulp-autoprefixer>postcss": {
       "builtin": {
-        "fs": true,
-        "path": true
+        "fs.existsSync": true,
+        "fs.readFileSync": true,
+        "path.dirname": true,
+        "path.isAbsolute": true,
+        "path.join": true,
+        "path.relative": true,
+        "path.resolve": true,
+        "path.sep": true,
+        "url.fileURLToPath": true,
+        "url.pathToFileURL": true
       },
       "globals": {
         "Buffer": true,
+        "URL": true,
         "atob": true,
         "btoa": true,
-        "console": true
+        "console": true,
+        "process.env.LANG": true,
+        "process.env.NODE_ENV": true
       },
       "packages": {
-        "gulp-autoprefixer>postcss>chalk": true,
-        "gulp-autoprefixer>postcss>source-map": true,
-        "gulp-autoprefixer>postcss>supports-color": true
-      }
-    },
-    "gulp-autoprefixer>postcss>chalk": {
-      "globals": {
-        "process.env.TERM": true,
-        "process.platform": true
-      },
-      "packages": {
-        "gulp-autoprefixer>postcss>chalk>ansi-styles": true,
-        "gulp-autoprefixer>postcss>supports-color": true,
-        "mocha>escape-string-regexp": true
-      }
-    },
-    "gulp-autoprefixer>postcss>chalk>ansi-styles": {
-      "packages": {
-        "@metamask/jazzicon>color>color-convert": true
-      }
-    },
-    "gulp-autoprefixer>postcss>supports-color": {
-      "builtin": {
-        "os.release": true
-      },
-      "globals": {
-        "process.env": true,
-        "process.platform": true,
-        "process.stderr": true,
-        "process.stdout": true,
-        "process.versions.node.split": true
-      },
-      "packages": {
-        "mocha>supports-color>has-flag": true
-      }
-    },
-    "gulp-autoprefixer>through2": {
-      "builtin": {
-        "util.inherits": true
-      },
-      "globals": {
-        "process.nextTick": true
-      },
-      "packages": {
-        "readable-stream": true,
-        "watchify>xtend": true
+        "addons-linter>postcss>picocolors": true,
+        "addons-linter>postcss>source-map-js": true,
+        "gulp-autoprefixer>postcss>nanoid": true
       }
     },
     "gulp-dart-sass": {
@@ -6453,9 +6415,9 @@
         "stylelint>autoprefixer>caniuse-lite": true,
         "stylelint>autoprefixer>normalize-range": true,
         "stylelint>autoprefixer>num2fraction": true,
+        "stylelint>autoprefixer>picocolors": true,
         "stylelint>postcss": true,
-        "stylelint>postcss-value-parser": true,
-        "stylelint>postcss>picocolors": true
+        "stylelint>postcss-value-parser": true
       }
     },
     "stylelint>autoprefixer>browserslist": {
@@ -6486,6 +6448,16 @@
         "stylelint>autoprefixer>caniuse-lite": true
       }
     },
+    "stylelint>autoprefixer>picocolors": {
+      "builtin": {
+        "tty.isatty": true
+      },
+      "globals": {
+        "process.argv.includes": true,
+        "process.env": true,
+        "process.platform": true
+      }
+    },
     "stylelint>chalk": {
       "packages": {
         "chalk>ansi-styles": true,
diff --git a/package.json b/package.json
index a52646d89..90f546837 100644
--- a/package.json
+++ b/package.json
@@ -84,7 +84,6 @@
   },
   "resolutions": {
     "**/regenerator-runtime": "^0.13.7",
-    "**/caniuse-lite": "^1.0.30001312",
     "**/cross-fetch": "^3.1.5",
     "**/configstore/dot-prop": "^5.1.1",
     "**/ethers/elliptic": "^6.5.4",
@@ -112,7 +111,7 @@
     "@keystonehq/metamask-airgapped-keyring": "^0.6.1",
     "@material-ui/core": "^4.11.0",
     "@metamask/contract-metadata": "^1.31.0",
-    "@metamask/controllers": "^32.0.2",
+    "@metamask/controllers": "^33.0.0",
     "@metamask/design-tokens": "^1.9.0",
     "@metamask/eth-json-rpc-infura": "^7.0.0",
     "@metamask/eth-ledger-bridge-keyring": "^0.13.0",
@@ -122,13 +121,13 @@
     "@metamask/logo": "^3.1.1",
     "@metamask/metamask-eth-abis": "^3.0.0",
     "@metamask/obs-store": "^5.0.0",
-    "@metamask/post-message-stream": "^4.0.0",
+    "@metamask/post-message-stream": "^6.0.0",
     "@metamask/providers": "^10.0.0",
-    "@metamask/rpc-methods": "^0.22.2",
+    "@metamask/rpc-methods": "^0.23.0",
     "@metamask/slip44": "^2.1.0",
     "@metamask/smart-transactions-controller": "^3.0.0",
-    "@metamask/snap-controllers": "^0.22.2",
-    "@metamask/snap-utils": "^0.22.2",
+    "@metamask/snap-controllers": "^0.23.0",
+    "@metamask/snap-utils": "^0.23.0",
     "@ngraveio/bc-ur": "^1.1.6",
     "@popperjs/core": "^2.4.0",
     "@reduxjs/toolkit": "^1.6.2",
@@ -187,7 +186,7 @@
     "localforage": "^1.9.0",
     "lodash": "^4.17.21",
     "loglevel": "^1.4.1",
-    "luxon": "^1.26.0",
+    "luxon": "^3.1.0",
     "nanoid": "^2.1.6",
     "nonce-tracker": "^1.0.0",
     "obj-multiplex": "^1.0.0",
@@ -325,11 +324,11 @@
     "fast-glob": "^3.2.2",
     "fs-extra": "^8.1.0",
     "ganache": "^v7.0.4",
-    "geckodriver": "^1.21.0",
+    "geckodriver": "^3.2.0",
     "gh-pages": "^3.2.3",
     "globby": "^11.0.4",
     "gulp": "^4.0.2",
-    "gulp-autoprefixer": "^5.0.0",
+    "gulp-autoprefixer": "^8.0.0",
     "gulp-dart-sass": "^1.0.2",
     "gulp-livereload": "4.0.0",
     "gulp-rename": "^2.0.0",
diff --git a/patches/luxon+1.26.0.patch b/patches/luxon+3.1.0.patch
similarity index 61%
rename from patches/luxon+1.26.0.patch
rename to patches/luxon+3.1.0.patch
index 6c4482216..0cb7a6e65 100644
--- a/patches/luxon+1.26.0.patch
+++ b/patches/luxon+3.1.0.patch
@@ -1,20 +1,22 @@
 diff --git a/node_modules/luxon/build/cjs-browser/luxon.js b/node_modules/luxon/build/cjs-browser/luxon.js
-index 206a47a..5556d1d 100644
+index 9ab2b9f..14c2891 100644
 --- a/node_modules/luxon/build/cjs-browser/luxon.js
 +++ b/node_modules/luxon/build/cjs-browser/luxon.js
-@@ -7243,13 +7243,13 @@ var DateTime = /*#__PURE__*/function () {
+@@ -7373,7 +7373,7 @@ var DateTime = /*#__PURE__*/function () {
     */
    ;
  
--  _proto.toLocaleString = function toLocaleString(opts) {
-+  Reflect.defineProperty(_proto, 'toLocaleString', { value: function toLocaleString(opts) {
-     if (opts === void 0) {
-       opts = DATE_SHORT;
+-  _proto.toLocaleString = function toLocaleString(formatOpts, opts) {
++  Reflect.defineProperty(_proto, 'toLocaleString', { value: function toLocaleString(formatOpts, opts) {
+     if (formatOpts === void 0) {
+       formatOpts = DATE_SHORT;
+     }
+@@ -7383,7 +7383,7 @@ var DateTime = /*#__PURE__*/function () {
      }
  
-     return this.isValid ? Formatter.create(this.loc.clone(opts), opts).formatDateTime(this) : INVALID$2;
+     return this.isValid ? Formatter.create(this.loc.clone(opts), formatOpts).formatDateTime(this) : INVALID;
 -  }
 +  }})
    /**
     * Returns an array of format "parts", meaning individual tokens along with metadata. This is allows callers to post-process individual sections of the formatted output.
-    * Defaults to the system's locale if no locale has been specified
\ No newline at end of file
+    * Defaults to the system's locale if no locale has been specified
diff --git a/shared/constants/app.ts b/shared/constants/app.ts
index 496d48434..8ebf53cba 100644
--- a/shared/constants/app.ts
+++ b/shared/constants/app.ts
@@ -57,6 +57,13 @@ export const MESSAGE_TYPE = {
   ///: END:ONLY_INCLUDE_IN
 } as const;
 
+/**
+ * Custom messages to send and be received by the extension
+ */
+export const EXTENSION_MESSAGES = {
+  READY: 'METAMASK_EXTENSION_READY',
+} as const;
+
 /**
  * The different kinds of subjects that MetaMask may interact with, including
  * third parties and itself (e.g. when the background communicated with the UI).
diff --git a/shared/constants/network.ts b/shared/constants/network.ts
index 89dbe4ec2..a94617b86 100644
--- a/shared/constants/network.ts
+++ b/shared/constants/network.ts
@@ -274,6 +274,7 @@ export const CURRENCY_SYMBOLS = {
   USDC: 'USDC',
   USDT: 'USDT',
   WETH: 'WETH',
+  OPTIMISM: 'OP',
 } as const;
 
 /**
@@ -531,6 +532,7 @@ export const NATIVE_CURRENCY_TOKEN_IMAGE_MAP = {
   [CURRENCY_SYMBOLS.BNB]: BNB_TOKEN_IMAGE_URL,
   [CURRENCY_SYMBOLS.MATIC]: MATIC_TOKEN_IMAGE_URL,
   [CURRENCY_SYMBOLS.AVALANCHE]: AVAX_TOKEN_IMAGE_URL,
+  [CURRENCY_SYMBOLS.OPTIMISM]: OPTIMISM_TOKEN_IMAGE_URL,
 } as const;
 
 export const INFURA_BLOCKED_KEY = 'countryBlocked';
diff --git a/shared/constants/permissions.ts b/shared/constants/permissions.ts
index 49c281f13..dbd39b51e 100644
--- a/shared/constants/permissions.ts
+++ b/shared/constants/permissions.ts
@@ -24,6 +24,7 @@ export const EndowmentPermissions = Object.freeze({
   'endowment:network-access': 'endowment:network-access',
   'endowment:long-running': 'endowment:long-running',
   'endowment:transaction-insight': 'endowment:transaction-insight',
+  'endowment:cronjob': 'endowment:cronjob',
 } as const);
 
 // Methods / permissions in external packages that we are temporarily excluding.
diff --git a/shared/constants/swaps.js b/shared/constants/swaps.js
index 22629bc1a..37f9e30d2 100644
--- a/shared/constants/swaps.js
+++ b/shared/constants/swaps.js
@@ -1,4 +1,5 @@
 import {
+  ETH_TOKEN_IMAGE_URL,
   TEST_ETH_TOKEN_IMAGE_URL,
   BNB_TOKEN_IMAGE_URL,
   MATIC_TOKEN_IMAGE_URL,
@@ -23,7 +24,7 @@ export const ETH_SWAPS_TOKEN_OBJECT = {
   name: 'Ether',
   address: DEFAULT_TOKEN_ADDRESS,
   decimals: 18,
-  iconUrl: './images/black-eth-logo.svg',
+  iconUrl: ETH_TOKEN_IMAGE_URL,
 };
 
 export const BNB_SWAPS_TOKEN_OBJECT = {
@@ -66,6 +67,10 @@ export const GOERLI_SWAPS_TOKEN_OBJECT = {
   iconUrl: TEST_ETH_TOKEN_IMAGE_URL,
 };
 
+export const ARBITRUM_SWAPS_TOKEN_OBJECT = { ...ETH_SWAPS_TOKEN_OBJECT };
+
+export const OPTIMISM_SWAPS_TOKEN_OBJECT = { ...ETH_SWAPS_TOKEN_OBJECT };
+
 // A gas value for ERC20 approve calls that should be sufficient for all ERC20 approve implementations
 export const DEFAULT_ERC20_APPROVE_GAS = '0x1d4c0';
 
@@ -77,8 +82,9 @@ const BSC_CONTRACT_ADDRESS = '0x1a1ec25dc08e98e5e93f1104b5e5cdd298707d31';
 
 // It's the same as we use for BSC.
 const POLYGON_CONTRACT_ADDRESS = '0x1a1ec25dc08e98e5e93f1104b5e5cdd298707d31';
-
 const AVALANCHE_CONTRACT_ADDRESS = '0x1a1ec25dc08e98e5e93f1104b5e5cdd298707d31';
+const OPTIMISM_CONTRACT_ADDRESS = '0x9dDA6Ef3D919c9bC8885D5560999A3640431e8e6';
+const ARBITRUM_CONTRACT_ADDRESS = '0x9dDA6Ef3D919c9bC8885D5560999A3640431e8e6';
 
 export const WETH_CONTRACT_ADDRESS =
   '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2';
@@ -91,6 +97,11 @@ export const WMATIC_CONTRACT_ADDRESS =
 export const WAVAX_CONTRACT_ADDRESS =
   '0xb31f66aa3c1e785363f0875a1b74e27b85fd66c7';
 
+export const WETH_OPTIMISM_CONTRACT_ADDRESS =
+  '0x4200000000000000000000000000000000000006';
+export const WETH_ARBITRUM_CONTRACT_ADDRESS =
+  '0x82aF49447D8a07e3bd95BD0d56f35241523fBab1';
+
 const SWAPS_TESTNET_CHAIN_ID = '0x539';
 
 export const SWAPS_API_V2_BASE_URL = 'https://swap.metaswap.codefi.network';
@@ -105,6 +116,8 @@ const MAINNET_DEFAULT_BLOCK_EXPLORER_URL = 'https://etherscan.io/';
 const GOERLI_DEFAULT_BLOCK_EXPLORER_URL = 'https://goerli.etherscan.io/';
 const POLYGON_DEFAULT_BLOCK_EXPLORER_URL = 'https://polygonscan.com/';
 const AVALANCHE_DEFAULT_BLOCK_EXPLORER_URL = 'https://snowtrace.io/';
+const OPTIMISM_DEFAULT_BLOCK_EXPLORER_URL = 'https://optimistic.etherscan.io/';
+const ARBITRUM_DEFAULT_BLOCK_EXPLORER_URL = 'https://arbiscan.io/';
 
 export const ALLOWED_PROD_SWAPS_CHAIN_IDS = [
   CHAIN_IDS.MAINNET,
@@ -112,6 +125,8 @@ export const ALLOWED_PROD_SWAPS_CHAIN_IDS = [
   CHAIN_IDS.BSC,
   CHAIN_IDS.POLYGON,
   CHAIN_IDS.AVALANCHE,
+  CHAIN_IDS.OPTIMISM,
+  CHAIN_IDS.ARBITRUM,
 ];
 
 export const ALLOWED_DEV_SWAPS_CHAIN_IDS = [
@@ -131,6 +146,8 @@ export const SWAPS_CHAINID_CONTRACT_ADDRESS_MAP = {
   [CHAIN_IDS.POLYGON]: POLYGON_CONTRACT_ADDRESS,
   [CHAIN_IDS.GOERLI]: TESTNET_CONTRACT_ADDRESS,
   [CHAIN_IDS.AVALANCHE]: AVALANCHE_CONTRACT_ADDRESS,
+  [CHAIN_IDS.OPTIMISM]: OPTIMISM_CONTRACT_ADDRESS,
+  [CHAIN_IDS.ARBITRUM]: ARBITRUM_CONTRACT_ADDRESS,
 };
 
 export const SWAPS_WRAPPED_TOKENS_ADDRESSES = {
@@ -140,6 +157,8 @@ export const SWAPS_WRAPPED_TOKENS_ADDRESSES = {
   [CHAIN_IDS.POLYGON]: WMATIC_CONTRACT_ADDRESS,
   [CHAIN_IDS.GOERLI]: WETH_GOERLI_CONTRACT_ADDRESS,
   [CHAIN_IDS.AVALANCHE]: WAVAX_CONTRACT_ADDRESS,
+  [CHAIN_IDS.OPTIMISM]: WETH_OPTIMISM_CONTRACT_ADDRESS,
+  [CHAIN_IDS.ARBITRUM]: WETH_ARBITRUM_CONTRACT_ADDRESS,
 };
 
 export const ALLOWED_CONTRACT_ADDRESSES = {
@@ -167,6 +186,14 @@ export const ALLOWED_CONTRACT_ADDRESSES = {
     SWAPS_CHAINID_CONTRACT_ADDRESS_MAP[CHAIN_IDS.AVALANCHE],
     SWAPS_WRAPPED_TOKENS_ADDRESSES[CHAIN_IDS.AVALANCHE],
   ],
+  [CHAIN_IDS.OPTIMISM]: [
+    SWAPS_CHAINID_CONTRACT_ADDRESS_MAP[CHAIN_IDS.OPTIMISM],
+    SWAPS_WRAPPED_TOKENS_ADDRESSES[CHAIN_IDS.OPTIMISM],
+  ],
+  [CHAIN_IDS.ARBITRUM]: [
+    SWAPS_CHAINID_CONTRACT_ADDRESS_MAP[CHAIN_IDS.ARBITRUM],
+    SWAPS_WRAPPED_TOKENS_ADDRESSES[CHAIN_IDS.ARBITRUM],
+  ],
 };
 
 export const SWAPS_CHAINID_DEFAULT_TOKEN_MAP = {
@@ -176,6 +203,8 @@ export const SWAPS_CHAINID_DEFAULT_TOKEN_MAP = {
   [CHAIN_IDS.POLYGON]: MATIC_SWAPS_TOKEN_OBJECT,
   [CHAIN_IDS.GOERLI]: GOERLI_SWAPS_TOKEN_OBJECT,
   [CHAIN_IDS.AVALANCHE]: AVAX_SWAPS_TOKEN_OBJECT,
+  [CHAIN_IDS.OPTIMISM]: OPTIMISM_SWAPS_TOKEN_OBJECT,
+  [CHAIN_IDS.ARBITRUM]: ARBITRUM_SWAPS_TOKEN_OBJECT,
 };
 
 export const SWAPS_CHAINID_DEFAULT_BLOCK_EXPLORER_URL_MAP = {
@@ -184,6 +213,8 @@ export const SWAPS_CHAINID_DEFAULT_BLOCK_EXPLORER_URL_MAP = {
   [CHAIN_IDS.POLYGON]: POLYGON_DEFAULT_BLOCK_EXPLORER_URL,
   [CHAIN_IDS.GOERLI]: GOERLI_DEFAULT_BLOCK_EXPLORER_URL,
   [CHAIN_IDS.AVALANCHE]: AVALANCHE_DEFAULT_BLOCK_EXPLORER_URL,
+  [CHAIN_IDS.OPTIMISM]: OPTIMISM_DEFAULT_BLOCK_EXPLORER_URL,
+  [CHAIN_IDS.ARBITRUM]: ARBITRUM_DEFAULT_BLOCK_EXPLORER_URL,
 };
 
 export const ETHEREUM = 'ethereum';
@@ -191,6 +222,8 @@ export const POLYGON = 'polygon';
 export const BSC = 'bsc';
 export const GOERLI = 'goerli';
 export const AVALANCHE = 'avalanche';
+export const OPTIMISM = 'optimism';
+export const ARBITRUM = 'arbitrum';
 
 export const SWAPS_CLIENT_ID = 'extension';
 
diff --git a/shared/constants/tokens.js b/shared/constants/tokens.js
index c846fff18..ef9e7f76a 100644
--- a/shared/constants/tokens.js
+++ b/shared/constants/tokens.js
@@ -12,11 +12,11 @@ export const LISTED_CONTRACT_ADDRESSES = Object.keys(contractMap).map(
 /**
  * @typedef {object} TokenDetails
  * @property {string} address - The address of the selected 'TOKEN' or
- *  'COLLECTIBLE' contract.
+ *  'NFT' contract.
  * @property {string} [symbol] - The symbol of the token.
  * @property {number} [decimals] - The number of decimals of the selected
  *  'ERC20' asset.
- * @property {number} [tokenId] - The id of the selected 'COLLECTIBLE' asset.
+ * @property {number} [tokenId] - The id of the selected 'NFT' asset.
  * @property {TokenStandardStrings} [standard] - The standard of the selected
  *  asset.
  * @property {boolean} [isERC721] - True when the asset is a ERC721 token.
diff --git a/shared/constants/transaction.js b/shared/constants/transaction.js
index 9564f066c..37c2e45e3 100644
--- a/shared/constants/transaction.js
+++ b/shared/constants/transaction.js
@@ -364,7 +364,7 @@ export const TRANSACTION_EVENTS = {
  * @property {'NATIVE'} NATIVE - The native asset for the current network, such
  *  as ETH
  * @property {'TOKEN'} TOKEN - An ERC20 token.
- * @property {'COLLECTIBLE'} COLLECTIBLE - An ERC721 or ERC1155 token.
+ * @property {'NFT'} NFT - An ERC721 or ERC1155 token.
  * @property {'UNKNOWN'} UNKNOWN - A transaction interacting with a contract
  *  that isn't a token method interaction will be marked as dealing with an
  *  unknown asset type.
@@ -385,7 +385,7 @@ export const TRANSACTION_EVENTS = {
 export const ASSET_TYPES = {
   NATIVE: 'NATIVE',
   TOKEN: 'TOKEN',
-  COLLECTIBLE: 'COLLECTIBLE',
+  NFT: 'NFT',
   UNKNOWN: 'UNKNOWN',
 };
 
diff --git a/shared/lib/error-utils.js b/shared/lib/error-utils.js
index c0baad2c1..0dc11e91c 100644
--- a/shared/lib/error-utils.js
+++ b/shared/lib/error-utils.js
@@ -32,7 +32,7 @@ const getLocaleContext = (currentLocaleMessages, enLocaleMessages) => {
   };
 };
 
-export async function getErrorHtml(supportLink, metamaskState) {
+export async function getErrorHtml(errorKey, supportLink, metamaskState) {
   let response, preferredLocale;
   if (metamaskState?.currentLocale) {
     preferredLocale = metamaskState.currentLocale;
@@ -50,26 +50,40 @@ export async function getErrorHtml(supportLink, metamaskState) {
   const { currentLocaleMessages, enLocaleMessages } = response;
   const t = getLocaleContext(currentLocaleMessages, enLocaleMessages);
 
+  /**
+   * The pattern ${errorKey === 'troubleStarting' ? t('troubleStarting') : ''}
+   * is neccessary because we we need linter to see the string
+   * of the locale keys. If we use the variable directly, the linter will not
+   * see the string and will not be able to check if the locale key exists.
+   */
   return `
     <div class="critical-error">
-      <div class="critical-error__alert">
-        <p class="critical-error__alert__message">
-          ${t('troubleStarting')}
-        </p>
-        <button id='critical-error-button' class="critical-error__alert__button">
-          ${t('restartMetamask')}
-        </button>
+      <div class="critical-error__icon">
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M13.2325 9.78823L9.14559 1.96347C8.59641 0.910661 7.83651 0.333313 6.99998 0.333313C6.16345 0.333313 5.40354 0.910661 4.85437 1.96347L0.767492 9.78823C0.250247 10.7867 0.192775 11.7444 0.607848 12.4984C1.02292 13.2523 1.8403 13.6666 2.9131 13.6666H11.0869C12.1597 13.6666 12.977 13.2523 13.3921 12.4984C13.8072 11.7444 13.7497 10.7799 13.2325 9.78823ZM6.52105 5.08794C6.52105 4.80945 6.73816 4.57852 6.99998 4.57852C7.26179 4.57852 7.47891 4.80945 7.47891 5.08794V8.4841C7.47891 8.76259 7.26179 8.99353 6.99998 8.99353C6.73816 8.99353 6.52105 8.76259 6.52105 8.4841V5.08794ZM7.45337 11.0041C7.42144 11.0312 7.38951 11.0584 7.35758 11.0856C7.31927 11.1127 7.28095 11.1331 7.24264 11.1467C7.20432 11.1671 7.16601 11.1807 7.12131 11.1874C7.08299 11.1942 7.03829 11.201 6.99998 11.201C6.96166 11.201 6.91696 11.1942 6.87226 11.1874C6.83395 11.1807 6.79563 11.1671 6.75732 11.1467C6.71901 11.1331 6.68069 11.1127 6.64238 11.0856C6.61045 11.0584 6.57852 11.0312 6.54659 11.0041C6.43165 10.875 6.3614 10.6984 6.3614 10.5218C6.3614 10.3452 6.43165 10.1686 6.54659 10.0395C6.57852 10.0124 6.61045 9.98521 6.64238 9.95804C6.68069 9.93087 6.71901 9.91049 6.75732 9.8969C6.79563 9.87653 6.83395 9.86294 6.87226 9.85615C6.95528 9.83577 7.04468 9.83577 7.12131 9.85615C7.16601 9.86294 7.20432 9.87653 7.24264 9.8969C7.28095 9.91049 7.31927 9.93087 7.35758 9.95804C7.38951 9.98521 7.42144 10.0124 7.45337 10.0395C7.56831 10.1686 7.63855 10.3452 7.63855 10.5218C7.63855 10.6984 7.56831 10.875 7.45337 11.0041Z" fill="#F66A0A"/>
+        </svg>
+      </div>
+      <div class="critical-error__dscription">
+        <div class="critical-error__alert">
+          <p class="critical-error__alert__message">
+            ${errorKey === 'troubleStarting' ? t('troubleStarting') : ''}
+            ${errorKey === 'somethingIsWrong' ? t('somethingIsWrong') : ''}
+          </p>
+          <span id='critical-error-button' class="critical-error__alert__action-link">
+            ${t('restartMetamask')}
+          </span>
+        </div>
+        <p class="critical-error__paragraph">
+          ${t('stillGettingMessage')}
+          <a
+            href=${supportLink}
+            class="critical-error__paragraph__link"
+            target="_blank"
+            rel="noopener noreferrer">
+              ${t('sendBugReport')}
+            </a>
+        </p>
       </div>
-      <p class="critical-error__paragraph">
-        ${t('stillGettingMessage')}
-        <a
-          href=${supportLink}
-          class="critical-error__paragraph__link"
-          target="_blank"
-          rel="noopener noreferrer">
-            ${t('sendBugReport')}
-          </a>
-      </p>
     </div>
     `;
 }
diff --git a/shared/lib/error-utils.test.js b/shared/lib/error-utils.test.js
index e1a121d7f..de846aa8b 100644
--- a/shared/lib/error-utils.test.js
+++ b/shared/lib/error-utils.test.js
@@ -33,7 +33,11 @@ describe('Error utils Tests', function () {
     };
 
     fetchLocale.mockReturnValue(mockStore.localeMessages.current);
-    const errorHtml = await getErrorHtml(SUPPORT_LINK, mockStore.metamask);
+    const errorHtml = await getErrorHtml(
+      'troubleStarting',
+      SUPPORT_LINK,
+      mockStore.metamask,
+    );
     const currentLocale = mockStore.localeMessages.current;
     const troubleStartingMessage = currentLocale.troubleStarting.message;
     const restartMetamaskMessage = currentLocale.restartMetamask.message;
diff --git a/shared/lib/swaps-utils.js b/shared/lib/swaps-utils.js
index 6981ef255..c1393abe3 100644
--- a/shared/lib/swaps-utils.js
+++ b/shared/lib/swaps-utils.js
@@ -146,7 +146,6 @@ export const getBaseApi = function (type, chainId = CHAIN_IDS.MAINNET) {
   // eslint-disable-next-line no-param-reassign
   chainId = TEST_CHAIN_IDS.includes(chainId) ? CHAIN_IDS.MAINNET : chainId;
   const baseUrl = getBaseUrlForNewSwapsApi(type, chainId);
-  const chainIdDecimal = chainId && parseInt(chainId, 16);
   if (!baseUrl) {
     throw new Error(`Swaps API calls are disabled for chainId: ${chainId}`);
   }
@@ -164,8 +163,7 @@ export const getBaseApi = function (type, chainId = CHAIN_IDS.MAINNET) {
     case 'gasPrices':
       return `${baseUrl}/gasPrices`;
     case 'network':
-      // Only use v2 for this endpoint.
-      return `${SWAPS_API_V2_BASE_URL}/networks/${chainIdDecimal}`;
+      return baseUrl;
     default:
       throw new Error('getBaseApi requires an api call type');
   }
diff --git a/shared/modules/browser-runtime.utils.js b/shared/modules/browser-runtime.utils.js
new file mode 100644
index 000000000..8f7b2afe7
--- /dev/null
+++ b/shared/modules/browser-runtime.utils.js
@@ -0,0 +1,55 @@
+/**
+ * Utility Functions to support browser.runtime JavaScript API
+ */
+
+import browser from 'webextension-polyfill';
+import log from 'loglevel';
+
+/**
+ * Returns an Error if extension.runtime.lastError is present
+ * this is a workaround for the non-standard error object that's used
+ *
+ * According to the docs, we are expected to check lastError in runtime API callbacks:
+ * "
+ * If you call an asynchronous function that may set lastError, you are expected to
+ * check for the error when you handle the result of the function. If lastError has been
+ * set and you don't check it within the callback function, then an error will be raised.
+ * "
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/lastError}
+ * @returns {Error|undefined}
+ */
+export function checkForLastError() {
+  const { lastError } = browser.runtime;
+  if (!lastError) {
+    return undefined;
+  }
+  // if it quacks like an Error, its an Error
+  if (lastError.stack && lastError.message) {
+    return lastError;
+  }
+  // repair incomplete error object (eg chromium v77)
+  return new Error(lastError.message);
+}
+
+/** @returns {Error|undefined} */
+export function checkForLastErrorAndLog() {
+  const error = checkForLastError();
+
+  if (error) {
+    log.error(error);
+  }
+
+  return error;
+}
+
+/** @returns {Error|undefined} */
+export function checkForLastErrorAndWarn() {
+  const error = checkForLastError();
+
+  if (error) {
+    console.warn(error);
+  }
+
+  return error;
+}
diff --git a/shared/modules/browser-runtime.utils.test.js b/shared/modules/browser-runtime.utils.test.js
new file mode 100644
index 000000000..b116f2d7c
--- /dev/null
+++ b/shared/modules/browser-runtime.utils.test.js
@@ -0,0 +1,54 @@
+import sinon from 'sinon';
+import browser from 'webextension-polyfill';
+import log from 'loglevel';
+import * as BrowserRuntimeUtil from './browser-runtime.utils';
+
+const mockLastError = { message: 'error', stack: [] };
+
+describe('Browser Runtime Utils', () => {
+  beforeAll(() => {
+    sinon.replace(browser, 'runtime', {
+      lastError: undefined,
+    });
+  });
+
+  describe('checkForLastError', () => {
+    it('should return undefined if no lastError found', () => {
+      expect(BrowserRuntimeUtil.checkForLastError()).toBeUndefined();
+    });
+
+    it('should return the lastError (Error object) if lastError is found', () => {
+      sinon.stub(browser.runtime, 'lastError').value(mockLastError);
+
+      expect(BrowserRuntimeUtil.checkForLastError()).toStrictEqual(
+        mockLastError,
+      );
+    });
+
+    it('should return an Error object if the lastError is found with no stack', () => {
+      sinon
+        .stub(browser.runtime, 'lastError')
+        .value({ message: mockLastError.message });
+
+      const result = BrowserRuntimeUtil.checkForLastError();
+
+      expect(result).toStrictEqual(expect.any(Error));
+      expect(result).toHaveProperty('stack');
+      expect(result.message).toBe(mockLastError.message);
+    });
+  });
+
+  describe('checkForLastErrorAndLog', () => {
+    it('should log and return error if error was found', () => {
+      sinon.stub(browser.runtime, 'lastError').value({ ...mockLastError });
+      sinon.stub(log, 'error');
+
+      const result = BrowserRuntimeUtil.checkForLastErrorAndLog();
+
+      expect(log.error.calledWith(result)).toBeTruthy();
+      expect(result).toStrictEqual(mockLastError);
+
+      log.error.restore();
+    });
+  });
+});
diff --git a/shared/modules/transaction.utils.js b/shared/modules/transaction.utils.js
index 1cf471ed7..d7fd45801 100644
--- a/shared/modules/transaction.utils.js
+++ b/shared/modules/transaction.utils.js
@@ -259,7 +259,7 @@ export async function determineTransactionAssetType(
           assetType:
             details.standard === TOKEN_STANDARDS.ERC20
               ? ASSET_TYPES.TOKEN
-              : ASSET_TYPES.COLLECTIBLE,
+              : ASSET_TYPES.NFT,
           tokenStandard: details.standard,
         };
       }
diff --git a/shared/notifications/index.js b/shared/notifications/index.js
index 9a3cb0351..099350364 100644
--- a/shared/notifications/index.js
+++ b/shared/notifications/index.js
@@ -78,6 +78,10 @@ export const UI_NOTIFICATIONS = {
     id: 15,
     date: '2022-09-15',
   },
+  16: {
+    id: 16,
+    date: null,
+  },
 };
 
 export const getTranslatedUINotifications = (t, locale) => {
@@ -224,5 +228,16 @@ export const getTranslatedUINotifications = (t, locale) => {
           )
         : '',
     },
+    16: {
+      ...UI_NOTIFICATIONS[16],
+      title: t('notifications16Title'),
+      description: t('notifications16Description'),
+      actionText: t('notifications16ActionText'),
+      date: UI_NOTIFICATIONS[16].date
+        ? new Intl.DateTimeFormat(formattedLocale).format(
+            new Date(UI_NOTIFICATIONS[16].date),
+          )
+        : '',
+    },
   };
 };
diff --git a/test/data/mock-state.json b/test/data/mock-state.json
index a376803df..a83d6bb87 100644
--- a/test/data/mock-state.json
+++ b/test/data/mock-state.json
@@ -12,13 +12,17 @@
       "previousModalState": {
         "name": null
       }
-    }
+    },
+    "warning": null
   },
   "history": {
-    "mostRecentOverviewPage": "/"
+    "mostRecentOverviewPage": "/mostRecentOverviewPage"
   },
   "metamask": {
+    "usePhishDetect": true,
+    "participateInMetaMetrics": false,
     "gasEstimateType": "fee-market",
+    "showBetaHeader": false,
     "gasFeeEstimates": {
       "low": {
         "minWaitTimeEstimate": 180000,
@@ -46,6 +50,7 @@
       "priorityFeeTrend": "down",
       "networkCongestion": 0.90625
     },
+    "snaps": [{}],
     "preferences": {
       "hideZeroBalanceTokens": false,
       "showFiatInTestnets": false,
@@ -241,20 +246,6 @@
     "unapprovedEncryptionPublicKeyMsgCount": 0,
     "unapprovedTypedMessages": {},
     "unapprovedTypedMessagesCount": 0,
-    "send": {
-      "gasLimit": "0x5208",
-      "gasPrice": "0xee6b2800",
-      "gasTotal": "0x4c65c6294000",
-      "tokenBalance": null,
-      "from": "0xc42edfcc21ed14dda456aa0756c153f7985d8813",
-      "to": "",
-      "amount": "1bc16d674ec80000",
-      "memo": "",
-      "errors": {},
-      "maxModeOn": false,
-      "editingTransactionId": null,
-      "toNickname": ""
-    },
     "useTokenDetection": true,
     "advancedGasFee": {
       "maxBaseFee": "75",
@@ -1284,5 +1275,24 @@
         "origin": "tmashuang.github.io"
       }
     ]
+  },
+  "send": {
+    "amountMode": "INPUT",
+    "currentTransactionUUID": null,
+    "draftTransactions": {},
+    "eip1559support": false,
+    "gasEstimateIsLoading": true,
+    "gasEstimatePollToken": null,
+    "gasIsSetInModal": false,
+    "gasPriceEstimate": "0x0",
+    "gasLimitMinimum": "0x5208",
+    "gasTotalForLayer1": "0x0",
+    "recipientMode": "CONTACT_LIST",
+    "recipientInput": "",
+    "selectedAccount": {
+      "address": "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc",
+      "balance": "0x0"
+    },
+    "stage": "INACTIVE"
   }
 }
diff --git a/test/e2e/fixture-builder.js b/test/e2e/fixture-builder.js
index 0eca41d41..7717a8a9a 100644
--- a/test/e2e/fixture-builder.js
+++ b/test/e2e/fixture-builder.js
@@ -74,12 +74,12 @@ function defaultFixture() {
               src: 'images/token-detection.svg',
               width: '100%',
             },
-            isShown: true,
+            isShown: false,
           },
           11: {
             date: '2022-09-15',
             id: 11,
-            isShown: true,
+            isShown: false,
           },
           12: {
             date: '2022-05-18',
@@ -98,11 +98,16 @@ function defaultFixture() {
           14: {
             date: '2022-09-15',
             id: 14,
-            isShown: true,
+            isShown: false,
           },
           15: {
             date: '2022-09-15',
             id: 15,
+            isShown: false,
+          },
+          16: {
+            date: null,
+            id: 16,
             isShown: true,
           },
         },
@@ -225,7 +230,7 @@ function defaultFixture() {
         selectedAddress: '0x5cfe73b6021e818b776b421b1c4db2474086a7e1',
         theme: 'light',
         useBlockie: false,
-        useCollectibleDetection: false,
+        useNftDetection: false,
         useNonceField: false,
         usePhishDetect: true,
         useTokenDetection: false,
@@ -338,7 +343,7 @@ function onboardingFixture() {
         },
         theme: 'light',
         useBlockie: false,
-        useCollectibleDetection: false,
+        useNftDetection: false,
         useNonceField: false,
         usePhishDetect: true,
         useTokenDetection: false,
@@ -407,9 +412,9 @@ class FixtureBuilder {
 
   withCollectiblesController(data) {
     merge(
-      this.fixture.data.CollectiblesController
-        ? this.fixture.data.CollectiblesController
-        : (this.fixture.data.CollectiblesController = {}),
+      this.fixture.data.NftController
+        ? this.fixture.data.NftController
+        : (this.fixture.data.NftController = {}),
       data,
     );
     return this;
diff --git a/test/e2e/helpers.js b/test/e2e/helpers.js
index b3f74418a..d950f0c05 100644
--- a/test/e2e/helpers.js
+++ b/test/e2e/helpers.js
@@ -51,6 +51,8 @@ async function withFixtures(options, testSuite) {
   const phishingPageServer = new PhishingWarningPageServer();
 
   let webDriver;
+  let driver;
+  const errors = [];
   let failed = false;
   try {
     await ganacheServer.start(ganacheOptions);
@@ -110,8 +112,12 @@ async function withFixtures(options, testSuite) {
     ) {
       await ensureXServerIsRunning();
     }
-    const { driver } = await buildWebDriver(driverOptions);
-    webDriver = driver;
+    driver = (await buildWebDriver(driverOptions)).driver;
+    webDriver = driver.driver;
+
+    if (process.env.SELENIUM_BROWSER === 'chrome') {
+      await driver.checkBrowserForExceptions();
+    }
 
     await testSuite({
       driver,
@@ -120,7 +126,7 @@ async function withFixtures(options, testSuite) {
     });
 
     if (process.env.SELENIUM_BROWSER === 'chrome') {
-      const errors = await driver.checkBrowserForConsoleErrors(driver);
+      errors.concat(await driver.checkBrowserForConsoleErrors(driver));
       if (errors.length) {
         const errorReports = errors.map((err) => err.message);
         const errorMessage = `Errors found in browser console:\n${errorReports.join(
@@ -137,10 +143,20 @@ async function withFixtures(options, testSuite) {
     failed = true;
     if (webDriver) {
       try {
-        await webDriver.verboseReportOnFailure(title);
+        await driver.verboseReportOnFailure(title);
       } catch (verboseReportError) {
         console.error(verboseReportError);
       }
+      if (
+        errors.length === 0 &&
+        driver.exceptions.length > 0 &&
+        failOnConsoleError
+      ) {
+        const errorMessage = `Errors found in browser console:\n${driver.exceptions.join(
+          '\n',
+        )}`;
+        throw Error(errorMessage);
+      }
     }
     throw error;
   } finally {
@@ -151,7 +167,7 @@ async function withFixtures(options, testSuite) {
         await secondaryGanacheServer.quit();
       }
       if (webDriver) {
-        await webDriver.quit();
+        await driver.quit();
       }
       if (dapp) {
         for (let i = 0; i < numberOfDapps; i++) {
diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js
index 2a2f16dfb..347609a9f 100644
--- a/test/e2e/metamask-ui.spec.js
+++ b/test/e2e/metamask-ui.spec.js
@@ -458,10 +458,10 @@ describe('MetaMask', function () {
       await driver.delay(veryLargeDelayMs);
       await driver.clickElement({ text: 'Edit', tag: 'button' });
       await driver.delay(veryLargeDelayMs);
-      await driver.clickElement(
-        { text: 'Edit suggested gas fee', tag: 'button' },
-        10000,
-      );
+      await driver.clickElement({
+        text: 'Edit suggested gas fee',
+        tag: 'button',
+      });
       await driver.delay(veryLargeDelayMs);
       const inputs = await driver.findElements('input[type="number"]');
       const gasLimitInput = inputs[0];
@@ -576,10 +576,10 @@ describe('MetaMask', function () {
     it('customizes gas', async function () {
       await driver.clickElement('.confirm-approve-content__small-blue-text');
       await driver.delay(regularDelayMs);
-      await driver.clickElement(
-        { text: 'Edit suggested gas fee', tag: 'button' },
-        10000,
-      );
+      await driver.clickElement({
+        text: 'Edit suggested gas fee',
+        tag: 'button',
+      });
       await driver.delay(regularDelayMs);
 
       const [gasLimitInput, gasPriceInput] = await driver.findElements(
diff --git a/test/e2e/restore/MetaMaskUserData.json b/test/e2e/restore/MetaMaskUserData.json
index abea11e14..cb9dffefb 100644
--- a/test/e2e/restore/MetaMaskUserData.json
+++ b/test/e2e/restore/MetaMaskUserData.json
@@ -42,7 +42,7 @@
     },
     "theme": "light",
     "useBlockie": false,
-    "useCollectibleDetection": false,
+    "useNftDetection": false,
     "useNonceField": false,
     "usePhishDetect": true,
     "useTokenDetection": false
diff --git a/test/e2e/run-all.js b/test/e2e/run-all.js
index 2623f9ba9..27b754750 100644
--- a/test/e2e/run-all.js
+++ b/test/e2e/run-all.js
@@ -13,6 +13,14 @@ const getTestPathsForTestDir = async (testDir) => {
   return testPaths;
 };
 
+function chunk(array, chunkSize) {
+  const result = [];
+  for (let i = 0; i < array.length; i += chunkSize) {
+    result.push(array.slice(i, i + chunkSize));
+  }
+  return result;
+}
+
 async function main() {
   const { argv } = yargs(hideBin(process.argv))
     .usage(
@@ -66,7 +74,14 @@ async function main() {
     args.push('--retries', retries);
   }
 
-  for (const testPath of testPaths) {
+  // For running E2Es in parallel in CI
+  const currentChunkIndex = process.env.CIRCLE_NODE_INDEX ?? 0;
+  const totalChunks = process.env.CIRCLE_NODE_TOTAL ?? 1;
+  const chunkSize = Math.ceil(testPaths.length / totalChunks);
+  const chunks = chunk(testPaths, chunkSize);
+  const currentChunk = chunks[currentChunkIndex];
+
+  for (const testPath of currentChunk) {
     await runInShell('node', [...args, testPath]);
   }
 }
diff --git a/test/e2e/snaps/enums.js b/test/e2e/snaps/enums.js
index d18f41755..a940e21b9 100644
--- a/test/e2e/snaps/enums.js
+++ b/test/e2e/snaps/enums.js
@@ -1,3 +1,3 @@
 module.exports = {
-  TEST_SNAPS_WEBSITE_URL: 'https://metamask.github.io/test-snaps/3.1.0',
+  TEST_SNAPS_WEBSITE_URL: 'https://metamask.github.io/test-snaps/4.0.2/',
 };
diff --git a/test/e2e/snaps/test-snap-bip-32.spec.js b/test/e2e/snaps/test-snap-bip-32.spec.js
index b179461e7..f82a5f96c 100644
--- a/test/e2e/snaps/test-snap-bip-32.spec.js
+++ b/test/e2e/snaps/test-snap-bip-32.spec.js
@@ -15,10 +15,9 @@ describe('Test Snap bip-32', function () {
     };
     await withFixtures(
       {
-        fixtures: new FixtureBuilder()
-          .withPermissionControllerConnectedToSnapDapp()
-          .build(),
+        fixtures: new FixtureBuilder().build(),
         ganacheOptions,
+        failOnConsoleError: false,
         title: this.test.title,
       },
       async ({ driver }) => {
@@ -32,20 +31,38 @@ describe('Test Snap bip-32', function () {
         await driver.driver.get(TEST_SNAPS_WEBSITE_URL);
         await driver.delay(1000);
 
-        // find and scroll to the correct card and click first
-        const snapButton = await driver.findElement('#sendUpdateHello');
-        await driver.scrollToElement(snapButton);
-        await driver.delay(500);
-        await driver.fill('#snapId6', 'npm:@metamask/test-snap-bip32');
+        // find and scroll to the bip32 test and connect
+        const snapButton1 = await driver.findElement('#connectBip32');
+        await driver.scrollToElement(snapButton1);
+        await driver.delay(1000);
         await driver.clickElement('#connectBip32');
 
-        // approve install of snap
+        // switch to metamask extension and click connect
         await driver.waitUntilXWindowHandles(2, 5000, 10000);
         let windowHandles = await driver.getAllWindowHandles();
         await driver.switchToWindowWithTitle(
           'MetaMask Notification',
           windowHandles,
         );
+        await driver.clickElement(
+          {
+            text: 'Connect',
+            tag: 'button',
+          },
+          10000,
+        );
+
+        await driver.delay(2000);
+
+        // switch to metamask extension
+        await driver.waitUntilXWindowHandles(2, 5000, 10000);
+        windowHandles = await driver.getAllWindowHandles();
+
+        // approve install of snap
+        await driver.switchToWindowWithTitle(
+          'MetaMask Notification',
+          windowHandles,
+        );
         await driver.clickElement({
           text: 'Approve & install',
           tag: 'button',
@@ -65,10 +82,46 @@ describe('Test Snap bip-32', function () {
         windowHandles = await driver.getAllWindowHandles();
         await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
 
+        // scroll to and click get public key
+        await driver.delay(1000);
+        const snapButton2 = await driver.findElement('#bip32GetPublic');
+        await driver.scrollToElement(snapButton2);
+        await driver.delay(1000);
+        await driver.clickElement('#bip32GetPublic');
+
+        // check for proper public key response
+        await driver.delay(1000);
+        const retrievePublicKeyResult1 = await driver.findElement(
+          '#bip32PublicKeyResult',
+        );
+        assert.equal(
+          await retrievePublicKeyResult1.getText(),
+          '"0x043e98d696ae15caef75fa8dd204a7c5c08d1272b2218ba3c20feeb4c691eec366606ece56791c361a2320e7fad8bcbb130f66d51c591fc39767ab2856e93f8dfb"',
+        );
+
+        // scroll to and click get compressed public key
+        await driver.delay(1000);
+        const snapButton3 = await driver.findElement(
+          '#bip32GetCompressedPublic',
+        );
+        await driver.scrollToElement(snapButton3);
+        await driver.delay(1000);
+        await driver.clickElement('#bip32GetCompressedPublic');
+
+        // check for proper public key response
+        await driver.delay(1000);
+        const retrievePublicKeyResult2 = await driver.findElement(
+          '#bip32PublicKeyResult',
+        );
+        assert.equal(
+          await retrievePublicKeyResult2.getText(),
+          '"0x033e98d696ae15caef75fa8dd204a7c5c08d1272b2218ba3c20feeb4c691eec366"',
+        );
+
         // wait then run SECP256K1 test
         await driver.delay(1000);
-        await driver.fill('#bip32SignMessage', 'foo bar');
-        await driver.clickElement('#sendBip32Secp256k1');
+        await driver.fill('#bip32Message-secp256k1', 'foo bar');
+        await driver.clickElement('#sendBip32-secp256k1');
 
         // hit 'approve' on the custom confirm
         await driver.waitUntilXWindowHandles(2, 5000, 10000);
@@ -89,16 +142,23 @@ describe('Test Snap bip-32', function () {
         // check result
         await driver.delay(1000);
         const secp256k1Result = await driver.findElement(
-          '#bip32Secp256k1Result',
+          '#bip32MessageResult-secp256k1',
         );
         assert.equal(
           await secp256k1Result.getText(),
-          'Signature: "0xd30561eb9e3195e47d49198fb0bc66eda867a7dff4c5e8b60c2ec13851aa7d8cc3d485da177de63dad331f315d440cbb693a629efe228389c4693ea90465b101"',
+          '"0x3045022100b3ade2992ea3e5eb58c7550e9bddad356e9554233c8b099ebc3cb418e9301ae2022064746e15ae024808f0ba5d860e44dc4c97e65c8cba6f5ef9ea2e8c819930d2dc"',
         );
 
+        // scroll further into messages section
+        await driver.delay(1000);
+        const snapButton4 = await driver.findElement('#bip32Message-ed25519');
+        await driver.scrollToElement(snapButton4);
+        await driver.delay(1000);
+
         // wait then run ed25519 test
         await driver.delay(1000);
-        await driver.clickElement('#sendBip32Ed25519');
+        await driver.fill('#bip32Message-ed25519', 'foo bar');
+        await driver.clickElement('#sendBip32-ed25519');
 
         // hit 'approve' on the custom confirm
         await driver.waitUntilXWindowHandles(2, 5000, 10000);
@@ -118,38 +178,12 @@ describe('Test Snap bip-32', function () {
 
         // check result
         await driver.delay(1000);
-        const ed25519Result = await driver.findElement('#bip32Ed25519Result');
+        const ed25519Result = await driver.findElement(
+          '#bip32MessageResult-ed25519',
+        );
         assert.equal(
           await ed25519Result.getText(),
-          'Signature: "0xf3215b4d6c59aac7e01b4ceef530d1e2abf4857926b85a81aaae3894505699243768a887b7da4a8c2e0f25196196ba290b6531050db8dc15c252bdd508532a0a"',
-        );
-
-        const publicKeyButton = await driver.findElement('#sendBip32PublicKey');
-        await driver.scrollToElement(publicKeyButton);
-        // wait then run public key test
-        await driver.delay(1000);
-        await driver.clickElement('#sendBip32PublicKey');
-        // check result
-        await driver.delay(1000);
-        const publicKeyResult = await driver.findElement(
-          '#bip32PublicKeyResult',
-        );
-        assert.equal(
-          await publicKeyResult.getText(),
-          'Public key: "043e98d696ae15caef75fa8dd204a7c5c08d1272b2218ba3c20feeb4c691eec366606ece56791c361a2320e7fad8bcbb130f66d51c591fc39767ab2856e93f8dfb"',
-        );
-
-        // wait then run compressed public key test
-        await driver.delay(1000);
-        await driver.clickElement('#sendBip32CompressedPublicKey');
-        // check result
-        await driver.delay(1000);
-        const compressedPublicKeyResult = await driver.findElement(
-          '#bip32CompressedPublicKeyResult',
-        );
-        assert.equal(
-          await compressedPublicKeyResult.getText(),
-          'Public key: "033e98d696ae15caef75fa8dd204a7c5c08d1272b2218ba3c20feeb4c691eec366"',
+          '"0xf3215b4d6c59aac7e01b4ceef530d1e2abf4857926b85a81aaae3894505699243768a887b7da4a8c2e0f25196196ba290b6531050db8dc15c252bdd508532a0a"',
         );
       },
     );
diff --git a/test/e2e/snaps/test-snap-bip-44.spec.js b/test/e2e/snaps/test-snap-bip-44.spec.js
index ce617a350..32a48130a 100644
--- a/test/e2e/snaps/test-snap-bip-44.spec.js
+++ b/test/e2e/snaps/test-snap-bip-44.spec.js
@@ -16,10 +16,9 @@ describe('Test Snap bip-44', function () {
     };
     await withFixtures(
       {
-        fixtures: new FixtureBuilder()
-          .withPermissionControllerConnectedToSnapDapp()
-          .build(),
+        fixtures: new FixtureBuilder().build(),
         ganacheOptions,
+        failOnConsoleError: false,
         title: this.test.title,
       },
       async ({ driver }) => {
@@ -31,23 +30,37 @@ describe('Test Snap bip-44', function () {
 
         // navigate to test snaps page and connect
         await driver.driver.get(TEST_SNAPS_WEBSITE_URL);
+        const snapButton1 = await driver.findElement('#connectBip44Snap');
+        await driver.scrollToElement(snapButton1);
         await driver.delay(1000);
-        await driver.fill('#snapId3', 'npm:@metamask/test-snap-bip44');
+        await driver.clickElement('#connectBip44Snap');
 
-        const snapButton = await driver.findElement('#snapId3');
-        await driver.scrollToElement(snapButton);
-        await driver.delay(500);
-
-        // connect the snap
-        await driver.clickElement('#connectBip44');
-
-        // approve install of snap
+        // switch to metamask extension and click connect
         await driver.waitUntilXWindowHandles(2, 5000, 10000);
         let windowHandles = await driver.getAllWindowHandles();
         await driver.switchToWindowWithTitle(
           'MetaMask Notification',
           windowHandles,
         );
+        await driver.clickElement(
+          {
+            text: 'Connect',
+            tag: 'button',
+          },
+          10000,
+        );
+
+        await driver.delay(2000);
+
+        // switch to metamask extension
+        await driver.waitUntilXWindowHandles(2, 5000, 10000);
+        windowHandles = await driver.getAllWindowHandles();
+
+        // approve install of snap
+        await driver.switchToWindowWithTitle(
+          'MetaMask Notification',
+          windowHandles,
+        );
         await driver.clickElement({
           text: 'Approve & install',
           tag: 'button',
@@ -66,14 +79,47 @@ describe('Test Snap bip-44', function () {
         windowHandles = await driver.getAllWindowHandles();
         await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
         await driver.delay(1000);
-        await driver.clickElement('#sendBip44');
+        await driver.clickElement('#sendBip44Test');
 
         // check the results of the public key test
-        await driver.delay(2000);
+        await driver.delay(1000);
         const bip44Result = await driver.findElement('#bip44Result');
         assert.equal(
           await bip44Result.getText(),
-          'Public key: "0x86debb44fb3a984d93f326131d4c1db0bc39644f1a67b673b3ab45941a1cea6a385981755185ac4594b6521e4d1e08d1"',
+          '"0x86debb44fb3a984d93f326131d4c1db0bc39644f1a67b673b3ab45941a1cea6a385981755185ac4594b6521e4d1e08d1"',
+        );
+
+        // enter a message to sign
+        await driver.fill('#bip44Message', '1234');
+        await driver.delay(1000);
+        const snapButton3 = await driver.findElement('#signBip44Message');
+        await driver.scrollToElement(snapButton3);
+        await driver.delay(1000);
+        await driver.clickElement('#signBip44Message');
+
+        // Switch to approve signature message window and approve
+        await driver.waitUntilXWindowHandles(2, 5000, 10000);
+        windowHandles = await driver.getAllWindowHandles();
+        await driver.switchToWindowWithTitle(
+          'MetaMask Notification',
+          windowHandles,
+        );
+        await driver.clickElement({
+          text: 'Approve',
+          tag: 'button',
+        });
+
+        // switch back to test-snaps page
+        await driver.waitUntilXWindowHandles(1, 5000, 10000);
+        windowHandles = await driver.getAllWindowHandles();
+        await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
+        await driver.delay(1000);
+
+        // check the results of the message signature
+        const bip44SignResult = await driver.findElement('#bip44SignResult');
+        assert.equal(
+          await bip44SignResult.getText(),
+          '"0xa41ab87ca50606eefd47525ad90294bbe44c883f6bc53655f1b8a55aa8e1e35df216f31be62e52c7a1faa519420e20810162e07dedb0fde2a4d997ff7180a78232ecd8ce2d6f4ba42ccacad33c5e9e54a8c4d41506bdffb2bb4c368581d8b086"',
         );
       },
     );
diff --git a/test/e2e/snaps/test-snap-confirm.spec.js b/test/e2e/snaps/test-snap-confirm.spec.js
index 9d85977df..00112ebdc 100644
--- a/test/e2e/snaps/test-snap-confirm.spec.js
+++ b/test/e2e/snaps/test-snap-confirm.spec.js
@@ -16,10 +16,9 @@ describe('Test Snap Confirm', function () {
     };
     await withFixtures(
       {
-        fixtures: new FixtureBuilder()
-          .withPermissionControllerConnectedToSnapDapp()
-          .build(),
+        fixtures: new FixtureBuilder().build(),
         ganacheOptions,
+        failOnConsoleError: false,
         title: this.test.title,
       },
       async ({ driver }) => {
@@ -31,12 +30,31 @@ describe('Test Snap Confirm', function () {
 
         // navigate to test snaps page and connect
         await driver.driver.get(TEST_SNAPS_WEBSITE_URL);
-        await driver.fill('#snapId1', 'npm:@metamask/test-snap-confirm');
-        await driver.clickElement('#connectHello');
+        const snapButton1 = await driver.findElement('#connectConfirmSnap');
+        await driver.scrollToElement(snapButton1);
+        await driver.delay(1000);
+        await driver.clickElement('#connectConfirmSnap');
+
+        // switch to metamask extension and click connect
+        await driver.waitUntilXWindowHandles(2, 5000, 10000);
+        let windowHandles = await driver.getAllWindowHandles();
+        await driver.switchToWindowWithTitle(
+          'MetaMask Notification',
+          windowHandles,
+        );
+        await driver.clickElement(
+          {
+            text: 'Connect',
+            tag: 'button',
+          },
+          10000,
+        );
+
+        await driver.delay(2000);
 
         // approve install of snap
         await driver.waitUntilXWindowHandles(2, 5000, 10000);
-        let windowHandles = await driver.getAllWindowHandles();
+        windowHandles = await driver.getAllWindowHandles();
         await driver.switchToWindowWithTitle(
           'MetaMask Notification',
           windowHandles,
@@ -46,14 +64,14 @@ describe('Test Snap Confirm', function () {
           tag: 'button',
         });
 
-        // click send inputs on test snap page
+        // switch back to test snaps page
         await driver.waitUntilXWindowHandles(1, 5000, 10000);
         windowHandles = await driver.getAllWindowHandles();
         await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
 
-        const snapButton = await driver.findElement('#sendConfirmButton');
-        await driver.scrollToElement(snapButton);
-
+        // click send inputs on test snap page
+        const snapButton2 = await driver.findElement('#sendConfirmButton');
+        await driver.scrollToElement(snapButton2);
         await driver.delay(1000);
         await driver.clickElement('#sendConfirmButton');
 
diff --git a/test/e2e/snaps/test-snap-error.spec.js b/test/e2e/snaps/test-snap-error.spec.js
index 337b932df..3ac9a47b4 100644
--- a/test/e2e/snaps/test-snap-error.spec.js
+++ b/test/e2e/snaps/test-snap-error.spec.js
@@ -1,6 +1,5 @@
 const { strict: assert } = require('assert');
 const { withFixtures } = require('../helpers');
-const { PAGES } = require('../webdriver/driver');
 const FixtureBuilder = require('../fixture-builder');
 const { TEST_SNAPS_WEBSITE_URL } = require('./enums');
 
@@ -17,10 +16,9 @@ describe('Test Snap Error', function () {
     };
     await withFixtures(
       {
-        fixtures: new FixtureBuilder()
-          .withPermissionControllerConnectedToSnapDapp()
-          .build(),
+        fixtures: new FixtureBuilder().build(),
         ganacheOptions,
+        failOnConsoleError: false,
         title: this.test.title,
       },
       async ({ driver }) => {
@@ -31,17 +29,31 @@ describe('Test Snap Error', function () {
         await driver.press('#password', driver.Key.ENTER);
 
         // navigate to test snaps page and connect
-        await driver.driver.get(TEST_SNAPS_WEBSITE_URL);
-        await driver.fill('#snapId2', 'npm:@metamask/test-snap-error');
-
-        const snapButton = await driver.findElement('#connectError');
+        await driver.openNewPage(TEST_SNAPS_WEBSITE_URL);
+        const snapButton = await driver.findElement('#connectErrorSnap');
         await driver.scrollToElement(snapButton);
-        await driver.delay(500);
+        await driver.delay(1000);
+        await driver.clickElement('#connectErrorSnap');
 
-        await driver.clickElement('#connectError');
+        // switch to metamask extension and click connect
+        await driver.waitUntilXWindowHandles(3, 5000, 10000);
+        let windowHandles = await driver.getAllWindowHandles();
+        const extensionPage = windowHandles[0];
+        await driver.switchToWindowWithTitle(
+          'MetaMask Notification',
+          windowHandles,
+        );
+        await driver.clickElement(
+          {
+            text: 'Connect',
+            tag: 'button',
+          },
+          10000,
+        );
+
+        await driver.delay(2000);
 
         // approve install of snap
-        let windowHandles = await driver.getAllWindowHandles();
         await driver.switchToWindowWithTitle(
           'MetaMask Notification',
           windowHandles,
@@ -52,14 +64,19 @@ describe('Test Snap Error', function () {
         });
 
         // click send inputs on test snap page
-        await driver.waitUntilXWindowHandles(1, 5000, 10000);
+        await driver.waitUntilXWindowHandles(2, 5000, 10000);
         windowHandles = await driver.getAllWindowHandles();
         await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
         await driver.delay(1000);
+
+        // find and click on send error
         await driver.clickElement('#sendError');
 
-        await driver.navigate(PAGES.HOME);
+        // switch back to the extension page
+        await driver.switchToWindow(extensionPage);
+        await driver.delay(1000);
 
+        // look for the actual error and check if it is correct
         const error = await driver.findElement(
           '.home-notification__content-container',
         );
@@ -70,6 +87,12 @@ describe('Test Snap Error', function () {
           ),
           true,
         );
+
+        // try to click on the dismiss button and pass test if it works
+        await driver.clickElement({
+          text: 'Dismiss',
+          tag: 'button',
+        });
       },
     );
   });
diff --git a/test/e2e/snaps/test-snap-get-snaps.spec.js b/test/e2e/snaps/test-snap-installed.spec.js
similarity index 58%
rename from test/e2e/snaps/test-snap-get-snaps.spec.js
rename to test/e2e/snaps/test-snap-installed.spec.js
index 8de5cadbb..ccf0692c7 100644
--- a/test/e2e/snaps/test-snap-get-snaps.spec.js
+++ b/test/e2e/snaps/test-snap-installed.spec.js
@@ -3,8 +3,8 @@ const { withFixtures } = require('../helpers');
 const FixtureBuilder = require('../fixture-builder');
 const { TEST_SNAPS_WEBSITE_URL } = require('./enums');
 
-describe('Test Snap Confirm', function () {
-  it('can pop up a snap confirm and get its result', async function () {
+describe('Test Snap Installed', function () {
+  it('can tell if a snap is installed', async function () {
     const ganacheOptions = {
       accounts: [
         {
@@ -16,10 +16,9 @@ describe('Test Snap Confirm', function () {
     };
     await withFixtures(
       {
-        fixtures: new FixtureBuilder()
-          .withPermissionControllerConnectedToSnapDapp()
-          .build(),
+        fixtures: new FixtureBuilder().build(),
         ganacheOptions,
+        failOnConsoleError: false,
         title: this.test.title,
       },
       async ({ driver }) => {
@@ -30,13 +29,32 @@ describe('Test Snap Confirm', function () {
         await driver.press('#password', driver.Key.ENTER);
 
         // navigate to test snaps page and connect
-        await driver.driver.get(TEST_SNAPS_WEBSITE_URL);
-        await driver.fill('#snapId1', 'npm:@metamask/test-snap-confirm');
-        await driver.clickElement('#connectHello');
+        await driver.openNewPage(TEST_SNAPS_WEBSITE_URL);
+        await driver.delay(1000);
+        const confirmButton = await driver.findElement('#connectConfirmSnap');
+        await driver.scrollToElement(confirmButton);
+        await driver.clickElement('#connectConfirmSnap');
+
+        // switch to metamask extension and click connect
+        await driver.waitUntilXWindowHandles(3, 5000, 10000);
+        let windowHandles = await driver.getAllWindowHandles();
+        await driver.switchToWindowWithTitle(
+          'MetaMask Notification',
+          windowHandles,
+        );
+        await driver.clickElement(
+          {
+            text: 'Connect',
+            tag: 'button',
+          },
+          10000,
+        );
+
+        await driver.delay(2000);
 
         // approve install of snap
-        await driver.waitUntilXWindowHandles(2, 5000, 10000);
-        let windowHandles = await driver.getAllWindowHandles();
+        await driver.waitUntilXWindowHandles(3, 5000, 10000);
+        windowHandles = await driver.getAllWindowHandles();
         await driver.switchToWindowWithTitle(
           'MetaMask Notification',
           windowHandles,
@@ -47,18 +65,33 @@ describe('Test Snap Confirm', function () {
         });
 
         // click send inputs on test snap page
-        await driver.waitUntilXWindowHandles(1, 5000, 10000);
+        await driver.waitUntilXWindowHandles(2, 5000, 10000);
         windowHandles = await driver.getAllWindowHandles();
         await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
 
-        const errorButton = await driver.findElement('#connectError');
+        const errorButton = await driver.findElement('#connectErrorSnap');
         await driver.scrollToElement(errorButton);
         await driver.delay(1000);
-        await driver.fill('#snapId2', 'npm:@metamask/test-snap-error');
-        await driver.clickElement('#connectError');
+        await driver.clickElement('#connectErrorSnap');
+
+        // switch to metamask extension and click connect
+        await driver.waitUntilXWindowHandles(3, 5000, 10000);
+        windowHandles = await driver.getAllWindowHandles();
+        await driver.switchToWindowWithTitle(
+          'MetaMask Notification',
+          windowHandles,
+        );
+        await driver.clickElement(
+          {
+            text: 'Connect',
+            tag: 'button',
+          },
+          10000,
+        );
+
+        await driver.delay(2000);
 
         // approve install of snap
-        await driver.waitUntilXWindowHandles(2, 5000, 10000);
         windowHandles = await driver.getAllWindowHandles();
         await driver.switchToWindowWithTitle(
           'MetaMask Notification',
@@ -69,19 +102,13 @@ describe('Test Snap Confirm', function () {
           tag: 'button',
         });
 
-        await driver.waitUntilXWindowHandles(1, 5000, 10000);
+        await driver.waitUntilXWindowHandles(2, 5000, 10000);
         windowHandles = await driver.getAllWindowHandles();
         await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
 
-        const getInstalledSnapsButton = await driver.findElement(
-          '#getInstalledSnapsButton',
-        );
-        await driver.scrollToElement(getInstalledSnapsButton);
+        const result = await driver.findElement('#installedSnapsResult');
+        await driver.scrollToElement(result);
         await driver.delay(1000);
-        await driver.clickElement('#getInstalledSnapsButton');
-        await driver.delay(1000);
-
-        const result = await driver.findElement('#getInstalledSnapsResult');
         assert.equal(
           await result.getText(),
           'npm:@metamask/test-snap-confirm, npm:@metamask/test-snap-error',
diff --git a/test/e2e/snaps/test-snap-managestate.spec.js b/test/e2e/snaps/test-snap-managestate.spec.js
index 58fc36862..86cb4e47a 100644
--- a/test/e2e/snaps/test-snap-managestate.spec.js
+++ b/test/e2e/snaps/test-snap-managestate.spec.js
@@ -17,10 +17,9 @@ describe('Test Snap manageState', function () {
 
     await withFixtures(
       {
-        fixtures: new FixtureBuilder()
-          .withPermissionControllerConnectedToSnapDapp()
-          .build(),
+        fixtures: new FixtureBuilder().build(),
         ganacheOptions,
+        failOnConsoleError: false,
         title: this.test.title,
       },
       async ({ driver }) => {
@@ -31,32 +30,45 @@ describe('Test Snap manageState', function () {
         await driver.press('#password', driver.Key.ENTER);
 
         // navigate to test snaps page, then fill in the snapId
-        await driver.driver.get(TEST_SNAPS_WEBSITE_URL);
+        await driver.openNewPage(TEST_SNAPS_WEBSITE_URL);
         await driver.delay(1000);
-        await driver.fill('#snapId4', 'npm:@metamask/test-snap-managestate');
 
-        // find and scroll to the rest of the card
-        const snapButton = await driver.findElement('#snapId4');
-        await driver.scrollToElement(snapButton);
-        await driver.delay(500);
-
-        // connect the snap
+        // find and scroll to the connect button and click it
+        const snapButton1 = await driver.findElement('#connectManageState');
+        await driver.scrollToElement(snapButton1);
+        await driver.delay(1000);
         await driver.clickElement('#connectManageState');
 
-        // approve install of snap
-        await driver.waitUntilXWindowHandles(2, 5000, 10000);
+        // switch to metamask extension and click connect
+        await driver.waitUntilXWindowHandles(3, 5000, 10000);
         let windowHandles = await driver.getAllWindowHandles();
         await driver.switchToWindowWithTitle(
           'MetaMask Notification',
           windowHandles,
         );
+        await driver.clickElement(
+          {
+            text: 'Connect',
+            tag: 'button',
+          },
+          10000,
+        );
+        await driver.delay(2000);
+
+        // approve install of snap
+        await driver.waitUntilXWindowHandles(3, 5000, 10000);
+        windowHandles = await driver.getAllWindowHandles();
+        await driver.switchToWindowWithTitle(
+          'MetaMask Notification',
+          windowHandles,
+        );
         await driver.clickElement({
           text: 'Approve & install',
           tag: 'button',
         });
 
         // fill and click send inputs on test snap page
-        await driver.waitUntilXWindowHandles(1, 5000, 10000);
+        await driver.waitUntilXWindowHandles(2, 5000, 10000);
         windowHandles = await driver.getAllWindowHandles();
         await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
         await driver.fill('#dataManageState', '23');
@@ -64,46 +76,40 @@ describe('Test Snap manageState', function () {
         await driver.clickElement('#sendManageState');
 
         // check the results of the public key test
-        await driver.delay(500);
+        await driver.delay(1000);
         const manageStateResult = await driver.findElement(
           '#sendManageStateResult',
         );
         assert.equal(await manageStateResult.getText(), 'true');
 
-        // click get results
-        await driver.clickElement('#retrieveManageState');
-
         // check the results
-        await driver.delay(500);
+        await driver.delay(1000);
         const retrieveManageStateResult = await driver.findElement(
           '#retrieveManageStateResult',
         );
         assert.equal(
           await retrieveManageStateResult.getText(),
-          '{"testState":["23"]}',
+          '{ "testState": [ "23" ] }',
         );
 
         // click clear results
         await driver.clickElement('#clearManageState');
 
         // check if true
-        await driver.delay(500);
+        await driver.delay(1000);
         const clearManageStateResult = await driver.findElement(
           '#clearManageStateResult',
         );
         assert.equal(await clearManageStateResult.getText(), 'true');
 
-        // click get results again
-        await driver.clickElement('#retrieveManageState');
-
         // check result array is empty
-        await driver.delay(500);
+        await driver.delay(1000);
         const retrieveManageStateResult2 = await driver.findElement(
           '#retrieveManageStateResult',
         );
         assert.equal(
           await retrieveManageStateResult2.getText(),
-          '{"testState":[]}',
+          '{ "testState": [] }',
         );
       },
     );
diff --git a/test/e2e/snaps/test-snap-notification.spec.js b/test/e2e/snaps/test-snap-notification.spec.js
index ff2002881..a52f77005 100644
--- a/test/e2e/snaps/test-snap-notification.spec.js
+++ b/test/e2e/snaps/test-snap-notification.spec.js
@@ -1,6 +1,5 @@
 const { strict: assert } = require('assert');
 const { withFixtures } = require('../helpers');
-const { PAGES } = require('../webdriver/driver');
 const FixtureBuilder = require('../fixture-builder');
 const { TEST_SNAPS_WEBSITE_URL } = require('./enums');
 
@@ -17,10 +16,9 @@ describe('Test Snap Notification', function () {
     };
     await withFixtures(
       {
-        fixtures: new FixtureBuilder()
-          .withPermissionControllerConnectedToSnapDapp()
-          .build(),
+        fixtures: new FixtureBuilder().build(),
         ganacheOptions,
+        failOnConsoleError: false,
         title: this.test.title,
       },
       async ({ driver }) => {
@@ -31,21 +29,35 @@ describe('Test Snap Notification', function () {
         await driver.press('#password', driver.Key.ENTER);
 
         // navigate to test snaps page
-        await driver.driver.get(TEST_SNAPS_WEBSITE_URL);
+        await driver.openNewPage(TEST_SNAPS_WEBSITE_URL);
         await driver.delay(1000);
 
-        // find and scroll down to snapId5
-        const snapButton = await driver.findElement('#snapId5');
+        // find and scroll down to snapId5 and connect
+        const snapButton = await driver.findElement('#connectNotification');
         await driver.scrollToElement(snapButton);
         await driver.delay(500);
-        await driver.fill('#snapId5', 'npm:@metamask/test-snap-notification');
-
-        // connect the snap
         await driver.clickElement('#connectNotification');
 
-        // approve install of snap
-        await driver.waitUntilXWindowHandles(2, 5000, 10000);
+        // switch to metamask extension and click connect
+        await driver.waitUntilXWindowHandles(3, 5000, 10000);
         let windowHandles = await driver.getAllWindowHandles();
+        const extensionPage = windowHandles[0];
+        await driver.switchToWindowWithTitle(
+          'MetaMask Notification',
+          windowHandles,
+        );
+        await driver.clickElement(
+          {
+            text: 'Connect',
+            tag: 'button',
+          },
+          10000,
+        );
+        await driver.delay(2000);
+
+        // approve install of snap
+        await driver.waitUntilXWindowHandles(3, 5000, 10000);
+        windowHandles = await driver.getAllWindowHandles();
         await driver.switchToWindowWithTitle(
           'MetaMask Notification',
           windowHandles,
@@ -56,14 +68,14 @@ describe('Test Snap Notification', function () {
         });
 
         // click send inputs on test snap page
-        await driver.waitUntilXWindowHandles(1, 5000, 10000);
+        await driver.waitUntilXWindowHandles(2, 5000, 10000);
         windowHandles = await driver.getAllWindowHandles();
         await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
         await driver.delay(1000);
         await driver.clickElement('#sendInAppNotification');
 
-        // try to go to the MM pages
-        await driver.navigate(PAGES.HOME);
+        // switch back to the extension page
+        await driver.switchToWindow(extensionPage);
         await driver.delay(1500);
 
         // check to see that there is one notification
@@ -74,14 +86,14 @@ describe('Test Snap Notification', function () {
 
         // try to click on the account menu icon (via xpath)
         await driver.clickElement('.account-menu__icon');
-        await driver.delay(500);
+        await driver.delay(1000);
 
         // try to click on the notification item (via xpath)
         await driver.clickElement({
           text: 'Notifications',
           tag: 'div',
         });
-        await driver.delay(500);
+        await driver.delay(1000);
 
         // look for the correct text in notifications (via xpath)
         const notificationResultMessage = await driver.findElement(
diff --git a/test/e2e/snaps/test-snap-update.spec.js b/test/e2e/snaps/test-snap-update.spec.js
index 862e95045..ebbf74d4f 100644
--- a/test/e2e/snaps/test-snap-update.spec.js
+++ b/test/e2e/snaps/test-snap-update.spec.js
@@ -16,10 +16,9 @@ describe('Test Snap update', function () {
     };
     await withFixtures(
       {
-        fixtures: new FixtureBuilder()
-          .withPermissionControllerConnectedToSnapDapp()
-          .build(),
+        fixtures: new FixtureBuilder().build(),
         ganacheOptions,
+        failOnConsoleError: false,
         title: this.test.title,
       },
       async ({ driver }) => {
@@ -33,15 +32,32 @@ describe('Test Snap update', function () {
         await driver.openNewPage(TEST_SNAPS_WEBSITE_URL);
 
         // find and scroll to the correct card and click first
-        const snapButton = await driver.findElement('#sendUpdateHello');
+        const snapButton = await driver.findElement('#connectUpdateNew');
         await driver.scrollToElement(snapButton);
-        await driver.delay(500);
-        await driver.fill('#snapId7', 'npm:@metamask/test-snap-confirm');
-        await driver.clickElement('#connectUpdateOld');
+        await driver.delay(1000);
+        await driver.clickElement('#connectUpdate');
+
+        await driver.delay(2000);
+
+        // switch to metamask extension and click connect
+        await driver.waitUntilXWindowHandles(3, 5000, 10000);
+        let windowHandles = await driver.getAllWindowHandles();
+        await driver.switchToWindowWithTitle(
+          'MetaMask Notification',
+          windowHandles,
+        );
+        await driver.clickElement(
+          {
+            text: 'Connect',
+            tag: 'button',
+          },
+          10000,
+        );
+        await driver.delay(2000);
 
         // approve install of snap
-        let windowHandles = await driver.getAllWindowHandles();
-        const extensionPage = windowHandles[0];
+        await driver.waitUntilXWindowHandles(3, 5000, 10000);
+        windowHandles = await driver.getAllWindowHandles();
         await driver.switchToWindowWithTitle(
           'MetaMask Notification',
           windowHandles,
@@ -58,9 +74,9 @@ describe('Test Snap update', function () {
         await driver.delay(1000);
 
         // find and scroll to the correct card and click first
-        const snapButton2 = await driver.findElement('#snapId7');
+        const snapButton2 = await driver.findElement('#connectUpdateNew');
         await driver.scrollToElement(snapButton2);
-        await driver.delay(500);
+        await driver.delay(1000);
         await driver.clickElement('#connectUpdateNew');
 
         // switch to metamask extension and click connect
@@ -78,33 +94,15 @@ describe('Test Snap update', function () {
           tag: 'button',
         });
 
-        // switch to the original MM tab
-        await driver.switchToWindow(extensionPage);
-        await driver.delay(500);
-
-        // click on the account menu icon
-        await driver.clickElement('.account-menu__icon');
-        await driver.delay(500);
-
-        // try to click on the notification item
-        await driver.clickElement({
-          text: 'Settings',
-          tag: 'div',
-        });
-        await driver.delay(500);
-
-        // try to click on the snaps item
-        await driver.clickElement({
-          text: 'Snaps',
-          tag: 'div',
-        });
-        await driver.delay(500);
+        // navigate to test snap page
+        await driver.waitUntilXWindowHandles(2, 5000, 10000);
+        windowHandles = await driver.getAllWindowHandles();
+        await driver.switchToWindowWithTitle('Test Snaps', windowHandles);
 
         // look for the correct version text
-        const versionResult = await driver.findElement(
-          '.snap-settings-card__version',
-        );
-        assert.equal(await versionResult.getText(), 'v2.0.0');
+        const versionResult = await driver.findElement('#updateSnapVersion');
+        await driver.delay(1000);
+        assert.equal(await versionResult.getText(), '"2.0.0"');
       },
     );
   });
diff --git a/test/e2e/tests/custom-token-add-approve.spec.js b/test/e2e/tests/custom-token-add-approve.spec.js
index 67e045325..2815f49a4 100644
--- a/test/e2e/tests/custom-token-add-approve.spec.js
+++ b/test/e2e/tests/custom-token-add-approve.spec.js
@@ -221,10 +221,10 @@ describe.skip('Create token, approve token and approve token without gas', funct
           await driver.clickElement(
             '.confirm-approve-content__small-blue-text',
           );
-          await driver.clickElement(
-            { text: 'Edit suggested gas fee', tag: 'button' },
-            10000,
-          );
+          await driver.clickElement({
+            text: 'Edit suggested gas fee',
+            tag: 'button',
+          });
           const [gasLimitInput, gasPriceInput] = await driver.findElements(
             'input[type="number"]',
           );
diff --git a/test/e2e/tests/send-eth.spec.js b/test/e2e/tests/send-eth.spec.js
index 0833a1f85..b9500e22d 100644
--- a/test/e2e/tests/send-eth.spec.js
+++ b/test/e2e/tests/send-eth.spec.js
@@ -135,7 +135,7 @@ describe('Send ETH non-contract address with data that matches ERC20 transfer da
 
         await driver.clickElement({ text: 'Next', tag: 'button' });
 
-        await driver.clickElement({ text: '0xc42...cd28' });
+        await driver.clickElement({ text: 'New contract' });
 
         const recipientAddress = await driver.findElements({
           text: '0xc427D562164062a23a5cFf596A4a3208e72Acd28',
@@ -239,23 +239,6 @@ describe('Send ETH from dapp using advanced gas controls', function () {
         await driver.fill('#password', 'correct horse battery staple');
         await driver.press('#password', driver.Key.ENTER);
 
-        // goes to the settings screen
-        await driver.clickElement('.account-menu__icon');
-        await driver.clickElement({ text: 'Settings', tag: 'div' });
-        await driver.clickElement({ text: 'Advanced', tag: 'div' });
-        await driver.clickElement(
-          '[data-testid="advanced-setting-show-testnet-conversion"] .settings-page__content-item-col > label > div',
-        );
-        const advancedGasTitle = await driver.findElement({
-          text: 'Advanced gas controls',
-          tag: 'span',
-        });
-        await driver.scrollToElement(advancedGasTitle);
-        await driver.clickElement(
-          '[data-testid="advanced-setting-advanced-gas-inline"] .settings-page__content-item-col > label > div',
-        );
-        await driver.clickElement('.app-header__logo-container');
-
         // initiates a send from the dapp
         await driver.openNewPage('http://127.0.0.1:8080/');
         await driver.clickElement({ text: 'Send', tag: 'button' });
@@ -272,10 +255,10 @@ describe('Send ETH from dapp using advanced gas controls', function () {
           css: '.transaction-total-banner',
           text: '0.00021 ETH',
         });
-        await driver.clickElement(
-          { text: 'Edit suggested gas fee', tag: 'button' },
-          10000,
-        );
+        await driver.clickElement({
+          text: 'Edit suggested gas fee',
+          tag: 'button',
+        });
         await driver.waitForSelector({
           css: '.transaction-total-banner',
           text: '0.00021 ETH',
diff --git a/test/e2e/tests/send-hex-address.spec.js b/test/e2e/tests/send-hex-address.spec.js
index ade462eb3..315b5565d 100644
--- a/test/e2e/tests/send-hex-address.spec.js
+++ b/test/e2e/tests/send-hex-address.spec.js
@@ -57,7 +57,7 @@ describe('Send ETH to a 40 character hexadecimal address', function () {
         );
         await sendTransactionListItem.click();
         await driver.clickElement({ text: 'Activity log', tag: 'summary' });
-        await driver.clickElement('.sender-to-recipient__name:nth-of-type(2)');
+        await driver.clickElement('[data-testid="sender-to-recipient__name"]');
 
         // Verify address in activity log
         const publicAddress = await driver.findElement(
@@ -108,7 +108,7 @@ describe('Send ETH to a 40 character hexadecimal address', function () {
         );
         await sendTransactionListItem.click();
         await driver.clickElement({ text: 'Activity log', tag: 'summary' });
-        await driver.clickElement('.sender-to-recipient__name:nth-of-type(2)');
+        await driver.clickElement('[data-testid="sender-to-recipient__name"]');
 
         // Verify address in activity log
         const publicAddress = await driver.findElement(
@@ -212,7 +212,7 @@ describe('Send ERC20 to a 40 character hexadecimal address', function () {
         );
         await sendTransactionListItem.click();
         await driver.clickElement({ text: 'Activity log', tag: 'summary' });
-        await driver.clickElement('.sender-to-recipient__name:nth-of-type(2)');
+        await driver.clickElement('[data-testid="sender-to-recipient__name"]');
 
         // Verify address in activity log
         const publicAddress = await driver.findElement(
@@ -302,7 +302,7 @@ describe('Send ERC20 to a 40 character hexadecimal address', function () {
         );
         await sendTransactionListItem.click();
         await driver.clickElement({ text: 'Activity log', tag: 'summary' });
-        await driver.clickElement('.sender-to-recipient__name:nth-of-type(2)');
+        await driver.clickElement('[data-testid="sender-to-recipient__name"]');
 
         // Verify address in activity log
         const publicAddress = await driver.findElement(
diff --git a/test/e2e/tests/signature-request.spec.js b/test/e2e/tests/signature-request.spec.js
index 38141527b..9fa2a08d4 100644
--- a/test/e2e/tests/signature-request.spec.js
+++ b/test/e2e/tests/signature-request.spec.js
@@ -56,7 +56,7 @@ describe('Sign Typed Data V4 Signature Request', function () {
         const origin = content[0];
         const address = content[1];
         const message = await driver.findElement(
-          '.signature-request-message--node-value',
+          '.signature-request-data__node__value',
         );
         assert.equal(await title.getText(), 'Signature request');
         assert.equal(await name.getText(), 'Ether Mail');
@@ -140,7 +140,7 @@ describe('Sign Typed Data V3 Signature Request', function () {
         const origin = content[0];
         const address = content[1];
         const messages = await driver.findElements(
-          '.signature-request-message--node-value',
+          '.signature-request-data__node__value',
         );
         assert.equal(await title.getText(), 'Signature request');
         assert.equal(await name.getText(), 'Ether Mail');
@@ -154,6 +154,10 @@ describe('Sign Typed Data V3 Signature Request', function () {
         assert.equal(await messages[4].getText(), 'Hello, Bob!');
 
         // Approve signing typed data
+        await driver.clickElement(
+          '[data-testid="signature-request-scroll-button"]',
+        );
+        await driver.delay(regularDelayMs);
         await driver.clickElement({ text: 'Sign', tag: 'button' });
         await driver.waitUntilXWindowHandles(2);
         windowHandles = await driver.getAllWindowHandles();
diff --git a/test/e2e/webdriver/driver.js b/test/e2e/webdriver/driver.js
index 378a0e873..28a9ac115 100644
--- a/test/e2e/webdriver/driver.js
+++ b/test/e2e/webdriver/driver.js
@@ -49,6 +49,7 @@ class Driver {
     this.browser = browser;
     this.extensionUrl = extensionUrl;
     this.timeout = timeout;
+    this.exceptions = [];
     // The following values are found in
     // https://github.com/SeleniumHQ/selenium/blob/trunk/javascript/node/selenium-webdriver/lib/input.js#L50-L110
     // These should be replaced with string constants 'Enter' etc for playwright.
@@ -414,7 +415,9 @@ class Driver {
     const htmlSource = await this.driver.getPageSource();
     await fs.writeFile(`${filepathBase}-dom.html`, htmlSource);
     const uiState = await this.driver.executeScript(
-      () => window.getCleanAppState && window.getCleanAppState(),
+      () =>
+        window.stateHooks.getCleanAppState &&
+        window.stateHooks.getCleanAppState(),
     );
     await fs.writeFile(
       `${filepathBase}-state.json`,
@@ -436,6 +439,15 @@ class Driver {
     return browserLogs;
   }
 
+  async checkBrowserForExceptions() {
+    const { exceptions } = this;
+    const cdpConnection = await this.driver.createCDPConnection('page');
+    await this.driver.onLogException(cdpConnection, function (exception) {
+      const { description } = exception.exceptionDetails.exception;
+      exceptions.push(description);
+    });
+  }
+
   async checkBrowserForConsoleErrors() {
     const ignoredLogTypes = ['WARNING'];
     const ignoredErrorMessages = [
diff --git a/test/helpers/setup-helper.js b/test/helpers/setup-helper.js
index cb627c805..4aac6a02d 100644
--- a/test/helpers/setup-helper.js
+++ b/test/helpers/setup-helper.js
@@ -1,3 +1,5 @@
+/* eslint-disable-next-line */
+import { TextEncoder, TextDecoder } from 'util';
 import nock from 'nock';
 import Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
@@ -102,6 +104,10 @@ if (!window.crypto.getRandomValues) {
   window.crypto.getRandomValues = require('polyfill-crypto.getrandomvalues');
 }
 
+// TextEncoder/TextDecoder
+window.TextEncoder = TextEncoder;
+window.TextDecoder = TextDecoder;
+
 // Used to test `clearClipboard` function
 if (!window.navigator.clipboard) {
   window.navigator.clipboard = {};
diff --git a/test/jest/mock-store.js b/test/jest/mock-store.js
index 334d3fe85..5d4055628 100644
--- a/test/jest/mock-store.js
+++ b/test/jest/mock-store.js
@@ -103,6 +103,9 @@ const createGetSmartTransactionFeesApiResponse = () => {
 
 export const createSwapsMockStore = () => {
   return {
+    confirmTransaction: {
+      txData: {},
+    },
     swaps: {
       customGas: {
         limit: '0x0',
@@ -144,6 +147,76 @@ export const createSwapsMockStore = () => {
         showFiatInTestnets: true,
       },
       currentCurrency: 'ETH',
+      currentNetworkTxList: [
+        {
+          id: 6571648590592143,
+          time: 1667403993369,
+          status: 'confirmed',
+          metamaskNetworkId: '5',
+          originalGasEstimate: '0x7548',
+          userEditedGasLimit: false,
+          chainId: '0x5',
+          loadingDefaults: false,
+          dappSuggestedGasFees: null,
+          sendFlowHistory: null,
+          txParams: {
+            from: '0x806627172af48bd5b0765d3449a7def80d6576ff',
+            to: '0x881d40237659c251811cec9c364ef91dc08d300c',
+            nonce: '0x30',
+            value: '0x5af3107a4000',
+            gas: '0x7548',
+            maxFeePerGas: '0x19286f704d',
+            maxPriorityFeePerGas: '0x77359400',
+          },
+          origin: 'metamask',
+          actionId: 1667403993358.877,
+          type: 'swap',
+          userFeeLevel: 'medium',
+          defaultGasEstimates: {
+            estimateType: 'medium',
+            gas: '0x7548',
+            maxFeePerGas: '0x19286f704d',
+            maxPriorityFeePerGas: '0x77359400',
+          },
+          sourceTokenSymbol: 'ETH',
+          destinationTokenSymbol: 'USDC',
+          destinationTokenDecimals: 6,
+          destinationTokenAddress: '0xdac17f958d2ee523a2206206994597c13d831ec7',
+          swapMetaData: {
+            token_from: 'ETH',
+            token_from_amount: '0.0001',
+            token_to: 'USDC',
+            token_to_amount: '0.15471500',
+            slippage: 2,
+            custom_slippage: false,
+            best_quote_source: 'pmm',
+            other_quote_selected: false,
+            other_quote_selected_source: '',
+            gas_fees: '3.016697',
+            estimated_gas: '30024',
+            used_gas_price: '0',
+            is_hardware_wallet: false,
+            stx_enabled: false,
+            current_stx_enabled: false,
+            stx_user_opt_in: false,
+            reg_tx_fee_in_usd: 3.02,
+            reg_tx_fee_in_eth: 0.00193,
+            reg_tx_max_fee_in_usd: 5.06,
+            reg_tx_max_fee_in_eth: 0.00324,
+            max_fee_per_gas: '19286f704d',
+            max_priority_fee_per_gas: '77359400',
+            base_and_priority_fee_per_gas: 'efd93d95a',
+          },
+          swapTokenValue: '0.0001',
+          estimatedBaseFee: 'e865e455a',
+          hash: '0x8216e3696e7deb7ca794703015f17d5114a09362ae98f6a1611203e4c9509243',
+          submittedTime: 1667403996143,
+          firstRetryBlockNumber: '0x7838fe',
+          baseFeePerGas: '0xe0ef7d207',
+          blockTimestamp: '636290e8',
+          postTxBalance: '19a61aaaf06e4bd1',
+        },
+      ],
       conversionRate: 1,
       contractExchangeRates: {
         '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48': 2,
diff --git a/test/lib/render-helpers.js b/test/lib/render-helpers.js
index 0291df0f8..27ac3f80e 100644
--- a/test/lib/render-helpers.js
+++ b/test/lib/render-helpers.js
@@ -1,6 +1,7 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Provider } from 'react-redux';
 import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { mount, shallow } from 'enzyme';
 import { Router, MemoryRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
@@ -122,3 +123,17 @@ export function renderWithLocalization(component) {
 
   return render(component, { wrapper: Wrapper });
 }
+
+export function renderControlledInput(InputComponent, props) {
+  const ControlledWrapper = () => {
+    const [value, setValue] = useState('');
+    return (
+      <InputComponent
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        {...props}
+      />
+    );
+  };
+  return { user: userEvent.setup(), ...render(<ControlledWrapper />) };
+}
diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss
index ed008d5f0..0b457c66c 100644
--- a/ui/components/app/app-components.scss
+++ b/ui/components/app/app-components.scss
@@ -9,6 +9,7 @@
 @import 'alerts/alerts';
 @import 'app-header/index';
 @import 'asset-list-item/asset-list-item';
+@import 'beta-header/index';
 @import 'cancel-speedup-popover/index';
 @import 'confirm-page-container/index';
 @import 'confirm-page-container/enableEIP1559V2-notice';
diff --git a/ui/components/app/app-header/app-header.component.js b/ui/components/app/app-header/app-header.component.js
index 7f1bbc253..f5e7d57c5 100644
--- a/ui/components/app/app-header/app-header.component.js
+++ b/ui/components/app/app-header/app-header.component.js
@@ -7,6 +7,10 @@ import { DEFAULT_ROUTE } from '../../../helpers/constants/routes';
 import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics';
 import NetworkDisplay from '../network-display';
 
+///: BEGIN:ONLY_INCLUDE_IN(beta)
+import BetaHeader from '../beta-header';
+///: END:ONLY_INCLUDE_IN(beta)
+
 export default class AppHeader extends PureComponent {
   static propTypes = {
     history: PropTypes.object,
@@ -23,6 +27,9 @@ export default class AppHeader extends PureComponent {
     ///: BEGIN:ONLY_INCLUDE_IN(flask)
     unreadNotificationsCount: PropTypes.number,
     ///: END:ONLY_INCLUDE_IN
+    ///: BEGIN:ONLY_INCLUDE_IN(beta)
+    showBetaHeader: PropTypes.bool,
+    ///: END:ONLY_INCLUDE_IN
     onClick: PropTypes.func,
   };
 
@@ -112,33 +119,44 @@ export default class AppHeader extends PureComponent {
       disableNetworkIndicator,
       disabled,
       onClick,
+      ///: BEGIN:ONLY_INCLUDE_IN(beta)
+      showBetaHeader,
+      ///: END:ONLY_INCLUDE_IN(beta)
     } = this.props;
 
     return (
-      <div className="app-header">
-        <div className="app-header__contents">
-          <MetaFoxLogo
-            unsetIconHeight
-            onClick={async () => {
-              if (onClick) {
-                await onClick();
-              }
-              history.push(DEFAULT_ROUTE);
-            }}
-          />
-          <div className="app-header__account-menu-container">
-            {!hideNetworkIndicator && (
-              <div className="app-header__network-component-wrapper">
-                <NetworkDisplay
-                  onClick={(event) => this.handleNetworkIndicatorClick(event)}
-                  disabled={disabled || disableNetworkIndicator}
-                />
-              </div>
-            )}
-            {this.renderAccountMenu()}
+      <>
+        {
+          ///: BEGIN:ONLY_INCLUDE_IN(beta)
+          showBetaHeader ? <BetaHeader /> : null
+          ///: END:ONLY_INCLUDE_IN(beta)
+        }
+
+        <div className="app-header">
+          <div className="app-header__contents">
+            <MetaFoxLogo
+              unsetIconHeight
+              onClick={async () => {
+                if (onClick) {
+                  await onClick();
+                }
+                history.push(DEFAULT_ROUTE);
+              }}
+            />
+            <div className="app-header__account-menu-container">
+              {!hideNetworkIndicator && (
+                <div className="app-header__network-component-wrapper">
+                  <NetworkDisplay
+                    onClick={(event) => this.handleNetworkIndicatorClick(event)}
+                    disabled={disabled || disableNetworkIndicator}
+                  />
+                </div>
+              )}
+              {this.renderAccountMenu()}
+            </div>
           </div>
         </div>
-      </div>
+      </>
     );
   }
 }
diff --git a/ui/components/app/app-header/app-header.container.js b/ui/components/app/app-header/app-header.container.js
index e30049bc3..04b9c47c4 100644
--- a/ui/components/app/app-header/app-header.container.js
+++ b/ui/components/app/app-header/app-header.container.js
@@ -1,9 +1,14 @@
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import { compose } from 'redux';
-///: BEGIN:ONLY_INCLUDE_IN(flask)
-import { getUnreadNotificationsCount } from '../../../selectors';
-///: END:ONLY_INCLUDE_IN
+import {
+  ///: BEGIN:ONLY_INCLUDE_IN(flask)
+  getUnreadNotificationsCount,
+  ///: END:ONLY_INCLUDE_IN
+  ///: BEGIN:ONLY_INCLUDE_IN(beta)
+  getShowBetaHeader,
+  ///: END:ONLY_INCLUDE_IN
+} from '../../../selectors';
 
 import * as actions from '../../../store/actions';
 import AppHeader from './app-header.component';
@@ -17,6 +22,10 @@ const mapStateToProps = (state) => {
   const unreadNotificationsCount = getUnreadNotificationsCount(state);
   ///: END:ONLY_INCLUDE_IN
 
+  ///: BEGIN:ONLY_INCLUDE_IN(beta)
+  const showBetaHeader = getShowBetaHeader(state);
+  ///: END:ONLY_INCLUDE_IN
+
   return {
     networkDropdownOpen,
     selectedAddress,
@@ -25,6 +34,9 @@ const mapStateToProps = (state) => {
     ///: BEGIN:ONLY_INCLUDE_IN(flask)
     unreadNotificationsCount,
     ///: END:ONLY_INCLUDE_IN
+    ///: BEGIN:ONLY_INCLUDE_IN(beta)
+    showBetaHeader,
+    ///: END:ONLY_INCLUDE_IN
   };
 };
 
diff --git a/ui/components/app/approve-content-card/approve-content-card.js b/ui/components/app/approve-content-card/approve-content-card.js
index 34b7e3ee9..2e821eaa0 100644
--- a/ui/components/app/approve-content-card/approve-content-card.js
+++ b/ui/components/app/approve-content-card/approve-content-card.js
@@ -217,25 +217,88 @@ export default function ApproveContentCard({
 }
 
 ApproveContentCard.propTypes = {
+  /**
+   * Whether to show header including icon, transaction fee text and edit button
+   */
   showHeader: PropTypes.bool,
+  /**
+   * Symbol icon
+   */
   symbol: PropTypes.node,
+  /**
+   * Title to be included in the header
+   */
   title: PropTypes.string,
+  /**
+   * Whether to show edit button or not
+   */
   showEdit: PropTypes.bool,
+  /**
+   * Whether to show advanced gas fee options or not
+   */
   showAdvanceGasFeeOptions: PropTypes.bool,
+  /**
+   * Should open customize gas modal when edit button is clicked
+   */
   onEditClick: PropTypes.func,
+  /**
+   * Footer to be shown
+   */
   footer: PropTypes.node,
+  /**
+   * Whether to include border-bottom or not
+   */
   noBorder: PropTypes.bool,
+  /**
+   * Is enhanced gas fee enabled or not
+   */
   supportsEIP1559V2: PropTypes.bool,
+  /**
+   * Whether to render transaction details content or not
+   */
   renderTransactionDetailsContent: PropTypes.bool,
+  /**
+   * Whether to render data content or not
+   */
   renderDataContent: PropTypes.bool,
+  /**
+   * Is multi-layer fee network or not
+   */
   isMultiLayerFeeNetwork: PropTypes.bool,
+  /**
+   * Total sum of the transaction in native currency
+   */
   ethTransactionTotal: PropTypes.string,
+  /**
+   * Current native currency
+   */
   nativeCurrency: PropTypes.string,
+  /**
+   * Current transaction
+   */
   fullTxData: PropTypes.object,
+  /**
+   * Total sum of the transaction converted to hex value
+   */
   hexTransactionTotal: PropTypes.string,
+  /**
+   * Total sum of the transaction in fiat currency
+   */
   fiatTransactionTotal: PropTypes.string,
+  /**
+   * Current fiat currency
+   */
   currentCurrency: PropTypes.string,
+  /**
+   * Is set approve for all or not
+   */
   isSetApproveForAll: PropTypes.bool,
+  /**
+   * Whether a current set approval for all transaction will approve or revoke access
+   */
   isApprovalOrRejection: PropTypes.bool,
+  /**
+   * Current transaction data
+   */
   data: PropTypes.string,
 };
diff --git a/ui/components/app/approve-content-card/approve-content-card.stories.js b/ui/components/app/approve-content-card/approve-content-card.stories.js
new file mode 100644
index 000000000..113b35384
--- /dev/null
+++ b/ui/components/app/approve-content-card/approve-content-card.stories.js
@@ -0,0 +1,196 @@
+import React from 'react';
+import ApproveContentCard from './approve-content-card';
+
+export default {
+  title: 'Components/App/ApproveContentCard',
+  id: __filename,
+  argTypes: {
+    showHeader: {
+      control: 'boolean',
+    },
+    symbol: {
+      control: 'array',
+    },
+    title: {
+      control: 'text',
+    },
+    showEdit: {
+      control: 'boolean',
+    },
+    showAdvanceGasFeeOptions: {
+      control: 'boolean',
+    },
+    footer: {
+      control: 'array',
+    },
+    noBorder: {
+      control: 'boolean',
+    },
+    supportsEIP1559V2: {
+      control: 'boolean',
+    },
+    renderTransactionDetailsContent: {
+      control: 'boolean',
+    },
+    renderDataContent: {
+      control: 'boolean',
+    },
+    isMultiLayerFeeNetwork: {
+      control: 'boolean',
+    },
+    ethTransactionTotal: {
+      control: 'text',
+    },
+    nativeCurrency: {
+      control: 'text',
+    },
+    fullTxData: {
+      control: 'object',
+    },
+    hexTransactionTotal: {
+      control: 'text',
+    },
+    fiatTransactionTotal: {
+      control: 'text',
+    },
+    currentCurrency: {
+      control: 'text',
+    },
+    isSetApproveForAll: {
+      control: 'boolean',
+    },
+    isApprovalOrRejection: {
+      control: 'boolean',
+    },
+    data: {
+      control: 'text',
+    },
+    onEditClick: {
+      control: 'onEditClick',
+    },
+  },
+  args: {
+    showHeader: true,
+    symbol: <i className="fa fa-tag" />,
+    title: 'Transaction fee',
+    showEdit: true,
+    showAdvanceGasFeeOptions: true,
+    noBorder: true,
+    supportsEIP1559V2: false,
+    renderTransactionDetailsContent: true,
+    renderDataContent: false,
+    isMultiLayerFeeNetwork: false,
+    ethTransactionTotal: '0.0012',
+    nativeCurrency: 'GoerliETH',
+    hexTransactionTotal: '0x44364c5bb0000',
+    fiatTransactionTotal: '1.54',
+    currentCurrency: 'usd',
+    isSetApproveForAll: false,
+    isApprovalOrRejection: false,
+    data: '',
+    fullTxData: {
+      id: 3049568294499567,
+      time: 1664449552289,
+      status: 'unapproved',
+      metamaskNetworkId: '3',
+      originalGasEstimate: '0xea60',
+      userEditedGasLimit: false,
+      chainId: '0x3',
+      loadingDefaults: false,
+      dappSuggestedGasFees: {
+        gasPrice: '0x4a817c800',
+        gas: '0xea60',
+      },
+      sendFlowHistory: [],
+      txParams: {
+        from: '0xdd34b35ca1de17dfcdc07f79ff1f8f94868c40a1',
+        to: '0x55797717b9947b31306f4aac7ad1365c6e3923bd',
+        value: '0x0',
+        data: '0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170',
+        gas: '0xea60',
+        maxFeePerGas: '0x4a817c800',
+        maxPriorityFeePerGas: '0x4a817c800',
+      },
+      origin: 'https://metamask.github.io',
+      type: 'approve',
+      history: [
+        {
+          id: 3049568294499567,
+          time: 1664449552289,
+          status: 'unapproved',
+          metamaskNetworkId: '3',
+          originalGasEstimate: '0xea60',
+          userEditedGasLimit: false,
+          chainId: '0x3',
+          loadingDefaults: true,
+          dappSuggestedGasFees: {
+            gasPrice: '0x4a817c800',
+            gas: '0xea60',
+          },
+          sendFlowHistory: [],
+          txParams: {
+            from: '0xdd34b35ca1de17dfcdc07f79ff1f8f94868c40a1',
+            to: '0x55797717b9947b31306f4aac7ad1365c6e3923bd',
+            value: '0x0',
+            data: '0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170',
+            gas: '0xea60',
+            gasPrice: '0x4a817c800',
+          },
+          origin: 'https://metamask.github.io',
+          type: 'approve',
+        },
+        [
+          {
+            op: 'remove',
+            path: '/txParams/gasPrice',
+            note: 'Added new unapproved transaction.',
+            timestamp: 1664449553939,
+          },
+          {
+            op: 'add',
+            path: '/txParams/maxFeePerGas',
+            value: '0x4a817c800',
+          },
+          {
+            op: 'add',
+            path: '/txParams/maxPriorityFeePerGas',
+            value: '0x4a817c800',
+          },
+          {
+            op: 'replace',
+            path: '/loadingDefaults',
+            value: false,
+          },
+          {
+            op: 'add',
+            path: '/userFeeLevel',
+            value: 'custom',
+          },
+          {
+            op: 'add',
+            path: '/defaultGasEstimates',
+            value: {
+              estimateType: 'custom',
+              gas: '0xea60',
+              maxFeePerGas: '0x4a817c800',
+              maxPriorityFeePerGas: '0x4a817c800',
+            },
+          },
+        ],
+      ],
+      userFeeLevel: 'custom',
+      defaultGasEstimates: {
+        estimateType: 'custom',
+        gas: '0xea60',
+        maxFeePerGas: '0x4a817c800',
+        maxPriorityFeePerGas: '0x4a817c800',
+      },
+    },
+  },
+};
+
+export const DefaultStory = (args) => {
+  return <ApproveContentCard {...args} />;
+};
+
+DefaultStory.storyName = 'Default';
diff --git a/ui/components/app/beta-header/__snapshots__/beta-header.test.js.snap b/ui/components/app/beta-header/__snapshots__/beta-header.test.js.snap
new file mode 100644
index 000000000..24c327ba4
--- /dev/null
+++ b/ui/components/app/beta-header/__snapshots__/beta-header.test.js.snap
@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Beta Header should match snapshot 1`] = `
+<div>
+  <div
+    class="box beta-header box--padding-2 box--display-flex box--flex-direction-row box--width-full box--background-color-warning-default"
+  >
+    <h6
+      class="box box--flex-direction-row typography beta-header__message typography--h7 typography--weight-normal typography--style-normal typography--color-warning-inverse"
+    >
+      <span>
+         
+        This is a BETA version. Please report bugs 
+        <a
+          href="https://metamask.zendesk.com/hc/en-us"
+          rel="noreferrer noopener"
+          target="_blank"
+        >
+          here
+        </a>
+        
+         
+      </span>
+    </h6>
+    <button
+      aria-label="Close"
+      class="beta-header__button"
+      data-testid="beta-header-close"
+    >
+      <i
+        class="fa fa-times"
+      />
+    </button>
+  </div>
+</div>
+`;
diff --git a/ui/components/app/beta-header/beta-header.stories.js b/ui/components/app/beta-header/beta-header.stories.js
new file mode 100644
index 000000000..4a4480090
--- /dev/null
+++ b/ui/components/app/beta-header/beta-header.stories.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import testData from '../../../../.storybook/test-data';
+import configureStore from '../../../store/store';
+import BetaHeader from '.';
+
+const store = configureStore({
+  ...testData,
+  metamask: { ...testData.metamask, isUnlocked: true, showBetaHeader: true },
+});
+
+export default {
+  title: 'Components/App/BetaHeader',
+  decorators: [(story) => <Provider store={store}>{story()}</Provider>],
+  id: __filename,
+};
+
+export const DefaultStory = () => (
+  <>
+    <BetaHeader />
+  </>
+);
+
+DefaultStory.storyName = 'Default';
diff --git a/ui/components/app/beta-header/beta-header.test.js b/ui/components/app/beta-header/beta-header.test.js
new file mode 100644
index 000000000..2036b23e0
--- /dev/null
+++ b/ui/components/app/beta-header/beta-header.test.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import mockState from '../../../../test/data/mock-state.json';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import BetaHeader from '.';
+
+const mockHideBetaHeader = jest.fn();
+
+jest.mock('../../../store/actions', () => {
+  return {
+    hideBetaHeader: () => {
+      mockHideBetaHeader();
+    },
+  };
+});
+
+describe('Beta Header', () => {
+  let store;
+
+  beforeEach(() => {
+    store = configureMockStore([thunk])(mockState);
+  });
+
+  afterEach(() => {
+    mockHideBetaHeader.mockClear();
+  });
+
+  it('should match snapshot', () => {
+    const { container } = renderWithProvider(<BetaHeader />, store);
+    expect(container).toMatchSnapshot();
+  });
+
+  describe('Beta Header', () => {
+    it('gets hidden when close button is clicked', () => {
+      const { queryByTestId } = renderWithProvider(<BetaHeader />, store);
+
+      const closeButton = queryByTestId('beta-header-close');
+      fireEvent.click(closeButton);
+
+      expect(mockHideBetaHeader).toHaveBeenCalledTimes(1);
+    });
+  });
+});
diff --git a/ui/components/app/beta-header/index.js b/ui/components/app/beta-header/index.js
new file mode 100644
index 000000000..dd1884339
--- /dev/null
+++ b/ui/components/app/beta-header/index.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+
+import Box from '../../ui/box/box';
+import Typography from '../../ui/typography/typography';
+import {
+  TYPOGRAPHY,
+  COLORS,
+  BLOCK_SIZES,
+  DISPLAY,
+} from '../../../helpers/constants/design-system';
+import { BETA_BUGS_URL } from '../../../helpers/constants/beta';
+
+import { hideBetaHeader } from '../../../store/actions';
+
+const BetaHeader = () => {
+  const t = useI18nContext();
+
+  return (
+    <Box
+      display={DISPLAY.FLEX}
+      width={BLOCK_SIZES.FULL}
+      backgroundColor={COLORS.WARNING_DEFAULT}
+      padding={2}
+      className="beta-header"
+    >
+      <Typography
+        variant={TYPOGRAPHY.H7}
+        marginTop={0}
+        marginBottom={0}
+        className="beta-header__message"
+        color={COLORS.WARNING_INVERSE}
+      >
+        {t('betaHeaderText', [
+          <a
+            href={BETA_BUGS_URL}
+            key="link"
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            {t('here')}
+          </a>,
+        ])}
+      </Typography>
+      <button
+        className="beta-header__button"
+        data-testid="beta-header-close"
+        onClick={() => {
+          hideBetaHeader();
+        }}
+        aria-label={t('close')}
+      >
+        <i className="fa fa-times" />
+      </button>
+    </Box>
+  );
+};
+
+export default BetaHeader;
diff --git a/ui/components/app/beta-header/index.scss b/ui/components/app/beta-header/index.scss
new file mode 100644
index 000000000..6d143af97
--- /dev/null
+++ b/ui/components/app/beta-header/index.scss
@@ -0,0 +1,16 @@
+.beta-header {
+  &__message {
+    text-align: center;
+    flex-grow: 1;
+  }
+
+  &__button {
+    background: transparent;
+    padding: 0 6px;
+    margin: 0;
+
+    i {
+      color: var(--color-warning-inverse);
+    }
+  }
+}
diff --git a/ui/components/app/collectible-details/collectible-details.js b/ui/components/app/collectible-details/collectible-details.js
index d2e6a9100..213eeb353 100644
--- a/ui/components/app/collectible-details/collectible-details.js
+++ b/ui/components/app/collectible-details/collectible-details.js
@@ -30,8 +30,8 @@ import Copy from '../../ui/icon/copy-icon.component';
 import { getCollectibleContracts } from '../../../ducks/metamask/metamask';
 import { DEFAULT_ROUTE, SEND_ROUTE } from '../../../helpers/constants/routes';
 import {
-  checkAndUpdateSingleCollectibleOwnershipStatus,
-  removeAndIgnoreCollectible,
+  checkAndUpdateSingleNftOwnershipStatus,
+  removeAndIgnoreNft,
 } from '../../../store/actions';
 import { CHAIN_IDS } from '../../../../shared/constants/network';
 import { getEnvironmentType } from '../../../../app/scripts/lib/util';
@@ -79,14 +79,14 @@ export default function CollectibleDetails({ collectible }) {
   );
 
   const onRemove = () => {
-    dispatch(removeAndIgnoreCollectible(address, tokenId));
+    dispatch(removeAndIgnoreNft(address, tokenId));
     history.push(DEFAULT_ROUTE);
   };
 
   const prevCollectible = usePrevious(collectible);
   useEffect(() => {
     if (!isEqual(prevCollectible, collectible)) {
-      checkAndUpdateSingleCollectibleOwnershipStatus(collectible);
+      checkAndUpdateSingleNftOwnershipStatus(collectible);
     }
   }, [collectible, prevCollectible]);
 
@@ -111,7 +111,7 @@ export default function CollectibleDetails({ collectible }) {
   const onSend = async () => {
     await dispatch(
       startNewDraftTransaction({
-        type: ASSET_TYPES.COLLECTIBLE,
+        type: ASSET_TYPES.NFT,
         details: collectible,
       }),
     );
diff --git a/ui/components/app/collectibles-tab/collectibles-tab.js b/ui/components/app/collectibles-tab/collectibles-tab.js
index 6b7c74843..3f228f0ab 100644
--- a/ui/components/app/collectibles-tab/collectibles-tab.js
+++ b/ui/components/app/collectibles-tab/collectibles-tab.js
@@ -18,17 +18,17 @@ import {
 } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { getCollectiblesDetectionNoticeDismissed } from '../../../ducks/metamask/metamask';
-import { getIsMainnet, getUseCollectibleDetection } from '../../../selectors';
+import { getIsMainnet, getUseNftDetection } from '../../../selectors';
 import { EXPERIMENTAL_ROUTE } from '../../../helpers/constants/routes';
 import {
-  checkAndUpdateAllCollectiblesOwnershipStatus,
-  detectCollectibles,
+  checkAndUpdateAllNftsOwnershipStatus,
+  detectNfts,
 } from '../../../store/actions';
 import { useCollectiblesCollections } from '../../../hooks/useCollectiblesCollections';
 import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
 
 export default function CollectiblesTab({ onAddNFT }) {
-  const useCollectibleDetection = useSelector(getUseCollectibleDetection);
+  const useNftDetection = useSelector(getUseNftDetection);
   const isMainnet = useSelector(getIsMainnet);
   const collectibleDetectionNoticeDismissed = useSelector(
     getCollectiblesDetectionNoticeDismissed,
@@ -46,9 +46,9 @@ export default function CollectiblesTab({ onAddNFT }) {
 
   const onRefresh = () => {
     if (isMainnet) {
-      dispatch(detectCollectibles());
+      dispatch(detectNfts());
     }
-    checkAndUpdateAllCollectiblesOwnershipStatus();
+    checkAndUpdateAllNftsOwnershipStatus();
   };
 
   if (collectiblesLoading) {
@@ -66,7 +66,7 @@ export default function CollectiblesTab({ onAddNFT }) {
       ) : (
         <>
           {isMainnet &&
-          !useCollectibleDetection &&
+          !useNftDetection &&
           !collectibleDetectionNoticeDismissed ? (
             <CollectiblesDetectionNotice />
           ) : null}
@@ -123,7 +123,7 @@ export default function CollectiblesTab({ onAddNFT }) {
                 className="collectibles-tab__link"
                 justifyContent={JUSTIFY_CONTENT.FLEX_END}
               >
-                {isMainnet && !useCollectibleDetection ? (
+                {isMainnet && !useNftDetection ? (
                   <Button type="link" onClick={onEnableAutoDetect}>
                     {t('enableAutoDetect')}
                   </Button>
diff --git a/ui/components/app/collectibles-tab/collectibles-tab.test.js b/ui/components/app/collectibles-tab/collectibles-tab.test.js
index 2e1b6b692..e9d10278d 100644
--- a/ui/components/app/collectibles-tab/collectibles-tab.test.js
+++ b/ui/components/app/collectibles-tab/collectibles-tab.test.js
@@ -150,17 +150,17 @@ const render = ({
   selectedAddress,
   chainId = '0x1',
   collectiblesDetectionNoticeDismissed = false,
-  useCollectibleDetection,
+  useNftDetection,
   onAddNFT = jest.fn(),
 }) => {
   const store = configureStore({
     metamask: {
-      allCollectibles: {
+      allNfts: {
         [ACCOUNT_1]: {
           [chainId]: collectibles,
         },
       },
-      allCollectibleContracts: {
+      allNftContracts: {
         [ACCOUNT_1]: {
           [chainId]: collectibleContracts,
         },
@@ -168,7 +168,7 @@ const render = ({
       provider: { chainId },
       selectedAddress,
       collectiblesDetectionNoticeDismissed,
-      useCollectibleDetection,
+      useNftDetection,
       collectiblesDropdownState,
     },
   });
@@ -184,9 +184,9 @@ describe('Collectible Items', () => {
   setBackgroundConnection({
     setCollectiblesDetectionNoticeDismissed:
       setCollectiblesDetectionNoticeDismissedStub,
-    detectCollectibles: detectCollectiblesStub,
+    detectNfts: detectCollectiblesStub,
     getState: getStateStub,
-    checkAndUpdateAllCollectiblesOwnershipStatus:
+    checkAndUpdateAllNftsOwnershipStatus:
       checkAndUpdateAllCollectiblesOwnershipStatusStub,
     updateCollectibleDropDownState: updateCollectibleDropDownStateStub,
   });
@@ -231,7 +231,7 @@ describe('Collectible Items', () => {
       render({
         selectedAddress: ACCOUNT_1,
         collectibles: COLLECTIBLES,
-        useCollectibleDetection: true,
+        useNftDetection: true,
       });
       expect(screen.queryByText('New! NFT detection')).not.toBeInTheDocument();
     });
@@ -284,7 +284,7 @@ describe('Collectible Items', () => {
       render({
         selectedAddress: ACCOUNT_1,
         collectibles: COLLECTIBLES,
-        useCollectibleDetection: true,
+        useNftDetection: true,
       });
       expect(detectCollectiblesStub).not.toHaveBeenCalled();
       expect(
@@ -302,7 +302,7 @@ describe('Collectible Items', () => {
         chainId: '0x5',
         selectedAddress: ACCOUNT_1,
         collectibles: COLLECTIBLES,
-        useCollectibleDetection: true,
+        useNftDetection: true,
       });
       expect(
         checkAndUpdateAllCollectiblesOwnershipStatusStub,
diff --git 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
index 2256f6e9c..7964f0645 100644
--- 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
@@ -92,7 +92,7 @@ describe('Confirm Page Container Container Test', () => {
       expect(senderRecipient).toBeInTheDocument();
     });
     it('should render recipient as address', () => {
-      const recipientName = screen.queryByText(shortenAddress(props.toAddress));
+      const recipientName = screen.queryByText('New contract');
       expect(recipientName).toBeInTheDocument();
     });
 
@@ -118,7 +118,7 @@ describe('Confirm Page Container Container Test', () => {
 
   describe('Contact/AddressBook name should appear in recipient header', () => {
     it('should not show add to address dialog if recipient is in contact list and should display contact name', () => {
-      const addressBookName = 'test save name';
+      const addressBookName = 'New contract';
 
       const addressBook = {
         '0x5': {
diff --git a/ui/components/app/confirm-page-container/confirm-page-container.component.js b/ui/components/app/confirm-page-container/confirm-page-container.component.js
index fef74137b..c43233232 100644
--- a/ui/components/app/confirm-page-container/confirm-page-container.component.js
+++ b/ui/components/app/confirm-page-container/confirm-page-container.component.js
@@ -65,6 +65,7 @@ export default class ConfirmPageContainer extends Component {
     fromName: PropTypes.string,
     toAddress: PropTypes.string,
     toName: PropTypes.string,
+    toMetadataName: PropTypes.string,
     toEns: PropTypes.string,
     toNickname: PropTypes.string,
     // Content
@@ -119,6 +120,7 @@ export default class ConfirmPageContainer extends Component {
       fromName,
       fromAddress,
       toName,
+      toMetadataName,
       toEns,
       toNickname,
       toAddress,
@@ -233,6 +235,7 @@ export default class ConfirmPageContainer extends Component {
                   senderName={fromName}
                   senderAddress={fromAddress}
                   recipientName={toName}
+                  recipientMetadataName={toMetadataName}
                   recipientAddress={toAddress}
                   recipientEns={toEns}
                   recipientNickname={toNickname}
diff --git a/ui/components/app/confirm-page-container/confirm-page-container.container.js b/ui/components/app/confirm-page-container/confirm-page-container.container.js
index 265ca7ea3..0ce2790fc 100644
--- a/ui/components/app/confirm-page-container/confirm-page-container.container.js
+++ b/ui/components/app/confirm-page-container/confirm-page-container.container.js
@@ -5,6 +5,9 @@ import {
   getIsBuyableChain,
   getNetworkIdentifier,
   getSwapsDefaultToken,
+  getMetadataContractName,
+  getAccountName,
+  getMetaMaskIdentities,
 } from '../../../selectors';
 import ConfirmPageContainer from './confirm-page-container.component';
 
@@ -15,11 +18,15 @@ function mapStateToProps(state, ownProps) {
   const networkIdentifier = getNetworkIdentifier(state);
   const defaultToken = getSwapsDefaultToken(state);
   const accountBalance = defaultToken.string;
+  const identities = getMetaMaskIdentities(state);
+  const toName = getAccountName(identities, to);
+  const toMetadataName = getMetadataContractName(state, to);
 
   return {
     isBuyableChain,
     contact,
-    toName: contact?.name || ownProps.toName,
+    toName,
+    toMetadataName,
     isOwnedAccount: getAccountsWithLabels(state)
       .map((accountWithLabel) => accountWithLabel.address)
       .includes(to),
diff --git a/ui/components/app/confirm-page-container/flask/snap-insight.js b/ui/components/app/confirm-page-container/flask/snap-insight.js
index 6446d4943..30c21776d 100644
--- a/ui/components/app/confirm-page-container/flask/snap-insight.js
+++ b/ui/components/app/confirm-page-container/flask/snap-insight.js
@@ -15,10 +15,15 @@ import { useI18nContext } from '../../../../hooks/useI18nContext';
 import { useTransactionInsightSnap } from '../../../../hooks/flask/useTransactionInsightSnap';
 import SnapContentFooter from '../../flask/snap-content-footer/snap-content-footer';
 import Box from '../../../ui/box/box';
+import ActionableMessage from '../../../ui/actionable-message/actionable-message';
 
 export const SnapInsight = ({ transaction, chainId, selectedSnap }) => {
   const t = useI18nContext();
-  const response = useTransactionInsightSnap({
+  const {
+    data: response,
+    error,
+    loading,
+  } = useTransactionInsightSnap({
     transaction,
     chainId,
     snapId: selectedSnap.id,
@@ -26,8 +31,8 @@ export const SnapInsight = ({ transaction, chainId, selectedSnap }) => {
 
   const data = response?.insights;
 
-  const hasNoData = !data || !Object.keys(data).length;
-
+  const hasNoData =
+    !error && (loading || !data || (data && Object.keys(data).length === 0));
   return (
     <Box
       flexDirection={FLEX_DIRECTION.COLUMN}
@@ -39,13 +44,13 @@ export const SnapInsight = ({ transaction, chainId, selectedSnap }) => {
       textAlign={hasNoData && TEXT_ALIGN.CENTER}
       className="snap-insight"
     >
-      {data ? (
+      {!loading && !error && (
         <Box
           height="full"
           flexDirection={FLEX_DIRECTION.COLUMN}
           className="snap-insight__container"
         >
-          {Object.keys(data).length ? (
+          {data && Object.keys(data).length > 0 ? (
             <>
               <Box
                 flexDirection={FLEX_DIRECTION.COLUMN}
@@ -94,7 +99,29 @@ export const SnapInsight = ({ transaction, chainId, selectedSnap }) => {
             </Typography>
           )}
         </Box>
-      ) : (
+      )}
+
+      {!loading && error && (
+        <Box
+          paddingTop={0}
+          paddingRight={6}
+          paddingBottom={3}
+          paddingLeft={6}
+          className="snap-insight__container__error"
+        >
+          <ActionableMessage
+            message={t('snapsInsightError', [
+              selectedSnap.manifest.proposedName,
+              error.message,
+            ])}
+            type="danger"
+            useIcon
+            iconFillColor="var(--color-error-default)"
+          />
+        </Box>
+      )}
+
+      {loading && (
         <>
           <Preloader size={40} />
           <Typography
diff --git a/ui/components/app/custom-spending-cap/custom-spending-cap.js b/ui/components/app/custom-spending-cap/custom-spending-cap.js
index c19118e95..9afedc0b5 100644
--- a/ui/components/app/custom-spending-cap/custom-spending-cap.js
+++ b/ui/components/app/custom-spending-cap/custom-spending-cap.js
@@ -1,4 +1,5 @@
-import React, { useState, useContext } from 'react';
+import React, { useState, useContext, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import { I18nContext } from '../../../contexts/i18n';
 import Box from '../../ui/box';
@@ -15,6 +16,8 @@ import {
   JUSTIFY_CONTENT,
   SIZES,
 } from '../../../helpers/constants/design-system';
+import { getCustomTokenAmount } from '../../../selectors';
+import { setCustomTokenAmount } from '../../../ducks/app/app';
 import { CustomSpendingCapTooltip } from './custom-spending-cap-tooltip';
 
 export default function CustomSpendingCap({
@@ -22,12 +25,17 @@ export default function CustomSpendingCap({
   currentTokenBalance,
   dappProposedValue,
   siteOrigin,
-  onEdit,
+  passTheErrorText,
 }) {
   const t = useContext(I18nContext);
-  const [value, setValue] = useState('');
-  const [customSpendingCapText, setCustomSpendingCapText] = useState('');
+  const dispatch = useDispatch();
+
+  const value = useSelector(getCustomTokenAmount);
+
   const [error, setError] = useState('');
+  const [showUseDefaultButton, setShowUseDefaultButton] = useState(
+    value !== String(dappProposedValue) && true,
+  );
   const inputLogicEmptyStateText = t('inputLogicEmptyState');
 
   const getInputTextLogic = (inputNumber) => {
@@ -57,6 +65,10 @@ export default function CustomSpendingCap({
     };
   };
 
+  const [customSpendingCapText, setCustomSpendingCapText] = useState(
+    getInputTextLogic(value).description,
+  );
+
   const handleChange = (valueInput) => {
     let spendingCapError = '';
     const inputTextLogic = getInputTextLogic(valueInput);
@@ -71,9 +83,19 @@ export default function CustomSpendingCap({
       setError('');
     }
 
-    setValue(valueInput);
+    dispatch(setCustomTokenAmount(String(valueInput)));
   };
 
+  useEffect(() => {
+    if (value !== String(dappProposedValue)) {
+      setShowUseDefaultButton(true);
+    }
+  }, [value, dappProposedValue]);
+
+  useEffect(() => {
+    passTheErrorText(error);
+  }, [error, passTheErrorText]);
+
   const chooseTooltipContentText =
     value > currentTokenBalance
       ? t('warningTooltipText', [
@@ -100,7 +122,6 @@ export default function CustomSpendingCap({
           onClick={(e) => {
             e.preventDefault();
             handleChange(currentTokenBalance);
-            setValue(currentTokenBalance);
           }}
         >
           {t('max')}
@@ -131,6 +152,7 @@ export default function CustomSpendingCap({
             }
           >
             <FormField
+              numeric
               dataTestId="custom-spending-cap-input"
               autoFocus
               wrappingLabelProps={{ as: 'div' }}
@@ -151,21 +173,19 @@ export default function CustomSpendingCap({
               error={error}
               value={value}
               titleDetail={
-                <button
-                  className="custom-spending-cap__input--button"
-                  type="link"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    if (value <= currentTokenBalance || error) {
+                showUseDefaultButton && (
+                  <button
+                    className="custom-spending-cap__input--button"
+                    type="link"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      setShowUseDefaultButton(false);
                       handleChange(dappProposedValue);
-                      setValue(dappProposedValue);
-                    } else {
-                      onEdit();
-                    }
-                  }}
-                >
-                  {value > currentTokenBalance ? t('edit') : t('useDefault')}
-                </button>
+                    }}
+                  >
+                    {t('useDefault')}
+                  </button>
+                )
               }
               titleDetailWrapperProps={{ marginBottom: 2, marginRight: 0 }}
               allowDecimals
@@ -202,7 +222,7 @@ CustomSpendingCap.propTypes = {
    */
   siteOrigin: PropTypes.string,
   /**
-   * onClick handler for the Edit link
+   * Parent component's callback function passed in order to get the error text
    */
-  onEdit: PropTypes.func,
+  passTheErrorText: PropTypes.func,
 };
diff --git a/ui/components/app/custom-spending-cap/custom-spending-cap.stories.js b/ui/components/app/custom-spending-cap/custom-spending-cap.stories.js
index a8f757926..5c30a32e7 100644
--- a/ui/components/app/custom-spending-cap/custom-spending-cap.stories.js
+++ b/ui/components/app/custom-spending-cap/custom-spending-cap.stories.js
@@ -17,8 +17,8 @@ export default {
     siteOrigin: {
       control: { type: 'text' },
     },
-    onEdit: {
-      action: 'onEdit',
+    passTheErrorText: {
+      action: 'passTheErrorText',
     },
   },
   args: {
diff --git a/ui/components/app/custom-spending-cap/index.scss b/ui/components/app/custom-spending-cap/index.scss
index 00ae12252..e2ab68851 100644
--- a/ui/components/app/custom-spending-cap/index.scss
+++ b/ui/components/app/custom-spending-cap/index.scss
@@ -21,6 +21,7 @@
       position: absolute;
       margin-top: 55px;
       margin-inline-start: -75px;
+      z-index: 1;
     }
   }
 
@@ -28,4 +29,10 @@
     color: var(--color-error-default);
     padding-inline-end: 60px;
   }
+
+  input[type='number']::-webkit-inner-spin-button,
+  input[type='number']:hover::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    display: none;
+  }
 }
diff --git a/ui/components/app/flask/update-snap-permission-list/update-snap-permission-list.js b/ui/components/app/flask/update-snap-permission-list/update-snap-permission-list.js
index 3ecfa91c7..105574d1d 100644
--- a/ui/components/app/flask/update-snap-permission-list/update-snap-permission-list.js
+++ b/ui/components/app/flask/update-snap-permission-list/update-snap-permission-list.js
@@ -14,77 +14,89 @@ export default function UpdateSnapPermissionList({
   const t = useI18nContext();
 
   const ApprovedPermissions = () => {
-    return Object.keys(approvedPermissions).map((approvedPermission) => {
-      const { label, rightIcon } = getPermissionDescription(
-        t,
-        approvedPermission,
-      );
-      const { date } = approvedPermissions[approvedPermission];
-      const formattedDate = formatDate(date, 'yyyy-MM-dd');
-      return (
-        <div className="approved-permission" key={approvedPermission}>
-          <i className="fas fa-check" />
-          <div className="permission-description">
-            {label}
-            <Typography
-              color={COLORS.TEXT_ALTERNATIVE}
-              className="permission-description-subtext"
-              boxProps={{ paddingTop: 1 }}
-            >
-              {t('approvedOn', [formattedDate])}
-            </Typography>
+    return Object.entries(approvedPermissions).map(
+      ([permissionName, permissionValue]) => {
+        const { label, rightIcon } = getPermissionDescription(
+          t,
+          permissionName,
+          permissionValue,
+        );
+        const { date } = permissionValue;
+        const formattedDate = formatDate(date, 'yyyy-MM-dd');
+        return (
+          <div className="approved-permission" key={permissionName}>
+            <i className="fas fa-check" />
+            <div className="permission-description">
+              {label}
+              <Typography
+                color={COLORS.TEXT_ALTERNATIVE}
+                className="permission-description-subtext"
+                boxProps={{ paddingTop: 1 }}
+              >
+                {t('approvedOn', [formattedDate])}
+              </Typography>
+            </div>
+            {rightIcon && <i className={rightIcon} />}
           </div>
-          {rightIcon && <i className={rightIcon} />}
-        </div>
-      );
-    });
+        );
+      },
+    );
   };
 
   const RevokedPermissions = () => {
-    return Object.keys(revokedPermissions).map((revokedPermission) => {
-      const { label, rightIcon } = getPermissionDescription(
-        t,
-        revokedPermission,
-      );
-      return (
-        <div className="revoked-permission" key={revokedPermission}>
-          <i className="fas fa-x" />
-          <div className="permission-description">
-            {label}
-            <Typography
-              color={COLORS.TEXT_ALTERNATIVE}
-              boxProps={{ paddingTop: 1 }}
-              className="permission-description-subtext"
-            >
-              {t('permissionRevoked')}
-            </Typography>
+    return Object.entries(revokedPermissions).map(
+      ([permissionName, permissionValue]) => {
+        const { label, rightIcon } = getPermissionDescription(
+          t,
+          permissionName,
+          permissionValue,
+        );
+        return (
+          <div className="revoked-permission" key={permissionName}>
+            <i className="fas fa-x" />
+            <div className="permission-description">
+              {label}
+              <Typography
+                color={COLORS.TEXT_ALTERNATIVE}
+                boxProps={{ paddingTop: 1 }}
+                className="permission-description-subtext"
+              >
+                {t('permissionRevoked')}
+              </Typography>
+            </div>
+            {rightIcon && <i className={rightIcon} />}
           </div>
-          {rightIcon && <i className={rightIcon} />}
-        </div>
-      );
-    });
+        );
+      },
+    );
   };
 
   const NewPermissions = () => {
-    return Object.keys(newPermissions).map((newPermission) => {
-      const { label, rightIcon } = getPermissionDescription(t, newPermission);
-      return (
-        <div className="new-permission" key={newPermission}>
-          <i className="fas fa-arrow-right" />
-          <div className="permission-description">
-            {label}
-            <Typography
-              color={COLORS.TEXT_ALTERNATIVE}
-              boxProps={{ paddingTop: 1 }}
-              className="permission-description-subtext"
-            >
-              {t('permissionRequested')}
-            </Typography>
+    return Object.entries(newPermissions).map(
+      ([permissionName, permissionValue]) => {
+        const { label, rightIcon } = getPermissionDescription(
+          t,
+          permissionName,
+          permissionValue,
+        );
+        return (
+          <div className="new-permission" key={permissionName}>
+            <i className="fas fa-arrow-right" />
+            <div className="permission-description">
+              {label}
+              <Typography
+                color={COLORS.TEXT_ALTERNATIVE}
+                boxProps={{ paddingTop: 1 }}
+                className="permission-description-subtext"
+              >
+                {t('permissionRequested')}
+              </Typography>
+            </div>
+            {rightIcon && <i className={rightIcon} />}
           </div>
-          {rightIcon && <i className={rightIcon} />}
-        </div>
-      );
-    });
+        );
+      },
+    );
   };
 
   return (
diff --git a/ui/components/app/modals/contract-details-modal/contract-details-modal.js b/ui/components/app/modals/contract-details-modal/contract-details-modal.js
index dd291303f..9095ef160 100644
--- a/ui/components/app/modals/contract-details-modal/contract-details-modal.js
+++ b/ui/components/app/modals/contract-details-modal/contract-details-modal.js
@@ -25,6 +25,8 @@ import {
 import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard';
 import UrlIcon from '../../../ui/url-icon/url-icon';
 import { getAddressBookEntry } from '../../../../selectors';
+import { ERC1155, ERC721 } from '../../../../../shared/constants/transaction';
+import NftCollectionImage from '../../../ui/nft-collection-image/nft-collection-image';
 
 export default function ContractDetailsModal({
   onClose,
@@ -35,6 +37,9 @@ export default function ContractDetailsModal({
   rpcPrefs,
   origin,
   siteImage,
+  tokenId,
+  assetName,
+  assetStandard,
 }) {
   const t = useI18nContext();
   const [copiedTokenAddress, handleCopyTokenAddress] = useCopyToClipboard();
@@ -43,6 +48,12 @@ export default function ContractDetailsModal({
   const addressBookEntry = useSelector((state) => ({
     data: getAddressBookEntry(state, toAddress),
   }));
+  const nft =
+    assetStandard === ERC721 ||
+    assetStandard === ERC1155 ||
+    // if we don't have an asset standard but we do have either both an assetname and a tokenID or both a tokenName and tokenId we assume its an NFT
+    (assetName && tokenId) ||
+    (tokenName && tokenId);
 
   return (
     <Popover className="contract-details-modal">
@@ -75,7 +86,7 @@ export default function ContractDetailsModal({
           marginTop={4}
           marginBottom={2}
         >
-          {t('contractToken')}
+          {nft ? t('contractNFT') : t('contractToken')}
         </Typography>
         <Box
           display={DISPLAY.FLEX}
@@ -84,11 +95,20 @@ export default function ContractDetailsModal({
           borderColor={COLORS.BORDER_DEFAULT}
           className="contract-details-modal__content__contract"
         >
-          <Identicon
-            className="contract-details-modal__content__contract__identicon"
-            address={tokenAddress}
-            diameter={24}
-          />
+          {nft ? (
+            <Box margin={4}>
+              <NftCollectionImage
+                assetName={assetName}
+                tokenAddress={tokenAddress}
+              />
+            </Box>
+          ) : (
+            <Identicon
+              className="contract-details-modal__content__contract__identicon"
+              address={tokenAddress}
+              diameter={24}
+            />
+          )}
           <Box data-testid="recipient">
             <Typography
               fontWeight={FONT_WEIGHT.BOLD}
@@ -102,6 +122,8 @@ export default function ContractDetailsModal({
                 variant={TYPOGRAPHY.H6}
                 display={DISPLAY.FLEX}
                 color={COLORS.TEXT_ALTERNATIVE}
+                marginTop={0}
+                marginBottom={4}
               >
                 {ellipsify(tokenAddress)}
               </Typography>
@@ -166,7 +188,9 @@ export default function ContractDetailsModal({
           marginTop={4}
           marginBottom={2}
         >
-          {t('contractRequestingSpendingCap')}
+          {nft
+            ? t('contractRequestingAccess')
+            : t('contractRequestingSpendingCap')}
         </Typography>
         <Box
           display={DISPLAY.FLEX}
@@ -175,22 +199,30 @@ export default function ContractDetailsModal({
           borderColor={COLORS.BORDER_DEFAULT}
           className="contract-details-modal__content__contract"
         >
-          <UrlIcon
-            className={classnames({
-              'contract-details-modal__content__contract__identicon-for-unknown-contact':
-                addressBookEntry?.data?.name === undefined,
-              'contract-details-modal__content__contract__identicon':
-                addressBookEntry?.data?.name !== undefined,
-            })}
-            fallbackClassName={classnames({
-              'contract-details-modal__content__contract__identicon-for-unknown-contact':
-                addressBookEntry?.data?.name === undefined,
-              'contract-details-modal__content__contract__identicon':
-                addressBookEntry?.data?.name !== undefined,
-            })}
-            name={origin}
-            url={siteImage}
-          />
+          {nft ? (
+            <Identicon
+              className="contract-details-modal__content__contract__identicon"
+              diameter={24}
+              address={toAddress}
+            />
+          ) : (
+            <UrlIcon
+              className={classnames({
+                'contract-details-modal__content__contract__identicon-for-unknown-contact':
+                  addressBookEntry?.data?.name === undefined,
+                'contract-details-modal__content__contract__identicon':
+                  addressBookEntry?.data?.name !== undefined,
+              })}
+              fallbackClassName={classnames({
+                'contract-details-modal__content__contract__identicon-for-unknown-contact':
+                  addressBookEntry?.data?.name === undefined,
+                'contract-details-modal__content__contract__identicon':
+                  addressBookEntry?.data?.name !== undefined,
+              })}
+              name={origin}
+              url={siteImage}
+            />
+          )}
           <Box data-testid="recipient">
             <Typography
               fontWeight={FONT_WEIGHT.BOLD}
@@ -204,6 +236,8 @@ export default function ContractDetailsModal({
                 variant={TYPOGRAPHY.H6}
                 display={DISPLAY.FLEX}
                 color={COLORS.TEXT_ALTERNATIVE}
+                marginTop={0}
+                marginBottom={4}
               >
                 {ellipsify(toAddress)}
               </Typography>
@@ -310,4 +344,16 @@ ContractDetailsModal.propTypes = {
    * Dapp image
    */
   siteImage: PropTypes.string,
+  /**
+   * The token id of the collectible
+   */
+  tokenId: PropTypes.string,
+  /**
+   * Token Standard
+   */
+  assetStandard: PropTypes.string,
+  /**
+   * The name of the collection
+   */
+  assetName: PropTypes.string,
 };
diff --git a/ui/components/app/modals/contract-details-modal/index.scss b/ui/components/app/modals/contract-details-modal/index.scss
index 52af5a240..1180406c3 100644
--- a/ui/components/app/modals/contract-details-modal/index.scss
+++ b/ui/components/app/modals/contract-details-modal/index.scss
@@ -1,12 +1,15 @@
 .contract-details-modal {
-  width: 360px !important;
+  width: 100% !important;
+  max-width: 408px;
 
   &__content {
     border-bottom: 1px solid var(--color-border-muted);
 
     &__contract {
       &__identicon {
-        margin: 16px 16px 38px 16px;
+        margin: 16px;
+        box-shadow: none;
+        background: none;
       }
 
       &__identicon-for-unknown-contact {
diff --git a/ui/components/app/modals/convert-token-to-nft-modal/convert-token-to-nft-modal.js b/ui/components/app/modals/convert-token-to-nft-modal/convert-token-to-nft-modal.js
index 6b5cc9673..edc0fd47a 100644
--- a/ui/components/app/modals/convert-token-to-nft-modal/convert-token-to-nft-modal.js
+++ b/ui/components/app/modals/convert-token-to-nft-modal/convert-token-to-nft-modal.js
@@ -19,8 +19,8 @@ const ConvertTokenToNFTModal = ({ hideModal, tokenAddress }) => {
   const history = useHistory();
   const t = useI18nContext();
   const dispatch = useDispatch();
-  const allCollectibles = useSelector(getCollectibles);
-  const tokenAddedAsNFT = allCollectibles.find(({ address }) =>
+  const allNfts = useSelector(getCollectibles);
+  const tokenAddedAsNFT = allNfts.find(({ address }) =>
     isEqualCaseInsensitive(address, tokenAddress),
   );
 
diff --git a/ui/components/app/signature-request/index.scss b/ui/components/app/signature-request/index.scss
index aacb6a2f9..f89b3c667 100644
--- a/ui/components/app/signature-request/index.scss
+++ b/ui/components/app/signature-request/index.scss
@@ -1,6 +1,7 @@
 @import 'signature-request-footer/index';
 @import 'signature-request-header/index';
 @import 'signature-request-message/index';
+@import 'signature-request-data/index';
 
 .signature-request {
   display: flex;
diff --git a/ui/components/app/signature-request/signature-request-data/index.js b/ui/components/app/signature-request/signature-request-data/index.js
new file mode 100644
index 000000000..64ed87d93
--- /dev/null
+++ b/ui/components/app/signature-request/signature-request-data/index.js
@@ -0,0 +1 @@
+export { default } from './signature-request-data';
diff --git a/ui/components/app/signature-request/signature-request-data/index.scss b/ui/components/app/signature-request/signature-request-data/index.scss
new file mode 100644
index 000000000..6b81bd84d
--- /dev/null
+++ b/ui/components/app/signature-request/signature-request-data/index.scss
@@ -0,0 +1,26 @@
+.signature-request-data {
+  &__node {
+    &__value {
+      white-space: pre-line;
+      overflow: hidden;
+      word-wrap: break-word;
+
+      &__address {
+        [dir='rtl'] & {
+          /*rtl:ignore*/
+          direction: ltr;
+
+          /*rtl:ignore*/
+          text-align: right;
+
+          span {
+            display: block;
+
+            /*rtl:ignore*/
+            direction: rtl;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/ui/components/app/signature-request/signature-request-data/signature-request-data.js b/ui/components/app/signature-request/signature-request-data/signature-request-data.js
new file mode 100644
index 000000000..6685f1c56
--- /dev/null
+++ b/ui/components/app/signature-request/signature-request-data/signature-request-data.js
@@ -0,0 +1,79 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import { getMetaMaskIdentities, getAccountName } from '../../../../selectors';
+import Address from '../../transaction-decoding/components/decoding/address';
+import {
+  isValidHexAddress,
+  toChecksumHexAddress,
+} from '../../../../../shared/modules/hexstring-utils';
+import Box from '../../../ui/box';
+import Typography from '../../../ui/typography';
+import {
+  DISPLAY,
+  COLORS,
+  FONT_WEIGHT,
+  TYPOGRAPHY,
+} from '../../../../helpers/constants/design-system';
+
+export default function SignatureRequestData({ data }) {
+  const identities = useSelector(getMetaMaskIdentities);
+
+  return (
+    <Box className="signature-request-data__node">
+      {Object.entries(data).map(([label, value], i) => (
+        <Box
+          className="signature-request-data__node"
+          key={i}
+          paddingLeft={2}
+          display={
+            typeof value !== 'object' || value === null ? DISPLAY.FLEX : null
+          }
+        >
+          <Typography
+            as="span"
+            color={COLORS.TEXT_DEFAULT}
+            marginLeft={4}
+            fontWeight={
+              typeof value === 'object' ? FONT_WEIGHT.BOLD : FONT_WEIGHT.NORMAL
+            }
+          >
+            {label.charAt(0).toUpperCase() + label.slice(1)}:{' '}
+          </Typography>
+          {typeof value === 'object' && value !== null ? (
+            <SignatureRequestData data={value} />
+          ) : (
+            <Typography
+              as="span"
+              color={COLORS.TEXT_DEFAULT}
+              marginLeft={4}
+              className="signature-request-data__node__value"
+            >
+              {isValidHexAddress(value, {
+                mixedCaseUseChecksum: true,
+              }) ? (
+                <Typography
+                  variant={TYPOGRAPHY.H7}
+                  color={COLORS.INFO_DEFAULT}
+                  className="signature-request-data__node__value__address"
+                >
+                  <Address
+                    addressOnly
+                    checksummedRecipientAddress={toChecksumHexAddress(value)}
+                    recipientName={getAccountName(identities, value)}
+                  />
+                </Typography>
+              ) : (
+                `${value}`
+              )}
+            </Typography>
+          )}
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+SignatureRequestData.propTypes = {
+  data: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
+};
diff --git a/ui/components/app/signature-request/signature-request-message/index.js b/ui/components/app/signature-request/signature-request-message/index.js
index 5fe8ddb1c..569576fdd 100644
--- a/ui/components/app/signature-request/signature-request-message/index.js
+++ b/ui/components/app/signature-request/signature-request-message/index.js
@@ -1 +1 @@
-export { default } from './signature-request-message.component';
+export { default } from './signature-request-message';
diff --git a/ui/components/app/signature-request/signature-request-message/index.scss b/ui/components/app/signature-request/signature-request-message/index.scss
index b0b5c67ae..54fdb59d4 100644
--- a/ui/components/app/signature-request/signature-request-message/index.scss
+++ b/ui/components/app/signature-request/signature-request-message/index.scss
@@ -1,75 +1,24 @@
 .signature-request-message {
   flex: 1 60%;
-  display: flex;
   max-height: 231px;
-  flex-direction: column;
   position: relative;
 
-  &__title {
-    @include H6;
-
-    font-weight: 500;
-    color: var(--color-text-alternative);
-    margin-left: 12px;
-  }
-
-  h2 {
-    @include H6;
-
-    flex: 1 1 0;
-    text-align: left;
-    border-bottom: 1px solid var(--color-border-default);
-    padding: 0.5rem;
-    margin: 0;
-    color: var(--color-text-alternative);
-  }
-
-  &--root {
+  &__root {
     flex: 1 100%;
-    background-color: var(--color-background-alternative);
-    padding-bottom: 0.5rem;
     overflow: auto;
-    padding-left: 12px;
-    padding-right: 12px;
 
     @include screen-sm-min {
       width: auto;
     }
   }
 
-  &--node,
-  &--node-leaf {
-    padding-left: 0.3rem;
-
-    &-label {
-      color: var(--color-text-alternative);
-      margin-left: 0.5rem;
-    }
-
-    &-value {
-      color: var(--color-text-default);
-      margin-left: 0.5rem;
-      white-space: pre-line;
-      overflow: hidden;
-      word-wrap: break-word;
-    }
-  }
-
-  &--node-leaf {
-    display: flex;
-  }
-
   &__scroll-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid var(--color-border-default);
-    background: var(--color-background-alternative);
-    color: var(--color-icon-default);
     position: absolute;
-    right: 24px;
+    right: 28px;
     bottom: 12px;
     border-radius: 50%;
+    height: 24px;
+    width: 24px;
     cursor: pointer;
   }
 }
diff --git a/ui/components/app/signature-request/signature-request-message/signature-request-message.component.js b/ui/components/app/signature-request/signature-request-message/signature-request-message.component.js
deleted file mode 100644
index 641931919..000000000
--- a/ui/components/app/signature-request/signature-request-message/signature-request-message.component.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import { debounce } from 'lodash';
-import classnames from 'classnames';
-
-export default class SignatureRequestMessage extends PureComponent {
-  static propTypes = {
-    data: PropTypes.object.isRequired,
-    onMessageScrolled: PropTypes.func,
-    setMessageRootRef: PropTypes.func,
-    messageRootRef: PropTypes.object,
-    messageIsScrollable: PropTypes.bool,
-  };
-
-  static contextTypes = {
-    t: PropTypes.func,
-  };
-
-  state = {
-    messageIsScrolled: false,
-  };
-
-  setMessageIsScrolled = () => {
-    if (!this.props.messageRootRef || this.state.messageIsScrolled) {
-      return;
-    }
-
-    const { scrollTop, offsetHeight, scrollHeight } = this.props.messageRootRef;
-    const isAtBottom = Math.round(scrollTop) + offsetHeight >= scrollHeight;
-
-    if (isAtBottom) {
-      this.setState({ messageIsScrolled: true });
-      this.props.onMessageScrolled();
-    }
-  };
-
-  onScroll = debounce(this.setMessageIsScrolled, 25);
-
-  renderNode(data) {
-    return (
-      <div className="signature-request-message--node">
-        {Object.entries(data).map(([label, value], i) => (
-          <div
-            className={classnames('signature-request-message--node', {
-              'signature-request-message--node-leaf':
-                typeof value !== 'object' || value === null,
-            })}
-            key={i}
-          >
-            <span className="signature-request-message--node-label">
-              {label}:{' '}
-            </span>
-            {typeof value === 'object' && value !== null ? (
-              this.renderNode(value)
-            ) : (
-              <span className="signature-request-message--node-value">
-                {`${value}`}
-              </span>
-            )}
-          </div>
-        ))}
-      </div>
-    );
-  }
-
-  renderScrollButton() {
-    return (
-      <div
-        onClick={() => {
-          this.setState({ messageIsScrolled: true });
-          this.props.onMessageScrolled();
-          this.props.messageRootRef.scrollTo(
-            0,
-            this.props.messageRootRef.scrollHeight,
-          );
-        }}
-        className="signature-request-message__scroll-button"
-        data-testid="signature-request-scroll-button"
-      >
-        <i className="fa fa-arrow-down" title={this.context.t('scrollDown')} />
-      </div>
-    );
-  }
-
-  render() {
-    const { data, messageIsScrollable } = this.props;
-
-    return (
-      <div onScroll={this.onScroll} className="signature-request-message">
-        {messageIsScrollable ? this.renderScrollButton() : null}
-        <div className="signature-request-message__title">
-          {this.context.t('signatureRequest1')}
-        </div>
-        <div
-          className="signature-request-message--root"
-          ref={this.props.setMessageRootRef}
-        >
-          {this.renderNode(data)}
-        </div>
-      </div>
-    );
-  }
-}
diff --git a/ui/components/app/signature-request/signature-request-message/signature-request-message.js b/ui/components/app/signature-request/signature-request-message/signature-request-message.js
new file mode 100644
index 000000000..e86dfba3d
--- /dev/null
+++ b/ui/components/app/signature-request/signature-request-message/signature-request-message.js
@@ -0,0 +1,98 @@
+import React, { useContext, useState } from 'react';
+import PropTypes from 'prop-types';
+import { debounce } from 'lodash';
+import { I18nContext } from '../../../../contexts/i18n';
+import Box from '../../../ui/box';
+import Typography from '../../../ui/typography';
+import {
+  DISPLAY,
+  ALIGN_ITEMS,
+  JUSTIFY_CONTENT,
+  COLORS,
+  FONT_WEIGHT,
+  FLEX_DIRECTION,
+  SIZES,
+} from '../../../../helpers/constants/design-system';
+import SignatureRequestData from '../signature-request-data';
+
+export default function SignatureRequestMessage({
+  data,
+  onMessageScrolled,
+  setMessageRootRef,
+  messageRootRef,
+  messageIsScrollable,
+}) {
+  const t = useContext(I18nContext);
+  const [messageIsScrolled, setMessageIsScrolled] = useState(false);
+  const setMessageIsScrolledAtBottom = () => {
+    if (!messageRootRef || messageIsScrolled) {
+      return;
+    }
+
+    const { scrollTop, offsetHeight, scrollHeight } = messageRootRef;
+    const isAtBottom = Math.round(scrollTop) + offsetHeight >= scrollHeight;
+
+    if (isAtBottom) {
+      setMessageIsScrolled(true);
+      onMessageScrolled();
+    }
+  };
+
+  return (
+    <Box
+      display={DISPLAY.FLEX}
+      flexDirection={FLEX_DIRECTION.COLUMN}
+      onScroll={debounce(setMessageIsScrolledAtBottom, 25)}
+      className="signature-request-message"
+    >
+      {messageIsScrollable ? (
+        <Box
+          display={DISPLAY.FLEX}
+          alignItems={ALIGN_ITEMS.CENTER}
+          justifyContent={JUSTIFY_CONTENT.CENTER}
+          borderColor={COLORS.BORDER_DEFAULT}
+          backgroundColor={COLORS.BACKGROUND_DEFAULT}
+          color={COLORS.ICON_DEFAULT}
+          onClick={() => {
+            setMessageIsScrolled(true);
+            onMessageScrolled();
+            messageRootRef?.scrollTo(0, messageRootRef?.scrollHeight);
+          }}
+          className="signature-request-message__scroll-button"
+          data-testid="signature-request-scroll-button"
+        >
+          <i className="fa fa-arrow-down" aria-label={t('scrollDown')} />
+        </Box>
+      ) : null}
+      <Box
+        backgroundColor={COLORS.BACKGROUND_DEFAULT}
+        paddingBottom={3}
+        paddingTop={3}
+        paddingRight={3}
+        margin={2}
+        borderRadius={SIZES.XL}
+        borderColor={COLORS.BORDER_MUTED}
+        className="signature-request-message__root"
+        ref={setMessageRootRef}
+      >
+        <Typography
+          fontWeight={FONT_WEIGHT.BOLD}
+          color={COLORS.TEXT_DEFAULT}
+          marginLeft={4}
+          className="signature-request-message__title"
+        >
+          {t('signatureRequest1')}
+        </Typography>
+        <SignatureRequestData data={data} />
+      </Box>
+    </Box>
+  );
+}
+
+SignatureRequestMessage.propTypes = {
+  data: PropTypes.object.isRequired,
+  onMessageScrolled: PropTypes.func,
+  setMessageRootRef: PropTypes.func,
+  messageRootRef: PropTypes.object,
+  messageIsScrollable: PropTypes.bool,
+};
diff --git a/ui/components/app/signature-request/signature-request-message/signature-request-message.stories.js b/ui/components/app/signature-request/signature-request-message/signature-request-message.stories.js
new file mode 100644
index 000000000..9d3743af0
--- /dev/null
+++ b/ui/components/app/signature-request/signature-request-message/signature-request-message.stories.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import SignatureRequestMessage from './signature-request-message';
+
+export default {
+  title: 'Components/App/SignatureRequestMessage',
+  id: __filename,
+  component: SignatureRequestMessage,
+  argTypes: {
+    data: { control: 'object' },
+    onMessageScrolled: { action: 'onMessageScrolled' },
+    setMessageRootRef: { action: 'setMessageRootRef' },
+    messageRootRef: { control: 'object' },
+    messageIsScrollable: { control: 'boolean' },
+  },
+};
+
+export const DefaultStory = (args) => {
+  return <SignatureRequestMessage {...args} />;
+};
+
+DefaultStory.storyName = 'Default';
+
+DefaultStory.args = {
+  data: JSON.parse(
+    JSON.stringify({
+      domain: {
+        name: 'happydapp.website',
+      },
+      message: {
+        string: 'haay wuurl',
+        number: 42,
+      },
+      primaryType: 'Mail',
+      types: {
+        EIP712Domain: [
+          { name: 'name', type: 'string' },
+          { name: 'version', type: 'string' },
+          { name: 'chainId', type: 'uint256' },
+          { name: 'verifyingContract', type: 'address' },
+        ],
+        Group: [
+          { name: 'name', type: 'string' },
+          { name: 'members', type: 'Person[]' },
+        ],
+        Mail: [
+          { name: 'from', type: 'Person' },
+          { name: 'to', type: 'Person[]' },
+          { name: 'contents', type: 'string' },
+        ],
+        Person: [
+          { name: 'name', type: 'string' },
+          { name: 'wallets', type: 'address[]' },
+        ],
+      },
+    }),
+  ),
+  messageIsScrollable: true,
+};
diff --git a/ui/components/app/signature-request/signature-request.container.test.js b/ui/components/app/signature-request/signature-request.container.test.js
index 551e9645e..085b117d4 100644
--- a/ui/components/app/signature-request/signature-request.container.test.js
+++ b/ui/components/app/signature-request/signature-request.container.test.js
@@ -8,6 +8,46 @@ import SignatureRequest from './signature-request.container';
 describe('Signature Request', () => {
   const mockStore = {
     metamask: {
+      tokenList: {
+        '0x514910771af9ca656af840dff83e8264ecf986ca': {
+          address: '0x514910771af9ca656af840dff83e8264ecf986ca',
+          symbol: 'LINK',
+          decimals: 18,
+          name: 'ChainLink Token',
+          iconUrl:
+            'https://crypto.com/price/coin-data/icon/LINK/color_icon.png',
+          aggregators: [
+            'Aave',
+            'Bancor',
+            'CMC',
+            'Crypto.com',
+            'CoinGecko',
+            '1inch',
+            'Paraswap',
+            'PMM',
+            'Zapper',
+            'Zerion',
+            '0x',
+          ],
+          occurrences: 12,
+          unlisted: false,
+        },
+      },
+      identities: {
+        '0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e': {
+          name: 'Account 2',
+          address: '0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e',
+        },
+      },
+      addressBook: {
+        undefined: {
+          0: {
+            address: '0x39a4e4Af7cCB654dB9500F258c64781c8FbD39F0',
+            name: '',
+            isEns: false,
+          },
+        },
+      },
       provider: {
         type: 'rpc',
       },
diff --git a/ui/components/app/transaction-decoding/components/decoding/address/address.component.js b/ui/components/app/transaction-decoding/components/decoding/address/address.component.js
index 7e6358634..ddb4d5cd7 100644
--- a/ui/components/app/transaction-decoding/components/decoding/address/address.component.js
+++ b/ui/components/app/transaction-decoding/components/decoding/address/address.component.js
@@ -5,7 +5,10 @@ import copyToClipboard from 'copy-to-clipboard';
 import { shortenAddress } from '../../../../../../helpers/utils/util';
 import Identicon from '../../../../../ui/identicon';
 import { useI18nContext } from '../../../../../../hooks/useI18nContext';
-import { getAddressBook } from '../../../../../../selectors';
+import {
+  getMetadataContractName,
+  getAddressBook,
+} from '../../../../../../selectors';
 import NicknamePopovers from '../../../../modals/nickname-popovers';
 
 const Address = ({
@@ -20,15 +23,25 @@ const Address = ({
 
   const addressBook = useSelector(getAddressBook);
   const addressBookEntryObject = addressBook.find(
-    (entry) => entry.address === checksummedRecipientAddress,
+    (entry) =>
+      entry.address.toLowerCase() === checksummedRecipientAddress.toLowerCase(),
   );
   const recipientNickname = addressBookEntryObject?.name;
+  const recipientMetadataName = useSelector((state) =>
+    getMetadataContractName(state, checksummedRecipientAddress),
+  );
 
   const recipientToRender = addressOnly
-    ? recipientNickname ||
+    ? recipientName ||
+      recipientNickname ||
+      recipientMetadataName ||
       recipientEns ||
       shortenAddress(checksummedRecipientAddress)
-    : recipientNickname || recipientEns || recipientName || t('newContract');
+    : recipientName ||
+      recipientNickname ||
+      recipientMetadataName ||
+      recipientEns ||
+      t('newContract');
 
   return (
     <div
diff --git a/ui/components/app/transaction-decoding/index.scss b/ui/components/app/transaction-decoding/index.scss
index 71cf1d75e..474ca5efe 100644
--- a/ui/components/app/transaction-decoding/index.scss
+++ b/ui/components/app/transaction-decoding/index.scss
@@ -7,6 +7,9 @@
 
 .tx-insight {
   overflow-x: hidden;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
 
   &-loading {
     display: flex;
@@ -167,6 +170,12 @@
       }
     }
   }
+
+  .tx-insight-component-address {
+    &__sender-icon {
+      padding-right: 8px;
+    }
+  }
 }
 
 
diff --git a/ui/components/app/transaction-detail-item/index.scss b/ui/components/app/transaction-detail-item/index.scss
index a51cae46d..9de0c2d04 100644
--- a/ui/components/app/transaction-detail-item/index.scss
+++ b/ui/components/app/transaction-detail-item/index.scss
@@ -21,7 +21,7 @@
   &__detail-values {
     display: flex;
     flex-wrap: wrap;
-    justify-content: end;
+    justify-content: flex-end;
     width: 52%;
 
     &--flex-width {
diff --git a/ui/components/app/transaction-list-item-details/index.scss b/ui/components/app/transaction-list-item-details/index.scss
index 8501192e8..d54162aa6 100644
--- a/ui/components/app/transaction-list-item-details/index.scss
+++ b/ui/components/app/transaction-list-item-details/index.scss
@@ -62,7 +62,7 @@
   &__operations {
     margin: 0 0 16px 16px;
     display: flex;
-    justify-content: end;
+    justify-content: flex-end;
   }
 
   &__header {
diff --git a/ui/components/app/transaction-list-item-details/transaction-list-item-details.component.js b/ui/components/app/transaction-list-item-details/transaction-list-item-details.component.js
index 92592a5b0..7f80e2db7 100644
--- a/ui/components/app/transaction-list-item-details/transaction-list-item-details.component.js
+++ b/ui/components/app/transaction-list-item-details/transaction-list-item-details.component.js
@@ -41,6 +41,8 @@ export default class TransactionListItemDetails extends PureComponent {
     onClose: PropTypes.func.isRequired,
     recipientEns: PropTypes.string,
     recipientAddress: PropTypes.string,
+    recipientName: PropTypes.string,
+    recipientMetadataName: PropTypes.string,
     rpcPrefs: PropTypes.object,
     senderAddress: PropTypes.string.isRequired,
     tryReverseResolveAddress: PropTypes.func.isRequired,
@@ -139,6 +141,8 @@ export default class TransactionListItemDetails extends PureComponent {
       showRetry,
       recipientEns,
       recipientAddress,
+      recipientName,
+      recipientMetadataName,
       senderAddress,
       isEarliestNonce,
       senderNickname,
@@ -238,6 +242,8 @@ export default class TransactionListItemDetails extends PureComponent {
                 recipientEns={recipientEns}
                 recipientAddress={recipientAddress}
                 recipientNickname={recipientNickname}
+                recipientName={recipientName}
+                recipientMetadataName={recipientMetadataName}
                 senderName={senderNickname}
                 senderAddress={senderAddress}
                 onRecipientClick={() => {
diff --git a/ui/components/app/transaction-list-item-details/transaction-list-item-details.container.js b/ui/components/app/transaction-list-item-details/transaction-list-item-details.container.js
index 61731c092..86b341533 100644
--- a/ui/components/app/transaction-list-item-details/transaction-list-item-details.container.js
+++ b/ui/components/app/transaction-list-item-details/transaction-list-item-details.container.js
@@ -8,6 +8,9 @@ import {
   getIsCustomNetwork,
   getRpcPrefsForCurrentProvider,
   getEnsResolutionByAddress,
+  getAccountName,
+  getMetadataContractName,
+  getMetaMaskIdentities,
 } from '../../../selectors';
 import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
 import TransactionListItemDetails from './transaction-list-item-details.component';
@@ -20,6 +23,12 @@ const mapStateToProps = (state, ownProps) => {
     recipientEns = getEnsResolutionByAddress(state, address);
   }
   const addressBook = getAddressBook(state);
+  const identities = getMetaMaskIdentities(state);
+  const recipientName = getAccountName(identities, recipientAddress);
+  const recipientMetadataName = getMetadataContractName(
+    state,
+    recipientAddress,
+  );
 
   const getNickName = (address) => {
     const entry = addressBook.find((contact) => {
@@ -38,6 +47,8 @@ const mapStateToProps = (state, ownProps) => {
     recipientNickname: recipientAddress ? getNickName(recipientAddress) : null,
     isCustomNetwork,
     blockExplorerLinkText: getBlockExplorerLinkText(state),
+    recipientName,
+    recipientMetadataName,
   };
 };
 
diff --git a/ui/components/app/whats-new-popup/whats-new-popup.js b/ui/components/app/whats-new-popup/whats-new-popup.js
index 858805978..e11405a56 100644
--- a/ui/components/app/whats-new-popup/whats-new-popup.js
+++ b/ui/components/app/whats-new-popup/whats-new-popup.js
@@ -58,6 +58,10 @@ function getActionFunctionById(id, history) {
       updateViewedNotifications({ 14: true });
       history.push(`${ADVANCED_ROUTE}#backup-userdata`);
     },
+    16: () => {
+      updateViewedNotifications({ 16: true });
+      history.push(EXPERIMENTAL_ROUTE);
+    },
   };
 
   return actionFunctions[id];
diff --git a/ui/components/component-library/button-base/README.mdx b/ui/components/component-library/button-base/README.mdx
index ad79e0747..76d630f88 100644
--- a/ui/components/component-library/button-base/README.mdx
+++ b/ui/components/component-library/button-base/README.mdx
@@ -22,7 +22,7 @@ The `ButtonBase` accepts all props below as well as all [Box](/docs/ui-component
 Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js`
 to change the size of `ButtonBase`. Defaults to `SIZES.MD`
 
-Optional: `BUTTON_SIZES` from `./button-base` object can be used instead of `SIZES`.
+Optional: `BUTTON_BASE_SIZES` from `./button-base` object can be used instead of `SIZES`.
 
 Possible sizes include:
 
@@ -37,7 +37,7 @@ Possible sizes include:
 
 ```jsx
 import { SIZES } from '../../../helpers/constants/design-system';
-import { ButtonBase } from '../ui/component-library';
+import { ButtonBase } from '../../ui/components/component-library';
 
 <ButtonBase size={SIZES.AUTO} />
 <ButtonBase size={SIZES.SM} />
@@ -55,7 +55,7 @@ Use boolean `block` prop to quickly enable a full width block button
 
 ```jsx
 import { DISPLAY } from '../../../helpers/constants/design-system';
-import { ButtonBase } from '../ui/component-library';
+import { ButtonBase } from '../../ui/components/component-library';
 
 <ButtonBase>Default Button</ButtonBase>
 <ButtonBase block>Block Button</ButtonBase>
@@ -77,7 +77,7 @@ Button `as` options:
 </Canvas>
 
 ```jsx
-import { ButtonBase } from '../ui/component-library';
+import { ButtonBase } from '../../ui/components/component-library';
 
 
 <ButtonBase as="button">Button Element</ButtonBase>
@@ -86,6 +86,20 @@ import { ButtonBase } from '../ui/component-library';
 </ButtonBase>
 ```
 
+### Href
+
+When an `href` prop is passed it will change the element to an anchor(`a`) tag.
+
+<Canvas>
+  <Story id="ui-components-component-library-button-base-button-base-stories-js--href" />
+</Canvas>
+
+```jsx
+import { ButtonBase } from '../../ui/components/component-library';
+
+<ButtonBase href="/metamask">Anchor Element</ButtonBase>;
+```
+
 ### Disabled
 
 Use the boolean `disabled` prop to disable button
@@ -95,7 +109,7 @@ Use the boolean `disabled` prop to disable button
 </Canvas>
 
 ```jsx
-import { ButtonBase } from '../ui/component-library';
+import { ButtonBase } from '../../ui/components/component-library';
 
 <ButtonBase disabled>Disabled Button</ButtonBase>;
 ```
@@ -109,21 +123,21 @@ Use the boolean `loading` prop to set loading spinner
 </Canvas>
 
 ```jsx
-import { ButtonBase } from '../ui/component-library';
+import { ButtonBase } from '../../ui/components/component-library';
 
 <ButtonBase loading>Loading Button</ButtonBase>;
 ```
 
 ### Icon
 
-Use the `icon` prop and the `ICON_NAMES` object from `./ui/components/component-library/icon` to select icon.
+Use the `icon` prop and the `ICON_NAMES` object from `./ui/components/component-library` to select icon.
 
 <Canvas>
   <Story id="ui-components-component-library-button-base-button-base-stories-js--icon" />
 </Canvas>
 
 ```jsx
-import { ButtonBase } from '../ui/component-library';
+import { ButtonBase } from '../../ui/components/component-library';
 import { ICON_NAMES } from '../icon';
 
 <ButtonBase icon={ICON_NAMES.ADD_SQUARE_FILLED}>Button</ButtonBase>;
diff --git a/ui/components/component-library/button-base/__snapshots__/button-base.test.js.snap b/ui/components/component-library/button-base/__snapshots__/button-base.test.js.snap
new file mode 100644
index 000000000..a1bcad5e5
--- /dev/null
+++ b/ui/components/component-library/button-base/__snapshots__/button-base.test.js.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ButtonBase should render button element correctly and match snapshot 1`] = `
+<div>
+  <button
+    class="box mm-button mm-button--size-md box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center"
+    data-testid="button-base"
+  >
+    <span
+      class="box text mm-button__content text--body-md text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
+    >
+      Button base
+    </span>
+  </button>
+</div>
+`;
diff --git a/ui/components/component-library/button-base/button.constants.js b/ui/components/component-library/button-base/button-base.constants.js
similarity index 79%
rename from ui/components/component-library/button-base/button.constants.js
rename to ui/components/component-library/button-base/button-base.constants.js
index bcf67e6f1..a5c102366 100644
--- a/ui/components/component-library/button-base/button.constants.js
+++ b/ui/components/component-library/button-base/button-base.constants.js
@@ -1,6 +1,6 @@
 import { SIZES } from '../../../helpers/constants/design-system';
 
-export const BUTTON_SIZES = {
+export const BUTTON_BASE_SIZES = {
   SM: SIZES.SM,
   MD: SIZES.MD,
   LG: SIZES.LG,
diff --git a/ui/components/component-library/button-base/button-base.js b/ui/components/component-library/button-base/button-base.js
index 9f3a3dffe..426b65a31 100644
--- a/ui/components/component-library/button-base/button-base.js
+++ b/ui/components/component-library/button-base/button-base.js
@@ -15,14 +15,15 @@ import {
   SIZES,
   FLEX_DIRECTION,
 } from '../../../helpers/constants/design-system';
-import { BUTTON_SIZES } from './button.constants';
+import { BUTTON_BASE_SIZES } from './button-base.constants';
 
 export const ButtonBase = ({
   as = 'button',
   block,
   children,
   className,
-  size = BUTTON_SIZES.MD,
+  href,
+  size = BUTTON_BASE_SIZES.MD,
   icon,
   iconPositionRight,
   loading,
@@ -30,12 +31,12 @@ export const ButtonBase = ({
   iconProps,
   ...props
 }) => {
-  const Tag = props?.href ? 'a' : as;
+  const Tag = href ? 'a' : as;
   return (
     <Box
       as={Tag}
-      paddingLeft={size === BUTTON_SIZES.AUTO ? 0 : 4}
-      paddingRight={size === BUTTON_SIZES.AUTO ? 0 : 4}
+      paddingLeft={size === BUTTON_BASE_SIZES.AUTO ? 0 : 4}
+      paddingRight={size === BUTTON_BASE_SIZES.AUTO ? 0 : 4}
       className={classnames(
         'mm-button',
         `mm-button--size-${size}`,
@@ -61,13 +62,13 @@ export const ButtonBase = ({
           iconPositionRight ? FLEX_DIRECTION.ROW_REVERSE : FLEX_DIRECTION.ROW
         }
         gap={2}
-        variant={size === BUTTON_SIZES.AUTO ? TEXT.INHERIT : TEXT.BODY_MD}
+        variant={size === BUTTON_BASE_SIZES.AUTO ? TEXT.INHERIT : TEXT.BODY_MD}
         color={TEXT_COLORS.INHERIT}
       >
         {icon && (
           <Icon
             name={icon}
-            size={size === BUTTON_SIZES.AUTO ? SIZES.AUTO : SIZES.SM}
+            size={size === BUTTON_BASE_SIZES.AUTO ? SIZES.AUTO : SIZES.SM}
             {...iconProps}
           />
         )}
@@ -77,7 +78,7 @@ export const ButtonBase = ({
         <Icon
           className="mm-button__icon-loading"
           name={ICON_NAMES.LOADING_FILLED}
-          size={size === BUTTON_SIZES.AUTO ? SIZES.AUTO : SIZES.MD}
+          size={size === BUTTON_BASE_SIZES.AUTO ? SIZES.AUTO : SIZES.MD}
         />
       )}
     </Box>
@@ -105,6 +106,10 @@ ButtonBase.propTypes = {
    * Boolean to disable button
    */
   disabled: PropTypes.bool,
+  /**
+   * When an `href` prop is passed, ButtonBase will automatically change the root element to be an `a` (anchor) tag
+   */
+  href: PropTypes.string,
   /**
    * Add icon to left side of button text passing icon name
    * The name of the icon to display. Should be one of ICON_NAMES
@@ -125,13 +130,9 @@ ButtonBase.propTypes = {
   loading: PropTypes.bool,
   /**
    * The size of the ButtonBase.
-   * Possible values could be 'SIZES.AUTO', 'SIZES.SM', 'SIZES.MD', 'SIZES.LG',
+   * Possible values could be 'SIZES.AUTO', 'SIZES.SM'(32px), 'SIZES.MD'(40px), 'SIZES.LG'(48px),
    */
-  size: PropTypes.oneOf(Object.values(BUTTON_SIZES)),
-  /**
-   * Addition style properties to apply to the button.
-   */
-  style: PropTypes.object,
+  size: PropTypes.oneOf(Object.values(BUTTON_BASE_SIZES)),
   /**
    * ButtonBase accepts all the props from Box
    */
diff --git a/ui/components/component-library/button-base/button-base.stories.js b/ui/components/component-library/button-base/button-base.stories.js
index 320223fa8..620e4d124 100644
--- a/ui/components/component-library/button-base/button-base.stories.js
+++ b/ui/components/component-library/button-base/button-base.stories.js
@@ -9,7 +9,7 @@ import {
 import Box from '../../ui/box/box';
 import { ICON_NAMES } from '../icon';
 import { Text } from '../text';
-import { BUTTON_SIZES } from './button.constants';
+import { BUTTON_BASE_SIZES } from './button-base.constants';
 import { ButtonBase } from './button-base';
 import README from './README.mdx';
 
@@ -66,7 +66,7 @@ export default {
     },
     size: {
       control: 'select',
-      options: Object.values(BUTTON_SIZES),
+      options: Object.values(BUTTON_BASE_SIZES),
     },
     marginTop: {
       options: marginSizeControlOptions,
@@ -145,6 +145,12 @@ export const As = (args) => (
   </Box>
 );
 
+export const Href = (args) => <ButtonBase {...args}>Anchor Element</ButtonBase>;
+
+Href.args = {
+  href: '/metamask',
+};
+
 export const Disabled = (args) => (
   <ButtonBase {...args}>Disabled Button</ButtonBase>
 );
diff --git a/ui/components/component-library/button-base/button-base.test.js b/ui/components/component-library/button-base/button-base.test.js
index a62bec7aa..5cd14b841 100644
--- a/ui/components/component-library/button-base/button-base.test.js
+++ b/ui/components/component-library/button-base/button-base.test.js
@@ -1,17 +1,18 @@
 /* eslint-disable jest/require-top-level-describe */
 import { render } from '@testing-library/react';
 import React from 'react';
-import { BUTTON_SIZES } from './button.constants';
+import { BUTTON_BASE_SIZES } from './button-base.constants';
 import { ButtonBase } from './button-base';
 
 describe('ButtonBase', () => {
-  it('should render button element correctly', () => {
+  it('should render button element correctly and match snapshot', () => {
     const { getByTestId, getByText, container } = render(
       <ButtonBase data-testid="button-base">Button base</ButtonBase>,
     );
     expect(getByText('Button base')).toBeDefined();
     expect(container.querySelector('button')).toBeDefined();
     expect(getByTestId('button-base')).toHaveClass('mm-button');
+    expect(container).toMatchSnapshot();
   });
 
   it('should render anchor element correctly', () => {
@@ -40,23 +41,35 @@ describe('ButtonBase', () => {
   it('should render with different size classes', () => {
     const { getByTestId } = render(
       <>
-        <ButtonBase size={BUTTON_SIZES.AUTO} data-testid={BUTTON_SIZES.AUTO} />
-        <ButtonBase size={BUTTON_SIZES.SM} data-testid={BUTTON_SIZES.SM} />
-        <ButtonBase size={BUTTON_SIZES.MD} data-testid={BUTTON_SIZES.MD} />
-        <ButtonBase size={BUTTON_SIZES.LG} data-testid={BUTTON_SIZES.LG} />
+        <ButtonBase
+          size={BUTTON_BASE_SIZES.AUTO}
+          data-testid={BUTTON_BASE_SIZES.AUTO}
+        />
+        <ButtonBase
+          size={BUTTON_BASE_SIZES.SM}
+          data-testid={BUTTON_BASE_SIZES.SM}
+        />
+        <ButtonBase
+          size={BUTTON_BASE_SIZES.MD}
+          data-testid={BUTTON_BASE_SIZES.MD}
+        />
+        <ButtonBase
+          size={BUTTON_BASE_SIZES.LG}
+          data-testid={BUTTON_BASE_SIZES.LG}
+        />
       </>,
     );
-    expect(getByTestId(BUTTON_SIZES.AUTO)).toHaveClass(
-      `mm-button--size-${BUTTON_SIZES.AUTO}`,
+    expect(getByTestId(BUTTON_BASE_SIZES.AUTO)).toHaveClass(
+      `mm-button--size-${BUTTON_BASE_SIZES.AUTO}`,
     );
-    expect(getByTestId(BUTTON_SIZES.SM)).toHaveClass(
-      `mm-button--size-${BUTTON_SIZES.SM}`,
+    expect(getByTestId(BUTTON_BASE_SIZES.SM)).toHaveClass(
+      `mm-button--size-${BUTTON_BASE_SIZES.SM}`,
     );
-    expect(getByTestId(BUTTON_SIZES.MD)).toHaveClass(
-      `mm-button--size-${BUTTON_SIZES.MD}`,
+    expect(getByTestId(BUTTON_BASE_SIZES.MD)).toHaveClass(
+      `mm-button--size-${BUTTON_BASE_SIZES.MD}`,
     );
-    expect(getByTestId(BUTTON_SIZES.LG)).toHaveClass(
-      `mm-button--size-${BUTTON_SIZES.LG}`,
+    expect(getByTestId(BUTTON_BASE_SIZES.LG)).toHaveClass(
+      `mm-button--size-${BUTTON_BASE_SIZES.LG}`,
     );
   });
 
diff --git a/ui/components/component-library/button-base/index.js b/ui/components/component-library/button-base/index.js
index 789a9db9d..3d030b89b 100644
--- a/ui/components/component-library/button-base/index.js
+++ b/ui/components/component-library/button-base/index.js
@@ -1,2 +1,2 @@
 export { ButtonBase } from './button-base';
-export { BUTTON_SIZES } from './button.constants';
+export { BUTTON_BASE_SIZES } from './button-base.constants';
diff --git a/ui/components/component-library/button-icon/README.mdx b/ui/components/component-library/button-icon/README.mdx
new file mode 100644
index 000000000..a2f89fa09
--- /dev/null
+++ b/ui/components/component-library/button-icon/README.mdx
@@ -0,0 +1,144 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import { ButtonIcon } from './button-icon';
+
+# ButtonIcon
+
+The `ButtonIcon` is used for icons associated with a user action.
+
+<Canvas>
+  <Story id="ui-components-component-library-button-icon-button-icon-stories-js--default-story" />
+</Canvas>
+
+## Props
+
+The `ButtonIcon` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props
+
+<ArgsTable of={ButtonIcon} />
+
+### Icon<span style={{ color: 'red' }}>\*</span>
+
+Use the required `icon` prop with `ICON_NAMES` object from `./ui/components/component-library/icon` to select icon.
+
+<Canvas>
+  <Story id="ui-components-component-library-button-icon-button-icon-stories-js--icon" />
+</Canvas>
+
+```jsx
+import { ButtonIcon } from '../ui/component-library';
+import { ICON_NAMES } from '../icon';
+
+<ButtonIcon icon={ICON_NAMES.CLOSE_OUTLINE} ariaLabel="Close" />;
+```
+
+### Size
+
+Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js`
+to change the size of `ButtonIcon`. Defaults to `SIZES.SM`
+
+Optional: `BUTTON_ICON_SIZES` from `./button-icon` object can be used instead of `SIZES`.
+
+Possible sizes include:
+
+- `SIZES.SM` 24px
+- `SIZES.LG` 32px
+
+<Canvas>
+  <Story id="ui-components-component-library-button-icon-button-icon-stories-js--size" />
+</Canvas>
+
+```jsx
+import { SIZES } from '../../../helpers/constants/design-system';
+import { ButtonIcon } from '../ui/component-library';
+
+<ButtonIcon size={SIZES.SM} icon={ICON_NAMES.CLOSE_OUTLINE} ariaLabel="Close"/>
+<ButtonIcon size={SIZES.LG} icon={ICON_NAMES.CLOSE_OUTLINE} ariaLabel="Close"/>
+```
+
+### Aria Label
+
+Use the `ariaLabel` prop to set the name of the ButtonIcon for proper accessibility
+
+<Canvas>
+  <Story id="ui-components-component-library-button-icon-button-icon-stories-js--aria-label" />
+</Canvas>
+
+```jsx
+import { ButtonIcon } from '../ui/component-library';
+
+
+<ButtonIcon as="button" icon={ICON_NAMES.CLOSE_OUTLINE} ariaLabel="Close"/>
+<ButtonIcon as="a" href="https://metamask.io/" target="_blank" icon={ICON_NAMES.EXPORT} color={COLORS.PRIMARY_DEFAULT} ariaLabel="Visit MetaMask.io"/>
+```
+
+### As
+
+Use the `as` box prop to change the element of `ButtonIcon`. Defaults to `button`.
+
+Button `as` options:
+
+- `button`
+- `a`
+
+<Canvas>
+  <Story id="ui-components-component-library-button-icon-button-icon-stories-js--as" />
+</Canvas>
+
+```jsx
+import { ButtonIcon } from '../ui/component-library';
+
+
+<ButtonIcon as="button" icon={ICON_NAMES.CLOSE_OUTLINE} ariaLabel="Close"/>
+<ButtonIcon as="a" href="https://metamask.io/" target="_blank" icon={ICON_NAMES.EXPORT} color={COLORS.PRIMARY_DEFAULT} ariaLabel="Visit MetaMask.io"/>
+```
+
+### Href
+
+When an `href` prop is passed it will change the element to an anchor(`a`) tag.
+
+<Canvas>
+  <Story id="ui-components-component-library-button-icon-button-icon-stories-js--href" />
+</Canvas>
+
+```jsx
+import { ButtonIcon } from '../ui/component-library';
+
+<ButtonIcon
+  href="https://metamask.io/"
+  target="_blank"
+  icon={ICON_NAMES.EXPORT}
+  color={COLORS.PRIMARY_DEFAULT}
+  ariaLabel="Visit MetaMask.io"
+/>;
+```
+
+### Color
+
+Use the `color` prop and the `COLORS` object to change the color of the `ButtonIcon`. Defaults to `COLORS.ICON_DEFAULT`.
+
+<Canvas>
+  <Story id="ui-components-component-library-button-icon-button-icon-stories-js--color" />
+</Canvas>
+
+```jsx
+import { ButtonIcon } from '../ui/component-library';
+
+<ButtonIcon
+  icon={ICON_NAMES.EXPORT}
+  color={COLORS.PRIMARY_DEFAULT}
+  ariaLabel="Visit MetaMask.io"
+/>;
+```
+
+### Disabled
+
+Use the boolean `disabled` prop to disable button
+
+<Canvas>
+  <Story id="ui-components-component-library-button-icon-button-icon-stories-js--disabled" />
+</Canvas>
+
+```jsx
+import { ButtonIcon } from '../ui/component-library';
+
+<ButtonIcon icon={ICON_NAMES.CLOSE_OUTLINE} disabled ariaLabel="Close" />;
+```
diff --git a/ui/components/component-library/button-icon/__snapshots__/button-icon.test.js.snap b/ui/components/component-library/button-icon/__snapshots__/button-icon.test.js.snap
new file mode 100644
index 000000000..ce55c094a
--- /dev/null
+++ b/ui/components/component-library/button-icon/__snapshots__/button-icon.test.js.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ButtonIcon should render button element correctly 1`] = `
+<div>
+  <button
+    aria-label="add"
+    class="box mm-button-icon mm-button-icon--size-lg box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg"
+    data-testid="button-icon"
+  >
+    <div
+      class="box icon icon--size-lg box--flex-direction-row box--color-inherit"
+      style="mask-image: url('./images/icons/icon-add-square-filled.svg;"
+    />
+  </button>
+</div>
+`;
diff --git a/ui/components/component-library/button-icon/button-icon.constants.js b/ui/components/component-library/button-icon/button-icon.constants.js
new file mode 100644
index 000000000..2fd26011e
--- /dev/null
+++ b/ui/components/component-library/button-icon/button-icon.constants.js
@@ -0,0 +1,6 @@
+import { SIZES } from '../../../helpers/constants/design-system';
+
+export const BUTTON_ICON_SIZES = {
+  SM: SIZES.SM,
+  LG: SIZES.LG,
+};
diff --git a/ui/components/component-library/button-icon/button-icon.js b/ui/components/component-library/button-icon/button-icon.js
new file mode 100644
index 000000000..8d8ad11ca
--- /dev/null
+++ b/ui/components/component-library/button-icon/button-icon.js
@@ -0,0 +1,101 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import {
+  ALIGN_ITEMS,
+  BORDER_RADIUS,
+  COLORS,
+  DISPLAY,
+  JUSTIFY_CONTENT,
+} from '../../../helpers/constants/design-system';
+
+import Box from '../../ui/box';
+import { Icon } from '../icon';
+
+import { BUTTON_ICON_SIZES } from './button-icon.constants';
+
+export const ButtonIcon = ({
+  ariaLabel,
+  as = 'button',
+  className,
+  color = COLORS.ICON_DEFAULT,
+  href,
+  size = BUTTON_ICON_SIZES.LG,
+  icon,
+  disabled,
+  iconProps,
+  ...props
+}) => {
+  const Tag = href ? 'a' : as;
+  return (
+    <Box
+      aria-label={ariaLabel}
+      as={Tag}
+      className={classnames(
+        'mm-button-icon',
+        `mm-button-icon--size-${size}`,
+        {
+          'mm-button-icon--disabled': disabled,
+        },
+        className,
+      )}
+      color={color}
+      disabled={disabled}
+      display={DISPLAY.INLINE_FLEX}
+      justifyContent={JUSTIFY_CONTENT.CENTER}
+      alignItems={ALIGN_ITEMS.CENTER}
+      borderRadius={BORDER_RADIUS.LG}
+      backgroundColor={COLORS.TRANSPARENT}
+      href={href}
+      {...props}
+    >
+      <Icon name={icon} size={size} {...iconProps} />
+    </Box>
+  );
+};
+
+ButtonIcon.propTypes = {
+  /**
+   *  String that adds an accessible name for ButtonIcon
+   */
+  ariaLabel: PropTypes.string.isRequired,
+  /**
+   * The polymorphic `as` prop allows you to change the root HTML element of the Button component between `button` and `a` tag
+   */
+  as: PropTypes.string,
+  /**
+   * An additional className to apply to the ButtonIcon.
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the ButtonIcon component should use the COLOR object from
+   * ./ui/helpers/constants/design-system.js
+   */
+  color: PropTypes.oneOf(Object.values(COLORS)),
+  /**
+   * Boolean to disable button
+   */
+  disabled: PropTypes.bool,
+  /**
+   * When an `href` prop is passed, ButtonIcon will automatically change the root element to be an `a` (anchor) tag
+   */
+  href: PropTypes.string,
+  /**
+   * The name of the icon to display. Should be one of ICON_NAMES
+   */
+  icon: PropTypes.string.isRequired, // Can't set PropTypes.oneOf(ICON_NAMES) because ICON_NAMES is an environment variable
+  /**
+   * iconProps accepts all the props from Icon
+   */
+  iconProps: PropTypes.object,
+  /**
+   * The size of the ButtonIcon.
+   * Possible values could be 'SIZES.SM', 'SIZES.LG',
+   */
+  size: PropTypes.oneOf(Object.values(BUTTON_ICON_SIZES)),
+  /**
+   * ButtonIcon accepts all the props from Box
+   */
+  ...Box.propTypes,
+};
diff --git a/ui/components/component-library/button-icon/button-icon.scss b/ui/components/component-library/button-icon/button-icon.scss
new file mode 100644
index 000000000..3658d6590
--- /dev/null
+++ b/ui/components/component-library/button-icon/button-icon.scss
@@ -0,0 +1,32 @@
+.mm-button-icon {
+  --button-icon-size: var(--size, 24px);
+  --button-icon-opacity-hover: 0.5; // TODO: replace with design tokens
+  --button-icon-opacity-disabled: 0.3; // TODO: replace with design tokens
+
+  height: var(--button-icon-size);
+  width: var(--button-icon-size);
+  padding: 0;
+  cursor: pointer;
+
+  // ButtonIcon default states
+  &:active,
+  &:hover {
+    opacity: var(--button-icon-opacity-hover);
+  }
+
+  &--disabled,
+  &:disabled {
+    opacity: var(--button-icon-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  // ButtonIcon Sizes
+  &--size-sm {
+    --button-icon-size: 24px;
+  }
+
+  &--size-lg {
+    --button-icon-size: 32px;
+  }
+}
+
diff --git a/ui/components/component-library/button-icon/button-icon.stories.js b/ui/components/component-library/button-icon/button-icon.stories.js
new file mode 100644
index 000000000..32db51f96
--- /dev/null
+++ b/ui/components/component-library/button-icon/button-icon.stories.js
@@ -0,0 +1,186 @@
+import React from 'react';
+import {
+  ALIGN_ITEMS,
+  COLORS,
+  DISPLAY,
+  FLEX_DIRECTION,
+  SIZES,
+} from '../../../helpers/constants/design-system';
+import Box from '../../ui/box/box';
+import { ICON_NAMES } from '../icon';
+import { BUTTON_ICON_SIZES } from './button-icon.constants';
+import { ButtonIcon } from './button-icon';
+import README from './README.mdx';
+
+const marginSizeControlOptions = [
+  undefined,
+  0,
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+  11,
+  12,
+  'auto',
+];
+
+export default {
+  title: 'Components/ComponentLibrary/ButtonIcon',
+  id: __filename,
+  component: ButtonIcon,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    ariaLabel: {
+      control: 'text',
+    },
+    as: {
+      control: 'select',
+      options: ['button', 'a'],
+    },
+    className: {
+      control: 'text',
+    },
+    color: {
+      control: 'select',
+      options: Object.values(COLORS),
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    href: {
+      control: 'string',
+    },
+    icon: {
+      control: 'select',
+      options: Object.values(ICON_NAMES),
+    },
+    size: {
+      control: 'select',
+      options: Object.values(BUTTON_ICON_SIZES),
+    },
+    marginTop: {
+      options: marginSizeControlOptions,
+      control: 'select',
+      table: { category: 'box props' },
+    },
+    marginRight: {
+      options: marginSizeControlOptions,
+      control: 'select',
+      table: { category: 'box props' },
+    },
+    marginBottom: {
+      options: marginSizeControlOptions,
+      control: 'select',
+      table: { category: 'box props' },
+    },
+    marginLeft: {
+      options: marginSizeControlOptions,
+      control: 'select',
+      table: { category: 'box props' },
+    },
+  },
+};
+
+export const DefaultStory = (args) => <ButtonIcon {...args} />;
+
+DefaultStory.args = {
+  icon: ICON_NAMES.CLOSE_OUTLINE,
+  ariaLabel: 'Close',
+};
+
+DefaultStory.storyName = 'Default';
+
+export const Icon = (args) => (
+  <ButtonIcon {...args} icon={ICON_NAMES.CLOSE_OUTLINE} ariaLabel="Close" />
+);
+
+export const Size = (args) => (
+  <Box
+    display={DISPLAY.FLEX}
+    alignItems={ALIGN_ITEMS.BASELINE}
+    gap={1}
+    marginBottom={2}
+  >
+    <ButtonIcon
+      {...args}
+      size={SIZES.SM}
+      icon={ICON_NAMES.CLOSE_OUTLINE}
+      ariaLabel="Close"
+    />
+    <ButtonIcon
+      {...args}
+      size={SIZES.LG}
+      color={COLORS.PRIMARY}
+      icon={ICON_NAMES.CLOSE_OUTLINE}
+      ariaLabel="Close"
+    />
+  </Box>
+);
+
+export const AriaLabel = (args) => (
+  <>
+    <ButtonIcon
+      as="button"
+      icon={ICON_NAMES.CLOSE_OUTLINE}
+      ariaLabel="Close"
+      {...args}
+    />
+    <ButtonIcon
+      as="a"
+      href="https://metamask.io/"
+      target="_blank"
+      color={COLORS.PRIMARY_DEFAULT}
+      icon={ICON_NAMES.EXPORT}
+      ariaLabel="Visit MetaMask.io"
+      {...args}
+    />
+  </>
+);
+
+export const As = (args) => (
+  <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW} gap={2}>
+    <ButtonIcon {...args} icon={ICON_NAMES.CLOSE_OUTLINE} />
+    <ButtonIcon
+      as="a"
+      href="#"
+      {...args}
+      color={COLORS.PRIMARY_DEFAULT}
+      icon={ICON_NAMES.EXPORT}
+    />
+  </Box>
+);
+
+export const Href = (args) => (
+  <ButtonIcon icon={ICON_NAMES.EXPORT} {...args} target="_blank" />
+);
+
+Href.args = {
+  href: 'https://metamask.io/',
+  color: COLORS.PRIMARY_DEFAULT,
+};
+
+export const Color = (args) => (
+  <ButtonIcon {...args} icon={ICON_NAMES.CLOSE_OUTLINE} />
+);
+
+Color.args = {
+  color: COLORS.PRIMARY_DEFAULT,
+};
+
+export const Disabled = (args) => (
+  <ButtonIcon {...args} icon={ICON_NAMES.CLOSE_OUTLINE} />
+);
+
+Disabled.args = {
+  disabled: true,
+};
diff --git a/ui/components/component-library/button-icon/button-icon.test.js b/ui/components/component-library/button-icon/button-icon.test.js
new file mode 100644
index 000000000..cb1521c64
--- /dev/null
+++ b/ui/components/component-library/button-icon/button-icon.test.js
@@ -0,0 +1,146 @@
+/* eslint-disable jest/require-top-level-describe */
+import { render } from '@testing-library/react';
+import React from 'react';
+import { COLORS } from '../../../helpers/constants/design-system';
+import { BUTTON_ICON_SIZES } from './button-icon.constants';
+import { ButtonIcon } from './button-icon';
+
+describe('ButtonIcon', () => {
+  it('should render button element correctly', () => {
+    const { getByTestId, container } = render(
+      <ButtonIcon
+        data-testid="button-icon"
+        icon="add-square-filled"
+        ariaLabel="add"
+      />,
+    );
+    expect(container.querySelector('button')).toBeDefined();
+    expect(getByTestId('button-icon')).toHaveClass('mm-button-icon');
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render anchor element correctly', () => {
+    const { getByTestId, container } = render(
+      <ButtonIcon
+        as="a"
+        data-testid="button-icon"
+        icon="add-square-filled"
+        ariaLabel="add"
+      />,
+    );
+    expect(getByTestId('button-icon')).toHaveClass('mm-button-icon');
+    const anchor = container.getElementsByTagName('a').length;
+    expect(anchor).toBe(1);
+  });
+
+  it('should render anchor element correctly using href', () => {
+    const { getByTestId, getByRole } = render(
+      <ButtonIcon
+        href="/metamask"
+        data-testid="button-icon"
+        icon="add-square-filled"
+        ariaLabel="add"
+      />,
+    );
+    expect(getByTestId('button-icon')).toHaveClass('mm-button-icon');
+    expect(getByRole('link')).toBeDefined();
+  });
+
+  it('should render with different size classes', () => {
+    const { getByTestId } = render(
+      <>
+        <ButtonIcon
+          icon="add-square-filled"
+          ariaLabel="add"
+          size={BUTTON_ICON_SIZES.SM}
+          data-testid={BUTTON_ICON_SIZES.SM}
+        />
+        <ButtonIcon
+          icon="add-square-filled"
+          ariaLabel="add"
+          size={BUTTON_ICON_SIZES.LG}
+          data-testid={BUTTON_ICON_SIZES.LG}
+        />
+      </>,
+    );
+    expect(getByTestId(BUTTON_ICON_SIZES.SM)).toHaveClass(
+      `mm-button-icon--size-${BUTTON_ICON_SIZES.SM}`,
+    );
+    expect(getByTestId(BUTTON_ICON_SIZES.LG)).toHaveClass(
+      `mm-button-icon--size-${BUTTON_ICON_SIZES.LG}`,
+    );
+  });
+
+  it('should render with different colors', () => {
+    const { getByTestId } = render(
+      <>
+        <ButtonIcon
+          icon="add-square-filled"
+          ariaLabel="add"
+          color={COLORS.ICON_DEFAULT}
+          data-testid={COLORS.ICON_DEFAULT}
+        />
+        <ButtonIcon
+          icon="add-square-filled"
+          ariaLabel="add"
+          color={COLORS.ERROR_DEFAULT}
+          data-testid={COLORS.ERROR_DEFAULT}
+        />
+      </>,
+    );
+    expect(getByTestId(COLORS.ICON_DEFAULT)).toHaveClass(
+      `box--color-${COLORS.ICON_DEFAULT}`,
+    );
+    expect(getByTestId(COLORS.ERROR_DEFAULT)).toHaveClass(
+      `box--color-${COLORS.ERROR_DEFAULT}`,
+    );
+  });
+
+  it('should render with added classname', () => {
+    const { getByTestId } = render(
+      <ButtonIcon
+        data-testid="classname"
+        className="mm-button-icon--test"
+        icon="add-square-filled"
+        ariaLabel="add"
+      />,
+    );
+    expect(getByTestId('classname')).toHaveClass('mm-button-icon--test');
+  });
+
+  it('should render with different button states', () => {
+    const { getByTestId } = render(
+      <>
+        <ButtonIcon
+          disabled
+          data-testid="disabled"
+          icon="add-square-filled"
+          ariaLabel="add"
+        />
+      </>,
+    );
+
+    expect(getByTestId('disabled')).toHaveClass(`mm-button-icon--disabled`);
+    expect(getByTestId('disabled')).toBeDisabled();
+  });
+  it('should render with icon', () => {
+    const { getByTestId } = render(
+      <ButtonIcon
+        data-testid="icon"
+        icon="add-square-filled"
+        ariaLabel="add"
+        iconProps={{ 'data-testid': 'button-icon' }}
+      />,
+    );
+
+    expect(getByTestId('button-icon')).toBeDefined();
+  });
+
+  it('should render with aria-label', () => {
+    const { getByLabelText } = render(
+      <ButtonIcon icon="add-square-filled" ariaLabel="add" />,
+    );
+
+    expect(getByLabelText('add')).toBeDefined();
+  });
+});
diff --git a/ui/components/component-library/button-icon/index.js b/ui/components/component-library/button-icon/index.js
new file mode 100644
index 000000000..c9d51bb07
--- /dev/null
+++ b/ui/components/component-library/button-icon/index.js
@@ -0,0 +1,2 @@
+export { ButtonIcon } from './button-icon';
+export { BUTTON_ICON_SIZES } from './button-icon.constants';
diff --git a/ui/components/component-library/button-link/README.mdx b/ui/components/component-library/button-link/README.mdx
index d1a743912..0d51dc036 100644
--- a/ui/components/component-library/button-link/README.mdx
+++ b/ui/components/component-library/button-link/README.mdx
@@ -35,7 +35,7 @@ Possible sizes include:
 
 ```jsx
 import { SIZES } from '../../../helpers/constants/design-system';
-import { ButtonLink } from '../ui/component-library/button/button-link/button-link';
+import { ButtonLink } from '../../ui/components/component-library';
 
 <ButtonLink size={SIZES.AUTO} />
 <ButtonLink size={SIZES.SM} />
@@ -43,16 +43,16 @@ import { ButtonLink } from '../ui/component-library/button/button-link/button-li
 <ButtonLink size={SIZES.LG} />
 ```
 
-### Type
+### Danger
 
-Use the `type` prop and the `BUTTON_TYPES` object from `./ui/helpers/constants/design-system.js` to change the context of `ButtonLink`.
+Use the `danger` boolean prop to change the `ButtonPrimary` to danger color.
 
 <Canvas>
-  <Story id="ui-components-component-library-button-link-button-link-stories-js--type" />
+  <Story id="ui-components-component-library-button-link-button-link-stories-js--danger" />
 </Canvas>
 
 ```jsx
-import { ButtonLink } from '../ui/component-library/button/button-link/button-link';
+import { ButtonLink } from '../../ui/components/component-library';
 
 <ButtonLink>Normal</ButtonLink>
 <ButtonLink danger>Danger</ButtonLink>
@@ -67,7 +67,7 @@ When an `href` is passed the tag element will switch to an `anchor`(`a`) tag.
 </Canvas>
 
 ```jsx
-import { ButtonLink } from '../ui/component-library/button/button-link/button-link';
+import { ButtonLink } from '../../ui/components/component-library';
 
 <ButtonLink href="/">Href Example</ButtonLink>;
 ```
diff --git a/ui/components/component-library/button-link/button-link.stories.js b/ui/components/component-library/button-link/button-link.stories.js
index e721459f4..d068ff0ff 100644
--- a/ui/components/component-library/button-link/button-link.stories.js
+++ b/ui/components/component-library/button-link/button-link.stories.js
@@ -139,7 +139,7 @@ export const Size = (args) => (
   </>
 );
 
-export const Type = (args) => (
+export const Danger = (args) => (
   <Box display={DISPLAY.FLEX} gap={1}>
     <ButtonLink {...args}>Normal</ButtonLink>
     {/* Test Anchor tag to match exactly as button */}
diff --git a/ui/components/component-library/button-link/button-link.test.js b/ui/components/component-library/button-link/button-link.test.js
index 473714fb0..2c246f969 100644
--- a/ui/components/component-library/button-link/button-link.test.js
+++ b/ui/components/component-library/button-link/button-link.test.js
@@ -53,7 +53,7 @@ describe('ButtonLink', () => {
     );
   });
 
-  it('should render with different types', () => {
+  it('should render as danger', () => {
     const { getByTestId } = render(
       <>
         <ButtonLink danger data-testid="danger" />
diff --git a/ui/components/component-library/button-primary/README.mdx b/ui/components/component-library/button-primary/README.mdx
index 69a110540..48f883d8f 100644
--- a/ui/components/component-library/button-primary/README.mdx
+++ b/ui/components/component-library/button-primary/README.mdx
@@ -34,23 +34,23 @@ Possible sizes include:
 
 ```jsx
 import { SIZES } from '../../../helpers/constants/design-system';
-import { ButtonPrimary } from '../ui/component-library/button/button-primary/button-primary';
+import { ButtonPrimary } from '../../ui/components/component-library';
 
 <ButtonPrimary size={SIZES.SM} />
 <ButtonPrimary size={SIZES.MD} />
 <ButtonPrimary size={SIZES.LG} />
 ```
 
-### Type
+### Danger
 
-Use the `type` prop and the `BUTTON_TYPES` object from `./ui/helpers/constants/design-system.js` to change the context of `ButtonPrimary`.
+Use the `danger` boolean prop to change the `ButtonPrimary` to danger color.
 
 <Canvas>
-  <Story id="ui-components-component-library-button-primary-button-primary-stories-js--type" />
+  <Story id="ui-components-component-library-button-primary-button-primary-stories-js--danger" />
 </Canvas>
 
 ```jsx
-import { ButtonPrimary } from '../ui/component-library/button/button-primary/button-primary';
+import { ButtonPrimary } from '../../ui/components/component-library';
 
 <ButtonPrimary>Normal</ButtonPrimary>
 <ButtonPrimary danger>Danger</ButtonPrimary>
diff --git a/ui/components/component-library/button-primary/__snapshots__/button-primary.test.js.snap b/ui/components/component-library/button-primary/__snapshots__/button-primary.test.js.snap
new file mode 100644
index 000000000..786e23cda
--- /dev/null
+++ b/ui/components/component-library/button-primary/__snapshots__/button-primary.test.js.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ButtonPrimary should render button element correctly 1`] = `
+<div>
+  <button
+    class="box mm-button mm-button--size-md mm-button-primary box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center"
+    data-testid="button-primary"
+  >
+    <span
+      class="box text mm-button__content text--body-md text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
+    >
+      Button Primary
+    </span>
+  </button>
+</div>
+`;
diff --git a/ui/components/component-library/button-primary/button-primary.js b/ui/components/component-library/button-primary/button-primary.js
index 78dc3e93d..6b7fce938 100644
--- a/ui/components/component-library/button-primary/button-primary.js
+++ b/ui/components/component-library/button-primary/button-primary.js
@@ -28,11 +28,11 @@ ButtonPrimary.propTypes = {
    */
   className: PropTypes.string,
   /**
-   * Boolean to change button type to Danger when true
+   * When true, `ButtonPrimary` color becomes Danger.
    */
   danger: PropTypes.bool,
   /**
-   * The possible size values for ButtonPrimary: 'SIZES.SM', 'SIZES.MD', 'SIZES.LG',
+   * Possible size values: 'SIZES.SM'(32px), 'SIZES.MD'(40px), 'SIZES.LG'(48px).
    * Default value is 'SIZES.MD'.
    */
   size: PropTypes.oneOf(Object.values(BUTTON_PRIMARY_SIZES)),
diff --git a/ui/components/component-library/button-primary/button-primary.stories.js b/ui/components/component-library/button-primary/button-primary.stories.js
index 8f9c3cafc..a125c6999 100644
--- a/ui/components/component-library/button-primary/button-primary.stories.js
+++ b/ui/components/component-library/button-primary/button-primary.stories.js
@@ -1,5 +1,9 @@
 import React from 'react';
-import { ALIGN_ITEMS, DISPLAY } from '../../../helpers/constants/design-system';
+import {
+  ALIGN_ITEMS,
+  DISPLAY,
+  SIZES,
+} from '../../../helpers/constants/design-system';
 import Box from '../../ui/box/box';
 import { ICON_NAMES } from '../icon';
 import { ButtonPrimary } from './button-primary';
@@ -110,19 +114,19 @@ DefaultStory.storyName = 'Default';
 
 export const Size = (args) => (
   <Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}>
-    <ButtonPrimary {...args} size={BUTTON_PRIMARY_SIZES.SM}>
+    <ButtonPrimary {...args} size={SIZES.SM}>
       Small Button
     </ButtonPrimary>
-    <ButtonPrimary {...args} size={BUTTON_PRIMARY_SIZES.MD}>
+    <ButtonPrimary {...args} size={SIZES.MD}>
       Medium (Default) Button
     </ButtonPrimary>
-    <ButtonPrimary {...args} size={BUTTON_PRIMARY_SIZES.LG}>
+    <ButtonPrimary {...args} size={SIZES.LG}>
       Large Button
     </ButtonPrimary>
   </Box>
 );
 
-export const Type = (args) => (
+export const Danger = (args) => (
   <Box display={DISPLAY.FLEX} gap={1}>
     <ButtonPrimary {...args}>Normal</ButtonPrimary>
     {/* Test Anchor tag to match exactly as button */}
diff --git a/ui/components/component-library/button-primary/button-primary.test.js b/ui/components/component-library/button-primary/button-primary.test.js
index 34751ae7f..83892c345 100644
--- a/ui/components/component-library/button-primary/button-primary.test.js
+++ b/ui/components/component-library/button-primary/button-primary.test.js
@@ -14,6 +14,7 @@ describe('ButtonPrimary', () => {
     expect(getByText('Button Primary')).toBeDefined();
     expect(container.querySelector('button')).toBeDefined();
     expect(getByTestId('button-primary')).toHaveClass('mm-button');
+    expect(container).toMatchSnapshot();
   });
 
   it('should render anchor element correctly', () => {
@@ -66,7 +67,7 @@ describe('ButtonPrimary', () => {
     );
   });
 
-  it('should render with different types', () => {
+  it('should render as danger', () => {
     const { getByTestId } = render(
       <>
         <ButtonPrimary danger data-testid="danger" />
diff --git a/ui/components/component-library/button-primary/index.js b/ui/components/component-library/button-primary/index.js
index e6b99af4c..744f8bb3a 100644
--- a/ui/components/component-library/button-primary/index.js
+++ b/ui/components/component-library/button-primary/index.js
@@ -1 +1,2 @@
 export { ButtonPrimary } from './button-primary';
+export { BUTTON_PRIMARY_SIZES } from './button-primary.constants';
diff --git a/ui/components/component-library/button-secondary/README.mdx b/ui/components/component-library/button-secondary/README.mdx
index 16a5a74a6..04eff904c 100644
--- a/ui/components/component-library/button-secondary/README.mdx
+++ b/ui/components/component-library/button-secondary/README.mdx
@@ -34,23 +34,23 @@ Possible sizes include:
 
 ```jsx
 import { SIZES } from '../../../helpers/constants/design-system';
-import { ButtonSecondary } from '../ui/component-library/button/button-secondary/button-secondary';
+import { ButtonSecondary } from '../../ui/components/component-library';
 
 <ButtonSecondary size={SIZES.SM} />
 <ButtonSecondary size={SIZES.MD} />
 <ButtonSecondary size={SIZES.LG} />
 ```
 
-### Type
+### Danger
 
-Use the `type` prop and the `BUTTON_TYPES` object from `./ui/helpers/constants/design-system.js` to change the context of `ButtonSecondary`.
+Use the `danger` boolean prop to change the `ButtonSecondary` to danger color.
 
 <Canvas>
-  <Story id="ui-components-component-library-button-secondary-button-secondary-stories-js--type" />
+  <Story id="ui-components-component-library-button-secondary-button-secondary-stories-js--danger" />
 </Canvas>
 
 ```jsx
-import { ButtonSecondary } from '../ui/component-library/button/button-secondary/button-secondary';
+import { ButtonSecondary } from '../../ui/components/component-library';
 
 <ButtonSecondary>Normal</ButtonSecondary>
 <ButtonSecondary danger>Danger</ButtonSecondary>
diff --git a/ui/components/component-library/button-secondary/__snapshots__/button-secondary.test.js.snap b/ui/components/component-library/button-secondary/__snapshots__/button-secondary.test.js.snap
new file mode 100644
index 000000000..05673f3ca
--- /dev/null
+++ b/ui/components/component-library/button-secondary/__snapshots__/button-secondary.test.js.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ButtonSecondary should render button element correctly 1`] = `
+<div>
+  <button
+    class="box mm-button mm-button--size-md mm-button-secondary box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center"
+    data-testid="button-secondary"
+  >
+    <span
+      class="box text mm-button__content text--body-md text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
+    >
+      Button Secondary
+    </span>
+  </button>
+</div>
+`;
diff --git a/ui/components/component-library/button-secondary/button-secondary.js b/ui/components/component-library/button-secondary/button-secondary.js
index c8d4ed608..eff2e3349 100644
--- a/ui/components/component-library/button-secondary/button-secondary.js
+++ b/ui/components/component-library/button-secondary/button-secondary.js
@@ -28,11 +28,11 @@ ButtonSecondary.propTypes = {
    */
   className: PropTypes.string,
   /**
-   * Boolean to change button type to Danger when true
+   * When true, ButtonSecondary color becomes Danger.
    */
   danger: PropTypes.bool,
   /**
-   * The possible size values for ButtonSecondary: 'SIZES.SM', 'SIZES.MD', 'SIZES.LG',
+   * Possible size values: 'SIZES.SM'(32px), 'SIZES.MD'(40px), 'SIZES.LG'(48px).
    * Default value is 'SIZES.MD'.
    */
   size: PropTypes.oneOf(Object.values(BUTTON_SECONDARY_SIZES)),
diff --git a/ui/components/component-library/button-secondary/button-secondary.stories.js b/ui/components/component-library/button-secondary/button-secondary.stories.js
index 399cb412e..194b55cca 100644
--- a/ui/components/component-library/button-secondary/button-secondary.stories.js
+++ b/ui/components/component-library/button-secondary/button-secondary.stories.js
@@ -1,5 +1,9 @@
 import React from 'react';
-import { ALIGN_ITEMS, DISPLAY } from '../../../helpers/constants/design-system';
+import {
+  ALIGN_ITEMS,
+  DISPLAY,
+  SIZES,
+} from '../../../helpers/constants/design-system';
 import Box from '../../ui/box/box';
 import { ICON_NAMES } from '../icon';
 import { ButtonSecondary } from './button-secondary';
@@ -110,19 +114,19 @@ DefaultStory.storyName = 'Default';
 
 export const Size = (args) => (
   <Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}>
-    <ButtonSecondary {...args} size={BUTTON_SECONDARY_SIZES.SM}>
+    <ButtonSecondary {...args} size={SIZES.SM}>
       Small Button
     </ButtonSecondary>
-    <ButtonSecondary {...args} size={BUTTON_SECONDARY_SIZES.MD}>
+    <ButtonSecondary {...args} size={SIZES.MD}>
       Medium (Default) Button
     </ButtonSecondary>
-    <ButtonSecondary {...args} size={BUTTON_SECONDARY_SIZES.LG}>
+    <ButtonSecondary {...args} size={SIZES.LG}>
       Large Button
     </ButtonSecondary>
   </Box>
 );
 
-export const Type = (args) => (
+export const Danger = (args) => (
   <Box display={DISPLAY.FLEX} gap={1}>
     <ButtonSecondary {...args}>Normal</ButtonSecondary>
     {/* Test Anchor tag to match exactly as button */}
diff --git a/ui/components/component-library/button-secondary/button-secondary.test.js b/ui/components/component-library/button-secondary/button-secondary.test.js
index 61f910ab9..8b2b14896 100644
--- a/ui/components/component-library/button-secondary/button-secondary.test.js
+++ b/ui/components/component-library/button-secondary/button-secondary.test.js
@@ -14,6 +14,7 @@ describe('ButtonSecondary', () => {
     expect(getByText('Button Secondary')).toBeDefined();
     expect(container.querySelector('button')).toBeDefined();
     expect(getByTestId('button-secondary')).toHaveClass('mm-button');
+    expect(container).toMatchSnapshot();
   });
 
   it('should render anchor element correctly', () => {
@@ -68,7 +69,7 @@ describe('ButtonSecondary', () => {
     );
   });
 
-  it('should render with different types', () => {
+  it('should render as danger', () => {
     const { getByTestId } = render(
       <>
         <ButtonSecondary danger data-testid="danger" />
diff --git a/ui/components/component-library/button-secondary/index.js b/ui/components/component-library/button-secondary/index.js
index 6b1d2869f..bccde44c2 100644
--- a/ui/components/component-library/button-secondary/index.js
+++ b/ui/components/component-library/button-secondary/index.js
@@ -1 +1,2 @@
 export { ButtonSecondary } from './button-secondary';
+export { BUTTON_SECONDARY_SIZES } from './button-secondary.constants';
diff --git a/ui/components/component-library/button/README.mdx b/ui/components/component-library/button/README.mdx
new file mode 100644
index 000000000..9c6c18f0d
--- /dev/null
+++ b/ui/components/component-library/button/README.mdx
@@ -0,0 +1,178 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import { Button } from './button';
+
+# Button
+
+The `Button` is used for user actions it unifies `ButtonPrimary`, `ButtonSecondary` and `ButtonLink`
+
+<Canvas>
+  <Story id="ui-components-component-library-button-button-stories-js--default-story" />
+</Canvas>
+
+## Props
+
+The `Button` accepts all props below as well as all [ButtonPrimary](/ui-components-component-library-button-primary-button-primary-stories-js--default-story), [ButtonSecondary](/ui-components-component-library-button-secondary-button-secondary-stories-js--default-story), [ButtonLink](/ui-components-component-library-button-link-button-link-stories-js--default-story), and [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props
+
+<ArgsTable of={Button} />
+
+### Type
+
+Use the `type` prop and the `BUTTON_TYPES` object from `./button.constants.js` to change the `Button` type.
+
+Possible types include:
+
+- `BUTTON_TYPES.PRIMARY`
+- `BUTTON_TYPES.SECONDARY`
+- `BUTTON_TYPES.LINK`
+
+<Canvas>
+  <Story id="ui-components-component-library-button-button-stories-js--type" />
+</Canvas>
+
+```jsx
+import { Button, BUTTON_TYPES } from '../ui/component-library/button';
+
+<Button type={BUTTON_TYPES.PRIMARY}>Button Primary</Button>
+<Button type={BUTTON_TYPES.SECONDARY}>Button Secondary</Button>
+<Button type={BUTTON_TYPES.LINK}>Button Link</Button>
+```
+
+### Size
+
+Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js` to change the size of `Button`. Defaults to `SIZES.MD`
+
+Optional: `BUTTON_SIZES` from `./button` object can be used instead of `SIZES`.
+
+Possible sizes include:
+
+- `SIZES.AUTO` inherits the font-size of the parent element.
+- `SIZES.SM` 32px
+- `SIZES.MD` 40px
+- `SIZES.LG` 48px
+
+<Canvas>
+  <Story id="ui-components-component-library-button-button-stories-js--size" />
+</Canvas>
+
+```jsx
+import { SIZES } from '../../../helpers/constants/design-system';
+import { Button } from '../ui/component-library/button/button/button';
+
+<Button size={SIZES.AUTO} />
+<Button size={SIZES.SM} />
+<Button size={SIZES.MD} />
+<Button size={SIZES.LG} />
+```
+
+### Danger
+
+Use the `danger` boolean prop to change the `Button` to danger color.
+
+<Canvas>
+  <Story id="ui-components-component-library-button-button-stories-js--danger" />
+</Canvas>
+
+```jsx
+import { Button } from '../ui/component-library/button/button/button';
+
+<Button>Normal</Button>
+<Button danger>Danger</Button>
+```
+
+### Href
+
+When an `href` is passed the tag element will switch to an `anchor`(`a`) tag.
+
+<Canvas>
+  <Story id="ui-components-component-library-button-button-stories-js--href" />
+</Canvas>
+
+```jsx
+import { Button } from '../ui/component-library/button/button/button';
+
+<Button href="/">Href Example</Button>;
+```
+
+### Block
+
+Use boolean `block` prop to quickly enable a full width block button
+
+<Canvas>
+  <Story id="ui-components-component-library-button-button-stories-js--block" />
+</Canvas>
+
+```jsx
+import { DISPLAY } from '../../../helpers/constants/design-system';
+import { Button } from '../ui/component-library';
+
+<Button>Default Button</Button>
+<Button block>Block Button</Button>
+```
+
+### As
+
+Use the `as` box prop to change the element of `Button`. Defaults to `button`.
+
+When an `href` prop is passed it will change the element to an anchor(`a`) tag.
+
+Button `as` options:
+
+- `button`
+- `a`
+
+<Canvas>
+  <Story id="ui-components-component-library-button-button-stories-js--as" />
+</Canvas>
+
+```jsx
+import { Button } from '../ui/component-library';
+
+
+<Button as="button">Button Element</Button>
+<Button as="a" href="#">
+  Anchor Element
+</Button>
+```
+
+### Disabled
+
+Use the boolean `disabled` prop to disable button
+
+<Canvas>
+  <Story id="ui-components-component-library-button-button-stories-js--disabled" />
+</Canvas>
+
+```jsx
+import { Button } from '../ui/component-library';
+
+<Button disabled>Disabled Button</Button>;
+```
+
+### Loading
+
+Use the boolean `loading` prop to set loading spinner
+
+<Canvas>
+  <Story id="ui-components-component-library-button-button-stories-js--loading" />
+</Canvas>
+
+```jsx
+import { Button } from '../ui/component-library';
+
+<Button loading>Loading Button</Button>;
+```
+
+### Icon
+
+Use the `icon` prop and the `ICON_NAMES` object from `./ui/components/component-library/icon` to select icon.
+
+<Canvas>
+  <Story id="ui-components-component-library-button-button-stories-js--icon" />
+</Canvas>
+
+```jsx
+import { Button } from '../ui/component-library';
+import { ICON_NAMES } from '../icon';
+
+<Button icon={ICON_NAMES.ADD_SQUARE_FILLED}>Button</Button>;
+```
diff --git a/ui/components/component-library/button/__snapshots__/button.test.js.snap b/ui/components/component-library/button/__snapshots__/button.test.js.snap
new file mode 100644
index 000000000..a2da87852
--- /dev/null
+++ b/ui/components/component-library/button/__snapshots__/button.test.js.snap
@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button should render button element correctly 1`] = `
+<div>
+  <button
+    class="box mm-button mm-button--size-md mm-button-primary box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center"
+    data-testid="button"
+  >
+    <span
+      class="box text mm-button__content text--body-md text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
+    >
+      Button
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Button should render with different button types 1`] = `
+<div>
+  <button
+    class="box mm-button mm-button--size-md mm-button-primary box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center"
+    data-testid="primary"
+  >
+    <span
+      class="box text mm-button__content text--body-md text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
+    >
+      Button
+    </span>
+  </button>
+  <button
+    class="box mm-button mm-button--size-md mm-button-secondary box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center"
+    data-testid="secondary"
+  >
+    <span
+      class="box text mm-button__content text--body-md text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
+    >
+      Button
+    </span>
+  </button>
+  <button
+    class="box mm-button mm-button--size-md mm-button-link box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center"
+    data-testid="link"
+  >
+    <span
+      class="box text mm-button__content text--body-md text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
+    >
+      Button
+    </span>
+  </button>
+</div>
+`;
diff --git a/ui/components/component-library/button/button.constants.js b/ui/components/component-library/button/button.constants.js
new file mode 100644
index 000000000..803673f31
--- /dev/null
+++ b/ui/components/component-library/button/button.constants.js
@@ -0,0 +1,14 @@
+import { SIZES } from '../../../helpers/constants/design-system';
+
+export const BUTTON_SIZES = {
+  SM: SIZES.SM,
+  MD: SIZES.MD,
+  LG: SIZES.LG,
+  AUTO: SIZES.AUTO,
+};
+
+export const BUTTON_TYPES = {
+  PRIMARY: 'primary',
+  SECONDARY: 'secondary',
+  LINK: 'link',
+};
diff --git a/ui/components/component-library/button/button.js b/ui/components/component-library/button/button.js
new file mode 100644
index 000000000..eaaa5486b
--- /dev/null
+++ b/ui/components/component-library/button/button.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { ButtonPrimary } from '../button-primary';
+import { ButtonSecondary } from '../button-secondary';
+import { ButtonLink } from '../button-link';
+
+import { BUTTON_TYPES } from './button.constants';
+
+export const Button = ({ type, ...props }) => {
+  switch (type) {
+    case BUTTON_TYPES.PRIMARY:
+      return <ButtonPrimary {...props} />;
+    case BUTTON_TYPES.SECONDARY:
+      return <ButtonSecondary {...props} />;
+    case BUTTON_TYPES.LINK:
+      return <ButtonLink {...props} />;
+    default:
+      return <ButtonPrimary {...props} />;
+  }
+};
+
+Button.propTypes = {
+  /**
+   * Select the type of Button.
+   * Possible values could be 'BUTTON_TYPES.PRIMARY', 'BUTTON_TYPES.SECONDARY', 'BUTTON_TYPES.LINK'
+   * Button will default to `BUTTON_TYPES.PRIMARY`
+   */
+  type: PropTypes.oneOf(Object.values(BUTTON_TYPES)),
+  /**
+   * Button accepts all the props from ButtonPrimary (same props as ButtonSecondary & ButtonLink)
+   */
+  ...ButtonPrimary.propTypes,
+};
diff --git a/ui/components/component-library/button/button.stories.js b/ui/components/component-library/button/button.stories.js
new file mode 100644
index 000000000..cce693001
--- /dev/null
+++ b/ui/components/component-library/button/button.stories.js
@@ -0,0 +1,212 @@
+import React from 'react';
+import {
+  ALIGN_ITEMS,
+  DISPLAY,
+  FLEX_DIRECTION,
+  SIZES,
+  TEXT,
+} from '../../../helpers/constants/design-system';
+import { ICON_NAMES } from '../icon';
+import { BUTTON_LINK_SIZES } from '../button-link/button-link.constants';
+import Box from '../../ui/box/box';
+import { Text } from '../text';
+import README from './README.mdx';
+import { Button, BUTTON_TYPES } from '.';
+
+const marginSizeControlOptions = [
+  undefined,
+  0,
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+  11,
+  12,
+  'auto',
+];
+
+export default {
+  title: 'Components/ComponentLibrary/Button',
+  id: __filename,
+  component: Button,
+  parameters: {
+    docs: {
+      page: README,
+    },
+    controls: { sort: 'alpha' },
+  },
+  argTypes: {
+    as: {
+      control: 'select',
+      options: ['button', 'a'],
+    },
+    block: {
+      control: 'boolean',
+    },
+    children: {
+      control: 'text',
+    },
+    className: {
+      control: 'text',
+    },
+    danger: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    href: {
+      control: 'text',
+    },
+    icon: {
+      control: 'select',
+      options: Object.values(ICON_NAMES),
+    },
+    iconPositionRight: {
+      control: 'boolean',
+    },
+    iconProps: {
+      control: 'object',
+    },
+    loading: {
+      control: 'boolean',
+    },
+    size: {
+      control: 'select',
+      options: Object.values(BUTTON_LINK_SIZES),
+    },
+    type: {
+      options: Object.values(BUTTON_TYPES),
+      control: 'select',
+    },
+    marginTop: {
+      options: marginSizeControlOptions,
+      control: 'select',
+      table: { category: 'box props' },
+    },
+    marginRight: {
+      options: marginSizeControlOptions,
+      control: 'select',
+      table: { category: 'box props' },
+    },
+    marginBottom: {
+      options: marginSizeControlOptions,
+      control: 'select',
+      table: { category: 'box props' },
+    },
+    marginLeft: {
+      options: marginSizeControlOptions,
+      control: 'select',
+      table: { category: 'box props' },
+    },
+  },
+  args: {
+    children: 'Button',
+  },
+};
+
+export const DefaultStory = (args) => <Button {...args} />;
+
+DefaultStory.storyName = 'Default';
+
+export const Type = (args) => (
+  <Box display={DISPLAY.FLEX} gap={1}>
+    <Button type={BUTTON_TYPES.PRIMARY} {...args}>
+      Button Primary
+    </Button>
+    <Button type={BUTTON_TYPES.SECONDARY} {...args}>
+      Button Secondary
+    </Button>
+    <Button type={BUTTON_TYPES.LINK} {...args}>
+      Button Link
+    </Button>
+  </Box>
+);
+
+export const Size = (args) => (
+  <>
+    <Box
+      display={DISPLAY.FLEX}
+      alignItems={ALIGN_ITEMS.BASELINE}
+      gap={1}
+      marginBottom={3}
+    >
+      <Button {...args} size={SIZES.SM}>
+        Small Button
+      </Button>
+      <Button {...args} size={SIZES.MD}>
+        Medium (Default) Button
+      </Button>
+      <Button {...args} size={SIZES.LG}>
+        Large Button
+      </Button>
+    </Box>
+    <Text variant={TEXT.BODY_SM}>
+      <Button {...args} type={BUTTON_TYPES.LINK} size={SIZES.AUTO}>
+        Button Auto
+      </Button>{' '}
+      inherits the font-size of the parent element. Auto size only used for
+      ButtonLink.
+    </Text>
+  </>
+);
+
+export const Danger = (args) => (
+  <Box display={DISPLAY.FLEX} gap={1}>
+    <Button {...args}>Normal</Button>
+    {/* Test Anchor tag to match exactly as button */}
+    <Button as="a" {...args} href="#" danger>
+      Danger
+    </Button>
+  </Box>
+);
+
+export const Href = (args) => <Button {...args}>Href Example</Button>;
+
+Href.args = {
+  href: '/metamask',
+};
+
+export const Block = (args) => (
+  <>
+    <Button {...args} marginBottom={2}>
+      Default Button
+    </Button>
+    <Button {...args} block marginBottom={2}>
+      Block Button
+    </Button>
+  </>
+);
+
+export const As = (args) => (
+  <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW} gap={2}>
+    <Button {...args}>Button Element</Button>
+    <Button as="a" href="#" {...args}>
+      Anchor Element
+    </Button>
+  </Box>
+);
+
+export const Disabled = (args) => <Button {...args}>Disabled Button</Button>;
+
+Disabled.args = {
+  disabled: true,
+};
+
+export const Loading = (args) => <Button {...args}>Loading Button</Button>;
+
+Loading.args = {
+  loading: true,
+};
+
+export const Icon = (args) => (
+  <Button {...args} icon={ICON_NAMES.ADD_SQUARE_FILLED}>
+    Button
+  </Button>
+);
diff --git a/ui/components/component-library/button/button.test.js b/ui/components/component-library/button/button.test.js
new file mode 100644
index 000000000..8f4f288e8
--- /dev/null
+++ b/ui/components/component-library/button/button.test.js
@@ -0,0 +1,157 @@
+/* eslint-disable jest/require-top-level-describe */
+import { render } from '@testing-library/react';
+import React from 'react';
+import { BUTTON_SIZES, BUTTON_TYPES } from './button.constants';
+import { Button } from './button';
+
+describe('Button', () => {
+  it('should render button element correctly', () => {
+    const { getByTestId, getByText, container } = render(
+      <Button data-testid="button">Button</Button>,
+    );
+    expect(getByText('Button')).toBeDefined();
+    expect(container.querySelector('button')).toBeDefined();
+    expect(getByTestId('button')).toHaveClass('mm-button');
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render anchor element correctly', () => {
+    const { getByTestId, container } = render(
+      <Button as="a" data-testid="button">
+        Button
+      </Button>,
+    );
+    expect(getByTestId('button')).toHaveClass('mm-button');
+    const anchor = container.getElementsByTagName('a').length;
+    expect(anchor).toBe(1);
+  });
+
+  it('should render anchor element correctly by href only being passed', () => {
+    const { getByTestId, container } = render(
+      <Button href="/metamask" data-testid="button">
+        Visit Site
+      </Button>,
+    );
+    expect(getByTestId('button')).toHaveClass('mm-button');
+    const anchor = container.getElementsByTagName('a').length;
+    expect(anchor).toBe(1);
+  });
+
+  it('should render button as block', () => {
+    const { getByTestId } = render(<Button block data-testid="block" />);
+    expect(getByTestId('block')).toHaveClass(`mm-button--block`);
+  });
+
+  it('should render with different button types', () => {
+    const { getByTestId, container } = render(
+      <>
+        <Button type={BUTTON_TYPES.PRIMARY} data-testid={BUTTON_TYPES.PRIMARY}>
+          Button
+        </Button>
+        <Button
+          type={BUTTON_TYPES.SECONDARY}
+          data-testid={BUTTON_TYPES.SECONDARY}
+        >
+          Button
+        </Button>
+        <Button type={BUTTON_TYPES.LINK} data-testid={BUTTON_TYPES.LINK}>
+          Button
+        </Button>
+      </>,
+    );
+    expect(getByTestId(BUTTON_TYPES.PRIMARY)).toHaveClass(
+      `mm-button-${BUTTON_TYPES.PRIMARY}`,
+    );
+    expect(getByTestId(BUTTON_TYPES.SECONDARY)).toHaveClass(
+      `mm-button-${BUTTON_TYPES.SECONDARY}`,
+    );
+    expect(getByTestId(BUTTON_TYPES.LINK)).toHaveClass(
+      `mm-button-${BUTTON_TYPES.LINK}`,
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render with different size classes', () => {
+    const { getByTestId } = render(
+      <>
+        <Button
+          size={BUTTON_SIZES.AUTO}
+          type={BUTTON_TYPES.LINK}
+          data-testid={BUTTON_SIZES.AUTO}
+        >
+          Button {BUTTON_SIZES.AUTO}
+        </Button>
+        <Button size={BUTTON_SIZES.SM} data-testid={BUTTON_SIZES.SM}>
+          Button {BUTTON_SIZES.SM}
+        </Button>
+        <Button size={BUTTON_SIZES.MD} data-testid={BUTTON_SIZES.MD}>
+          Button {BUTTON_SIZES.MD}
+        </Button>
+        <Button size={BUTTON_SIZES.LG} data-testid={BUTTON_SIZES.LG}>
+          Button {BUTTON_SIZES.LG}
+        </Button>
+      </>,
+    );
+    expect(getByTestId(BUTTON_SIZES.AUTO)).toHaveClass(
+      `mm-button--size-${BUTTON_SIZES.AUTO}`,
+    );
+    expect(getByTestId(BUTTON_SIZES.SM)).toHaveClass(
+      `mm-button--size-${BUTTON_SIZES.SM}`,
+    );
+    expect(getByTestId(BUTTON_SIZES.MD)).toHaveClass(
+      `mm-button--size-${BUTTON_SIZES.MD}`,
+    );
+    expect(getByTestId(BUTTON_SIZES.LG)).toHaveClass(
+      `mm-button--size-${BUTTON_SIZES.LG}`,
+    );
+  });
+
+  it('should render with added classname', () => {
+    const { getByTestId } = render(
+      <Button data-testid="classname" className="mm-button--test">
+        Button
+      </Button>,
+    );
+    expect(getByTestId('classname')).toHaveClass('mm-button--test');
+  });
+
+  it('should render with different button states', () => {
+    const { getByTestId } = render(
+      <>
+        <Button loading data-testid="loading">
+          Button
+        </Button>
+        <Button disabled data-testid="disabled">
+          Button
+        </Button>
+      </>,
+    );
+    expect(getByTestId('loading')).toHaveClass(`mm-button--loading`);
+    expect(getByTestId('disabled')).toHaveClass(`mm-button--disabled`);
+  });
+  it('should render with icon', () => {
+    const { getByTestId } = render(
+      <Button
+        data-testid="icon"
+        icon="add-square-filled"
+        iconProps={{ 'data-testid': 'base-button-icon' }}
+      >
+        Button
+      </Button>,
+    );
+
+    expect(getByTestId('base-button-icon')).toBeDefined();
+  });
+});
+
+it('should render as danger', () => {
+  const { getByTestId } = render(
+    <>
+      <Button danger data-testid="danger">
+        Button Danger
+      </Button>
+    </>,
+  );
+
+  expect(getByTestId('danger')).toHaveClass('mm-button-primary--type-danger');
+});
diff --git a/ui/components/component-library/button/index.js b/ui/components/component-library/button/index.js
new file mode 100644
index 000000000..1a9c9819b
--- /dev/null
+++ b/ui/components/component-library/button/index.js
@@ -0,0 +1,2 @@
+export { Button } from './button';
+export { BUTTON_TYPES } from './button.constants';
diff --git a/ui/components/component-library/component-library-components.scss b/ui/components/component-library/component-library-components.scss
index af5003d1e..898d3945d 100644
--- a/ui/components/component-library/component-library-components.scss
+++ b/ui/components/component-library/component-library-components.scss
@@ -1,16 +1,28 @@
-/** Please import your files in alphabetical order **/
+/**
+* Please import your styles in order of atomicity.
+* The most atomic styles should be imported first.
+* This will help improve specificity and reduce the chance of
+* unintended overrides.
+**/
+// Atoms
+@import 'text/text';
+@import 'icon/icon';
+@import 'label/label';
+@import 'tag/tag';
+@import 'base-avatar/base-avatar';
 @import 'avatar-account/avatar-account';
 @import 'avatar-favicon/avatar-favicon';
 @import 'avatar-network/avatar-network';
 @import 'avatar-token/avatar-token';
 @import 'avatar-with-badge/avatar-with-badge';
-@import 'base-avatar/base-avatar';
 @import 'button-base/button-base';
+@import 'button-icon/button-icon';
 @import 'button-link/button-link';
 @import 'button-primary/button-primary';
 @import 'button-secondary/button-secondary';
-@import 'icon/icon';
-@import 'tag/tag';
-@import 'text/text';
+// Molecules
+@import 'picker-network/picker-network';
+@import 'tag-url/tag-url';
 @import 'text-field/text-field';
 @import 'text-field-base/text-field-base';
+@import 'text-field-search/text-field-search';
diff --git a/ui/components/component-library/help-text/README.mdx b/ui/components/component-library/help-text/README.mdx
new file mode 100644
index 000000000..03c2cf50a
--- /dev/null
+++ b/ui/components/component-library/help-text/README.mdx
@@ -0,0 +1,84 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import { HelpText } from './help-text';
+
+# HelpText
+
+The `HelpText` is intended to be used as the help or error text under a form element
+
+<Canvas>
+  <Story id="ui-components-component-library-help-text-help-text-stories-js--default-story" />
+</Canvas>
+
+## Props
+
+The `HelpText` accepts all props below as well as all [Text](/docs/ui-components-component-library-text-text-stories-js--default-story#props) and [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props.
+
+<ArgsTable of={HelpText} />
+
+### Children
+
+The `children` of the `HelpText` can be plain text or react nodes.
+
+<Canvas>
+  <Story id="ui-components-component-library-help-text-help-text-stories-js--children" />
+</Canvas>
+
+```jsx
+import { SIZES, COLORS } from '../../../helpers/constants/design-system';
+import { Icon, ICON_NAMES } from '../../ui/components/component-library';
+import { HelpText } from '../../ui/components/component-library';
+
+<HelpText>Plain text</HelpText>
+<HelpText>
+  Text and icon
+  <Icon
+    marginLeft={1}
+    color={COLORS.INHERIT}
+    name={ICON_NAMES.WARNING_FILLED}
+    size={SIZES.AUTO}
+  />
+</HelpText>
+```
+
+### Error
+
+Use the `error` prop to show the `HelpText` in error state.
+
+<Canvas>
+  <Story id="ui-components-component-library-help-text-help-text-stories-js--error-story" />
+</Canvas>
+
+```jsx
+import { HelpText } from '../../ui/components/component-library';
+
+<HelpText error>This HelpText in error state</HelpText>;
+```
+
+### Color
+
+It may be useful to change the color of the `HelpText`. Use the `color` prop and the `COLORS` object to change the color of the `HelpText`. Defaults to `COLORS.TEXT_DEFAULT`.
+
+<Canvas>
+  <Story id="ui-components-component-library-help-text-help-text-stories-js--color" />
+</Canvas>
+
+```jsx
+import { COLORS } from '../../../helpers/constants/design-system';
+import { HelpText } from '../../ui/components/component-library';
+
+<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
+  <HelpText color={COLORS.TEXT_DEFAULT}>
+    The HelpText default color is COLORS.TEXT_DEFAULT
+  </HelpText>
+  <HelpText color={COLORS.INFO_DEFAULT}>
+    This HelpText color is COLORS.INFO_DEFAULT
+  </HelpText>
+  <HelpText color={COLORS.WARNING_DEFAULT}>
+    This HelpText color is COLORS.WARNING_DEFAULT
+  </HelpText>
+  <HelpText color={COLORS.SUCCESS_DEFAULT}>
+    This HelpText color is COLORS.SUCCESS_DEFAULT
+  </HelpText>
+</Box>;
+```
diff --git a/ui/components/component-library/help-text/help-text.js b/ui/components/component-library/help-text/help-text.js
new file mode 100644
index 000000000..2eeb66841
--- /dev/null
+++ b/ui/components/component-library/help-text/help-text.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import {
+  COLORS,
+  TEXT,
+  TEXT_COLORS,
+} from '../../../helpers/constants/design-system';
+
+import { Text } from '../text';
+
+export const HelpText = ({
+  error,
+  color = COLORS.TEXT_DEFAULT,
+  className,
+  children,
+  ...props
+}) => (
+  <Text
+    as="span"
+    className={classnames('mm-help-text', className)}
+    variant={TEXT.BODY_XS}
+    color={error ? COLORS.ERROR_DEFAULT : color}
+    {...props}
+  >
+    {children}
+  </Text>
+);
+
+HelpText.propTypes = {
+  /**
+   * If the HelperText should display in error state
+   * Will override the color prop if true
+   */
+  error: PropTypes.bool,
+  /**
+   * The color of the HelpText will be overridden if error is true
+   * Defaults to COLORS.TEXT_DEFAULT
+   */
+  color: PropTypes.oneOf(Object.values(TEXT_COLORS)),
+  /**
+   * The content of the help-text
+   */
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * Additional classNames to be added to the HelpText component
+   */
+  className: PropTypes.string,
+  /**
+   * HelpText also accepts all Text and Box props
+   */
+  ...Text.propTypes,
+};
diff --git a/ui/components/component-library/help-text/help-text.stories.js b/ui/components/component-library/help-text/help-text.stories.js
new file mode 100644
index 000000000..07853b56c
--- /dev/null
+++ b/ui/components/component-library/help-text/help-text.stories.js
@@ -0,0 +1,88 @@
+import React from 'react';
+import {
+  DISPLAY,
+  FLEX_DIRECTION,
+  COLORS,
+  TEXT_COLORS,
+  SIZES,
+} from '../../../helpers/constants/design-system';
+
+import Box from '../../ui/box';
+import { Icon, ICON_NAMES } from '../icon';
+
+import { HelpText } from './help-text';
+
+import README from './README.mdx';
+
+export default {
+  title: 'Components/ComponentLibrary/HelpText',
+  id: __filename,
+  component: HelpText,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    children: {
+      control: 'text',
+    },
+    className: {
+      control: 'text',
+    },
+    error: {
+      control: 'boolean',
+    },
+    color: {
+      control: 'select',
+      options: Object.values(TEXT_COLORS),
+    },
+  },
+  args: {
+    children: 'Help text',
+  },
+};
+
+const Template = (args) => <HelpText {...args} />;
+
+export const DefaultStory = Template.bind({});
+DefaultStory.storyName = 'Default';
+
+export const Children = (args) => (
+  <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
+    <HelpText {...args}>Plain text</HelpText>
+    <HelpText {...args}>
+      Text and icon
+      <Icon
+        marginLeft={1}
+        color={COLORS.INHERIT}
+        name={ICON_NAMES.WARNING_FILLED}
+        size={SIZES.AUTO}
+      />
+    </HelpText>
+  </Box>
+);
+
+export const ErrorStory = (args) => (
+  <HelpText error {...args}>
+    This HelpText in error state
+  </HelpText>
+);
+ErrorStory.storyName = 'Error';
+
+export const Color = (args) => (
+  <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
+    <HelpText color={COLORS.TEXT_DEFAULT} {...args}>
+      This HelpText default color is COLORS.TEXT_DEFAULT
+    </HelpText>
+    <HelpText color={COLORS.INFO_DEFAULT} {...args}>
+      This HelpText color is COLORS.INFO_DEFAULT
+    </HelpText>
+    <HelpText color={COLORS.WARNING_DEFAULT} {...args}>
+      This HelpText color is COLORS.WARNING_DEFAULT
+    </HelpText>
+    <HelpText color={COLORS.SUCCESS_DEFAULT} {...args}>
+      This HelpText color is COLORS.SUCCESS_DEFAULT
+    </HelpText>
+  </Box>
+);
diff --git a/ui/components/component-library/help-text/help-text.test.js b/ui/components/component-library/help-text/help-text.test.js
new file mode 100644
index 000000000..9391ed0cb
--- /dev/null
+++ b/ui/components/component-library/help-text/help-text.test.js
@@ -0,0 +1,52 @@
+/* eslint-disable jest/require-top-level-describe */
+import { render } from '@testing-library/react';
+import React from 'react';
+import { COLORS } from '../../../helpers/constants/design-system';
+import { Icon, ICON_NAMES } from '../icon';
+
+import { HelpText } from './help-text';
+
+describe('HelpText', () => {
+  it('should render with text inside the HelpText', () => {
+    const { getByText } = render(<HelpText>help text</HelpText>);
+    expect(getByText('help text')).toBeDefined();
+  });
+  it('should render with react nodes inside the HelpText', () => {
+    const { getByText, getByTestId } = render(
+      <HelpText>
+        help text <Icon name={ICON_NAMES.WARNING_FILLED} data-testid="icon" />
+      </HelpText>,
+    );
+    expect(getByText('help text')).toBeDefined();
+    expect(getByTestId('icon')).toBeDefined();
+  });
+  it('should render with and additional className', () => {
+    const { getByText } = render(
+      <HelpText className="test-class">help text</HelpText>,
+    );
+    expect(getByText('help text')).toBeDefined();
+    expect(getByText('help text')).toHaveClass('test-class');
+  });
+  it('should render with error state', () => {
+    const { getByText } = render(
+      <>
+        <HelpText error>error</HelpText>
+      </>,
+    );
+    expect(getByText('error')).toHaveClass('text--color-error-default');
+  });
+  it('should render with different colors', () => {
+    const { getByText } = render(
+      <>
+        <HelpText>default</HelpText>
+        <HelpText color={COLORS.WARNING_DEFAULT}>warning</HelpText>
+        <HelpText color={COLORS.SUCCESS_DEFAULT}>success</HelpText>
+        <HelpText color={COLORS.INFO_DEFAULT}>info</HelpText>
+      </>,
+    );
+    expect(getByText('default')).toHaveClass('text--color-text-default');
+    expect(getByText('warning')).toHaveClass('text--color-warning-default');
+    expect(getByText('success')).toHaveClass('text--color-success-default');
+    expect(getByText('info')).toHaveClass('text--color-info-default');
+  });
+});
diff --git a/ui/components/component-library/help-text/index.js b/ui/components/component-library/help-text/index.js
new file mode 100644
index 000000000..cbc88e159
--- /dev/null
+++ b/ui/components/component-library/help-text/index.js
@@ -0,0 +1 @@
+export { HelpText } from './help-text';
diff --git a/ui/components/component-library/icon/README.mdx b/ui/components/component-library/icon/README.mdx
index 950e2d07b..d18913802 100644
--- a/ui/components/component-library/icon/README.mdx
+++ b/ui/components/component-library/icon/README.mdx
@@ -23,7 +23,7 @@ Use the `name` prop and the `ICON_NAMES` object to change the icon.
 Use the [IconSearch](/ui-components-component-library-icon-icon-stories-js--name) story to find the icon you want to use.
 
 ```jsx
-import { Icon, ICON_NAMES } from '../ui/component-library';
+import { Icon, ICON_NAMES } from '../../ui/components/component-library';
 
 <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} />
 <Icon name={ICON_NAMES.BANK_FILLED} />
@@ -55,7 +55,7 @@ Possible sizes include:
 
 ```jsx
 import { SIZES } from '../../../helpers/constants/design-system';
-import { Icon, ICON_NAMES } from '../ui/component-library';
+import { Icon, ICON_NAMES } from '../../ui/components/component-library';
 
 <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} size={SIZES.XXS} />
 <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} size={SIZES.XS} />
@@ -79,7 +79,7 @@ Use the `color` prop and the `COLORS` object from `./ui/helpers/constants/design
 
 ```jsx
 import { COLORS } from '../../../helpers/constants/design-system';
-import { Icon, ICON_NAMES } from '../ui/component-library';
+import { Icon, ICON_NAMES } from '../../ui/components/component-library';
 
 <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} color={COLORS.INHERIT} />
 <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} color={COLORS.ICON_DEFAULT} />
diff --git a/ui/components/component-library/index.js b/ui/components/component-library/index.js
new file mode 100644
index 000000000..6927e2334
--- /dev/null
+++ b/ui/components/component-library/index.js
@@ -0,0 +1,25 @@
+export { AvatarAccount } from './avatar-account';
+export { AvatarFavicon } from './avatar-favicon';
+export { AvatarNetwork } from './avatar-network';
+export { AvatarToken } from './avatar-token';
+export { AvatarWithBadge } from './avatar-with-badge';
+export { BaseAvatar } from './base-avatar';
+export { Button } from './button';
+export { ButtonBase } from './button-base';
+export { ButtonIcon } from './button-icon';
+export { ButtonLink } from './button-link';
+export { ButtonPrimary } from './button-primary';
+export { ButtonSecondary } from './button-secondary';
+export { HelpText } from './help-text';
+export { Icon, ICON_NAMES } from './icon';
+export { Label } from './label';
+export { PickerNetwork } from './picker-network';
+export { Tag } from './tag';
+export { TagUrl } from './tag-url';
+export { Text } from './text';
+export { TextField } from './text-field';
+export {
+  TextFieldBase,
+  TEXT_FIELD_BASE_SIZES,
+  TEXT_FIELD_BASE_TYPES,
+} from './text-field-base';
diff --git a/ui/components/component-library/label/README.mdx b/ui/components/component-library/label/README.mdx
new file mode 100644
index 000000000..5f83c96d5
--- /dev/null
+++ b/ui/components/component-library/label/README.mdx
@@ -0,0 +1,95 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import { Label } from './label';
+
+# Label
+
+The `Label` is a component used to label form inputs.
+
+<Canvas>
+  <Story id="ui-components-component-library-label-label-stories-js--default-story" />
+</Canvas>
+
+## Props
+
+The `Label` accepts all props below as well as all [Text](/docs/ui-components-component-library-text-text-stories-js--default-story#props) and [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props.
+
+<ArgsTable of={Label} />
+
+### Children
+
+The `children` of the label can be text or a react node.
+
+<Canvas>
+  <Story id="ui-components-component-library-label-label-stories-js--children" />
+</Canvas>
+
+```jsx
+import { DISPLAY, ALIGN_ITEMS, FLEX_DIRECTION, SIZES, COLORS } from '../../../helpers/constants/design-system';
+import { Icon, ICON_NAMES } from '../../ui/components/component-library';
+import { Label } from '../../ui/components/component-library';
+import { TextFieldBase } from '../../ui/components/component-library';
+
+<Label>Plain text</Label>
+<Label display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.FLEX_START}>
+  Text and icon
+  <Icon
+    color={COLORS.ICON_ALTERNATIVE}
+    name={ICON_NAMES.INFO_FILLED}
+    size={SIZES.AUTO}
+  />
+</Label>
+<Label
+  display={DISPLAY.INLINE_FLEX}
+  flexDirection={FLEX_DIRECTION.COLUMN}
+  alignItems={ALIGN_ITEMS.FLEX_START}
+>
+  Label that wraps an input
+  {/* TODO: replace with TextField component */}
+  <TextFieldBase placeholder="Click label to focus" />
+</Label>
+```
+
+### Html For
+
+Use the `htmlFor` prop to allow the `Label` to focus on an input with the same id when clicked. The cursor will also change to a `pointer` when the `htmlFor` has a value
+
+<Canvas>
+  <Story id="ui-components-component-library-label-label-stories-js--html-for" />
+</Canvas>
+
+```jsx
+import { TextFieldBase } from '../../ui/components/component-library';
+import { Label } from '../../ui/components/component-library';
+
+<Label htmlFor="add-network">Add network</Label>
+<TextFieldBase  id="add-network" placeholder="Enter network name" />
+```
+
+### Required
+
+Use the `required` prop to add a required red asterisk next to the `children` of the `Label`. Note the required asterisk will always render after the `children`.
+
+<Canvas>
+  <Story id="ui-components-component-library-label-label-stories-js--required" />
+</Canvas>
+
+```jsx
+import { Label } from '../../ui/components/component-library';
+
+<Label required>Label</Label>;
+```
+
+### Disabled
+
+Use the `disabled` prop to set the `Label` in disabled state
+
+<Canvas>
+  <Story id="ui-components-component-library-label-label-stories-js--disabled" />
+</Canvas>
+
+```jsx
+import { Label } from '../../ui/components/component-library';
+
+<Label disabled>Label</Label>;
+```
diff --git a/ui/components/component-library/label/index.js b/ui/components/component-library/label/index.js
new file mode 100644
index 000000000..f28365d90
--- /dev/null
+++ b/ui/components/component-library/label/index.js
@@ -0,0 +1 @@
+export { Label } from './label';
diff --git a/ui/components/component-library/label/label.js b/ui/components/component-library/label/label.js
new file mode 100644
index 000000000..aece4d958
--- /dev/null
+++ b/ui/components/component-library/label/label.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import {
+  COLORS,
+  FONT_WEIGHT,
+  TEXT,
+  DISPLAY,
+  ALIGN_ITEMS,
+} from '../../../helpers/constants/design-system';
+import { Text } from '../text';
+
+export const Label = ({
+  htmlFor,
+  required,
+  disabled,
+  className,
+  children,
+  ...props
+}) => (
+  <Text
+    as="label"
+    disabled={disabled}
+    htmlFor={htmlFor}
+    className={classnames(
+      'mm-label',
+      { 'mm-label--disabled': disabled },
+      { 'mm-label--html-for': htmlFor && !disabled },
+      className,
+    )}
+    variant={TEXT.BODY_MD}
+    fontWeight={FONT_WEIGHT.BOLD}
+    display={DISPLAY.INLINE_FLEX}
+    alignItems={ALIGN_ITEMS.CENTER}
+    {...props}
+  >
+    {children}
+    {required && (
+      <Text
+        as="span"
+        className="mm-label__required-asterisk"
+        aria-hidden="true"
+        color={COLORS.ERROR_DEFAULT}
+      >
+        *
+      </Text>
+    )}
+  </Text>
+);
+
+Label.propTypes = {
+  /**
+   * The content of the label
+   */
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * The id of the input associated with the label
+   */
+  htmlFor: PropTypes.string,
+  /**
+   * If true the label will display as required
+   */
+  required: PropTypes.bool,
+  /**
+   * Whether the label is disabled or not
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Additional classNames to be added to the label component
+   */
+  className: PropTypes.string,
+};
diff --git a/ui/components/component-library/label/label.scss b/ui/components/component-library/label/label.scss
new file mode 100644
index 000000000..425048540
--- /dev/null
+++ b/ui/components/component-library/label/label.scss
@@ -0,0 +1,11 @@
+.mm-label {
+  --label-opacity-disabled: 0.5; // TODO: replace with design token
+
+  &--html-for {
+    cursor: pointer;
+  }
+
+  &--disabled {
+    opacity: var(--label-opacity-disabled);
+  }
+}
diff --git a/ui/components/component-library/label/label.stories.js b/ui/components/component-library/label/label.stories.js
new file mode 100644
index 000000000..0d3048bbc
--- /dev/null
+++ b/ui/components/component-library/label/label.stories.js
@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+import {
+  DISPLAY,
+  FLEX_DIRECTION,
+  COLORS,
+  SIZES,
+  ALIGN_ITEMS,
+} from '../../../helpers/constants/design-system';
+
+import Box from '../../ui/box';
+import { Icon, ICON_NAMES } from '../icon';
+import { TextFieldBase } from '../text-field-base';
+
+import { Label } from './label';
+
+import README from './README.mdx';
+
+export default {
+  title: 'Components/ComponentLibrary/Label',
+  id: __filename,
+  component: Label,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    htmlFor: {
+      control: 'text',
+    },
+    required: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    children: {
+      control: 'text',
+    },
+    className: {
+      control: 'text',
+    },
+  },
+  args: {
+    children: 'Label',
+  },
+};
+
+const Template = (args) => <Label {...args} />;
+
+export const DefaultStory = Template.bind({});
+DefaultStory.storyName = 'Default';
+
+export const Children = (args) => (
+  <Box
+    display={DISPLAY.INLINE_FLEX}
+    flexDirection={FLEX_DIRECTION.COLUMN}
+    gap={2}
+  >
+    <Label {...args}>Plain text</Label>
+    <Label {...args} display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.FLEX_START}>
+      Text and icon
+      <Icon
+        color={COLORS.ICON_ALTERNATIVE}
+        name={ICON_NAMES.INFO_FILLED}
+        size={SIZES.AUTO}
+      />
+    </Label>
+    <Label
+      {...args}
+      display={DISPLAY.INLINE_FLEX}
+      flexDirection={FLEX_DIRECTION.COLUMN}
+      alignItems={ALIGN_ITEMS.FLEX_START}
+    >
+      Label that wraps an input
+      {/* TODO: replace with TextField component */}
+      <TextFieldBase placeholder="Click label to focus" />
+    </Label>
+  </Box>
+);
+
+export const HtmlFor = (args) => {
+  const [value, setValue] = useState('');
+  const handleOnChange = (e) => {
+    setValue(e.target.value);
+  };
+  return (
+    <Box display={DISPLAY.INLINE_FLEX} flexDirection={FLEX_DIRECTION.COLUMN}>
+      <Label {...args} />
+      <TextFieldBase
+        id="add-network"
+        value={value}
+        onChange={handleOnChange}
+        placeholder="Enter network name"
+      />
+    </Box>
+  );
+};
+HtmlFor.args = {
+  children: 'Network name',
+  htmlFor: 'add-network',
+};
+
+export const Required = Template.bind({});
+Required.args = {
+  required: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};
diff --git a/ui/components/component-library/label/label.test.js b/ui/components/component-library/label/label.test.js
new file mode 100644
index 000000000..44c703912
--- /dev/null
+++ b/ui/components/component-library/label/label.test.js
@@ -0,0 +1,67 @@
+/* eslint-disable jest/require-top-level-describe */
+import { fireEvent, render } from '@testing-library/react';
+import React from 'react';
+import { Icon, ICON_NAMES } from '../icon';
+import { TextFieldBase } from '../text-field-base';
+
+import { Label } from './label';
+
+describe('label', () => {
+  it('should render text inside the label', () => {
+    const { getByText } = render(<Label>label</Label>);
+    expect(getByText('label')).toBeDefined();
+  });
+  it('should render text and react nodes as children', () => {
+    const { getByText, getByTestId } = render(
+      <Label>
+        label
+        <Icon name={ICON_NAMES.INFO_FILLED} data-testid="icon" />
+      </Label>,
+    );
+    expect(getByText('label')).toBeDefined();
+    expect(getByTestId('icon')).toBeDefined();
+  });
+  it('should be able to accept an htmlFor prop and focus an input of a given id', () => {
+    const { getByText, getByRole } = render(
+      <>
+        <Label htmlFor="input">label</Label>
+        <TextFieldBase id="input" />
+      </>,
+    );
+    const input = getByRole('textbox');
+    const label = getByText('label');
+    expect(label).toBeDefined();
+    expect(input).not.toHaveFocus();
+    fireEvent.click(label);
+    expect(input).toHaveFocus();
+  });
+  it('should render when wrapping an input and focus input when clicked without htmlFor', () => {
+    const { getByText, getByRole } = render(
+      <>
+        <Label>
+          Label text
+          <TextFieldBase />
+        </Label>
+      </>,
+    );
+    const input = getByRole('textbox');
+    const label = getByText('Label text');
+    expect(label).toBeDefined();
+    expect(input).not.toHaveFocus();
+    fireEvent.click(label);
+    expect(input).toHaveFocus();
+  });
+  it('should render with required asterisk', () => {
+    const { getByText } = render(<Label required>label</Label>);
+    expect(getByText('label')).toBeDefined();
+    expect(getByText('*')).toBeDefined();
+  });
+  it('should render with disabled state and have disabled class', () => {
+    const { getByText } = render(<Label disabled>label</Label>);
+    expect(getByText('label')).toHaveClass('mm-label--disabled');
+  });
+  it('should render with additional className', () => {
+    const { getByText } = render(<Label className="test-class">label</Label>);
+    expect(getByText('label')).toHaveClass('test-class');
+  });
+});
diff --git a/ui/components/component-library/picker-network/README.mdx b/ui/components/component-library/picker-network/README.mdx
new file mode 100644
index 000000000..19e90d02f
--- /dev/null
+++ b/ui/components/component-library/picker-network/README.mdx
@@ -0,0 +1,47 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import { PickerNetwork } from './picker-network';
+
+# PickerNetwork
+
+The `PickerNetwork` is used for the action of changing a network.
+
+<Canvas>
+  <Story id="ui-components-component-library-picker-network-picker-network-stories-js--default-story" />
+</Canvas>
+
+## Props
+
+The `PickerNetwork` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props.
+
+<ArgsTable of={PickerNetwork} />
+
+### Src
+
+Use the `src` prop with an image url to render the `AvatarNetwork`.
+
+<Canvas>
+  <Story id="ui-components-component-library-picker-network-picker-network-stories-js--src" />
+</Canvas>
+
+```jsx
+import { PickerNetwork } from '../../ui/component-library/picker-network';
+  <PickerNetwork src="./images/arbitrum.svg" />
+  <PickerNetwork src="./images/matic-token.png" />
+  <PickerNetwork src="./images/optimism.svg" />
+```
+
+### Label
+
+Use the `label` prop for the text content of the `PickerNetwork` component
+
+<Canvas>
+  <Story id="ui-components-component-library-picker-network-picker-network-stories-js--label" />
+</Canvas>
+
+```jsx
+import { PickerNetwork } from '../../ui/component-library/picker-network';
+  <PickerNetwork label="Arbitrum One" />
+  <PickerNetwork label="Polygon Mainnet" />
+  <PickerNetwork label="Optimism" />
+```
\ No newline at end of file
diff --git a/ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap b/ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap
new file mode 100644
index 000000000..5991eb25e
--- /dev/null
+++ b/ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PickerNetwork should render the label inside the PickerNetwork 1`] = `
+<div>
+  <button
+    class="box mm-picker-network box--padding-right-4 box--padding-left-2 box--display-inline-flex box--gap-2 box--flex-direction-row box--align-items-center box--background-color-background-default box--rounded-pill box--border-color-border-default box--border-width-1 box--border-style-solid"
+    data-testid="picker-network"
+  >
+    <div
+      class="box base-avatar base-avatar--size-xs avatar-network mm-picker-network__avatar-network box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--border-color-transparent box--border-style-solid box--border-width-1"
+    >
+      I
+    </div>
+    <p
+      class="box text text--body-sm text--color-text-default box--flex-direction-row"
+    >
+      Imported
+    </p>
+    <div
+      class="box mm-picker-network__arrow-down-icon icon icon--size-xs box--flex-direction-row box--color-icon-default"
+      style="mask-image: url('./images/icons/icon-undefined.svg;"
+    />
+  </button>
+</div>
+`;
diff --git a/ui/components/component-library/picker-network/index.js b/ui/components/component-library/picker-network/index.js
new file mode 100644
index 000000000..469bf6962
--- /dev/null
+++ b/ui/components/component-library/picker-network/index.js
@@ -0,0 +1 @@
+export { PickerNetwork } from './picker-network';
diff --git a/ui/components/component-library/picker-network/picker-network.js b/ui/components/component-library/picker-network/picker-network.js
new file mode 100644
index 000000000..1719630c7
--- /dev/null
+++ b/ui/components/component-library/picker-network/picker-network.js
@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { AvatarNetwork } from '../avatar-network';
+import { Icon, ICON_NAMES } from '../icon';
+import { Text } from '../text';
+import Box from '../../ui/box';
+import {
+  ALIGN_ITEMS,
+  COLORS,
+  DISPLAY,
+  SIZES,
+  BORDER_RADIUS,
+  TEXT,
+} from '../../../helpers/constants/design-system';
+
+export const PickerNetwork = ({
+  className,
+  avatarNetworkProps,
+  iconProps,
+  label,
+  src,
+  ...props
+}) => {
+  return (
+    <Box
+      className={classnames('mm-picker-network', className)}
+      as="button"
+      backgroundColor={COLORS.BACKGROUND_DEFAULT}
+      borderColor={COLORS.BORDER_DEFAULT}
+      borderWidth={1}
+      alignItems={ALIGN_ITEMS.CENTER}
+      paddingLeft={2}
+      paddingRight={4}
+      gap={2}
+      borderRadius={BORDER_RADIUS.PILL}
+      display={DISPLAY.INLINE_FLEX}
+      {...props}
+    >
+      <AvatarNetwork
+        className="mm-picker-network__avatar-network"
+        networkImageUrl={src}
+        networkName={label}
+        size={SIZES.XS}
+        {...avatarNetworkProps}
+      />
+      <Text variant={TEXT.BODY_SM}>{label}</Text>
+      <Icon
+        className="mm-picker-network__arrow-down-icon"
+        name={ICON_NAMES.ARROW_DOWN}
+        color={COLORS.ICON_DEFAULT}
+        size={SIZES.XS}
+        {...iconProps}
+      />
+    </Box>
+  );
+};
+
+PickerNetwork.propTypes = {
+  /**
+   * The src accepts the string of the image to be rendered
+   */
+  src: PropTypes.string,
+  /**
+   * An additional className to apply to the PickerNetwork.
+   */
+  className: PropTypes.string,
+  /**
+   * It accepts all the props from AvatarNetwork
+   */
+  avatarNetworkProps: PropTypes.shape(AvatarNetwork.PropTypes),
+  /**
+   * It accepts all the props from Icon
+   */
+  iconProps: PropTypes.shape(Icon.PropTypes),
+  /**
+   * The text content of the PickerNetwork component
+   */
+  label: PropTypes.string.isRequired,
+  /**
+   * PickerNetwork accepts all the props from Box
+   */
+  ...Box.propTypes,
+};
diff --git a/ui/components/component-library/picker-network/picker-network.scss b/ui/components/component-library/picker-network/picker-network.scss
new file mode 100644
index 000000000..f96edf782
--- /dev/null
+++ b/ui/components/component-library/picker-network/picker-network.scss
@@ -0,0 +1,6 @@
+.mm-picker-network {
+  --picker-network-height: 32px;
+
+  max-width: fit-content;
+  height: var(--picker-network-height);
+}
diff --git a/ui/components/component-library/picker-network/picker-network.stories.js b/ui/components/component-library/picker-network/picker-network.stories.js
new file mode 100644
index 000000000..eb5b25c7e
--- /dev/null
+++ b/ui/components/component-library/picker-network/picker-network.stories.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import {
+  DISPLAY,
+  FLEX_DIRECTION,
+} from '../../../helpers/constants/design-system';
+
+import Box from '../../ui/box';
+import README from './README.mdx';
+import { PickerNetwork } from './picker-network';
+
+export default {
+  title: 'Components/ComponentLibrary/PickerNetwork',
+  id: __filename,
+  component: PickerNetwork,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+    },
+    src: {
+      control: 'text',
+    },
+  },
+  args: {
+    label: 'Avalanche C-Chain',
+    src: './images/avax-token.png',
+  },
+};
+
+export const DefaultStory = (args) => <PickerNetwork {...args} />;
+
+export const Label = (args) => (
+  <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
+    <PickerNetwork {...args} label="Arbitrum One" />
+    <PickerNetwork {...args} label="Polygon Mainnet" />
+    <PickerNetwork {...args} label="Optimism" />
+  </Box>
+);
+
+export const Src = (args) => (
+  <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
+    <PickerNetwork {...args} label="Arbitrum One" src="./images/arbitrum.svg" />
+    <PickerNetwork
+      {...args}
+      label="Polygon Mainnet"
+      src="./images/matic-token.png"
+    />
+    <PickerNetwork {...args} label="Optimism" src="./images/optimism.svg" />
+  </Box>
+);
+
+DefaultStory.storyName = 'Default';
diff --git a/ui/components/component-library/picker-network/picker-network.test.js b/ui/components/component-library/picker-network/picker-network.test.js
new file mode 100644
index 000000000..878b5b968
--- /dev/null
+++ b/ui/components/component-library/picker-network/picker-network.test.js
@@ -0,0 +1,57 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { PickerNetwork } from './picker-network';
+
+describe('PickerNetwork', () => {
+  it('should render the label inside the PickerNetwork', () => {
+    const { getByTestId, container } = render(
+      <PickerNetwork data-testid="picker-network" label="Imported" />,
+    );
+    expect(getByTestId('picker-network')).toBeDefined();
+    expect(getByTestId('picker-network')).toHaveTextContent('Imported');
+    expect(container).toMatchSnapshot();
+  });
+  it('should render correct Avatar inside Picker Network', () => {
+    render(
+      <PickerNetwork
+        data-testid="picker-network"
+        label="Imported"
+        src="./images/matic-token.png"
+      />,
+    );
+    const image = screen.getByRole('img');
+    expect(image).toBeDefined();
+    expect(image).toHaveAttribute('src', './images/matic-token.png');
+  });
+  it('should render avatar network inside the PickerNetwork with custom props', () => {
+    const container = (
+      <PickerNetwork
+        data-testid="picker-network"
+        label="Imported"
+        avatarNetworkProps={{
+          name: 'matic network',
+        }}
+      />
+    );
+
+    expect(container.props.avatarNetworkProps.name).toStrictEqual(
+      'matic network',
+    );
+  });
+  it('should render down arrow icon inside the PickerNetwork with custom props', () => {
+    const container = (
+      <PickerNetwork
+        data-testid="picker-network"
+        label="Imported"
+        iconProps={{
+          name: 'down-arrow-picker-icon',
+        }}
+      />
+    );
+
+    expect(container.props.iconProps.name).toStrictEqual(
+      'down-arrow-picker-icon',
+    );
+  });
+});
diff --git a/ui/components/component-library/tag-url/README.mdx b/ui/components/component-library/tag-url/README.mdx
new file mode 100644
index 000000000..9fda9d129
--- /dev/null
+++ b/ui/components/component-library/tag-url/README.mdx
@@ -0,0 +1,70 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import { TagUrl } from './tag-url';
+
+# Tag Url
+
+The `TagUrl` is a component used to display dApp information within a container.
+
+<Canvas>
+  <Story id="ui-components-component-library-tag-url-tag-url-stories-js--default-story" />
+</Canvas>
+
+## Props
+
+The `TagUrl` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props.
+
+<ArgsTable of={TagUrl} />
+
+### Src
+
+Use the `src` prop with an image url to render the `AvatarFavicon`.
+
+<Canvas>
+  <Story id="ui-components-component-library-tag-url-tag-url-stories-js--src" />
+</Canvas>
+
+```jsx
+
+import { TagUrl } from '../../ui/component-library/tag-url';
+
+  <TagUrl src="https://peepeth.com/favicon-32x32.png" />
+  <TagUrl src="https://1inch.exchange/assets/favicon/favicon-32x32.png"/>
+  <TagUrl src="https://uniswap.org/favicon.ico" />
+
+```
+
+### Label
+
+Use the `label` prop for the text content of the `TagUrl` component
+
+<Canvas>
+  <Story id="ui-components-component-library-tag-url-tag-url-stories-js--label" />
+</Canvas>
+
+```jsx
+
+import { TagUrl } from '../../ui/component-library/tag-url';
+
+  <TagUrl label="https://widget.getacute.io" />
+  <TagUrl label="app.uniswap.org" />
+  <TagUrl label="https://metamask.github.io" />
+
+```
+
+### Action Button Label
+
+If we want to have a button in `TagUrl` component. You can update the `ButtonLink` component props used for the action button using `actionButtonProps`
+
+<Canvas>
+  <Story id="ui-components-component-library-tag-url-tag-url-stories-js--action-button-label" />
+</Canvas>
+
+### Show Lock Icon
+
+Use the `showLockIcon` prop to render a lock icon next to the `label`. It's intended use is to display if the url uses `https`. Props for the lock icon can be changed using the `lockIconProps`.
+
+<Canvas>
+  <Story id="ui-components-component-library-tag-url-tag-url-stories-js--show-lock-icon" />
+</Canvas>
+
diff --git a/ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap b/ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap
new file mode 100644
index 000000000..cb6d742d9
--- /dev/null
+++ b/ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TagUrl should render the label inside the TagUrl 1`] = `
+<div>
+  <div
+    class="box mm-tag-url box--padding-right-4 box--padding-left-2 box--display-inline-flex box--gap-2 box--flex-direction-row box--align-items-center box--background-color-background-default box--rounded-pill box--border-color-border-default box--border-width-1 box--border-style-solid"
+    data-testid="tag-url"
+  >
+    <div
+      class="box base-avatar base-avatar--size-md avatar-favicon box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--border-color-transparent box--border-style-solid box--border-width-1"
+    >
+      <div
+        aria-label="avatar-favicon"
+        class="box icon icon--size-md box--flex-direction-row box--color-icon-default"
+        style="mask-image: url('./images/icons/icon-undefined.svg;"
+      />
+    </div>
+    <p
+      class="box text text--body-md text--ellipsis text--color-text-default box--flex-direction-row"
+    >
+      https://app.uniswap.org
+    </p>
+  </div>
+</div>
+`;
diff --git a/ui/components/component-library/tag-url/index.js b/ui/components/component-library/tag-url/index.js
new file mode 100644
index 000000000..22cfa76ba
--- /dev/null
+++ b/ui/components/component-library/tag-url/index.js
@@ -0,0 +1 @@
+export { TagUrl } from './tag-url';
diff --git a/ui/components/component-library/tag-url/tag-url.js b/ui/components/component-library/tag-url/tag-url.js
new file mode 100644
index 000000000..df95f579d
--- /dev/null
+++ b/ui/components/component-library/tag-url/tag-url.js
@@ -0,0 +1,115 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import Box from '../../ui/box/box';
+import { Text } from '../text';
+import {
+  ALIGN_ITEMS,
+  BORDER_RADIUS,
+  COLORS,
+  DISPLAY,
+  SIZES,
+  TEXT,
+} from '../../../helpers/constants/design-system';
+import { AvatarFavicon } from '../avatar-favicon';
+import { ButtonLink } from '../button-link';
+import { Icon, ICON_NAMES } from '../icon';
+
+export const TagUrl = ({
+  label,
+  labelProps,
+  actionButtonLabel,
+  actionButtonProps,
+  src,
+  showLockIcon,
+  avatarFaviconProps,
+  lockIconProps,
+  className,
+  ...props
+}) => {
+  return (
+    <Box
+      className={classnames('mm-tag-url', className)}
+      backgroundColor={COLORS.BACKGROUND_DEFAULT}
+      borderColor={COLORS.BORDER_DEFAULT}
+      borderWidth={1}
+      alignItems={ALIGN_ITEMS.CENTER}
+      paddingLeft={2}
+      paddingRight={4}
+      gap={2}
+      borderRadius={BORDER_RADIUS.PILL}
+      display={DISPLAY.INLINE_FLEX}
+      {...props}
+    >
+      <AvatarFavicon imageSource={src} {...avatarFaviconProps} />
+      {showLockIcon && (
+        <Icon
+          className="tag-url__lock-icon"
+          name={ICON_NAMES.LOCK_FILLED}
+          color={COLORS.ICON_ALTERNATIVE}
+          size={SIZES.SM}
+          aria-label="https://"
+          {...lockIconProps}
+        />
+      )}
+      <Text variant={TEXT.BODY_MD} ellipsis {...labelProps}>
+        {label}
+      </Text>
+
+      {actionButtonLabel && (
+        <ButtonLink
+          as="a"
+          size={SIZES.SM}
+          paddingLeft={0}
+          paddingRight={0}
+          marginLeft={2}
+          marginRight={2}
+          {...actionButtonProps}
+        >
+          {actionButtonLabel}
+        </ButtonLink>
+      )}
+    </Box>
+  );
+};
+
+TagUrl.propTypes = {
+  /**
+   * The src accepts the string of the image to be rendered
+   */
+  src: PropTypes.string,
+  /**
+   * The showLockIcon accepts a boolean prop to render the lock icon instead of https in label
+   */
+  showLockIcon: PropTypes.bool,
+  /**
+   * It accepts all the props from Avatar Favicon
+   */
+  avatarFaviconProps: PropTypes.shape(AvatarFavicon.PropTypes),
+  /**
+   * It accepts all the props from Icon
+   */
+  lockIconProps: PropTypes.shape(Icon.PropTypes),
+  /**
+   * The text content of the TagUrl component
+   */
+  label: PropTypes.string.isRequired,
+  /**
+   * It accepts all the props from Text Component
+   */
+  labelProps: PropTypes.shape(Text.PropTypes),
+  /**
+   * If we want a button in TagUrl component.
+   */
+  actionButtonLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * It accepts all the props from ButtonLink
+   */
+  actionButtonProps: PropTypes.shape(ButtonLink.PropTypes),
+  /**
+   * Additional classNames to be added to the TagUrl component
+   */
+  className: PropTypes.string,
+};
+
+export default TagUrl;
diff --git a/ui/components/component-library/tag-url/tag-url.scss b/ui/components/component-library/tag-url/tag-url.scss
new file mode 100644
index 000000000..4f875ac46
--- /dev/null
+++ b/ui/components/component-library/tag-url/tag-url.scss
@@ -0,0 +1,4 @@
+.mm-tag-url {
+  height: 48px;
+  max-width: fit-content;
+}
diff --git a/ui/components/component-library/tag-url/tag-url.stories.js b/ui/components/component-library/tag-url/tag-url.stories.js
new file mode 100644
index 000000000..5f4552eb1
--- /dev/null
+++ b/ui/components/component-library/tag-url/tag-url.stories.js
@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  DISPLAY,
+  FLEX_DIRECTION,
+} from '../../../helpers/constants/design-system';
+
+import Box from '../../ui/box';
+import README from './README.mdx';
+import { TagUrl } from './tag-url';
+
+export default {
+  title: 'Components/ComponentLibrary/TagUrl',
+  id: __filename,
+  component: TagUrl,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+    },
+    src: {
+      control: 'text',
+    },
+    actionButtonLabel: {
+      control: 'text',
+    },
+    showLockIcon: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    label: 'app.uniswap.org',
+    src: 'https://uniswap.org/favicon.ico',
+    showLockIcon: false,
+  },
+};
+
+const Template = (args) => <TagUrl {...args} />;
+
+export const DefaultStory = Template.bind({});
+DefaultStory.storyName = 'Default';
+
+export const ActionButtonLabel = Template.bind({});
+ActionButtonLabel.args = {
+  actionButtonLabel: 'Permissions',
+};
+
+export const ShowLockIcon = Template.bind({});
+ShowLockIcon.args = {
+  showLockIcon: true,
+};
+
+export const Label = (args) => (
+  <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
+    <TagUrl {...args} label="https://widget.getacute.io" />
+    <TagUrl {...args} label="app.uniswap.org" />
+    <TagUrl {...args} label="https://metamask.github.io" />
+  </Box>
+);
+
+export const Src = (args) => (
+  <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
+    <TagUrl
+      {...args}
+      label="peepeth.com"
+      src="https://peepeth.com/favicon-32x32.png"
+    />
+    <TagUrl
+      {...args}
+      label="https://1inch.exchange"
+      src="https://1inch.exchange/assets/favicon/favicon-32x32.png"
+    />
+    <TagUrl
+      {...args}
+      label="app.uniswap.org"
+      src="https://uniswap.org/favicon.ico"
+    />
+  </Box>
+);
diff --git a/ui/components/component-library/tag-url/tag-url.test.js b/ui/components/component-library/tag-url/tag-url.test.js
new file mode 100644
index 000000000..78ca82c2d
--- /dev/null
+++ b/ui/components/component-library/tag-url/tag-url.test.js
@@ -0,0 +1,108 @@
+/* eslint-disable jest/require-top-level-describe */
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { TagUrl } from './tag-url';
+
+describe('TagUrl', () => {
+  it('should render the label inside the TagUrl', () => {
+    const { getByTestId, container } = render(
+      <TagUrl data-testid="tag-url" label="https://app.uniswap.org" />,
+    );
+    expect(getByTestId('tag-url')).toBeDefined();
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render the button if there is a actionButtonLabel inside the tag', () => {
+    render(
+      <TagUrl
+        data-testid="tag-url"
+        label="https://app.uniswap.org"
+        actionButtonLabel="Permissions"
+      />,
+    );
+
+    expect(screen.getByText('Permissions').closest('a')).toBeDefined();
+  });
+
+  it('should render correct Avatar in TagUrl', () => {
+    render(
+      <TagUrl
+        data-testid="tag-url"
+        label="https://app.uniswap.org"
+        actionButtonLabel="Permissions"
+        src="https://1inch.exchange/assets/favicon/favicon-32x32.png"
+      />,
+    );
+    const image = screen.getByRole('img');
+    expect(image).toBeDefined();
+    expect(image).toHaveAttribute(
+      'src',
+      'https://1inch.exchange/assets/favicon/favicon-32x32.png',
+    );
+  });
+
+  it('should render lock icon if showLockIcon is true', () => {
+    const { container } = render(
+      <TagUrl
+        data-testid="tag-url"
+        label="https://app.uniswap.org"
+        actionButtonLabel="Permissions"
+        showLockIcon
+      />,
+    );
+
+    expect(container.getElementsByClassName('tag-url__lock-icon')).toHaveLength(
+      1,
+    );
+  });
+
+  it('should render avatar with custom props', () => {
+    const container = (
+      <TagUrl
+        data-testid="tag-url"
+        label="https://app.uniswap.org"
+        actionButtonLabel="Permissions"
+        avatarFaviconProps={{
+          'data-testid': 'fallback avatar',
+        }}
+      />
+    );
+
+    expect(container.props.avatarFaviconProps['data-testid']).toStrictEqual(
+      'fallback avatar',
+    );
+  });
+
+  it('should render Text inside Tag url with custom label props', () => {
+    const container = (
+      <TagUrl
+        data-testid="tag-url"
+        label="https://app.uniswap.org"
+        actionButtonLabel="Permissions"
+        labelProps={{
+          className: 'tag-url label',
+        }}
+      />
+    );
+
+    expect(container.props.labelProps.className).toStrictEqual('tag-url label');
+  });
+
+  it('should render Button with custom label props', () => {
+    const container = (
+      <TagUrl
+        data-testid="tag-url"
+        label="https://app.uniswap.org"
+        actionButtonLabel="Permissions"
+        actionButtonProps={{
+          className: 'tag-url button',
+        }}
+      />
+    );
+
+    expect(container.props.actionButtonProps.className).toStrictEqual(
+      'tag-url button',
+    );
+  });
+});
diff --git a/ui/components/component-library/tag/README.mdx b/ui/components/component-library/tag/README.mdx
index 6d85e9e73..8892612c8 100644
--- a/ui/components/component-library/tag/README.mdx
+++ b/ui/components/component-library/tag/README.mdx
@@ -19,3 +19,7 @@ The `Tag` accepts all props below as well as all [Box](/docs/ui-components-ui-bo
 ### Label
 
 The text content of the `Tag` component
+
+<Canvas>
+  <Story id="ui-components-component-library-tag-tag-stories-js--label" />
+</Canvas>
\ No newline at end of file
diff --git a/ui/components/component-library/tag/__snapshots__/tag.test.js.snap b/ui/components/component-library/tag/__snapshots__/tag.test.js.snap
new file mode 100644
index 000000000..1cb53b117
--- /dev/null
+++ b/ui/components/component-library/tag/__snapshots__/tag.test.js.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tag should render the label inside the tag and match snapshot 1`] = `
+<div>
+  <div
+    class="box mm-tag box--padding-right-1 box--padding-left-1 box--display-inline-block box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-default box--rounded-pill box--border-color-border-default box--border-width-1 box--border-style-solid"
+    data-testid="tag"
+  >
+    <p
+      class="box text text--body-sm text--color-text-default box--flex-direction-row"
+    >
+      Imported
+    </p>
+  </div>
+</div>
+`;
diff --git a/ui/components/component-library/tag/tag.js b/ui/components/component-library/tag/tag.js
index 9836c5649..5bdf52622 100644
--- a/ui/components/component-library/tag/tag.js
+++ b/ui/components/component-library/tag/tag.js
@@ -15,7 +15,7 @@ import {
 export const Tag = ({ label, className, labelProps, ...props }) => {
   return (
     <Box
-      className={classnames('tag', className)}
+      className={classnames('mm-tag', className)}
       backgroundColor={COLORS.BACKGROUND_DEFAULT}
       borderColor={COLORS.BORDER_DEFAULT}
       borderWidth={1}
@@ -47,4 +47,8 @@ Tag.propTypes = {
    * Additional classNames to be added to the Tag component
    */
   className: PropTypes.string,
+  /**
+   * Tag also accepts all props from Box
+   */
+  ...Box.propTypes,
 };
diff --git a/ui/components/component-library/tag/tag.scss b/ui/components/component-library/tag/tag.scss
index 1a98cdf71..77620796c 100644
--- a/ui/components/component-library/tag/tag.scss
+++ b/ui/components/component-library/tag/tag.scss
@@ -1,4 +1,4 @@
-.tag {
+.mm-tag {
   height: auto;
   width: max-content;
   padding-top: 1px;
diff --git a/ui/components/component-library/tag/tag.stories.js b/ui/components/component-library/tag/tag.stories.js
index eb2d6c595..fc41e4d17 100644
--- a/ui/components/component-library/tag/tag.stories.js
+++ b/ui/components/component-library/tag/tag.stories.js
@@ -24,3 +24,9 @@ export default {
 export const DefaultStory = (args) => <Tag {...args} />;
 
 DefaultStory.storyName = 'Default';
+
+export const Label = (args) => <Tag {...args}>Anchor Element</Tag>;
+
+Label.args = {
+  label: 'Label Story',
+};
diff --git a/ui/components/component-library/tag/tag.test.js b/ui/components/component-library/tag/tag.test.js
index c4ed72186..dd5000ebc 100644
--- a/ui/components/component-library/tag/tag.test.js
+++ b/ui/components/component-library/tag/tag.test.js
@@ -5,9 +5,12 @@ import React from 'react';
 import { Tag } from './tag';
 
 describe('Tag', () => {
-  it('should render the label inside the tag', () => {
-    const { getByTestId } = render(<Tag data-testid="tag" label="Imported" />);
+  it('should render the label inside the tag and match snapshot', () => {
+    const { getByTestId, container } = render(
+      <Tag data-testid="tag" label="Imported" />,
+    );
     expect(getByTestId('tag')).toBeDefined();
     expect(getByTestId('tag')).toHaveTextContent('Imported');
+    expect(container).toMatchSnapshot();
   });
 });
diff --git a/ui/components/component-library/text-field-base/README.mdx b/ui/components/component-library/text-field-base/README.mdx
index 122b3e156..271ac5657 100644
--- a/ui/components/component-library/text-field-base/README.mdx
+++ b/ui/components/component-library/text-field-base/README.mdx
@@ -35,7 +35,7 @@ Defaults to `md`
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library/text-field-base';
+import { TextFieldBase } from '../../ui/components/component-library';
 import { SIZES } from '../../../helpers/constants/design-system';
 
 <TextFieldBase size={SIZES.SM} />
@@ -60,7 +60,7 @@ Defaults to `text`.
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library/text-field-base';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase type="text" /> // (Default)
 <TextFieldBase type="number" />
@@ -76,7 +76,7 @@ Use the `truncate` prop to truncate the text of the the `TextFieldBase`. Default
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library/text-field-base';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase truncate />; // truncate is set to `true` by default
 <TextFieldBase truncate={false} />;
@@ -92,9 +92,9 @@ Use the `leftAccessory` and `rightAccessory` props to add components such as ico
 
 ```jsx
 import { COLORS, SIZES, DISPLAY } from '../../../helpers/constants/design-system';
-import { Icon, ICON_NAMES } from '../../ui/component-library/icons';
+import { Icon, ICON_NAMES } from '../../ui/components/component-library';
 
-import { TextFieldBase } from '../../ui/component-library/text-field';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase
   placeholder="Search"
@@ -156,7 +156,7 @@ Use the `inputRef` prop to access the ref of the `<input />` html element of `Te
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library/text-field-base';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 const inputRef = useRef(null);
 const [value, setValue] = useState('');
@@ -188,6 +188,61 @@ const handleOnChange = (e) => {
 </Box>
 ```
 
+### Input Component
+
+Use the `InputComponent` prop change the component used for the input element. This is useful for replacing the base input with a custom input while retaining the functionality of the `TextFieldBase`.
+
+Defaults to the [Text](/docs/ui-components-component-library-text-text-stories-js--default-story) component
+
+To function fully the custom component should accept the following props:
+
+- `aria-invalid`
+- `as`
+- `autoComplete`
+- `autoFocus`
+- `backgroundColor`
+- `defaultValue`
+- `disabled`
+- `focused`
+- `id`
+- `margin`
+- `maxLength`
+- `name`
+- `onBlur`
+- `onChange`
+- `onFocus`
+- `padding`
+- `paddingLeft`
+- `paddingRight`
+- `placeholder`
+- `readOnly`
+- `ref`
+- `required`
+- `value`
+- `variant`
+- `type`
+
+<Canvas>
+  <Story id="ui-components-component-library-text-field-base-text-field-base-stories-js--input-component" />
+</Canvas>
+
+```jsx
+import { TextFieldBase, Icon, ICON_NAMES } from '../../ui/component-library';
+
+// should map the props to the custom input component
+const CustomInputComponent = () => <div>{/* Custom input component */}</div>;
+
+const TextFieldCustomInput = (args) => (
+  <TextFieldBase
+    size={SIZES.LG}
+    InputComponent={CustomInputComponent}
+    leftAccessory={
+      <Icon color={COLORS.ICON_ALTERNATIVE} name={ICON_NAMES.WALLET_FILLED} />
+    }
+  />
+);
+```
+
 ### Auto Complete
 
 Use the `autoComplete` prop to set the autocomplete html attribute. It allows the browser to predict the value based on earlier typed values.
@@ -197,7 +252,7 @@ Use the `autoComplete` prop to set the autocomplete html attribute. It allows th
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library/text-field-base';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase type="password" autoComplete />;
 ```
@@ -211,7 +266,7 @@ Use the `autoFocus` prop to focus the `TextFieldBase` during the first mount
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library/text-field-base';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase autoFocus />;
 ```
@@ -225,7 +280,7 @@ Use the `defaultValue` prop to set the default value of the `TextFieldBase`
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library/text-field-base';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase defaultValue="default value" />;
 ```
@@ -239,7 +294,7 @@ Use the `disabled` prop to set the disabled state of the `TextFieldBase`
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library/text-field-base';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase disabled />;
 ```
@@ -253,7 +308,7 @@ Use the `error` prop to set the error state of the `TextFieldBase`
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library/text-field-base';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase error />;
 ```
@@ -267,7 +322,7 @@ Use the `maxLength` prop to set the maximum allowed input characters for the `Te
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library/text-field-base';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase maxLength={10} />;
 ```
@@ -281,7 +336,7 @@ Use the `readOnly` prop to set the `TextFieldBase` to read only. When `readOnly`
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library/text-field-base';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase readOnly />;
 ```
@@ -295,7 +350,7 @@ Use the `required` prop to set the `TextFieldBase` to required. Currently there
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library/text-field-base';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 // Currently no visual difference
 <TextFieldBase required />;
diff --git a/ui/components/component-library/text-field-base/text-field-base.constants.js b/ui/components/component-library/text-field-base/text-field-base.constants.js
index decdb364a..c78ca02ea 100644
--- a/ui/components/component-library/text-field-base/text-field-base.constants.js
+++ b/ui/components/component-library/text-field-base/text-field-base.constants.js
@@ -9,4 +9,5 @@ export const TEXT_FIELD_BASE_TYPES = {
   TEXT: 'text',
   NUMBER: 'number',
   PASSWORD: 'password',
+  SEARCH: 'search',
 };
diff --git a/ui/components/component-library/text-field-base/text-field-base.js b/ui/components/component-library/text-field-base/text-field-base.js
index d672f3700..1bddc86e0 100644
--- a/ui/components/component-library/text-field-base/text-field-base.js
+++ b/ui/components/component-library/text-field-base/text-field-base.js
@@ -44,6 +44,7 @@ export const TextFieldBase = ({
   type = 'text',
   truncate = true,
   value,
+  InputComponent = Text,
   ...props
 }) => {
   const internalInputRef = useRef(null);
@@ -107,13 +108,13 @@ export const TextFieldBase = ({
       alignItems={ALIGN_ITEMS.CENTER}
       borderWidth={1}
       borderRadius={SIZES.SM}
-      paddingLeft={4}
-      paddingRight={4}
+      paddingLeft={leftAccessory ? 4 : 0}
+      paddingRight={rightAccessory ? 4 : 0}
       onClick={handleClick}
       {...props}
     >
       {leftAccessory}
-      <Text
+      <InputComponent
         aria-invalid={error}
         as="input"
         autoComplete={autoComplete ? 'on' : 'off'}
@@ -130,8 +131,8 @@ export const TextFieldBase = ({
         onChange={onChange}
         onFocus={handleFocus}
         padding={0}
-        paddingLeft={leftAccessory ? 2 : null}
-        paddingRight={leftAccessory ? 2 : null}
+        paddingLeft={leftAccessory ? 2 : 4}
+        paddingRight={rightAccessory ? 2 : 4}
         placeholder={placeholder}
         readOnly={readOnly}
         ref={handleInputRef}
@@ -154,7 +155,7 @@ TextFieldBase.propTypes = {
   /**
    * Autocomplete allows the browser to predict the value based on earlier typed values
    */
-  autoComplete: PropTypes.string,
+  autoComplete: PropTypes.bool,
   /**
    * If `true`, the input will be focused during the first mount.
    */
@@ -179,6 +180,11 @@ TextFieldBase.propTypes = {
    * The id of the `input` element.
    */
   id: PropTypes.string,
+  /**
+   * The the component that is rendered as the input
+   * Defaults to the Text component
+   */
+  InputComponent: PropTypes.elementType,
   /**
    * Attributes applied to the `input` element.
    */
diff --git a/ui/components/component-library/text-field-base/text-field-base.stories.js b/ui/components/component-library/text-field-base/text-field-base.stories.js
index 9169a5f21..7b7117832 100644
--- a/ui/components/component-library/text-field-base/text-field-base.stories.js
+++ b/ui/components/component-library/text-field-base/text-field-base.stories.js
@@ -351,6 +351,90 @@ export const InputRef = (args) => {
   );
 };
 
+const CustomInputComponent = ({
+  as,
+  autoComplete,
+  autoFocus,
+  defaultValue,
+  disabled,
+  focused,
+  id,
+  maxLength,
+  name,
+  onBlur,
+  onChange,
+  onFocus,
+  padding,
+  paddingLeft,
+  paddingRight,
+  placeholder,
+  readOnly,
+  ref,
+  required,
+  value,
+  variant,
+  type,
+  className,
+  'aria-invalid': ariaInvalid,
+  ...props
+}) => {
+  return (
+    <Box
+      display={DISPLAY.FLEX}
+      flexDirection={FLEX_DIRECTION.COLUMN}
+      {...{ padding, paddingLeft, paddingRight, ...props }}
+    >
+      <Box display={DISPLAY.INLINE_FLEX}>
+        <Text
+          style={{ padding: 0 }}
+          aria-invalid={ariaInvalid}
+          {...{
+            as,
+            className,
+            autoComplete,
+            autoFocus,
+            defaultValue,
+            disabled,
+            focused,
+            id,
+            maxLength,
+            name,
+            onBlur,
+            onChange,
+            onFocus,
+            placeholder,
+            readOnly,
+            ref,
+            required,
+            value,
+            variant,
+            type,
+          }}
+        />
+        <Text variant={TEXT.BODY_XS} color={COLORS.TEXT_ALTERNATIVE}>
+          GoerliETH
+        </Text>
+      </Box>
+      <Text variant={TEXT.BODY_XS}>No conversion rate available</Text>
+    </Box>
+  );
+};
+
+CustomInputComponent.propTypes = { ...TextFieldBase.propTypes };
+
+export const InputComponent = (args) => (
+  <TextFieldBase
+    {...args}
+    placeholder="0"
+    type="number"
+    size={SIZES.LG}
+    InputComponent={CustomInputComponent}
+    leftAccessory={
+      <Icon color={COLORS.ICON_ALTERNATIVE} name={ICON_NAMES.WALLET_FILLED} />
+    }
+  />
+);
+
 export const AutoComplete = Template.bind({});
 AutoComplete.args = {
   autoComplete: true,
diff --git a/ui/components/component-library/text-field-base/text-field-base.test.js b/ui/components/component-library/text-field-base/text-field-base.test.js
index 1fdd92fb0..e032a6a5e 100644
--- a/ui/components/component-library/text-field-base/text-field-base.test.js
+++ b/ui/components/component-library/text-field-base/text-field-base.test.js
@@ -2,9 +2,10 @@
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
 import { SIZES } from '../../../helpers/constants/design-system';
 
+import Box from '../../ui/box';
+
 import { TextFieldBase } from './text-field-base';
 
 describe('TextFieldBase', () => {
@@ -188,11 +189,7 @@ describe('TextFieldBase', () => {
   });
   it('should render with error className when error is true', () => {
     const { getByTestId } = render(
-      <TextFieldBase
-        error
-        value="error value"
-        data-testid="text-field-base-error"
-      />,
+      <TextFieldBase error data-testid="text-field-base-error" />,
     );
     expect(getByTestId('text-field-base-error')).toHaveClass(
       'mm-text-field-base--error',
@@ -235,4 +232,23 @@ describe('TextFieldBase', () => {
       '',
     );
   });
+  it('should render with a custom input and still work', () => {
+    const CustomInputComponent = React.forwardRef((props, ref) => (
+      <Box ref={ref} as="input" {...props} />
+    ));
+    CustomInputComponent.displayName = 'CustomInputComponent'; // fixes eslint error
+    const { getByTestId } = render(
+      <TextFieldBase
+        InputComponent={CustomInputComponent}
+        inputProps={{ 'data-testid': 'text-field-base', className: 'test' }}
+      />,
+    );
+    const textFieldBase = getByTestId('text-field-base');
+
+    expect(textFieldBase.value).toBe(''); // initial value is empty string
+    fireEvent.change(textFieldBase, { target: { value: 'text value' } });
+    expect(textFieldBase.value).toBe('text value');
+    fireEvent.change(textFieldBase, { target: { value: '' } }); // reset value
+    expect(textFieldBase.value).toBe(''); // value is empty string after reset
+  });
 });
diff --git a/ui/components/component-library/text-field-search/README.mdx b/ui/components/component-library/text-field-search/README.mdx
new file mode 100644
index 000000000..71b6dca90
--- /dev/null
+++ b/ui/components/component-library/text-field-search/README.mdx
@@ -0,0 +1,92 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import { TextFieldSearch } from './text-field-search';
+
+# TextFieldSearch
+
+The `TextFieldSearch` allows users to enter text to search. It wraps the `TextField` component that adds a search icon to the left of the input.
+
+<Canvas>
+  <Story id="ui-components-component-library-text-field-search-text-field-search-stories-js--default-story" />
+</Canvas>
+
+## Props
+
+The `TextFieldSearch` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props), [TextField](/docs/ui-components-component-library-text-field-text-field-stories-js--default-story#props) component props
+
+<ArgsTable of={TextFieldSearch} />
+
+### Show Clear Button
+
+Use the `showClearButton` prop to display a clear button when `TextFieldSearch` has a value. Use the `clearButtonOnClick` prop to pass an `onClick` event handler to clear the value of the input.
+
+Defaults to `true`
+
+The clear button uses [ButtonIcon](/docs/ui-components-component-library-button-icon-button-icon-stories-js--default-story) and accepts all props from that component.
+
+**NOTE: The `showClearButton` only works with a controlled input.**
+
+<Canvas>
+  <Story id="ui-components-component-library-text-field-search-text-field-search-stories-js--show-clear-button" />
+</Canvas>
+
+```jsx
+import { TextFieldSearch } from '../../ui/component-library/text-field';
+
+const [value, setValue] = useState('show clear');
+
+const handleOnChange = (e) => {
+  setValue(e.target.value);
+};
+
+const handleOnClear = () => {
+  setValue('');
+};
+
+<TextFieldSearch
+  placeholder="Enter text to show clear"
+  value={value}
+  onChange={handleOnChange}
+  clearButtonOnClick={handleOnClear}
+/>;
+```
+
+### Clear Button Props
+
+Use the `clearButtonProps` to access other props of the clear button.
+
+<Canvas>
+  <Story id="ui-components-component-library-text-field-search-text-field-search-stories-js--clear-button-props" />
+</Canvas>
+
+```jsx
+import React, { useState } from 'react';
+import {
+  SIZES,
+  COLORS,
+  BORDER_RADIUS,
+} from '../../../helpers/constants/design-system';
+
+import { TextFieldSearch } from '../../ui/component-library/text-field';
+
+const [value, setValue] = useState('show clear');
+
+const handleOnChange = (e) => {
+  setValue(e.target.value);
+};
+
+const handleOnClear = () => {
+  setValue('');
+};
+
+<TextFieldSearch
+  value={value}
+  onChange={handleOnChange}
+  clearButtonOnClick={handleOnClear}
+  clearButtonProps={{
+    backgroundColor: COLORS.BACKGROUND_ALTERNATIVE,
+    borderRadius: BORDER_RADIUS.XS,
+    'data-testid': 'clear-button',
+  }}
+/>;
+```
diff --git a/ui/components/component-library/text-field-search/index.js b/ui/components/component-library/text-field-search/index.js
new file mode 100644
index 000000000..847665ddf
--- /dev/null
+++ b/ui/components/component-library/text-field-search/index.js
@@ -0,0 +1 @@
+export { TextFieldSearch } from './text-field-search';
diff --git a/ui/components/component-library/text-field-search/text-field-search.js b/ui/components/component-library/text-field-search/text-field-search.js
new file mode 100644
index 000000000..deccb7086
--- /dev/null
+++ b/ui/components/component-library/text-field-search/text-field-search.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import { SIZES } from '../../../helpers/constants/design-system';
+
+import { ButtonIcon } from '../button-icon';
+import { Icon, ICON_NAMES } from '../icon';
+import { TextFieldBase, TEXT_FIELD_BASE_TYPES } from '../text-field-base';
+import { TextField } from '../text-field';
+
+export const TextFieldSearch = ({
+  value,
+  onChange,
+  showClearButton = true,
+  clearButtonOnClick,
+  clearButtonProps,
+  className,
+  ...props
+}) => (
+  <TextField
+    className={classnames('mm-text-field-search', className)}
+    value={value}
+    onChange={onChange}
+    type={TEXT_FIELD_BASE_TYPES.SEARCH}
+    leftAccessory={<Icon name={ICON_NAMES.SEARCH_FILLED} size={SIZES.SM} />}
+    showClearButton={showClearButton}
+    clearButtonOnClick={clearButtonOnClick}
+    clearButtonProps={clearButtonProps}
+    {...props}
+  />
+);
+
+TextFieldSearch.propTypes = {
+  /**
+   * The value of the TextFieldSearch
+   */
+  value: TextFieldBase.propTypes.value,
+  /**
+   * The onChange handler of the TextFieldSearch
+   */
+  onChange: TextFieldBase.propTypes.onChange,
+  /**
+   * Show a clear button to clear the input
+   * Defaults to true
+   */
+  showClearButton: PropTypes.bool,
+  /**
+   * The onClick handler for the clear button
+   */
+  clearButtonOnClick: PropTypes.func,
+  /**
+   * The props to pass to the clear button
+   */
+  clearButtonProps: PropTypes.shape(ButtonIcon.PropTypes),
+  /**
+   * An additional className to apply to the TextFieldSearch
+   */
+  className: PropTypes.string,
+};
+
+TextFieldSearch.displayName = 'TextFieldSearch';
diff --git a/ui/components/component-library/text-field-search/text-field-search.scss b/ui/components/component-library/text-field-search/text-field-search.scss
new file mode 100644
index 000000000..78d53ba4f
--- /dev/null
+++ b/ui/components/component-library/text-field-search/text-field-search.scss
@@ -0,0 +1,5 @@
+.mm-text-field-search {
+  ::-webkit-search-cancel-button {
+    display: none; // hides the default search cancel button
+  }
+}
diff --git a/ui/components/component-library/text-field-search/text-field-search.stories.js b/ui/components/component-library/text-field-search/text-field-search.stories.js
new file mode 100644
index 000000000..903b4c6da
--- /dev/null
+++ b/ui/components/component-library/text-field-search/text-field-search.stories.js
@@ -0,0 +1,212 @@
+import React from 'react';
+import { useArgs } from '@storybook/client-api';
+
+import {
+  SIZES,
+  COLORS,
+  BORDER_RADIUS,
+} from '../../../helpers/constants/design-system';
+
+import { TEXT_FIELD_SIZES, TEXT_FIELD_TYPES } from '../text-field';
+
+import { TextFieldSearch } from './text-field-search';
+import README from './README.mdx';
+
+const marginSizeControlOptions = [
+  undefined,
+  0,
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+  11,
+  12,
+  'auto',
+];
+
+export default {
+  title: 'Components/ComponentLibrary/TextFieldSearch',
+  id: __filename,
+  component: TextFieldSearch,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    value: {
+      control: 'text',
+    },
+    onChange: {
+      action: 'onChange',
+    },
+    showClearButton: {
+      control: 'boolean',
+    },
+    clearButtonOnClick: {
+      action: 'clearButtonOnClick',
+    },
+    clearButtonProps: {
+      control: 'object',
+    },
+    autoComplete: {
+      control: 'boolean',
+      table: { category: 'text field base props' },
+    },
+    autoFocus: {
+      control: 'boolean',
+      table: { category: 'text field base props' },
+    },
+    className: {
+      control: 'text',
+      table: { category: 'text field base props' },
+    },
+    disabled: {
+      control: 'boolean',
+      table: { category: 'text field base props' },
+    },
+    error: {
+      control: 'boolean',
+      table: { category: 'text field base props' },
+    },
+    id: {
+      control: 'text',
+      table: { category: 'text field base props' },
+    },
+    inputProps: {
+      control: 'object',
+      table: { category: 'text field base props' },
+    },
+    leftAccessory: {
+      control: 'text',
+      table: { category: 'text field base props' },
+    },
+    maxLength: {
+      control: 'number',
+      table: { category: 'text field base props' },
+    },
+    name: {
+      control: 'text',
+      table: { category: 'text field base props' },
+    },
+    onBlur: {
+      action: 'onBlur',
+      table: { category: 'text field base props' },
+    },
+    onClick: {
+      action: 'onClick',
+      table: { category: 'text field base props' },
+    },
+    onFocus: {
+      action: 'onFocus',
+      table: { category: 'text field base props' },
+    },
+    onKeyDown: {
+      action: 'onKeyDown',
+      table: { category: 'text field base props' },
+    },
+    onKeyUp: {
+      action: 'onKeyUp',
+      table: { category: 'text field base props' },
+    },
+    placeholder: {
+      control: 'text',
+      table: { category: 'text field base props' },
+    },
+    readOnly: {
+      control: 'boolean',
+      table: { category: 'text field base props' },
+    },
+    required: {
+      control: 'boolean',
+      table: { category: 'text field base props' },
+    },
+    rightAccessory: {
+      control: 'text',
+      table: { category: 'text field base props' },
+    },
+    size: {
+      control: 'select',
+      options: Object.values(TEXT_FIELD_SIZES),
+      table: { category: 'text field base props' },
+    },
+    type: {
+      control: 'select',
+      options: Object.values(TEXT_FIELD_TYPES),
+      table: { category: 'text field base props' },
+    },
+    truncate: {
+      control: 'boolean',
+      table: { category: 'text field base props' },
+    },
+    marginTop: {
+      options: marginSizeControlOptions,
+      control: 'select',
+      table: { category: 'box props' },
+    },
+    marginRight: {
+      options: marginSizeControlOptions,
+      control: 'select',
+      table: { category: 'box props' },
+    },
+    marginBottom: {
+      options: marginSizeControlOptions,
+      control: 'select',
+      table: { category: 'box props' },
+    },
+    marginLeft: {
+      options: marginSizeControlOptions,
+      control: 'select',
+      table: { category: 'box props' },
+    },
+  },
+  args: {
+    showClearButton: true,
+    placeholder: 'Search',
+  },
+};
+
+const Template = (args) => {
+  const [{ value }, updateArgs] = useArgs();
+  const handleOnChange = (e) => {
+    updateArgs({ value: e.target.value });
+  };
+  const handleOnClear = () => {
+    updateArgs({ value: '' });
+  };
+  return (
+    <TextFieldSearch
+      {...args}
+      value={value}
+      onChange={handleOnChange}
+      clearButtonOnClick={handleOnClear}
+    />
+  );
+};
+
+export const DefaultStory = Template.bind({});
+DefaultStory.storyName = 'Default';
+
+export const ShowClearButton = Template.bind({});
+
+ShowClearButton.args = {
+  placeholder: 'Enter text to show clear',
+  showClearButton: true,
+};
+
+export const ClearButtonProps = Template.bind({});
+ClearButtonProps.args = {
+  value: 'clear button props',
+  size: SIZES.LG,
+  showClearButton: true,
+  clearButtonProps: {
+    backgroundColor: COLORS.BACKGROUND_ALTERNATIVE,
+    borderRadius: BORDER_RADIUS.XS,
+  },
+};
diff --git a/ui/components/component-library/text-field-search/text-field-search.test.js b/ui/components/component-library/text-field-search/text-field-search.test.js
new file mode 100644
index 000000000..8a73ea8bf
--- /dev/null
+++ b/ui/components/component-library/text-field-search/text-field-search.test.js
@@ -0,0 +1,57 @@
+/* eslint-disable jest/require-top-level-describe */
+import React from 'react';
+import { render } from '@testing-library/react';
+import { renderControlledInput } from '../../../../test/lib/render-helpers';
+import { TextFieldSearch } from './text-field-search';
+
+describe('TextFieldSearch', () => {
+  it('should render correctly', () => {
+    const { getByRole } = render(<TextFieldSearch />);
+    expect(getByRole('searchbox')).toBeDefined();
+  });
+  it('should render showClearButton button when showClearButton is true and value exists', async () => {
+    // As showClearButton is intended to be used with a controlled input we need to use renderControlledInput
+    const { user, getByRole } = renderControlledInput(TextFieldSearch, {
+      showClearButton: true,
+    });
+    await user.type(getByRole('searchbox'), 'test value');
+    expect(getByRole('searchbox')).toHaveValue('test value');
+    expect(getByRole('button', { name: /Clear/u })).toBeDefined();
+  });
+  it('should still render with the rightAccessory when showClearButton is true', async () => {
+    // As showClearButton is intended to be used with a controlled input we need to use renderControlledInput
+    const { user, getByRole, getByText } = renderControlledInput(
+      TextFieldSearch,
+      {
+        showClearButton: true,
+        rightAccessory: <div>right-accessory</div>,
+      },
+    );
+    await user.type(getByRole('searchbox'), 'test value');
+    expect(getByRole('searchbox')).toHaveValue('test value');
+    expect(getByRole('button', { name: /Clear/u })).toBeDefined();
+    expect(getByText('right-accessory')).toBeDefined();
+  });
+  it('should fire onClick event when passed to clearButtonOnClick when clear button is clicked', async () => {
+    // As showClearButton is intended to be used with a controlled input we need to use renderControlledInput
+    const fn = jest.fn();
+    const { user, getByRole } = renderControlledInput(TextFieldSearch, {
+      showClearButton: true,
+      clearButtonOnClick: fn,
+    });
+    await user.type(getByRole('searchbox'), 'test value');
+    await user.click(getByRole('button', { name: /Clear/u }));
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+  it('should fire onClick event when passed to clearButtonProps.onClick prop', async () => {
+    // As showClearButton is intended to be used with a controlled input we need to use renderControlledInput
+    const fn = jest.fn();
+    const { user, getByRole } = renderControlledInput(TextFieldSearch, {
+      showClearButton: true,
+      clearButtonProps: { onClick: fn },
+    });
+    await user.type(getByRole('searchbox'), 'test value');
+    await user.click(getByRole('button', { name: /Clear/u }));
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/ui/components/component-library/text-field/README.mdx b/ui/components/component-library/text-field/README.mdx
index 7a9bc8cd6..52a00f9f7 100644
--- a/ui/components/component-library/text-field/README.mdx
+++ b/ui/components/component-library/text-field/README.mdx
@@ -16,58 +16,78 @@ The `TextField` accepts all props below as well as all [Box](/docs/ui-components
 
 <ArgsTable of={TextField} />
 
-### Show Clear
+### Show Clear Button
 
-Use the `showClear` prop to display a clear button when `TextField` has a value. Clicking the button will clear the value.
-You can also attach an `onClear` handler to the `TextField` to perform additional actions when the clear button is clicked.
+Use the `showClearButton` prop to display a clear button when `TextField` has a value. Use the `clearButtonOnClick` prop to pass an `onClick` event handler to clear the value of the input.
+
+The clear button uses [ButtonIcon](/docs/ui-components-component-library-button-icon-button-icon-stories-js--default-story) and accepts all props from that component.
+
+**NOTE: The `showClearButton` only works with a controlled input.**
 
 <Canvas>
-  <Story id="ui-components-component-library-text-field-text-field-stories-js--show-clear" />
+  <Story id="ui-components-component-library-text-field-text-field-stories-js--show-clear-button" />
 </Canvas>
 
 ```jsx
-import { TextField } from '../../ui/component-library/text-field';
+import { TextField } from '../../ui/components/component-library';
 
-<TextField showClear />;
+const [value, setValue] = useState('show clear');
+
+const handleOnChange = (e) => {
+  setValue(e.target.value);
+};
+
+const handleOnClear = () => {
+  setValue('');
+};
+
+<TextField
+  placeholder="Enter text to show clear"
+  value={value}
+  onChange={handleOnChange}
+  showClearButton
+  clearButtonOnClick={handleOnClear}
+/>;
 ```
 
-### On Clear
+### Clear Button Props
 
-Use the `onClear` prop to perform additional actions when the clear button is clicked.
+Use the `clearButtonProps` to access other props of the clear button.
 
 <Canvas>
-  <Story id="ui-components-component-library-text-field-text-field-stories-js--on-clear" />
-</Canvas>
-
-```jsx
-import { TextField } from '../../ui/component-library/text-field';
-
-<TextField showClear onClear={() => console.log('cleared input')} />;
-```
-
-### Clear Button Props and Clear Button Icon Props
-
-Use the `clearButtonProps` and `clearButtonIconProps` props to pass props to the clear button and clear button icon respectively.
-
-<Canvas>
-  <Story id="ui-components-component-library-text-field-text-field-stories-js--clear-button-props-clear-button-icon-props" />
+  <Story id="ui-components-component-library-text-field-text-field-stories-js--clear-button-props" />
 </Canvas>
 
 ```jsx
+import React, { useState } from 'react';
 import {
   SIZES,
   COLORS,
   BORDER_RADIUS,
 } from '../../../helpers/constants/design-system';
-import { TextField } from '../../ui/component-library/text-field';
+
+import { TextField } from '../../ui/components/component-library';
+
+const [value, setValue] = useState('show clear');
+
+const handleOnChange = (e) => {
+  setValue(e.target.value);
+};
+
+const handleOnClear = () => {
+  setValue('');
+};
 
 <TextField
-  showClear
+  placeholder="Enter text to show clear"
+  value={value}
+  onChange={handleOnChange}
+  showClearButton
+  clearButtonOnClick={handleOnClear}
   clearButtonProps={{
     backgroundColor: COLORS.BACKGROUND_ALTERNATIVE,
     borderRadius: BORDER_RADIUS.XS,
     'data-testid': 'clear-button',
   }}
-  clearButtonIconProps={{ size: SIZES.MD }}
 />;
 ```
diff --git a/ui/components/component-library/text-field/text-field.js b/ui/components/component-library/text-field/text-field.js
index ddf351776..09b0e8794 100644
--- a/ui/components/component-library/text-field/text-field.js
+++ b/ui/components/component-library/text-field/text-field.js
@@ -1,86 +1,63 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import {
-  SIZES,
-  DISPLAY,
-  JUSTIFY_CONTENT,
-  ALIGN_ITEMS,
-  COLORS,
-} from '../../../helpers/constants/design-system';
+import { SIZES } from '../../../helpers/constants/design-system';
 
-import Box from '../../ui/box';
-
-import { Icon, ICON_NAMES } from '../icon';
+import { ICON_NAMES } from '../icon';
+import { ButtonIcon } from '../button-icon';
 
 import { TextFieldBase } from '../text-field-base';
 
 export const TextField = ({
   className,
-  showClear,
-  clearButtonIconProps,
+  showClearButton, // only works with a controlled input
+  clearButtonOnClick,
   clearButtonProps,
   rightAccessory,
-  value: valueProp,
-  onChange,
-  onClear,
   inputProps,
+  value,
+  onChange,
   ...props
-}) => {
-  const [value, setValue] = useState(valueProp || '');
-  const handleOnChange = (e) => {
-    setValue(e.target.value);
-    onChange?.(e);
-  };
-  const handleClear = (e) => {
-    setValue('');
-    clearButtonProps?.onClick?.(e);
-    onClear?.(e);
-  };
-  return (
-    <TextFieldBase
-      className={classnames('mm-text-field', className)}
-      value={value}
-      onChange={handleOnChange}
-      rightAccessory={
-        value && showClear ? (
-          <>
-            {/* replace with ButtonIcon */}
-            <Box
-              className="mm-text-field__button-clear"
-              as="button"
-              display={DISPLAY.FLEX}
-              alignItems={ALIGN_ITEMS.CENTER}
-              justifyContent={JUSTIFY_CONTENT.CENTER}
-              backgroundColor={COLORS.TRANSPARENT}
-              padding={0}
-              {...clearButtonProps} // don't override onClick
-              onClick={handleClear}
-            >
-              <Icon
-                name={ICON_NAMES.CLOSE_OUTLINE}
-                size={SIZES.SM}
-                aria-label="Clear" // TODO: i18n
-                {...clearButtonIconProps}
-              />
-            </Box>
-            {rightAccessory}
-          </>
-        ) : (
-          rightAccessory
-        )
-      }
-      inputProps={{
-        marginRight: showClear ? 6 : 0,
-        ...inputProps,
-      }}
-      {...props}
-    />
-  );
-};
+}) => (
+  <TextFieldBase
+    className={classnames('mm-text-field', className)}
+    value={value}
+    onChange={onChange}
+    rightAccessory={
+      value && showClearButton ? (
+        <>
+          <ButtonIcon
+            className="mm-text-field__button-clear"
+            ariaLabel="Clear" // TODO: i18n
+            icon={ICON_NAMES.CLOSE_OUTLINE}
+            size={SIZES.SM}
+            onClick={clearButtonOnClick}
+            {...clearButtonProps}
+          />
+          {rightAccessory}
+        </>
+      ) : (
+        rightAccessory
+      )
+    }
+    inputProps={{
+      marginRight: showClearButton ? 6 : 0,
+      ...inputProps,
+    }}
+    {...props}
+  />
+);
 
 TextField.propTypes = {
+  /**
+   * The value af the TextField
+   */
+  value: TextFieldBase.propTypes.value,
+  /**
+   * The onChange handler af the TextField
+   */
+  onChange: TextFieldBase.propTypes.onChange,
   /**
    * An additional className to apply to the text-field
    */
@@ -88,19 +65,15 @@ TextField.propTypes = {
   /**
    * Show a clear button to clear the input
    */
-  showClear: PropTypes.bool,
+  showClearButton: PropTypes.bool,
   /**
-   * The event handler for when the clear button is clicked
+   * The onClick handler for the clear button
    */
-  onClear: PropTypes.func,
+  clearButtonOnClick: PropTypes.func,
   /**
    * The props to pass to the clear button
    */
-  clearButtonProps: PropTypes.shape(Box.PropTypes),
-  /**
-   * The props to pass to the icon inside of the close button
-   */
-  clearButtonIconProps: PropTypes.shape(Icon.PropTypes),
+  clearButtonProps: PropTypes.shape(ButtonIcon.PropTypes),
   /**
    * TextField accepts all the props from TextFieldBase and Box
    */
diff --git a/ui/components/component-library/text-field/text-field.stories.js b/ui/components/component-library/text-field/text-field.stories.js
index 70832ed2b..ca3d1c0a0 100644
--- a/ui/components/component-library/text-field/text-field.stories.js
+++ b/ui/components/component-library/text-field/text-field.stories.js
@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import React from 'react';
+import { useArgs } from '@storybook/client-api';
 
 import {
   SIZES,
@@ -6,8 +7,6 @@ import {
   BORDER_RADIUS,
 } from '../../../helpers/constants/design-system';
 
-import { Text } from '../text';
-
 import { TEXT_FIELD_SIZES, TEXT_FIELD_TYPES } from './text-field.constants';
 import { TextField } from './text-field';
 
@@ -41,21 +40,17 @@ export default {
     },
   },
   argTypes: {
-    showClear: {
-      control: 'boolean',
-    },
     value: {
       control: 'text',
     },
     onChange: {
       action: 'onChange',
-      table: { category: 'text field base props' },
     },
-    onClear: {
-      action: 'onClear',
+    showClearButton: {
+      control: 'boolean',
     },
-    clearButtonIconProps: {
-      control: 'object',
+    clearButtonOnClick: {
+      action: 'clearButtonOnClick',
     },
     clearButtonProps: {
       control: 'object',
@@ -172,7 +167,7 @@ export default {
     },
   },
   args: {
-    showClear: false,
+    showClearButton: false,
     placeholder: 'Placeholder...',
     autoFocus: false,
     disabled: false,
@@ -186,62 +181,48 @@ export default {
   },
 };
 
-const Template = (args) => <TextField {...args} />;
-
-export const DefaultStory = Template.bind({});
-DefaultStory.storyName = 'Default';
-
-export const ShowClear = (args) => {
-  const [value, setValue] = useState('show clear');
+const Template = (args) => {
+  const [{ value }, updateArgs] = useArgs();
   const handleOnChange = (e) => {
-    setValue(e.target.value);
+    updateArgs({ value: e.target.value });
+  };
+  const handleOnClear = () => {
+    updateArgs({ value: '' });
   };
   return (
     <TextField
       {...args}
-      placeholder="Enter text to show clear"
       value={value}
       onChange={handleOnChange}
-      showClear
+      clearButtonOnClick={handleOnClear}
     />
   );
 };
 
-export const OnClear = (args) => {
-  const [value, setValue] = useState('onClear example');
-  const [showOnClearMessage, setShowOnClearMessage] = useState(false);
-  const handleOnChange = (e) => {
-    setValue(e.target.value);
-    showOnClearMessage && setShowOnClearMessage(false);
-  };
-  const handleOnClear = () => {
-    setShowOnClearMessage(true);
-  };
-  return (
-    <>
-      <TextField
-        {...args}
-        placeholder="Clear text to show onClear message"
-        value={value}
-        onChange={handleOnChange}
-        onClear={handleOnClear}
-        showClear
-      />
-      {showOnClearMessage && <Text marginTop={4}>onClear called</Text>}
-    </>
-  );
+export const DefaultStory = Template.bind({});
+DefaultStory.storyName = 'Default';
+
+export const ShowClearButton = Template.bind({});
+
+ShowClearButton.args = {
+  placeholder: 'Enter text to show clear',
+  showClearButton: true,
 };
 
-export const ClearButtonPropsClearButtonIconProps = Template.bind({});
-ClearButtonPropsClearButtonIconProps.args = {
+export const ClearButtonOnClick = Template.bind({});
+
+ShowClearButton.args = {
+  placeholder: 'Enter text to show clear',
+  showClearButton: true,
+};
+
+export const ClearButtonProps = Template.bind({});
+ClearButtonProps.args = {
   value: 'clear button props',
   size: SIZES.LG,
-  showClear: true,
+  showClearButton: true,
   clearButtonProps: {
     backgroundColor: COLORS.BACKGROUND_ALTERNATIVE,
     borderRadius: BORDER_RADIUS.XS,
   },
-  clearButtonIconProps: {
-    size: SIZES.MD,
-  },
 };
diff --git a/ui/components/component-library/text-field/text-field.test.js b/ui/components/component-library/text-field/text-field.test.js
index f2d7819be..224ba3769 100644
--- a/ui/components/component-library/text-field/text-field.test.js
+++ b/ui/components/component-library/text-field/text-field.test.js
@@ -1,25 +1,31 @@
 /* eslint-disable jest/require-top-level-describe */
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { renderControlledInput } from '../../../../test/lib/render-helpers';
 
 import { TextField } from './text-field';
 
+// userEvent setup function as per testing-library docs
+// https://testing-library.com/docs/user-event/intr
+function setup(jsx) {
+  return {
+    user: userEvent.setup(),
+    ...render(jsx),
+  };
+}
+
 describe('TextField', () => {
   it('should render correctly', () => {
     const { getByRole } = render(<TextField />);
     expect(getByRole('textbox')).toBeDefined();
   });
-  it('should render and be able to input text', () => {
-    const { getByTestId } = render(
-      <TextField inputProps={{ 'data-testid': 'text-field' }} />,
-    );
-    const textField = getByTestId('text-field');
-
-    expect(textField.value).toBe(''); // initial value is empty string
-    fireEvent.change(textField, { target: { value: 'text value' } });
-    expect(textField.value).toBe('text value');
-    fireEvent.change(textField, { target: { value: '' } }); // reset value
-    expect(textField.value).toBe(''); // value is empty string after reset
+  it('should render and be able to input text', async () => {
+    const { user, getByRole } = setup(<TextField />);
+    const textField = getByRole('textbox');
+    await user.type(textField, 'text value');
+    expect(textField).toHaveValue('text value');
   });
   it('should render and fire onFocus and onBlur events', () => {
     const onFocus = jest.fn();
@@ -38,46 +44,27 @@ describe('TextField', () => {
     fireEvent.blur(textField);
     expect(onBlur).toHaveBeenCalledTimes(1);
   });
-  it('should render and fire onChange event', () => {
+  it('should render and fire onChange event', async () => {
     const onChange = jest.fn();
-    const { getByTestId } = render(
+    const { user, getByRole } = setup(
       <TextField
         inputProps={{ 'data-testid': 'text-field' }}
         onChange={onChange}
       />,
     );
-    const textField = getByTestId('text-field');
-
-    fireEvent.change(textField, { target: { value: 'text value' } });
-    expect(onChange).toHaveBeenCalledTimes(1);
-  });
-  it('should render and fire onClick event', () => {
-    const onClick = jest.fn();
-    const { getByTestId } = render(
-      <TextField
-        inputProps={{ 'data-testid': 'text-field' }}
-        onClick={onClick}
-      />,
-    );
-    const textField = getByTestId('text-field');
-
-    fireEvent.click(textField);
-    expect(onClick).toHaveBeenCalledTimes(1);
-  });
-  it('should render showClear button when showClear is true and value exists', () => {
-    const { getByRole, getByTestId } = render(
-      <TextField
-        clearButtonProps={{ 'data-testid': 'clear-button' }}
-        clearButtonIconProps={{ 'data-testid': 'clear-button-icon' }}
-        showClear
-      />,
-    );
     const textField = getByRole('textbox');
-    expect(textField.value).toBe(''); // initial value is empty string
-    fireEvent.change(textField, { target: { value: 'text value' } });
-    expect(textField.value).toBe('text value');
-    expect(getByTestId('clear-button')).toBeDefined();
-    expect(getByTestId('clear-button-icon')).toBeDefined();
+
+    await user.type(textField, '123');
+    expect(textField).toHaveValue('123');
+    expect(onChange).toHaveBeenCalledTimes(3);
+  });
+  it('should render and fire onClick event', async () => {
+    const onClick = jest.fn();
+    const { user, getByTestId } = setup(
+      <TextField data-testid="text-field" onClick={onClick} />,
+    );
+    await user.click(getByTestId('text-field'));
+    expect(onClick).toHaveBeenCalledTimes(1);
   });
   it('should render with the rightAccessory', () => {
     const { getByText } = render(
@@ -85,77 +72,52 @@ describe('TextField', () => {
     );
     expect(getByText('right-accessory')).toBeDefined();
   });
-  it('should still render with the rightAccessory when showClear is true', () => {
-    const { getByRole, getByTestId, getByText } = render(
-      <TextField
-        clearButtonProps={{ 'data-testid': 'clear-button' }}
-        clearButtonIconProps={{ 'data-testid': 'clear-button-icon' }}
-        rightAccessory={<div>right-accessory</div>}
-        showClear
-      />,
-    );
-    const textField = getByRole('textbox');
-    expect(textField.value).toBe(''); // initial value is empty string
-    fireEvent.change(textField, { target: { value: 'text value' } });
-    expect(textField.value).toBe('text value');
-    expect(getByTestId('clear-button')).toBeDefined();
-    expect(getByTestId('clear-button-icon')).toBeDefined();
+  it('should render showClearButton button when showClearButton is true and value exists', async () => {
+    // As showClearButton is intended to be used with a controlled input we need to use renderControlledInput
+    const { user, getByRole } = renderControlledInput(TextField, {
+      showClearButton: true,
+    });
+    await user.type(getByRole('textbox'), 'test value');
+    expect(getByRole('textbox')).toHaveValue('test value');
+    expect(getByRole('button', { name: /Clear/u })).toBeDefined();
+  });
+  it('should still render with the rightAccessory when showClearButton is true', async () => {
+    // As showClearButton is intended to be used with a controlled input we need to use renderControlledInput
+    const { user, getByRole, getByText } = renderControlledInput(TextField, {
+      showClearButton: true,
+      rightAccessory: <div>right-accessory</div>,
+    });
+    await user.type(getByRole('textbox'), 'test value');
+    expect(getByRole('textbox')).toHaveValue('test value');
+    expect(getByRole('button', { name: /Clear/u })).toBeDefined();
     expect(getByText('right-accessory')).toBeDefined();
   });
-  it('should clear text when clear button is clicked', () => {
-    const { getByRole, getByTestId } = render(
-      <TextField
-        clearButtonProps={{ 'data-testid': 'clear-button' }}
-        clearButtonIconProps={{ 'data-testid': 'clear-button-icon' }}
-        rightAccessory={<div>right-accessory</div>}
-        showClear
-      />,
-    );
-    const textField = getByRole('textbox');
-    fireEvent.change(textField, { target: { value: 'text value' } });
-    expect(textField.value).toBe('text value');
-    fireEvent.click(getByTestId('clear-button'));
-    expect(textField.value).toBe('');
+  it('should fire onClick event when passed to clearButtonOnClick when clear button is clicked', async () => {
+    // As showClearButton is intended to be used with a controlled input we need to use renderControlledInput
+    const fn = jest.fn();
+    const { user, getByRole } = renderControlledInput(TextField, {
+      showClearButton: true,
+      clearButtonOnClick: fn,
+    });
+    await user.type(getByRole('textbox'), 'test value');
+    await user.click(getByRole('button', { name: /Clear/u }));
+    expect(fn).toHaveBeenCalledTimes(1);
   });
-  it('should fire onClear event when passed to onClear prop', () => {
-    const onClear = jest.fn();
-    const { getByRole, getByTestId } = render(
-      <TextField
-        onClear={onClear}
-        clearButtonProps={{ 'data-testid': 'clear-button' }}
-        clearButtonIconProps={{ 'data-testid': 'clear-button-icon' }}
-        showClear
-      />,
-    );
-    const textField = getByRole('textbox');
-    fireEvent.change(textField, { target: { value: 'text value' } });
-    expect(textField.value).toBe('text value');
-    fireEvent.click(getByTestId('clear-button'));
-    expect(onClear).toHaveBeenCalledTimes(1);
-  });
-  it('should fire clearButtonProps.onClick event when passed to clearButtonProps.onClick prop', () => {
-    const onClear = jest.fn();
-    const onClick = jest.fn();
-    const { getByRole, getByTestId } = render(
-      <TextField
-        onClear={onClear}
-        clearButtonProps={{ 'data-testid': 'clear-button', onClick }}
-        clearButtonIconProps={{ 'data-testid': 'clear-button-icon' }}
-        showClear
-      />,
-    );
-    const textField = getByRole('textbox');
-    fireEvent.change(textField, { target: { value: 'text value' } });
-    expect(textField.value).toBe('text value');
-    fireEvent.click(getByTestId('clear-button'));
-    expect(onClear).toHaveBeenCalledTimes(1);
-    expect(onClick).toHaveBeenCalledTimes(1);
+  it('should fire onClick event when passed to clearButtonProps.onClick prop', async () => {
+    // As showClearButton is intended to be used with a controlled input we need to use renderControlledInput
+    const fn = jest.fn();
+    const { user, getByRole } = renderControlledInput(TextField, {
+      showClearButton: true,
+      clearButtonProps: { onClick: fn },
+    });
+    await user.type(getByRole('textbox'), 'test value');
+    await user.click(getByRole('button', { name: /Clear/u }));
+    expect(fn).toHaveBeenCalledTimes(1);
   });
   it('should be able to accept inputProps', () => {
-    const { getByRole } = render(
+    const { getByTestId } = render(
       <TextField inputProps={{ 'data-testid': 'text-field' }} />,
     );
-    const textField = getByRole('textbox');
-    expect(textField).toBeDefined();
+    expect(getByTestId('text-field')).toBeDefined();
   });
 });
diff --git a/ui/components/component-library/text/README.mdx b/ui/components/component-library/text/README.mdx
index 4f3650ebf..c06c2364f 100644
--- a/ui/components/component-library/text/README.mdx
+++ b/ui/components/component-library/text/README.mdx
@@ -25,7 +25,7 @@ Use the `variant` prop and the `TEXT` object from `./ui/helpers/constants/design
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/component-library/text';
+import { Text } from '../../ui/components/component-library';
 import { TEXT } from '../../../helpers/constants/design-system';
 
 <Text variant={TEXT.DISPLAY_MD}>display-md</Text>
@@ -47,7 +47,7 @@ Use the `color` prop and the `COLORS` object from `./ui/helpers/constants/design
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/component-library/text';
+import { Text } from '../../ui/components/component-library';
 import { COLORS } from '../../../helpers/constants/design-system';
 
 <Text color={COLORS.TEXT_DEFAULT}>
@@ -104,7 +104,7 @@ Use the `fontWeight` prop and the `FONT_WEIGHT` object from `./ui/helpers/consta
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/component-library/text';
+import { Text } from '../../ui/components/component-library';
 import { FONT_WEIGHT } from '../../../helpers/constants/design-system';
 
 <Text fontWeight={FONT_WEIGHT.NORMAL}>
@@ -130,7 +130,7 @@ Use the `fontStyle` prop and the `FONT_STYLE` object from `./ui/helpers/constant
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/component-library/text';
+import { Text } from '../../ui/components/component-library';
 import { FONT_STYLE } from '../../../helpers/constants/design-system';
 
 <Text fontStyle={FONT_STYLE.NORMAL}>
@@ -150,7 +150,7 @@ Use the `textTransform` prop and the `TEXT_TRANSFORM` object from `./ui/helpers/
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/component-library/text';
+import { Text } from '../../ui/components/component-library';
 import { TEXT_TRANSFORM } from '../../../helpers/constants/design-system';
 
 <Text textAlign={TEXT_TRANSFORM.UPPERCASE}>
@@ -173,7 +173,7 @@ Use the `textAlign` prop and the `TEXT_ALIGN` object from `./ui/helpers/constant
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/component-library/text';
+import { Text } from '../../ui/components/component-library';
 import { TEXT_ALIGN } from '../../../helpers/constants/design-system';
 
 <Text textAlign={TEXT_ALIGN.LEFT}>
@@ -202,7 +202,7 @@ Use the `overflowWrap` prop and the `OVERFLOW_WRAP` object from `./ui/helpers/co
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/component-library/text';
+import { Text } from '../../ui/components/component-library';
 import { OVERFLOW_WRAP } from '../../../helpers/constants/design-system';
 
 <div
@@ -230,7 +230,7 @@ Use the boolean `ellipsis` prop to change the if the `Text` component to have an
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/component-library/text';
+import { Text } from '../../ui/components/component-library';
 
 <div
   style={{
@@ -253,7 +253,7 @@ Use the `as` prop to change the root html element of the `Text` component
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/component-library/text';
+import { Text } from '../../ui/components/component-library';
 
 <Text as="dd">dd</Text>
 <Text as="div">div</Text>
diff --git a/ui/components/ui/box/README.mdx b/ui/components/ui/box/README.mdx
index ff443c1f6..23b1a76fc 100644
--- a/ui/components/ui/box/README.mdx
+++ b/ui/components/ui/box/README.mdx
@@ -209,6 +209,7 @@ import Box from '../ui/box';
 <Box borderRadius={BORDER_RADIUS.LG}>BORDER_RADIUS.LG 8px</Box>
 <Box borderRadius={BORDER_RADIUS.XL}>BORDER_RADIUS.XL 12px</Box>
 <Box borderRadius={BORDER_RADIUS.PILL}>BORDER_RADIUS.PILL 9999px</Box>
+<Box borderRadius={BORDER_RADIUS.FULL}>BORDER_RADIUS.FULL 50%</Box>
 ```
 
 ### Responsive Props
diff --git a/ui/components/ui/box/box.scss b/ui/components/ui/box/box.scss
index 63f9fb9fa..b29da6bdb 100644
--- a/ui/components/ui/box/box.scss
+++ b/ui/components/ui/box/box.scss
@@ -157,6 +157,10 @@ $attributesToApplyExtraProperties: margin;
     border-radius: 9999px;
   }
 
+  &--rounded-full {
+    border-radius: 50%;
+  }
+
   // breakpoint classes
   @each $breakpoint, $min-width in $screen-sizes-map {
     @media screen and (min-width: $min-width) {
diff --git a/ui/components/ui/box/box.stories.js b/ui/components/ui/box/box.stories.js
index 6d63f186e..cd9712269 100644
--- a/ui/components/ui/box/box.stories.js
+++ b/ui/components/ui/box/box.stories.js
@@ -482,75 +482,90 @@ export const BorderColor = () => {
 
 export const BorderRadius = () => {
   return (
-    <Box
-      display={DISPLAY.GRID}
-      style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))' }}
-      gap={4}
-    >
+    <>
       <Box
-        padding={3}
-        backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
-        borderColor={COLORS.BORDER_DEFAULT}
-        borderWidth={2}
-        borderRadius={BORDER_RADIUS.NONE}
+        display={DISPLAY.GRID}
+        style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))' }}
+        gap={4}
       >
-        BORDER_RADIUS.NONE 0px
+        <Box
+          padding={3}
+          backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
+          borderColor={COLORS.BORDER_DEFAULT}
+          borderWidth={2}
+          borderRadius={BORDER_RADIUS.NONE}
+        >
+          BORDER_RADIUS.NONE 0px
+        </Box>
+        <Box
+          padding={3}
+          backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
+          borderColor={COLORS.BORDER_DEFAULT}
+          borderWidth={2}
+          borderRadius={BORDER_RADIUS.XS}
+        >
+          BORDER_RADIUS.XS 2px
+        </Box>
+        <Box
+          padding={3}
+          backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
+          borderColor={COLORS.BORDER_DEFAULT}
+          borderWidth={2}
+          borderRadius={BORDER_RADIUS.SM}
+        >
+          BORDER_RADIUS.SM 4px
+        </Box>
+        <Box
+          padding={3}
+          backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
+          borderColor={COLORS.BORDER_DEFAULT}
+          borderWidth={2}
+          borderRadius={BORDER_RADIUS.MD}
+        >
+          BORDER_RADIUS.MD 6px
+        </Box>
+        <Box
+          padding={3}
+          backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
+          borderColor={COLORS.BORDER_DEFAULT}
+          borderWidth={2}
+          borderRadius={BORDER_RADIUS.LG}
+        >
+          BORDER_RADIUS.LG 8px
+        </Box>
+        <Box
+          padding={3}
+          backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
+          borderColor={COLORS.BORDER_DEFAULT}
+          borderWidth={2}
+          borderRadius={BORDER_RADIUS.XL}
+        >
+          BORDER_RADIUS.XL 12px
+        </Box>
+        <Box
+          padding={3}
+          backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
+          borderColor={COLORS.BORDER_DEFAULT}
+          borderWidth={2}
+          borderRadius={BORDER_RADIUS.PILL}
+        >
+          BORDER_RADIUS.PILL 9999px
+        </Box>
       </Box>
       <Box
         padding={3}
         backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
         borderColor={COLORS.BORDER_DEFAULT}
         borderWidth={2}
-        borderRadius={BORDER_RADIUS.XS}
+        borderRadius={BORDER_RADIUS.FULL}
+        margin={4}
+        display={DISPLAY.FLEX}
+        alignItems={ALIGN_ITEMS.CENTER}
+        style={{ height: '250px', width: '250px' }}
       >
-        BORDER_RADIUS.XS 2px
+        BORDER_RADIUS.FULL 50%
       </Box>
-      <Box
-        padding={3}
-        backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
-        borderColor={COLORS.BORDER_DEFAULT}
-        borderWidth={2}
-        borderRadius={BORDER_RADIUS.SM}
-      >
-        BORDER_RADIUS.SM 4px
-      </Box>
-      <Box
-        padding={3}
-        backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
-        borderColor={COLORS.BORDER_DEFAULT}
-        borderWidth={2}
-        borderRadius={BORDER_RADIUS.MD}
-      >
-        BORDER_RADIUS.MD 6px
-      </Box>
-      <Box
-        padding={3}
-        backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
-        borderColor={COLORS.BORDER_DEFAULT}
-        borderWidth={2}
-        borderRadius={BORDER_RADIUS.LG}
-      >
-        BORDER_RADIUS.LG 8px
-      </Box>
-      <Box
-        padding={3}
-        backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
-        borderColor={COLORS.BORDER_DEFAULT}
-        borderWidth={2}
-        borderRadius={BORDER_RADIUS.XL}
-      >
-        BORDER_RADIUS.XL 12px
-      </Box>
-      <Box
-        padding={3}
-        backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
-        borderColor={COLORS.BORDER_DEFAULT}
-        borderWidth={2}
-        borderRadius={BORDER_RADIUS.PILL}
-      >
-        BORDER_RADIUS.PILL 9999px
-      </Box>
-    </Box>
+    </>
   );
 };
 
diff --git a/ui/components/ui/box/box.test.js b/ui/components/ui/box/box.test.js
index 8e8534589..1f8a0beac 100644
--- a/ui/components/ui/box/box.test.js
+++ b/ui/components/ui/box/box.test.js
@@ -287,6 +287,7 @@ describe('Box', () => {
           <Box borderRadius={BORDER_RADIUS.LG}>border radius lg</Box>
           <Box borderRadius={BORDER_RADIUS.XL}>border radius xl</Box>
           <Box borderRadius={BORDER_RADIUS.PILL}>border radius pill</Box>
+          <Box borderRadius={BORDER_RADIUS.FULL}>border radius full</Box>
           <Box borderRadius={BORDER_RADIUS.NONE}>border radius none</Box>
         </>,
       );
@@ -297,6 +298,7 @@ describe('Box', () => {
       expect(getByText('border radius lg')).toHaveClass('box--rounded-lg');
       expect(getByText('border radius xl')).toHaveClass('box--rounded-xl');
       expect(getByText('border radius pill')).toHaveClass('box--rounded-pill');
+      expect(getByText('border radius full')).toHaveClass('box--rounded-full');
       expect(getByText('border radius none')).toHaveClass('box--rounded-none');
     });
     it('should render the Box with the responsive borderRadius classes', () => {
@@ -317,6 +319,7 @@ describe('Box', () => {
               BORDER_RADIUS.XL,
               BORDER_RADIUS.PILL,
               BORDER_RADIUS.NONE,
+              BORDER_RADIUS.FULL,
             ]}
           >
             Border radius set 2
@@ -341,6 +344,9 @@ describe('Box', () => {
       expect(getByText('Border radius set 2')).toHaveClass(
         'box--md:rounded-none',
       );
+      expect(getByText('Border radius set 2')).toHaveClass(
+        'box--lg:rounded-full',
+      );
     });
   });
   describe('display, gap, flexDirection, flexWrap, alignItems, justifyContent', () => {
diff --git a/ui/components/ui/button-group/__snapshots__/button-group-component.test.js.snap b/ui/components/ui/button-group/__snapshots__/button-group-component.test.js.snap
new file mode 100644
index 000000000..7e8116227
--- /dev/null
+++ b/ui/components/ui/button-group/__snapshots__/button-group-component.test.js.snap
@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ButtonGroup Component should match snapshot 1`] = `
+<div>
+  <div
+    class="someClassName"
+    style="color: red;"
+  >
+    <button
+      aria-checked="false"
+      class="button-group__button"
+      data-testid="button-group__button0"
+    >
+      <div
+        class="mockClass"
+      />
+    </button>
+    <button
+      aria-checked="true"
+      class="button-group__button button-group__button--active"
+      data-testid="button-group__button1"
+    />
+    <button
+      aria-checked="false"
+      class="button-group__button"
+      data-testid="button-group__button2"
+    />
+  </div>
+</div>
+`;
diff --git a/ui/components/ui/button-group/button-group-component.test.js b/ui/components/ui/button-group/button-group-component.test.js
index 64aef67b4..2aaccad78 100644
--- a/ui/components/ui/button-group/button-group-component.test.js
+++ b/ui/components/ui/button-group/button-group-component.test.js
@@ -1,130 +1,30 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import sinon from 'sinon';
-import ButtonGroup from './button-group.component';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import ButtonGroup from '.';
 
 describe('ButtonGroup Component', () => {
-  let wrapper;
-
-  const childButtonSpies = {
-    onClick: sinon.spy(),
+  const props = {
+    defaultActiveButtonIndex: 1,
+    disabled: false,
+    className: 'someClassName',
+    style: {
+      color: 'red',
+    },
   };
 
   const mockButtons = [
-    <button onClick={childButtonSpies.onClick} key="a">
+    <button key="a">
       <div className="mockClass" />
     </button>,
-    <button onClick={childButtonSpies.onClick} key="b"></button>,
-    <button onClick={childButtonSpies.onClick} key="c"></button>,
+    <button key="b"></button>,
+    <button key="c"></button>,
   ];
 
-  beforeAll(() => {
-    sinon.spy(ButtonGroup.prototype, 'handleButtonClick');
-    sinon.spy(ButtonGroup.prototype, 'renderButtons');
-  });
-
-  beforeEach(() => {
-    wrapper = shallow(
-      <ButtonGroup
-        defaultActiveButtonIndex={1}
-        disabled={false}
-        className="someClassName"
-        style={{ color: 'red' }}
-      >
-        {mockButtons}
-      </ButtonGroup>,
+  it('should match snapshot', () => {
+    const { container } = renderWithProvider(
+      <ButtonGroup {...props}>{mockButtons}</ButtonGroup>,
     );
-  });
 
-  afterEach(() => {
-    childButtonSpies.onClick.resetHistory();
-    ButtonGroup.prototype.handleButtonClick.resetHistory();
-    ButtonGroup.prototype.renderButtons.resetHistory();
-  });
-
-  afterAll(() => {
-    sinon.restore();
-  });
-
-  describe('componentDidUpdate', () => {
-    it('should set the activeButtonIndex to the updated newActiveButtonIndex', () => {
-      expect(wrapper.state('activeButtonIndex')).toStrictEqual(1);
-      wrapper.setProps({ newActiveButtonIndex: 2 });
-      expect(wrapper.state('activeButtonIndex')).toStrictEqual(2);
-    });
-
-    it('should not set the activeButtonIndex to an updated newActiveButtonIndex that is not a number', () => {
-      expect(wrapper.state('activeButtonIndex')).toStrictEqual(1);
-      wrapper.setProps({ newActiveButtonIndex: null });
-      expect(wrapper.state('activeButtonIndex')).toStrictEqual(1);
-    });
-  });
-
-  describe('handleButtonClick', () => {
-    it('should set the activeButtonIndex', () => {
-      expect(wrapper.state('activeButtonIndex')).toStrictEqual(1);
-      wrapper.instance().handleButtonClick(2);
-      expect(wrapper.state('activeButtonIndex')).toStrictEqual(2);
-    });
-  });
-
-  describe('renderButtons', () => {
-    it('should render a button for each child', () => {
-      const childButtons = wrapper.find('.button-group__button');
-      expect(childButtons).toHaveLength(3);
-    });
-
-    it('should render the correct button with an active state', () => {
-      const childButtons = wrapper.find('.button-group__button');
-      const activeChildButton = wrapper.find('.button-group__button--active');
-      expect(childButtons.get(1)).toStrictEqual(activeChildButton.get(0));
-    });
-
-    it("should call handleButtonClick and the respective button's onClick method when a button is clicked", () => {
-      expect(ButtonGroup.prototype.handleButtonClick.callCount).toStrictEqual(
-        0,
-      );
-      expect(childButtonSpies.onClick.callCount).toStrictEqual(0);
-      const childButtons = wrapper.find('.button-group__button');
-      childButtons.at(0).props().onClick();
-      childButtons.at(1).props().onClick();
-      childButtons.at(2).props().onClick();
-      expect(ButtonGroup.prototype.handleButtonClick.callCount).toStrictEqual(
-        3,
-      );
-      expect(childButtonSpies.onClick.callCount).toStrictEqual(3);
-    });
-
-    it('should render all child buttons as disabled if props.disabled is true', () => {
-      const childButtons = wrapper.find('.button-group__button');
-      childButtons.forEach((button) => {
-        expect(button.props().disabled).toBeUndefined();
-      });
-      wrapper.setProps({ disabled: true });
-      const disabledChildButtons = wrapper.find('[disabled=true]');
-      expect(disabledChildButtons).toHaveLength(3);
-    });
-
-    it('should render the children of the button', () => {
-      const mockClass = wrapper.find('.mockClass');
-      expect(mockClass).toHaveLength(1);
-    });
-  });
-
-  describe('render', () => {
-    it('should render a div with the expected class and style', () => {
-      expect(wrapper.find('div').at(0).props().className).toStrictEqual(
-        'someClassName',
-      );
-      expect(wrapper.find('div').at(0).props().style).toStrictEqual({
-        color: 'red',
-      });
-    });
-
-    it('should call renderButtons when rendering', () => {
-      expect(ButtonGroup.prototype.renderButtons.callCount).toStrictEqual(1);
-      wrapper.instance().render();
-      expect(ButtonGroup.prototype.renderButtons.callCount).toStrictEqual(2);
-    });
+    expect(container).toMatchSnapshot();
   });
 });
diff --git a/ui/components/ui/dropdown/dropdown.js b/ui/components/ui/dropdown/dropdown.js
index 3a6de0dca..8bfde46ff 100644
--- a/ui/components/ui/dropdown/dropdown.js
+++ b/ui/components/ui/dropdown/dropdown.js
@@ -8,9 +8,10 @@ const Dropdown = ({
   disabled = false,
   onChange,
   options,
-  selectedOption = null,
+  selectedOption = '',
   style,
   title,
+  'data-testid': dataTestId,
 }) => {
   const _onChange = useCallback(
     (event) => {
@@ -25,6 +26,7 @@ const Dropdown = ({
     <div className={classnames('dropdown', className)}>
       <select
         className="dropdown__select"
+        data-testid={dataTestId}
         disabled={disabled}
         title={title}
         onChange={_onChange}
@@ -78,6 +80,10 @@ Dropdown.propTypes = {
    * Add inline style for the component
    */
   style: PropTypes.object,
+  /**
+   * Unit testing test id
+   */
+  'data-testid': PropTypes.string,
 };
 
 export default Dropdown;
diff --git a/ui/components/ui/identicon/__snapshots__/identicon.component.test.js.snap b/ui/components/ui/identicon/__snapshots__/identicon.component.test.js.snap
new file mode 100644
index 000000000..fb6d1eb06
--- /dev/null
+++ b/ui/components/ui/identicon/__snapshots__/identicon.component.test.js.snap
@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Identicon should match snapshot with address prop div 1`] = `
+<div>
+  <div
+    class=""
+  >
+    <div
+      class="identicon test-address"
+      style="height: 46px; width: 46px; border-radius: 23px;"
+    >
+      <div
+        style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 46px; height: 46px; display: inline-block; background: rgb(24, 151, 242);"
+      >
+        <svg
+          height="46"
+          width="46"
+          x="0"
+          y="0"
+        >
+          <rect
+            fill="#2362E1"
+            height="46"
+            transform="translate(5.159662140639244 -7.668071520898189) rotate(458.4 23 23)"
+            width="46"
+            x="0"
+            y="0"
+          />
+          <rect
+            fill="#F94301"
+            height="46"
+            transform="translate(-22.084972728872177 11.489005476012034) rotate(268.8 23 23)"
+            width="46"
+            x="0"
+            y="0"
+          />
+          <rect
+            fill="#FA7900"
+            height="46"
+            transform="translate(-13.047115238995795 42.377522828482356) rotate(117.3 23 23)"
+            width="46"
+            x="0"
+            y="0"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Identicon should match snapshot with custom image and className props 1`] = `
+<div>
+  <img
+    alt=""
+    class="identicon test-image"
+    src="test-image"
+    style="height: 46px; width: 46px; border-radius: 23px;"
+  />
+</div>
+`;
+
+exports[`Identicon should match snapshot with default props 1`] = `
+<div>
+  <div
+    class="identicon__image-border"
+    style="height: 46px; width: 46px; border-radius: 23px;"
+  />
+</div>
+`;
diff --git a/ui/components/ui/identicon/identicon.component.test.js b/ui/components/ui/identicon/identicon.component.test.js
index fb9702fe8..db60d8b18 100644
--- a/ui/components/ui/identicon/identicon.component.test.js
+++ b/ui/components/ui/identicon/identicon.component.test.js
@@ -1,52 +1,51 @@
 import React from 'react';
-import thunk from 'redux-thunk';
 import configureMockStore from 'redux-mock-store';
-import { mount } from 'enzyme';
-import Identicon from './identicon.component';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import Identicon from '.';
 
 describe('Identicon', () => {
-  const state = {
+  const mockState = {
     metamask: {
+      provider: {
+        chainId: '0x99',
+      },
       useBlockie: false,
     },
   };
 
-  const middlewares = [thunk];
-  const mockStore = configureMockStore(middlewares);
-  const store = mockStore(state);
+  const mockStore = configureMockStore()(mockState);
 
-  it('renders empty identicon with no props', () => {
-    const wrapper = mount(<Identicon store={store} />);
+  it('should match snapshot with default props', () => {
+    const { container } = renderWithProvider(<Identicon />, mockStore);
 
-    expect(wrapper.find('div').prop('className')).toStrictEqual(
-      'identicon__image-border',
-    );
+    expect(container).toMatchSnapshot();
   });
 
-  it('renders custom image and add className props', () => {
-    const wrapper = mount(
-      <Identicon store={store} className="test-image" image="test-image" />,
+  it('should match snapshot with custom image and className props', () => {
+    const props = {
+      className: 'test-image',
+      image: 'test-image',
+    };
+
+    const { container } = renderWithProvider(
+      <Identicon {...props} />,
+      mockStore,
     );
 
-    expect(wrapper.find('img.test-image').prop('className')).toStrictEqual(
-      'identicon test-image',
-    );
-    expect(wrapper.find('img.test-image').prop('src')).toStrictEqual(
-      'test-image',
-    );
+    expect(container).toMatchSnapshot();
   });
 
-  it('renders div with address prop', () => {
-    const wrapper = mount(
-      <Identicon
-        store={store}
-        className="test-address"
-        address="0x0000000000000000000000000000000000000000"
-      />,
+  it('should match snapshot with address prop div', () => {
+    const props = {
+      className: 'test-address',
+      address: '0x0000000000000000000000000000000000000000',
+    };
+
+    const { container } = renderWithProvider(
+      <Identicon {...props} />,
+      mockStore,
     );
 
-    expect(wrapper.find('div.test-address').prop('className')).toStrictEqual(
-      'identicon test-address',
-    );
+    expect(container).toMatchSnapshot();
   });
 });
diff --git a/ui/components/ui/list-item/index.scss b/ui/components/ui/list-item/index.scss
index ead139c9d..d0ee5ca39 100644
--- a/ui/components/ui/list-item/index.scss
+++ b/ui/components/ui/list-item/index.scss
@@ -16,7 +16,7 @@
     'icon head     head     head     head     head     head     head     right right right right'
     'icon sub      sub      sub      sub      sub      sub      sub      right right right right'
     '.    actions  actions  actions  actions  actions  actions  actions  right right right right';
-  align-items: start;
+  align-items: flex-start;
   cursor: pointer;
 
   &:hover,
diff --git a/ui/components/ui/metafox-logo/__snapshots__/metafox-logo.component.test.js.snap b/ui/components/ui/metafox-logo/__snapshots__/metafox-logo.component.test.js.snap
new file mode 100644
index 000000000..fb8dcada7
--- /dev/null
+++ b/ui/components/ui/metafox-logo/__snapshots__/metafox-logo.component.test.js.snap
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MetaFoxLogo does not set icon height and width when unsetIconHeight is true 1`] = `
+<div>
+  <div
+    class="app-header__logo-container"
+    data-testid="app-header-logo"
+  >
+    <div />
+    <img
+      alt=""
+      class="app-header__metafox-logo--icon"
+      src="./images/logo/metamask-fox.svg"
+    />
+  </div>
+</div>
+`;
+
+exports[`MetaFoxLogo should match snapshot with img width and height default set to 42 1`] = `
+<div>
+  <div
+    class="app-header__logo-container"
+    data-testid="app-header-logo"
+  >
+    <div />
+    <img
+      alt=""
+      class="app-header__metafox-logo--icon"
+      height="42"
+      src="./images/logo/metamask-fox.svg"
+      width="42"
+    />
+  </div>
+</div>
+`;
diff --git a/ui/components/ui/metafox-logo/horizontal-logo.js b/ui/components/ui/metafox-logo/horizontal-logo.js
index 83940ef74..2229bffb4 100644
--- a/ui/components/ui/metafox-logo/horizontal-logo.js
+++ b/ui/components/ui/metafox-logo/horizontal-logo.js
@@ -6,8 +6,8 @@ const LOGO_HEIGHT = 30;
 const TEXT_COLOR = 'var(--color-text-default)';
 const FLASK_PILL_BACKGROUND = 'var(--color-overlay-alternative)';
 const FLASK_PILL_TEXT = 'var(--color-overlay-inverse)';
-const BETA_PILL_BACKGROUND = 'var(--color-warning-default)';
-const BETA_PIL_TEXT = 'var(--color-secondary-inverse)';
+const BETA_PILL_BACKGROUND = 'var(--color-primary-default)';
+const BETA_PIL_TEXT = 'var(--color-primary-inverse)';
 
 export default function MetaFoxHorizontalLogo({ className }) {
   switch (process.env.METAMASK_BUILD_TYPE) {
@@ -16,462 +16,304 @@ export default function MetaFoxHorizontalLogo({ className }) {
         <svg
           width={LOGO_WIDTH}
           height={LOGO_HEIGHT}
-          viewBox="0 0 1533 242"
+          viewBox="0 0 723 115"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
           className={className}
         >
-          <g clipPath="url(#clip0)">
+          <g clipPath="url(#clip0_3375_9161)">
             <path
-              d="M1157.95 121.694C1151.15 117.195 1143.65 113.996 1136.55 109.997C1131.95 107.398 1127.05 105.098 1123.05 101.799C1116.24 96.2 1117.64 85.2024 1124.75 80.4035C1134.95 73.605 1151.85 77.4042 1153.65 91.3011C1153.65 91.601 1153.95 91.801 1154.25 91.801H1169.66C1170.06 91.801 1170.36 91.501 1170.26 91.1011C1169.46 81.5033 1165.75 73.505 1158.95 68.4062C1152.45 63.5073 1145.05 60.9078 1137.15 60.9078C1096.44 60.9078 1092.74 103.998 1114.64 117.595C1117.14 119.195 1138.65 129.992 1146.25 134.691C1153.85 139.39 1156.25 147.988 1152.95 154.787C1149.95 160.986 1142.15 165.285 1134.35 164.785C1125.85 164.285 1119.24 159.686 1116.94 152.487C1116.54 151.188 1116.34 148.688 1116.34 147.589C1116.34 147.289 1116.04 146.989 1115.74 146.989H1099.04C1098.74 146.989 1098.44 147.289 1098.44 147.589C1098.44 159.686 1101.44 166.384 1109.64 172.483C1117.34 178.282 1125.75 180.681 1134.45 180.681C1157.25 180.681 1169.06 167.784 1171.46 154.387C1173.56 141.29 1169.66 129.493 1157.95 121.694V121.694Z"
+              d="M546.118 57.394C542.911 55.2721 539.373 53.7633 536.024 51.8772C533.854 50.6512 531.542 49.5668 529.655 48.0107C526.447 45.3702 527.108 40.1835 530.457 37.9202C535.269 34.7139 543.241 36.5057 544.09 43.0598C544.09 43.2012 544.232 43.2955 544.373 43.2955H551.638C551.826 43.2955 551.968 43.1541 551.921 42.9655C551.543 38.4389 549.798 34.6667 546.59 32.262C543.524 29.9515 540.033 28.7256 536.307 28.7256C517.107 28.7256 515.362 49.0481 525.693 55.4607C526.872 56.2152 537.014 61.3076 540.599 63.5237C544.184 65.7399 545.317 69.7949 543.76 73.0013C542.345 75.9247 538.665 77.9522 534.986 77.7165C530.976 77.4807 527.863 75.3117 526.778 71.9168C526.589 71.3038 526.495 70.125 526.495 69.6063C526.495 69.4649 526.353 69.3234 526.212 69.3234H518.334C518.192 69.3234 518.051 69.4649 518.051 69.6063C518.051 75.3117 519.466 78.4709 523.334 81.3472C526.966 84.082 530.929 85.2136 535.033 85.2136C545.788 85.2136 551.355 79.131 552.487 72.8127C553.477 66.6358 551.638 61.0718 546.118 57.394Z"
               fill={TEXT_COLOR}
             />
             <path
-              d="M432.694 63.1091H425.293H417.191C416.891 63.1091 416.691 63.3091 416.591 63.509L402.888 108.698C402.688 109.298 401.888 109.298 401.688 108.698L387.985 63.509C387.885 63.2091 387.685 63.1091 387.384 63.1091H379.283H371.881H361.879C361.579 63.1091 361.279 63.4091 361.279 63.709V179.082C361.279 179.382 361.579 179.682 361.879 179.682H378.583C378.883 179.682 379.183 179.382 379.183 179.082V91.4025C379.183 90.7027 380.183 90.6027 380.383 91.2025L394.186 136.692L395.186 139.891C395.286 140.191 395.486 140.291 395.786 140.291H408.589C408.889 140.291 409.089 140.091 409.189 139.891L410.189 136.692L423.992 91.2025C424.192 90.5027 425.193 90.7027 425.193 91.4025V179.082C425.193 179.382 425.493 179.682 425.793 179.682H442.496C442.796 179.682 443.097 179.382 443.097 179.082V63.709C443.097 63.4091 442.796 63.1091 442.496 63.1091H432.694Z"
+              d="M204.069 29.7638H200.578H196.757C196.616 29.7638 196.521 29.8581 196.474 29.9524L190.011 51.2648C189.917 51.5477 189.54 51.5477 189.445 51.2648L182.983 29.9524C182.935 29.8109 182.841 29.7638 182.7 29.7638H178.879H175.388H170.671C170.529 29.7638 170.388 29.9052 170.388 30.0467V84.4594C170.388 84.6008 170.529 84.7423 170.671 84.7423H178.548C178.69 84.7423 178.831 84.6008 178.831 84.4594V43.1076C178.831 42.7776 179.303 42.7304 179.398 43.0133L185.907 64.4672L186.379 65.9761C186.426 66.1175 186.521 66.1647 186.662 66.1647H192.7C192.842 66.1647 192.936 66.0704 192.983 65.9761L193.455 64.4672L199.965 43.0133C200.059 42.6833 200.531 42.7776 200.531 43.1076V84.4594C200.531 84.6008 200.672 84.7423 200.814 84.7423H208.692C208.833 84.7423 208.975 84.6008 208.975 84.4594V30.0467C208.975 29.9052 208.833 29.7638 208.692 29.7638H204.069Z"
               fill={TEXT_COLOR}
             />
             <path
-              d="M902.197 63.1091C901.897 63.1091 901.697 63.3091 901.597 63.509L887.894 108.698C887.694 109.298 886.894 109.298 886.694 108.698L872.991 63.509C872.891 63.2091 872.691 63.1091 872.39 63.1091H846.985C846.685 63.1091 846.385 63.4091 846.385 63.709V179.082C846.385 179.382 846.685 179.682 846.985 179.682H863.689C863.989 179.682 864.289 179.382 864.289 179.082V91.4025C864.289 90.7027 865.289 90.6027 865.489 91.2025L879.292 136.692L880.292 139.891C880.392 140.191 880.592 140.291 880.892 140.291H893.695C893.995 140.291 894.195 140.091 894.295 139.891L895.295 136.692L909.098 91.2025C909.299 90.5027 910.299 90.7027 910.299 91.4025V179.082C910.299 179.382 910.599 179.682 910.899 179.682H927.603C927.903 179.682 928.203 179.382 928.203 179.082V63.709C928.203 63.4091 927.903 63.1091 927.603 63.1091H902.197Z"
+              d="M425.498 29.7638C425.356 29.7638 425.262 29.8581 425.215 29.9524L418.752 51.2648C418.658 51.5477 418.28 51.5477 418.186 51.2648L411.723 29.9524C411.676 29.8109 411.582 29.7638 411.44 29.7638H399.458C399.317 29.7638 399.175 29.9052 399.175 30.0467V84.4594C399.175 84.6008 399.317 84.7423 399.458 84.7423H407.336C407.478 84.7423 407.619 84.6008 407.619 84.4594V43.1076C407.619 42.7776 408.091 42.7304 408.185 43.0133L414.695 64.4672L415.167 65.9761C415.214 66.1175 415.308 66.1647 415.45 66.1647H421.488C421.629 66.1647 421.724 66.0704 421.771 65.9761L422.243 64.4672L428.753 43.0133C428.847 42.6833 429.319 42.7776 429.319 43.1076V84.4594C429.319 84.6008 429.46 84.7423 429.602 84.7423H437.479C437.621 84.7423 437.763 84.6008 437.763 84.4594V30.0467C437.763 29.9052 437.621 29.7638 437.479 29.7638H425.498Z"
               fill={TEXT_COLOR}
             />
             <path
-              d="M686.749 63.1091H655.642H638.938H607.832C607.532 63.1091 607.231 63.4091 607.231 63.709V78.1056C607.231 78.4055 607.532 78.7055 607.832 78.7055H638.338V179.082C638.338 179.382 638.638 179.682 638.938 179.682H655.642C655.942 179.682 656.242 179.382 656.242 179.082V78.7055H686.749C687.049 78.7055 687.349 78.4055 687.349 78.1056V63.709C687.349 63.4091 687.149 63.1091 686.749 63.1091V63.1091Z"
+              d="M323.887 29.7638H309.216H301.339H286.668C286.526 29.7638 286.385 29.9052 286.385 30.0467V36.8365C286.385 36.978 286.526 37.1194 286.668 37.1194H301.056V84.4594C301.056 84.6008 301.197 84.7423 301.339 84.7423H309.216C309.358 84.7423 309.499 84.6008 309.499 84.4594V37.1194H323.887C324.029 37.1194 324.17 36.978 324.17 36.8365V30.0467C324.17 29.9052 324.076 29.7638 323.887 29.7638Z"
               fill={TEXT_COLOR}
             />
             <path
-              d="M785.272 179.681H800.475C800.875 179.681 801.175 179.281 801.075 178.881L769.668 63.1082C769.568 62.8082 769.368 62.7083 769.068 62.7083H763.267H753.065H747.264C746.964 62.7083 746.763 62.9082 746.663 63.1082L715.257 178.881C715.157 179.281 715.457 179.681 715.857 179.681H731.06C731.36 179.681 731.56 179.481 731.66 179.281L740.762 145.589C740.862 145.289 741.062 145.189 741.362 145.189H774.97C775.27 145.189 775.47 145.389 775.57 145.589L784.672 179.281C784.772 179.481 785.072 179.681 785.272 179.681V179.681ZM745.363 128.693L757.566 83.6034C757.766 83.0035 758.566 83.0035 758.766 83.6034L770.969 128.693C771.069 129.093 770.769 129.493 770.369 129.493H745.963C745.563 129.493 745.263 129.093 745.363 128.693V128.693Z"
+              d="M370.353 84.7419H377.523C377.712 84.7419 377.853 84.5533 377.806 84.3647L362.994 29.7633C362.947 29.6219 362.852 29.5747 362.711 29.5747H359.975H355.163H352.427C352.286 29.5747 352.191 29.669 352.144 29.7633L337.332 84.3647C337.285 84.5533 337.426 84.7419 337.615 84.7419H344.785C344.927 84.7419 345.021 84.6476 345.068 84.5533L349.361 68.6633C349.408 68.5218 349.503 68.4747 349.644 68.4747H365.494C365.636 68.4747 365.73 68.569 365.777 68.6633L370.07 84.5533C370.117 84.6476 370.259 84.7419 370.353 84.7419ZM351.531 60.6947L357.286 39.4294C357.38 39.1465 357.758 39.1465 357.852 39.4294L363.607 60.6947C363.654 60.8833 363.513 61.0719 363.324 61.0719H351.814C351.625 61.0719 351.484 60.8833 351.531 60.6947Z"
               fill={TEXT_COLOR}
             />
             <path
-              d="M1044.53 179.681H1059.73C1060.13 179.681 1060.43 179.281 1060.33 178.881L1028.93 63.1082C1028.83 62.8082 1028.63 62.7083 1028.33 62.7083H1022.52H1012.32H1006.52C1006.22 62.7083 1006.02 62.9082 1005.92 63.1082L974.514 178.881C974.414 179.281 974.714 179.681 975.114 179.681H990.317C990.618 179.681 990.818 179.481 990.918 179.281L1000.02 145.589C1000.12 145.289 1000.32 145.189 1000.62 145.189H1034.23C1034.53 145.189 1034.73 145.389 1034.83 145.589L1043.93 179.281C1044.03 179.481 1044.23 179.681 1044.53 179.681V179.681ZM1004.62 128.693L1016.82 83.6034C1017.02 83.0035 1017.82 83.0035 1018.02 83.6034L1030.23 128.693C1030.33 129.093 1030.03 129.493 1029.63 129.493H1005.22C1004.82 129.493 1004.52 129.093 1004.62 128.693V128.693Z"
+              d="M492.625 84.7419H499.795C499.984 84.7419 500.126 84.5533 500.078 84.3647L485.266 29.7633C485.219 29.6219 485.125 29.5747 484.983 29.5747H482.247H477.436H474.699C474.558 29.5747 474.464 29.669 474.416 29.7633L459.604 84.3647C459.557 84.5533 459.699 84.7419 459.887 84.7419H467.057C467.199 84.7419 467.293 84.6476 467.341 84.5533L471.633 68.6633C471.68 68.5218 471.775 68.4747 471.916 68.4747H487.766C487.908 68.4747 488.002 68.569 488.049 68.6633L492.342 84.5533C492.389 84.6476 492.484 84.7419 492.625 84.7419ZM473.803 60.6947L479.558 39.4294C479.653 39.1465 480.03 39.1465 480.124 39.4294L485.879 60.6947C485.927 60.8833 485.785 61.0719 485.596 61.0719H474.086C473.898 61.0719 473.756 60.8833 473.803 60.6947Z"
               fill={TEXT_COLOR}
             />
             <path
-              d="M510.909 162.584V126.793C510.909 126.493 511.209 126.193 511.509 126.193H556.019C556.319 126.193 556.619 125.893 556.619 125.593V111.196C556.619 110.896 556.319 110.596 556.019 110.596H511.509C511.209 110.596 510.909 110.296 510.909 109.997V79.4037C510.909 79.1038 511.209 78.8039 511.509 78.8039H562.121C562.421 78.8039 562.721 78.5039 562.721 78.204V63.8074C562.721 63.5074 562.421 63.2075 562.121 63.2075H510.909H493.606C493.305 63.2075 493.005 63.5074 493.005 63.8074V78.8039V110.696V126.293V163.284V179.08C493.005 179.38 493.305 179.68 493.606 179.68H510.909H564.221C564.521 179.68 564.821 179.38 564.821 179.08V163.884C564.821 163.584 564.521 163.284 564.221 163.284H511.409C511.109 163.184 510.909 162.984 510.909 162.584Z"
+              d="M240.957 76.6786V59.7985C240.957 59.657 241.098 59.5155 241.24 59.5155H262.232C262.373 59.5155 262.515 59.3741 262.515 59.2326V52.4428C262.515 52.3014 262.373 52.1599 262.232 52.1599H241.24C241.098 52.1599 240.957 52.0185 240.957 51.877V37.4487C240.957 37.3073 241.098 37.1658 241.24 37.1658H265.109C265.251 37.1658 265.392 37.0243 265.392 36.8829V30.0931C265.392 29.9516 265.251 29.8102 265.109 29.8102H240.957H232.796C232.654 29.8102 232.513 29.9516 232.513 30.0931V37.1658V52.2071V59.5627V77.0087V84.4586C232.513 84.6001 232.654 84.7415 232.796 84.7415H240.957H266.1C266.242 84.7415 266.383 84.6001 266.383 84.4586V77.2916C266.383 77.1502 266.242 77.0087 266.1 77.0087H241.193C241.051 76.9616 240.957 76.8673 240.957 76.6786Z"
               fill={TEXT_COLOR}
             />
             <path
-              d="M1310.58 178.681L1252.77 118.995C1252.57 118.795 1252.57 118.395 1252.77 118.195L1304.78 64.2074C1305.18 63.8075 1304.88 63.2076 1304.38 63.2076H1283.08C1282.88 63.2076 1282.78 63.3076 1282.68 63.4076L1238.57 109.197C1238.17 109.597 1237.57 109.297 1237.57 108.797V63.8075C1237.57 63.5076 1237.27 63.2076 1236.97 63.2076H1220.26C1219.96 63.2076 1219.66 63.5076 1219.66 63.8075V179.181C1219.66 179.48 1219.96 179.78 1220.26 179.78H1236.97C1237.27 179.78 1237.57 179.48 1237.57 179.181V128.392C1237.57 127.893 1238.27 127.593 1238.57 127.993L1288.58 179.58C1288.68 179.68 1288.88 179.78 1288.98 179.78H1310.28C1310.68 179.68 1310.98 178.981 1310.58 178.681V178.681Z"
+              d="M618.103 84.2701L590.837 56.1207C590.742 56.0264 590.742 55.8378 590.837 55.7435L615.367 30.2817C615.555 30.0931 615.414 29.8102 615.178 29.8102H605.13C605.036 29.8102 604.989 29.8573 604.941 29.9045L584.138 51.4998C583.95 51.6884 583.667 51.547 583.667 51.3112V30.0931C583.667 29.9516 583.525 29.8102 583.384 29.8102H575.506C575.364 29.8102 575.223 29.9516 575.223 30.0931V84.5058C575.223 84.6473 575.364 84.7887 575.506 84.7887H583.384C583.525 84.7887 583.667 84.6473 583.667 84.5058V60.5529C583.667 60.3172 583.997 60.1757 584.138 60.3643L607.725 84.6944C607.772 84.7416 607.866 84.7887 607.913 84.7887H617.961C618.15 84.7416 618.291 84.4115 618.103 84.2701Z"
               fill={TEXT_COLOR}
             />
             <path
-              d="M1512.38 110.091H1359.98C1348.59 110.091 1339.36 100.86 1339.36 89.4845V44.6061C1339.36 33.231 1348.59 24 1359.98 24H1512.38C1523.76 24 1533 33.231 1533 44.6061V89.4845C1533 100.876 1523.76 110.091 1512.38 110.091Z"
+              d="M713.276 103.602H641.398C636.03 103.602 631.674 99.2489 631.674 93.8841V72.7183C631.674 67.3536 636.03 63 641.398 63H713.276C718.644 63 723 67.3536 723 72.7183V93.8841C723 99.2566 718.644 103.602 713.276 103.602Z"
               fill={BETA_PILL_BACKGROUND}
             />
             <path
-              d="M1371.47 48.027H1386.48C1388.08 48.027 1389.62 48.3377 1391.06 48.9592C1392.5 49.5807 1393.76 50.4149 1394.86 51.478C1395.94 52.5411 1396.79 53.8004 1397.41 55.2397C1398.04 56.679 1398.35 58.2164 1398.35 59.8683C1398.35 61.2912 1398.09 62.567 1397.56 63.7118C1397.04 64.8567 1396.35 65.8544 1395.48 66.7213C1397.17 67.5881 1398.53 68.8311 1399.59 70.483C1400.64 72.1349 1401.17 74.0158 1401.17 76.1583C1401.17 77.8102 1400.85 79.3313 1400.23 80.7542C1399.61 82.1771 1398.76 83.4202 1397.68 84.4833C1396.6 85.5464 1395.3 86.3805 1393.83 86.9856C1392.35 87.5908 1390.75 87.8852 1389.03 87.8852H1371.49V48.027H1371.47ZM1385.46 64.1371C1386.66 64.1371 1387.65 63.7609 1388.44 62.9922C1389.23 62.2235 1389.62 61.3076 1389.62 60.2118C1389.62 59.1323 1389.23 58.1837 1388.44 57.3823C1387.65 56.5809 1386.66 56.172 1385.46 56.172H1380.4V64.1371H1385.46V64.1371ZM1388.28 79.6748C1389.47 79.6748 1390.47 79.2986 1391.26 78.5299C1392.04 77.7612 1392.44 76.8126 1392.44 75.7004C1392.44 74.6209 1392.03 73.6723 1391.22 72.8873C1390.42 72.1022 1389.42 71.7097 1388.21 71.7097H1380.4V79.6748H1388.28Z"
+              d="M646.82 74.3317H653.895C654.652 74.3317 655.378 74.4782 656.058 74.7713C656.737 75.0645 657.332 75.4579 657.85 75.9592C658.359 76.4606 658.761 77.0546 659.055 77.7334C659.348 78.4122 659.495 79.1373 659.495 79.9163C659.495 80.5874 659.371 81.1891 659.124 81.729C658.877 82.269 658.553 82.7395 658.143 83.1483C658.939 83.5572 659.58 84.1434 660.082 84.9225C660.576 85.7015 660.823 86.5886 660.823 87.5991C660.823 88.3782 660.677 89.0955 660.383 89.7666C660.09 90.4377 659.688 91.024 659.178 91.5253C658.668 92.0267 658.058 92.4201 657.363 92.7055C656.668 92.9909 655.911 93.1298 655.1 93.1298H646.828V74.3317H646.82ZM653.416 81.9296C653.98 81.9296 654.451 81.7522 654.822 81.3896C655.193 81.0271 655.378 80.5951 655.378 80.0783C655.378 79.5692 655.193 79.1218 654.822 78.7439C654.451 78.3659 653.98 78.1731 653.416 78.1731H651.03V81.9296H653.416V81.9296ZM654.745 89.2575C655.309 89.2575 655.78 89.0801 656.15 88.7176C656.521 88.355 656.707 87.9076 656.707 87.3831C656.707 86.874 656.513 86.4266 656.135 86.0564C655.757 85.6861 655.285 85.501 654.714 85.501H651.03V89.2575H654.745Z"
               fill={BETA_PIL_TEXT}
             />
             <path
-              d="M1407.16 48.0112H1432.45V56.5488H1416.08V63.6798H1429.07V72.2173H1416.08V79.3483H1432.45V87.8858H1407.16V48.0112Z"
+              d="M663.65 74.3242H675.576V78.3507H667.86V81.7139H673.985V85.7404H667.86V89.1035H675.576V93.13H663.65V74.3242Z"
               fill={BETA_PIL_TEXT}
             />
             <path
-              d="M1446.43 56.5311H1436.26V47.9935H1465.71V56.5311H1455.42V87.8518H1446.43V56.5311Z"
+              d="M682.172 78.3424H677.376V74.3159H691.263V78.3424H686.412V93.114H682.172V78.3424Z"
               fill={BETA_PIL_TEXT}
             />
             <path
-              d="M1479.92 48.0112H1488.01L1505.09 87.8531H1495.76L1492.22 79.43H1475.69L1472.16 87.8531H1462.82L1479.92 48.0112ZM1478.92 71.6939H1488.98L1483.98 59.7381L1478.92 71.6939Z"
+              d="M697.966 74.3242H701.782L709.838 93.1146H705.435L703.767 89.1421H695.973L694.305 93.1146H689.902L697.966 74.3242ZM697.495 85.4935H702.237L699.882 79.8549L697.495 85.4935Z"
               fill={BETA_PIL_TEXT}
             />
-            <g clipPath="url(#clip1)">
-              <path
-                d="M145.555 130.761L149.839 72.3187L167.281 30.6899H92.7188L110.161 72.3187L114.445 130.761L115.771 149.195L115.873 194.572H144.127L144.229 149.195L145.555 130.761Z"
-                fill="url(#paint0_linear)"
-              />
-              <path
-                d="M240.11 119.518L186.764 104.021L202.88 128.229L178.808 174.821L210.632 174.416H257.96L240.11 119.518Z"
-                fill="url(#paint1_linear)"
-              />
-              <path
-                d="M73.2366 104.021L19.8902 119.518L2.14209 174.416H49.4705L81.1927 174.821L57.1205 128.229L73.2366 104.021Z"
-                fill="url(#paint2_linear)"
-              />
-              <path
-                d="M150.859 160.033L144.127 194.572L149.023 197.914L178.807 174.821L179.725 151.626L150.859 160.033Z"
-                fill="url(#paint3_linear)"
-              />
-              <path
-                d="M80.3765 151.626L81.1925 174.821L110.977 197.914L115.873 194.572L109.141 160.033L80.3765 151.626Z"
-                fill="url(#paint4_linear)"
-              />
-              <path
-                d="M251.432 79.7125L260 38.3876L247.148 0L149.023 72.3186L185.642 104.933L240.11 119.518L251.84 105.844L246.74 102.198L254.9 94.8042L248.678 89.9425L256.838 83.764L251.432 79.7125Z"
-                fill="url(#paint5_linear)"
-              />
-              <path
-                d="M0 38.3876L8.67007 79.7125L3.16202 83.764L11.3221 89.9425L5.10004 94.8042L13.2601 102.198L8.16006 105.844L19.8902 119.518L74.4606 104.933L110.977 72.3186L12.8521 0L0 38.3876Z"
-                fill="url(#paint6_linear)"
-              />
-              <path
-                d="M57.1206 128.229L80.3768 151.626L81.1928 174.821L57.1206 128.229Z"
-                fill="url(#paint7_linear)"
-              />
-              <path
-                d="M202.88 128.229L178.808 174.821L179.726 151.626L202.88 128.229Z"
-                fill="url(#paint8_linear)"
-              />
-              <path
-                d="M183.602 214.626L149.023 197.914L151.777 220.298L151.471 229.718L183.602 214.626Z"
-                fill="#D7C1B3"
-                stroke="#D7C1B3"
-                strokeWidth="1.42167"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-              <path
-                d="M76.3989 214.626L108.529 229.718L108.325 220.298L110.977 197.914L76.3989 214.626Z"
-                fill="#D7C1B3"
-                stroke="#D7C1B3"
-                strokeWidth="1.42167"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-              <path
-                d="M210.632 174.415L183.602 214.626L241.436 230.427L257.96 174.415H210.632Z"
-                fill="url(#paint9_linear)"
-              />
-              <path
-                d="M2.14209 174.415L18.5642 230.427L76.3987 214.626L49.4705 174.415H2.14209Z"
-                fill="url(#paint10_linear)"
-              />
-              <path
-                d="M12.8521 0L110.977 72.3186L95.5747 30.6898L12.8521 0Z"
-                fill="url(#paint11_linear)"
-              />
-              <path
-                d="M164.425 30.6898L149.023 72.3186L247.148 0L164.425 30.6898Z"
-                fill="url(#paint12_linear)"
-              />
-              <path
-                d="M73.2367 104.021L57.1206 128.229L114.445 130.761L110.977 72.3186L73.2367 104.021Z"
-                fill="url(#paint13_linear)"
-              />
-              <path
-                d="M186.763 104.021L149.023 72.3186L145.555 130.761L202.879 128.229L186.763 104.021Z"
-                fill="url(#paint14_linear)"
-              />
-              <path
-                d="M76.3989 214.626L110.977 197.914L81.193 174.821L76.3989 214.626Z"
-                fill="url(#paint15_linear)"
-              />
-              <path
-                d="M149.023 197.914L183.602 214.626L178.808 174.821L149.023 197.914Z"
-                fill="url(#paint16_linear)"
-              />
-              <path
-                d="M76.3989 214.626L81.1929 174.82L49.4707 174.415L76.3989 214.626Z"
-                fill="url(#paint17_linear)"
-              />
-              <path
-                d="M178.808 174.82L183.602 214.626L210.632 174.415L178.808 174.82Z"
-                fill="url(#paint18_linear)"
-              />
-              <path
-                d="M202.88 128.229L145.556 130.761L150.86 160.033L159.326 142.409L179.726 151.626L202.88 128.229Z"
-                fill="url(#paint19_linear)"
-              />
-              <path
-                d="M80.3773 151.626L100.675 142.409L109.141 160.033L114.446 130.761L57.1211 128.229L80.3773 151.626Z"
-                fill="url(#paint20_linear)"
-              />
-              <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M144.229 149.195L150.859 160.033L145.555 130.761L144.229 149.195ZM144.229 149.195L144.229 149.195L144.127 194.571L150.859 160.033L144.229 149.195Z"
-                fill="url(#paint21_linear)"
-              />
-              <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M114.445 130.761L109.141 160.033L115.873 194.571L115.771 149.195L115.771 149.195L114.445 130.761Z"
-                fill="url(#paint22_linear)"
-              />
-              <path
-                d="M151.655 229.596L151.778 220.298L149.228 218.07H110.773L108.325 220.298L108.529 229.718L76.3989 214.626L87.619 223.742L110.467 239.441H149.534L172.382 223.742L183.602 214.626L151.655 229.596Z"
-                fill="#C0AD9E"
-                stroke="#C0AD9E"
-                strokeWidth="1.42167"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-              <path
-                d="M149.023 197.914L144.127 194.571H115.873L110.977 197.914L108.325 220.298L110.773 218.07H149.227L151.777 220.298L149.023 197.914Z"
-                fill="#161616"
-                stroke="#161616"
-                strokeWidth="0.142167"
-                strokeMiterlimit="10"
-                strokeLinejoin="round"
-              />
-              <path
-                d="M159.325 142.409L150.859 160.033L179.726 151.626L159.325 142.409Z"
-                fill="#161616"
-              />
-              <path
-                d="M100.675 142.409L109.141 160.033L80.377 151.626L100.675 142.409Z"
-                fill="#161616"
-              />
-            </g>
+            <path
+              d="M116.318 0L68.514 35.3718L77.4034 14.526L116.318 0Z"
+              fill="#E17726"
+              stroke="#E17726"
+              strokeWidth="0.353718"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M6.05249 0L53.4311 35.702L44.9672 14.526L6.05249 0Z"
+              fill="#E27625"
+              stroke="#E27625"
+              strokeWidth="0.353718"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M99.1075 82.0154L86.3881 101.446L113.624 108.945L121.426 82.4398L99.1075 82.0154Z"
+              fill="#E27625"
+              stroke="#E27625"
+              strokeWidth="0.353718"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M0.99292 82.4398L8.7475 108.945L35.9358 101.446L23.2637 82.0154L0.99292 82.4398Z"
+              fill="#E27625"
+              stroke="#E27625"
+              strokeWidth="0.353718"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M34.4699 49.1904L26.9044 60.6037L53.8563 61.83L52.9579 32.8251L34.4699 49.1904Z"
+              fill="#E27625"
+              stroke="#E27625"
+              strokeWidth="0.353718"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M87.9012 49.1902L69.1295 32.4948L68.5148 61.8298L95.4667 60.6035L87.9012 49.1902Z"
+              fill="#E27625"
+              stroke="#E27625"
+              strokeWidth="0.353718"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M35.9357 101.446L52.2487 93.5703L38.2053 82.6287L35.9357 101.446Z"
+              fill="#E27625"
+              stroke="#E27625"
+              strokeWidth="0.353718"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M70.1218 93.5703L86.3875 101.446L84.1652 82.6287L70.1218 93.5703Z"
+              fill="#E27625"
+              stroke="#E27625"
+              strokeWidth="0.353718"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M86.3879 101.446L70.1222 93.5702L71.4461 104.135L71.3043 108.615L86.3879 101.446Z"
+              fill="#D5BFB2"
+              stroke="#D5BFB2"
+              strokeWidth="0.353718"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M35.9359 101.446L51.0668 108.615L50.9722 104.135L52.2489 93.5703L35.9359 101.446Z"
+              fill="#D5BFB2"
+              stroke="#D5BFB2"
+              strokeWidth="0.353718"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M51.3504 75.6485L37.8271 71.6869L47.3785 67.3008L51.3504 75.6485Z"
+              fill="#233447"
+              stroke="#233447"
+              strokeWidth="0.353718"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M71.0199 75.6485L74.9918 67.3008L84.5904 71.6869L71.0199 75.6485Z"
+              fill="#233447"
+              stroke="#233447"
+              strokeWidth="0.353718"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M35.9357 101.446L38.2999 82.0154L23.2635 82.4398L35.9357 101.446Z"
+              fill="#CC6228"
+              stroke="#CC6228"
+              strokeWidth="0.353718"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M84.0706 82.0154L86.3875 101.446L99.1069 82.4398L84.0706 82.0154Z"
+              fill="#CC6228"
+              stroke="#CC6228"
+              strokeWidth="0.353718"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M95.4661 60.6036L68.5142 61.8299L71.0202 75.6484L74.9921 67.3007L84.5907 71.6868L95.4661 60.6036Z"
+              fill="#CC6228"
+              stroke="#CC6228"
+              strokeWidth="0.353718"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M37.827 71.6868L47.3784 67.3007L51.3503 75.6484L53.8563 61.8299L26.9044 60.6036L37.827 71.6868Z"
+              fill="#CC6228"
+              stroke="#CC6228"
+              strokeWidth="0.353718"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M26.9044 60.6038L38.2053 82.6286L37.827 71.6869L26.9044 60.6038Z"
+              fill="#E27525"
+              stroke="#E27525"
+              strokeWidth="0.353718"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M84.5912 71.6868L84.1656 82.6285L95.4665 60.6036L84.5912 71.6868Z"
+              fill="#E27525"
+              stroke="#E27525"
+              strokeWidth="0.353718"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M53.8565 61.83L51.3505 75.6485L54.5185 91.9667L55.2278 70.4607L53.8565 61.83Z"
+              fill="#E27525"
+              stroke="#E27525"
+              strokeWidth="0.353718"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M68.5146 61.83L67.1907 70.4135L67.8526 91.9667L71.0207 75.6485L68.5146 61.83Z"
+              fill="#E27525"
+              stroke="#E27525"
+              strokeWidth="0.353718"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M71.0207 75.6484L67.8527 91.9666L70.1223 93.5701L84.1656 82.6284L84.5912 71.6868L71.0207 75.6484Z"
+              fill="#F5841F"
+              stroke="#F5841F"
+              strokeWidth="0.353718"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M37.8271 71.6868L38.2054 82.6284L52.2488 93.5701L54.5184 91.9666L51.3504 75.6484L37.8271 71.6868Z"
+              fill="#F5841F"
+              stroke="#F5841F"
+              strokeWidth="0.353718"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M71.3044 108.615L71.4462 104.135L70.2168 103.097H52.1543L50.9722 104.135L51.0668 108.615L35.9359 101.446L41.2317 105.785L51.9652 113.19H70.3587L81.1394 105.785L86.388 101.446L71.3044 108.615Z"
+              fill="#C0AC9D"
+              stroke="#C0AC9D"
+              strokeWidth="0.353718"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M70.122 93.5702L67.8523 91.9667H54.5182L52.2486 93.5702L50.9719 104.135L52.154 103.097H70.2165L71.4459 104.135L70.122 93.5702Z"
+              fill="#161616"
+              stroke="#161616"
+              strokeWidth="0.353718"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M118.352 37.6828L122.371 18.1575L116.319 0L70.1222 34.1928L87.901 49.1904L113.009 56.5006L118.541 50.0393L116.13 48.2943L119.96 44.8043L117.028 42.5405L120.858 39.6164L118.352 37.6828Z"
+              fill="#763E1A"
+              stroke="#763E1A"
+              strokeWidth="0.353718"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M0 18.1575L4.06643 37.6828L1.4658 39.6164L5.34309 42.5405L2.41149 44.8043L6.24149 48.2943L3.83001 50.0393L9.36224 56.5006L34.4701 49.1904L52.2488 34.1928L6.05236 0L0 18.1575Z"
+              fill="#763E1A"
+              stroke="#763E1A"
+              strokeWidth="0.353718"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M113.009 56.5005L87.9011 49.1903L95.4665 60.6036L84.1656 82.6285L99.1074 82.4398H121.425L113.009 56.5005Z"
+              fill="#F5841F"
+              stroke="#F5841F"
+              strokeWidth="0.353718"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M34.47 49.1903L9.36219 56.5005L0.99292 82.4398H23.2637L38.2054 82.6285L26.9046 60.6036L34.47 49.1903Z"
+              fill="#F5841F"
+              stroke="#F5841F"
+              strokeWidth="0.353718"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M68.5148 61.83L70.1225 34.1929L77.4042 14.5261H44.9674L52.2491 34.1929L53.8568 61.83L54.4715 70.5079L54.5188 91.9668H67.8529L67.9002 70.5079L68.5148 61.83Z"
+              fill="#F5841F"
+              stroke="#F5841F"
+              strokeWidth="0.353718"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
           </g>
           <defs>
-            <linearGradient
-              id="paint0_linear"
-              x1="130"
-              y1="30.6899"
-              x2="130"
-              y2="194.572"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stopColor="#21FF47" />
-              <stop offset="1" stopColor="#BCD8F0" />
-            </linearGradient>
-            <linearGradient
-              id="paint1_linear"
-              x1="218.384"
-              y1="104.021"
-              x2="218.384"
-              y2="174.821"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stopColor="#1CAD68" />
-              <stop offset="1" stopColor="#77BDD4" />
-            </linearGradient>
-            <linearGradient
-              id="paint2_linear"
-              x1="41.6674"
-              y1="104.021"
-              x2="41.6674"
-              y2="174.821"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stopColor="#1CAD68" />
-              <stop offset="1" stopColor="#77BDD4" />
-            </linearGradient>
-            <linearGradient
-              id="paint3_linear"
-              x1="161.926"
-              y1="151.626"
-              x2="161.926"
-              y2="197.914"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stopColor="#7BCBC8" />
-              <stop offset="1" stopColor="#87B9E6" />
-            </linearGradient>
-            <linearGradient
-              id="paint4_linear"
-              x1="98.1246"
-              y1="151.626"
-              x2="98.1246"
-              y2="197.914"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stopColor="#7BCBC8" />
-              <stop offset="1" stopColor="#87B9E6" />
-            </linearGradient>
-            <linearGradient
-              id="paint5_linear"
-              x1="204.512"
-              y1="0"
-              x2="204.512"
-              y2="119.518"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stopColor="#007715" />
-              <stop offset="1" stopColor="#0A3424" />
-            </linearGradient>
-            <linearGradient
-              id="paint6_linear"
-              x1="55.4884"
-              y1="0"
-              x2="55.4884"
-              y2="119.518"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stopColor="#007715" />
-              <stop offset="1" stopColor="#0A3424" />
-            </linearGradient>
-            <linearGradient
-              id="paint7_linear"
-              x1="69.1567"
-              y1="128.229"
-              x2="69.1567"
-              y2="174.821"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stopColor="#42C4A0" />
-              <stop offset="1" stopColor="#51ACC7" />
-            </linearGradient>
-            <linearGradient
-              id="paint8_linear"
-              x1="190.844"
-              y1="128.229"
-              x2="190.844"
-              y2="174.821"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stopColor="#42C4A0" />
-              <stop offset="1" stopColor="#51ACC7" />
-            </linearGradient>
-            <linearGradient
-              id="paint9_linear"
-              x1="220.781"
-              y1="174.415"
-              x2="220.781"
-              y2="230.427"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stopColor="#5BAECB" />
-              <stop offset="1" stopColor="#4160C1" />
-            </linearGradient>
-            <linearGradient
-              id="paint10_linear"
-              x1="39.2704"
-              y1="174.415"
-              x2="39.2704"
-              y2="230.427"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stopColor="#5BAECB" />
-              <stop offset="1" stopColor="#4160C1" />
-            </linearGradient>
-            <linearGradient
-              id="paint11_linear"
-              x1="61.9144"
-              y1="0"
-              x2="61.9144"
-              y2="72.3186"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stopColor="#01EA28" />
-              <stop offset="1" stopColor="#10D24F" />
-            </linearGradient>
-            <linearGradient
-              id="paint12_linear"
-              x1="198.085"
-              y1="0"
-              x2="198.085"
-              y2="72.3186"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stopColor="#01EA28" />
-              <stop offset="1" stopColor="#10D24F" />
-            </linearGradient>
-            <linearGradient
-              id="paint13_linear"
-              x1="85.7828"
-              y1="72.3186"
-              x2="85.7828"
-              y2="130.761"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stopColor="#12DB56" />
-              <stop offset="1" stopColor="#4CC9A3" />
-            </linearGradient>
-            <linearGradient
-              id="paint14_linear"
-              x1="174.217"
-              y1="72.3186"
-              x2="174.217"
-              y2="130.761"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stopColor="#12DB56" />
-              <stop offset="1" stopColor="#4CC9A3" />
-            </linearGradient>
-            <linearGradient
-              id="paint15_linear"
-              x1="93.6881"
-              y1="174.821"
-              x2="93.6881"
-              y2="214.626"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stopColor="#5BAECB" />
-              <stop offset="1" stopColor="#4160C1" />
-            </linearGradient>
-            <linearGradient
-              id="paint16_linear"
-              x1="166.313"
-              y1="174.821"
-              x2="166.313"
-              y2="214.626"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stopColor="#5BAECB" />
-              <stop offset="1" stopColor="#4160C1" />
-            </linearGradient>
-            <linearGradient
-              id="paint17_linear"
-              x1="65.3318"
-              y1="174.415"
-              x2="65.3318"
-              y2="214.626"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stopColor="#32809D" />
-              <stop offset="1" stopColor="#477DD5" />
-            </linearGradient>
-            <linearGradient
-              id="paint18_linear"
-              x1="194.72"
-              y1="174.415"
-              x2="194.72"
-              y2="214.626"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stopColor="#32809D" />
-              <stop offset="1" stopColor="#477DD5" />
-            </linearGradient>
-            <linearGradient
-              id="paint19_linear"
-              x1="174.218"
-              y1="128.229"
-              x2="174.218"
-              y2="160.033"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stopColor="#239777" />
-              <stop offset="1" stopColor="#2C8A8D" />
-            </linearGradient>
-            <linearGradient
-              id="paint20_linear"
-              x1="85.7833"
-              y1="128.229"
-              x2="85.7833"
-              y2="160.033"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stopColor="#239777" />
-              <stop offset="1" stopColor="#2C8A8D" />
-            </linearGradient>
-            <linearGradient
-              id="paint21_linear"
-              x1="147.493"
-              y1="130.761"
-              x2="147.493"
-              y2="194.571"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stopColor="#42C4A0" />
-              <stop offset="1" stopColor="#51ACC7" />
-            </linearGradient>
-            <linearGradient
-              id="paint22_linear"
-              x1="112.507"
-              y1="130.761"
-              x2="112.507"
-              y2="194.571"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stopColor="#42C4A0" />
-              <stop offset="1" stopColor="#51ACC7" />
-            </linearGradient>
-            <clipPath id="clip0">
-              <rect width="1533" height="242" fill="white" />
-            </clipPath>
-            <clipPath id="clip1">
-              <rect width="260" height="239.948" fill="white" />
+            <clipPath id="clip0_3375_9161">
+              <rect
+                width="723"
+                height="114.133"
+                fill="var(--color-text-default)"
+              />
             </clipPath>
           </defs>
         </svg>
diff --git a/ui/components/ui/metafox-logo/metafox-logo.component.test.js b/ui/components/ui/metafox-logo/metafox-logo.component.test.js
index 819281291..e8c680a83 100644
--- a/ui/components/ui/metafox-logo/metafox-logo.component.test.js
+++ b/ui/components/ui/metafox-logo/metafox-logo.component.test.js
@@ -1,27 +1,22 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import MetaFoxLogo from '.';
 
-describe('MetaFoxLogo', () => {
-  it('sets icon height and width to 42 by default', () => {
-    const wrapper = mount(<MetaFoxLogo />);
+// eslint-disable-next-line react/display-name
+jest.mock('./horizontal-logo.js', () => () => {
+  return <div></div>;
+});
 
-    expect(
-      wrapper.find('img.app-header__metafox-logo--icon').prop('width'),
-    ).toStrictEqual(42);
-    expect(
-      wrapper.find('img.app-header__metafox-logo--icon').prop('height'),
-    ).toStrictEqual(42);
+describe('MetaFoxLogo', () => {
+  it('should match snapshot with img width and height default set to 42', () => {
+    const { container } = renderWithProvider(<MetaFoxLogo />);
+
+    expect(container).toMatchSnapshot();
   });
 
   it('does not set icon height and width when unsetIconHeight is true', () => {
-    const wrapper = mount(<MetaFoxLogo unsetIconHeight />);
+    const { container } = renderWithProvider(<MetaFoxLogo unsetIconHeight />);
 
-    expect(
-      wrapper.find('img.app-header__metafox-logo--icon').prop('width'),
-    ).toBeUndefined();
-    expect(
-      wrapper.find('img.app-header__metafox-logo--icon').prop('height'),
-    ).toBeUndefined();
+    expect(container).toMatchSnapshot();
   });
 });
diff --git a/ui/components/ui/metafox-logo/metafox-logo.stories.js b/ui/components/ui/metafox-logo/metafox-logo.stories.js
new file mode 100644
index 000000000..5305eaf30
--- /dev/null
+++ b/ui/components/ui/metafox-logo/metafox-logo.stories.js
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import Typography from '../typography';
+
+import MetaFoxLogo from '.';
+
+export default {
+  title: 'Components/UI/MetaFoxLogo',
+  id: __filename,
+  argTypes: {
+    onClick: {
+      action: 'onClick',
+    },
+    unsetIconHeight: {
+      control: 'boolean',
+    },
+    isOnboarding: {
+      control: 'boolean',
+    },
+  },
+};
+
+export const DefaultStory = (args) => (
+  <>
+    <MetaFoxLogo {...args} />
+    <Typography marginTop={4} as="p">
+      To view the different logo types change the build type in:
+      ui/components/ui/metafox-logo/horizontal-logo.js
+    </Typography>
+  </>
+);
+
+DefaultStory.storyName = 'Default';
diff --git a/ui/components/ui/nft-collection-image/index.js b/ui/components/ui/nft-collection-image/index.js
new file mode 100644
index 000000000..f0e431372
--- /dev/null
+++ b/ui/components/ui/nft-collection-image/index.js
@@ -0,0 +1 @@
+export { default } from './nft-collection-image';
diff --git a/ui/components/ui/nft-collection-image/index.scss b/ui/components/ui/nft-collection-image/index.scss
new file mode 100644
index 000000000..677f3c3f1
--- /dev/null
+++ b/ui/components/ui/nft-collection-image/index.scss
@@ -0,0 +1,7 @@
+.collection-image-alt {
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  padding: 2px;
+  background: var(--color-overlay-alternative);
+}
diff --git a/ui/components/ui/nft-collection-image/nft-collection-image.js b/ui/components/ui/nft-collection-image/nft-collection-image.js
new file mode 100644
index 000000000..8b0c0d25b
--- /dev/null
+++ b/ui/components/ui/nft-collection-image/nft-collection-image.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import Box from '../box';
+import { COLORS, TEXT_ALIGN } from '../../../helpers/constants/design-system';
+import Identicon from '../identicon';
+import { getTokenList } from '../../../selectors';
+import { useCollectiblesCollections } from '../../../hooks/useCollectiblesCollections';
+
+export default function NftCollectionImage({ assetName, tokenAddress }) {
+  const { collections } = useCollectiblesCollections();
+  const tokenList = useSelector(getTokenList);
+  const nftTokenListImage = tokenList[tokenAddress.toLowerCase()]?.iconUrl;
+
+  const renderCollectionImageOrName = () => {
+    const collection = Object.values(collections).find(
+      ({ collectionName }) => collectionName === assetName,
+    );
+
+    if (collection?.collectionImage || nftTokenListImage) {
+      return (
+        <Identicon
+          diameter={24}
+          image={collection?.collectionImage || nftTokenListImage}
+        />
+      );
+    }
+    return (
+      <Box
+        color={COLORS.OVERLAY_INVERSE}
+        textAlign={TEXT_ALIGN.CENTER}
+        className="collection-image-alt"
+      >
+        {assetName?.[0]?.toUpperCase() ?? null}
+      </Box>
+    );
+  };
+
+  return <Box>{renderCollectionImageOrName()}</Box>;
+}
+
+NftCollectionImage.propTypes = {
+  assetName: PropTypes.string,
+  tokenAddress: PropTypes.string,
+};
diff --git a/ui/components/ui/page-container/index.scss b/ui/components/ui/page-container/index.scss
index 2d83913b0..5967d2547 100644
--- a/ui/components/ui/page-container/index.scss
+++ b/ui/components/ui/page-container/index.scss
@@ -155,7 +155,7 @@
     background: var(--color-error-muted);
     padding: 20px;
     display: flex;
-    align-items: start;
+    align-items: flex-start;
   }
 
   &__warning-message {
diff --git a/ui/components/ui/page-container/page-container-footer/__snapshots__/page-container-footer.component.test.js.snap b/ui/components/ui/page-container/page-container-footer/__snapshots__/page-container-footer.component.test.js.snap
new file mode 100644
index 000000000..d738bd4b1
--- /dev/null
+++ b/ui/components/ui/page-container/page-container-footer/__snapshots__/page-container-footer.component.test.js.snap
@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Page Footer should match snapshot 1`] = `
+<div>
+  <div
+    class="page-container__footer"
+  >
+    <footer>
+      <button
+        class="button btn--rounded btn-secondary page-container__footer-button"
+        data-testid="page-container-footer-cancel"
+        role="button"
+        tabindex="0"
+      >
+        Cancel
+      </button>
+      <button
+        class="button btn--rounded btn-default page-container__footer-button"
+        data-testid="page-container-footer-next"
+        role="button"
+        tabindex="0"
+      >
+        Submit
+      </button>
+    </footer>
+  </div>
+</div>
+`;
+
+exports[`Page Footer should render a secondary footer inside page-container__footer when given children 1`] = `
+<div>
+  <div
+    class="page-container__footer"
+  >
+    <footer>
+      <button
+        class="button btn--rounded btn-secondary page-container__footer-button"
+        data-testid="page-container-footer-cancel"
+        role="button"
+        tabindex="0"
+      >
+        [cancel]
+      </button>
+      <button
+        class="button btn--rounded btn-primary page-container__footer-button"
+        data-testid="page-container-footer-next"
+        role="button"
+        tabindex="0"
+      >
+        [next]
+      </button>
+    </footer>
+    <div
+      class="page-container__footer-secondary"
+    >
+      <div>
+        Works
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/ui/components/ui/page-container/page-container-footer/page-container-footer.component.test.js b/ui/components/ui/page-container/page-container-footer/page-container-footer.component.test.js
index 0cf5d6f93..7c9bc6758 100644
--- a/ui/components/ui/page-container/page-container-footer/page-container-footer.component.test.js
+++ b/ui/components/ui/page-container/page-container-footer/page-container-footer.component.test.js
@@ -1,87 +1,55 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import sinon from 'sinon';
-import Button from '../../button';
-import PageFooter from './page-container-footer.component';
+import { fireEvent } from '@testing-library/react';
+import { renderWithProvider } from '../../../../../test/lib/render-helpers';
+import PageFooter from '.';
 
 describe('Page Footer', () => {
-  let wrapper;
-  const onCancel = sinon.spy();
-  const onSubmit = sinon.spy();
+  const props = {
+    onCancel: jest.fn(),
+    onSubmit: jest.fn(),
+    cancelText: 'Cancel',
+    submitText: 'Submit',
+    disabled: false,
+    submitButtonType: 'Test Type',
+  };
 
-  beforeEach(() => {
-    wrapper = shallow(
-      <PageFooter
-        onCancel={onCancel}
-        onSubmit={onSubmit}
-        cancelText="Cancel"
-        submitText="Submit"
-        disabled={false}
-        submitButtonType="Test Type"
-      />,
-    );
-  });
+  it('should match snapshot', () => {
+    const { container } = renderWithProvider(<PageFooter {...props} />);
 
-  it('renders page container footer', () => {
-    expect(wrapper.find('.page-container__footer')).toHaveLength(1);
+    expect(container).toMatchSnapshot();
   });
 
   it('should render a secondary footer inside page-container__footer when given children', () => {
-    wrapper = shallow(
+    const { container } = renderWithProvider(
       <PageFooter>
         <div>Works</div>
       </PageFooter>,
-      { context: { t: sinon.spy((k) => `[${k}]`) } },
     );
 
-    expect(wrapper.find('.page-container__footer-secondary')).toHaveLength(1);
-  });
-
-  it('renders two button components', () => {
-    expect(wrapper.find(Button)).toHaveLength(2);
+    expect(container).toMatchSnapshot();
   });
 
   describe('Cancel Button', () => {
-    it('has button type of default', () => {
-      expect(
-        wrapper.find('.page-container__footer-button').first().prop('type'),
-      ).toStrictEqual('secondary');
-    });
-
-    it('has children text of Cancel', () => {
-      expect(
-        wrapper.find('.page-container__footer-button').first().prop('children'),
-      ).toStrictEqual('Cancel');
-    });
-
     it('should call cancel when click is simulated', () => {
-      wrapper.find('.page-container__footer-button').first().prop('onClick')();
-      expect(onCancel.callCount).toStrictEqual(1);
+      const { queryByTestId } = renderWithProvider(<PageFooter {...props} />);
+
+      const cancelButton = queryByTestId('page-container-footer-cancel');
+
+      fireEvent.click(cancelButton);
+
+      expect(props.onCancel).toHaveBeenCalled();
     });
   });
 
   describe('Submit Button', () => {
-    it('assigns button type based on props', () => {
-      expect(
-        wrapper.find('.page-container__footer-button').last().prop('type'),
-      ).toStrictEqual('Test Type');
-    });
-
-    it('has disabled prop', () => {
-      expect(
-        wrapper.find('.page-container__footer-button').last().prop('disabled'),
-      ).toStrictEqual(false);
-    });
-
-    it('has children text when submitText prop exists', () => {
-      expect(
-        wrapper.find('.page-container__footer-button').last().prop('children'),
-      ).toStrictEqual('Submit');
-    });
-
     it('should call submit when click is simulated', () => {
-      wrapper.find('.page-container__footer-button').last().prop('onClick')();
-      expect(onSubmit.callCount).toStrictEqual(1);
+      const { queryByTestId } = renderWithProvider(<PageFooter {...props} />);
+
+      const submitButton = queryByTestId('page-container-footer-next');
+
+      fireEvent.click(submitButton);
+
+      expect(props.onSubmit).toHaveBeenCalled();
     });
   });
 });
diff --git a/ui/components/ui/sender-to-recipient/sender-to-recipient.component.js b/ui/components/ui/sender-to-recipient/sender-to-recipient.component.js
index 417b36e84..6aec343be 100644
--- a/ui/components/ui/sender-to-recipient/sender-to-recipient.component.js
+++ b/ui/components/ui/sender-to-recipient/sender-to-recipient.component.js
@@ -103,34 +103,69 @@ export function RecipientWithAddress({
   recipientNickname,
   recipientEns,
   recipientName,
+  recipientMetadataName,
 }) {
   const t = useI18nContext();
   const [showNicknamePopovers, setShowNicknamePopovers] = useState(false);
+  const [addressCopied, setAddressCopied] = useState(false);
+
+  let tooltipHtml = <p>{t('copiedExclamation')}</p>;
+  if (!addressCopied) {
+    tooltipHtml = addressOnly ? (
+      <p>{t('copyAddress')}</p>
+    ) : (
+      <p>
+        {shortenAddress(checksummedRecipientAddress)}
+        <br />
+        {t('copyAddress')}
+      </p>
+    );
+  }
 
   return (
     <>
       <div
         className="sender-to-recipient__party sender-to-recipient__party--recipient sender-to-recipient__party--recipient-with-address"
         onClick={() => {
-          setShowNicknamePopovers(true);
-          if (onRecipientClick) {
-            onRecipientClick();
+          if (recipientName) {
+            setAddressCopied(true);
+            copyToClipboard(checksummedRecipientAddress);
+          } else {
+            setShowNicknamePopovers(true);
+            if (onRecipientClick) {
+              onRecipientClick();
+            }
           }
         }}
       >
         <div className="sender-to-recipient__sender-icon">
           <Identicon address={checksummedRecipientAddress} diameter={24} />
         </div>
-        <div className="sender-to-recipient__name">
-          {addressOnly
-            ? recipientNickname ||
-              recipientEns ||
-              shortenAddress(checksummedRecipientAddress)
-            : recipientNickname ||
-              recipientEns ||
-              recipientName ||
-              t('newContract')}
-        </div>
+        <Tooltip
+          position="bottom"
+          disabled={!recipientName}
+          html={tooltipHtml}
+          wrapperClassName="sender-to-recipient__tooltip-wrapper"
+          containerClassName="sender-to-recipient__tooltip-container"
+          onHidden={() => setAddressCopied(false)}
+        >
+          <div
+            className="sender-to-recipient__name"
+            data-testid="sender-to-recipient__name"
+          >
+            {addressOnly
+              ? recipientName ||
+                recipientNickname ||
+                recipientMetadataName ||
+                recipientEns ||
+                shortenAddress(checksummedRecipientAddress)
+              : recipientName ||
+                recipientNickname ||
+                recipientMetadataName ||
+                recipientEns ||
+                t('newContract')}
+          </div>
+        </Tooltip>
       </div>
       {showNicknamePopovers ? (
         <NicknamePopovers
@@ -145,6 +180,7 @@ export function RecipientWithAddress({
 RecipientWithAddress.propTypes = {
   checksummedRecipientAddress: PropTypes.string,
   recipientName: PropTypes.string,
+  recipientMetadataName: PropTypes.string,
   recipientEns: PropTypes.string,
   recipientNickname: PropTypes.string,
   addressOnly: PropTypes.bool,
@@ -175,6 +211,7 @@ export default function SenderToRecipient({
   senderName,
   recipientNickname,
   recipientName,
+  recipientMetadataName,
   recipientEns,
   onRecipientClick,
   onSenderClick,
@@ -208,6 +245,7 @@ export default function SenderToRecipient({
           recipientNickname={recipientNickname}
           recipientEns={recipientEns}
           recipientName={recipientName}
+          recipientMetadataName={recipientMetadataName}
         />
       ) : (
         <div className="sender-to-recipient__party sender-to-recipient__party--recipient">
@@ -228,6 +266,7 @@ SenderToRecipient.propTypes = {
   senderName: PropTypes.string,
   senderAddress: PropTypes.string,
   recipientName: PropTypes.string,
+  recipientMetadataName: PropTypes.string,
   recipientEns: PropTypes.string,
   recipientAddress: PropTypes.string,
   recipientNickname: PropTypes.string,
diff --git a/ui/components/ui/site-origin/__snapshots__/site-origin.test.js.snap b/ui/components/ui/site-origin/__snapshots__/site-origin.test.js.snap
new file mode 100644
index 000000000..c1acfdd1f
--- /dev/null
+++ b/ui/components/ui/site-origin/__snapshots__/site-origin.test.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SiteOrigin renders number and hyphen prefixed domains correctly 1`] = `
+<div>
+  <div
+    class="site-origin"
+  >
+    <bdi
+      dir="ltr"
+    >
+      0-example.com
+    </bdi>
+  </div>
+</div>
+`;
diff --git a/ui/components/ui/site-origin/site-origin.test.js b/ui/components/ui/site-origin/site-origin.test.js
index d27f1ce73..6c2b42674 100644
--- a/ui/components/ui/site-origin/site-origin.test.js
+++ b/ui/components/ui/site-origin/site-origin.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import SiteOrigin from './site-origin';
 
 describe('SiteOrigin', () => {
@@ -14,11 +14,10 @@ describe('SiteOrigin', () => {
 
   it('renders number and hyphen prefixed domains correctly', () => {
     const numberHyphenPrefixOrigin = '0-example.com';
-    const wrapper = shallow(
+    const { container } = renderWithProvider(
       <SiteOrigin {...defaultProps} siteOrigin={numberHyphenPrefixOrigin} />,
     );
-    const bdiElement = wrapper.find('bdi');
 
-    expect(bdiElement.text()).toBe('0-example.com');
+    expect(container).toMatchSnapshot();
   });
 });
diff --git a/ui/components/ui/ui-components.scss b/ui/components/ui/ui-components.scss
index 8cc0e8a0b..f0786f813 100644
--- a/ui/components/ui/ui-components.scss
+++ b/ui/components/ui/ui-components.scss
@@ -63,3 +63,5 @@
 @import 'deprecated-test-networks/index.scss';
 @import 'contract-token-values/index.scss';
 @import 'nft-info/index.scss';
+@import 'nft-collection-image/index';
+
diff --git a/ui/css/errors.scss b/ui/css/errors.scss
index 14daf4262..c1f516f31 100644
--- a/ui/css/errors.scss
+++ b/ui/css/errors.scss
@@ -1,37 +1,51 @@
 .critical-error {
-  padding: 16px;
+  padding: 1em;
   max-width: 600px;
   margin: 0 auto;
+  border-radius: 4px;
+  border-left: #f66a0a 4px solid;
+  background-color: rgba(255, 211, 61, 0.1);
+  display: flex;
+  padding: 0 4px 0 4px;
+  gap: 12px;
+
+  &__icon {
+    color: var(--color-error-default);
+    height: 100px;
+    padding: 4px 4px 0 4px;
+  }
+
+  &__description {
+    flex-grow: 1;
+  }
 
   &__alert {
-    color: var(--color-text-default);
-    background-color: var(--color-error-muted);
-    border: 1px solid var(--color-error-default);
-    border-radius: 8px;
-    padding: 16px;
     display: flex;
     flex-direction: column;
     margin-bottom: 16px;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
 
     &__message {
       margin-bottom: 16px;
+      text-align: left;
+      color: var(--color-text-default);
     }
 
-    &__button {
+    &__action-link {
+      text-align: left;
       height: 40px;
-      border-radius: 20px;
-      padding-left: 16px;
-      padding-right: 16px;
-      background-color: var(--color-primary-default);
-      color: var(--color-primary-inverse);
-      border: 1px solid var(--color-primary-default);
-      margin: 0 auto;
+      color: var(--color-primary-default);
+      text-decoration: none;
+      cursor: pointer;
     }
   }
 
   &__paragraph {
+    text-align: left;
     color: var(--color-text-default);
-    text-align: center;
 
     &__link {
       color: var(--color-primary-default);
diff --git a/ui/ducks/app/app.js b/ui/ducks/app/app.js
index c61c00a8e..9b62a4b71 100644
--- a/ui/ducks/app/app.js
+++ b/ui/ducks/app/app.js
@@ -58,6 +58,7 @@ export default function reduceApp(state = {}, action) {
     newTokensImported: '',
     newCustomNetworkAdded: {},
     onboardedInThisUISession: false,
+    customTokenAmount: '',
     ...state,
   };
 
@@ -401,6 +402,11 @@ export default function reduceApp(state = {}, action) {
         ...appState,
         onboardedInThisUISession: action.value,
       };
+    case actionConstants.SET_CUSTOM_TOKEN_AMOUNT:
+      return {
+        ...appState,
+        customTokenAmount: action.value,
+      };
     default:
       return appState;
   }
@@ -463,3 +469,7 @@ export function setNewCustomNetworkAdded(value) {
 export function setOnBoardedInThisUISession(value) {
   return { type: actionConstants.ONBOARDED_IN_THIS_UI_SESSION, value };
 }
+
+export function setCustomTokenAmount(value) {
+  return { type: actionConstants.SET_CUSTOM_TOKEN_AMOUNT, value };
+}
diff --git a/ui/ducks/metamask/metamask.js b/ui/ducks/metamask/metamask.js
index 596c6c8f7..5e0c925c9 100644
--- a/ui/ducks/metamask/metamask.js
+++ b/ui/ducks/metamask/metamask.js
@@ -278,25 +278,25 @@ export function getEnableEIP1559V2NoticeDismissed(state) {
 export const getCollectibles = (state) => {
   const {
     metamask: {
-      allCollectibles,
+      allNfts,
       provider: { chainId },
       selectedAddress,
     },
   } = state;
 
-  return allCollectibles?.[selectedAddress]?.[chainId] ?? [];
+  return allNfts?.[selectedAddress]?.[chainId] ?? [];
 };
 
 export const getCollectibleContracts = (state) => {
   const {
     metamask: {
-      allCollectibleContracts,
+      allNftContracts,
       provider: { chainId },
       selectedAddress,
     },
   } = state;
 
-  return allCollectibleContracts?.[selectedAddress]?.[chainId] ?? [];
+  return allNftContracts?.[selectedAddress]?.[chainId] ?? [];
 };
 
 export function getBlockGasLimit(state) {
diff --git a/ui/ducks/send/helpers.js b/ui/ducks/send/helpers.js
index 3e7a3bbf4..6cf35b5f0 100644
--- a/ui/ducks/send/helpers.js
+++ b/ui/ducks/send/helpers.js
@@ -204,7 +204,7 @@ export function generateTransactionParams(sendState) {
         sendToken: draftTransaction.asset.details,
       });
       break;
-    case ASSET_TYPES.COLLECTIBLE:
+    case ASSET_TYPES.NFT:
       // When sending a token the to address is the contract address of
       // the token being sent. The value is set to '0x0' and the data
       // is generated from the recipient address, token being sent and
diff --git a/ui/ducks/send/helpers.test.js b/ui/ducks/send/helpers.test.js
index 90b1bcb55..404c29d71 100644
--- a/ui/ducks/send/helpers.test.js
+++ b/ui/ducks/send/helpers.test.js
@@ -64,7 +64,7 @@ describe('Send Slice Helpers', () => {
             value: '0x1',
           },
           asset: {
-            type: ASSET_TYPES.COLLECTIBLE,
+            type: ASSET_TYPES.NFT,
             balance: '0xaf',
             details: {
               address: '0xToken',
diff --git a/ui/ducks/send/send.js b/ui/ducks/send/send.js
index 37f7e0bf6..f73a95120 100644
--- a/ui/ducks/send/send.js
+++ b/ui/ducks/send/send.js
@@ -51,7 +51,7 @@ import {
   updateTransactionGasFees,
   addPollingTokenToAppState,
   removePollingTokenFromAppState,
-  isCollectibleOwner,
+  isNftOwner,
   getTokenStandardAndDetails,
   showModal,
   addUnapprovedTransactionAndRouteToConfirmationPage,
@@ -298,7 +298,7 @@ export const RECIPIENT_SEARCH_MODES = {
  *  with the asset.
  * @property {AssetTypesString} type - The type of asset that the user
  *  is attempting to send. Defaults to 'NATIVE' which represents the native
- *  asset of the chain. Can also be 'TOKEN' or 'COLLECTIBLE'.
+ *  asset of the chain. Can also be 'TOKEN' or 'NFT'.
  */
 
 /**
@@ -562,7 +562,7 @@ export const computeEstimatedGasLimit = createAsyncThunk(
  * @typedef {object} Asset
  * @property {AssetTypesString} type - The type of asset that the user
  *  is attempting to send. Defaults to 'NATIVE' which represents the native
- *  asset of the chain. Can also be 'TOKEN' or 'COLLECTIBLE'.
+ *  asset of the chain. Can also be 'TOKEN' or 'NFT'.
  * @property {string} balance - A hex string representing the balance
  *  that the user holds of the asset that they are attempting to send.
  * @property {TokenDetails} [details] - An object that describes the
@@ -660,7 +660,7 @@ export const initializeSendState = createAsyncThunk(
     ) {
       gasLimit =
         draftTransaction.asset.type === ASSET_TYPES.TOKEN ||
-        draftTransaction.asset.type === ASSET_TYPES.COLLECTIBLE
+        draftTransaction.asset.type === ASSET_TYPES.NFT
           ? GAS_LIMITS.BASE_TOKEN_ESTIMATE
           : GAS_LIMITS.SIMPLE;
       // Run our estimateGasLimit logic to get a more accurate estimation of
@@ -960,7 +960,7 @@ const slice = createSlice({
 
       if (
         draftTransaction.asset.type === ASSET_TYPES.TOKEN ||
-        draftTransaction.asset.type === ASSET_TYPES.COLLECTIBLE
+        draftTransaction.asset.type === ASSET_TYPES.NFT
       ) {
         draftTransaction.asset.details = asset.details;
       } else {
@@ -1782,7 +1782,7 @@ export function editExistingTransaction(assetType, transactionId) {
             type: assetType,
             details: {
               address: transaction.txParams.to,
-              ...(assetType === ASSET_TYPES.COLLECTIBLE
+              ...(assetType === ASSET_TYPES.NFT
                 ? {
                     tokenId:
                       getTokenIdParam(tokenData) ??
@@ -2069,7 +2069,7 @@ export function updateSendAsset(
         );
       } else if (
         details.standard === TOKEN_STANDARDS.ERC1155 &&
-        type === ASSET_TYPES.COLLECTIBLE
+        type === ASSET_TYPES.NFT
       ) {
         throw new Error('Sends of ERC1155 tokens are not currently supported');
       } else if (
@@ -2088,7 +2088,7 @@ export function updateSendAsset(
         } else {
           let isCurrentOwner = true;
           try {
-            isCurrentOwner = await isCollectibleOwner(
+            isCurrentOwner = await isNftOwner(
               sendingAddress,
               details.address,
               details.tokenId,
@@ -2292,7 +2292,7 @@ export function signTransaction() {
 
       if (draftTransaction.asset.type !== ASSET_TYPES.NATIVE) {
         transactionType =
-          draftTransaction.asset.type === ASSET_TYPES.COLLECTIBLE
+          draftTransaction.asset.type === ASSET_TYPES.NFT
             ? TRANSACTION_TYPES.TOKEN_METHOD_TRANSFER_FROM
             : TRANSACTION_TYPES.TOKEN_METHOD_TRANSFER;
       }
diff --git a/ui/ducks/send/send.test.js b/ui/ducks/send/send.test.js
index 1610c022d..47c7adec4 100644
--- a/ui/ducks/send/send.test.js
+++ b/ui/ducks/send/send.test.js
@@ -128,7 +128,7 @@ describe('Send Slice', () => {
       .spyOn(Actions, 'updateTokenType')
       .mockImplementation(() => Promise.resolve({ isERC721: false }));
     jest
-      .spyOn(Actions, 'isCollectibleOwner')
+      .spyOn(Actions, 'isNftOwner')
       .mockImplementation(() => Promise.resolve(true));
     jest.spyOn(Actions, 'updateEditableParams').mockImplementation(() => ({
       type: 'UPDATE_TRANSACTION_EDITABLE_PARAMS',
@@ -2566,9 +2566,7 @@ describe('Send Slice', () => {
 
         const store = mockStore(editTransactionState);
 
-        await store.dispatch(
-          editExistingTransaction(ASSET_TYPES.COLLECTIBLE, 1),
-        );
+        await store.dispatch(editExistingTransaction(ASSET_TYPES.NFT, 1));
         const actionResult = store.getActions();
         expect(actionResult).toHaveLength(9);
         expect(actionResult[0]).toMatchObject({
@@ -2635,7 +2633,7 @@ describe('Send Slice', () => {
                 tokenId: '15000',
               },
               error: null,
-              type: ASSET_TYPES.COLLECTIBLE,
+              type: ASSET_TYPES.NFT,
             },
             initialAssetSet: true,
           },
diff --git a/ui/helpers/constants/beta.js b/ui/helpers/constants/beta.js
new file mode 100644
index 000000000..8250c78ab
--- /dev/null
+++ b/ui/helpers/constants/beta.js
@@ -0,0 +1 @@
+export const BETA_BUGS_URL = 'https://metamask.zendesk.com/hc/en-us';
diff --git a/ui/helpers/constants/design-system.js b/ui/helpers/constants/design-system.js
index 7c8ddb18e..4bb1fd0de 100644
--- a/ui/helpers/constants/design-system.js
+++ b/ui/helpers/constants/design-system.js
@@ -193,6 +193,7 @@ export const BORDER_RADIUS = {
   XL: SIZES.XL,
   NONE,
   PILL: 'pill',
+  FULL: 'full',
 };
 
 const FLEX_END = 'flex-end';
diff --git a/ui/helpers/constants/settings.js b/ui/helpers/constants/settings.js
index dc674e29c..9072b48d3 100644
--- a/ui/helpers/constants/settings.js
+++ b/ui/helpers/constants/settings.js
@@ -336,4 +336,11 @@ export const SETTINGS_CONSTANTS = [
     route: `${ADVANCED_ROUTE}#restore-userdata`,
     icon: 'fas fa-upload',
   },
+  {
+    tabMessage: (t) => t('experimental'),
+    sectionMessage: (t) => t('improvedTokenAllowance'),
+    descriptionMessage: (t) => t('improvedTokenAllowanceDescription'),
+    route: `${EXPERIMENTAL_ROUTE}#improved-token-allowance`,
+    icon: 'fa fa-flask',
+  },
 ];
diff --git a/ui/helpers/utils/build-types.js b/ui/helpers/utils/build-types.js
index 8577b3905..2bcd7a8ae 100644
--- a/ui/helpers/utils/build-types.js
+++ b/ui/helpers/utils/build-types.js
@@ -1,6 +1,3 @@
-///: BEGIN:ONLY_INCLUDE_IN(beta)
-import betaJson from '../../../app/build-types/beta/images/beta-mascot.json';
-///: END:ONLY_INCLUDE_IN
 ///: BEGIN:ONLY_INCLUDE_IN(flask)
 import flaskJson from '../../../app/build-types/flask/images/flask-mascot.json';
 ///: END:ONLY_INCLUDE_IN
@@ -12,7 +9,7 @@ const assetList = {
   },
   ///: BEGIN:ONLY_INCLUDE_IN(beta)
   beta: {
-    foxMeshJson: betaJson,
+    foxMeshJson: undefined,
   },
   ///: END:ONLY_INCLUDE_IN
   ///: BEGIN:ONLY_INCLUDE_IN(flask)
diff --git a/ui/helpers/utils/permission.js b/ui/helpers/utils/permission.js
index 79a9a29e5..508ca3e0b 100644
--- a/ui/helpers/utils/permission.js
+++ b/ui/helpers/utils/permission.js
@@ -102,6 +102,11 @@ const PERMISSION_DESCRIPTIONS = deepFreeze({
     leftIcon: 'fas fa-info',
     rightIcon: null,
   },
+  [EndowmentPermissions['endowment:cronjob']]: {
+    label: (t) => t('permission_cronjob'),
+    leftIcon: 'fas fa-clock',
+    rightIcon: null,
+  },
   ///: END:ONLY_INCLUDE_IN
   [UNKNOWN_PERMISSION]: {
     label: (t, permissionName) =>
diff --git a/ui/helpers/utils/settings-search.test.js b/ui/helpers/utils/settings-search.test.js
index f545afe28..96210eae1 100644
--- a/ui/helpers/utils/settings-search.test.js
+++ b/ui/helpers/utils/settings-search.test.js
@@ -182,7 +182,7 @@ describe('Settings Search Utils', () => {
 
     it('should get good experimental section number', () => {
       expect(getNumberOfSettingsInSection(t, t('experimental'))).toStrictEqual(
-        1,
+        2,
       );
     });
 
diff --git a/ui/hooks/flask/useTransactionInsightSnap.js b/ui/hooks/flask/useTransactionInsightSnap.js
index ad2102837..e7a4b656a 100644
--- a/ui/hooks/flask/useTransactionInsightSnap.js
+++ b/ui/hooks/flask/useTransactionInsightSnap.js
@@ -12,26 +12,38 @@ export function useTransactionInsightSnap({ transaction, chainId, snapId }) {
       'This snap does not have the transaction insight endowment.',
     );
   }
+
+  const [loading, setLoading] = useState(true);
   const [data, setData] = useState(undefined);
+  const [error, setError] = useState(undefined);
 
   useEffect(() => {
     async function fetchInsight() {
-      const d = await handleSnapRequest({
-        snapId,
-        origin: '',
-        handler: 'onTransaction',
-        request: {
-          jsonrpc: '2.0',
-          method: ' ',
-          params: { transaction, chainId },
-        },
-      });
-      setData(d);
+      try {
+        setError(undefined);
+        setLoading(true);
+
+        const d = await handleSnapRequest({
+          snapId,
+          origin: '',
+          handler: 'onTransaction',
+          request: {
+            jsonrpc: '2.0',
+            method: ' ',
+            params: { transaction, chainId },
+          },
+        });
+        setData(d);
+      } catch (err) {
+        setError(err);
+      } finally {
+        setLoading(false);
+      }
     }
     if (transaction) {
       fetchInsight();
     }
   }, [snapId, transaction, chainId]);
 
-  return data;
+  return { data, error, loading };
 }
diff --git a/ui/hooks/useTokensToSearch.js b/ui/hooks/useTokensToSearch.js
index 4e98aaae9..4b595017b 100644
--- a/ui/hooks/useTokensToSearch.js
+++ b/ui/hooks/useTokensToSearch.js
@@ -65,7 +65,10 @@ export function getRenderableTokenData(
     (symbol === CURRENCY_SYMBOLS.ETH && chainId === CHAIN_IDS.GOERLI) ||
     (symbol === CURRENCY_SYMBOLS.BNB && chainId === CHAIN_IDS.BSC) ||
     (symbol === CURRENCY_SYMBOLS.MATIC && chainId === CHAIN_IDS.POLYGON) ||
-    (symbol === CURRENCY_SYMBOLS.AVALANCHE && chainId === CHAIN_IDS.AVALANCHE)
+    (symbol === CURRENCY_SYMBOLS.AVALANCHE &&
+      chainId === CHAIN_IDS.AVALANCHE) ||
+    (symbol === CURRENCY_SYMBOLS.ETH && chainId === CHAIN_IDS.OPTIMISM) ||
+    (symbol === CURRENCY_SYMBOLS.ETH && chainId === CHAIN_IDS.ARBITRUM)
       ? iconUrl
       : formatIconUrlWithProxy({
           chainId: chainIdForTokenIcons,
diff --git a/ui/index.js b/ui/index.js
index 0d7a09e31..643bc9760 100644
--- a/ui/index.js
+++ b/ui/index.js
@@ -164,7 +164,7 @@ async function startApp(metamaskState, backgroundConnection, opts) {
 }
 
 function setupDebuggingHelpers(store) {
-  window.getCleanAppState = async function () {
+  window.stateHooks.getCleanAppState = async function () {
     const state = clone(store.getState());
     state.version = global.platform.getVersion();
     state.browser = window.navigator.userAgent;
@@ -173,7 +173,7 @@ function setupDebuggingHelpers(store) {
     });
     return state;
   };
-  window.sentryHooks.getSentryState = function () {
+  window.stateHooks.getSentryState = function () {
     const fullState = store.getState();
     const debugState = maskObject(fullState, SENTRY_STATE);
     return {
@@ -185,7 +185,7 @@ function setupDebuggingHelpers(store) {
 }
 
 window.logStateString = async function (cb) {
-  const state = await window.getCleanAppState();
+  const state = await window.stateHooks.getCleanAppState();
   browser.runtime
     .getPlatformInfo()
     .then((platform) => {
diff --git a/ui/pages/add-collectible/add-collectible.js b/ui/pages/add-collectible/add-collectible.js
index fd923d1ee..f357558a9 100644
--- a/ui/pages/add-collectible/add-collectible.js
+++ b/ui/pages/add-collectible/add-collectible.js
@@ -15,13 +15,13 @@ import Typography from '../../components/ui/typography';
 import ActionableMessage from '../../components/ui/actionable-message';
 import PageContainer from '../../components/ui/page-container';
 import {
-  addCollectibleVerifyOwnership,
+  addNftVerifyOwnership,
   getTokenStandardAndDetails,
   ignoreTokens,
   setNewCollectibleAddedMessage,
 } from '../../store/actions';
 import FormField from '../../components/ui/form-field';
-import { getIsMainnet, getUseCollectibleDetection } from '../../selectors';
+import { getIsMainnet, getUseNftDetection } from '../../selectors';
 import { getCollectiblesDetectionNoticeDismissed } from '../../ducks/metamask/metamask';
 import CollectiblesDetectionNotice from '../../components/app/collectibles-detection-notice';
 import { MetaMetricsContext } from '../../contexts/metametrics';
@@ -32,7 +32,7 @@ export default function AddCollectible() {
   const t = useI18nContext();
   const history = useHistory();
   const dispatch = useDispatch();
-  const useCollectibleDetection = useSelector(getUseCollectibleDetection);
+  const useNftDetection = useSelector(getUseNftDetection);
   const isMainnet = useSelector(getIsMainnet);
   const collectibleDetectionNoticeDismissed = useSelector(
     getCollectiblesDetectionNoticeDismissed,
@@ -54,7 +54,7 @@ export default function AddCollectible() {
 
   const handleAddCollectible = async () => {
     try {
-      await dispatch(addCollectibleVerifyOwnership(address, tokenId));
+      await dispatch(addNftVerifyOwnership(address, tokenId));
     } catch (error) {
       const { message } = error;
       dispatch(setNewCollectibleAddedMessage(message));
@@ -84,7 +84,7 @@ export default function AddCollectible() {
         token_contract_address: address,
         token_symbol: tokenDetails?.symbol,
         tokenId: tokenId.toString(),
-        asset_type: ASSET_TYPES.COLLECTIBLE,
+        asset_type: ASSET_TYPES.NFT,
         token_standard: tokenDetails?.standard,
         source: EVENT.SOURCE.TOKEN.CUSTOM,
       },
@@ -120,7 +120,7 @@ export default function AddCollectible() {
       contentComponent={
         <Box>
           {isMainnet &&
-          !useCollectibleDetection &&
+          !useNftDetection &&
           !collectibleDetectionNoticeDismissed ? (
             <CollectiblesDetectionNotice />
           ) : null}
diff --git a/ui/pages/add-collectible/add-collectible.test.js b/ui/pages/add-collectible/add-collectible.test.js
index be693e444..da452f754 100644
--- a/ui/pages/add-collectible/add-collectible.test.js
+++ b/ui/pages/add-collectible/add-collectible.test.js
@@ -53,7 +53,7 @@ describe('AddCollectible', () => {
     expect(getByText('Add')).not.toBeEnabled();
   });
 
-  it('should call addCollectibleVerifyOwnership action with correct values (tokenId should not be in scientific notation)', () => {
+  it('should call addNftVerifyOwnership action with correct values (tokenId should not be in scientific notation)', () => {
     const { getByTestId, getByText } = renderWithProvider(
       <AddCollectible />,
       store,
@@ -67,7 +67,7 @@ describe('AddCollectible', () => {
     });
     const addCollectibleVerifyOwnershipSpy = jest.spyOn(
       Actions,
-      'addCollectibleVerifyOwnership',
+      'addNftVerifyOwnership',
     );
 
     fireEvent.click(getByText('Add'));
diff --git a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
index 859d8a7ad..e610960bb 100644
--- a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
+++ b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
@@ -32,6 +32,7 @@ import {
   ERC721,
 } from '../../../../shared/constants/transaction';
 import { CHAIN_IDS, TEST_CHAINS } from '../../../../shared/constants/network';
+import ContractDetailsModal from '../../../components/app/modals/contract-details-modal/contract-details-modal';
 
 export default class ConfirmApproveContent extends Component {
   static contextTypes = {
@@ -82,6 +83,7 @@ export default class ConfirmApproveContent extends Component {
   state = {
     showFullTxDetails: false,
     copied: false,
+    setshowContractDetails: false,
   };
 
   renderApproveContentCard({
@@ -588,8 +590,11 @@ export default class ConfirmApproveContent extends Component {
       isContract,
       assetStandard,
       userAddress,
+      tokenId,
+      tokenAddress,
+      assetName,
     } = this.props;
-    const { showFullTxDetails } = this.state;
+    const { showFullTxDetails, setshowContractDetails } = this.state;
 
     return (
       <div
@@ -632,6 +637,33 @@ export default class ConfirmApproveContent extends Component {
         <div className="confirm-approve-content__description">
           {this.renderDescription()}
         </div>
+        {(assetStandard === ERC721 ||
+          assetStandard === ERC1155 ||
+          (assetName && tokenId) ||
+          (tokenSymbol && tokenId)) && (
+          <Box marginBottom={4} marginTop={2}>
+            <Button
+              type="link"
+              className="confirm-approve-content__verify-contract-details"
+              onClick={() => this.setState({ setshowContractDetails: true })}
+            >
+              {t('verifyContractDetails')}
+            </Button>
+            {setshowContractDetails && (
+              <ContractDetailsModal
+                onClose={() => this.setState({ setshowContractDetails: false })}
+                tokenName={tokenSymbol}
+                tokenAddress={tokenAddress}
+                toAddress={toAddress}
+                chainId={chainId}
+                rpcPrefs={rpcPrefs}
+                tokenId={tokenId}
+                assetName={assetName}
+                assetStandard={assetStandard}
+              />
+            )}
+          </Box>
+        )}
         <Box className="confirm-approve-content__address-display-content">
           <Box display={DISPLAY.FLEX}>
             <Identicon
diff --git a/ui/pages/confirm-approve/confirm-approve-content/index.scss b/ui/pages/confirm-approve/confirm-approve-content/index.scss
index 27ed4763d..eb63c632f 100644
--- a/ui/pages/confirm-approve/confirm-approve-content/index.scss
+++ b/ui/pages/confirm-approve/confirm-approve-content/index.scss
@@ -102,7 +102,6 @@
     @include H6;
 
     margin-top: 16px;
-    margin-bottom: 16px;
     color: var(--color-text-alternative);
     text-align: center;
     padding-left: 24px;
@@ -337,6 +336,13 @@
     color: var(--color-primary-default);
   }
 
+  &__verify-contract-details {
+    @include H6;
+
+    color: var(--color-primary-default);
+    padding: 0;
+  }
+
   &__info-row {
     display: flex;
     justify-content: space-between;
diff --git a/ui/pages/confirm-approve/confirm-approve.js b/ui/pages/confirm-approve/confirm-approve.js
index 26c065b44..f0f8bfab1 100644
--- a/ui/pages/confirm-approve/confirm-approve.js
+++ b/ui/pages/confirm-approve/confirm-approve.js
@@ -27,6 +27,7 @@ import {
   getIsMultiLayerFeeNetwork,
   checkNetworkAndAccountSupports1559,
   getEIP1559V2Enabled,
+  getIsImprovedTokenAllowanceEnabled,
 } from '../../selectors';
 import { useApproveTransaction } from '../../hooks/useApproveTransaction';
 import AdvancedGasFeePopover from '../../components/app/advanced-gas-fee-popover';
@@ -87,6 +88,10 @@ export default function ConfirmApprove({
   const eip1559V2Enabled = useSelector(getEIP1559V2Enabled);
   const supportsEIP1559V2 = eip1559V2Enabled && networkAndAccountSupports1559;
 
+  const improvedTokenAllowanceEnabled = useSelector(
+    getIsImprovedTokenAllowanceEnabled,
+  );
+
   const previousTokenAmount = useRef(tokenAmount);
   const {
     approveTransaction,
@@ -161,7 +166,7 @@ export default function ConfirmApprove({
   if (tokenSymbol === undefined && assetName === undefined) {
     return <Loading />;
   }
-  if (process.env.TOKEN_ALLOWANCE_IMPROVEMENTS && assetStandard === ERC20) {
+  if (improvedTokenAllowanceEnabled && assetStandard === ERC20) {
     return (
       <GasFeeContextProvider transaction={transaction}>
         <TransactionModalContextProvider>
@@ -180,14 +185,14 @@ export default function ConfirmApprove({
             supportsEIP1559V2={supportsEIP1559V2}
             userAddress={userAddress}
             tokenAddress={tokenAddress}
-            data={customData || transactionData}
+            data={transactionData}
             isSetApproveForAll={isSetApproveForAll}
             isApprovalOrRejection={isApprovalOrRejection}
-            customTxParamsData={customData}
             dappProposedTokenAmount={tokenAmount}
             currentTokenBalance={tokenBalance}
             toAddress={toAddress}
             tokenSymbol={tokenSymbol}
+            decimals={decimals}
           />
           {showCustomizeGasPopover && !supportsEIP1559V2 && (
             <EditGasPopover
diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js
index fc5ad7ce1..28be31ed9 100644
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js
+++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js
@@ -59,7 +59,10 @@ import { toChecksumHexAddress } from '../../../shared/modules/hexstring-utils';
 import { getGasLoadingAnimationIsShowing } from '../../ducks/app/app';
 import { isLegacyTransaction } from '../../helpers/utils/transactions.util';
 import { CUSTOM_GAS_ESTIMATE } from '../../../shared/constants/gas';
-import { TRANSACTION_TYPES } from '../../../shared/constants/transaction';
+import {
+  TRANSACTION_STATUSES,
+  TRANSACTION_TYPES,
+} from '../../../shared/constants/transaction';
 import { isEqualCaseInsensitive } from '../../../shared/modules/string-utils';
 import { getTokenAddressParam } from '../../helpers/utils/token-util';
 import { calcGasTotal } from '../../../shared/lib/transactions-controller-utils';
@@ -94,7 +97,7 @@ const mapStateToProps = (state, ownProps) => {
     network,
     unapprovedTxs,
     nextNonce,
-    allCollectibleContracts,
+    allNftContracts,
     selectedAddress,
     provider: { chainId },
   } = metamask;
@@ -164,10 +167,15 @@ const mapStateToProps = (state, ownProps) => {
 
   const methodData = getKnownMethodData(state, data) || {};
 
-  const fullTxData = getFullTxData(state, txId, customTxParamsData);
+  const fullTxData = getFullTxData(
+    state,
+    txId,
+    TRANSACTION_STATUSES.UNAPPROVED,
+    customTxParamsData,
+  );
 
   const isCollectibleTransfer = Boolean(
-    allCollectibleContracts?.[selectedAddress]?.[chainId]?.find((contract) => {
+    allNftContracts?.[selectedAddress]?.[chainId]?.find((contract) => {
       return isEqualCaseInsensitive(contract.address, fullTxData.txParams.to);
     }),
   );
diff --git a/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/__snapshots__/reveal-seed-phrase.test.js.snap b/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/__snapshots__/reveal-seed-phrase.test.js.snap
new file mode 100644
index 000000000..b64926762
--- /dev/null
+++ b/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/__snapshots__/reveal-seed-phrase.test.js.snap
@@ -0,0 +1,135 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Reveal Secret Recovery Phrase should match snapshot 1`] = `
+<div>
+  <div
+    class="reveal-seed-phrase"
+    data-testid="reveal-seed-phrase"
+  >
+    <div
+      class="seed-phrase__sections"
+    >
+      <div
+        class="seed-phrase__main"
+      >
+        <div
+          class="box box--margin-bottom-4 box--flex-direction-row"
+        >
+          <a
+            href="#"
+          >
+            &lt; Back
+          </a>
+        </div>
+        <div
+          class="first-time-flow__header"
+        >
+          Secret Recovery Phrase
+        </div>
+        <div
+          class="first-time-flow__text-block"
+        >
+          Your Secret Recovery Phrase makes it easy to back up and restore your account.
+        </div>
+        <div
+          class="first-time-flow__text-block"
+        >
+          WARNING: Never disclose your Secret Recovery Phrase. Anyone with this phrase can take your Ether forever.
+        </div>
+        <div
+          class="reveal-seed-phrase__secret"
+        >
+          <div
+            class="reveal-seed-phrase__secret-words notranslate reveal-seed-phrase__secret-words--hidden"
+            data-testid="hidden-seed-phrase"
+          >
+            debris dizzy just program just float decrease vacant alarm reduce speak stadium
+          </div>
+          <div
+            class="reveal-seed-phrase__secret-blocker"
+            data-testid="reveal-seed-blocker"
+          >
+            <svg
+              fill="var(--color-overlay-inverse)"
+              height="35px"
+              id="Capa_1"
+              style="enable-background: new 0 0 401.998 401.998;"
+              version="1.1"
+              viewBox="0 0 401.998 401.998"
+              width="28px"
+              x="0px"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              y="0px"
+            >
+              <g>
+                <path
+                  d="M357.45,190.721c-5.331-5.33-11.8-7.993-19.417-7.993h-9.131v-54.821c0-35.022-12.559-65.093-37.685-90.218 C266.093,12.563,236.025,0,200.998,0c-35.026,0-65.1,12.563-90.222,37.688C85.65,62.814,73.091,92.884,73.091,127.907v54.821 h-9.135c-7.611,0-14.084,2.663-19.414,7.993c-5.33,5.326-7.994,11.799-7.994,19.417V374.59c0,7.611,2.665,14.086,7.994,19.417 c5.33,5.325,11.803,7.991,19.414,7.991H338.04c7.617,0,14.085-2.663,19.417-7.991c5.325-5.331,7.994-11.806,7.994-19.417V210.135 C365.455,202.523,362.782,196.051,357.45,190.721z M274.087,182.728H127.909v-54.821c0-20.175,7.139-37.402,21.414-51.675 c14.277-14.275,31.501-21.411,51.678-21.411c20.179,0,37.399,7.135,51.677,21.411c14.271,14.272,21.409,31.5,21.409,51.675V182.728 z"
+                />
+              </g>
+            </svg>
+            <div
+              class="reveal-seed-phrase__reveal-button"
+            >
+              Click here to reveal secret words
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="seed-phrase__side"
+      >
+        <div
+          class="first-time-flow__text-block"
+        >
+          Tips:
+        </div>
+        <div
+          class="first-time-flow__text-block"
+        >
+          Store this phrase in a password manager like 1Password.
+        </div>
+        <div
+          class="first-time-flow__text-block"
+        >
+          Write this phrase on a piece of paper and store in a secure location. If you want even more security, write it down on multiple pieces of paper and store each in 2 - 3 different locations.
+        </div>
+        <div
+          class="first-time-flow__text-block"
+        >
+          Memorize this phrase.
+        </div>
+        <div
+          class="first-time-flow__text-block"
+        >
+          <a
+            class="reveal-seed-phrase__export-text"
+          >
+            Download this Secret Recovery Phrase and keep it stored safely on an external encrypted hard drive or storage medium.
+          </a>
+        </div>
+      </div>
+    </div>
+    <div
+      class="reveal-seed-phrase__buttons"
+    >
+      <button
+        class="button btn--rounded btn-secondary first-time-flow__button"
+        role="button"
+        tabindex="0"
+      >
+        Remind me later
+      </button>
+      <button
+        class="button btn--rounded btn-primary first-time-flow__button"
+        disabled=""
+        role="button"
+        tabindex="0"
+      >
+        Next
+      </button>
+    </div>
+  </div>
+</div>
+`;
diff --git a/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js b/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js
index b5a70bd7d..a96d9728b 100644
--- a/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js
+++ b/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js
@@ -112,12 +112,16 @@ export default class RevealSeedPhrase extends PureComponent {
               'reveal-seed-phrase__secret-words--hidden': !isShowingSeedPhrase,
             },
           )}
+          data-testid={
+            isShowingSeedPhrase ? 'showing-seed-phrase' : 'hidden-seed-phrase'
+          }
         >
           {seedPhrase}
         </div>
         {!isShowingSeedPhrase && (
           <div
             className="reveal-seed-phrase__secret-blocker"
+            data-testid="reveal-seed-blocker"
             onClick={() => {
               this.context.trackEvent({
                 category: EVENT.CATEGORIES.ONBOARDING,
diff --git a/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.test.js b/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.test.js
index 7bc9f4355..735dc29fa 100644
--- a/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.test.js
+++ b/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.test.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import sinon from 'sinon';
-import { mount } from 'enzyme';
-import RevealSeedPhrase from './reveal-seed-phrase.container';
+import { fireEvent } from '@testing-library/react';
+import configureMockStore from 'redux-mock-store';
+import { renderWithProvider } from '../../../../../test/lib/render-helpers';
+import RevealSeedPhrase from '.';
 
 describe('Reveal Secret Recovery Phrase', () => {
-  let wrapper;
-
   const TEST_SEED =
     'debris dizzy just program just float decrease vacant alarm reduce speak stadium';
 
@@ -18,31 +18,29 @@ describe('Reveal Secret Recovery Phrase', () => {
     setCompletedOnboarding: sinon.spy(),
   };
 
-  beforeEach(() => {
-    wrapper = mount(<RevealSeedPhrase.WrappedComponent {...props} />, {
-      context: {
-        t: (str) => str,
-        trackEvent: () => undefined,
-      },
-    });
-  });
+  const mockState = {
+    metamask: {},
+  };
 
-  it('secret recovery phrase', () => {
-    const seedPhrase = wrapper.find(
-      '.reveal-seed-phrase__secret-words--hidden',
+  const mockStore = configureMockStore()(mockState);
+
+  it('should match snapshot', () => {
+    const { container } = renderWithProvider(
+      <RevealSeedPhrase {...props} />,
+      mockStore,
     );
-    expect(seedPhrase).toHaveLength(1);
-    expect(seedPhrase.text()).toStrictEqual(TEST_SEED);
+
+    expect(container).toMatchSnapshot();
   });
 
-  it('clicks to reveal', () => {
-    const reveal = wrapper.find('.reveal-seed-phrase__secret-blocker');
+  it('clicks to reveal shows seed phrase', () => {
+    const { queryByTestId } = renderWithProvider(
+      <RevealSeedPhrase {...props} />,
+      mockStore,
+    );
 
-    expect(wrapper.state().isShowingSeedPhrase).toStrictEqual(false);
-    reveal.simulate('click');
-    expect(wrapper.state().isShowingSeedPhrase).toStrictEqual(true);
+    fireEvent.click(queryByTestId('reveal-seed-blocker'));
 
-    const showSeed = wrapper.find('.reveal-seed-phrase__secret-words');
-    expect(showSeed).toHaveLength(1);
+    expect(queryByTestId('showing-seed-phrase')).toBeInTheDocument();
   });
 });
diff --git a/ui/pages/first-time-flow/welcome/beta-welcome-footer.component.js b/ui/pages/first-time-flow/welcome/beta-welcome-footer.component.js
index e7ebd921d..b3159855c 100644
--- a/ui/pages/first-time-flow/welcome/beta-welcome-footer.component.js
+++ b/ui/pages/first-time-flow/welcome/beta-welcome-footer.component.js
@@ -1,6 +1,12 @@
 import React from 'react';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 
+import Typography from '../../../components/ui/typography/typography';
+import {
+  TEXT_ALIGN,
+  FONT_WEIGHT,
+} from '../../../helpers/constants/design-system';
+
 const BetaWelcomeFooter = () => {
   const t = useI18nContext();
 
@@ -8,8 +14,17 @@ const BetaWelcomeFooter = () => {
     <>
       <div className="welcome-page__header">{t('betaWelcome')}</div>
       <div className="welcome-page__description">
-        <p>{t('betaMetamaskDescription')}</p>
-        <p>
+        <Typography align={TEXT_ALIGN.CENTER} marginBottom={6}>
+          {t('betaMetamaskDescription')}
+        </Typography>
+        <Typography
+          align={TEXT_ALIGN.CENTER}
+          marginBottom={6}
+          fontWeight={FONT_WEIGHT.BOLD}
+        >
+          {t('betaMetamaskDescriptionDisclaimerHeading')}
+        </Typography>
+        <Typography align={TEXT_ALIGN.CENTER} marginBottom={6}>
           {t('betaMetamaskDescriptionExplanation', [
             <a href="https://metamask.io/terms.html" key="terms-link">
               {t('betaMetamaskDescriptionExplanationTermsLinkText')}
@@ -18,7 +33,17 @@ const BetaWelcomeFooter = () => {
               {t('betaMetamaskDescriptionExplanationBetaTermsLinkText')}
             </a>,
           ])}
-        </p>
+        </Typography>
+        <Typography align={TEXT_ALIGN.CENTER}>
+          {t('betaMetamaskDescriptionExplanation2', [
+            <a href="https://metamask.io/terms.html" key="terms-link">
+              {t('betaMetamaskDescriptionExplanationTermsLinkText')}
+            </a>,
+            <a href="https://metamask.io/beta-terms.html" key="beta-terms-link">
+              {t('betaMetamaskDescriptionExplanation2BetaTermsLinkText')}
+            </a>,
+          ])}
+        </Typography>
       </div>
     </>
   );
diff --git a/ui/pages/first-time-flow/welcome/index.scss b/ui/pages/first-time-flow/welcome/index.scss
index f3dd786f7..fb90352f4 100644
--- a/ui/pages/first-time-flow/welcome/index.scss
+++ b/ui/pages/first-time-flow/welcome/index.scss
@@ -25,15 +25,6 @@
   }
 
   &__description {
-    text-align: center;
-
-    p {
-      @include Paragraph;
-
-      text-align: start;
-      margin-bottom: 22px;
-    }
-
     a {
       color: var(--color-primary-default);
     }
diff --git a/ui/pages/first-time-flow/welcome/welcome-footer.component.js b/ui/pages/first-time-flow/welcome/welcome-footer.component.js
index 93f42fa97..ea544201f 100644
--- a/ui/pages/first-time-flow/welcome/welcome-footer.component.js
+++ b/ui/pages/first-time-flow/welcome/welcome-footer.component.js
@@ -1,16 +1,20 @@
 import React from 'react';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 
+import Typography from '../../../components/ui/typography/typography';
+import { TEXT_ALIGN } from '../../../helpers/constants/design-system';
+
 const WelcomeFooter = () => {
   const t = useI18nContext();
 
   return (
     <>
       <div className="welcome-page__header">{t('welcome')}</div>
-      <div className="welcome-page__description">
-        <p>{t('metamaskDescription')}</p>
-        <p>{t('happyToSeeYou')}</p>
-      </div>
+      <Typography align={TEXT_ALIGN.CENTER} marginBottom={6}>
+        {t('metamaskDescription')}
+      </Typography>
+
+      <Typography align={TEXT_ALIGN.CENTER}>{t('happyToSeeYou')}</Typography>
     </>
   );
 };
diff --git a/ui/pages/permissions-connect/index.scss b/ui/pages/permissions-connect/index.scss
index 689ca7b45..f1bcb4910 100644
--- a/ui/pages/permissions-connect/index.scss
+++ b/ui/pages/permissions-connect/index.scss
@@ -42,7 +42,7 @@
 
     color: var(--color-text-default);
     grid-column: 2;
-    justify-self: end;
+    justify-self: flex-end;
     font-weight: bold;
   }
 }
diff --git a/ui/pages/permissions-connect/permissions-connect.component.js b/ui/pages/permissions-connect/permissions-connect.component.js
index 93306a76f..0df11a90e 100644
--- a/ui/pages/permissions-connect/permissions-connect.component.js
+++ b/ui/pages/permissions-connect/permissions-connect.component.js
@@ -164,11 +164,33 @@ export default class PermissionConnect extends Component {
   }
 
   selectAccounts = (addresses) => {
+    const {
+      confirmPermissionPath,
+      ///: BEGIN:ONLY_INCLUDE_IN(flask)
+      snapInstallPath,
+      snapUpdatePath,
+      isSnap,
+      permissionsRequest,
+      ///: END:ONLY_INCLUDE_IN
+    } = this.props;
     this.setState(
       {
         selectedAccountAddresses: addresses,
       },
-      () => this.props.history.push(this.props.confirmPermissionPath),
+      ///: BEGIN:ONLY_INCLUDE_IN(main,beta)
+      () => this.props.history.push(confirmPermissionPath),
+      ///: END:ONLY_INCLUDE_IN
+      ///: BEGIN:ONLY_INCLUDE_IN(flask)
+      () =>
+        this.props.history.push(
+          // eslint-disable-next-line no-nested-ternary
+          isSnap
+            ? permissionsRequest.newPermissions
+              ? snapUpdatePath
+              : snapInstallPath
+            : confirmPermissionPath,
+        ),
+      ///: END:ONLY_INCLUDE_IN
     );
   };
 
@@ -315,7 +337,7 @@ export default class PermissionConnect extends Component {
                   approveSnapInstall={(requestId) => {
                     approvePendingApproval(requestId, {
                       ...permissionsRequest,
-                      approvedAccounts: selectedAccountAddresses,
+                      approvedAccounts: [...selectedAccountAddresses],
                     });
                     this.redirect(true);
                   }}
@@ -345,7 +367,7 @@ export default class PermissionConnect extends Component {
                   approveSnapUpdate={(requestId) => {
                     approvePendingApproval(requestId, {
                       ...permissionsRequest,
-                      approvedAccounts: selectedAccountAddresses,
+                      approvedAccounts: [...selectedAccountAddresses],
                     });
                     this.redirect(true);
                   }}
diff --git a/ui/pages/send/send-content/send-amount-row/send-amount-row.component.js b/ui/pages/send/send-content/send-amount-row/send-amount-row.component.js
index 469cf1174..3320bf414 100644
--- a/ui/pages/send/send-content/send-amount-row/send-amount-row.component.js
+++ b/ui/pages/send/send-content/send-amount-row/send-amount-row.component.js
@@ -44,7 +44,7 @@ export default class SendAmountRow extends Component {
   render() {
     const { inError, asset } = this.props;
 
-    if (asset.type === ASSET_TYPES.COLLECTIBLE) {
+    if (asset.type === ASSET_TYPES.NFT) {
       return null;
     }
 
diff --git a/ui/pages/send/send-content/send-asset-row/send-asset-row.component.js b/ui/pages/send/send-content/send-asset-row/send-asset-row.component.js
index 98d7eecdf..9bbda50ac 100644
--- a/ui/pages/send/send-content/send-asset-row/send-asset-row.component.js
+++ b/ui/pages/send/send-content/send-asset-row/send-asset-row.component.js
@@ -79,7 +79,7 @@ export default class SendAssetRow extends Component {
         return this.props.nativeCurrency;
       case ASSET_TYPES.TOKEN:
         return ERC20;
-      case ASSET_TYPES.COLLECTIBLE:
+      case ASSET_TYPES.NFT:
         return token?.standard;
       default:
         return null;
@@ -144,7 +144,7 @@ export default class SendAssetRow extends Component {
       if (token) {
         return this.renderToken(token);
       }
-    } else if (type === ASSET_TYPES.COLLECTIBLE) {
+    } else if (type === ASSET_TYPES.NFT) {
       const collectible = collectibles.find(
         ({ address, tokenId }) =>
           isEqualCaseInsensitive(address, details.address) &&
@@ -268,7 +268,7 @@ export default class SendAssetRow extends Component {
       <div
         key={address}
         className="send-v2__asset-dropdown__asset"
-        onClick={() => this.selectToken(ASSET_TYPES.COLLECTIBLE, collectible)}
+        onClick={() => this.selectToken(ASSET_TYPES.NFT, collectible)}
       >
         <div className="send-v2__asset-dropdown__asset-icon">
           <Identicon address={address} diameter={36} image={image} />
diff --git a/ui/pages/send/send-content/send-content.component.js b/ui/pages/send/send-content/send-content.component.js
index a856624d1..9a157c0b7 100644
--- a/ui/pages/send/send-content/send-content.component.js
+++ b/ui/pages/send/send-content/send-content.component.js
@@ -71,7 +71,7 @@ export default class SendContent extends Component {
     const showHexData =
       this.props.showHexData &&
       asset.type !== ASSET_TYPES.TOKEN &&
-      asset.type !== ASSET_TYPES.COLLECTIBLE;
+      asset.type !== ASSET_TYPES.NFT;
 
     const showKnownRecipientWarning =
       recipient.warning === 'knownAddressRecipient';
diff --git a/ui/pages/send/send-footer/__snapshots__/send-footer.test.js.snap b/ui/pages/send/send-footer/__snapshots__/send-footer.test.js.snap
new file mode 100644
index 000000000..3e2b8b8c1
--- /dev/null
+++ b/ui/pages/send/send-footer/__snapshots__/send-footer.test.js.snap
@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SendFooter Component Component Update should match snapshot when component updated with errors 1`] = `
+<div>
+  <div
+    class="page-container__footer"
+  >
+    <footer>
+      <button
+        class="button btn--rounded btn-secondary page-container__footer-button"
+        data-testid="page-container-footer-cancel"
+        role="button"
+        tabindex="0"
+      >
+        [cancel]
+      </button>
+      <button
+        class="button btn--rounded btn-primary page-container__footer-button"
+        data-testid="page-container-footer-next"
+        role="button"
+        tabindex="0"
+      >
+        [next]
+      </button>
+    </footer>
+  </div>
+</div>
+`;
+
+exports[`SendFooter Component should match snapshot 1`] = `
+<div>
+  <div
+    class="page-container__footer"
+  >
+    <footer>
+      <button
+        class="button btn--rounded btn-secondary page-container__footer-button"
+        data-testid="page-container-footer-cancel"
+        role="button"
+        tabindex="0"
+      >
+        Cancel
+      </button>
+      <button
+        class="button btn--rounded btn-primary page-container__footer-button"
+        data-testid="page-container-footer-next"
+        role="button"
+        tabindex="0"
+      >
+        Next
+      </button>
+    </footer>
+  </div>
+</div>
+`;
diff --git a/ui/pages/send/send-footer/send-footer.component.test.js b/ui/pages/send/send-footer/send-footer.component.test.js
deleted file mode 100644
index cb2b974e3..000000000
--- a/ui/pages/send/send-footer/send-footer.component.test.js
+++ /dev/null
@@ -1,207 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import sinon from 'sinon';
-import {
-  CONFIRM_TRANSACTION_ROUTE,
-  DEFAULT_ROUTE,
-} from '../../../helpers/constants/routes';
-import PageContainerFooter from '../../../components/ui/page-container/page-container-footer';
-import { renderWithProvider } from '../../../../test/jest';
-import SendFooter from './send-footer.component';
-
-describe('SendFooter Component', () => {
-  let wrapper;
-
-  const propsMethodSpies = {
-    addToAddressBookIfNew: sinon.spy(),
-    cancelTx: sinon.spy(),
-    resetSendState: sinon.spy(),
-    sign: sinon.spy(),
-    update: sinon.spy(),
-    mostRecentOverviewPage: '/',
-  };
-  const historySpies = {
-    push: sinon.spy(),
-  };
-  const MOCK_EVENT = { preventDefault: () => undefined };
-
-  const renderShallow = (props) => {
-    return shallow(
-      <SendFooter
-        addToAddressBookIfNew={propsMethodSpies.addToAddressBookIfNew}
-        resetSendState={propsMethodSpies.resetSendState}
-        cancelTx={propsMethodSpies.cancelTx}
-        disabled
-        draftTransactionID="ID"
-        history={historySpies}
-        sign={propsMethodSpies.sign}
-        to="mockTo"
-        toAccounts={['mockAccount']}
-        sendErrors={{}}
-        sendStage="DRAFT"
-        gasEstimateType="BASIC"
-        mostRecentOverviewPage="mostRecentOverviewPage"
-        {...props}
-      />,
-      { context: { t: (str) => str, trackEvent: () => ({}) } },
-    );
-  };
-
-  beforeAll(() => {
-    sinon.spy(SendFooter.prototype, 'onCancel');
-    sinon.spy(SendFooter.prototype, 'onSubmit');
-  });
-
-  beforeEach(() => {
-    wrapper = renderShallow();
-  });
-
-  afterEach(() => {
-    propsMethodSpies.resetSendState.resetHistory();
-    propsMethodSpies.cancelTx.resetHistory();
-    propsMethodSpies.addToAddressBookIfNew.resetHistory();
-    propsMethodSpies.resetSendState.resetHistory();
-    propsMethodSpies.sign.resetHistory();
-    propsMethodSpies.update.resetHistory();
-    historySpies.push.resetHistory();
-    SendFooter.prototype.onCancel.resetHistory();
-    SendFooter.prototype.onSubmit.resetHistory();
-  });
-
-  afterAll(() => {
-    sinon.restore();
-  });
-
-  describe('onCancel', () => {
-    it('should call resetSendState', () => {
-      expect(propsMethodSpies.resetSendState.callCount).toStrictEqual(0);
-      wrapper.instance().onCancel();
-      expect(propsMethodSpies.resetSendState.callCount).toStrictEqual(1);
-    });
-
-    it('should call cancelTx', () => {
-      expect(propsMethodSpies.cancelTx.callCount).toStrictEqual(0);
-      wrapper.instance().onCancel();
-      expect(propsMethodSpies.cancelTx.callCount).toStrictEqual(1);
-      expect(propsMethodSpies.cancelTx.getCall(0).args[0]?.id).toStrictEqual(
-        'ID',
-      );
-    });
-
-    it('should call history.push', () => {
-      expect(historySpies.push.callCount).toStrictEqual(0);
-      wrapper.instance().onCancel();
-      expect(historySpies.push.callCount).toStrictEqual(1);
-      expect(historySpies.push.getCall(0).args[0]).toStrictEqual(
-        'mostRecentOverviewPage',
-      );
-    });
-
-    it('should call history.push with DEFAULT_ROUTE in  edit stage', () => {
-      wrapper = renderShallow({ sendStage: 'EDIT' });
-      expect(historySpies.push.callCount).toStrictEqual(0);
-      wrapper.instance().onCancel();
-      expect(historySpies.push.callCount).toStrictEqual(1);
-      expect(historySpies.push.getCall(0).args[0]).toStrictEqual(DEFAULT_ROUTE);
-    });
-  });
-
-  describe('onSubmit', () => {
-    it('should call addToAddressBookIfNew with the correct params', () => {
-      wrapper.instance().onSubmit(MOCK_EVENT);
-      expect(propsMethodSpies.addToAddressBookIfNew.calledOnce).toStrictEqual(
-        true,
-      );
-      expect(
-        propsMethodSpies.addToAddressBookIfNew.getCall(0).args,
-      ).toStrictEqual(['mockTo', ['mockAccount']]);
-    });
-
-    it('should call props.sign whe submitting', async () => {
-      await wrapper.instance().onSubmit(MOCK_EVENT);
-      expect(propsMethodSpies.sign.calledOnce).toStrictEqual(true);
-    });
-
-    it('should call history.push', async () => {
-      await wrapper.instance().onSubmit(MOCK_EVENT);
-      expect(historySpies.push.callCount).toStrictEqual(1);
-      expect(historySpies.push.getCall(0).args[0]).toStrictEqual(
-        CONFIRM_TRANSACTION_ROUTE,
-      );
-    });
-  });
-
-  describe('render', () => {
-    beforeEach(() => {
-      wrapper = shallow(
-        <SendFooter
-          addToAddressBookIfNew={propsMethodSpies.addToAddressBookIfNew}
-          amount="mockAmount"
-          resetSendState={propsMethodSpies.resetSendState}
-          cancelTx={propsMethodSpies.cancelTx}
-          disabled
-          draftTransactionID="ID"
-          editingTransactionId="mockEditingTransactionId"
-          errors={{}}
-          from={{ address: 'mockAddress', balance: 'mockBalance' }}
-          gasLimit="mockGasLimit"
-          gasPrice="mockGasPrice"
-          gasTotal="mockGasTotal"
-          history={historySpies}
-          sendToken={{ mockProp: 'mockSendTokenProp' }}
-          sign={propsMethodSpies.sign}
-          to="mockTo"
-          toAccounts={['mockAccount']}
-          tokenBalance="mockTokenBalance"
-          unapprovedTxs={{}}
-          update={propsMethodSpies.update}
-          mostRecentOverviewPage="mostRecentOverviewPage"
-        />,
-        { context: { t: (str) => str, trackEvent: () => ({}) } },
-      );
-    });
-
-    it('should render a PageContainerFooter component', () => {
-      expect(wrapper.find(PageContainerFooter)).toHaveLength(1);
-    });
-
-    it('should pass the correct props to PageContainerFooter', () => {
-      const { onCancel, onSubmit, disabled } = wrapper
-        .find(PageContainerFooter)
-        .props();
-      expect(disabled).toStrictEqual(true);
-
-      expect(SendFooter.prototype.onSubmit.callCount).toStrictEqual(0);
-      onSubmit(MOCK_EVENT);
-      expect(SendFooter.prototype.onSubmit.callCount).toStrictEqual(1);
-
-      expect(SendFooter.prototype.onCancel.callCount).toStrictEqual(0);
-      onCancel();
-      expect(SendFooter.prototype.onCancel.callCount).toStrictEqual(1);
-    });
-  });
-
-  describe('Cancel Button', () => {
-    const renderFooter = (props) =>
-      renderWithProvider(
-        <SendFooter
-          disabled
-          mostRecentOverviewPage="mostRecentOverviewPage"
-          draftTransactionID="ID"
-          sendErrors={{}}
-          sendStage="DRAFT"
-          {...props}
-        />,
-      );
-
-    it('has a cancel button in footer', () => {
-      const { getByText } = renderFooter();
-      expect(getByText('Cancel')).toBeTruthy();
-    });
-
-    it('has label changed to Reject in editing stage', () => {
-      const { getByText } = renderFooter({ sendStage: 'EDIT' });
-      expect(getByText('Reject')).toBeTruthy();
-    });
-  });
-});
diff --git a/ui/pages/send/send-footer/send-footer.container.test.js b/ui/pages/send/send-footer/send-footer.container.test.js
deleted file mode 100644
index fd9cd4958..000000000
--- a/ui/pages/send/send-footer/send-footer.container.test.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import sinon from 'sinon';
-
-import { addToAddressBook, cancelTx } from '../../../store/actions';
-import { resetSendState, signTransaction } from '../../../ducks/send';
-
-let mapDispatchToProps;
-
-jest.mock('react-redux', () => ({
-  connect: (_, md) => {
-    mapDispatchToProps = md;
-    return () => ({});
-  },
-}));
-
-jest.mock('../../../store/actions', () => ({
-  addToAddressBook: jest.fn(),
-  cancelTx: jest.fn(),
-}));
-
-jest.mock('../../../ducks/metamask/metamask', () => ({
-  getSendToAccounts: (s) => [`mockToAccounts:${s}`],
-}));
-
-jest.mock('../../../ducks/send', () => ({
-  getGasPrice: (s) => `mockGasPrice:${s}`,
-  getSendTo: (s) => `mockTo:${s}`,
-  getSendErrors: (s) => `mockSendErrors:${s}`,
-  getSendStage: (s) => `mockStage:${s}`,
-  getDraftTransaction: (s) => ({ id: `draftTransaction:${s}` }),
-  resetSendState: jest.fn(),
-  signTransaction: jest.fn(),
-}));
-
-require('./send-footer.container');
-
-describe('send-footer container', () => {
-  describe('mapDispatchToProps()', () => {
-    let dispatchSpy;
-    let mapDispatchToPropsObject;
-
-    beforeEach(() => {
-      dispatchSpy = sinon.spy();
-      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy);
-    });
-
-    describe('resetSendState()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.resetSendState();
-        expect(dispatchSpy.calledOnce).toStrictEqual(true);
-        expect(resetSendState).toHaveBeenCalled();
-      });
-    });
-
-    describe('cancelTx()', () => {
-      it('should dispatch an action', () => {
-        const draftTansaction = { id: 'ID' };
-        mapDispatchToPropsObject.cancelTx(draftTansaction);
-        expect(dispatchSpy.calledOnce).toStrictEqual(true);
-        expect(cancelTx).toHaveBeenCalledTimes(1);
-        expect(cancelTx).toHaveBeenCalledWith(draftTansaction);
-      });
-    });
-
-    describe('sign()', () => {
-      it('should dispatch a signTransaction action', () => {
-        mapDispatchToPropsObject.sign();
-        expect(dispatchSpy.calledOnce).toStrictEqual(true);
-        expect(signTransaction).toHaveBeenCalledTimes(1);
-      });
-    });
-
-    describe('addToAddressBookIfNew()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.addToAddressBookIfNew(
-          'mockNewAddress',
-          [{ address: 'mockToAccounts' }],
-          'mockNickname',
-        );
-        expect(dispatchSpy.calledOnce).toStrictEqual(true);
-        expect(addToAddressBook).toHaveBeenCalledWith(
-          '0xmockNewAddress',
-          'mockNickname',
-        );
-      });
-    });
-  });
-});
diff --git a/ui/pages/send/send-footer/send-footer.test.js b/ui/pages/send/send-footer/send-footer.test.js
new file mode 100644
index 000000000..e6d416b1b
--- /dev/null
+++ b/ui/pages/send/send-footer/send-footer.test.js
@@ -0,0 +1,136 @@
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+import { fireEvent, waitFor } from '@testing-library/react';
+import thunk from 'redux-thunk';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import mockState from '../../../../test/data/mock-state.json';
+import {
+  CONFIRM_TRANSACTION_ROUTE,
+  DEFAULT_ROUTE,
+} from '../../../helpers/constants/routes';
+import { SEND_STAGES } from '../../../ducks/send';
+import SendFooter from '.';
+
+const mockResetSendState = jest.fn();
+const mockSendTransaction = jest.fn();
+const mockAddtoAddressBook = jest.fn();
+const mockCancelTx = jest.fn();
+
+jest.mock('../../../ducks/send/index.js', () => ({
+  ...jest.requireActual('../../../ducks/send/index.js'),
+  signTransaction: () => mockSendTransaction,
+  resetSendState: () => mockResetSendState,
+}));
+
+jest.mock('../../../store/actions.js', () => ({
+  addToAddressBook: () => mockAddtoAddressBook,
+  cancelTx: () => mockCancelTx,
+}));
+
+describe('SendFooter Component', () => {
+  const props = {
+    history: {
+      push: jest.fn(),
+    },
+  };
+
+  afterEach(() => {
+    props.history.push.mockReset();
+  });
+
+  const mockStore = configureMockStore([thunk])(mockState);
+
+  it('should match snapshot', () => {
+    const { container } = renderWithProvider(
+      <SendFooter {...props} />,
+      mockStore,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  describe('onCancel', () => {
+    it('should call reset send state and route to recent page without cancelling tx', () => {
+      const { queryByText } = renderWithProvider(
+        <SendFooter {...props} />,
+        mockStore,
+      );
+
+      const cancelText = queryByText('Cancel');
+      fireEvent.click(cancelText);
+
+      expect(mockResetSendState).toHaveBeenCalled();
+      expect(mockCancelTx).not.toHaveBeenCalled();
+      expect(props.history.push).toHaveBeenCalledWith(
+        '/mostRecentOverviewPage',
+      );
+    });
+
+    it('should reject/cancel tx when coming from tx editing and route to index', () => {
+      const sendDataState = {
+        ...mockState,
+        send: {
+          currentTransactionUUID: '01',
+          draftTransactions: {
+            '01': {
+              id: '99',
+            },
+          },
+          stage: SEND_STAGES.EDIT,
+        },
+      };
+
+      const sendStateStore = configureMockStore([thunk])(sendDataState);
+
+      const { queryByText } = renderWithProvider(
+        <SendFooter {...props} />,
+        sendStateStore,
+      );
+
+      const rejectText = queryByText('Reject');
+      fireEvent.click(rejectText);
+
+      expect(mockResetSendState).toHaveBeenCalled();
+      expect(mockCancelTx).toHaveBeenCalled();
+      expect(props.history.push).toHaveBeenCalledWith(DEFAULT_ROUTE);
+    });
+  });
+
+  describe('onSubmit', () => {
+    it('should', async () => {
+      const { queryByText } = renderWithProvider(
+        <SendFooter {...props} />,
+        mockStore,
+      );
+
+      const nextText = queryByText('Next');
+      fireEvent.click(nextText);
+
+      await waitFor(() => {
+        expect(mockAddtoAddressBook).toHaveBeenCalled();
+        expect(mockSendTransaction).toHaveBeenCalled();
+        expect(props.history.push).toHaveBeenCalledWith(
+          CONFIRM_TRANSACTION_ROUTE,
+        );
+      });
+    });
+  });
+
+  describe('Component Update', () => {
+    it('should match snapshot when component updated with errors', () => {
+      const { container, rerender } = renderWithProvider(
+        <SendFooter.WrappedComponent />,
+      );
+
+      const sendErrorProps = {
+        sendErrors: {
+          gasFee: 'gas fee error',
+          amount: 'amount error',
+        },
+      };
+
+      rerender(<SendFooter.WrappedComponent {...sendErrorProps} />);
+      expect(container).toMatchSnapshot();
+    });
+  });
+});
diff --git a/ui/pages/settings/advanced-tab/advanced-tab.component.js b/ui/pages/settings/advanced-tab/advanced-tab.component.js
index 469980c3c..330c8b871 100644
--- a/ui/pages/settings/advanced-tab/advanced-tab.component.js
+++ b/ui/pages/settings/advanced-tab/advanced-tab.component.js
@@ -185,7 +185,7 @@ export default class AdvancedTab extends PureComponent {
 
     return (
       <div
-        ref={this.settingsRefs[15]}
+        ref={this.settingsRefs[14]}
         className="settings-page__content-row"
         data-testid="advanced-setting-data-restore"
       >
@@ -205,6 +205,7 @@ export default class AdvancedTab extends PureComponent {
             </label>
             <input
               id="restore-file"
+              data-testid="restore-file"
               style={{ visibility: 'hidden' }}
               type="file"
               accept=".json"
@@ -247,7 +248,7 @@ export default class AdvancedTab extends PureComponent {
     const { t } = this.context;
     return (
       <div
-        ref={this.settingsRefs[14]}
+        ref={this.settingsRefs[13]}
         className="settings-page__content-row"
         data-testid="advanced-setting-data-backup"
       >
@@ -260,6 +261,7 @@ export default class AdvancedTab extends PureComponent {
         <div className="settings-page__content-item">
           <div className="settings-page__content-item-col">
             <Button
+              data-testid="backup-button"
               type="secondary"
               large
               onClick={() => this.backupUserData()}
@@ -544,6 +546,7 @@ export default class AdvancedTab extends PureComponent {
             <TextField
               type="number"
               id="autoTimeout"
+              data-testid="auto-lockout-time"
               placeholder="5"
               value={this.state.autoLockTimeLimit}
               onChange={(e) => this.handleLockChange(e.target.value)}
@@ -554,6 +557,7 @@ export default class AdvancedTab extends PureComponent {
             />
             <Button
               type="primary"
+              data-testid="auto-lockout-button"
               className="settings-tab__rpc-save-button"
               disabled={lockTimeError !== ''}
               onClick={() => {
@@ -605,7 +609,7 @@ export default class AdvancedTab extends PureComponent {
       : LEDGER_TRANSPORT_NAMES.U2F;
 
     return (
-      <div ref={this.settingsRefs[11]} className="settings-page__content-row">
+      <div ref={this.settingsRefs[10]} className="settings-page__content-row">
         <div className="settings-page__content-item">
           <span>{t('preferredLedgerConnectionType')}</span>
           <div className="settings-page__content-description">
@@ -704,7 +708,7 @@ export default class AdvancedTab extends PureComponent {
 
     return (
       <div
-        ref={this.settingsRefs[10]}
+        ref={this.settingsRefs[9]}
         className="settings-page__content-row"
         data-testid="advanced-setting-ipfs-gateway"
       >
@@ -747,7 +751,7 @@ export default class AdvancedTab extends PureComponent {
 
     return (
       <div
-        ref={this.settingsRefs[12]}
+        ref={this.settingsRefs[11]}
         className="settings-page__content-row"
         data-testid="advanced-setting-dismiss-reminder"
       >
@@ -777,7 +781,7 @@ export default class AdvancedTab extends PureComponent {
 
     return (
       <div
-        ref={this.settingsRefs[13]}
+        ref={this.settingsRefs[12]}
         className="settings-page__content-row"
         data-testid="advanced-setting-token-detection"
       >
diff --git a/ui/pages/settings/advanced-tab/advanced-tab.component.test.js b/ui/pages/settings/advanced-tab/advanced-tab.component.test.js
index bcd56a90b..fa8d5742d 100644
--- a/ui/pages/settings/advanced-tab/advanced-tab.component.test.js
+++ b/ui/pages/settings/advanced-tab/advanced-tab.component.test.js
@@ -1,180 +1,69 @@
 import React from 'react';
-import sinon from 'sinon';
-import { shallow } from 'enzyme';
-import TextField from '../../../components/ui/text-field';
-import { LEDGER_TRANSPORT_TYPES } from '../../../../shared/constants/hardware-wallets';
-import ToggleButton from '../../../components/ui/toggle-button';
-import AdvancedTab from './advanced-tab.component';
+import { fireEvent } from '@testing-library/react';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import mockState from '../../../../test/data/mock-state.json';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import AdvancedTab from '.';
+
+const mockSetAutoLockTimeLimit = jest.fn();
+const mockSetShowTestNetworks = jest.fn();
+const mockSetUseTokenDetection = jest.fn();
+
+jest.mock('../../../store/actions.js', () => {
+  return {
+    setAutoLockTimeLimit: () => mockSetAutoLockTimeLimit,
+    setShowTestNetworks: () => mockSetShowTestNetworks,
+    setUseTokenDetection: () => mockSetUseTokenDetection,
+  };
+});
 
 describe('AdvancedTab Component', () => {
-  let component;
-  let setAutoLockTimeLimitSpy = sinon.spy();
-  const toggleTestnet = sinon.spy();
-  const toggleTokenDetection = sinon.spy();
-
-  beforeAll(() => {
-    component = shallow(
-      <AdvancedTab
-        ipfsGateway=""
-        setAutoLockTimeLimit={setAutoLockTimeLimitSpy}
-        setIpfsGateway={() => undefined}
-        setShowFiatConversionOnTestnetsPreference={() => undefined}
-        setShowTestNetworks={toggleTestnet}
-        showTestNetworks={false}
-        ledgerTransportType={LEDGER_TRANSPORT_TYPES.U2F}
-        setLedgerTransportPreference={() => undefined}
-        setDismissSeedBackUpReminder={() => undefined}
-        dismissSeedBackUpReminder={false}
-        useTokenDetection
-        setUseTokenDetection={toggleTokenDetection}
-        userHasALedgerAccount
-        backupUserData={() => undefined}
-        restoreUserData={() => undefined}
-      />,
-      {
-        context: {
-          t: (s) => `_${s}`,
-        },
-      },
-    );
-  });
+  const mockStore = configureMockStore([thunk])(mockState);
 
   it('should render backup button', () => {
-    expect(component.find('.settings-page__content-row')).toHaveLength(15);
-
-    expect(
-      component
-        .find('.settings-page__content-row')
-        .at(10)
-        .find('.settings-page__content-item'),
-    ).toHaveLength(2);
-
-    expect(
-      component
-        .find('.settings-page__content-row')
-        .at(10)
-        .find('.settings-page__content-item')
-        .at(0)
-        .find('.settings-page__content-description')
-        .props().children,
-    ).toStrictEqual('_backupUserDataDescription');
-
-    expect(
-      component
-        .find('.settings-page__content-row')
-        .at(10)
-        .find('.settings-page__content-item')
-        .at(1)
-        .find('Button')
-        .props().children,
-    ).toStrictEqual('_backup');
+    const { queryByTestId } = renderWithProvider(<AdvancedTab />, mockStore);
+    const backupButton = queryByTestId('backup-button');
+    expect(backupButton).toBeInTheDocument();
   });
 
   it('should render restore button', () => {
-    expect(component.find('.settings-page__content-row')).toHaveLength(15);
-
-    expect(
-      component
-        .find('.settings-page__content-row')
-        .at(11)
-        .find('.settings-page__content-item'),
-    ).toHaveLength(2);
-
-    expect(
-      component
-        .find('.settings-page__content-row')
-        .at(11)
-        .find('.settings-page__content-item')
-        .at(0)
-        .find('.settings-page__content-description')
-        .props().children,
-    ).toStrictEqual('_restoreUserDataDescription');
-
-    expect(
-      component
-        .find('.settings-page__content-row')
-        .at(11)
-        .find('.settings-page__content-item')
-        .at(1)
-        .find('label')
-        .props().children,
-    ).toStrictEqual('_restore');
+    const { queryByTestId } = renderWithProvider(<AdvancedTab />, mockStore);
+    const restoreFile = queryByTestId('restore-file');
+    expect(restoreFile).toBeInTheDocument();
   });
 
   it('should update autoLockTimeLimit', () => {
-    setAutoLockTimeLimitSpy = sinon.spy();
-    component = shallow(
-      <AdvancedTab
-        ipfsGateway=""
-        setAutoLockTimeLimit={setAutoLockTimeLimitSpy}
-        setIpfsGateway={() => undefined}
-        setShowFiatConversionOnTestnetsPreference={() => undefined}
-        ledgerTransportType={LEDGER_TRANSPORT_TYPES.U2F}
-        setLedgerTransportPreference={() => undefined}
-        setDismissSeedBackUpReminder={() => undefined}
-        dismissSeedBackUpReminder={false}
-        setShowTestNetworks={toggleTestnet}
-        useTokenDetection
-        setUseTokenDetection={toggleTokenDetection}
-        userHasALedgerAccount
-        backupUserData={() => undefined}
-        restoreUserData={() => undefined}
-      />,
-      {
-        context: {
-          t: (s) => `_${s}`,
-        },
-      },
-    );
+    const { queryByTestId } = renderWithProvider(<AdvancedTab />, mockStore);
+    const autoLockoutTime = queryByTestId('auto-lockout-time');
+    const autoLockoutButton = queryByTestId('auto-lockout-button');
 
-    const autoTimeout = component.find('.settings-page__content-row').at(9);
-    const textField = autoTimeout.find(TextField);
+    fireEvent.change(autoLockoutTime, { target: { value: 1440 } });
 
-    textField.props().onChange({ target: { value: 1440 } });
-    expect(component.state().autoLockTimeLimit).toStrictEqual(1440);
+    expect(autoLockoutTime).toHaveValue(1440);
 
-    autoTimeout.find('.settings-tab__rpc-save-button').simulate('click');
-    expect(setAutoLockTimeLimitSpy.args[0][0]).toStrictEqual(1440);
+    fireEvent.click(autoLockoutButton);
+
+    expect(mockSetAutoLockTimeLimit).toHaveBeenCalled();
   });
 
   it('should toggle show test networks', () => {
-    const testNetworks = component.find('.settings-page__content-row').at(7);
-    const toggleButton = testNetworks.find(ToggleButton);
-    toggleButton.first().simulate('toggle');
-    expect(toggleTestnet.calledOnce).toStrictEqual(true);
+    const { queryAllByRole } = renderWithProvider(<AdvancedTab />, mockStore);
+
+    const testNetworkToggle = queryAllByRole('checkbox')[4];
+
+    fireEvent.click(testNetworkToggle);
+
+    expect(mockSetShowTestNetworks).toHaveBeenCalled();
   });
 
   it('should toggle token detection', () => {
-    component = shallow(
-      <AdvancedTab
-        ipfsGateway=""
-        setAutoLockTimeLimit={setAutoLockTimeLimitSpy}
-        setIpfsGateway={() => undefined}
-        setShowFiatConversionOnTestnetsPreference={() => undefined}
-        setShowTestNetworks={toggleTestnet}
-        showTestNetworks={false}
-        ledgerTransportType={LEDGER_TRANSPORT_TYPES.U2F}
-        setLedgerTransportPreference={() => undefined}
-        setDismissSeedBackUpReminder={() => undefined}
-        dismissSeedBackUpReminder={false}
-        useTokenDetection
-        setUseTokenDetection={toggleTokenDetection}
-        userHasALedgerAccount
-        backupUserData={() => undefined}
-        restoreUserData={() => undefined}
-      />,
-      {
-        context: {
-          trackEvent: () => undefined,
-          t: (s) => `_${s}`,
-        },
-      },
-    );
-    const useTokenDetection = component
-      .find('.settings-page__content-row')
-      .at(4);
-    const toggleButton = useTokenDetection.find(ToggleButton);
-    toggleButton.first().simulate('toggle');
-    expect(toggleTokenDetection.calledOnce).toStrictEqual(true);
+    const { queryAllByRole } = renderWithProvider(<AdvancedTab />, mockStore);
+
+    const tokenDetectionToggle = queryAllByRole('checkbox')[1];
+
+    fireEvent.click(tokenDetectionToggle);
+
+    expect(mockSetUseTokenDetection).toHaveBeenCalled();
   });
 });
diff --git a/ui/pages/settings/experimental-tab/experimental-tab.component.js b/ui/pages/settings/experimental-tab/experimental-tab.component.js
index 0840b26c5..fc05a8620 100644
--- a/ui/pages/settings/experimental-tab/experimental-tab.component.js
+++ b/ui/pages/settings/experimental-tab/experimental-tab.component.js
@@ -14,12 +14,14 @@ export default class ExperimentalTab extends PureComponent {
   };
 
   static propTypes = {
-    useCollectibleDetection: PropTypes.bool,
-    setUseCollectibleDetection: PropTypes.func,
+    useNftDetection: PropTypes.bool,
+    setUseNftDetection: PropTypes.func,
     setOpenSeaEnabled: PropTypes.func,
     openSeaEnabled: PropTypes.bool,
     eip1559V2Enabled: PropTypes.bool,
     setEIP1559V2Enabled: PropTypes.func,
+    improvedTokenAllowanceEnabled: PropTypes.bool,
+    setImprovedTokenAllowanceEnabled: PropTypes.func,
   };
 
   settingsRefs = Array(
@@ -50,8 +52,8 @@ export default class ExperimentalTab extends PureComponent {
 
     const { t } = this.context;
     const {
-      useCollectibleDetection,
-      setUseCollectibleDetection,
+      useNftDetection,
+      setUseNftDetection,
       openSeaEnabled,
       setOpenSeaEnabled,
     } = this.props;
@@ -70,7 +72,7 @@ export default class ExperimentalTab extends PureComponent {
         <div className="settings-page__content-item">
           <div className="settings-page__content-item-col">
             <ToggleButton
-              value={useCollectibleDetection}
+              value={useNftDetection}
               onToggle={(value) => {
                 this.context.trackEvent({
                   category: EVENT.CATEGORIES.SETTINGS,
@@ -83,7 +85,7 @@ export default class ExperimentalTab extends PureComponent {
                 if (!value && !openSeaEnabled) {
                   setOpenSeaEnabled(!value);
                 }
-                setUseCollectibleDetection(!value);
+                setUseNftDetection(!value);
               }}
               offLabel={t('off')}
               onLabel={t('on')}
@@ -102,8 +104,8 @@ export default class ExperimentalTab extends PureComponent {
     const {
       openSeaEnabled,
       setOpenSeaEnabled,
-      useCollectibleDetection,
-      setUseCollectibleDetection,
+      useNftDetection,
+      setUseNftDetection,
     } = this.props;
 
     return (
@@ -131,8 +133,8 @@ export default class ExperimentalTab extends PureComponent {
                   },
                 });
                 // value is positive when being toggled off
-                if (value && useCollectibleDetection) {
-                  setUseCollectibleDetection(false);
+                if (value && useNftDetection) {
+                  setUseNftDetection(false);
                 }
                 setOpenSeaEnabled(!value);
               }}
@@ -190,9 +192,47 @@ export default class ExperimentalTab extends PureComponent {
     );
   }
 
+  renderImprovedTokenAllowanceToggle() {
+    const { t } = this.context;
+    const { improvedTokenAllowanceEnabled, setImprovedTokenAllowanceEnabled } =
+      this.props;
+
+    return (
+      <div ref={this.settingsRefs[1]} className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{t('improvedTokenAllowance')}</span>
+          <div className="settings-page__content-description">
+            {t('improvedTokenAllowanceDescription')}
+          </div>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <ToggleButton
+              value={improvedTokenAllowanceEnabled}
+              onToggle={(value) => {
+                this.context.trackEvent({
+                  category: EVENT.CATEGORIES.SETTINGS,
+                  event: 'Enabled/Disable ImprovedTokenAllowance',
+                  properties: {
+                    action: 'Enabled/Disable ImprovedTokenAllowance',
+                    legacy_event: true,
+                  },
+                });
+                setImprovedTokenAllowanceEnabled(!value);
+              }}
+              offLabel={t('off')}
+              onLabel={t('on')}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   render() {
     return (
       <div className="settings-page__body">
+        {this.renderImprovedTokenAllowanceToggle()}
         {this.renderOpenSeaEnabledToggle()}
         {this.renderCollectibleDetectionToggle()}
         {this.renderEIP1559V2EnabledToggle()}
diff --git a/ui/pages/settings/experimental-tab/experimental-tab.container.js b/ui/pages/settings/experimental-tab/experimental-tab.container.js
index 6e95f990a..16d2fbfb3 100644
--- a/ui/pages/settings/experimental-tab/experimental-tab.container.js
+++ b/ui/pages/settings/experimental-tab/experimental-tab.container.js
@@ -2,31 +2,35 @@ import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import {
-  setUseCollectibleDetection,
+  setUseNftDetection,
   setOpenSeaEnabled,
   setEIP1559V2Enabled,
+  setImprovedTokenAllowanceEnabled,
 } from '../../../store/actions';
 import {
-  getUseCollectibleDetection,
+  getUseNftDetection,
   getOpenSeaEnabled,
   getEIP1559V2Enabled,
+  getIsImprovedTokenAllowanceEnabled,
 } from '../../../selectors';
 import ExperimentalTab from './experimental-tab.component';
 
 const mapStateToProps = (state) => {
   return {
-    useCollectibleDetection: getUseCollectibleDetection(state),
+    useNftDetection: getUseNftDetection(state),
     openSeaEnabled: getOpenSeaEnabled(state),
     eip1559V2Enabled: getEIP1559V2Enabled(state),
+    improvedTokenAllowanceEnabled: getIsImprovedTokenAllowanceEnabled(state),
   };
 };
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    setUseCollectibleDetection: (val) =>
-      dispatch(setUseCollectibleDetection(val)),
+    setUseNftDetection: (val) => dispatch(setUseNftDetection(val)),
     setOpenSeaEnabled: (val) => dispatch(setOpenSeaEnabled(val)),
     setEIP1559V2Enabled: (val) => dispatch(setEIP1559V2Enabled(val)),
+    setImprovedTokenAllowanceEnabled: (val) =>
+      dispatch(setImprovedTokenAllowanceEnabled(val)),
   };
 };
 
diff --git a/ui/pages/settings/networks-tab/networks-form/networks-form.js b/ui/pages/settings/networks-tab/networks-form/networks-form.js
index 503e205aa..a0fb3ce61 100644
--- a/ui/pages/settings/networks-tab/networks-form/networks-form.js
+++ b/ui/pages/settings/networks-tab/networks-form/networks-form.js
@@ -543,7 +543,7 @@ const NetworksForm = ({
             url: rpcUrlOrigin,
           },
           properties: {
-            chain_id: addHexPrefix(chainId.toString(16)),
+            chain_id: addHexPrefix(Number(chainId).toString(16)),
             network_name: networkName,
             network: rpcUrlOrigin,
             symbol: ticker,
diff --git a/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap b/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
new file mode 100644
index 000000000..890bc9d0c
--- /dev/null
+++ b/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
@@ -0,0 +1,246 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Security Tab should match snapshot 1`] = `
+<div>
+  <div
+    class="settings-page__body"
+  >
+    <div
+      class="settings-page__content-row"
+    >
+      <div
+        class="settings-page__content-item"
+      >
+        <span>
+          Reveal Secret Recovery Phrase
+        </span>
+      </div>
+      <div
+        class="settings-page__content-item"
+      >
+        <div
+          class="settings-page__content-item-col"
+        >
+          <button
+            class="button btn--rounded btn-danger btn--large"
+            data-testid="reveal-seed-words"
+            role="button"
+            tabindex="0"
+          >
+            Reveal Secret Recovery Phrase
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="settings-page__content-row"
+    >
+      <div
+        class="settings-page__content-item"
+      >
+        <span>
+          Show incoming transactions
+        </span>
+        <div
+          class="settings-page__content-description"
+        >
+          Select this to use Etherscan to show incoming transactions in the transactions list
+        </div>
+      </div>
+      <div
+        class="settings-page__content-item"
+      >
+        <div
+          class="settings-page__content-item-col"
+        >
+          <label
+            class="toggle-button toggle-button--on"
+            tabindex="0"
+          >
+            <div
+              style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
+            >
+              <div
+                style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
+              >
+                <div
+                  style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
+                />
+                <div
+                  style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 0;"
+                />
+              </div>
+              <div
+                style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
+              >
+                <div
+                  style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(3, 125, 214); left: 18px;"
+                />
+              </div>
+              <input
+                style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
+                type="checkbox"
+                value="true"
+              />
+            </div>
+            <div
+              class="toggle-button__status"
+            >
+              <span
+                class="toggle-button__label-off"
+              >
+                Off
+              </span>
+              <span
+                class="toggle-button__label-on"
+              >
+                On
+              </span>
+            </div>
+          </label>
+        </div>
+      </div>
+    </div>
+    <div
+      class="settings-page__content-row"
+    >
+      <div
+        class="settings-page__content-item"
+      >
+        <span>
+          Use phishing detection
+        </span>
+        <div
+          class="settings-page__content-description"
+        >
+          Display a warning for phishing domains targeting Ethereum users
+        </div>
+      </div>
+      <div
+        class="settings-page__content-item"
+      >
+        <div
+          class="settings-page__content-item-col"
+        >
+          <label
+            class="toggle-button toggle-button--on"
+            tabindex="0"
+          >
+            <div
+              style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
+            >
+              <div
+                style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
+              >
+                <div
+                  style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
+                />
+                <div
+                  style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 0;"
+                />
+              </div>
+              <div
+                style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
+              >
+                <div
+                  style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(3, 125, 214); left: 18px;"
+                />
+              </div>
+              <input
+                style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
+                type="checkbox"
+                value="true"
+              />
+            </div>
+            <div
+              class="toggle-button__status"
+            >
+              <span
+                class="toggle-button__label-off"
+              >
+                Off
+              </span>
+              <span
+                class="toggle-button__label-on"
+              >
+                On
+              </span>
+            </div>
+          </label>
+        </div>
+      </div>
+    </div>
+    <div
+      class="settings-page__content-row"
+    >
+      <div
+        class="settings-page__content-item"
+      >
+        <span>
+          Participate in MetaMetrics
+        </span>
+        <div
+          class="settings-page__content-description"
+        >
+          <span>
+            Participate in MetaMetrics to help us make MetaMask better
+          </span>
+        </div>
+      </div>
+      <div
+        class="settings-page__content-item"
+      >
+        <div
+          class="settings-page__content-item-col"
+        >
+          <label
+            class="toggle-button toggle-button--off"
+            tabindex="0"
+          >
+            <div
+              style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
+            >
+              <div
+                style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
+              >
+                <div
+                  style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
+                />
+                <div
+                  style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
+                />
+              </div>
+              <div
+                style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
+              >
+                <div
+                  style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
+                />
+              </div>
+              <input
+                style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
+                type="checkbox"
+                value="false"
+              />
+            </div>
+            <div
+              class="toggle-button__status"
+            >
+              <span
+                class="toggle-button__label-off"
+              >
+                Off
+              </span>
+              <span
+                class="toggle-button__label-on"
+              >
+                On
+              </span>
+            </div>
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/ui/pages/settings/security-tab/security-tab.component.js b/ui/pages/settings/security-tab/security-tab.component.js
index 47edcded2..cfb9e42f3 100644
--- a/ui/pages/settings/security-tab/security-tab.component.js
+++ b/ui/pages/settings/security-tab/security-tab.component.js
@@ -59,6 +59,7 @@ export default class SecurityTab extends PureComponent {
         <div className="settings-page__content-item">
           <div className="settings-page__content-item-col">
             <Button
+              data-testid="reveal-seed-words"
               type="danger"
               large
               onClick={(event) => {
diff --git a/ui/pages/settings/security-tab/security-tab.container.test.js b/ui/pages/settings/security-tab/security-tab.container.test.js
deleted file mode 100644
index f1476e9fa..000000000
--- a/ui/pages/settings/security-tab/security-tab.container.test.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react';
-import sinon from 'sinon';
-import { mount } from 'enzyme';
-import SecurityTab from './security-tab.container';
-
-describe('Security Tab', () => {
-  let wrapper;
-
-  const props = {
-    revealSeedConfirmation: sinon.spy(),
-    showClearApprovalModal: sinon.spy(),
-    setParticipateInMetaMetrics: sinon.spy(),
-    displayWarning: sinon.spy(),
-    showIncomingTransactions: false,
-    setShowIncomingTransactionsFeatureFlag: sinon.spy(),
-    history: {
-      push: sinon.spy(),
-    },
-    privacyMode: true,
-    warning: '',
-    participateInMetaMetrics: false,
-    setUsePhishDetect: sinon.spy(),
-    usePhishDetect: true,
-  };
-
-  beforeEach(() => {
-    wrapper = mount(<SecurityTab.WrappedComponent {...props} />, {
-      context: {
-        t: (str) => str,
-        trackEvent: () => undefined,
-      },
-    });
-  });
-
-  it('navigates to reveal seed words page', () => {
-    const seedWords = wrapper.find('.button.btn-danger.btn--large');
-
-    seedWords.simulate('click');
-    expect(props.history.push.calledOnce).toStrictEqual(true);
-    expect(props.history.push.getCall(0).args[0]).toStrictEqual('/seed');
-  });
-
-  it('toggles incoming txs', () => {
-    const incomingTxs = wrapper.find({ type: 'checkbox' }).at(0);
-    incomingTxs.simulate('click');
-    expect(
-      props.setShowIncomingTransactionsFeatureFlag.calledOnce,
-    ).toStrictEqual(true);
-  });
-
-  it('toggles phishing detection', () => {
-    const phishDetect = wrapper.find({ type: 'checkbox' }).at(1);
-    phishDetect.simulate('click');
-    expect(props.setUsePhishDetect.calledOnce).toStrictEqual(true);
-  });
-
-  it('toggles metaMetrics', () => {
-    const metaMetrics = wrapper.find({ type: 'checkbox' }).at(2);
-
-    metaMetrics.simulate('click');
-    expect(props.setParticipateInMetaMetrics.calledOnce).toStrictEqual(true);
-  });
-});
diff --git a/ui/pages/settings/security-tab/security-tab.test.js b/ui/pages/settings/security-tab/security-tab.test.js
new file mode 100644
index 000000000..437add9e6
--- /dev/null
+++ b/ui/pages/settings/security-tab/security-tab.test.js
@@ -0,0 +1,86 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react';
+import configureMockStore from 'redux-mock-store';
+import mockState from '../../../../test/data/mock-state.json';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import SecurityTab from './security-tab.container';
+
+const mockSetFeatureFlag = jest.fn();
+const mockSetParticipateInMetaMetrics = jest.fn();
+const mockSetUsePhishDetect = jest.fn();
+
+jest.mock('../../../store/actions.js', () => {
+  return {
+    setFeatureFlag: () => mockSetFeatureFlag,
+    setParticipateInMetaMetrics: () => mockSetParticipateInMetaMetrics,
+    setUsePhishDetect: () => mockSetUsePhishDetect,
+  };
+});
+
+describe('Security Tab', () => {
+  const mockStore = configureMockStore()(mockState);
+
+  it('should match snapshot', () => {
+    const { container } = renderWithProvider(<SecurityTab />, mockStore);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('navigates to reveal seed words page', () => {
+    const { queryByTestId, history } = renderWithProvider(
+      <SecurityTab />,
+      mockStore,
+    );
+
+    expect(history.location.pathname).toStrictEqual('/');
+
+    fireEvent.click(queryByTestId('reveal-seed-words'));
+
+    expect(history.location.pathname).toStrictEqual('/seed');
+  });
+
+  it('toggles incoming txs', () => {
+    const { queryAllByRole } = renderWithProvider(<SecurityTab />, mockStore);
+
+    const checkboxes = queryAllByRole('checkbox');
+    const showIncomingCheckbox = checkboxes[0];
+
+    expect(showIncomingCheckbox).toHaveAttribute('value', 'true');
+
+    fireEvent.change(showIncomingCheckbox, {
+      target: { value: false },
+    });
+
+    expect(showIncomingCheckbox).toHaveAttribute('value', 'false');
+  });
+
+  it('toggles phishing detection', () => {
+    const { queryAllByRole } = renderWithProvider(<SecurityTab />, mockStore);
+
+    const checkboxes = queryAllByRole('checkbox');
+    const showIncomingCheckbox = checkboxes[1];
+
+    expect(showIncomingCheckbox).toHaveAttribute('value', 'true');
+
+    fireEvent.change(showIncomingCheckbox, {
+      target: { value: false },
+    });
+
+    expect(showIncomingCheckbox).toHaveAttribute('value', 'false');
+  });
+
+  it('toggles metaMetrics', () => {
+    const { queryAllByRole } = renderWithProvider(<SecurityTab />, mockStore);
+
+    const checkboxes = queryAllByRole('checkbox');
+    const showIncomingCheckbox = checkboxes[2];
+
+    expect(showIncomingCheckbox).toHaveAttribute('value', 'false');
+
+    fireEvent.change(showIncomingCheckbox, {
+      target: { value: true },
+    });
+
+    expect(showIncomingCheckbox).toHaveAttribute('value', 'true');
+  });
+});
diff --git a/ui/pages/settings/settings.component.test.js b/ui/pages/settings/settings.component.test.js
deleted file mode 100644
index d62124dc9..000000000
--- a/ui/pages/settings/settings.component.test.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from 'react';
-import { mount, shallow } from 'enzyme';
-import { Provider } from 'react-redux';
-import TextField from '../../components/ui/text-field';
-import configureStore from '../../store/store';
-import Settings from './settings.container';
-import SettingsSearch from './settings-search';
-
-describe('SettingsPage', () => {
-  let wrapper;
-
-  const props = {
-    addNewNetwork: false,
-    addressName: '',
-    backRoute: '/',
-    conversionDate: Date.now(),
-    currentPath: '/settings',
-    initialBreadCrumbKey: undefined,
-    initialBreadCrumbRoute: undefined,
-    isAddressEntryPage: false,
-    isPopup: false,
-    location: '/settings',
-    mostRecentOverviewPage: '',
-    pathnameI18nKey: undefined,
-  };
-
-  beforeEach(() => {
-    wrapper = shallow(<Settings.WrappedComponent {...props} />, {
-      context: {
-        t: (str) => str,
-      },
-    });
-  });
-
-  it('should render title correctly', () => {
-    expect(
-      wrapper.find('.settings-page__header__title-container__title').text(),
-    ).toStrictEqual('settings');
-  });
-
-  it('should render search correctly', () => {
-    const store = configureStore({
-      metamask: {
-        snaps: {},
-      },
-    });
-    wrapper = mount(
-      <Provider store={store}>
-        <SettingsSearch onSearch={() => undefined} settingsRoutesList={[]} />
-      </Provider>,
-      {
-        context: {
-          t: (s) => `${s}`,
-        },
-      },
-    );
-
-    expect(wrapper.find(TextField).props().id).toStrictEqual('search-settings');
-    expect(wrapper.find(TextField).props().value).toStrictEqual('');
-  });
-});
diff --git a/ui/pages/settings/settings.test.js b/ui/pages/settings/settings.test.js
new file mode 100644
index 000000000..b7437fbeb
--- /dev/null
+++ b/ui/pages/settings/settings.test.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+import { renderWithProvider } from '../../../test/lib/render-helpers';
+import mockState from '../../../test/data/mock-state.json';
+import Settings from '.';
+import 'jest-canvas-mock';
+
+describe('SettingsPage', () => {
+  const props = {
+    addNewNetwork: false,
+    addressName: '',
+    backRoute: '/',
+    breadCrumbTextKey: '',
+    conversionDate: Date.now(),
+    initialBreadCrumbKey: '',
+    initialBreadCrumbRoute: '',
+    isAddressEntryPage: false,
+    isPopup: false,
+    isSnapViewPage: false,
+    mostRecentOverviewPage: '/',
+    pathnameI18nKey: '',
+  };
+
+  const mockStore = configureMockStore()(mockState);
+
+  it('should render correctly', () => {
+    const { queryByText } = renderWithProvider(
+      <Settings {...props} />,
+      mockStore,
+      '/settings',
+    );
+
+    expect(queryByText('Settings')).toBeInTheDocument();
+  });
+
+  it('should render search correctly', () => {
+    const { queryByPlaceholderText } = renderWithProvider(
+      <Settings {...props} />,
+      mockStore,
+      '/settings',
+    );
+
+    expect(queryByPlaceholderText('Search in Settings')).toBeInTheDocument();
+  });
+});
diff --git a/ui/pages/swaps/awaiting-swap/awaiting-swap.js b/ui/pages/swaps/awaiting-swap/awaiting-swap.js
index d8b21f44d..506654867 100644
--- a/ui/pages/swaps/awaiting-swap/awaiting-swap.js
+++ b/ui/pages/swaps/awaiting-swap/awaiting-swap.js
@@ -20,6 +20,7 @@ import {
   getUSDConversionRate,
   isHardwareWallet,
   getHardwareWalletType,
+  getFullTxData,
 } from '../../../selectors';
 
 import {
@@ -72,15 +73,16 @@ export default function AwaitingSwap({
   txHash,
   tokensReceived,
   submittingSwap,
+  txId,
 }) {
   const t = useContext(I18nContext);
   const trackEvent = useContext(MetaMetricsContext);
   const history = useHistory();
   const dispatch = useDispatch();
   const animationEventEmitter = useRef(new EventEmitter());
-
+  const { swapMetaData } =
+    useSelector((state) => getFullTxData(state, txId)) || {};
   const fetchParams = useSelector(getFetchParams, isEqual);
-  const { destinationTokenInfo, sourceTokenInfo } = fetchParams?.metaData || {};
   const fromTokenInputValue = useSelector(getFromTokenInputValue);
   const maxSlippage = useSelector(getMaxSlippage);
   const usedQuote = useSelector(getUsedQuote, isEqual);
@@ -103,7 +105,7 @@ export default function AwaitingSwap({
       currentCurrency,
       conversionRate: usdConversionRate,
       tradeValue: usedQuote?.trade?.value,
-      sourceSymbol: sourceTokenInfo?.symbol,
+      sourceSymbol: swapMetaData?.token_from,
       sourceAmount: usedQuote.sourceAmount,
       chainId,
     });
@@ -120,12 +122,12 @@ export default function AwaitingSwap({
     getCurrentSmartTransactionsEnabled,
   );
   const sensitiveProperties = {
-    token_from: sourceTokenInfo?.symbol,
-    token_from_amount: fetchParams?.value,
-    token_to: destinationTokenInfo?.symbol,
+    token_from: swapMetaData?.token_from,
+    token_from_amount: swapMetaData?.token_from_amount,
+    token_to: swapMetaData?.token_to,
     request_type: fetchParams?.balanceError ? 'Quote' : 'Order',
-    slippage: fetchParams?.slippage,
-    custom_slippage: fetchParams?.slippage === 2,
+    slippage: swapMetaData?.slippage,
+    custom_slippage: swapMetaData?.slippage === 2,
     gas_fees: feeinUnformattedFiat,
     is_hardware_wallet: hardwareWalletUsed,
     hardware_wallet_type: hardwareWalletType,
@@ -227,7 +229,7 @@ export default function AwaitingSwap({
         key="swapOnceTransactionHasProcess-1"
         className="awaiting-swap__amount-and-symbol"
       >
-        {destinationTokenInfo.symbol}
+        {swapMetaData?.token_to}
       </span>,
     ]);
     content = blockExplorerUrl && (
@@ -245,7 +247,7 @@ export default function AwaitingSwap({
         key="swapTokenAvailable-2"
         className="awaiting-swap__amount-and-symbol"
       >
-        {`${tokensReceived || ''} ${destinationTokenInfo.symbol}`}
+        {`${tokensReceived || ''} ${swapMetaData?.token_to}`}
       </span>,
     ]);
     content = blockExplorerUrl && (
@@ -300,7 +302,7 @@ export default function AwaitingSwap({
           } else if (errorKey) {
             await dispatch(navigateBackToBuildQuote(history));
           } else if (
-            isSwapsDefaultTokenSymbol(destinationTokenInfo?.symbol, chainId) ||
+            isSwapsDefaultTokenSymbol(swapMetaData?.token_to, chainId) ||
             swapComplete
           ) {
             history.push(DEFAULT_ROUTE);
@@ -331,4 +333,5 @@ AwaitingSwap.propTypes = {
     CONTRACT_DATA_DISABLED_ERROR,
   ]),
   submittingSwap: PropTypes.bool,
+  txId: PropTypes.number,
 };
diff --git a/ui/pages/swaps/awaiting-swap/awaiting-swap.test.js b/ui/pages/swaps/awaiting-swap/awaiting-swap.test.js
index 923a9c48f..e213d4ca4 100644
--- a/ui/pages/swaps/awaiting-swap/awaiting-swap.test.js
+++ b/ui/pages/swaps/awaiting-swap/awaiting-swap.test.js
@@ -29,6 +29,7 @@ const createProps = (customProps = {}) => {
     submittingSwap: true,
     inputValue: 5,
     maxSlippage: SLIPPAGE.DEFAULT,
+    txId: 6571648590592143,
     ...customProps,
   };
 };
diff --git a/ui/pages/swaps/fee-card/fee-card.js b/ui/pages/swaps/fee-card/fee-card.js
index 6883c57fa..a649a470c 100644
--- a/ui/pages/swaps/fee-card/fee-card.js
+++ b/ui/pages/swaps/fee-card/fee-card.js
@@ -46,6 +46,10 @@ export default function FeeCard({
         return t('networkNameGoerli');
       case CHAIN_IDS.AVALANCHE:
         return t('networkNameAvalanche');
+      case CHAIN_IDS.OPTIMISM:
+        return t('networkNameOptimism');
+      case CHAIN_IDS.ARBITRUM:
+        return t('networkNameArbitrum');
       default:
         throw new Error('This network is not supported for token swaps');
     }
diff --git a/ui/pages/swaps/index.js b/ui/pages/swaps/index.js
index cc7e9d0a6..0aedc8e87 100644
--- a/ui/pages/swaps/index.js
+++ b/ui/pages/swaps/index.js
@@ -515,6 +515,7 @@ export default function Swap() {
                       swapComplete={false}
                       errorKey={swapsErrorKey}
                       txHash={tradeTxData?.hash}
+                      txId={tradeTxData?.id}
                       submittedTime={tradeTxData?.submittedTime}
                     />
                   );
@@ -574,7 +575,7 @@ export default function Swap() {
               path={SMART_TRANSACTION_STATUS_ROUTE}
               exact
               render={() => {
-                return <SmartTransactionStatus />;
+                return <SmartTransactionStatus txId={tradeTxData?.id} />;
               }}
             />
             <Route
@@ -586,6 +587,7 @@ export default function Swap() {
                     swapComplete={tradeConfirmed}
                     txHash={tradeTxData?.hash}
                     tokensReceived={tokensReceived}
+                    txId={tradeTxData?.id}
                     submittingSwap={
                       routeState === 'awaiting' && !(approveTxId || tradeTxId)
                     }
diff --git a/ui/pages/swaps/smart-transaction-status/smart-transaction-status.js b/ui/pages/swaps/smart-transaction-status/smart-transaction-status.js
index 1137178ec..f59ad29e5 100644
--- a/ui/pages/swaps/smart-transaction-status/smart-transaction-status.js
+++ b/ui/pages/swaps/smart-transaction-status/smart-transaction-status.js
@@ -73,8 +73,10 @@ export default function SmartTransactionStatus() {
   const history = useHistory();
   const dispatch = useDispatch();
   const fetchParams = useSelector(getFetchParams, isEqual) || {};
-  const { destinationTokenInfo = {}, sourceTokenInfo = {} } =
-    fetchParams?.metaData || {};
+  const {
+    destinationTokenInfo: fetchParamsDestinationTokenInfo = {},
+    sourceTokenInfo: fetchParamsSourceTokenInfo = {},
+  } = fetchParams?.metaData || {};
   const hardwareWalletUsed = useSelector(isHardwareWallet);
   const hardwareWalletType = useSelector(getHardwareWalletType);
   const needsTwoConfirmations = true;
@@ -125,9 +127,14 @@ export default function SmartTransactionStatus() {
 
   const sensitiveProperties = {
     needs_two_confirmations: needsTwoConfirmations,
-    token_from: sourceTokenInfo?.symbol,
-    token_from_amount: fetchParams?.value,
-    token_to: destinationTokenInfo?.symbol,
+    token_from:
+      fetchParamsSourceTokenInfo.symbol ??
+      latestSmartTransaction?.sourceTokenSymbol,
+    token_from_amount:
+      fetchParams?.value ?? latestSmartTransaction?.swapTokenValue,
+    token_to:
+      fetchParamsDestinationTokenInfo.symbol ??
+      latestSmartTransaction?.destinationTokenSymbol,
     request_type: fetchParams?.balanceError ? 'Quote' : 'Order',
     slippage: fetchParams?.slippage,
     custom_slippage: fetchParams?.slippage === 2,
@@ -142,7 +149,8 @@ export default function SmartTransactionStatus() {
   if (usedQuote?.destinationAmount) {
     destinationValue = calcTokenAmount(
       usedQuote?.destinationAmount,
-      destinationTokenInfo.decimals,
+      fetchParamsDestinationTokenInfo.decimals ??
+        latestSmartTransaction?.destinationTokenDecimals,
     ).toPrecision(8);
   }
   const trackEvent = useContext(MetaMetricsContext);
@@ -214,8 +222,14 @@ export default function SmartTransactionStatus() {
   }
   if (smartTransactionStatus === SMART_TRANSACTION_STATUSES.SUCCESS) {
     headerText = t('stxSuccess');
-    if (destinationTokenInfo?.symbol) {
-      description = t('stxSuccessDescription', [destinationTokenInfo.symbol]);
+    if (
+      fetchParamsDestinationTokenInfo.symbol ||
+      latestSmartTransaction?.destinationTokenSymbol
+    ) {
+      description = t('stxSuccessDescription', [
+        fetchParamsDestinationTokenInfo.symbol ??
+          latestSmartTransaction?.destinationTokenSymbol,
+      ]);
     }
     icon = <SuccessIcon />;
   } else if (
@@ -325,23 +339,34 @@ export default function SmartTransactionStatus() {
             fontWeight={FONT_WEIGHT.BOLD}
             boxProps={{ marginLeft: 1, marginRight: 2 }}
           >
-            {sourceTokenInfo?.symbol}
+            {fetchParamsSourceTokenInfo.symbol ??
+              latestSmartTransaction?.sourceTokenSymbol}
           </Typography>
-          <UrlIcon
-            url={sourceTokenInfo.iconUrl}
-            className="main-quote-summary__icon"
-            name={sourceTokenInfo.symbol}
-            fallbackClassName="main-quote-summary__icon-fallback"
-          />
+          {fetchParamsSourceTokenInfo.iconUrl ? (
+            <UrlIcon
+              url={fetchParamsSourceTokenInfo.iconUrl}
+              className="main-quote-summary__icon"
+              name={
+                fetchParamsSourceTokenInfo.symbol ??
+                latestSmartTransaction?.destinationTokenSymbol
+              }
+              fallbackClassName="main-quote-summary__icon-fallback"
+            />
+          ) : null}
           <Box display={DISPLAY.BLOCK} marginLeft={2} marginRight={2}>
             <ArrowIcon />
           </Box>
-          <UrlIcon
-            url={destinationTokenInfo.iconUrl}
-            className="main-quote-summary__icon"
-            name={destinationTokenInfo.symbol}
-            fallbackClassName="main-quote-summary__icon-fallback"
-          />
+          {fetchParamsDestinationTokenInfo.iconUrl ? (
+            <UrlIcon
+              url={fetchParamsDestinationTokenInfo.iconUrl}
+              className="main-quote-summary__icon"
+              name={
+                fetchParamsDestinationTokenInfo.symbol ??
+                latestSmartTransaction?.destinationTokenSymbol
+              }
+              fallbackClassName="main-quote-summary__icon-fallback"
+            />
+          ) : null}
           <Typography
             color={COLORS.TEXT_ALTERNATIVE}
             variant={TYPOGRAPHY.H6}
@@ -355,7 +380,8 @@ export default function SmartTransactionStatus() {
             fontWeight={FONT_WEIGHT.BOLD}
             boxProps={{ marginLeft: 1 }}
           >
-            {destinationTokenInfo?.symbol}
+            {fetchParamsDestinationTokenInfo.symbol ??
+              latestSmartTransaction?.destinationTokenSymbol}
           </Typography>
         </Box>
         <Box
diff --git a/ui/pages/swaps/swaps.util.js b/ui/pages/swaps/swaps.util.js
index 24b5c8bf4..0998b533f 100644
--- a/ui/pages/swaps/swaps.util.js
+++ b/ui/pages/swaps/swaps.util.js
@@ -8,6 +8,8 @@ import {
   BSC,
   GOERLI,
   AVALANCHE,
+  OPTIMISM,
+  ARBITRUM,
   SWAPS_API_V2_BASE_URL,
   SWAPS_DEV_API_V2_BASE_URL,
   SWAPS_CLIENT_ID,
@@ -38,6 +40,7 @@ import {
   validateData,
 } from '../../../shared/lib/swaps-utils';
 import { SECOND } from '../../../shared/constants/time';
+import { sumHexes } from '../../helpers/utils/transactions.util';
 
 const CACHE_REFRESH_FIVE_MINUTES = 300000;
 const USD_CURRENCY_CODE = 'usd';
@@ -384,11 +387,18 @@ export function getRenderableNetworkFeesForQuote({
   sourceAmount,
   chainId,
   nativeCurrencySymbol,
+  multiLayerL1FeeTotal,
 }) {
   const totalGasLimitForCalculation = new BigNumber(tradeGas || '0x0', 16)
     .plus(approveGas || '0x0', 16)
     .toString(16);
-  const gasTotalInWeiHex = calcGasTotal(totalGasLimitForCalculation, gasPrice);
+  let gasTotalInWeiHex = calcGasTotal(totalGasLimitForCalculation, gasPrice);
+  if (multiLayerL1FeeTotal !== null) {
+    gasTotalInWeiHex = sumHexes(
+      gasTotalInWeiHex || '0x0',
+      multiLayerL1FeeTotal || '0x0',
+    );
+  }
 
   const nonGasFee = new BigNumber(tradeValue, 16)
     .minus(
@@ -449,6 +459,7 @@ export function quotesToRenderableData(
   chainId,
   smartTransactionEstimatedGas,
   nativeCurrencySymbol,
+  multiLayerL1FeeTotal,
 ) {
   return Object.values(quotes).map((quote) => {
     const {
@@ -489,6 +500,7 @@ export function quotesToRenderableData(
         sourceSymbol: sourceTokenInfo.symbol,
         sourceAmount,
         chainId,
+        multiLayerL1FeeTotal,
       }));
 
     if (smartTransactionEstimatedGas) {
@@ -611,6 +623,10 @@ export const getNetworkNameByChainId = (chainId) => {
       return GOERLI;
     case CHAIN_IDS.AVALANCHE:
       return AVALANCHE;
+    case CHAIN_IDS.OPTIMISM:
+      return OPTIMISM;
+    case CHAIN_IDS.ARBITRUM:
+      return ARBITRUM;
     default:
       return '';
   }
diff --git a/ui/pages/swaps/swaps.util.test.js b/ui/pages/swaps/swaps.util.test.js
index 7941f2e80..3a49bb35a 100644
--- a/ui/pages/swaps/swaps.util.test.js
+++ b/ui/pages/swaps/swaps.util.test.js
@@ -13,6 +13,8 @@ import {
   BSC,
   GOERLI,
   AVALANCHE,
+  OPTIMISM,
+  ARBITRUM,
 } from '../../../shared/constants/swaps';
 import {
   fetchTradesInfo,
@@ -319,6 +321,14 @@ describe('Swaps Util', () => {
     it('returns "avalanche" for Avalanche chain ID', () => {
       expect(getNetworkNameByChainId(CHAIN_IDS.AVALANCHE)).toBe(AVALANCHE);
     });
+
+    it('returns "optimism" for Optimism chain ID', () => {
+      expect(getNetworkNameByChainId(CHAIN_IDS.OPTIMISM)).toBe(OPTIMISM);
+    });
+
+    it('returns "arbitrum" for Arbitrum chain ID', () => {
+      expect(getNetworkNameByChainId(CHAIN_IDS.ARBITRUM)).toBe(ARBITRUM);
+    });
   });
 
   describe('getSwapsLivenessForNetwork', () => {
diff --git a/ui/pages/swaps/view-quote/__snapshots__/view-quote-price-difference.test.js.snap b/ui/pages/swaps/view-quote/__snapshots__/view-quote-price-difference.test.js.snap
new file mode 100644
index 000000000..41cf8a7fa
--- /dev/null
+++ b/ui/pages/swaps/view-quote/__snapshots__/view-quote-price-difference.test.js.snap
@@ -0,0 +1,229 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`View Price Quote Difference displays a fiat error when calculationError is present 1`] = `
+<div>
+  <div
+    class="view-quote__price-difference-warning-wrapper high"
+  >
+    <div
+      class="actionable-message"
+    >
+      
+      <div
+        class="actionable-message__message"
+      >
+        <div
+          class="view-quote__price-difference-warning-contents"
+        >
+          <div
+            class="view-quote__price-difference-warning-contents-text"
+          >
+            <div
+              class="box box--padding-bottom-2 box--display-flex box--flex-direction-row box--justify-content-space-between"
+            >
+              <div
+                class="view-quote__price-difference-warning-contents-title"
+              >
+                Check your rate before proceeding
+              </div>
+              <div>
+                <div
+                  aria-describedby="tippy-tooltip-4"
+                  class=""
+                  data-original-title="Price impact is the difference between the current market price and the amount received during transaction execution. Price impact is a function of the size of your trade relative to the size of the liquidity pool."
+                  data-tooltipped=""
+                  style="display: inline;"
+                  tabindex="0"
+                >
+                  <i
+                    class="fa fa-info-circle"
+                  />
+                </div>
+              </div>
+            </div>
+            Price impact could not be determined due to lack of market price data. Please confirm that you are comfortable with the amount of tokens you are about to receive before swapping.
+            <div
+              class="view-quote__price-difference-warning-contents-actions"
+            >
+              <button>
+                I understand
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`View Price Quote Difference displays an error when in high bucket 1`] = `
+<div>
+  <div
+    class="view-quote__price-difference-warning-wrapper high"
+  >
+    <div
+      class="actionable-message"
+    >
+      
+      <div
+        class="actionable-message__message"
+      >
+        <div
+          class="view-quote__price-difference-warning-contents"
+        >
+          <div
+            class="view-quote__price-difference-warning-contents-text"
+          >
+            <div
+              class="box box--padding-bottom-2 box--display-flex box--flex-direction-row box--justify-content-space-between"
+            >
+              <div
+                class="view-quote__price-difference-warning-contents-title"
+              >
+                Price difference of ~%
+              </div>
+              <div>
+                <div
+                  aria-describedby="tippy-tooltip-3"
+                  class=""
+                  data-original-title="Price impact is the difference between the current market price and the amount received during transaction execution. Price impact is a function of the size of your trade relative to the size of the liquidity pool."
+                  data-tooltipped=""
+                  style="display: inline;"
+                  tabindex="0"
+                >
+                  <i
+                    class="fa fa-info-circle"
+                  />
+                </div>
+              </div>
+            </div>
+            You are about to swap 1 ETH (~) for 42.947749 LINK (~).
+            <div
+              class="view-quote__price-difference-warning-contents-actions"
+            >
+              <button>
+                I understand
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`View Price Quote Difference displays an error when in medium bucket 1`] = `
+<div>
+  <div
+    class="view-quote__price-difference-warning-wrapper medium"
+  >
+    <div
+      class="actionable-message"
+    >
+      
+      <div
+        class="actionable-message__message"
+      >
+        <div
+          class="view-quote__price-difference-warning-contents"
+        >
+          <div
+            class="view-quote__price-difference-warning-contents-text"
+          >
+            <div
+              class="box box--padding-bottom-2 box--display-flex box--flex-direction-row box--justify-content-space-between"
+            >
+              <div
+                class="view-quote__price-difference-warning-contents-title"
+              >
+                Price difference of ~%
+              </div>
+              <div>
+                <div
+                  aria-describedby="tippy-tooltip-2"
+                  class=""
+                  data-original-title="Price impact is the difference between the current market price and the amount received during transaction execution. Price impact is a function of the size of your trade relative to the size of the liquidity pool."
+                  data-tooltipped=""
+                  style="display: inline;"
+                  tabindex="0"
+                >
+                  <i
+                    class="fa fa-info-circle"
+                  />
+                </div>
+              </div>
+            </div>
+            You are about to swap 1 ETH (~) for 42.947749 LINK (~).
+            <div
+              class="view-quote__price-difference-warning-contents-actions"
+            >
+              <button>
+                I understand
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`View Price Quote Difference should match snapshot 1`] = `
+<div>
+  <div
+    class="view-quote__price-difference-warning-wrapper low"
+  >
+    <div
+      class="actionable-message"
+    >
+      
+      <div
+        class="actionable-message__message"
+      >
+        <div
+          class="view-quote__price-difference-warning-contents"
+        >
+          <div
+            class="view-quote__price-difference-warning-contents-text"
+          >
+            <div
+              class="box box--padding-bottom-2 box--display-flex box--flex-direction-row box--justify-content-space-between"
+            >
+              <div
+                class="view-quote__price-difference-warning-contents-title"
+              >
+                Price difference of ~%
+              </div>
+              <div>
+                <div
+                  aria-describedby="tippy-tooltip-1"
+                  class=""
+                  data-original-title="Price impact is the difference between the current market price and the amount received during transaction execution. Price impact is a function of the size of your trade relative to the size of the liquidity pool."
+                  data-tooltipped=""
+                  style="display: inline;"
+                  tabindex="0"
+                >
+                  <i
+                    class="fa fa-info-circle"
+                  />
+                </div>
+              </div>
+            </div>
+            You are about to swap 1 ETH (~) for 42.947749 LINK (~).
+            <div
+              class="view-quote__price-difference-warning-contents-actions"
+            >
+              <button>
+                I understand
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/ui/pages/swaps/view-quote/view-quote-price-difference.test.js b/ui/pages/swaps/view-quote/view-quote-price-difference.test.js
index 08aef036b..806d4b9c0 100644
--- a/ui/pages/swaps/view-quote/view-quote-price-difference.test.js
+++ b/ui/pages/swaps/view-quote/view-quote-price-difference.test.js
@@ -1,15 +1,12 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import { Provider } from 'react-redux';
 import configureMockStore from 'redux-mock-store';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import { NETWORK_TYPES } from '../../../../shared/constants/network';
 import { GAS_RECOMMENDATIONS } from '../../../../shared/constants/gas';
 import ViewQuotePriceDifference from './view-quote-price-difference';
 
 describe('View Price Quote Difference', () => {
-  const t = (key) => `translate ${key}`;
-
-  const state = {
+  const mockState = {
     metamask: {
       tokens: [],
       provider: { type: NETWORK_TYPES.RPC, nickname: '', rpcUrl: '' },
@@ -19,7 +16,7 @@ describe('View Price Quote Difference', () => {
     },
   };
 
-  const store = configureMockStore()(state);
+  const mockStore = configureMockStore()(mockState);
 
   // Sample transaction is 1 $ETH to ~42.880915 $LINK
   const DEFAULT_PROPS = {
@@ -85,57 +82,37 @@ describe('View Price Quote Difference', () => {
     destinationTokenValue: '42.947749',
   };
 
-  let component;
-  function renderComponent(props) {
-    component = shallow(
-      <Provider store={store}>
-        <ViewQuotePriceDifference {...props} />
-      </Provider>,
-      {
-        context: { t },
-      },
+  it('should match snapshot', () => {
+    const { container } = renderWithProvider(
+      <ViewQuotePriceDifference {...DEFAULT_PROPS} />,
+      mockStore,
     );
-  }
 
-  afterEach(() => {
-    component.unmount();
-  });
-
-  it('does not render when there is no quote', () => {
-    const props = { ...DEFAULT_PROPS, usedQuote: null };
-    renderComponent(props);
-
-    const wrappingDiv = component.find(
-      '.view-quote__price-difference-warning-wrapper',
-    );
-    expect(wrappingDiv).toHaveLength(0);
-  });
-
-  it('does not render when the item is in the low bucket', () => {
-    const props = { ...DEFAULT_PROPS };
-    props.usedQuote.priceSlippage.bucket = GAS_RECOMMENDATIONS.LOW;
-
-    renderComponent(props);
-    const wrappingDiv = component.find(
-      '.view-quote__price-difference-warning-wrapper',
-    );
-    expect(wrappingDiv).toHaveLength(0);
+    expect(container).toMatchSnapshot();
   });
 
   it('displays an error when in medium bucket', () => {
     const props = { ...DEFAULT_PROPS };
     props.usedQuote.priceSlippage.bucket = GAS_RECOMMENDATIONS.MEDIUM;
 
-    renderComponent(props);
-    expect(component.html()).toContain(GAS_RECOMMENDATIONS.MEDIUM);
+    const { container } = renderWithProvider(
+      <ViewQuotePriceDifference {...props} />,
+      mockStore,
+    );
+
+    expect(container).toMatchSnapshot();
   });
 
   it('displays an error when in high bucket', () => {
     const props = { ...DEFAULT_PROPS };
     props.usedQuote.priceSlippage.bucket = GAS_RECOMMENDATIONS.HIGH;
 
-    renderComponent(props);
-    expect(component.html()).toContain(GAS_RECOMMENDATIONS.HIGH);
+    const { container } = renderWithProvider(
+      <ViewQuotePriceDifference {...props} />,
+      mockStore,
+    );
+
+    expect(container).toMatchSnapshot();
   });
 
   it('displays a fiat error when calculationError is present', () => {
@@ -143,7 +120,11 @@ describe('View Price Quote Difference', () => {
     props.usedQuote.priceSlippage.calculationError =
       'Could not determine price.';
 
-    renderComponent(props);
-    expect(component.html()).toContain(GAS_RECOMMENDATIONS.HIGH);
+    const { container } = renderWithProvider(
+      <ViewQuotePriceDifference {...props} />,
+      mockStore,
+    );
+
+    expect(container).toMatchSnapshot();
   });
 });
diff --git a/ui/pages/swaps/view-quote/view-quote.js b/ui/pages/swaps/view-quote/view-quote.js
index 7897b61a7..f35be9c4f 100644
--- a/ui/pages/swaps/view-quote/view-quote.js
+++ b/ui/pages/swaps/view-quote/view-quote.js
@@ -11,6 +11,7 @@ import { useHistory } from 'react-router-dom';
 import BigNumber from 'bignumber.js';
 import { isEqual } from 'lodash';
 import classnames from 'classnames';
+import { captureException } from '@sentry/browser';
 
 import { I18nContext } from '../../../contexts/i18n';
 import SelectQuotePopover from '../select-quote-popover';
@@ -63,9 +64,9 @@ import {
   getHardwareWalletType,
   checkNetworkAndAccountSupports1559,
   getUSDConversionRate,
+  getIsMultiLayerFeeNetwork,
 } from '../../../selectors';
 import { getNativeCurrency, getTokens } from '../../../ducks/metamask/metamask';
-
 import {
   safeRefetchQuotes,
   setCustomApproveTxData,
@@ -113,6 +114,8 @@ import {
   toPrecisionWithoutTrailingZeros,
 } from '../../../../shared/lib/transactions-controller-utils';
 import { calcTokenValue } from '../../../../shared/lib/swaps-utils';
+import fetchEstimatedL1Fee from '../../../helpers/utils/optimism/fetchEstimatedL1Fee';
+import { sumHexes } from '../../../helpers/utils/transactions.util';
 import ViewQuotePriceDifference from './view-quote-price-difference';
 
 let intervalId;
@@ -128,6 +131,7 @@ export default function ViewQuote() {
   const [selectQuotePopoverShown, setSelectQuotePopoverShown] = useState(false);
   const [warningHidden, setWarningHidden] = useState(false);
   const [originalApproveAmount, setOriginalApproveAmount] = useState(null);
+  const [multiLayerL1FeeTotal, setMultiLayerL1FeeTotal] = useState(null);
   // We need to have currentTimestamp in state, otherwise it would change with each rerender.
   const [currentTimestamp] = useState(Date.now());
 
@@ -161,6 +165,7 @@ export default function ViewQuote() {
   const { balance: ethBalance } = useSelector(getSelectedAccount, shallowEqual);
   const conversionRate = useSelector(conversionRateSelector);
   const USDConversionRate = useSelector(getUSDConversionRate);
+  const isMultiLayerFeeNetwork = useSelector(getIsMultiLayerFeeNetwork);
   const currentCurrency = useSelector(getCurrentCurrency);
   const swapsTokens = useSelector(getTokens, isEqual);
   const networkAndAccountSupports1559 = useSelector(
@@ -261,8 +266,13 @@ export default function ViewQuote() {
       maxPriorityFeePerGas,
     );
   }
-
-  const gasTotalInWeiHex = calcGasTotal(maxGasLimit, maxFeePerGas || gasPrice);
+  let gasTotalInWeiHex = calcGasTotal(maxGasLimit, maxFeePerGas || gasPrice);
+  if (multiLayerL1FeeTotal !== null) {
+    gasTotalInWeiHex = sumHexes(
+      gasTotalInWeiHex || '0x0',
+      multiLayerL1FeeTotal || '0x0',
+    );
+  }
 
   const { tokensWithBalances } = useTokenTracker(swapsTokens, true);
   const balanceToken =
@@ -303,6 +313,7 @@ export default function ViewQuote() {
         smartTransactionsOptInStatus &&
         smartTransactionFees?.tradeTxFees,
       nativeCurrencySymbol,
+      multiLayerL1FeeTotal,
     );
   }, [
     quotes,
@@ -318,6 +329,7 @@ export default function ViewQuote() {
     nativeCurrencySymbol,
     smartTransactionsEnabled,
     smartTransactionsOptInStatus,
+    multiLayerL1FeeTotal,
   ]);
 
   const renderableDataForUsedQuote = renderablePopoverData.find(
@@ -351,6 +363,7 @@ export default function ViewQuote() {
       sourceAmount: usedQuote.sourceAmount,
       chainId,
       nativeCurrencySymbol,
+      multiLayerL1FeeTotal,
     });
   additionalTrackingParams.reg_tx_fee_in_usd = Number(feeInUsd);
   additionalTrackingParams.reg_tx_fee_in_eth = Number(rawEthFee);
@@ -367,6 +380,7 @@ export default function ViewQuote() {
     sourceAmount: usedQuote.sourceAmount,
     chainId,
     nativeCurrencySymbol,
+    multiLayerL1FeeTotal,
   });
   let {
     feeInFiat: maxFeeInFiat,
@@ -875,6 +889,25 @@ export default function ViewQuote() {
     submitClicked,
   ]);
 
+  useEffect(() => {
+    if (!isMultiLayerFeeNetwork) {
+      return;
+    }
+    const getEstimatedL1Fee = async () => {
+      try {
+        const result = await fetchEstimatedL1Fee(global.eth, {
+          txParams: unsignedTransaction,
+          chainId,
+        });
+        setMultiLayerL1FeeTotal(result);
+      } catch (e) {
+        captureException(e);
+        setMultiLayerL1FeeTotal(null);
+      }
+    };
+    getEstimatedL1Fee();
+  }, [unsignedTransaction, isMultiLayerFeeNetwork, chainId]);
+
   useEffect(() => {
     if (currentSmartTransactionsEnabled && smartTransactionsOptInStatus) {
       // Removes a smart transactions error when the component loads.
diff --git a/ui/pages/token-allowance/token-allowance.js b/ui/pages/token-allowance/token-allowance.js
index 33cde65fd..4d02f788e 100644
--- a/ui/pages/token-allowance/token-allowance.js
+++ b/ui/pages/token-allowance/token-allowance.js
@@ -29,6 +29,7 @@ import {
   transactionFeeSelector,
   getKnownMethodData,
   getRpcPrefsForCurrentProvider,
+  getCustomTokenAmount,
 } from '../../selectors';
 import { NETWORK_TO_NAME_MAP } from '../../../shared/constants/network';
 import {
@@ -39,6 +40,10 @@ import {
 import { clearConfirmTransaction } from '../../ducks/confirm-transaction/confirm-transaction.duck';
 import { getMostRecentOverviewPage } from '../../ducks/history/history';
 import ApproveContentCard from '../../components/app/approve-content-card/approve-content-card';
+import CustomSpendingCap from '../../components/app/custom-spending-cap/custom-spending-cap';
+import Dialog from '../../components/ui/dialog';
+import { useGasFeeContext } from '../../contexts/gasFee';
+import { getCustomTxParamsData } from '../confirm-approve/confirm-approve.util';
 
 export default function TokenAllowance({
   origin,
@@ -58,7 +63,7 @@ export default function TokenAllowance({
   data,
   isSetApproveForAll,
   isApprovalOrRejection,
-  customTxParamsData,
+  decimals,
   dappProposedTokenAmount,
   currentTokenBalance,
   toAddress,
@@ -71,11 +76,22 @@ export default function TokenAllowance({
 
   const [showContractDetails, setShowContractDetails] = useState(false);
   const [showFullTxDetails, setShowFullTxDetails] = useState(false);
-  const [isFirstPage, setIsFirstPage] = useState(false);
+  const [isFirstPage, setIsFirstPage] = useState(true);
+  const [errorText, setErrorText] = useState('');
 
   const currentAccount = useSelector(getCurrentAccountWithSendEtherInfo);
   const networkIdentifier = useSelector(getNetworkIdentifier);
   const rpcPrefs = useSelector(getRpcPrefsForCurrentProvider);
+  const customTokenAmount = useSelector(getCustomTokenAmount);
+
+  const customPermissionAmount = customTokenAmount.toString();
+
+  const customTxParamsData = customTokenAmount
+    ? getCustomTxParamsData(data, {
+        customPermissionAmount,
+        decimals,
+      })
+    : null;
 
   let fullTxData = { ...txData };
 
@@ -92,6 +108,13 @@ export default function TokenAllowance({
   const fee = useSelector((state) => transactionFeeSelector(state, fullTxData));
   const methodData = useSelector((state) => getKnownMethodData(state, data));
 
+  const { balanceError } = useGasFeeContext();
+
+  const disableNextButton =
+    isFirstPage && (customTokenAmount === '' || errorText !== '');
+
+  const disableApproveButton = !isFirstPage && balanceError;
+
   const networkName =
     NETWORK_TO_NAME_MAP[fullTxData.chainId] || networkIdentifier;
 
@@ -105,9 +128,10 @@ export default function TokenAllowance({
       : transactionData;
 
   const handleReject = () => {
+    dispatch(updateCustomNonce(''));
+
     dispatch(cancelTx(fullTxData)).then(() => {
       dispatch(clearConfirmTransaction());
-      dispatch(updateCustomNonce(''));
       history.push(mostRecentOverviewPage);
     });
   };
@@ -128,17 +152,35 @@ export default function TokenAllowance({
       fullTxData.originalApprovalAmount = dappProposedTokenAmount;
     }
 
+    if (customTokenAmount) {
+      fullTxData.customTokenAmount = customTokenAmount;
+      fullTxData.finalApprovalAmount = customTokenAmount;
+    } else if (dappProposedTokenAmount !== undefined) {
+      fullTxData.finalApprovalAmount = dappProposedTokenAmount;
+    }
+
     if (currentTokenBalance) {
       fullTxData.currentTokenBalance = currentTokenBalance;
     }
 
+    dispatch(updateCustomNonce(''));
+
     dispatch(updateAndApproveTx(customNonceMerge(fullTxData))).then(() => {
       dispatch(clearConfirmTransaction());
-      dispatch(updateCustomNonce(''));
       history.push(mostRecentOverviewPage);
     });
   };
 
+  const handleNextClick = () => {
+    setShowFullTxDetails(false);
+    setIsFirstPage(false);
+  };
+
+  const handleBackClick = () => {
+    setShowFullTxDetails(false);
+    setIsFirstPage(true);
+  };
+
   return (
     <Box className="token-allowance-container page-container">
       <Box
@@ -151,7 +193,7 @@ export default function TokenAllowance({
       >
         <Box>
           {!isFirstPage && (
-            <Button type="inline" onClick={() => setIsFirstPage(true)}>
+            <Button type="inline" onClick={() => handleBackClick()}>
               <Typography
                 variant={TYPOGRAPHY.H6}
                 color={COLORS.TEXT_MUTED}
@@ -217,13 +259,17 @@ export default function TokenAllowance({
           </Typography>
         </Box>
       </Box>
-      <Box marginBottom={5}>
+      <Box marginBottom={5} marginLeft={4} marginRight={4}>
         <Typography
           variant={TYPOGRAPHY.H3}
           fontWeight={FONT_WEIGHT.BOLD}
           align={TEXT_ALIGN.CENTER}
         >
-          {isFirstPage ? t('setSpendingCap') : t('reviewSpendingCap')}
+          {isFirstPage && t('setSpendingCap')}
+          {!isFirstPage &&
+            (customTokenAmount === 0
+              ? t('revokeSpendingCap')
+              : t('reviewSpendingCap'))}
         </Typography>
       </Box>
       <Box>
@@ -251,13 +297,28 @@ export default function TokenAllowance({
         </Button>
       </Box>
       <Box margin={[4, 4, 3, 4]}>
-        <ReviewSpendingCap
-          tokenName={tokenSymbol}
-          currentTokenBalance={parseFloat(currentTokenBalance)}
-          tokenValue={10}
-          onEdit={() => setIsFirstPage(true)}
-        />
+        {isFirstPage ? (
+          <CustomSpendingCap
+            tokenName={tokenSymbol}
+            currentTokenBalance={parseFloat(currentTokenBalance)}
+            dappProposedValue={parseFloat(dappProposedTokenAmount)}
+            siteOrigin={origin}
+            passTheErrorText={(value) => setErrorText(value)}
+          />
+        ) : (
+          <ReviewSpendingCap
+            tokenName={tokenSymbol}
+            currentTokenBalance={parseFloat(currentTokenBalance)}
+            tokenValue={parseFloat(customTokenAmount)}
+            onEdit={() => handleBackClick()}
+          />
+        )}
       </Box>
+      {!isFirstPage && balanceError && (
+        <Dialog type="error" className="send__error-dialog">
+          {t('insufficientFundsForGas')}
+        </Dialog>
+      )}
       {!isFirstPage && (
         <Box className="token-allowance-container__card-wrapper">
           <ApproveContentCard
@@ -319,7 +380,7 @@ export default function TokenAllowance({
               supportsEIP1559V2={supportsEIP1559V2}
               isSetApproveForAll={isSetApproveForAll}
               isApprovalOrRejection={isApprovalOrRejection}
-              data={data}
+              data={customTxParamsData || data}
             />
           </Box>
         </Box>
@@ -328,7 +389,8 @@ export default function TokenAllowance({
         cancelText={t('reject')}
         submitText={isFirstPage ? t('next') : t('approveButtonText')}
         onCancel={() => handleReject()}
-        onSubmit={() => (isFirstPage ? setIsFirstPage(false) : handleApprove())}
+        onSubmit={() => (isFirstPage ? handleNextClick() : handleApprove())}
+        disabled={disableNextButton || disableApproveButton}
       />
       {showContractDetails && (
         <ContractDetailsModal
@@ -416,9 +478,9 @@ TokenAllowance.propTypes = {
    */
   isApprovalOrRejection: PropTypes.bool,
   /**
-   * Custom transaction parameters data made by the user (fees)
+   * Number of decimals
    */
-  customTxParamsData: PropTypes.object,
+  decimals: PropTypes.string,
   /**
    * Token amount proposed by the Dapp
    */
diff --git a/ui/pages/token-allowance/token-allowance.stories.js b/ui/pages/token-allowance/token-allowance.stories.js
index 39875bfc6..9335cf863 100644
--- a/ui/pages/token-allowance/token-allowance.stories.js
+++ b/ui/pages/token-allowance/token-allowance.stories.js
@@ -53,8 +53,8 @@ export default {
     setApproveForAllArg: {
       control: 'boolean',
     },
-    customTxParamsData: {
-      control: 'object',
+    decimals: {
+      control: 'text',
     },
     dappProposedTokenAmount: {
       control: 'text',
@@ -88,7 +88,7 @@ export default {
     data: '0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170',
     isSetApproveForAll: false,
     setApproveForAllArg: false,
-    customTxParamsData: {},
+    decimals: '4',
     dappProposedTokenAmount: '7',
     currentTokenBalance: '10',
     toAddress: '0x9bc5baf874d2da8d216ae9f137804184ee5afef4',
diff --git a/ui/pages/unlock-page/index.scss b/ui/pages/unlock-page/index.scss
index 745b68350..d046bd66a 100644
--- a/ui/pages/unlock-page/index.scss
+++ b/ui/pages/unlock-page/index.scss
@@ -18,6 +18,20 @@
 
   &__mascot-container {
     margin-top: 24px;
+    position: relative;
+
+    &__beta {
+      /* these colors should be used on both light and dark mode */
+      background: var(--brand-colors-blue-blue500);
+      color: var(--brand-colors-white-white000);
+      padding: 3px 6px;
+      font-size: 16px;
+      position: absolute;
+      bottom: 10px;
+      right: 0;
+      border-radius: 10px;
+      text-transform: uppercase;
+    }
   }
 
   &__title {
diff --git a/ui/pages/unlock-page/unlock-page.component.js b/ui/pages/unlock-page/unlock-page.component.js
index 33a3aff83..996ba04f8 100644
--- a/ui/pages/unlock-page/unlock-page.component.js
+++ b/ui/pages/unlock-page/unlock-page.component.js
@@ -12,6 +12,7 @@ import {
   CONTEXT_PROPS,
 } from '../../../shared/constants/metametrics';
 import { SUPPORT_LINK } from '../../../shared/lib/ui-utils';
+import { isBeta } from '../../helpers/utils/build-types';
 
 export default class UnlockPage extends Component {
   static contextTypes = {
@@ -176,6 +177,11 @@ export default class UnlockPage extends Component {
               width="120"
               height="120"
             />
+            {isBeta() ? (
+              <div className="unlock-page__mascot-container__beta">
+                {t('beta')}
+              </div>
+            ) : null}
           </div>
           <h1 className="unlock-page__title">{t('welcomeBack')}</h1>
           <div>{t('unlockMessage')}</div>
diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js
index 9c6cce639..9567f3443 100644
--- a/ui/selectors/selectors.js
+++ b/ui/selectors/selectors.js
@@ -71,6 +71,7 @@ import {
 import { isEqualCaseInsensitive } from '../../shared/modules/string-utils';
 import { hexToDecimal } from '../../shared/lib/metamask-controller-utils';
 import { formatMoonpaySymbol } from '../helpers/utils/moonpay';
+import { TRANSACTION_STATUSES } from '../../shared/constants/transaction';
 ///: BEGIN:ONLY_INCLUDE_IN(flask)
 import { SNAPS_VIEW_ROUTE } from '../helpers/constants/routes';
 import { getPermissionSubjects } from './permissions';
@@ -411,6 +412,21 @@ export function getAddressBookEntryOrAccountName(state, address) {
   return entry && entry.name !== '' ? entry.name : address;
 }
 
+export function getAccountName(identities, address) {
+  const entry = Object.values(identities).find((identity) =>
+    isEqualCaseInsensitive(identity.address, toChecksumHexAddress(address)),
+  );
+  return entry && entry.name !== '' ? entry.name : '';
+}
+
+export function getMetadataContractName(state, address) {
+  const tokenList = getTokenList(state);
+  const entry = Object.values(tokenList).find((identity) =>
+    isEqualCaseInsensitive(identity.address, toChecksumHexAddress(address)),
+  );
+  return entry && entry.name !== '' ? entry.name : '';
+}
+
 export function accountsWithSendEtherInfoSelector(state) {
   const accounts = getMetaMaskAccounts(state);
   const identities = getMetaMaskIdentities(state);
@@ -791,6 +807,9 @@ const createDeepEqualSelector = createSelectorCreator(defaultMemoize, isEqual);
 export const getUnapprovedTransactions = (state) =>
   state.metamask.unapprovedTxs;
 
+const getCurrentNetworkTransactionList = (state) =>
+  state.metamask.currentNetworkTxList;
+
 export const getTxData = (state) => state.confirmTransaction.txData;
 
 export const getUnapprovedTransaction = createDeepEqualSelector(
@@ -803,11 +822,26 @@ export const getUnapprovedTransaction = createDeepEqualSelector(
   },
 );
 
+export const getTransaction = createDeepEqualSelector(
+  getCurrentNetworkTransactionList,
+  (_, transactionId) => transactionId,
+  (unapprovedTxs, transactionId) => {
+    return (
+      Object.values(unapprovedTxs).find(({ id }) => id === transactionId) || {}
+    );
+  },
+);
+
 export const getFullTxData = createDeepEqualSelector(
   getTxData,
-  (state, transactionId) => getUnapprovedTransaction(state, transactionId),
-  (_state, _transactionId, customTxParamsData) => customTxParamsData,
-  (txData, transaction, customTxParamsData) => {
+  (state, transactionId, status) => {
+    if (status === TRANSACTION_STATUSES.UNAPPROVED) {
+      return getUnapprovedTransaction(state, transactionId);
+    }
+    return getTransaction(state, transactionId);
+  },
+  (_state, _transactionId, _status, customTxParamsData) => customTxParamsData,
+  (txData, transaction, _status, customTxParamsData) => {
     let fullTxData = { ...txData, ...transaction };
     if (transaction && transaction.simulationFails) {
       txData.simulationFails = transaction.simulationFails;
@@ -922,12 +956,13 @@ function getAllowedAnnouncementIds(state) {
     7: false,
     8: supportsWebHid && currentKeyringIsLedger && currentlyUsingLedgerLive,
     9: false,
-    10: true,
-    11: true,
+    10: false,
+    11: false,
     12: false,
     13: false,
     14: false,
-    15: true,
+    15: false,
+    16: true,
   };
 }
 
@@ -978,6 +1013,10 @@ export function getShowPortfolioTooltip(state) {
   return state.metamask.showPortfolioTooltip;
 }
 
+export function getShowBetaHeader(state) {
+  return state.metamask.showBetaHeader;
+}
+
 /**
  * To get the useTokenDetection flag which determines whether a static or dynamic token list is used
  *
@@ -989,13 +1028,13 @@ export function getUseTokenDetection(state) {
 }
 
 /**
- * To get the useCollectibleDetection flag which determines whether we autodetect NFTs
+ * To get the useNftDetection flag which determines whether we autodetect NFTs
  *
  * @param {*} state
  * @returns Boolean
  */
-export function getUseCollectibleDetection(state) {
-  return Boolean(state.metamask.useCollectibleDetection);
+export function getUseNftDetection(state) {
+  return Boolean(state.metamask.useNftDetection);
 }
 
 /**
@@ -1221,6 +1260,16 @@ export function getIstokenDetectionInactiveOnNonMainnetSupportedNetwork(state) {
   return isDynamicTokenListAvailable && !useTokenDetection && !isMainnet;
 }
 
+/**
+ * To get the `improvedTokenAllowanceEnabled` value which determines whether we use the improved token allowance
+ *
+ * @param {*} state
+ * @returns Boolean
+ */
+export function getIsImprovedTokenAllowanceEnabled(state) {
+  return state.metamask.improvedTokenAllowanceEnabled;
+}
+
 export function getIsCustomNetwork(state) {
   const chainId = getCurrentChainId(state);
 
@@ -1288,3 +1337,7 @@ export function getShouldShowSeedPhraseReminder(state) {
     dismissSeedBackUpReminder === false
   );
 }
+
+export function getCustomTokenAmount(state) {
+  return state.appState.customTokenAmount;
+}
diff --git a/ui/store/actionConstants.js b/ui/store/actionConstants.js
index f9878968e..4a48085eb 100644
--- a/ui/store/actionConstants.js
+++ b/ui/store/actionConstants.js
@@ -120,3 +120,6 @@ export const TOGGLE_CURRENCY_INPUT_SWITCH = 'TOGGLE_CURRENCY_INPUT_SWITCH';
 
 // Token detection v2
 export const SET_NEW_TOKENS_IMPORTED = 'SET_NEW_TOKENS_IMPORTED';
+
+// Token allowance
+export const SET_CUSTOM_TOKEN_AMOUNT = 'SET_CUSTOM_TOKEN_AMOUNT';
diff --git a/ui/store/actions.js b/ui/store/actions.js
index fb9639282..1d79a543d 100644
--- a/ui/store/actions.js
+++ b/ui/store/actions.js
@@ -1781,7 +1781,7 @@ export async function getBalancesInSingleCall(tokens) {
   return await submitRequestToBackground('getBalancesInSingleCall', [tokens]);
 }
 
-export function addCollectible(address, tokenID, dontShowLoadingIndicator) {
+export function addNft(address, tokenID, dontShowLoadingIndicator) {
   return async (dispatch) => {
     if (!address) {
       throw new Error('MetaMask - Cannot add collectible without address');
@@ -1793,7 +1793,7 @@ export function addCollectible(address, tokenID, dontShowLoadingIndicator) {
       dispatch(showLoadingIndication());
     }
     try {
-      await submitRequestToBackground('addCollectible', [address, tokenID]);
+      await submitRequestToBackground('addNft', [address, tokenID]);
     } catch (error) {
       log.error(error);
       dispatch(displayWarning(error.message));
@@ -1804,7 +1804,7 @@ export function addCollectible(address, tokenID, dontShowLoadingIndicator) {
   };
 }
 
-export function addCollectibleVerifyOwnership(
+export function addNftVerifyOwnership(
   address,
   tokenID,
   dontShowLoadingIndicator,
@@ -1820,7 +1820,7 @@ export function addCollectibleVerifyOwnership(
       dispatch(showLoadingIndication());
     }
     try {
-      await submitRequestToBackground('addCollectibleVerifyOwnership', [
+      await submitRequestToBackground('addNftVerifyOwnership', [
         address,
         tokenID,
       ]);
@@ -1841,11 +1841,7 @@ export function addCollectibleVerifyOwnership(
   };
 }
 
-export function removeAndIgnoreCollectible(
-  address,
-  tokenID,
-  dontShowLoadingIndicator,
-) {
+export function removeAndIgnoreNft(address, tokenID, dontShowLoadingIndicator) {
   return async (dispatch) => {
     if (!address) {
       throw new Error('MetaMask - Cannot ignore collectible without address');
@@ -1857,10 +1853,7 @@ export function removeAndIgnoreCollectible(
       dispatch(showLoadingIndication());
     }
     try {
-      await submitRequestToBackground('removeAndIgnoreCollectible', [
-        address,
-        tokenID,
-      ]);
+      await submitRequestToBackground('removeAndIgnoreNft', [address, tokenID]);
     } catch (error) {
       log.error(error);
       dispatch(displayWarning(error.message));
@@ -1871,7 +1864,7 @@ export function removeAndIgnoreCollectible(
   };
 }
 
-export function removeCollectible(address, tokenID, dontShowLoadingIndicator) {
+export function removeNft(address, tokenID, dontShowLoadingIndicator) {
   return async (dispatch) => {
     if (!address) {
       throw new Error('MetaMask - Cannot remove collectible without address');
@@ -1883,7 +1876,7 @@ export function removeCollectible(address, tokenID, dontShowLoadingIndicator) {
       dispatch(showLoadingIndication());
     }
     try {
-      await submitRequestToBackground('removeCollectible', [address, tokenID]);
+      await submitRequestToBackground('removeNft', [address, tokenID]);
     } catch (error) {
       log.error(error);
       dispatch(displayWarning(error.message));
@@ -1894,31 +1887,27 @@ export function removeCollectible(address, tokenID, dontShowLoadingIndicator) {
   };
 }
 
-export async function checkAndUpdateAllCollectiblesOwnershipStatus() {
-  await submitRequestToBackground(
-    'checkAndUpdateAllCollectiblesOwnershipStatus',
-  );
+export async function checkAndUpdateAllNftsOwnershipStatus() {
+  await submitRequestToBackground('checkAndUpdateAllNftsOwnershipStatus');
 }
 
-export async function isCollectibleOwner(
+export async function isNftOwner(
   ownerAddress,
   collectibleAddress,
   collectibleId,
 ) {
-  return await submitRequestToBackground('isCollectibleOwner', [
+  return await submitRequestToBackground('isNftOwner', [
     ownerAddress,
     collectibleAddress,
     collectibleId,
   ]);
 }
 
-export async function checkAndUpdateSingleCollectibleOwnershipStatus(
-  collectible,
-) {
-  await submitRequestToBackground(
-    'checkAndUpdateSingleCollectibleOwnershipStatus',
-    [collectible, false],
-  );
+export async function checkAndUpdateSingleNftOwnershipStatus(collectible) {
+  await submitRequestToBackground('checkAndUpdateSingleNftOwnershipStatus', [
+    collectible,
+    false,
+  ]);
 }
 
 export async function getTokenStandardAndDetails(
@@ -2729,11 +2718,11 @@ export function setUseTokenDetection(val) {
   };
 }
 
-export function setUseCollectibleDetection(val) {
+export function setUseNftDetection(val) {
   return (dispatch) => {
     dispatch(showLoadingIndication());
-    log.debug(`background.setUseCollectibleDetection`);
-    callBackgroundMethod('setUseCollectibleDetection', [val], (err) => {
+    log.debug(`background.setUseNftDetection`);
+    callBackgroundMethod('setUseNftDetection', [val], (err) => {
       dispatch(hideLoadingIndication());
       if (err) {
         dispatch(displayWarning(err.message));
@@ -2755,11 +2744,11 @@ export function setOpenSeaEnabled(val) {
   };
 }
 
-export function detectCollectibles() {
+export function detectNfts() {
   return async (dispatch) => {
     dispatch(showLoadingIndication());
-    log.debug(`background.detectCollectibles`);
-    await submitRequestToBackground('detectCollectibles');
+    log.debug(`background.detectNfts`);
+    await submitRequestToBackground('detectNfts');
     dispatch(hideLoadingIndication());
     await forceUpdateMetamaskState(dispatch);
   };
@@ -3516,7 +3505,10 @@ export async function closeNotificationPopup() {
  * @returns {Promise<void>}
  */
 export function trackMetaMetricsEvent(payload, options) {
-  return submitRequestToBackground('trackMetaMetricsEvent', [payload, options]);
+  return submitRequestToBackground('trackMetaMetricsEvent', [
+    { ...payload, actionId: generateActionId() },
+    options,
+  ]);
 }
 
 export function createEventFragment(options) {
@@ -3548,7 +3540,10 @@ export function finalizeEventFragment(id, options) {
  * @param {MetaMetricsPageOptions} options - options for handling the page view
  */
 export function trackMetaMetricsPage(payload, options) {
-  return submitRequestToBackground('trackMetaMetricsPage', [payload, options]);
+  return submitRequestToBackground('trackMetaMetricsPage', [
+    { ...payload, actionId: generateActionId() },
+    options,
+  ]);
 }
 
 export function updateViewedNotifications(notificationIdViewedStatusMap) {
@@ -3578,6 +3573,7 @@ export async function setSmartTransactionsOptInStatus(
   prevOptInState,
 ) {
   trackMetaMetricsEvent({
+    actionId: generateActionId(),
     event: 'STX OptIn',
     category: EVENT.CATEGORIES.SWAPS,
     sensitiveProperties: {
@@ -3779,6 +3775,10 @@ export function hidePortfolioTooltip() {
   return submitRequestToBackground('setShowPortfolioTooltip', [false]);
 }
 
+export function hideBetaHeader() {
+  return submitRequestToBackground('setShowBetaHeader', [false]);
+}
+
 export function setCollectiblesDetectionNoticeDismissed() {
   return submitRequestToBackground('setCollectiblesDetectionNoticeDismissed', [
     true,
@@ -3789,6 +3789,20 @@ export function setEnableEIP1559V2NoticeDismissed() {
   return submitRequestToBackground('setEnableEIP1559V2NoticeDismissed', [true]);
 }
 
+export function setImprovedTokenAllowanceEnabled(
+  improvedTokenAllowanceEnabled,
+) {
+  return async () => {
+    try {
+      await submitRequestToBackground('setImprovedTokenAllowanceEnabled', [
+        improvedTokenAllowanceEnabled,
+      ]);
+    } catch (error) {
+      log.error(error);
+    }
+  };
+}
+
 export function setFirstTimeUsedNetwork(chainId) {
   return submitRequestToBackground('setFirstTimeUsedNetwork', [chainId]);
 }
@@ -3827,7 +3841,10 @@ export function addCustomNetwork(customRpc) {
   return async (dispatch) => {
     try {
       dispatch(setNewCustomNetworkAdded(customRpc));
-      await submitRequestToBackground('addCustomNetwork', [customRpc]);
+      await submitRequestToBackground('addCustomNetwork', [
+        customRpc,
+        generateActionId(),
+      ]);
     } catch (error) {
       log.error(error);
       dispatch(displayWarning('Had a problem changing networks!'));
diff --git a/yarn.lock b/yarn.lock
index c0eb9f1b1..21d3a0916 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2784,49 +2784,6 @@
   resolved "https://registry.yarnpkg.com/@metamask/contract-metadata/-/contract-metadata-1.36.0.tgz#8e277190195e9c26733752457d2004d149fd7e0e"
   integrity sha512-weTsrXfDQHOgYaiI5giMcOAsD3ChcwnoryasT7xmAfLSKIbKP3RTTUu63VWYBoFCBZugHrhKD6z+N+nm8qAWBQ==
 
-"@metamask/controllers@^31.0.0":
-  version "31.2.0"
-  resolved "https://registry.yarnpkg.com/@metamask/controllers/-/controllers-31.2.0.tgz#65176b1adb8d30034b80cd537f518c840612e620"
-  integrity sha512-9UiTq1dGQNG9ZXkBGOhgwJcRXIUM+wUiltLRSCGxVAqIgEcCK34ZbMrHV6DMRoYhl3izfiZSVeYkta1Tg+mwyw==
-  dependencies:
-    "@ethereumjs/common" "^2.3.1"
-    "@ethereumjs/tx" "^3.2.1"
-    "@ethersproject/abi" "^5.7.0"
-    "@ethersproject/contracts" "^5.7.0"
-    "@ethersproject/providers" "^5.7.0"
-    "@keystonehq/metamask-airgapped-keyring" "^0.6.1"
-    "@metamask/contract-metadata" "^1.35.0"
-    "@metamask/metamask-eth-abis" "3.0.0"
-    "@metamask/types" "^1.1.0"
-    "@types/uuid" "^8.3.0"
-    abort-controller "^3.0.0"
-    async-mutex "^0.2.6"
-    babel-runtime "^6.26.0"
-    deep-freeze-strict "^1.1.1"
-    eth-ens-namehash "^2.0.8"
-    eth-json-rpc-infura "^5.1.0"
-    eth-keyring-controller "^7.0.2"
-    eth-method-registry "1.1.0"
-    eth-phishing-detect "^1.2.0"
-    eth-query "^2.1.2"
-    eth-rpc-errors "^4.0.0"
-    eth-sig-util "^3.0.0"
-    ethereumjs-util "^7.0.10"
-    ethereumjs-wallet "^1.0.1"
-    ethjs-unit "^0.1.6"
-    fast-deep-equal "^3.1.3"
-    immer "^9.0.6"
-    isomorphic-fetch "^3.0.0"
-    json-rpc-engine "^6.1.0"
-    jsonschema "^1.2.4"
-    multiformats "^9.5.2"
-    nanoid "^3.1.31"
-    punycode "^2.1.1"
-    single-call-balance-checker-abi "^1.0.0"
-    uuid "^8.3.2"
-    web3 "^0.20.7"
-    web3-provider-engine "^16.0.3"
-
 "@metamask/controllers@^32.0.2":
   version "32.0.2"
   resolved "https://registry.yarnpkg.com/@metamask/controllers/-/controllers-32.0.2.tgz#4841e4b8622c0e9a2cc948ef5f7e8a00473055e8"
@@ -2870,10 +2827,53 @@
     web3 "^0.20.7"
     web3-provider-engine "^16.0.3"
 
+"@metamask/controllers@^33.0.0":
+  version "33.0.0"
+  resolved "https://registry.yarnpkg.com/@metamask/controllers/-/controllers-33.0.0.tgz#908c05f6bee741c0beecd9d85d50c304afa38f2b"
+  integrity sha512-ImnoLztyyE9qswPAv6zk7d40d5FTMPiJYqAjjnJz+hEYhhGPGYI87+2OF/i+kVLv3gatyBQzNxvE1qtQSDWJsg==
+  dependencies:
+    "@ethereumjs/common" "^2.3.1"
+    "@ethereumjs/tx" "^3.2.1"
+    "@ethersproject/abi" "^5.7.0"
+    "@ethersproject/contracts" "^5.7.0"
+    "@ethersproject/providers" "^5.7.0"
+    "@keystonehq/metamask-airgapped-keyring" "^0.6.1"
+    "@metamask/contract-metadata" "^1.35.0"
+    "@metamask/metamask-eth-abis" "3.0.0"
+    "@metamask/types" "^1.1.0"
+    "@types/uuid" "^8.3.0"
+    abort-controller "^3.0.0"
+    async-mutex "^0.2.6"
+    babel-runtime "^6.26.0"
+    deep-freeze-strict "^1.1.1"
+    eth-ens-namehash "^2.0.8"
+    eth-json-rpc-infura "^5.1.0"
+    eth-keyring-controller "^7.0.2"
+    eth-method-registry "1.1.0"
+    eth-phishing-detect "^1.2.0"
+    eth-query "^2.1.2"
+    eth-rpc-errors "^4.0.0"
+    eth-sig-util "^3.0.0"
+    ethereumjs-util "^7.0.10"
+    ethereumjs-wallet "^1.0.1"
+    ethjs-unit "^0.1.6"
+    fast-deep-equal "^3.1.3"
+    immer "^9.0.6"
+    isomorphic-fetch "^3.0.0"
+    json-rpc-engine "^6.1.0"
+    jsonschema "^1.2.4"
+    multiformats "^9.5.2"
+    nanoid "^3.1.31"
+    punycode "^2.1.1"
+    single-call-balance-checker-abi "^1.0.0"
+    uuid "^8.3.2"
+    web3 "^0.20.7"
+    web3-provider-engine "^16.0.3"
+
 "@metamask/design-tokens@^1.6.0", "@metamask/design-tokens@^1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@metamask/design-tokens/-/design-tokens-1.9.0.tgz#2b173c671f36b0d3faa2e31ea4bf66e811a7ff49"
-  integrity sha512-L3oIhbE7MVQgiX7bEqdlU32jNyLbYXCj9sJNCOzACIHycB1TIO8TS34dEI7FAf9pC8o0qvMI3k8ur+SD9myVxw==
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@metamask/design-tokens/-/design-tokens-1.11.0.tgz#c45d2951c976b9c906fd2a43323446248dbc1a09"
+  integrity sha512-1lZR8DoqKffBswMy3Jbp8z+zQTbRyi2k6XE9qhe4m5NZd9JfirH4tJzq740HC6Hvz/MI0I7MPJkNAkLPNx8ESA==
 
 "@metamask/eslint-config-jest@^9.0.0":
   version "9.0.0"
@@ -2973,21 +2973,22 @@
   resolved "https://registry.yarnpkg.com/@metamask/etherscan-link/-/etherscan-link-2.2.0.tgz#76314d0c1405a0669fc4a0a19e0877bd3d0c389f"
   integrity sha512-xUgehvgU+ZbzeJ44m4sUtsyf6Dwou+SlYhiKfi6lkRcbWh6Jl3TCi0YM9C7XWgxfnLSdQBO1ndvcp0kslKgMsA==
 
-"@metamask/execution-environments@^0.22.3":
-  version "0.22.3"
-  resolved "https://registry.yarnpkg.com/@metamask/execution-environments/-/execution-environments-0.22.3.tgz#19feb8506d3a703b35cd1ea9df73370498f62915"
-  integrity sha512-KZaAxxOOfuDR6V0JcsDdUzHTMrrQAwlHP5QZ8Zy+PSYVzr0LsecxmQ4FHg5AHQE8yplzPws6ZBmAfzFxp6HY3A==
+"@metamask/execution-environments@^0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@metamask/execution-environments/-/execution-environments-0.23.0.tgz#55b573ebc116d17b3b19cf15335c4acd97cabaff"
+  integrity sha512-OU0gEQ/oDMf19b7B7RZX3jWaZCAjDQA1+6cuGBKbxbFsgEYg3tHUuvn2KtH4Lah4SUGHAv3JZoTShX9j+wHGyg==
   dependencies:
     "@metamask/object-multiplex" "^1.2.0"
     "@metamask/post-message-stream" "^6.0.0"
     "@metamask/providers" "^9.0.0"
-    "@metamask/snap-types" "^0.22.3"
-    "@metamask/snap-utils" "^0.22.3"
-    "@metamask/utils" "^3.1.0"
+    "@metamask/snap-types" "^0.23.0"
+    "@metamask/snap-utils" "^0.23.0"
+    "@metamask/utils" "^3.3.0"
     eth-rpc-errors "^4.0.3"
     pump "^3.0.0"
-    ses "^0.15.15"
+    ses "^0.17.0"
     stream-browserify "^3.0.0"
+    superstruct "^0.16.7"
 
 "@metamask/forwarder@^1.1.0":
   version "1.1.0"
@@ -3002,11 +3003,12 @@
     color "^0.11.3"
     mersenne-twister "^1.1.0"
 
-"@metamask/key-tree@^5.0.2":
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/@metamask/key-tree/-/key-tree-5.0.2.tgz#2d71ba26faddbad1735eeaa04dc37f1dfabfa9cf"
-  integrity sha512-82m+GbL/EybAslxuPcnJtt2SUYPrggMeS25lILr5p+ZnM5G58pOoFmT3G2VMdZOE+tdUoX2dC4sOD7VcQ0pmQQ==
+"@metamask/key-tree@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@metamask/key-tree/-/key-tree-6.0.0.tgz#9320ea075ef5a02709170fdceacc46a45ebb2364"
+  integrity sha512-zxdzDQrcltQ7ojkwCZmFnokWhgxWZKw+jxHqykX59f09obYdYzUS54qgjLzuxxWmhJApu6y9mfI1I1Ov34VNyQ==
   dependencies:
+    "@metamask/utils" "^3.3.0"
     "@noble/ed25519" "^1.6.0"
     "@noble/hashes" "^1.0.0"
     "@noble/secp256k1" "^1.5.5"
@@ -3064,13 +3066,6 @@
     pump "^3.0.0"
     ses "0.12.4"
 
-"@metamask/post-message-stream@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@metamask/post-message-stream/-/post-message-stream-4.0.0.tgz#72f120e562346ca86ccc9b3684023ad44265f0df"
-  integrity sha512-r0JcoWXNuHycProx8ClxiIElJY/GVb/0/WWXTMsZu7qDejLo52VNXlwfydCdVjbMXeoT2nK1Yt3d5gjmHy5BWw==
-  dependencies:
-    readable-stream "2.3.3"
-
 "@metamask/post-message-stream@^5.1.0":
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@metamask/post-message-stream/-/post-message-stream-5.1.0.tgz#3e9a2ed11b540b3868a0a28ffa8ec5a6e5fca29d"
@@ -3088,9 +3083,9 @@
     readable-stream "2.3.3"
 
 "@metamask/providers@^10.0.0":
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/@metamask/providers/-/providers-10.0.0.tgz#8858f3a0d991fe3462cd056a52a74f3ffabc9373"
-  integrity sha512-GAaXm8+dIN66KfD4EUETyxxmUMDTnpoOsgtoWIS8kI8PdVL1wNazMK2HD03n4b66r0c2SaFdQLxvjeSpu5TyWA==
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/@metamask/providers/-/providers-10.2.0.tgz#8131de667db0c55a61a150438c2a7f17b2d53615"
+  integrity sha512-qO3cOZZr/YJ8LLOqhR+51GGBiRknalfV/na7hwXyqZ1R/uxeLeNdqCyg+g8l3Z8JcLoEiaKGNJOEV3FFyLw8mQ==
   dependencies:
     "@metamask/object-multiplex" "^1.1.0"
     "@metamask/safe-event-emitter" "^2.0.0"
@@ -3101,7 +3096,7 @@
     fast-deep-equal "^2.0.1"
     is-stream "^2.0.0"
     json-rpc-engine "^6.1.0"
-    json-rpc-middleware-stream "^4.0.0"
+    json-rpc-middleware-stream "^4.2.0"
     pump "^3.0.0"
     webextension-polyfill-ts "^0.25.0"
 
@@ -3123,19 +3118,19 @@
     pump "^3.0.0"
     webextension-polyfill-ts "^0.25.0"
 
-"@metamask/rpc-methods@^0.22.2", "@metamask/rpc-methods@^0.22.3":
-  version "0.22.3"
-  resolved "https://registry.yarnpkg.com/@metamask/rpc-methods/-/rpc-methods-0.22.3.tgz#5d0c81177f902753f35f52c3cbccf22c1d58bf83"
-  integrity sha512-PxZdv0Tsz9xp/eI834bunnLprtxRsEOEQRoBD+0GED7a70FBC3AjxdzAnw0n9eoJ1magMCnUvzL28qvgKzGePQ==
+"@metamask/rpc-methods@^0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@metamask/rpc-methods/-/rpc-methods-0.23.0.tgz#51e1ebb91891d7227d346b229a6f112b67984c8e"
+  integrity sha512-jUsdkyOgOv3e7HMuLK/HNLVw431gguNAQf1vYRihV4+OdUZjV0sqVYliCkYuC5F4GPSlqnUK4JEDRI8e8rivsw==
   dependencies:
-    "@metamask/controllers" "^31.0.0"
-    "@metamask/key-tree" "^5.0.2"
-    "@metamask/snap-utils" "^0.22.3"
+    "@metamask/controllers" "^32.0.2"
+    "@metamask/key-tree" "^6.0.0"
+    "@metamask/snap-utils" "^0.23.0"
     "@metamask/types" "^1.1.0"
-    "@metamask/utils" "^3.1.0"
+    "@metamask/utils" "^3.3.0"
     eth-rpc-errors "^4.0.2"
     nanoid "^3.1.31"
-    superstruct "^0.16.5"
+    superstruct "^0.16.7"
 
 "@metamask/safe-event-emitter@^2.0.0":
   version "2.0.0"
@@ -3162,22 +3157,23 @@
     isomorphic-fetch "^3.0.0"
     lodash "^4.17.21"
 
-"@metamask/snap-controllers@^0.22.2":
-  version "0.22.3"
-  resolved "https://registry.yarnpkg.com/@metamask/snap-controllers/-/snap-controllers-0.22.3.tgz#c6b11ef7df752dc4d53b016aa62df9ebac5d3ec3"
-  integrity sha512-tLNbZVeTPYDkHwU+sb+MmrkFzR0HCKnfOecBC2krIhUzpHEvNgw8/hPRGj0lMi0/j54PfZbOAFf4ixgXM9jW6w==
+"@metamask/snap-controllers@^0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@metamask/snap-controllers/-/snap-controllers-0.23.0.tgz#edcf3ec723c94899ec5b31ec54c6ed94be0b8551"
+  integrity sha512-TqPmlVDdbUu0gsYtoSHXxKQihXxhcRhPde7TnvrauouA13DAi1c/kiOSpCY8S14mMaLVSoc3WBm1t8YziG/cig==
   dependencies:
     "@metamask/browser-passworder" "^3.0.0"
-    "@metamask/controllers" "^31.0.0"
-    "@metamask/execution-environments" "^0.22.3"
+    "@metamask/controllers" "^32.0.2"
+    "@metamask/execution-environments" "^0.23.0"
     "@metamask/object-multiplex" "^1.1.0"
     "@metamask/post-message-stream" "^6.0.0"
-    "@metamask/rpc-methods" "^0.22.3"
-    "@metamask/snap-types" "^0.22.3"
-    "@metamask/snap-utils" "^0.22.3"
-    "@metamask/utils" "^3.1.0"
+    "@metamask/rpc-methods" "^0.23.0"
+    "@metamask/snap-types" "^0.23.0"
+    "@metamask/snap-utils" "^0.23.0"
+    "@metamask/utils" "^3.3.0"
     "@xstate/fsm" "^2.0.0"
     concat-stream "^2.0.0"
+    cron-parser "^4.5.0"
     eth-rpc-errors "^4.0.2"
     gunzip-maybe "^1.4.2"
     immer "^9.0.6"
@@ -3188,33 +3184,33 @@
     readable-web-to-node-stream "^3.0.2"
     tar-stream "^2.2.0"
 
-"@metamask/snap-types@^0.22.3":
-  version "0.22.3"
-  resolved "https://registry.yarnpkg.com/@metamask/snap-types/-/snap-types-0.22.3.tgz#b3edeb93ed59b68b50c0d2a4bf92c5eea4fbe0b2"
-  integrity sha512-42kmDr7HF4oHghq4jbGGmRcI76L6NgiHLd1jmF0d6ShC4j+tCWZY2K62znk4NGeI0m6YZyVKaiTNwAaPWnG1hA==
+"@metamask/snap-types@^0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@metamask/snap-types/-/snap-types-0.23.0.tgz#bcd491a100b2410cb91bbecc59007a278fa508d5"
+  integrity sha512-l5QK9XKw5aGEn8ohofyopTQndtlrVzYjXyZik3RhxZccRcGA4rp7juvTuIoyBE/0fiqTc30BHCmKtVvkaTyd9Q==
   dependencies:
     "@metamask/providers" "^9.0.0"
-    "@metamask/snap-utils" "^0.22.3"
+    "@metamask/snap-utils" "^0.23.0"
     "@metamask/types" "^1.1.0"
 
-"@metamask/snap-utils@^0.22.2", "@metamask/snap-utils@^0.22.3":
-  version "0.22.3"
-  resolved "https://registry.yarnpkg.com/@metamask/snap-utils/-/snap-utils-0.22.3.tgz#a17a56773919a717062ba9728165d7ce90c6df30"
-  integrity sha512-sleBuowQMUa9+Eb4OxRs38qxmxO7WCXWmiYkmbOhyk3lGhllbQN3wU/GOvKtC/JH7cSrot2U+ce+M70hWuL9Vg==
+"@metamask/snap-utils@^0.23.0":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@metamask/snap-utils/-/snap-utils-0.23.0.tgz#9a116a2361910ade229749e1f65f8312567faa01"
+  integrity sha512-S0/D+OZ70tvpyMIBIJJzZp/0X1SPVfofbGU3wQCG0OX7TWMpLsnQnBZfRyK7Jw+ZC+j7fyYMUyXEpvimYfHQBA==
   dependencies:
     "@babel/core" "^7.18.6"
     "@babel/types" "^7.18.7"
-    "@metamask/snap-types" "^0.22.3"
-    "@metamask/utils" "^3.1.0"
+    "@metamask/snap-types" "^0.23.0"
+    "@metamask/utils" "^3.3.0"
     "@noble/hashes" "^1.1.3"
     "@scure/base" "^1.1.1"
-    ajv "^8.11.0"
+    cron-parser "^4.5.0"
     eth-rpc-errors "^4.0.3"
     fast-deep-equal "^3.1.3"
     rfdc "^1.3.0"
     semver "^7.3.7"
-    ses "^0.15.17"
-    superstruct "^0.16.5"
+    ses "^0.17.0"
+    superstruct "^0.16.7"
 
 "@metamask/test-dapp@^5.2.1":
   version "5.2.1"
@@ -3233,10 +3229,10 @@
   dependencies:
     fast-deep-equal "^3.1.3"
 
-"@metamask/utils@^3.0.1", "@metamask/utils@^3.0.3", "@metamask/utils@^3.1.0":
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/@metamask/utils/-/utils-3.3.1.tgz#04a00a24469e3eb03bde111432053c05afb45326"
-  integrity sha512-r65Swl91wQ2YDkEQXZah1l7it0iBJK+trTeX9uPHplLQ0lzWZ/yODbEMFZVrStRQxDU8RARXryDyfUX5CLVvLA==
+"@metamask/utils@^3.0.1", "@metamask/utils@^3.0.3", "@metamask/utils@^3.3.0":
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/@metamask/utils/-/utils-3.3.0.tgz#e5e7885c72a30f50f9e2b29690f543da1d6ab496"
+  integrity sha512-GT8jMTCiGl3z9L1lvALjgW/6urJsl5Cwnix4C65NzJInF0cK2GxqpLkEMQJ50Mdky2qc2P7+F5++d4utvx2TtA==
   dependencies:
     "@types/debug" "^4.1.7"
     debug "^4.3.4"
@@ -3546,6 +3542,11 @@
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"
   integrity sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==
 
+"@sindresorhus/is@^4.0.0":
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-4.6.0.tgz#3c7c9c46e678feefe7a2e5bb609d3dbd665ffb3f"
+  integrity sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==
+
 "@sinonjs/commons@^1", "@sinonjs/commons@^1.6.0", "@sinonjs/commons@^1.7.0":
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.7.0.tgz#f90ffc52a2e519f018b13b6c4da03cbff36ebed6"
@@ -4471,6 +4472,13 @@
   dependencies:
     defer-to-connect "^1.0.1"
 
+"@szmarczak/http-timer@^4.0.5":
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-4.0.6.tgz#b4a914bb62e7c272d4e5989fe4440f812ab1d807"
+  integrity sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==
+  dependencies:
+    defer-to-connect "^2.0.0"
+
 "@testim/chrome-version@^1.1.3":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@testim/chrome-version/-/chrome-version-1.1.3.tgz#fbb68696899d7b8c1b9b891eded9c04fe2cd5529"
@@ -4802,6 +4810,16 @@
     "@types/insert-module-globals" "*"
     "@types/node" "*"
 
+"@types/cacheable-request@^6.0.1":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@types/cacheable-request/-/cacheable-request-6.0.2.tgz#c324da0197de0a98a2312156536ae262429ff6b9"
+  integrity sha512-B3xVo+dlKM6nnKTcmm5ZtY/OL8bOAOd2Olee9M1zft65ox50OzjEHW91sDiU9j6cvW8Ejg1/Qkf4xd2kugApUA==
+  dependencies:
+    "@types/http-cache-semantics" "*"
+    "@types/keyv" "*"
+    "@types/node" "*"
+    "@types/responselike" "*"
+
 "@types/chrome@^0.0.136":
   version "0.0.136"
   resolved "https://registry.yarnpkg.com/@types/chrome/-/chrome-0.0.136.tgz#7c011b9f997b0156f25a140188a0c5689d3f368f"
@@ -4960,6 +4978,11 @@
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#3c9ee980f1a10d6021ae6632ca3e79ca2ec4fb50"
   integrity sha512-giAlZwstKbmvMk1OO7WXSj4OZ0keXAcl2TQq4LWHiiPH2ByaH7WeUzng+Qej8UPxxv+8lRTuouo0iaNDBuzIBA==
 
+"@types/http-cache-semantics@*":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@types/http-cache-semantics/-/http-cache-semantics-4.0.1.tgz#0ea7b61496902b95890dc4c3a116b60cb8dae812"
+  integrity sha512-SZs7ekbP8CN0txVG2xVRH6EgKmEm31BOxA07vkFaETzZz1xh+cbt8BcI0slpymvwhx5dlFnQG2rTlPVQn+iRPQ==
+
 "@types/insert-module-globals@*":
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/@types/insert-module-globals/-/insert-module-globals-7.0.2.tgz#0d44216a6489829897d7c8a97dbf8250444c95f8"
@@ -5031,6 +5054,13 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
+"@types/keyv@*":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@types/keyv/-/keyv-4.2.0.tgz#65b97868ab757906f2dbb653590d7167ad023fa0"
+  integrity sha512-xoBtGl5R9jeKUhc8ZqeYaRDx04qqJ10yhhXYGmJ4Jr8qKpvMsDQQrNUvF/wUJ4klOtmJeJM+p2Xo3zp9uaC3tw==
+  dependencies:
+    keyv "*"
+
 "@types/lodash@^4.14.107", "@types/lodash@^4.14.136", "@types/lodash@^4.14.167", "@types/lodash@^4.14.176":
   version "4.14.184"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.184.tgz#23f96cd2a21a28e106dc24d825d4aa966de7a9fe"
@@ -5203,6 +5233,13 @@
   dependencies:
     redux "*"
 
+"@types/responselike@*", "@types/responselike@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@types/responselike/-/responselike-1.0.0.tgz#251f4fe7d154d2bad125abe1b429b23afd262e29"
+  integrity sha512-85Y2BjiufFzaMIlvJDvTTB8Fxl2xfLo4HgmHzVBz08w4wDePCTjYw66PdrolO0kzli3yam/YCgRufyo1DdQVTA==
+  dependencies:
+    "@types/node" "*"
+
 "@types/sass@*":
   version "1.43.1"
   resolved "https://registry.yarnpkg.com/@types/sass/-/sass-1.43.1.tgz#86bb0168e9e881d7dade6eba16c9ed6d25dc2f68"
@@ -6100,10 +6137,10 @@ adjust-sourcemap-loader@3.0.0:
     loader-utils "^2.0.0"
     regex-parser "^2.2.11"
 
-adm-zip@0.4.16:
-  version "0.4.16"
-  resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.4.16.tgz#cf4c508fdffab02c269cbc7f471a875f05570365"
-  integrity sha512-TFi4HBKSGfIKsK5YCkKaaFG2m4PEDyViZmEwof3MTIgzimHLto6muaHVpbrljdIvIrFZzEq/p4nafOeLcYegrg==
+adm-zip@0.5.9:
+  version "0.5.9"
+  resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.5.9.tgz#b33691028333821c0cf95c31374c5462f2905a83"
+  integrity sha512-s+3fXLkeeLjZ2kLjCBwQufpI5fuN+kIGBxu6530nVQZGVol0d7Y/M88/xw9HGGUcJjKf8LutN3VPRUBq6N7Ajg==
 
 aes-js@3.0.0:
   version "3.0.0"
@@ -6194,7 +6231,7 @@ ajv-merge-patch@5.0.1:
     fast-json-patch "^2.0.6"
     json-merge-patch "^1.0.2"
 
-ajv@8.11.0, ajv@^8.11.0:
+ajv@8.11.0:
   version "8.11.0"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.11.0.tgz#977e91dd96ca669f54a11e23e378e33b884a565f"
   integrity sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==
@@ -6770,17 +6807,17 @@ atomic-sleep@^1.0.0:
   resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"
   integrity sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==
 
-autoprefixer@^8.0.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-8.1.0.tgz#374cf35be1c0e8fce97408d876f95f66f5cb4641"
-  integrity sha512-b6mjq6VZ0guW6evRkKXL5sSSvIXICAE9dyWReZ3l/riidU7bVaJMe5cQ512SmaLA4Pvgnhi5MFsMs/Mvyh9//Q==
+autoprefixer@^10.2.6:
+  version "10.4.13"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.13.tgz#b5136b59930209a321e9fa3dca2e7c4d223e83a8"
+  integrity sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==
   dependencies:
-    browserslist "^3.1.1"
-    caniuse-lite "^1.0.30000810"
+    browserslist "^4.21.4"
+    caniuse-lite "^1.0.30001426"
+    fraction.js "^4.2.0"
     normalize-range "^0.1.2"
-    num2fraction "^1.2.2"
-    postcss "^6.0.19"
-    postcss-value-parser "^3.2.3"
+    picocolors "^1.0.0"
+    postcss-value-parser "^4.2.0"
 
 autoprefixer@^9.8.0, autoprefixer@^9.8.6:
   version "9.8.8"
@@ -7684,23 +7721,15 @@ browserify@^17.0.0:
     vm-browserify "^1.0.0"
     xtend "^4.0.0"
 
-browserslist@^3.1.1:
-  version "3.2.8"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-3.2.8.tgz#b0005361d6471f0f5952797a76fc985f1f978fc6"
-  integrity sha512-WHVocJYavUwVgVViC0ORikPHQquXwVh939TaelZ4WDqpWgTX/FsGhl/+P4qBUAGcRvtOgDgC+xftNWWp2RUTAQ==
+browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4.20.2, browserslist@^4.21.3, browserslist@^4.21.4:
+  version "4.21.4"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.4.tgz#e7496bbc67b9e39dd0f98565feccdcb0d4ff6987"
+  integrity sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==
   dependencies:
-    caniuse-lite "^1.0.30000844"
-    electron-to-chromium "^1.3.47"
-
-browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4.20.2, browserslist@^4.21.3:
-  version "4.21.3"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.3.tgz#5df277694eb3c48bc5c4b05af3e8b7e09c5a6d1a"
-  integrity sha512-898rgRXLAyRkM1GryrrBHGkqA5hlpkV5MhtZwg9QXeiyLUYs2k00Un05aX5l2/yJIOObYKOpS2JNo8nJDE7fWQ==
-  dependencies:
-    caniuse-lite "^1.0.30001370"
-    electron-to-chromium "^1.4.202"
+    caniuse-lite "^1.0.30001400"
+    electron-to-chromium "^1.4.251"
     node-releases "^2.0.6"
-    update-browserslist-db "^1.0.5"
+    update-browserslist-db "^1.0.9"
 
 bs58@^2.0.1:
   version "2.0.1"
@@ -7919,6 +7948,11 @@ cache-content-type@^1.0.0:
     mime-types "^2.1.18"
     ylru "^1.2.0"
 
+cacheable-lookup@^5.0.3:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/cacheable-lookup/-/cacheable-lookup-5.0.4.tgz#5a6b865b2c44357be3d5ebc2a467b032719a7005"
+  integrity sha512-2/kNscPhpcxrOigMZzbiWF7dz8ilhb/nIHU3EyZiXWXpeq/au8qJ8VhdftMkty3n7Gj6HIGalQG8oiBNB3AJgA==
+
 cacheable-lookup@^6.0.0:
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/cacheable-lookup/-/cacheable-lookup-6.0.4.tgz#65c0e51721bb7f9f2cb513aed6da4a1b93ad7dc8"
@@ -7937,6 +7971,19 @@ cacheable-request@^6.0.0:
     normalize-url "^4.1.0"
     responselike "^1.0.2"
 
+cacheable-request@^7.0.2:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/cacheable-request/-/cacheable-request-7.0.2.tgz#ea0d0b889364a25854757301ca12b2da77f91d27"
+  integrity sha512-pouW8/FmiPQbuGpkXQ9BAPv/Mo5xDGANgSNXzTzJ8DrKGuXOssM4wIQRjfanNRh3Yu5cfYPvcorqbhg2KIJtew==
+  dependencies:
+    clone-response "^1.0.2"
+    get-stream "^5.1.0"
+    http-cache-semantics "^4.0.0"
+    keyv "^4.0.0"
+    lowercase-keys "^2.0.0"
+    normalize-url "^6.0.1"
+    responselike "^2.0.0"
+
 cached-path-relative@^1.0.0, cached-path-relative@^1.0.2:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/cached-path-relative/-/cached-path-relative-1.1.0.tgz#865576dfef39c0d6a7defde794d078f5308e3ef3"
@@ -8033,10 +8080,10 @@ camelcase@^6.0.0, camelcase@^6.2.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
   integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
 
-caniuse-lite@^1.0.30000810, caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001312, caniuse-lite@^1.0.30001370:
-  version "1.0.30001312"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001312.tgz#e11eba4b87e24d22697dae05455d5aea28550d5f"
-  integrity sha512-Wiz1Psk2MEK0pX3rUzWaunLTZzqS2JYZFzNKqAiJGiuxIjRPLgV6+VDPOg6lQOUxmDwhTlh198JsTTi8Hzw6aQ==
+caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001426:
+  version "1.0.30001431"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz#e7c59bd1bc518fae03a4656be442ce6c4887a795"
+  integrity sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ==
 
 capture-exit@^2.0.0:
   version "2.0.0"
@@ -9077,7 +9124,7 @@ create-ecdh@^4.0.0:
     bn.js "^4.1.0"
     elliptic "^6.0.0"
 
-create-error-class@^3.0.0, create-error-class@^3.0.1:
+create-error-class@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/create-error-class/-/create-error-class-3.0.2.tgz#06be7abef947a3f14a30fd610671d401bca8b7b6"
   integrity sha1-Br56vvlHo/FKMP1hBnHUAbyot7Y=
@@ -9112,6 +9159,13 @@ create-require@^1.1.0:
   resolved "https://registry.yarnpkg.com/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333"
   integrity sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==
 
+cron-parser@^4.5.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/cron-parser/-/cron-parser-4.6.0.tgz#404c3fdbff10ae80eef6b709555d577ef2fd2e0d"
+  integrity sha512-guZNLMGUgg6z4+eGhmHGw7ft+v6OQeuHzd1gcLxCo9Yg/qoxmG3nindp2/uwGCLizEisf2H0ptqeVXeoCpP6FA==
+  dependencies:
+    luxon "^3.0.1"
+
 cross-fetch@^2.1.0, cross-fetch@^3.1.4, cross-fetch@^3.1.5:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.5.tgz#e1389f44d9e7ba767907f7af8454787952ab534f"
@@ -9586,6 +9640,11 @@ defer-to-connect@^1.0.1:
   resolved "https://registry.yarnpkg.com/defer-to-connect/-/defer-to-connect-1.1.3.tgz#331ae050c08dcf789f8c83a7b81f0ed94f4ac591"
   integrity sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==
 
+defer-to-connect@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/defer-to-connect/-/defer-to-connect-2.0.1.tgz#8016bdb4143e4632b77a3449c6236277de520587"
+  integrity sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==
+
 deferred-leveldown@~1.2.1:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/deferred-leveldown/-/deferred-leveldown-1.2.2.tgz#3acd2e0b75d1669924bc0a4b642851131173e1eb"
@@ -10176,7 +10235,7 @@ drbg.js@^1.0.1:
     create-hash "^1.1.2"
     create-hmac "^1.1.4"
 
-duplexer2@^0.1.2, duplexer2@^0.1.4, duplexer2@~0.1.0, duplexer2@~0.1.2, duplexer2@~0.1.4:
+duplexer2@^0.1.2, duplexer2@~0.1.0, duplexer2@~0.1.2, duplexer2@~0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"
   integrity sha1-ixLauHjA1p4+eJEFFmKjL8a93ME=
@@ -10241,10 +10300,10 @@ ejs@^3.0.2:
   dependencies:
     jake "^10.6.1"
 
-electron-to-chromium@^1.3.47, electron-to-chromium@^1.4.202:
-  version "1.4.206"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.206.tgz#580ff85b54d7ec0c05f20b1e37ea0becdd7b0ee4"
-  integrity sha512-h+Fadt1gIaQ06JaIiyqPsBjJ08fV5Q7md+V8bUvQW/9OvXfL2LRICTz2EcnnCP7QzrFTS6/27MRV6Bl9Yn97zA==
+electron-to-chromium@^1.4.251:
+  version "1.4.284"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz#61046d1e4cab3a25238f6bf7413795270f125592"
+  integrity sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==
 
 electron@^11.1.0:
   version "11.5.0"
@@ -12528,6 +12587,11 @@ forwarded@~0.1.2:
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
   integrity sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=
 
+fraction.js@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
+  integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
+
 fragment-cache@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
@@ -12743,16 +12807,16 @@ gauge@~2.7.3:
     strip-ansi "^3.0.1"
     wide-align "^1.1.0"
 
-geckodriver@^1.21.0:
-  version "1.21.0"
-  resolved "https://registry.yarnpkg.com/geckodriver/-/geckodriver-1.21.0.tgz#1f04780ebfb451ffd08fa8fddc25cc26e37ac4a2"
-  integrity sha512-NamdJwGIWpPiafKQIvGman95BBi/SBqHddRXAnIEpFNFCFToTW0sEA0nUckMKCBNn1DVIcLfULfyFq/sTn9bkA==
+geckodriver@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/geckodriver/-/geckodriver-3.2.0.tgz#6b0a85e2aafbce209bca30e2d53af857707b1034"
+  integrity sha512-p+qR2RKlI/TQoCEYrSuTaYCLqsJNni96WmEukTyXmOmLn+3FLdgPAEwMZ0sG2Cwi9hozUzGAWyT6zLuhF6cpiQ==
   dependencies:
-    adm-zip "0.4.16"
+    adm-zip "0.5.9"
     bluebird "3.7.2"
-    got "5.6.0"
-    https-proxy-agent "5.0.0"
-    tar "6.0.2"
+    got "11.8.5"
+    https-proxy-agent "5.0.1"
+    tar "6.1.11"
 
 generic-names@^2.0.1:
   version "2.0.1"
@@ -13202,27 +13266,22 @@ gonzales-pe@^4.2.3, gonzales-pe@^4.3.0:
   dependencies:
     minimist "^1.2.5"
 
-got@5.6.0:
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/got/-/got-5.6.0.tgz#bb1d7ee163b78082bbc8eb836f3f395004ea6fbf"
-  integrity sha1-ux1+4WO3gIK7yOuDbz85UATqb78=
+got@11.8.5:
+  version "11.8.5"
+  resolved "https://registry.yarnpkg.com/got/-/got-11.8.5.tgz#ce77d045136de56e8f024bebb82ea349bc730046"
+  integrity sha512-o0Je4NvQObAuZPHLFoRSkdG2lTgtcynqymzg2Vupdx6PorhaT5MCbIyXG6d4D94kk8ZG57QeosgdiqfJWhEhlQ==
   dependencies:
-    create-error-class "^3.0.1"
-    duplexer2 "^0.1.4"
-    is-plain-obj "^1.0.0"
-    is-redirect "^1.0.0"
-    is-retry-allowed "^1.0.0"
-    is-stream "^1.0.0"
-    lowercase-keys "^1.0.0"
-    node-status-codes "^1.0.0"
-    object-assign "^4.0.1"
-    parse-json "^2.1.0"
-    pinkie-promise "^2.0.0"
-    read-all-stream "^3.0.0"
-    readable-stream "^2.0.5"
-    timed-out "^2.0.0"
-    unzip-response "^1.0.0"
-    url-parse-lax "^1.0.0"
+    "@sindresorhus/is" "^4.0.0"
+    "@szmarczak/http-timer" "^4.0.5"
+    "@types/cacheable-request" "^6.0.1"
+    "@types/responselike" "^1.0.0"
+    cacheable-lookup "^5.0.3"
+    cacheable-request "^7.0.2"
+    decompress-response "^6.0.0"
+    http2-wrapper "^1.0.0-beta.5.2"
+    lowercase-keys "^2.0.0"
+    p-cancelable "^2.0.0"
+    responselike "^2.0.0"
 
 got@^6.7.1:
   version "6.7.1"
@@ -13314,17 +13373,17 @@ gud@^1.0.0:
   resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
   integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
 
-gulp-autoprefixer@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/gulp-autoprefixer/-/gulp-autoprefixer-5.0.0.tgz#8237c278a69775270a1cafe7d6f101cfcd585544"
-  integrity sha1-gjfCeKaXdScKHK/n1vEBz81YVUQ=
+gulp-autoprefixer@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/gulp-autoprefixer/-/gulp-autoprefixer-8.0.0.tgz#ee2413d6cb9f7cc2f01b7d9835b46e58e326b88d"
+  integrity sha512-sVR++PIaXpa81p52dmmA/jt50bw0egmylK5mjagfgOJ8uLDGaF9tHyzvetkY9Uo0gBZUS5sVqN3kX/GlUKOyog==
   dependencies:
-    autoprefixer "^8.0.0"
-    fancy-log "^1.3.2"
+    autoprefixer "^10.2.6"
+    fancy-log "^1.3.3"
     plugin-error "^1.0.1"
-    postcss "^6.0.1"
-    through2 "^2.0.0"
-    vinyl-sourcemaps-apply "^0.2.0"
+    postcss "^8.3.0"
+    through2 "^4.0.2"
+    vinyl-sourcemaps-apply "^0.2.1"
 
 gulp-cli@^2.2.0:
   version "2.3.0"
@@ -13990,12 +14049,20 @@ http2-wrapper@2.0.5:
     quick-lru "^5.1.1"
     resolve-alpn "^1.1.1"
 
+http2-wrapper@^1.0.0-beta.5.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/http2-wrapper/-/http2-wrapper-1.0.3.tgz#b8f55e0c1f25d4ebd08b3b0c2c079f9590800b3d"
+  integrity sha512-V+23sDMr12Wnz7iTcDeJr3O6AIxlnvT/bmaAAAP/Xda35C90p9599p0F1eHR/N1KILWSoWVAiOMFjBBXaXSMxg==
+  dependencies:
+    quick-lru "^5.1.1"
+    resolve-alpn "^1.0.0"
+
 https-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
   integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
 
-https-proxy-agent@5, https-proxy-agent@^5.0.0, https-proxy-agent@^5.0.1:
+https-proxy-agent@5, https-proxy-agent@5.0.1, https-proxy-agent@^5.0.0, https-proxy-agent@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
   integrity sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==
@@ -14003,14 +14070,6 @@ https-proxy-agent@5, https-proxy-agent@^5.0.0, https-proxy-agent@^5.0.1:
     agent-base "6"
     debug "4"
 
-https-proxy-agent@5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz#e2a90542abb68a762e0a0850f6c9edadfd8506b2"
-  integrity sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==
-  dependencies:
-    agent-base "6"
-    debug "4"
-
 human-signals@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
@@ -14744,7 +14803,7 @@ is-path-inside@^3.0.2:
   resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
   integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
 
-is-plain-obj@^1.0.0, is-plain-obj@^1.1.0:
+is-plain-obj@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
   integrity sha1-caUMhCnfync8kqOQpKA7OfzVHT4=
@@ -15769,6 +15828,11 @@ json-buffer@3.0.0:
   resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.0.tgz#5b1f397afc75d677bde8bcfc0e47e1f9a3d9a898"
   integrity sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg=
 
+json-buffer@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
+  integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
+
 json-merge-patch@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json-merge-patch/-/json-merge-patch-1.0.2.tgz#c4626811943b2f362f8607ae8f03d528875465b0"
@@ -15825,10 +15889,10 @@ json-rpc-middleware-stream@^3.0.0:
     "@metamask/safe-event-emitter" "^2.0.0"
     readable-stream "^2.3.3"
 
-json-rpc-middleware-stream@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/json-rpc-middleware-stream/-/json-rpc-middleware-stream-4.0.0.tgz#54de6f57d795525547219c1581858962618adeeb"
-  integrity sha512-+s8ps2cO+zmw21W7TA9wVD/5fwNi4C2O7NzLxlrEDrfzNcs3YX76Qw2fXuQLKVFeP654CIa6nkfqkFU9o7x/3g==
+json-rpc-middleware-stream@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/json-rpc-middleware-stream/-/json-rpc-middleware-stream-4.2.0.tgz#a235814e031a2f85cc14b213aa7d42b75527104b"
+  integrity sha512-vaPaFVnhozfAVx6ImO3YuSrzl6A1OCktDi9Prw6NASn2VRYfe3pzv+2QGzFHRjViztr61oHi6KC3k8cujrfK7A==
   dependencies:
     "@metamask/safe-event-emitter" "^2.0.0"
     readable-stream "^2.3.3"
@@ -16076,6 +16140,13 @@ keygrip@~1.1.0:
   dependencies:
     tsscmp "1.0.6"
 
+keyv@*, keyv@^4.0.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.0.tgz#dbce9ade79610b6e641a9a65f2f6499ba06b9bc6"
+  integrity sha512-2YvuMsA+jnFGtBareKqgANOEKe1mk3HKiXu2fRmAfyxG0MJAywNhi5ttWA3PMjl4NmpyjZNbFifR2vNjW1znfA==
+  dependencies:
+    json-buffer "3.0.1"
+
 keyv@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/keyv/-/keyv-3.1.0.tgz#ecc228486f69991e49e9476485a5be1e8fc5c4d9"
@@ -16814,10 +16885,10 @@ ltgt@~2.2.0:
   resolved "https://registry.yarnpkg.com/ltgt/-/ltgt-2.2.1.tgz#f35ca91c493f7b73da0e07495304f17b31f87ee5"
   integrity sha1-81ypHEk/e3PaDgdJUwTxezH4fuU=
 
-luxon@^1.26.0:
-  version "1.26.0"
-  resolved "https://registry.yarnpkg.com/luxon/-/luxon-1.26.0.tgz#d3692361fda51473948252061d0f8561df02b578"
-  integrity sha512-+V5QIQ5f6CDXQpWNICELwjwuHdqeJM1UenlZWx5ujcRMc9venvluCjFb4t5NYLhb6IhkbMVOxzVuOqkgMxee2A==
+luxon@^3.0.1, luxon@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/luxon/-/luxon-3.1.0.tgz#9ac33d7142b7ea18d4ec8583cdeb0b079abef60d"
+  integrity sha512-7w6hmKC0/aoWnEsmPCu5Br54BmbmUp5GfcqBxQngRcXJ+q5fdfjEzn7dxmJh2YdDhgW8PccYtlWKSv4tQkrTQg==
 
 madge@^5.0.1:
   version "5.0.1"
@@ -17428,7 +17499,7 @@ minizlib@^1.3.3:
   dependencies:
     minipass "^2.9.0"
 
-minizlib@^2.1.0, minizlib@^2.1.1:
+minizlib@^2.1.1:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-2.1.2.tgz#e90d3466ba209b932451508a11ce3d3632145931"
   integrity sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==
@@ -17734,7 +17805,7 @@ nanoid@^2.0.0, nanoid@^2.1.6:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280"
   integrity sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==
 
-nanoid@^3.1.31, nanoid@^3.3.1, nanoid@^3.3.3:
+nanoid@^3.1.31, nanoid@^3.3.1, nanoid@^3.3.3, nanoid@^3.3.4:
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
   integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
@@ -18039,11 +18110,6 @@ node-source-walk@^4.0.0, node-source-walk@^4.2.0:
   dependencies:
     "@babel/parser" "^7.0.0"
 
-node-status-codes@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/node-status-codes/-/node-status-codes-1.0.0.tgz#5ae5541d024645d32a58fcddc9ceecea7ae3ac2f"
-  integrity sha1-WuVUHQJGRdMqWPzdyc7s6nrjrC8=
-
 nofilter@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/nofilter/-/nofilter-1.0.4.tgz#78d6f4b6a613e7ced8b015cec534625f7667006e"
@@ -18128,6 +18194,11 @@ normalize-url@^4.1.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.1.tgz#0dd90cf1288ee1d1313b87081c9a5932ee48518a"
   integrity sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA==
 
+normalize-url@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a"
+  integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==
+
 now-and-later@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/now-and-later/-/now-and-later-2.0.0.tgz#bc61cbb456d79cb32207ce47ca05136ff2e7d6ee"
@@ -18610,6 +18681,11 @@ p-cancelable@^1.0.0:
   resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-1.1.0.tgz#d078d15a3af409220c886f1d9a0ca2e441ab26cc"
   integrity sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==
 
+p-cancelable@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-2.1.1.tgz#aab7fbd416582fa32a3db49859c122487c5ed2cf"
+  integrity sha512-BZOr3nRQHOntUjTrH8+Lh54smKHoHyur8We1V8DSMVrl5A2malOOwuJRnKRDjSnkoeBh4at6BwEnb5I7Jl31wg==
+
 p-defer@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c"
@@ -18871,7 +18947,7 @@ parse-headers@^2.0.0:
     for-each "^0.3.3"
     string.prototype.trim "^1.1.2"
 
-parse-json@^2.1.0, parse-json@^2.2.0:
+parse-json@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9"
   integrity sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=
@@ -19530,15 +19606,15 @@ postcss-syntax@^0.36.2:
   resolved "https://registry.yarnpkg.com/postcss-syntax/-/postcss-syntax-0.36.2.tgz#f08578c7d95834574e5593a82dfbfa8afae3b51c"
   integrity sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==
 
-postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0, postcss-value-parser@^3.3.1:
+postcss-value-parser@^3.3.0, postcss-value-parser@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
 
-postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
-  integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
 postcss-values-parser@^2.0.1:
   version "2.0.1"
@@ -19567,7 +19643,7 @@ postcss@7.0.21:
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
-postcss@8.4.13, postcss@^8.1.10, postcss@^8.1.7, postcss@^8.2.13:
+postcss@8.4.13:
   version "8.4.13"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.13.tgz#7c87bc268e79f7f86524235821dfdf9f73e5d575"
   integrity sha512-jtL6eTBrza5MPzy8oJLFuUscHDXTV5KcLlqAWHl5q5WYRfnNRGSmOZmOZ1T6Gy7A99mOZfqungmZMpMmCVJ8ZA==
@@ -19576,7 +19652,7 @@ postcss@8.4.13, postcss@^8.1.10, postcss@^8.1.7, postcss@^8.2.13:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postcss@^6.0.1, postcss@^6.0.19, postcss@^6.0.23:
+postcss@^6.0.23:
   version "6.0.23"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
   integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
@@ -19593,6 +19669,15 @@ postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
+postcss@^8.1.10, postcss@^8.1.7, postcss@^8.2.13, postcss@^8.3.0:
+  version "8.4.18"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.18.tgz#6d50046ea7d3d66a85e0e782074e7203bc7fbca2"
+  integrity sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==
+  dependencies:
+    nanoid "^3.3.4"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 prebuild-install@^5.3.4:
   version "5.3.6"
   resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-5.3.6.tgz#7c225568d864c71d89d07f8796042733a3f54291"
@@ -20565,14 +20650,6 @@ react@^16.12.0:
     object-assign "^4.1.1"
     prop-types "^15.6.2"
 
-read-all-stream@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/read-all-stream/-/read-all-stream-3.1.0.tgz#35c3e177f2078ef789ee4bfafa4373074eaef4fa"
-  integrity sha1-NcPhd/IHjveJ7kv6+kNzB06u9Po=
-  dependencies:
-    pinkie-promise "^2.0.0"
-    readable-stream "^2.0.0"
-
 read-installed@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/read-installed/-/read-installed-4.0.3.tgz#ff9b8b67f187d1e4c29b9feb31f6b223acd19067"
@@ -21227,7 +21304,7 @@ reselect@^4.0.0:
   resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7"
   integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==
 
-resolve-alpn@^1.1.1:
+resolve-alpn@^1.0.0, resolve-alpn@^1.1.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/resolve-alpn/-/resolve-alpn-1.2.1.tgz#b7adbdac3546aaaec20b45e7d8265927072726f9"
   integrity sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==
@@ -21330,6 +21407,13 @@ responselike@^1.0.2:
   dependencies:
     lowercase-keys "^1.0.0"
 
+responselike@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/responselike/-/responselike-2.0.1.tgz#9a0bc8fdc252f3fb1cca68b016591059ba1422bc"
+  integrity sha512-4gl03wn3hj1HP3yzgdI7d3lCkF95F21Pz4BPGvKHinyQzALR5CapwC8yIi0Rh58DEMQ/SguC03wFj2k0M/mHhw==
+  dependencies:
+    lowercase-keys "^2.0.0"
+
 restore-cursor@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e"
@@ -21926,10 +22010,10 @@ ses@0.12.4, ses@^0.12.4:
     "@agoric/make-hardener" "^0.1.2"
     "@agoric/transform-module" "^0.4.1"
 
-ses@^0.15.15, ses@^0.15.17:
-  version "0.15.23"
-  resolved "https://registry.yarnpkg.com/ses/-/ses-0.15.23.tgz#067a2d856ea1304093dff5d27eaa906c495962d8"
-  integrity sha512-mFV5a0alaJkJcWU3AgT/2yRasEZZNv78PY6UmRdt6KhndtOMMkQl7vAvwWp9md8YBBG3zVJ5J82PT0uPY7atXw==
+ses@^0.17.0:
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/ses/-/ses-0.17.0.tgz#4e37cd1c4003e4448df2e84983900ccc5e2f095a"
+  integrity sha512-ObQ4DF4OgkmuPVRZLSmB1E+8jWh6lnlSpN9JHnphAUb/5J6k7da+7kj63cXrz53NDPd69rUV3DsfRBNBx8xcPQ==
 
 set-blocking@^2.0.0, set-blocking@~2.0.0:
   version "2.0.0"
@@ -23019,7 +23103,7 @@ superagent@^3.8.1:
     qs "^6.5.1"
     readable-stream "^2.3.5"
 
-superstruct@^0.16.5, superstruct@^0.16.7:
+superstruct@^0.16.7:
   version "0.16.7"
   resolved "https://registry.yarnpkg.com/superstruct/-/superstruct-0.16.7.tgz#78bb71209d71e6107a260afc166580b137bd243a"
   integrity sha512-4ZZTrXlP4XzCrgh4vOfPDL6dL7zZm5aPl78eczwFSrwvxtsEnKRrSGID6Sbt0agycUoo4auRdWSNTX+oQ3KFyA==
@@ -23173,15 +23257,15 @@ tar-stream@^2.1.4, tar-stream@^2.2.0:
     inherits "^2.0.3"
     readable-stream "^3.1.1"
 
-tar@6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-6.0.2.tgz#5df17813468a6264ff14f766886c622b84ae2f39"
-  integrity sha512-Glo3jkRtPcvpDlAs/0+hozav78yoXKFr+c4wgw62NNMO3oo4AaJdCo21Uu7lcwr55h39W2XD1LMERc64wtbItg==
+tar@6.1.11, tar@^6.0.2:
+  version "6.1.11"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-6.1.11.tgz#6760a38f003afa1b2ffd0ffe9e9abbd0eab3d621"
+  integrity sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==
   dependencies:
     chownr "^2.0.0"
     fs-minipass "^2.0.0"
     minipass "^3.0.0"
-    minizlib "^2.1.0"
+    minizlib "^2.1.1"
     mkdirp "^1.0.3"
     yallist "^4.0.0"
 
@@ -23198,18 +23282,6 @@ tar@^4:
     safe-buffer "^5.2.1"
     yallist "^3.1.1"
 
-tar@^6.0.2:
-  version "6.1.3"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-6.1.3.tgz#e44b97ee7d6cc7a4c574e8b01174614538291825"
-  integrity sha512-3rUqwucgVZXTeyJyL2jqtUau8/8r54SioM1xj3AmTX3HnWQdj2AydfJ2qYYayPyIIznSplcvU9mhBb7dR2XF3w==
-  dependencies:
-    chownr "^2.0.0"
-    fs-minipass "^2.0.0"
-    minipass "^3.0.0"
-    minizlib "^2.1.1"
-    mkdirp "^1.0.3"
-    yallist "^4.0.0"
-
 tcp-port-used@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/tcp-port-used/-/tcp-port-used-1.0.1.tgz#46061078e2d38c73979a2c2c12b5a674e6689d70"
@@ -23395,11 +23467,6 @@ time-stamp@^1.0.0:
   resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-1.1.0.tgz#764a5a11af50561921b133f3b44e618687e0f5c3"
   integrity sha1-dkpaEa9QVhkhsTPztE5hhofg9cM=
 
-timed-out@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-2.0.0.tgz#f38b0ae81d3747d628001f41dafc652ace671c0a"
-  integrity sha1-84sK6B03R9YoAB9B2vxlKs5nHAo=
-
 timed-out@^4.0.0, timed-out@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-4.0.1.tgz#f32eacac5a175bea25d7fab565ab3ed8741ef56f"
@@ -24145,11 +24212,6 @@ untildify@^2.0.0:
   dependencies:
     os-homedir "^1.0.0"
 
-unzip-response@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-1.0.2.tgz#b984f0877fc0a89c2c773cc1ef7b5b232b5b06fe"
-  integrity sha1-uYTwh3/AqJwsdzzB73tbIytbBv4=
-
 unzip-response@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-2.0.1.tgz#d2f0f737d16b0615e72a6935ed04214572d56f97"
@@ -24165,10 +24227,10 @@ upath@^1.1.1:
   resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
   integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
 
-update-browserslist-db@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.5.tgz#be06a5eedd62f107b7c19eb5bcefb194411abf38"
-  integrity sha512-dteFFpCyvuDdr9S/ff1ISkKt/9YZxKjI9WlRR99c180GaztJtRa/fn18FdxGVKVsnPY7/a/FDN68mcvUmP4U7Q==
+update-browserslist-db@^1.0.9:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz#0f54b876545726f17d00cd9a2561e6dade943ff3"
+  integrity sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==
   dependencies:
     escalade "^3.1.1"
     picocolors "^1.0.0"