From 108bd7987b77c4732f0f78c9932b24732f027eaf Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Fri, 11 Jun 2021 11:04:09 -0230
Subject: [PATCH 001/141] Update `@metamask/contract-metadata` from v1.25 to
 v1.26 (#11278)

This update includes various new tokens.
---
 package.json | 2 +-
 yarn.lock    | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 68af03385..f0c499a2b 100644
--- a/package.json
+++ b/package.json
@@ -96,7 +96,7 @@
     "@fortawesome/fontawesome-free": "^5.13.0",
     "@lavamoat/preinstall-always-fail": "^1.0.0",
     "@material-ui/core": "^4.11.0",
-    "@metamask/contract-metadata": "^1.22.0",
+    "@metamask/contract-metadata": "^1.26.0",
     "@metamask/controllers": "^9.0.0",
     "@metamask/eth-ledger-bridge-keyring": "^0.5.0",
     "@metamask/eth-token-tracker": "^3.0.1",
diff --git a/yarn.lock b/yarn.lock
index fd69cbd6a..c5537275a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2630,11 +2630,16 @@
     semver "^7.3.5"
     yargs "^17.0.1"
 
-"@metamask/contract-metadata@^1.19.0", "@metamask/contract-metadata@^1.22.0", "@metamask/contract-metadata@^1.25.0":
+"@metamask/contract-metadata@^1.19.0", "@metamask/contract-metadata@^1.25.0":
   version "1.25.0"
   resolved "https://registry.yarnpkg.com/@metamask/contract-metadata/-/contract-metadata-1.25.0.tgz#442ace91fb40165310764b68d8096d0017bb0492"
   integrity sha512-yhmYB9CQPv0dckNcPoWDcgtrdUp0OgK0uvkRE5QIBv4b3qENI1/03BztvK2ijbTuMlORUpjPq7/1MQDUPoRPVw==
 
+"@metamask/contract-metadata@^1.26.0":
+  version "1.26.0"
+  resolved "https://registry.yarnpkg.com/@metamask/contract-metadata/-/contract-metadata-1.26.0.tgz#06be4f4dc645da69f6364f75cb2bd47afa642fe6"
+  integrity sha512-58A8csapIPoc854n6AI+3jwJcQfh75BzVrl6SAySgJ9fWTa1XItm9Tx/ORaqYrwaR/9JqH4SnkbXtqyFwuUL6w==
+
 "@metamask/controllers@^5.0.0":
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@metamask/controllers/-/controllers-5.1.0.tgz#02c1957295bcb6db1655a716d165665d170e7f34"

From 22c2d261b9db6327868287b354c0a481a74660f5 Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Sat, 12 Jun 2021 15:25:24 -0700
Subject: [PATCH 002/141] Fixing unlocalized strings (#11281)

---
 app/_locales/en/messages.json                     | 15 +++++++++++++++
 .../confirm-page-container-content.component.js   | 12 ++++++++++--
 .../loading-network-error.component.js            |  2 +-
 .../transaction-breakdown.component.js            |  2 +-
 .../confirm-transaction-base.component.js         | 15 +++++++--------
 ui/pages/mobile-sync/mobile-sync.component.js     |  2 +-
 .../send-hex-data-row.component.js                |  2 +-
 7 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 40f8bd8ac..18c01c274 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -150,6 +150,9 @@
   "amount": {
     "message": "Amount"
   },
+  "amountGasFee": {
+    "message": "Amount + Gas Fee"
+  },
   "amountWithColon": {
     "message": "Amount:"
   },
@@ -492,6 +495,9 @@
   "customToken": {
     "message": "Custom Token"
   },
+  "data": {
+    "message": "Data"
+  },
   "dataBackupFoundInfo": {
     "message": "Some of your account data was backed up during a previous installation of MetaMask. This could include your settings, contacts, and tokens. Would you like to restore this data now?"
   },
@@ -777,6 +783,9 @@
   "functionType": {
     "message": "Function Type"
   },
+  "gasFee": {
+    "message": "Gas Fee"
+  },
   "gasLimit": {
     "message": "Gas Limit"
   },
@@ -1355,6 +1364,9 @@
   "onlyConnectTrust": {
     "message": "Only connect with sites you trust."
   },
+  "optional": {
+    "message": "Optional"
+  },
   "optionalBlockExplorerUrl": {
     "message": "Block Explorer URL (optional)"
   },
@@ -2189,6 +2201,9 @@
   "symbolBetweenZeroTwelve": {
     "message": "Symbol must be 11 characters or fewer."
   },
+  "syncInProgress": {
+    "message": "Sync in progress"
+  },
   "syncWithMobile": {
     "message": "Sync with mobile"
   },
diff --git a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
index e47bfaf78..28d5f578e 100644
--- a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
+++ b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
@@ -7,6 +7,10 @@ import { PageContainerFooter } from '../../../ui/page-container';
 import { ConfirmPageContainerSummary, ConfirmPageContainerWarning } from '.';
 
 export default class ConfirmPageContainerContent extends Component {
+  static contextTypes = {
+    t: PropTypes.func.isRequired,
+  };
+
   static propTypes = {
     action: PropTypes.string,
     dataComponent: PropTypes.node,
@@ -44,14 +48,18 @@ export default class ConfirmPageContainerContent extends Component {
   }
 
   renderTabs() {
+    const { t } = this.context;
     const { detailsComponent, dataComponent } = this.props;
 
     return (
       <Tabs>
-        <Tab className="confirm-page-container-content__tab" name="Details">
+        <Tab
+          className="confirm-page-container-content__tab"
+          name={t('details')}
+        >
           {detailsComponent}
         </Tab>
-        <Tab className="confirm-page-container-content__tab" name="Data">
+        <Tab className="confirm-page-container-content__tab" name={t('data')}>
           {dataComponent}
         </Tab>
       </Tabs>
diff --git a/ui/components/app/modals/loading-network-error/loading-network-error.component.js b/ui/components/app/modals/loading-network-error/loading-network-error.component.js
index 0b473f5f4..17c45376e 100644
--- a/ui/components/app/modals/loading-network-error/loading-network-error.component.js
+++ b/ui/components/app/modals/loading-network-error/loading-network-error.component.js
@@ -8,7 +8,7 @@ const LoadingNetworkError = (props, context) => {
 
   return (
     <Modal onSubmit={() => hideModal()} submitText={t('tryAgain')}>
-      <ModalContent description="Oops! Something went wrong." />
+      <ModalContent description={t('somethingWentWrong')} />
     </Modal>
   );
 };
diff --git a/ui/components/app/transaction-breakdown/transaction-breakdown.component.js b/ui/components/app/transaction-breakdown/transaction-breakdown.component.js
index 4698819cf..cba7803c9 100644
--- a/ui/components/app/transaction-breakdown/transaction-breakdown.component.js
+++ b/ui/components/app/transaction-breakdown/transaction-breakdown.component.js
@@ -46,7 +46,7 @@ export default class TransactionBreakdown extends PureComponent {
     return (
       <div className={classnames('transaction-breakdown', className)}>
         <div className="transaction-breakdown__title">{t('transaction')}</div>
-        <TransactionBreakdownRow title="Nonce">
+        <TransactionBreakdownRow title={t('nonce')}>
           {typeof nonce === 'undefined' ? null : (
             <HexToDecimal
               className="transaction-breakdown__value"
diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
index 8a8e9e47e..9f4904182 100644
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -280,6 +280,7 @@ export default class ConfirmTransactionBase extends Component {
       isEthGasPrice,
       noGasPrice,
     } = this.props;
+    const { t } = this.context;
 
     const notMainnetOrTest = !(isMainnet || process.env.IN_TEST);
     const gasPriceFetchFailure = isEthGasPrice || noGasPrice;
@@ -288,7 +289,7 @@ export default class ConfirmTransactionBase extends Component {
       <div className="confirm-page-container-content__details">
         <div className="confirm-page-container-content__gas-fee">
           <ConfirmDetailRow
-            label="Gas Fee"
+            label={t('gasFee')}
             value={hexTransactionFee}
             headerText={notMainnetOrTest || gasPriceFetchFailure ? '' : 'Edit'}
             headerTextClassName={
@@ -302,9 +303,7 @@ export default class ConfirmTransactionBase extends Component {
                 : () => this.handleEditGas()
             }
             secondaryText={
-              hideFiatConversion
-                ? this.context.t('noConversionRateAvailable')
-                : ''
+              hideFiatConversion ? t('noConversionRateAvailable') : ''
             }
           />
           {advancedInlineGasShown ||
@@ -336,15 +335,15 @@ export default class ConfirmTransactionBase extends Component {
           }
         >
           <ConfirmDetailRow
-            label="Total"
+            label={t('total')}
             value={hexTransactionTotal}
             primaryText={primaryTotalTextOverride}
             secondaryText={
               hideFiatConversion
-                ? this.context.t('noConversionRateAvailable')
+                ? t('noConversionRateAvailable')
                 : secondaryTotalTextOverride
             }
-            headerText="Amount + Gas Fee"
+            headerText={t('amountGasFee')}
             headerTextClassName="confirm-detail-row__header-text--total"
             primaryValueTextColor="#2f9ae0"
           />
@@ -353,7 +352,7 @@ export default class ConfirmTransactionBase extends Component {
           <div>
             <div className="confirm-detail-row">
               <div className="confirm-detail-row__label">
-                {this.context.t('nonceFieldHeading')}
+                {t('nonceFieldHeading')}
               </div>
               <div className="custom-nonce-input">
                 <TextField
diff --git a/ui/pages/mobile-sync/mobile-sync.component.js b/ui/pages/mobile-sync/mobile-sync.component.js
index 683310ba0..e03e6eab2 100644
--- a/ui/pages/mobile-sync/mobile-sync.component.js
+++ b/ui/pages/mobile-sync/mobile-sync.component.js
@@ -296,7 +296,7 @@ export default class MobileSyncPage extends Component {
     const { t } = this.context;
 
     if (syncing) {
-      return <LoadingScreen loadingMessage="Sync in progress" />;
+      return <LoadingScreen loadingMessage={t('syncInProgress')} />;
     }
 
     if (completed) {
diff --git a/ui/pages/send/send-content/send-hex-data-row/send-hex-data-row.component.js b/ui/pages/send/send-content/send-hex-data-row/send-hex-data-row.component.js
index 080b97b37..497b7e5e3 100644
--- a/ui/pages/send/send-content/send-hex-data-row/send-hex-data-row.component.js
+++ b/ui/pages/send/send-content/send-hex-data-row/send-hex-data-row.component.js
@@ -32,7 +32,7 @@ export default class SendHexDataRow extends Component {
       >
         <textarea
           onInput={this.onInput}
-          placeholder="Optional"
+          placeholder={t('optional')}
           className="send-v2__hex-data__input"
         />
       </SendRowWrapper>

From f1ed0e74a57f299b0b9473188eab24f4a32a7185 Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Mon, 14 Jun 2021 09:37:21 -0700
Subject: [PATCH 003/141] =?UTF-8?q?Updating=20"designed=20and=20built"=20m?=
 =?UTF-8?q?essage=20=F0=9F=8C=8E=20(#11285)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/_locales/am/messages.json                    | 3 ---
 app/_locales/ar/messages.json                    | 3 ---
 app/_locales/bg/messages.json                    | 3 ---
 app/_locales/bn/messages.json                    | 3 ---
 app/_locales/ca/messages.json                    | 3 ---
 app/_locales/cs/messages.json                    | 3 ---
 app/_locales/da/messages.json                    | 3 ---
 app/_locales/de/messages.json                    | 3 ---
 app/_locales/el/messages.json                    | 3 ---
 app/_locales/en/messages.json                    | 4 ++--
 app/_locales/es/messages.json                    | 3 ---
 app/_locales/es_419/messages.json                | 3 ---
 app/_locales/et/messages.json                    | 3 ---
 app/_locales/fa/messages.json                    | 3 ---
 app/_locales/fi/messages.json                    | 3 ---
 app/_locales/fil/messages.json                   | 3 ---
 app/_locales/fr/messages.json                    | 3 ---
 app/_locales/he/messages.json                    | 3 ---
 app/_locales/hi/messages.json                    | 3 ---
 app/_locales/hn/messages.json                    | 3 ---
 app/_locales/hr/messages.json                    | 3 ---
 app/_locales/ht/messages.json                    | 3 ---
 app/_locales/hu/messages.json                    | 3 ---
 app/_locales/id/messages.json                    | 3 ---
 app/_locales/it/messages.json                    | 3 ---
 app/_locales/ja/messages.json                    | 3 ---
 app/_locales/kn/messages.json                    | 3 ---
 app/_locales/ko/messages.json                    | 3 ---
 app/_locales/lt/messages.json                    | 3 ---
 app/_locales/lv/messages.json                    | 3 ---
 app/_locales/ms/messages.json                    | 3 ---
 app/_locales/nl/messages.json                    | 3 ---
 app/_locales/no/messages.json                    | 3 ---
 app/_locales/ph/messages.json                    | 3 ---
 app/_locales/pl/messages.json                    | 3 ---
 app/_locales/pt/messages.json                    | 3 ---
 app/_locales/pt_BR/messages.json                 | 3 ---
 app/_locales/ro/messages.json                    | 3 ---
 app/_locales/ru/messages.json                    | 3 ---
 app/_locales/sk/messages.json                    | 3 ---
 app/_locales/sl/messages.json                    | 3 ---
 app/_locales/sr/messages.json                    | 3 ---
 app/_locales/sv/messages.json                    | 3 ---
 app/_locales/sw/messages.json                    | 3 ---
 app/_locales/ta/messages.json                    | 3 ---
 app/_locales/th/messages.json                    | 3 ---
 app/_locales/tl/messages.json                    | 3 ---
 app/_locales/tr/messages.json                    | 3 ---
 app/_locales/uk/messages.json                    | 3 ---
 app/_locales/vi/messages.json                    | 3 ---
 app/_locales/zh_CN/messages.json                 | 3 ---
 app/_locales/zh_TW/messages.json                 | 3 ---
 ui/pages/settings/info-tab/info-tab.component.js | 2 +-
 53 files changed, 3 insertions(+), 156 deletions(-)

diff --git a/app/_locales/am/messages.json b/app/_locales/am/messages.json
index 91c2eb214..e16deef2c 100644
--- a/app/_locales/am/messages.json
+++ b/app/_locales/am/messages.json
@@ -143,9 +143,6 @@
   "browserNotSupported": {
     "message": "ማሰሺያዎት አልተደገፈም..."
   },
-  "builtInCalifornia": {
-    "message": "MetaMask ካሊፎርኒያ ውስጥ ተዘጋጅቶ የተገነባ ነው።"
-  },
   "buyWithWyre": {
     "message": "ETH በ Wyre ይግዙ"
   },
diff --git a/app/_locales/ar/messages.json b/app/_locales/ar/messages.json
index ffe065f16..db0ba6d0a 100644
--- a/app/_locales/ar/messages.json
+++ b/app/_locales/ar/messages.json
@@ -143,9 +143,6 @@
   "browserNotSupported": {
     "message": "متصفحك غير مدعوم..."
   },
-  "builtInCalifornia": {
-    "message": "تم تصميم وإنشاء MetaMask في ولاية كاليفورنيا."
-  },
   "buyWithWyre": {
     "message": "قم بشراء عملة إيثير بواسطة Wyre"
   },
diff --git a/app/_locales/bg/messages.json b/app/_locales/bg/messages.json
index dde63701f..a1ace1be6 100644
--- a/app/_locales/bg/messages.json
+++ b/app/_locales/bg/messages.json
@@ -143,9 +143,6 @@
   "browserNotSupported": {
     "message": "Браузърът ви не се поддържа ..."
   },
-  "builtInCalifornia": {
-    "message": "MetaMask е проектиран и създаден в Калифорния."
-  },
   "buyWithWyre": {
     "message": "Купете ETH с Wyre"
   },
diff --git a/app/_locales/bn/messages.json b/app/_locales/bn/messages.json
index d2c08ab7b..378a950b8 100644
--- a/app/_locales/bn/messages.json
+++ b/app/_locales/bn/messages.json
@@ -143,9 +143,6 @@
   "browserNotSupported": {
     "message": "আপনার ব্রাউজার সমর্থিত নয়..."
   },
-  "builtInCalifornia": {
-    "message": "MetaMask ক্যালিফোর্নিয়াতে ডিজাইন করা এবং নির্মিত।"
-  },
   "buyWithWyre": {
     "message": "Wyre দিয়ে ETH ক্রয় করুন"
   },
diff --git a/app/_locales/ca/messages.json b/app/_locales/ca/messages.json
index ab0e91b84..0531dbcb8 100644
--- a/app/_locales/ca/messages.json
+++ b/app/_locales/ca/messages.json
@@ -143,9 +143,6 @@
   "browserNotSupported": {
     "message": "El teu navegador no és suportat..."
   },
-  "builtInCalifornia": {
-    "message": "MetaMask ha estat dissenyat i desenvolupat a Califòrnia."
-  },
   "buyWithWyre": {
     "message": "Compra ETH amb Wyre"
   },
diff --git a/app/_locales/cs/messages.json b/app/_locales/cs/messages.json
index 442b91544..ee22b9aec 100644
--- a/app/_locales/cs/messages.json
+++ b/app/_locales/cs/messages.json
@@ -46,9 +46,6 @@
   "blockiesIdenticon": {
     "message": "Použít Blockies Identicon"
   },
-  "builtInCalifornia": {
-    "message": "MetaMask je navržen a vytvořen v Kalifornii."
-  },
   "cancel": {
     "message": "Zrušit"
   },
diff --git a/app/_locales/da/messages.json b/app/_locales/da/messages.json
index 24fd9a480..b5bd7eb02 100644
--- a/app/_locales/da/messages.json
+++ b/app/_locales/da/messages.json
@@ -143,9 +143,6 @@
   "browserNotSupported": {
     "message": "Din browser er ikke understøttet..."
   },
-  "builtInCalifornia": {
-    "message": "MetaMask er designet og bygget i Californien."
-  },
   "buyWithWyre": {
     "message": "Køb ETH med Wyre"
   },
diff --git a/app/_locales/de/messages.json b/app/_locales/de/messages.json
index f04fba67c..08d79a54e 100644
--- a/app/_locales/de/messages.json
+++ b/app/_locales/de/messages.json
@@ -140,9 +140,6 @@
   "browserNotSupported": {
     "message": "Ihr Browser wird nicht unterstützt …"
   },
-  "builtInCalifornia": {
-    "message": "MetaMask wurde in Kalifornien entwickelt und gebaut."
-  },
   "buyWithWyre": {
     "message": "ETH mit Wyre kaufen"
   },
diff --git a/app/_locales/el/messages.json b/app/_locales/el/messages.json
index d7902743a..c58385c6a 100644
--- a/app/_locales/el/messages.json
+++ b/app/_locales/el/messages.json
@@ -143,9 +143,6 @@
   "browserNotSupported": {
     "message": "Το Πρόγραμμα Περιήγησής σας δεν υποστηρίζεται..."
   },
-  "builtInCalifornia": {
-    "message": "Το MetaMask έχει σχεδιαστεί και αναπτυχθεί στην Καλιφόρνια."
-  },
   "buyWithWyre": {
     "message": "Αγοράστε ETH με το Wyre"
   },
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 18c01c274..642d08124 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -259,8 +259,8 @@
   "builContactList": {
     "message": "Build your contact list"
   },
-  "builtInCalifornia": {
-    "message": "MetaMask is designed and built in California."
+  "builtAroundTheWorld": {
+    "message": "MetaMask is designed and built around the world."
   },
   "buy": {
     "message": "Buy"
diff --git a/app/_locales/es/messages.json b/app/_locales/es/messages.json
index ea6826817..7ae032178 100644
--- a/app/_locales/es/messages.json
+++ b/app/_locales/es/messages.json
@@ -252,9 +252,6 @@
   "builContactList": {
     "message": "Cree su lista de contactos"
   },
-  "builtInCalifornia": {
-    "message": "MetaMask se diseñó y compiló en California."
-  },
   "buy": {
     "message": "Comprar"
   },
diff --git a/app/_locales/es_419/messages.json b/app/_locales/es_419/messages.json
index 413624d20..71537e602 100644
--- a/app/_locales/es_419/messages.json
+++ b/app/_locales/es_419/messages.json
@@ -252,9 +252,6 @@
   "builContactList": {
     "message": "Cree su lista de contactos"
   },
-  "builtInCalifornia": {
-    "message": "MetaMask se diseñó y compiló en California."
-  },
   "buy": {
     "message": "Comprar"
   },
diff --git a/app/_locales/et/messages.json b/app/_locales/et/messages.json
index 4139c4a92..4e2a6a0a0 100644
--- a/app/_locales/et/messages.json
+++ b/app/_locales/et/messages.json
@@ -143,9 +143,6 @@
   "browserNotSupported": {
     "message": "Teie lehitsejat ei toetata..."
   },
-  "builtInCalifornia": {
-    "message": "MetaMask on projekteeritud ja loodud Californias."
-  },
   "buyWithWyre": {
     "message": "Ostke ETH-d Wyre'iga"
   },
diff --git a/app/_locales/fa/messages.json b/app/_locales/fa/messages.json
index a60b658cf..4a0b6a3dd 100644
--- a/app/_locales/fa/messages.json
+++ b/app/_locales/fa/messages.json
@@ -143,9 +143,6 @@
   "browserNotSupported": {
     "message": "مرورگر شما پشتیبانی نمیشود"
   },
-  "builtInCalifornia": {
-    "message": "MetaMask در کالیفورنیا طراحی و ساخته شده است."
-  },
   "buyWithWyre": {
     "message": "ETH را توسط Wyre خریداری نمایید"
   },
diff --git a/app/_locales/fi/messages.json b/app/_locales/fi/messages.json
index 79b779fbb..0cb3ea696 100644
--- a/app/_locales/fi/messages.json
+++ b/app/_locales/fi/messages.json
@@ -143,9 +143,6 @@
   "browserNotSupported": {
     "message": "Selaintasi ei tueta..."
   },
-  "builtInCalifornia": {
-    "message": "MetaMask on suunniteltu ja koottu Kaliforniassa."
-  },
   "buyWithWyre": {
     "message": "Osta ETH:ta Wyrella"
   },
diff --git a/app/_locales/fil/messages.json b/app/_locales/fil/messages.json
index be0fef29c..8dded66bb 100644
--- a/app/_locales/fil/messages.json
+++ b/app/_locales/fil/messages.json
@@ -128,9 +128,6 @@
   "browserNotSupported": {
     "message": "Hindi sinusuportahan ang iyong Browser..."
   },
-  "builtInCalifornia": {
-    "message": "Ang MetaMask ay dinisenyo at binuo sa California."
-  },
   "buyWithWyre": {
     "message": "Bumili ng ETH gamit ang Wyre"
   },
diff --git a/app/_locales/fr/messages.json b/app/_locales/fr/messages.json
index 77207d133..05ae8872d 100644
--- a/app/_locales/fr/messages.json
+++ b/app/_locales/fr/messages.json
@@ -137,9 +137,6 @@
   "browserNotSupported": {
     "message": "Votre navigateur internet n'est pas supporté..."
   },
-  "builtInCalifornia": {
-    "message": "MetaMask est designé et developpé en Californie."
-  },
   "buyWithWyre": {
     "message": "Acheter ETH avec Wyre"
   },
diff --git a/app/_locales/he/messages.json b/app/_locales/he/messages.json
index 72123870b..e80aafba6 100644
--- a/app/_locales/he/messages.json
+++ b/app/_locales/he/messages.json
@@ -143,9 +143,6 @@
   "browserNotSupported": {
     "message": "הדפדפן שלך אינו נתמך..."
   },
-  "builtInCalifornia": {
-    "message": "MetaMask תוכנן ונבנה בקליפורניה."
-  },
   "buyWithWyre": {
     "message": "רכישת את'ר עם Wyre"
   },
diff --git a/app/_locales/hi/messages.json b/app/_locales/hi/messages.json
index 7d57f515b..8065a890b 100644
--- a/app/_locales/hi/messages.json
+++ b/app/_locales/hi/messages.json
@@ -252,9 +252,6 @@
   "builContactList": {
     "message": "अपनी संपर्क सूची बनाएं"
   },
-  "builtInCalifornia": {
-    "message": "MetaMask को कैलिफोर्निया में डिज़ाइन और निर्मित किया गया है।"
-  },
   "buy": {
     "message": "खरीदें"
   },
diff --git a/app/_locales/hn/messages.json b/app/_locales/hn/messages.json
index f440c3ff9..6b5761c40 100644
--- a/app/_locales/hn/messages.json
+++ b/app/_locales/hn/messages.json
@@ -43,9 +43,6 @@
   "blockiesIdenticon": {
     "message": "ब्लॉकीज पहचान का उपयोग करें"
   },
-  "builtInCalifornia": {
-    "message": "मेटामास्क कैलिफ़ोर्निया में डिज़ाइन और बनाया गया है।"
-  },
   "cancel": {
     "message": "रद्द करें"
   },
diff --git a/app/_locales/hr/messages.json b/app/_locales/hr/messages.json
index bf02b3939..cc7991b96 100644
--- a/app/_locales/hr/messages.json
+++ b/app/_locales/hr/messages.json
@@ -143,9 +143,6 @@
   "browserNotSupported": {
     "message": "Vaš se preglednik ne podržava..."
   },
-  "builtInCalifornia": {
-    "message": "MetaMask je osmišljen i izrađen u Kaliforniji."
-  },
   "buyWithWyre": {
     "message": "Kupi ETH Wyerom"
   },
diff --git a/app/_locales/ht/messages.json b/app/_locales/ht/messages.json
index 2f750cd7d..4cd74e121 100644
--- a/app/_locales/ht/messages.json
+++ b/app/_locales/ht/messages.json
@@ -73,9 +73,6 @@
   "browserNotSupported": {
     "message": "Navigatè ou a pa sipòte..."
   },
-  "builtInCalifornia": {
-    "message": "MetaMask fèt e bati nan California."
-  },
   "cancel": {
     "message": "Anile"
   },
diff --git a/app/_locales/hu/messages.json b/app/_locales/hu/messages.json
index cb397cd69..085e93c3e 100644
--- a/app/_locales/hu/messages.json
+++ b/app/_locales/hu/messages.json
@@ -143,9 +143,6 @@
   "browserNotSupported": {
     "message": "Az ön böngészője nem támogatott..."
   },
-  "builtInCalifornia": {
-    "message": "A MetaMaskot Kaliforniában tervezték és hozták létre."
-  },
   "buyWithWyre": {
     "message": "Vásároljon ETH-t a Wyre-rel"
   },
diff --git a/app/_locales/id/messages.json b/app/_locales/id/messages.json
index b019c25b5..3c5e151bb 100644
--- a/app/_locales/id/messages.json
+++ b/app/_locales/id/messages.json
@@ -252,9 +252,6 @@
   "builContactList": {
     "message": "Buat daftar kontak Anda"
   },
-  "builtInCalifornia": {
-    "message": "MetaMask didesain dan didirikan di California."
-  },
   "buy": {
     "message": "Beli"
   },
diff --git a/app/_locales/it/messages.json b/app/_locales/it/messages.json
index 161086c29..975c8769b 100644
--- a/app/_locales/it/messages.json
+++ b/app/_locales/it/messages.json
@@ -217,9 +217,6 @@
   "browserNotSupported": {
     "message": "Il tuo Browser non è supportato..."
   },
-  "builtInCalifornia": {
-    "message": "MetaMask è progettato e realizzato in California."
-  },
   "buy": {
     "message": "Compra"
   },
diff --git a/app/_locales/ja/messages.json b/app/_locales/ja/messages.json
index 7ac44b231..5910dd531 100644
--- a/app/_locales/ja/messages.json
+++ b/app/_locales/ja/messages.json
@@ -252,9 +252,6 @@
   "builContactList": {
     "message": "連絡先リストを作成する"
   },
-  "builtInCalifornia": {
-    "message": "MetaMask はカリフォルニアで設計および作成されました。"
-  },
   "buy": {
     "message": "購入"
   },
diff --git a/app/_locales/kn/messages.json b/app/_locales/kn/messages.json
index cbe33d70e..964e1d489 100644
--- a/app/_locales/kn/messages.json
+++ b/app/_locales/kn/messages.json
@@ -143,9 +143,6 @@
   "browserNotSupported": {
     "message": "ನಿಮ್ಮ ಬ್ರೌಸರ್ ಬೆಂಬಲಿಸುತ್ತಿಲ್ಲ..."
   },
-  "builtInCalifornia": {
-    "message": "MetaMask ಅನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ ಮತ್ತು ಕ್ಯಾಲಿಫೋರ್ನಿಯಾದಲ್ಲಿ ನಿರ್ಮಿಸಲಾಗಿದೆ."
-  },
   "buyWithWyre": {
     "message": "Wyre ನೊಂದಿಗೆ ETH ಖರೀದಿಸಿ"
   },
diff --git a/app/_locales/ko/messages.json b/app/_locales/ko/messages.json
index e81d77b82..5e446b2ee 100644
--- a/app/_locales/ko/messages.json
+++ b/app/_locales/ko/messages.json
@@ -252,9 +252,6 @@
   "builContactList": {
     "message": "연락처 목록 작성하기"
   },
-  "builtInCalifornia": {
-    "message": "MetaMask는 캘리포니아에서 설계 및 제작됩니다."
-  },
   "buy": {
     "message": "구매"
   },
diff --git a/app/_locales/lt/messages.json b/app/_locales/lt/messages.json
index f18067844..1984ba7e6 100644
--- a/app/_locales/lt/messages.json
+++ b/app/_locales/lt/messages.json
@@ -143,9 +143,6 @@
   "browserNotSupported": {
     "message": "Jūsų naršyklė neatpažįstama..."
   },
-  "builtInCalifornia": {
-    "message": "„MetaMask“ suprojektuota ir įdiegta Kalifornijoje."
-  },
   "buyWithWyre": {
     "message": "Pirkti ETH su „Wyre“"
   },
diff --git a/app/_locales/lv/messages.json b/app/_locales/lv/messages.json
index 85848338a..974c3abb9 100644
--- a/app/_locales/lv/messages.json
+++ b/app/_locales/lv/messages.json
@@ -143,9 +143,6 @@
   "browserNotSupported": {
     "message": "Jūsu pārlūkprogramma netiek atbalstīta..."
   },
-  "builtInCalifornia": {
-    "message": "MetaMask ir izstrādāta un izveidota Kalifornijā."
-  },
   "buyWithWyre": {
     "message": "Pirkt ETH ar Wyre"
   },
diff --git a/app/_locales/ms/messages.json b/app/_locales/ms/messages.json
index 483925f9c..b2a48bacc 100644
--- a/app/_locales/ms/messages.json
+++ b/app/_locales/ms/messages.json
@@ -143,9 +143,6 @@
   "browserNotSupported": {
     "message": "Pelayar anda tidak disokong..."
   },
-  "builtInCalifornia": {
-    "message": "MetaMask direka dan dibina di California."
-  },
   "buyWithWyre": {
     "message": "Beli ETH dengan Wyre"
   },
diff --git a/app/_locales/nl/messages.json b/app/_locales/nl/messages.json
index 2366f8283..de1b19e96 100644
--- a/app/_locales/nl/messages.json
+++ b/app/_locales/nl/messages.json
@@ -40,9 +40,6 @@
   "blockiesIdenticon": {
     "message": "Gebruik Blockies Identicon"
   },
-  "builtInCalifornia": {
-    "message": "MetaMask is ontworpen en gebouwd in Californië."
-  },
   "cancel": {
     "message": "Annuleer"
   },
diff --git a/app/_locales/no/messages.json b/app/_locales/no/messages.json
index a6bba8253..0bfe2ef14 100644
--- a/app/_locales/no/messages.json
+++ b/app/_locales/no/messages.json
@@ -143,9 +143,6 @@
   "browserNotSupported": {
     "message": "Nettleseren din støttes ikke ..."
   },
-  "builtInCalifornia": {
-    "message": "MetaMask ble bygget og designet i California."
-  },
   "buyWithWyre": {
     "message": "Kjøp ETH med Wyre"
   },
diff --git a/app/_locales/ph/messages.json b/app/_locales/ph/messages.json
index 3a9141757..3eeb1ba5e 100644
--- a/app/_locales/ph/messages.json
+++ b/app/_locales/ph/messages.json
@@ -252,9 +252,6 @@
   "builContactList": {
     "message": "Buuin ang iyong listahan ng contact"
   },
-  "builtInCalifornia": {
-    "message": "Ang MetaMask ay idinisenyo at binuo sa California."
-  },
   "buy": {
     "message": "Bumili"
   },
diff --git a/app/_locales/pl/messages.json b/app/_locales/pl/messages.json
index e2f4db68c..fbcd93c1d 100644
--- a/app/_locales/pl/messages.json
+++ b/app/_locales/pl/messages.json
@@ -143,9 +143,6 @@
   "browserNotSupported": {
     "message": "Twoja przeglądarka nie jest obsługiwana..."
   },
-  "builtInCalifornia": {
-    "message": "MetaMask został zaprojektowany i stworzony w Kaliforni."
-  },
   "buyWithWyre": {
     "message": "Kup ETH poprzez Wyre"
   },
diff --git a/app/_locales/pt/messages.json b/app/_locales/pt/messages.json
index c9f598cba..e75fd618c 100644
--- a/app/_locales/pt/messages.json
+++ b/app/_locales/pt/messages.json
@@ -43,9 +43,6 @@
   "blockiesIdenticon": {
     "message": "Usar Blockies Identicon"
   },
-  "builtInCalifornia": {
-    "message": "MetaMask é desenhada e construída na California."
-  },
   "cancel": {
     "message": "Cancelar"
   },
diff --git a/app/_locales/pt_BR/messages.json b/app/_locales/pt_BR/messages.json
index f6d41ac24..7d3e47c90 100644
--- a/app/_locales/pt_BR/messages.json
+++ b/app/_locales/pt_BR/messages.json
@@ -252,9 +252,6 @@
   "builContactList": {
     "message": "Crie sua lista de contatos"
   },
-  "builtInCalifornia": {
-    "message": "O MetaMask é projetado e construído na Califórnia."
-  },
   "buy": {
     "message": "Comprar"
   },
diff --git a/app/_locales/ro/messages.json b/app/_locales/ro/messages.json
index 444ba049f..76a0cf529 100644
--- a/app/_locales/ro/messages.json
+++ b/app/_locales/ro/messages.json
@@ -143,9 +143,6 @@
   "browserNotSupported": {
     "message": "Browserul dvs. nu este compatibil..."
   },
-  "builtInCalifornia": {
-    "message": "MetaMask este concepută și creată în California."
-  },
   "buyWithWyre": {
     "message": "Cumpărați ETH cu Wyre"
   },
diff --git a/app/_locales/ru/messages.json b/app/_locales/ru/messages.json
index 02dfbd8bb..de01c705f 100644
--- a/app/_locales/ru/messages.json
+++ b/app/_locales/ru/messages.json
@@ -252,9 +252,6 @@
   "builContactList": {
     "message": "Создайте список контактов"
   },
-  "builtInCalifornia": {
-    "message": "MetaMask разработан и построен в Калифорнии."
-  },
   "buy": {
     "message": "Купить"
   },
diff --git a/app/_locales/sk/messages.json b/app/_locales/sk/messages.json
index e23dfb73e..360d89dbc 100644
--- a/app/_locales/sk/messages.json
+++ b/app/_locales/sk/messages.json
@@ -137,9 +137,6 @@
   "browserNotSupported": {
     "message": "Váš prehliadač nie je podporovaný..."
   },
-  "builtInCalifornia": {
-    "message": "MetaMask je navržen a vytvořen v Kalifornii."
-  },
   "buyWithWyre": {
     "message": "Kúpte ETH s Wyre"
   },
diff --git a/app/_locales/sl/messages.json b/app/_locales/sl/messages.json
index 47a5a1737..3a84787c5 100644
--- a/app/_locales/sl/messages.json
+++ b/app/_locales/sl/messages.json
@@ -143,9 +143,6 @@
   "browserNotSupported": {
     "message": "Vaš brskalnik ni podptrt ..."
   },
-  "builtInCalifornia": {
-    "message": "MetaMask je zasnovan in ustvarjen v Kaliforniji."
-  },
   "buyWithWyre": {
     "message": "Kupi ETH z Wyre"
   },
diff --git a/app/_locales/sr/messages.json b/app/_locales/sr/messages.json
index 7cbcdf175..a6d16b233 100644
--- a/app/_locales/sr/messages.json
+++ b/app/_locales/sr/messages.json
@@ -143,9 +143,6 @@
   "browserNotSupported": {
     "message": "Vaš pregledač nije podržan..."
   },
-  "builtInCalifornia": {
-    "message": "MetaMask je dizajniran i izgrađen u Kaliforniji."
-  },
   "buyWithWyre": {
     "message": "Kupite ETH preko servisa Wyre"
   },
diff --git a/app/_locales/sv/messages.json b/app/_locales/sv/messages.json
index bfa2e92f6..2e36636c6 100644
--- a/app/_locales/sv/messages.json
+++ b/app/_locales/sv/messages.json
@@ -143,9 +143,6 @@
   "browserNotSupported": {
     "message": "Din webbläsare stöds inte..."
   },
-  "builtInCalifornia": {
-    "message": "MetaMask är skapat och utformat i Kalifornien."
-  },
   "buyWithWyre": {
     "message": "Köp ETH med Wyre"
   },
diff --git a/app/_locales/sw/messages.json b/app/_locales/sw/messages.json
index f4d9acc5b..6f85051f2 100644
--- a/app/_locales/sw/messages.json
+++ b/app/_locales/sw/messages.json
@@ -140,9 +140,6 @@
   "browserNotSupported": {
     "message": "Kivinjari chaku hakiwezeshwi..."
   },
-  "builtInCalifornia": {
-    "message": "MetaMask imeundwa na kutengenezwa California."
-  },
   "buyWithWyre": {
     "message": "Nunua ETH kwa kutumia Wyre"
   },
diff --git a/app/_locales/ta/messages.json b/app/_locales/ta/messages.json
index 29a239a41..360ae15cd 100644
--- a/app/_locales/ta/messages.json
+++ b/app/_locales/ta/messages.json
@@ -55,9 +55,6 @@
   "blockiesIdenticon": {
     "message": "ப்ளாக்கிஸ் ஐடென்டிகோன் பயன்பாட்டு"
   },
-  "builtInCalifornia": {
-    "message": "மேடமஸ்க் வடிவமைக்கப்பட்டு கலிபோர்னியாவில் கட்டப்பட்டுள்ளது."
-  },
   "cancel": {
     "message": "ரத்து செய்"
   },
diff --git a/app/_locales/th/messages.json b/app/_locales/th/messages.json
index 324722400..037d7b80a 100644
--- a/app/_locales/th/messages.json
+++ b/app/_locales/th/messages.json
@@ -49,9 +49,6 @@
   "blockiesIdenticon": {
     "message": "ใช้งาน Blockies Identicon"
   },
-  "builtInCalifornia": {
-    "message": "MetaMask ออกแบบและพัฒนาที่แคลิฟอร์เนีย"
-  },
   "cancel": {
     "message": "ยกเลิก"
   },
diff --git a/app/_locales/tl/messages.json b/app/_locales/tl/messages.json
index caf6059fd..a2ddbee64 100644
--- a/app/_locales/tl/messages.json
+++ b/app/_locales/tl/messages.json
@@ -211,9 +211,6 @@
   "browserNotSupported": {
     "message": "Hindi sinusuportahan ang iyong Browser..."
   },
-  "builtInCalifornia": {
-    "message": "Ang MetaMask ay idinisenyo at binuo sa California."
-  },
   "buy": {
     "message": "Bilhin"
   },
diff --git a/app/_locales/tr/messages.json b/app/_locales/tr/messages.json
index d47b570ad..91e60a3a7 100644
--- a/app/_locales/tr/messages.json
+++ b/app/_locales/tr/messages.json
@@ -46,9 +46,6 @@
   "blockiesIdenticon": {
     "message": "Blockies Identicon kullan"
   },
-  "builtInCalifornia": {
-    "message": "MetaMask California'da tasarlandı ve yaratıldı"
-  },
   "cancel": {
     "message": "Vazgeç"
   },
diff --git a/app/_locales/uk/messages.json b/app/_locales/uk/messages.json
index 27766159a..736200897 100644
--- a/app/_locales/uk/messages.json
+++ b/app/_locales/uk/messages.json
@@ -143,9 +143,6 @@
   "browserNotSupported": {
     "message": "Ваш браузер не підтримується..."
   },
-  "builtInCalifornia": {
-    "message": "MetaMask розроблено й створено в Каліфорнії."
-  },
   "buyWithWyre": {
     "message": "Купити ETH через Wyre"
   },
diff --git a/app/_locales/vi/messages.json b/app/_locales/vi/messages.json
index c2955653b..e74ff8277 100644
--- a/app/_locales/vi/messages.json
+++ b/app/_locales/vi/messages.json
@@ -252,9 +252,6 @@
   "builContactList": {
     "message": "Xây dựng danh sách liên hệ của bạn"
   },
-  "builtInCalifornia": {
-    "message": "MetaMask được thiết kế và phát triển tại California."
-  },
   "buy": {
     "message": "Mua"
   },
diff --git a/app/_locales/zh_CN/messages.json b/app/_locales/zh_CN/messages.json
index cb1950b2c..0bc804c35 100644
--- a/app/_locales/zh_CN/messages.json
+++ b/app/_locales/zh_CN/messages.json
@@ -217,9 +217,6 @@
   "browserNotSupported": {
     "message": "您的浏览器不支持该功能……"
   },
-  "builtInCalifornia": {
-    "message": "MetaMask在加利福尼亚设计和制造。"
-  },
   "buy": {
     "message": "购买"
   },
diff --git a/app/_locales/zh_TW/messages.json b/app/_locales/zh_TW/messages.json
index bd95f859e..4df54a9db 100644
--- a/app/_locales/zh_TW/messages.json
+++ b/app/_locales/zh_TW/messages.json
@@ -149,9 +149,6 @@
   "browserNotSupported": {
     "message": "您的瀏覽器尚未支援..."
   },
-  "builtInCalifornia": {
-    "message": "MetaMask 是在加州設計製造"
-  },
   "buy": {
     "message": "買"
   },
diff --git a/ui/pages/settings/info-tab/info-tab.component.js b/ui/pages/settings/info-tab/info-tab.component.js
index be821a154..d601cbe74 100644
--- a/ui/pages/settings/info-tab/info-tab.component.js
+++ b/ui/pages/settings/info-tab/info-tab.component.js
@@ -104,7 +104,7 @@ export default class InfoTab extends PureComponent {
               </div>
             </div>
             <div className="info-tab__item">
-              <div className="info-tab__about">{t('builtInCalifornia')}</div>
+              <div className="info-tab__about">{t('builtAroundTheWorld')}</div>
             </div>
           </div>
           {this.renderInfoLinks()}

From 341b090857ea8ffada66c7abfa2d26a25017f894 Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Mon, 14 Jun 2021 19:30:52 -0700
Subject: [PATCH 004/141] Upgrading eth-ledger-bridge-keyring -> 0.6.0,
 eth-trezor-keyring -> 0.7.0 (#11290)

---
 package.json |  4 ++--
 yarn.lock    | 54 +++++++++++++++++++++++++++++++++++++++++++---------
 2 files changed, 47 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index f0c499a2b..c3f760577 100644
--- a/package.json
+++ b/package.json
@@ -98,7 +98,7 @@
     "@material-ui/core": "^4.11.0",
     "@metamask/contract-metadata": "^1.26.0",
     "@metamask/controllers": "^9.0.0",
-    "@metamask/eth-ledger-bridge-keyring": "^0.5.0",
+    "@metamask/eth-ledger-bridge-keyring": "^0.6.0",
     "@metamask/eth-token-tracker": "^3.0.1",
     "@metamask/etherscan-link": "^2.1.0",
     "@metamask/jazzicon": "^2.0.0",
@@ -134,7 +134,7 @@
     "eth-query": "^2.1.2",
     "eth-rpc-errors": "^4.0.2",
     "eth-sig-util": "^3.0.0",
-    "eth-trezor-keyring": "^0.6.0",
+    "eth-trezor-keyring": "^0.7.0",
     "ethereum-ens-network-map": "^1.0.2",
     "ethereumjs-abi": "^0.6.4",
     "ethereumjs-tx": "1.3.7",
diff --git a/yarn.lock b/yarn.lock
index c5537275a..20bc48aae 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1521,6 +1521,22 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@ethereumjs/common@^2.3.1":
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/@ethereumjs/common/-/common-2.3.1.tgz#d692e3aff5adb35dd587dd1e6caab69e0ed2fa0b"
+  integrity sha512-V8hrULExoq0H4HFs3cCmdRGbgmipmlNzak6Xg34nHYfQyqkSdrCuflvYjyWmsNpI8GtrcZhzifAbgX/1C1Cjwg==
+  dependencies:
+    crc-32 "^1.2.0"
+    ethereumjs-util "^7.0.10"
+
+"@ethereumjs/tx@^3.1.1", "@ethereumjs/tx@^3.1.4":
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/@ethereumjs/tx/-/tx-3.2.1.tgz#65f5f1c11541764f08377a94ba4b0dcbbd67739e"
+  integrity sha512-i9V39OtKvwWos1uVNZxdVhd7zFOyzFLjgt69CoiOY0EmXugS0HjO3uxpLBSglDKFMRriuGqw6ddKEv+RP1UNEw==
+  dependencies:
+    "@ethereumjs/common" "^2.3.1"
+    ethereumjs-util "^7.0.10"
+
 "@ethersproject/abi@5.0.0-beta.153":
   version "5.0.0-beta.153"
   resolved "https://registry.yarnpkg.com/@ethersproject/abi/-/abi-5.0.0-beta.153.tgz#43a37172b33794e4562999f6e2d555b7599a8eee"
@@ -2721,11 +2737,12 @@
   resolved "https://registry.yarnpkg.com/@metamask/eslint-config/-/eslint-config-6.0.0.tgz#ec53e8ab278073e882411ed89705bc7d06b78c81"
   integrity sha512-LyakGYGwM8UQOGhwWa+5erAI1hXuiTgf/y7USzOomX6H9KiuY09IAUYnPh7ToPG2sedD2F48UF1bUm8yvCoZOw==
 
-"@metamask/eth-ledger-bridge-keyring@^0.5.0":
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/@metamask/eth-ledger-bridge-keyring/-/eth-ledger-bridge-keyring-0.5.0.tgz#c1ee89819c493239290a940da6285e6844240383"
-  integrity sha512-p7dvnAQ6n9AFf7JoJFwNsdIKoX5poP0bBwrgmCA/mLAdb5Z+bBAnHMSbKOZrH7rEsj7jExdbmUiJLI5qKnV0zA==
+"@metamask/eth-ledger-bridge-keyring@^0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@metamask/eth-ledger-bridge-keyring/-/eth-ledger-bridge-keyring-0.6.0.tgz#2f1344eb76bf880c8cfbb92b9b64510920c7e335"
+  integrity sha512-eP0f8Q7o5K35wVinK2EjEw/gVY/pvzkAcbk49CwQEzGPKm6d+AAURJZ0o33/8gYGIrpq4bmWZhZzgyAbphgVLw==
   dependencies:
+    "@ethereumjs/tx" "^3.1.1"
     eth-sig-util "^2.0.0"
     ethereumjs-tx "^1.3.4"
     ethereumjs-util "^7.0.9"
@@ -8358,6 +8375,14 @@ cpy@^8.1.1:
     p-filter "^2.1.0"
     p-map "^3.0.0"
 
+crc-32@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/crc-32/-/crc-32-1.2.0.tgz#cb2db6e29b88508e32d9dd0ec1693e7b41a18208"
+  integrity sha512-1uBwHxF+Y/4yF5G48fwnKq6QsIXheor3ZLPT80yGBV1oEUwpPojlEhQbWKVw1VwcTQyMGHK1/XMmTjmlsmTTGA==
+  dependencies:
+    exit-on-epipe "~1.0.1"
+    printj "~1.1.0"
+
 crdts@~0.1.2:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/crdts/-/crdts-0.1.5.tgz#89413e8adfc3ab943300a890ee6392db5ba60c06"
@@ -10713,14 +10738,15 @@ eth-simple-keyring@^4.2.0:
     ethereumjs-wallet "^1.0.1"
     events "^1.1.1"
 
-eth-trezor-keyring@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/eth-trezor-keyring/-/eth-trezor-keyring-0.6.0.tgz#85192ab5d98be28512a58b0bc731e4e6a124ba27"
-  integrity sha512-10r2uYbrNdYlzgHy2VFEyoGmGw3YIBa21WDT365cTzIQ7C6ozAvfZ9t5YZkTVY2AQP5TVS41UZJdbj0R2DG2Lg==
+eth-trezor-keyring@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/eth-trezor-keyring/-/eth-trezor-keyring-0.7.0.tgz#99ebaae6783ae40347352b36f7cf19e3b818c12d"
+  integrity sha512-WSJ/n68qsMzrMyTgfKiF2/Ytn37hWrIwQrkjBt6Tmt/btQnrQkwG/7Fv/diOUJNCG0HNGWyxQpkvtBOnckboLQ==
   dependencies:
+    "@ethereumjs/tx" "^3.1.4"
     eth-sig-util "^1.4.2"
     ethereumjs-tx "^1.3.4"
-    ethereumjs-util "^5.1.5"
+    ethereumjs-util "^7.0.9"
     hdkey "0.8.0"
     trezor-connect "8.1.23-extended"
 
@@ -11393,6 +11419,11 @@ exit-hook@^1.0.0:
   resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
   integrity sha1-8FyiM7SMBdVP/wd2XfhQfpXAL/g=
 
+exit-on-epipe@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz#0bdd92e87d5285d267daa8171d0eb06159689692"
+  integrity sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw==
+
 exit@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
@@ -21012,6 +21043,11 @@ pretty-hrtime@^1.0.0, pretty-hrtime@^1.0.3:
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
   integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
 
+printj@~1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/printj/-/printj-1.1.2.tgz#d90deb2975a8b9f600fb3a1c94e3f4c53c78a222"
+  integrity sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ==
+
 priorityqueue@~0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/priorityqueue/-/priorityqueue-0.2.1.tgz#f57e623f20237f30c142d4cb45fafed9e7d51403"

From df6c6a46d76da2885c3235961f78794751592e55 Mon Sep 17 00:00:00 2001
From: Niranjana Binoy <43930900+NiranjanaBinoy@users.noreply.github.com>
Date: Mon, 14 Jun 2021 22:59:30 -0400
Subject: [PATCH 005/141] Minor spelling correction to buildContactList(#11286)

---
 app/_locales/en/messages.json                                   | 2 +-
 app/_locales/es/messages.json                                   | 2 +-
 app/_locales/es_419/messages.json                               | 2 +-
 app/_locales/hi/messages.json                                   | 2 +-
 app/_locales/id/messages.json                                   | 2 +-
 app/_locales/ja/messages.json                                   | 2 +-
 app/_locales/ko/messages.json                                   | 2 +-
 app/_locales/ph/messages.json                                   | 2 +-
 app/_locales/pt_BR/messages.json                                | 2 +-
 app/_locales/ru/messages.json                                   | 2 +-
 app/_locales/vi/messages.json                                   | 2 +-
 .../settings/contact-list-tab/contact-list-tab.component.js     | 2 +-
 12 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 642d08124..809016041 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -256,7 +256,7 @@
   "browserNotSupported": {
     "message": "Your Browser is not supported..."
   },
-  "builContactList": {
+  "buildContactList": {
     "message": "Build your contact list"
   },
   "builtAroundTheWorld": {
diff --git a/app/_locales/es/messages.json b/app/_locales/es/messages.json
index 7ae032178..58a592514 100644
--- a/app/_locales/es/messages.json
+++ b/app/_locales/es/messages.json
@@ -249,7 +249,7 @@
   "browserNotSupported": {
     "message": "El explorador no es compatible…"
   },
-  "builContactList": {
+  "buildContactList": {
     "message": "Cree su lista de contactos"
   },
   "buy": {
diff --git a/app/_locales/es_419/messages.json b/app/_locales/es_419/messages.json
index 71537e602..961836bd8 100644
--- a/app/_locales/es_419/messages.json
+++ b/app/_locales/es_419/messages.json
@@ -249,7 +249,7 @@
   "browserNotSupported": {
     "message": "El explorador no es compatible…"
   },
-  "builContactList": {
+  "buildContactList": {
     "message": "Cree su lista de contactos"
   },
   "buy": {
diff --git a/app/_locales/hi/messages.json b/app/_locales/hi/messages.json
index 8065a890b..b3a66b5c8 100644
--- a/app/_locales/hi/messages.json
+++ b/app/_locales/hi/messages.json
@@ -249,7 +249,7 @@
   "browserNotSupported": {
     "message": "आपका ब्राउज़र समर्थित नहीं है..."
   },
-  "builContactList": {
+  "buildContactList": {
     "message": "अपनी संपर्क सूची बनाएं"
   },
   "buy": {
diff --git a/app/_locales/id/messages.json b/app/_locales/id/messages.json
index 3c5e151bb..8ca4b680f 100644
--- a/app/_locales/id/messages.json
+++ b/app/_locales/id/messages.json
@@ -249,7 +249,7 @@
   "browserNotSupported": {
     "message": "Browser Anda tidak didukung..."
   },
-  "builContactList": {
+  "buildContactList": {
     "message": "Buat daftar kontak Anda"
   },
   "buy": {
diff --git a/app/_locales/ja/messages.json b/app/_locales/ja/messages.json
index 5910dd531..9ffc5b75f 100644
--- a/app/_locales/ja/messages.json
+++ b/app/_locales/ja/messages.json
@@ -249,7 +249,7 @@
   "browserNotSupported": {
     "message": "ご使用のブラウザーはサポートされていません..."
   },
-  "builContactList": {
+  "buildContactList": {
     "message": "連絡先リストを作成する"
   },
   "buy": {
diff --git a/app/_locales/ko/messages.json b/app/_locales/ko/messages.json
index 5e446b2ee..068dc1bf2 100644
--- a/app/_locales/ko/messages.json
+++ b/app/_locales/ko/messages.json
@@ -249,7 +249,7 @@
   "browserNotSupported": {
     "message": "지원되지 않는 브라우저입니다..."
   },
-  "builContactList": {
+  "buildContactList": {
     "message": "연락처 목록 작성하기"
   },
   "buy": {
diff --git a/app/_locales/ph/messages.json b/app/_locales/ph/messages.json
index 3eeb1ba5e..1caaf8875 100644
--- a/app/_locales/ph/messages.json
+++ b/app/_locales/ph/messages.json
@@ -249,7 +249,7 @@
   "browserNotSupported": {
     "message": "Hindi sinusuportahan ang iyong Browser..."
   },
-  "builContactList": {
+  "buildContactList": {
     "message": "Buuin ang iyong listahan ng contact"
   },
   "buy": {
diff --git a/app/_locales/pt_BR/messages.json b/app/_locales/pt_BR/messages.json
index 7d3e47c90..0fee19f91 100644
--- a/app/_locales/pt_BR/messages.json
+++ b/app/_locales/pt_BR/messages.json
@@ -249,7 +249,7 @@
   "browserNotSupported": {
     "message": "Seu navegador não é compatível..."
   },
-  "builContactList": {
+  "buildContactList": {
     "message": "Crie sua lista de contatos"
   },
   "buy": {
diff --git a/app/_locales/ru/messages.json b/app/_locales/ru/messages.json
index de01c705f..e72dcfc15 100644
--- a/app/_locales/ru/messages.json
+++ b/app/_locales/ru/messages.json
@@ -249,7 +249,7 @@
   "browserNotSupported": {
     "message": "Ваш браузер не поддерживается..."
   },
-  "builContactList": {
+  "buildContactList": {
     "message": "Создайте список контактов"
   },
   "buy": {
diff --git a/app/_locales/vi/messages.json b/app/_locales/vi/messages.json
index e74ff8277..18de04779 100644
--- a/app/_locales/vi/messages.json
+++ b/app/_locales/vi/messages.json
@@ -249,7 +249,7 @@
   "browserNotSupported": {
     "message": "Trình duyệt của bạn không được hỗ trợ..."
   },
-  "builContactList": {
+  "buildContactList": {
     "message": "Xây dựng danh sách liên hệ của bạn"
   },
   "buy": {
diff --git a/ui/pages/settings/contact-list-tab/contact-list-tab.component.js b/ui/pages/settings/contact-list-tab/contact-list-tab.component.js
index 1c8e132a0..c1fd60ea1 100644
--- a/ui/pages/settings/contact-list-tab/contact-list-tab.component.js
+++ b/ui/pages/settings/contact-list-tab/contact-list-tab.component.js
@@ -50,7 +50,7 @@ export default class ContactListTab extends Component {
       <div className="address-book__container">
         <div>
           <img src="./images/address-book.svg" alt="Address book icon" />
-          <h4 className="address-book__title">{t('builContactList')}</h4>
+          <h4 className="address-book__title">{t('buildContactList')}</h4>
           <p className="address-book__sub-title">
             {t('addFriendsAndAddresses')}
           </p>

From a8643af481e54d4df3f94a6285ce7136c6f90108 Mon Sep 17 00:00:00 2001
From: Alex Donesky <adonesky@gmail.com>
Date: Tue, 15 Jun 2021 09:17:42 -0500
Subject: [PATCH 006/141] patch gas price issue - add fallback gas price
 (#11239)

---
 .../confirm-transaction/confirm-transaction.duck.js  | 12 ++++++++++--
 ui/selectors/confirm-transaction.js                  | 12 ++++++++++--
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/ui/ducks/confirm-transaction/confirm-transaction.duck.js b/ui/ducks/confirm-transaction/confirm-transaction.duck.js
index 09e74a2e8..c02af582a 100644
--- a/ui/ducks/confirm-transaction/confirm-transaction.duck.js
+++ b/ui/ducks/confirm-transaction/confirm-transaction.duck.js
@@ -18,6 +18,7 @@ import {
 import { getTokenData, sumHexes } from '../../helpers/utils/transactions.util';
 
 import { conversionUtil } from '../../helpers/utils/conversion-util';
+import { getAveragePriceEstimateInHexWEI } from '../../selectors/custom-gas';
 
 // Actions
 const createActionType = (action) => `metamask/confirm-transaction/${action}`;
@@ -198,9 +199,16 @@ export function updateTxDataAndCalculate(txData) {
 
     dispatch(updateTxData(txData));
 
-    const {
-      txParams: { value = '0x0', gas: gasLimit = '0x0', gasPrice = '0x0' } = {},
+    const { txParams: { value = '0x0', gas: gasLimit = '0x0' } = {} } = txData;
+
+    // if the gas price from our infura endpoint is null or undefined
+    // use the metaswap average price estimation as a fallback
+    let {
+      txParams: { gasPrice },
     } = txData;
+    if (!gasPrice) {
+      gasPrice = getAveragePriceEstimateInHexWEI(state) || '0x0';
+    }
 
     const fiatTransactionAmount = getValueFromWeiHex({
       value,
diff --git a/ui/selectors/confirm-transaction.js b/ui/selectors/confirm-transaction.js
index 70982d1b1..8c8abc4e3 100644
--- a/ui/selectors/confirm-transaction.js
+++ b/ui/selectors/confirm-transaction.js
@@ -12,6 +12,7 @@ import {
 import { sumHexes } from '../helpers/utils/transactions.util';
 import { transactionMatchesNetwork } from '../../shared/modules/transaction.utils';
 import { getNativeCurrency } from '../ducks/metamask/metamask';
+import { getAveragePriceEstimateInHexWEI } from './custom-gas';
 import { getCurrentChainId, deprecatedGetCurrentNetworkId } from './selectors';
 
 const unapprovedTxsSelector = (state) => state.metamask.unapprovedTxs;
@@ -218,9 +219,16 @@ export const transactionFeeSelector = function (state, txData) {
   const conversionRate = conversionRateSelector(state);
   const nativeCurrency = getNativeCurrency(state);
 
-  const {
-    txParams: { value = '0x0', gas: gasLimit = '0x0', gasPrice = '0x0' } = {},
+  const { txParams: { value = '0x0', gas: gasLimit = '0x0' } = {} } = txData;
+
+  // if the gas price from our infura endpoint is null or undefined
+  // use the metaswap average price estimation as a fallback
+  let {
+    txParams: { gasPrice },
   } = txData;
+  if (!gasPrice) {
+    gasPrice = getAveragePriceEstimateInHexWEI(state) || '0x0';
+  }
 
   const fiatTransactionAmount = getValueFromWeiHex({
     value,

From c152a17a85820edf6453349198849ef977441c85 Mon Sep 17 00:00:00 2001
From: sooyoung <hyunsy822@gmail.com>
Date: Wed, 16 Jun 2021 01:00:47 +0900
Subject: [PATCH 007/141] Changed scss style to see token symbol (#11294)

* Changed scss style to see token symbol

* fix indentations
---
 .../app/asset-list-item/asset-list-item.scss      | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/ui/components/app/asset-list-item/asset-list-item.scss b/ui/components/app/asset-list-item/asset-list-item.scss
index 6ee0853a5..f46fe7928 100644
--- a/ui/components/app/asset-list-item/asset-list-item.scss
+++ b/ui/components/app/asset-list-item/asset-list-item.scss
@@ -10,10 +10,7 @@
     text-align: start;
 
     & h2 {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      max-width: 100%;
+      display: flex;
     }
 
     & span {
@@ -21,6 +18,16 @@
     }
   }
 
+  &__token-value {
+    flex: 1;
+    padding-right: 5px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    display: block;
+    overflow: hidden;
+  }
+
   &__chevron-right {
     color: $Grey-500;
   }

From 99d635afd17dfac34546b494ea823748f7bb97ce Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Tue, 15 Jun 2021 11:23:43 -0500
Subject: [PATCH 008/141] Fix community links in README (#11289)

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index cc546cd93..b05ac8625 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@ Hey! We are hiring JavaScript Engineers! [Apply here](https://boards.greenhouse.
 
 You can find the latest version of MetaMask on [our official website](https://metamask.io/). For help using MetaMask, visit our [User Support Site](https://metamask.zendesk.com/hc/en-us).
 
-For [general questions](https://metamask.zendesk.com/hc/en-us/community/topics/360000682532-General), [feature requests](https://metamask.zendesk.com/hc/en-us/community/topics/360000682552-Feature-Requests-Ideas), or [developer questions](https://metamask.zendesk.com/hc/en-us/community/topics/360001751291-Developer-Questions), visit our [Community Forum](https://metamask.zendesk.com/hc/en-us/community/topics).
+For [general questions](https://community.metamask.io/c/learn/26), [feature requests](https://community.metamask.io/c/feature-requests-ideas/13), or [developer questions](https://community.metamask.io/c/developer-questions/11), visit our [Community Forum](https://community.metamask.io/).
 
 MetaMask supports Firefox, Google Chrome, and Chromium-based browsers. We recommend using the latest available browser version.
 

From 24adadbce08d3d172e346f79e6310a12cb4b9a3f Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Tue, 15 Jun 2021 09:31:25 -0700
Subject: [PATCH 009/141] Fixing untranslated alt tag in ContactListTab
 component (#11293)

---
 app/_locales/en/messages.json                                  | 3 +++
 .../settings/contact-list-tab/contact-list-tab.component.js    | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 809016041..6b7739ed0 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -97,6 +97,9 @@
   "addTokens": {
     "message": "Add Tokens"
   },
+  "addressBookIcon": {
+    "message": "Address book icon"
+  },
   "advanced": {
     "message": "Advanced"
   },
diff --git a/ui/pages/settings/contact-list-tab/contact-list-tab.component.js b/ui/pages/settings/contact-list-tab/contact-list-tab.component.js
index c1fd60ea1..a0651b817 100644
--- a/ui/pages/settings/contact-list-tab/contact-list-tab.component.js
+++ b/ui/pages/settings/contact-list-tab/contact-list-tab.component.js
@@ -49,7 +49,7 @@ export default class ContactListTab extends Component {
     return (
       <div className="address-book__container">
         <div>
-          <img src="./images/address-book.svg" alt="Address book icon" />
+          <img src="./images/address-book.svg" alt={t('addressBookIcon')} />
           <h4 className="address-book__title">{t('buildContactList')}</h4>
           <p className="address-book__sub-title">
             {t('addFriendsAndAddresses')}

From feb989c12ba23104b22c719b9a2c2f0cea7ecde2 Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Tue, 15 Jun 2021 14:16:09 -0230
Subject: [PATCH 010/141] Start dapp directly from `metamask-ui.spec.js`
 (#11299)

The dapp is now started directly from the `metamask-ui.spec.js` test
module. This makes it easier to run independently, and brings it in-
line with our other E2E tests.

The `--no-timeouts` flag is now used as well, rather than setting the
timeout to `0` within the test. This also brings it in-line with our
other tests.

Mainly this was done to facilitate further refactors which will come in
later PRs.
---
 test/e2e/metamask-ui.spec.js | 28 +++++++++++++++++++++++++++-
 test/e2e/run-all.sh          |  8 +-------
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js
index b813a597d..e6dadd200 100644
--- a/test/e2e/metamask-ui.spec.js
+++ b/test/e2e/metamask-ui.spec.js
@@ -1,24 +1,42 @@
 const { strict: assert } = require('assert');
+const path = require('path');
 
 const enLocaleMessages = require('../../app/_locales/en/messages.json');
+const createStaticServer = require('../../development/create-static-server');
 const { tinyDelayMs, regularDelayMs, largeDelayMs } = require('./helpers');
 const { buildWebDriver } = require('./webdriver');
 const Ganache = require('./ganache');
 
 const ganacheServer = new Ganache();
+const dappPort = 8080;
 
 describe('MetaMask', function () {
   let driver;
+  let dappServer;
   let tokenAddress;
 
   const testSeedPhrase =
     'phrase upgrade clock rough situate wedding elder clever doctor stamp excess tent';
 
-  this.timeout(0);
   this.bail(true);
 
   before(async function () {
     await ganacheServer.start();
+    const dappDirectory = path.resolve(
+      __dirname,
+      '..',
+      '..',
+      'node_modules',
+      '@metamask',
+      'test-dapp',
+      'dist',
+    );
+    dappServer = createStaticServer(dappDirectory);
+    dappServer.listen(dappPort);
+    await new Promise((resolve, reject) => {
+      dappServer.on('listening', resolve);
+      dappServer.on('error', reject);
+    });
     const result = await buildWebDriver();
     driver = result.driver;
     await driver.navigate();
@@ -43,6 +61,14 @@ describe('MetaMask', function () {
   after(async function () {
     await ganacheServer.quit();
     await driver.quit();
+    await new Promise((resolve, reject) => {
+      dappServer.close((error) => {
+        if (error) {
+          return reject(error);
+        }
+        return resolve();
+      });
+    });
   });
 
   describe('Going through the first time flow', function () {
diff --git a/test/e2e/run-all.sh b/test/e2e/run-all.sh
index 18c3443c9..d038bedaa 100755
--- a/test/e2e/run-all.sh
+++ b/test/e2e/run-all.sh
@@ -28,10 +28,4 @@ do
   retry mocha --no-timeouts "${spec}"
 done
 
-retry concurrently --kill-others \
-  --names 'dapp,e2e' \
-  --prefix '[{time}][{name}]' \
-  --success first \
-  'yarn dapp' \
-  'mocha test/e2e/metamask-ui.spec'
-
+retry mocha --no-timeouts test/e2e/metamask-ui.spec

From f7c37cab51e73b93944c969620862cd4970c09e5 Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Tue, 15 Jun 2021 15:18:21 -0230
Subject: [PATCH 011/141] Enable Chrome E2E logs (#11295)

Chrome logs are now enabled for E2E tests when the 'ENABLE_CHROME_LOGS'
environment variable is set to anything other than `false`.

This was helpful to me in debugging Chrome crashes on CI, the ones with
the error "unknown error: DevToolsActivePort file doesn't exist". This
was the only way to discover the cause of the error. It's also useful
for discovering console errors from the background process or from the
UI.

It's disabled by default because it makes the test output quite noisy
and difficult to read.
---
 .../selenium-webdriver+4.0.0-alpha.7.patch    | 19 +++++++++++++++++++
 test/e2e/webdriver/chrome.js                  | 17 ++++++++++++++---
 2 files changed, 33 insertions(+), 3 deletions(-)
 create mode 100644 patches/selenium-webdriver+4.0.0-alpha.7.patch

diff --git a/patches/selenium-webdriver+4.0.0-alpha.7.patch b/patches/selenium-webdriver+4.0.0-alpha.7.patch
new file mode 100644
index 000000000..53144785b
--- /dev/null
+++ b/patches/selenium-webdriver+4.0.0-alpha.7.patch
@@ -0,0 +1,19 @@
+diff --git a/node_modules/selenium-webdriver/chromium.js b/node_modules/selenium-webdriver/chromium.js
+index d828ce5..87176f4 100644
+--- a/node_modules/selenium-webdriver/chromium.js
++++ b/node_modules/selenium-webdriver/chromium.js
+@@ -197,6 +197,14 @@ class ServiceBuilder extends remote.DriverService.Builder {
+     return this.addArguments('--log-path=' + path);
+   }
+ 
++  /**
++   * Enables Chrome logging.
++   * @returns {!ServiceBuilder} A self reference.
++   */
++  enableChromeLogging() {
++    return this.addArguments('--enable-chrome-logs');
++  }
++
+   /**
+    * Enables verbose logging.
+    * @return {!ServiceBuilder} A self reference.
diff --git a/test/e2e/webdriver/chrome.js b/test/e2e/webdriver/chrome.js
index e0bb65626..bf3c2d023 100644
--- a/test/e2e/webdriver/chrome.js
+++ b/test/e2e/webdriver/chrome.js
@@ -14,10 +14,21 @@ class ChromeDriver {
     const builder = new Builder()
       .forBrowser('chrome')
       .setChromeOptions(options);
-    if (port) {
-      const service = new chrome.ServiceBuilder().setPort(port);
-      builder.setChromeService(service);
+    const service = new chrome.ServiceBuilder();
+
+    // Enables Chrome logging.
+    // Especially useful for discovering why Chrome has crashed, but can also
+    // be useful for revealing console errors (from the page or background).
+    if (
+      process.env.ENABLE_CHROME_LOGGING &&
+      process.env.ENABLE_CHROME_LOGGING !== 'false'
+    ) {
+      service.setStdio('inherit').enableChromeLogging();
     }
+    if (port) {
+      service.setPort(port);
+    }
+    builder.setChromeService(service);
     const driver = builder.build();
     const chromeDriver = new ChromeDriver(driver);
     const extensionId = await chromeDriver.getExtensionIdByName('MetaMask');

From 7535d634666cbe5d3992e5d6281ead5c54b5b364 Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Tue, 15 Jun 2021 15:21:25 -0230
Subject: [PATCH 012/141] Add `run-e2e-test.js` script (#11301)

This script makes it easier to run an individual E2E test. In the past
I've run individual scripts by editing `run-all.sh` manually, but now
that can be done more easily with this script. It also allows setting
the number of retries to use and the browser to use from the CLI.

This script has been added as an npm script as well, called
'test:e2e:single'.

The `run-all.sh` script was rewritten in JavaScript to make it easier
to pass through a `--retries` argument.

The default number of retries has been set to zero to make local
testing easier. It has been set to 2 on CI.

This was mainly done to consolidate the code used to run an E2E test in
one place, to make later improvements easier.
---
 .circleci/config.yml               |  8 ++--
 development/lib/exit-with-error.js | 16 +++++++
 development/lib/retry.js           | 25 ++++++++++
 package.json                       | 12 +++--
 test/e2e/run-all.js                | 57 +++++++++++++++++++++++
 test/e2e/run-all.sh                | 24 ++--------
 test/e2e/run-e2e-test.js           | 73 ++++++++++++++++++++++++++++++
 7 files changed, 186 insertions(+), 29 deletions(-)
 create mode 100644 development/lib/exit-with-error.js
 create mode 100644 development/lib/retry.js
 create mode 100644 test/e2e/run-all.js
 create mode 100644 test/e2e/run-e2e-test.js

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 6648b608d..27c4c8144 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -343,7 +343,7 @@ jobs:
           command: |
             if .circleci/scripts/test-run-e2e.sh
             then
-              yarn test:e2e:chrome
+              yarn test:e2e:chrome --retries 2
             fi
           no_output_timeout: 20m
       - store_artifacts:
@@ -370,7 +370,7 @@ jobs:
           command: |
             if .circleci/scripts/test-run-e2e.sh
             then
-              yarn test:e2e:chrome:metrics
+              yarn test:e2e:chrome:metrics --retries 2
             fi
           no_output_timeout: 20m
       - store_artifacts:
@@ -397,7 +397,7 @@ jobs:
           command: |
             if .circleci/scripts/test-run-e2e.sh
             then
-              yarn test:e2e:firefox
+              yarn test:e2e:firefox --retries 2
             fi
           no_output_timeout: 20m
       - store_artifacts:
@@ -424,7 +424,7 @@ jobs:
           command: |
             if .circleci/scripts/test-run-e2e.sh
             then
-              yarn test:e2e:firefox:metrics
+              yarn test:e2e:firefox:metrics --retries 2
             fi
           no_output_timeout: 20m
       - store_artifacts:
diff --git a/development/lib/exit-with-error.js b/development/lib/exit-with-error.js
new file mode 100644
index 000000000..1ef855887
--- /dev/null
+++ b/development/lib/exit-with-error.js
@@ -0,0 +1,16 @@
+/**
+ * Exit the process with an error message.
+ *
+ * Note that this should be called before the process ends, but it will not
+ * itself end the process. This is because the Node.js documentation strongly
+ * advises against calling `process.exit` directly.
+ *
+ * @param {string} errorMessage - The error message that is causing the non-
+ *   zero exit code.
+ */
+function exitWithError(errorMessage) {
+  console.error(errorMessage);
+  process.exitCode = 1;
+}
+
+module.exports = { exitWithError };
diff --git a/development/lib/retry.js b/development/lib/retry.js
new file mode 100644
index 000000000..20783aa32
--- /dev/null
+++ b/development/lib/retry.js
@@ -0,0 +1,25 @@
+const { exitWithError } = require('./exit-with-error');
+
+/**
+ * Run the given function, retrying it upon failure until reaching the
+ * specified number of retries.
+ *
+ * @param {number} retries - The number of retries upon failure to attempt.
+ * @param {function} functionToRetry - The function that will be retried upon failure.
+ */
+async function retry(retries, functionToRetry) {
+  let attempts = 0;
+  while (attempts <= retries) {
+    try {
+      await functionToRetry();
+      return;
+    } catch (error) {
+      console.error(error);
+    } finally {
+      attempts += 1;
+    }
+  }
+  exitWithError('Retry limit reached');
+}
+
+module.exports = { retry };
diff --git a/package.json b/package.json
index c3f760577..bd925d338 100644
--- a/package.json
+++ b/package.json
@@ -32,11 +32,12 @@
     "test:unit:lax": "mocha --exit --require test/env.js --require test/setup.js --ignore './app/scripts/controllers/permissions/*.test.js' --recursive './{app,shared}/**/*.test.js'",
     "test:unit:strict": "mocha --exit --require test/env.js --require test/setup.js --recursive './app/scripts/controllers/permissions/*.test.js'",
     "test:unit:path": "mocha --exit --require test/env.js --require test/setup.js --recursive",
-    "test:e2e:chrome": "SELENIUM_BROWSER=chrome test/e2e/run-all.sh",
-    "test:e2e:chrome:metrics": "SELENIUM_BROWSER=chrome mocha test/e2e/metrics.spec.js",
-    "test:e2e:firefox": "SELENIUM_BROWSER=firefox test/e2e/run-all.sh",
-    "test:e2e:firefox:metrics": "SELENIUM_BROWSER=firefox mocha test/e2e/metrics.spec.js",
+    "test:e2e:chrome": "SELENIUM_BROWSER=chrome node test/e2e/run-all.js",
+    "test:e2e:chrome:metrics": "SELENIUM_BROWSER=chrome node test/e2e/run-e2e-test.js test/e2e/metrics.spec.js",
+    "test:e2e:firefox": "SELENIUM_BROWSER=firefox node test/e2e/run-all.js",
+    "test:e2e:firefox:metrics": "SELENIUM_BROWSER=firefox node test/e2e/run-e2e-test.js test/e2e/metrics.spec.js",
     "test:coverage": "nyc --silent --check-coverage yarn test:unit:strict && nyc --silent --no-clean yarn test:unit:lax && nyc report --reporter=text --reporter=html",
+    "test:e2e:single": "node test/e2e/run-e2e-test.js",
     "test:coverage:jest": "jest --coverage --maxWorkers=2",
     "test:coverage:strict": "nyc --check-coverage yarn test:unit:strict",
     "test:coverage:path": "nyc --check-coverage yarn test:unit:path",
@@ -312,7 +313,8 @@
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
     "watchify": "^3.11.1",
-    "webpack": "^4.41.6"
+    "webpack": "^4.41.6",
+    "yargs": "^17.0.1"
   },
   "engines": {
     "node": "^14.15.1",
diff --git a/test/e2e/run-all.js b/test/e2e/run-all.js
new file mode 100644
index 000000000..a73021bd4
--- /dev/null
+++ b/test/e2e/run-all.js
@@ -0,0 +1,57 @@
+const path = require('path');
+const { promises: fs } = require('fs');
+const yargs = require('yargs/yargs');
+const { hideBin } = require('yargs/helpers');
+const { runInShell } = require('../../development/lib/run-command');
+const { exitWithError } = require('../../development/lib/exit-with-error');
+
+async function main() {
+  const { argv } = yargs(hideBin(process.argv))
+    .usage(
+      '$0 [options]',
+      'Run all E2E tests, with a variable number of retries.',
+      (_yargs) =>
+        _yargs
+          .option('browser', {
+            description: `Set the browser used; either 'chrome' or 'firefox'.`,
+            type: 'string',
+            choices: ['chrome', 'firefox'],
+          })
+          .option('retries', {
+            description:
+              'Set how many times the test should be retried upon failure.',
+            type: 'number',
+          }),
+    )
+    .strict()
+    .help('help');
+
+  const { browser, retries } = argv;
+
+  const testDir = path.join(__dirname, 'tests');
+  const metamaskUiTest = path.join(__dirname, 'metamask-ui.spec.js');
+
+  const testFilenames = await fs.readdir(testDir);
+  const testPaths = testFilenames.map((filename) =>
+    path.join(testDir, filename),
+  );
+  const allE2eTestPaths = [...testPaths, metamaskUiTest];
+
+  const runE2eTestPath = path.join(__dirname, 'run-e2e-test.js');
+
+  const args = [runE2eTestPath];
+  if (browser) {
+    args.push('--browser', browser);
+  }
+  if (retries) {
+    args.push('--retries', retries);
+  }
+
+  for (const testPath of allE2eTestPaths) {
+    await runInShell('node', [...args, testPath]);
+  }
+}
+
+main().catch((error) => {
+  exitWithError(error);
+});
diff --git a/test/e2e/run-all.sh b/test/e2e/run-all.sh
index d038bedaa..88cc695d8 100755
--- a/test/e2e/run-all.sh
+++ b/test/e2e/run-all.sh
@@ -5,27 +5,11 @@ set -e
 set -u
 set -o pipefail
 
-retry () {
-  retry=0
-  limit="${METAMASK_E2E_RETRY_LIMIT:-3}"
-  while [[ $retry -lt $limit ]]
-  do
-    "$@" && break
-    retry=$(( retry + 1 ))
-    sleep 1
-  done
+readonly __DIR__=$( cd "${BASH_SOURCE[0]%/*}" && pwd )
 
-  if [[ $retry == "$limit" ]]
-  then
-    exit 1
-  fi
-}
-
-export PATH="$PATH:./node_modules/.bin"
-
-for spec in test/e2e/tests/*.spec.js
+for spec in "${__DIR__}"/tests/*.spec.js
 do
-  retry mocha --no-timeouts "${spec}"
+  node "${__DIR__}/run-e2e-test.js" "${spec}"
 done
 
-retry mocha --no-timeouts test/e2e/metamask-ui.spec
+node "${__DIR__}/run-e2e-test.js" "${__DIR__}/metamask-ui.spec.js"
diff --git a/test/e2e/run-e2e-test.js b/test/e2e/run-e2e-test.js
new file mode 100644
index 000000000..b9b869fe8
--- /dev/null
+++ b/test/e2e/run-e2e-test.js
@@ -0,0 +1,73 @@
+const { promises: fs } = require('fs');
+const yargs = require('yargs/yargs');
+const { hideBin } = require('yargs/helpers');
+const { runInShell } = require('../../development/lib/run-command');
+const { exitWithError } = require('../../development/lib/exit-with-error');
+const { retry } = require('../../development/lib/retry');
+
+async function main() {
+  const { argv } = yargs(hideBin(process.argv))
+    .usage(
+      '$0 [options] <e2e-test-path>',
+      'Run a single E2E test, with a variable number of retries.',
+      (_yargs) =>
+        _yargs
+          .option('browser', {
+            default: process.env.SELENIUM_BROWSER,
+            description: `Set the browser used; either 'chrome' or 'firefox'.`,
+            type: 'string',
+            choices: ['chrome', 'firefox'],
+          })
+          .option('retries', {
+            default: 0,
+            description:
+              'Set how many times the test should be retried upon failure.',
+            type: 'number',
+          })
+          .positional('e2e-test-path', {
+            describe: 'The path for the E2E test to run.',
+            type: 'string',
+            normalize: true,
+          }),
+    )
+    .strict()
+    .help('help');
+
+  const { browser, e2eTestPath, retries } = argv;
+
+  if (!browser) {
+    exitWithError(
+      `"The browser must be set, via the '--browser' flag or the SELENIUM_BROWSER environment variable`,
+    );
+    return;
+  } else if (browser !== process.env.SELENIUM_BROWSER) {
+    process.env.SELENIUM_BROWSER = browser;
+  }
+
+  try {
+    const stat = await fs.stat(e2eTestPath);
+    if (!stat.isFile()) {
+      exitWithError('Test path must be a file');
+      return;
+    }
+  } catch (error) {
+    if (error.code === 'ENOENT') {
+      exitWithError('Test path specified does not exist');
+      return;
+    } else if (error.code === 'EACCES') {
+      exitWithError(
+        'Access to test path is forbidden by file access permissions',
+      );
+      return;
+    }
+    throw error;
+  }
+
+  await retry(retries, async () => {
+    await runInShell('yarn', ['mocha', '--no-timeouts', e2eTestPath]);
+  });
+}
+
+main().catch((error) => {
+  exitWithError(error);
+});

From be98e05c581b53ca930d0c1a46360c1e2102c6a3 Mon Sep 17 00:00:00 2001
From: Alex Donesky <adonesky@gmail.com>
Date: Tue, 15 Jun 2021 13:17:38 -0500
Subject: [PATCH 013/141] patch breaking change in signTypeData param
 validation (#11309)

---
 app/scripts/lib/typed-message-manager.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/scripts/lib/typed-message-manager.js b/app/scripts/lib/typed-message-manager.js
index 8e205520b..33bc80dd9 100644
--- a/app/scripts/lib/typed-message-manager.js
+++ b/app/scripts/lib/typed-message-manager.js
@@ -1,5 +1,5 @@
 import EventEmitter from 'events';
-import { strict as assert } from 'assert';
+import assert from 'assert';
 import { ObservableStore } from '@metamask/obs-store';
 import { ethErrors } from 'eth-rpc-errors';
 import { typedSignatureHash, TYPED_MESSAGE_SCHEMA } from 'eth-sig-util';
@@ -177,7 +177,7 @@ export default class TypedMessageManager extends EventEmitter {
         break;
       case 'V3':
       case 'V4': {
-        assert.equal(
+        assert.strictEqual(
           typeof params.data,
           'string',
           '"params.data" must be a string.',
@@ -191,7 +191,7 @@ export default class TypedMessageManager extends EventEmitter {
           data.primaryType in data.types,
           `Primary type of "${data.primaryType}" has no type definition.`,
         );
-        assert.equal(
+        assert.strictEqual(
           validation.errors.length,
           0,
           'Signing data must conform to EIP-712 schema. See https://git.io/fNtcx.',

From d260b81cd53f06bff3942a554ba44635888255a7 Mon Sep 17 00:00:00 2001
From: Etienne Dusseault <etienne.dusseault@gmail.com>
Date: Wed, 16 Jun 2021 05:20:15 +0800
Subject: [PATCH 014/141] Add confirm-deploy-contract component to Storybook
 (#11211)

* confirm deploy contract

* use downloaded image
---
 .storybook/test-data.js                       |   4 +-
 app/images/logo.png                           | Bin 0 -> 3671 bytes
 .../confirm-deploy-contract.stories.js        |  57 ++++++++++++++++++
 3 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 app/images/logo.png
 create mode 100644 ui/pages/confirm-deploy-contract/confirm-deploy-contract.stories.js

diff --git a/.storybook/test-data.js b/.storybook/test-data.js
index 32c24690f..441e8405a 100644
--- a/.storybook/test-data.js
+++ b/.storybook/test-data.js
@@ -261,7 +261,7 @@ const state = {
       }
     },
     "assetImages": {
-      "0xad6d458402f60fd3bd25163575031acdce07538d": "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xaD6D458402F60fD3Bd25163575031ACDce07538D/logo.png"
+      "0xad6d458402f60fd3bd25163575031acdce07538d": "./images/logo.png"
     },
     "hiddenTokens": [],
     "suggestedTokens": {},
@@ -272,7 +272,7 @@ const state = {
     "ipfsGateway": "dweb.link",
     "infuraBlocked": false,
     "migratedPrivacyMode": false,
-    "selectedAddress": "0x64a845a5b02460acf8a3d84503b0d68d028b4bb4",
+    "selectedAddress": "0x9d0ba4ddac06032527b140912ec808ab9451b788",
     "metaMetricsId": "0xc2377d11fec1c3b7dd88c4854240ee5e3ed0d9f63b00456d98d80320337b827f",
     "conversionDate": 1620710825.03,
     "conversionRate": 3910.28,
diff --git a/app/images/logo.png b/app/images/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..cd87ccb43b8b4077274940f337dbbbedffa6a685
GIT binary patch
literal 3671
zcmW+(c|26z8^1FQ;~LB`F-T^tm&Bm5CB}>`VeX{##$+goS4AYRt!XTcBuW`=mWgaX
zYb7Ze(}p%uudPC<kR`H&@VnkW&gb0oe810gzUMs8=X0Nv%JguS1JytP0OVX<7%Tul
zVUR(@N+A}l_1aa)BopTHR|Ei1EY}9gG24`b7*P={X9uA2_4*NHAsIw-rvX4shU_1I
z#9eO8l|l20MvZ@TKeszb<N4I;{gWW^fU4U@?6@UkH1p0wqv2cUunhHmxbbHpuzGe;
zd7D%NH5_yF+(u5|W+ycz_cEB;Tf&vJz&A^k5ZYR>ghUK$T-GdN+v?-%{u4K1gC_3J
zU;n<%q~9~Z;p`UEUXwQ;e*Kw99ewkVD9h#Otco(utu8vh=v_{52PAbBRWHf)E%hyL
zhXHhCf4nQHmkio-pM@My?_J&i13aQ!-I9h7NGj3GJGSZr@UjxRyQN@2{LbXsJ%zeO
zIUyifW?W$xssq~Rf41D$Ia;NJAv583ixC(EGCY6qM0t}3k!yeV!Ng7?mpl9Ff%*7<
zQ0T*_XVMuc>|WygTk)0l2=)|y>53BBR#e&`AwoO<o5Ego-AF~_>%aYYjc|Q`od`mr
zRxUJ{BXYaqK3;)<%*E?A>a~7K7@#!+-@%#tTL|P2uHo%rYjC@QdMcXhG#?)xt0pA`
z$XoVnYJ<Q;>soZ6v_!eslgvkRWv&ysxep&sAF=v1oA*NWe05{4OOwxO2(Sv4Ot?Sm
z-eVJIwlI6@U{`Mw-(>X5$$#+}vb3$n`lV@#>i(D`(^W@&!r>Hwuaf5Qn!-rVSFw6l
zaUv$-nCH?m+jB8|U;B^Ov%Lq(n>GQxZ#5Mjt<Hq2M&~aFNiS+Yt;qP+(t65P$2d)U
z<a;4-r^a~U!a%p|nZT20ih<?%yVj2NjQ_;AE5BUM8~f`dD`ED-wbl%|$#1`xjuz)x
z)t`reU4_MoLy1o`${Uu>_;|`z+6i?)?&e(i8PfwMb4RQx#y^zEVKLU-O(UMR&&fA4
z^k@B^R~aj+gtP3cXCkXjQfY+Z#6ydDKSs}-XP{^?Q9X7;FS|Zv9-*rg;nY;U?ILwR
z?2ahMg@JF{MXRorntK|e_mM%YQ~AcWz_;YFe?~9Wr$D0EUD7*mtqw(ntI&u8TRMvq
z_xScX;xW;sZJji8TZ4y|Gw17hkjTcGQ??k{9y-}D`sJO05I8pc&`O=!GpCU6_5dpc
zz6W|=%4iIOy11>I;~67jW5gx6Q9ftq+fJVB8bN=Z701k=&$0U)B(gHTA-}JKo%D*2
zzCJiQl7D5qA8;oQB!!BG)>g09_~j!b1JAEzsHsw~6t1$PD&pNj8AMLSjNH!F5zdQR
zc&g+4?(Y?U+AlyN>#c0q_*(jZUfooVS?e>lWPb;C<M0Tl|Cv(r6OLhHc6{{Eg_%IJ
ztpkPJwjN7_Q&)9V8!S2ZN<yzQwAb-nK<cV7m$sN=YOAq#I|AQgGyI4zf>Vb&(In=K
zjdEPTizTg)aAG=^Y35f6366M9lj=fdd#87&>7LD1$=8Xo{@o);F!3YR8|L%~7c}>*
z>{#l}d6$7@qCKQPmM$iCHTYV_-=6DvU!~WSt8Y(>6h(&pf<2_!Ib9Zd5kJ06Kj_e9
zCC^+qXk?~kkGdtFW2q5Y)y8J1B_H;EjcwQNN7A(WZd!dTi~qS39cfUA%5sfim1tE5
z6GKd4`;!jp)GKvC9}T_~xZey5+OG-Q8()`ySrVW^2y7~`{gr;fMeFF+fIW++SaaaF
z;l|`yyN_Ce{-vB8suh1nm5qdXJ4&fo;@4a6-YWBxo#E3<#F>T&9Z}?B&eYe--#a@|
zWd)j+S9={l*ci0@CZMh!oZL&szBixcA2$OJm}+kQyrB~6bM^%Fwnv8kPAym&bF<LN
zPN22tSoFEsMf%47TwpadR197d)K9G6>LER6KJ|#dZ>D1M5v3|&a$<y>eUnGNzmo7Q
zbJ*A+Px5lnt^OjsEq-<IDCskS#;jcvckj|dpixhT!rvFEfBuOZ6ccFFnRp3Y&Ihk=
z8^?<iZc#~cM$4yP)_i&J9nKv)JH6trU!OEYjW3E<U0vFe@HE!1@l@Q?;}qOVfM_VA
zHj2>MzeGKG{xIqD!o2LCW^Suz;6oGP><i9C>XW2q_3QF~PRtVmYb-SSnkZ%a1;3{#
zshTm&0X?am{@rz-0}3>)UoZC7NB3}_q-{{H*Nv4>Do&&l@23q9voB7GSg8Ud<!+P4
zq|H+aPDwXg*o@~UIq3ppJ)H8j7{@E~<|(BmCXZTY{|y#%^eZ8HF#fFNrlEv&@oFi~
z0<i2kSLW5so%SEvZ69Ff)aNsS+ZF&;9y4F<x_rAwRn?tIL$GuR4vbm4KqVCwOEi9J
z8v({=8q$WhgCQ%+W-Gt(T|&8zdGk?ja9_J4>X7hMSY-J<s3i68j--NZJ?jGF?X(4%
z?J~BGQL&vh^AIFvs#QWaeHQ=OWpRp6RKhrtz^7c9#vT1CQ|}B~%j+RX?y(XbR~qwV
z1aKTVqymQ$FUgli`nP5pT6jo9^iOQY6wFkUO7Xg1D4~Z~PUjM5%IB@$>+8OyT$a*m
zSoEa*9U~Jw`O{zygx-HTq5t(~i?&9iiST-sm^h}p?|?`$YkEv;M+Q#|mtHSCXBfHo
z{)m$>pTsidINU|<qSaXV?hWzkNT%ULx!d^kx(hX?GBT4vNpiL9Cp)X|SVXaMh~1fI
zJ5izLea7NAq8FK77AkrYBwgJa`hXuI%-{A%xkB^X@RF)3wRw;ExK>#jZ<>lj?&8xM
z?6p@jJC;Ij=5Ldc@V+#th7?UXn=uPB&nuLYsLi`8q6kq8S|Gh_1@js7kPc&)vy*I*
z<EA{%wyLQ<D3bKs++-rIgm${9WM}VB`*+^_&@s;ENI-LQ)7wvN5Y#uP7$aj4Yo{%t
z_xsSOvA7q4e8ib@Inj37aa&HP_(v|a%gNCfZ{TivKe_XuIMMur3j<%vPC^u9(aYQf
zPl-}Hu^qWXu2+>{myt{)#jMyRhf-NL4{7X`gv<$#wPfru67=>Pr+zSA$vUM$9qHN=
zZf)Q4;ViFBoUfn46K6ik3;!ZB2XgC4m@PE|NDH?Zmu(|0vOVfVn<Yub>y;Nv9MwUm
ze@N$DC9xb`Ny2%%;orx;L;`odM-ksW$=vbjzEQ_3AM+I-D-GawgdG?X;G!$INcBAy
zkGax`YFD)rQfX(r76Ui!>USx6!=6psg%EE{8G?q5$~T5r=MNvZwtTZ6)zbQ4t(wxx
zv&c9_NwP_~_r=EUQ}H*)HheS$rl+=oqoTXBwFibaqVps6JJT8ymR(i1-`jOG{r*Bx
zH8=PZVwzo1?3wP;IKD8aFDZJ-<0Ca=AH+-LHT>yFOhV;2GGQh%{S~&BqQToXotg%~
zX3z}Wk>@m=I@taSak6c8q6L%c*xk9?>U=i>6QDJCMMK-~@}zJ4J^-KW8k+^-rMS>$
zG7f-qoF0oZL5eoGiCXB;!go-|mEsMBREar7ECJ5J_}d@mJ4koCk#!ga^dwXP8MH!p
zSiXY?u9Tds4YD~dm^?!A25KQMgYS^h?IyBd6aY!6?GzB>?}G8eC!<XZc?x`oW)iFU
z1fxK5On1Oc$W#;q-h^bu8UZ(r@6d{s@TC)RNF)IsLq~Y)7|rAquP_u`0?-YS->O$q
zqhzQf(U3vnXbYL9VxSL?kv&X8n97W1MeD-1&e^z9<`yC6!k5YTl)j9T^>8(gZs?T`
z?d3O0mNAG%jwI$fA*aR&hb!eM!qvXYQp<Qn>S@T5?6cRbkSD`vrXUC!4#RZ`;jO{}
zvY2Z|z&I16E+s>j=P2vi?1}4(>4wW^EmFK75dO(cP&JZuBPK)94##Ze^Op3wgdOI>
z0m7Ujgoc0O{OzmwyfY+LfeNE}R}$)@7Pz6anDF>}lv$yJF@pkF7g~pnN1!8lkYvF8
zaD;D~lQZAJzS}Kdi9w+zp>9(^RDetJ6@0S2X`zD+gTld;wu3NsJ>77#HpnqKEyX|?
zh`Bgeq%)_;WT51*5`6S6f0uPzh1@z4D>)V7IN?ggbRu=*oT5Jk9LD-%rD6N$2y_}E
ztE70XXoD^3l*|2mbb~mv&5wa%A21oz7jkp)Qmc5(%(=!SKRz0yk^az#Oj3$h0vUvm
zz3&k)mw1%R5BTUEkN1n+8K@#H+yn)LG!O`nAvI^VX)sXFsD;NRU@nX+9djmf*2l^`
zAYi<B)b2DW-)u~Gj6q}?h&h@<ZkuUgtt`ylLSprthD3(A(lUguF{k)m3#?Z3FOi42
zcS)?>iI6A+SNc*LtlmI3yp1$fqRh7SLLjJGKt&*fq=GmG>NN%TRSOKenBxC?%p=81
zmkfqwZ%=PmlAxCb5HObRNPU;>WuW$RTy`U_$EpR86wLL;(kJ=ohd2GZZ5wvCBaaFb
zjrzLn?7g*umJCSb(@=fT<+3Ks?V35>nXtk8n*(v+?rAHFq062taJv-}B^WO+r;&+?
z*Th;o69<YgvkIML+{<|HOa+)Lh%#A_qYW#<+>^*x#lu?u8$yF4ap1CsD{jA=kUK%Z
zMAPl|#*OciEbvBz4Y<<75iLI#r!}XW18B%8@6C7kwX`jGOFl&oqvol07TM!}o0fzA
zdCNp24d;k-nzYm@EocMGjfj5BG)9`#pM?d!43x*9D}4d+Z_bi3U%RX<sR%y$f6ud|
bZm%eKXsCXbZJ($|-hqItqX(nXfy4VhO|Dm)

literal 0
HcmV?d00001

diff --git a/ui/pages/confirm-deploy-contract/confirm-deploy-contract.stories.js b/ui/pages/confirm-deploy-contract/confirm-deploy-contract.stories.js
new file mode 100644
index 000000000..3bbbfbdb3
--- /dev/null
+++ b/ui/pages/confirm-deploy-contract/confirm-deploy-contract.stories.js
@@ -0,0 +1,57 @@
+/* eslint-disable react/prop-types */
+import React, { useEffect } from 'react';
+
+import { select } from '@storybook/addon-knobs';
+import { store } from '../../../.storybook/preview';
+import { updateTransactionParams } from '../../store/actions';
+import ConfirmDeployContract from '.';
+
+export default {
+  title: 'Confirmation Screens',
+};
+
+// transaction ID
+const id = 3111025347726181;
+
+const PageSet = ({ children }) => {
+  const options = [];
+  const receiverOptions = {
+    'Address 1': '0xaD6D458402F60fD3Bd25163575031ACDce07538D',
+    'Address 2': '0x55e0bfb2d400e9be8cf9b114e38a40969a02f69a',
+  };
+  const state = store.getState();
+  const { identities } = state.metamask;
+  Object.keys(identities).forEach(function (key) {
+    options.push({
+      label: identities[key].name,
+      address: key,
+    });
+  });
+  const sender = select('Sender', options, options[0]);
+  const receiver = select(
+    'Receiver',
+    receiverOptions,
+    '0xaD6D458402F60fD3Bd25163575031ACDce07538D',
+  );
+
+  const confirmTransactionState = state.confirmTransaction.txData.txParams;
+
+  useEffect(() => {
+    confirmTransactionState.from = sender.address;
+    store.dispatch(updateTransactionParams(id, confirmTransactionState));
+  }, [sender, confirmTransactionState]);
+
+  useEffect(() => {
+    confirmTransactionState.to = receiver;
+    store.dispatch(updateTransactionParams(id, confirmTransactionState));
+  }, [receiver, confirmTransactionState]);
+  return children;
+};
+
+export const DeployContract = () => {
+  return (
+    <PageSet>
+      <ConfirmDeployContract />
+    </PageSet>
+  );
+};

From ca7259246c86dae9a11f538927d97fc2fc8f85ee Mon Sep 17 00:00:00 2001
From: sooyoung <hyunsy822@gmail.com>
Date: Wed, 16 Jun 2021 21:24:36 +0900
Subject: [PATCH 015/141] fix xpath to get firefox uuid (#11323)

---
 test/e2e/webdriver/firefox.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/test/e2e/webdriver/firefox.js b/test/e2e/webdriver/firefox.js
index 6d327305a..d9d105b98 100644
--- a/test/e2e/webdriver/firefox.js
+++ b/test/e2e/webdriver/firefox.js
@@ -75,9 +75,7 @@ class FirefoxDriver {
     await this._driver.get('about:debugging#addons');
     return await this._driver
       .wait(
-        until.elementLocated(
-          By.xpath("//dl/div[contains(., 'Internal UUID')]/dd"),
-        ),
+        until.elementLocated(By.xpath("//dl/div[contains(., 'UUID')]/dd")),
         1000,
       )
       .getText();

From a08d927681d928991b0ff6538b365759d8e18714 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Wed, 16 Jun 2021 10:00:19 -0500
Subject: [PATCH 016/141] Make MAX button accessible (#11322)

---
 ui/css/itcss/components/send.scss                             | 1 +
 .../amount-max-button/amount-max-button.component.js          | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/ui/css/itcss/components/send.scss b/ui/css/itcss/components/send.scss
index 555692d81..9874b09ab 100644
--- a/ui/css/itcss/components/send.scss
+++ b/ui/css/itcss/components/send.scss
@@ -801,6 +801,7 @@
       align-items: center;
       justify-content: center;
       color: #2f9ae0;
+      background: #fff;
 
       &__disabled {
         color: #b0d7f2;
diff --git a/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js b/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
index db520fcdc..223e6da91 100644
--- a/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
+++ b/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
@@ -62,7 +62,7 @@ export default class AmountMaxButton extends Component {
     const { maxModeOn, buttonDataLoading, inError } = this.props;
 
     return (
-      <div
+      <button
         className="send-v2__amount-max"
         onClick={buttonDataLoading || inError ? null : this.onMaxClick}
       >
@@ -75,7 +75,7 @@ export default class AmountMaxButton extends Component {
         >
           {this.context.t('max')}
         </div>
-      </div>
+      </button>
     );
   }
 }

From 3e959b649301d7631fab080a8f7a14181953b614 Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Wed, 16 Jun 2021 12:42:20 -0230
Subject: [PATCH 017/141] Add `--leave-running` flag to E2E test script
 (#11321)

* Add `--leave-running` flag to E2E test script

The `--leave-running` flag has been added to the E2E test runner. This
ensures the browser, ganache, and everything else stays running upon
test failure. This is useful for local debugging, for investigating
what state the extension was in when it failed.

* Add `--leave-running` support to `metamask-ui.spec.js`
---
 test/e2e/helpers.js          | 42 ++++++++++++++++++++----------------
 test/e2e/metamask-ui.spec.js |  6 ++++++
 test/e2e/run-e2e-test.js     | 12 ++++++++++-
 3 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/test/e2e/helpers.js b/test/e2e/helpers.js
index ae8b4d6c5..cde3b0243 100644
--- a/test/e2e/helpers.js
+++ b/test/e2e/helpers.js
@@ -33,6 +33,7 @@ async function withFixtures(options, testSuite) {
   let segmentStub;
 
   let webDriver;
+  let failed = false;
   try {
     await ganacheServer.start(ganacheOptions);
     if (ganacheOptions?.concurrent) {
@@ -103,6 +104,7 @@ async function withFixtures(options, testSuite) {
       }
     }
   } catch (error) {
+    failed = true;
     if (webDriver) {
       try {
         await webDriver.verboseReportOnFailure(title);
@@ -112,26 +114,28 @@ async function withFixtures(options, testSuite) {
     }
     throw error;
   } finally {
-    await fixtureServer.stop();
-    await ganacheServer.quit();
-    if (ganacheOptions?.concurrent) {
-      await secondaryGanacheServer.quit();
-    }
-    if (webDriver) {
-      await webDriver.quit();
-    }
-    if (dappServer) {
-      await new Promise((resolve, reject) => {
-        dappServer.close((error) => {
-          if (error) {
-            return reject(error);
-          }
-          return resolve();
+    if (!failed || process.env.E2E_LEAVE_RUNNING !== 'true') {
+      await fixtureServer.stop();
+      await ganacheServer.quit();
+      if (ganacheOptions?.concurrent) {
+        await secondaryGanacheServer.quit();
+      }
+      if (webDriver) {
+        await webDriver.quit();
+      }
+      if (dappServer) {
+        await new Promise((resolve, reject) => {
+          dappServer.close((error) => {
+            if (error) {
+              return reject(error);
+            }
+            return resolve();
+          });
         });
-      });
-    }
-    if (segmentServer) {
-      await segmentServer.stop();
+      }
+      if (segmentServer) {
+        await segmentServer.stop();
+      }
     }
   }
 }
diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js
index e6dadd200..c28ab6e5c 100644
--- a/test/e2e/metamask-ui.spec.js
+++ b/test/e2e/metamask-ui.spec.js
@@ -20,6 +20,8 @@ describe('MetaMask', function () {
 
   this.bail(true);
 
+  let failed = false;
+
   before(async function () {
     await ganacheServer.start();
     const dappDirectory = path.resolve(
@@ -54,11 +56,15 @@ describe('MetaMask', function () {
       }
     }
     if (this.currentTest.state === 'failed') {
+      failed = true;
       await driver.verboseReportOnFailure(this.currentTest.title);
     }
   });
 
   after(async function () {
+    if (process.env.E2E_LEAVE_RUNNING === 'true' && failed) {
+      return;
+    }
     await ganacheServer.quit();
     await driver.quit();
     await new Promise((resolve, reject) => {
diff --git a/test/e2e/run-e2e-test.js b/test/e2e/run-e2e-test.js
index b9b869fe8..ce349ad02 100644
--- a/test/e2e/run-e2e-test.js
+++ b/test/e2e/run-e2e-test.js
@@ -24,6 +24,12 @@ async function main() {
               'Set how many times the test should be retried upon failure.',
             type: 'number',
           })
+          .option('leave-running', {
+            default: false,
+            description:
+              'Leaves the browser running after a test fails, along with anything else that the test used (ganache, the test dapp, etc.)',
+            type: 'boolean',
+          })
           .positional('e2e-test-path', {
             describe: 'The path for the E2E test to run.',
             type: 'string',
@@ -33,7 +39,7 @@ async function main() {
     .strict()
     .help('help');
 
-  const { browser, e2eTestPath, retries } = argv;
+  const { browser, e2eTestPath, retries, leaveRunning } = argv;
 
   if (!browser) {
     exitWithError(
@@ -63,6 +69,10 @@ async function main() {
     throw error;
   }
 
+  if (leaveRunning) {
+    process.env.E2E_LEAVE_RUNNING = 'true';
+  }
+
   await retry(retries, async () => {
     await runInShell('yarn', ['mocha', '--no-timeouts', e2eTestPath]);
   });

From de55cd926a418f748a46c731c4ed23ae7d8661d5 Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Wed, 16 Jun 2021 12:53:51 -0230
Subject: [PATCH 018/141] Fix benchmark script with 1 sample (#11320)

Previously the benchmark script would throw an error if asked to take
just 1 sample. Now it works, though the stats returned are of
dubious use.

The problem was that it was impossible to calculate the standard
deviation or margin of error of a set of 1. Instead it now returns
zero for both of those values in the single-sample case, which is what
it would return for two identical samples.
---
 test/e2e/benchmark.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/test/e2e/benchmark.js b/test/e2e/benchmark.js
index 9c3b7db00..bc3bc5070 100644
--- a/test/e2e/benchmark.js
+++ b/test/e2e/benchmark.js
@@ -38,6 +38,9 @@ const minResult = calculateResult((array) => Math.min(...array));
 const maxResult = calculateResult((array) => Math.max(...array));
 const averageResult = calculateResult((array) => calculateAverage(array));
 const standardDeviationResult = calculateResult((array) => {
+  if (array.length === 1) {
+    return 0;
+  }
   const average = calculateAverage(array);
   const squareDiffs = array.map((value) => Math.pow(value - average, 2));
   return Math.sqrt(calculateAverage(squareDiffs));
@@ -46,7 +49,7 @@ const standardDeviationResult = calculateResult((array) => {
 const calculateMarginOfError = (array) =>
   ttest(array).confidence()[1] - calculateAverage(array);
 const marginOfErrorResult = calculateResult((array) =>
-  calculateMarginOfError(array),
+  array.length === 1 ? 0 : calculateMarginOfError(array),
 );
 
 async function profilePageLoad(pages, numSamples) {

From e8f21b1ac6afabe59c4efcd76c6397ef045eac62 Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Wed, 16 Jun 2021 09:34:29 -0700
Subject: [PATCH 019/141] Lionbridge translation updates (#11292)

---
 app/_locales/es/messages.json     | 168 +++++++++++--
 app/_locales/es_419/messages.json | 122 ++++++++--
 app/_locales/hi/messages.json     | 115 ++++++++-
 app/_locales/id/messages.json     | 115 ++++++++-
 app/_locales/ja/messages.json     | 122 +++++++++-
 app/_locales/ko/messages.json     | 391 ++++++++++++++++++------------
 app/_locales/ph/messages.json     |  85 ++++++-
 app/_locales/pt_BR/messages.json  | 133 +++++++++-
 app/_locales/ru/messages.json     | 117 ++++++++-
 app/_locales/vi/messages.json     | 123 +++++++++-
 10 files changed, 1250 insertions(+), 241 deletions(-)

diff --git a/app/_locales/es/messages.json b/app/_locales/es/messages.json
index 58a592514..8fe19f247 100644
--- a/app/_locales/es/messages.json
+++ b/app/_locales/es/messages.json
@@ -6,7 +6,7 @@
     "message": "Versión, centro de soporte técnico e información de contacto"
   },
   "acceleratingATransaction": {
-    "message": "* Usar un precio de gas más alto para acelerar una transacción aumenta las posibilidades de un procesamiento más rápido en la red, pero esto no siempre se garantiza."
+    "message": "* Usar un precio de gas más alto para acelerar una transacción aumenta las posibilidades de un procesamiento más rápido en la red, pero esto no siempre se garantiza."
   },
   "acceptTermsOfUse": {
     "message": "Leí y estoy de acuerdo con $1",
@@ -52,6 +52,10 @@
   "addContact": {
     "message": "Agregar contacto"
   },
+  "addCustomTokenByContractAddress": {
+    "message": "¿No encuentra un token? Puede agregar cualquier token si copia su dirección. Puede encontrar la dirección de contrato del token en $1.",
+    "description": "$1 is a blockchain explorer for a specific network, e.g. Etherscan for Ethereum"
+  },
   "addEthereumChainConfirmationDescription": {
     "message": "Esto permitirá que la red se utilice en MetaMask."
   },
@@ -85,7 +89,7 @@
     "message": "Agregar a la libreta de direcciones"
   },
   "addToAddressBookModalPlaceholder": {
-    "message": "p. ej., John D."
+    "message": "p. ej., John D."
   },
   "addToken": {
     "message": "Agregar token"
@@ -265,7 +269,7 @@
     "message": "Bytes"
   },
   "canToggleInSettings": {
-    "message": "Puede volver a activar esta notificación desde Configuración > Alertas."
+    "message": "Puede volver a activar esta notificación desde Configuración -> Alertas."
   },
   "cancel": {
     "message": "Cancelar"
@@ -282,8 +286,11 @@
   "chainIdDefinition": {
     "message": "El identificador de cadena que se utiliza para firmar transacciones en esta red."
   },
+  "chainIdExistsErrorMsg": {
+    "message": "En este momento, la red $1 está utilizando este identificador de cadena."
+  },
   "chromeRequiredForHardwareWallets": {
-    "message": "Debe usar MetaMask en Google Chrome para poder conectarse a su cartera de hardware."
+    "message": "Debe usar MetaMask en Google Chrome para poder conectarse a su cartera de hardware."
   },
   "clickToRevealSeed": {
     "message": "Haga clic aquí para revelar las palabras secretas"
@@ -407,6 +414,9 @@
   "continueToWyre": {
     "message": "Continuar a Wyre"
   },
+  "contract": {
+    "message": "Contrato"
+  },
   "contractAddressError": {
     "message": "Está enviando tokens a la dirección de contrato del token. Esto puede provocar la pérdida de los tokens."
   },
@@ -569,7 +579,7 @@
     "message": "No volver a mostrar"
   },
   "downloadGoogleChrome": {
-    "message": "Descargar Google Chrome"
+    "message": "Descargar Google Chrome"
   },
   "downloadSecretBackup": {
     "message": "Descargue esta frase secreta de respaldo y guárdela en un medio de almacenamiento o disco duro externo cifrado."
@@ -623,6 +633,10 @@
   "endOfFlowMessage6": {
     "message": "Si necesita volver a crear una copia de seguridad de la frase secreta de recuperación, puede encontrarla en Configuración -> Seguridad."
   },
+  "endOfFlowMessage7": {
+    "message": "Si tiene preguntas o nota movimientos sospechosos, comuníquese con soporte técnico $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 no puede recuperar la frase secreta de recuperación."
   },
@@ -767,7 +781,7 @@
     "message": "El límite de gas es la cantidad máxima de unidades de gas que está dispuesto a gastar."
   },
   "gasLimitTooLow": {
-    "message": "El límite de gas debe ser al menos 21 000"
+    "message": "El límite de gas debe ser al menos 21 000"
   },
   "gasLimitTooLowWithDynamicFee": {
     "message": "El límite de gas debe ser al menos $1",
@@ -882,6 +896,16 @@
   "importAccountSeedPhrase": {
     "message": "Importar una cuenta con la frase secreta de recuperación"
   },
+  "importAccountText": {
+    "message": "o $1",
+    "description": "$1 represents the text from `importAccountLinkText` as a link"
+  },
+  "importTokenQuestion": {
+    "message": "¿Desea importar el token?"
+  },
+  "importTokenWarning": {
+    "message": "Toda persona puede crear un token con cualquier nombre, incluso versiones falsas de tokens existentes. ¡Agréguelo y realice transacciones bajo su propio riesgo!"
+  },
   "importWallet": {
     "message": "Importar cartera"
   },
@@ -953,7 +977,7 @@
     "message": "Número no válido. Quite todos los ceros iniciales."
   },
   "invalidRPC": {
-    "message": "Dirección URL de RPC no válida"
+    "message": "Dirección URL de RPC no válida"
   },
   "invalidSeedPhrase": {
     "message": "Frase secreta de recuperación no válida"
@@ -1020,7 +1044,7 @@
     "message": "Cargando tokens…"
   },
   "localhost": {
-    "message": "Host local 8545"
+    "message": "Host local 8545"
   },
   "lock": {
     "message": "Bloquear"
@@ -1107,7 +1131,7 @@
     "message": "Escriba su contraseña para confirmar que es usted."
   },
   "mustSelectOne": {
-    "message": "Debe seleccionar al menos 1 token."
+    "message": "Debe seleccionar al menos 1 token."
   },
   "myAccounts": {
     "message": "Mis cuentas"
@@ -1157,10 +1181,10 @@
     "message": "Agregar y editar redes RPC personalizadas"
   },
   "networkURL": {
-    "message": "Dirección URL de la red"
+    "message": "Dirección URL de la red"
   },
   "networkURLDefinition": {
-    "message": "La dirección URL que se utilizó para acceder a esta red."
+    "message": "La dirección URL que se utilizó para acceder a esta red."
   },
   "networks": {
     "message": "Redes"
@@ -1188,7 +1212,7 @@
     "message": "Red nueva"
   },
   "newPassword": {
-    "message": "Contraseña nueva (mín. de 8 caracteres)"
+    "message": "Contraseña nueva (mín. de 8 caracteres)"
   },
   "newToMetaMask": {
     "message": "¿Es nuevo en MetaMask?"
@@ -1284,6 +1308,22 @@
     "message": "Su \"frase de recuperación\" ahora se llama \"frase secreta de recuperación.\"",
     "description": "Description of a notification in the 'See What's New' popup. Describes the seed phrase wording update."
   },
+  "notifications6DescriptionOne": {
+    "message": "A partir de la versión 91 de Chrome, la API que habilitaba nuestro soporte para Ledger (U2F) ya no es compatible con carteras de hardware. MetaMask ha implementado un nuevo soporte para Ledger Live mediante el cual usted puede seguir conectándose a su dispositivo Ledger a través de la aplicación de escritorio Ledger Live.",
+    "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
+  },
+  "notifications6DescriptionThree": {
+    "message": "Cuando interactúe con su cuenta de Ledger a través de MetaMask, se abrirá una nueva pestaña y se le pedirá que abra la aplicación Ledger Live.  Una vez que se abra la aplicación, se le pedirá que otorgue permiso para establecer una conexión WebSocket con su cuenta de MetaMask.  ¡Eso es todo!",
+    "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
+  },
+  "notifications6DescriptionTwo": {
+    "message": "A fin de habilitar el soporte para Live Ledger, haga clic en Configuración > Avanzada > Utilizar Ledger Live.",
+    "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
+  },
+  "notifications6Title": {
+    "message": "Actualización del soporte para Ledger destinada a usuarios de Chrome",
+    "description": "Title for a notification in the 'See What's New' popup. Lets users know about the Ledger support update"
+  },
   "ofTextNofM": {
     "message": "de"
   },
@@ -1369,7 +1409,7 @@
     "message": "Moneda principal"
   },
   "primaryCurrencySettingDescription": {
-    "message": "Seleccione Nativa para dar prioridad a mostrar los valores en la moneda nativa de la cadena (p. ej., ETH). Seleccione Fiduciaria para dar prioridad a mostrar los valores en la moneda fiduciaria seleccionada."
+    "message": "Seleccione Nativa para dar prioridad a mostrar los valores en la moneda nativa de la cadena (p. ej., ETH). Seleccione Fiduciaria para dar prioridad a mostrar los valores en la moneda fiduciaria seleccionada."
   },
   "privacyMsg": {
     "message": "Política de privacidad"
@@ -1414,6 +1454,30 @@
   "recipientAddressPlaceholder": {
     "message": "Búsqueda, dirección pública (0x) o ENS"
   },
+  "recoveryPhraseReminderBackupStart": {
+    "message": "Iniciar aquí"
+  },
+  "recoveryPhraseReminderConfirm": {
+    "message": "Entendido"
+  },
+  "recoveryPhraseReminderHasBackedUp": {
+    "message": "Guarde siempre su frase secreta de recuperación en un lugar seguro y secreto."
+  },
+  "recoveryPhraseReminderHasNotBackedUp": {
+    "message": "¿Necesita volver a crear una copia de seguridad de su frase secreta de recuperación?"
+  },
+  "recoveryPhraseReminderItemOne": {
+    "message": "No comparta nunca su frase secreta de recuperación con nadie."
+  },
+  "recoveryPhraseReminderItemTwo": {
+    "message": "El equipo de MetaMask nunca le pedirá su frase secreta de recuperación."
+  },
+  "recoveryPhraseReminderSubText": {
+    "message": "Mediante su frase secreta de recuperación, se controlan todas sus cuentas."
+  },
+  "recoveryPhraseReminderTitle": {
+    "message": "Proteja sus fondos."
+  },
   "reject": {
     "message": "Rechazar"
   },
@@ -1421,7 +1485,7 @@
     "message": "Rechazar todo"
   },
   "rejectTxsDescription": {
-    "message": "Está a punto de rechazar $1 transacciones en lote."
+    "message": "Está a punto de rechazar $1 transacciones en lote."
   },
   "rejectTxsN": {
     "message": "Rechazar $1 transacciones"
@@ -1439,7 +1503,7 @@
     "message": "Quitar cuenta"
   },
   "removeAccountDescription": {
-    "message": "Esta cuenta se quitará de la cartera. Antes de continuar, asegúrese de tener la frase secreta de recuperación original o la clave privada de esta cuenta importada. Puede importar o crear cuentas nuevamente desde el menú desplegable de la cuenta."
+    "message": "Esta cuenta se quitará de la cartera. Antes de continuar, asegúrese de tener la frase secreta de recuperación original o la clave privada de esta cuenta importada. Puede importar o crear cuentas nuevamente en la lista desplegable de la cuenta. "
   },
   "requestsAwaitingAcknowledgement": {
     "message": "solicitudes en espera de confirmación"
@@ -1536,11 +1600,47 @@
     "message": "Ingrese su frase secreta aquí para restaurar su bóveda."
   },
   "securityAndPrivacy": {
-    "message": "Seguridad y privacidad"
+    "message": "Seguridad y privacidad"
   },
   "securitySettingsDescription": {
     "message": "Configuración de privacidad y frase secreta de recuperación de la cartera"
   },
+  "seedPhraseIntroSidebarBulletFour": {
+    "message": "Escríbala y guárdela en varios lugares secretos."
+  },
+  "seedPhraseIntroSidebarBulletOne": {
+    "message": "Guárdela en un administrador de contraseñas"
+  },
+  "seedPhraseIntroSidebarBulletThree": {
+    "message": "Guárdela en una caja fuerte."
+  },
+  "seedPhraseIntroSidebarBulletTwo": {
+    "message": "Guárdela en una bóveda bancaria."
+  },
+  "seedPhraseIntroSidebarCopyOne": {
+    "message": "Su frase secreta de recuperación es la “llave maestra” de su cartera y sus fondos."
+  },
+  "seedPhraseIntroSidebarCopyThree": {
+    "message": "Si alguien le pide su frase de recuperación, es posible que tenga intenciones de estafarlo."
+  },
+  "seedPhraseIntroSidebarCopyTwo": {
+    "message": "Nunca comparta su frase secreta de recuperación, ni siquiera con MetaMask."
+  },
+  "seedPhraseIntroSidebarTitleOne": {
+    "message": "¿Qué es una frase de recuperación?"
+  },
+  "seedPhraseIntroSidebarTitleThree": {
+    "message": "¿Debería compartir mi frase de recuperación?"
+  },
+  "seedPhraseIntroSidebarTitleTwo": {
+    "message": "¿Cómo guardo mi frase de recuperación?"
+  },
+  "seedPhraseIntroTitle": {
+    "message": "Proteger su cartera"
+  },
+  "seedPhraseIntroTitleCopy": {
+    "message": "Antes de comenzar, mire este breve video para aprender sobre su frase de recuperación y sobre cómo mantener segura su cartera."
+  },
   "seedPhrasePlaceholder": {
     "message": "Separar cada palabra con un solo espacio"
   },
@@ -1548,7 +1648,7 @@
     "message": "Pegar la frase secreta de recuperación desde el Portapapeles"
   },
   "seedPhraseReq": {
-    "message": "Las frases secretas de recuperación contienen 12, 15, 18, 21 o 24 palabras"
+    "message": "Las frases secretas de recuperación contienen 12, 15, 18, 21 o 24 palabras"
   },
   "selectAHigherGasFee": {
     "message": "Seleccione una cuota de gas más alta para acelerar el procesamiento de la transacción.*"
@@ -1867,7 +1967,7 @@
     "message": "Cuota de MetaMask"
   },
   "swapMetaMaskFeeDescription": {
-    "message": "Buscamos el mejor precio en las fuentes de liquidez más importantes, todo el tiempo. Se incorpora de manera automática a esta cotización una cuota del $1 %.",
+    "message": "Buscamos el mejor precio en las fuentes de liquidez más importantes, todo el tiempo. Se incorpora de manera automática a esta cotización una cuota del $1 %.",
     "description": "Provides information about the fee that metamask takes for swaps. $1 is a decimal number."
   },
   "swapNQuotes": {
@@ -1890,9 +1990,18 @@
     "description": "This message represents the price slippage for the swap.  $1 and $4 are a number (ex: 2.89), $2 and $5 are symbols (ex: ETH), and $3 and $6 are fiat currency amounts."
   },
   "swapPriceDifferenceTitle": {
-    "message": "Diferencia de precio de ~$1 %",
+    "message": "Diferencia de precio de ~$1 %",
     "description": "$1 is a number (ex: 1.23) that represents the price difference."
   },
+  "swapPriceImpactTooltip": {
+    "message": "El impacto sobre el precio es la diferencia entre el precio actual del mercado y el monto recibido durante la ejecución de la transacción. El impacto sobre el precio es una función del tamaño de su transacción respecto de la dimensión del fondo de liquidez."
+  },
+  "swapPriceUnavailableDescription": {
+    "message": "No se pudo determinar el impacto sobre el precio debido a la falta de datos de los precios del mercado. Antes de realizar el canje, confirme que está de acuerdo con la cantidad de tokens que está a punto de recibir."
+  },
+  "swapPriceUnavailableTitle": {
+    "message": "Antes de continuar, verifique su tasa"
+  },
   "swapProcessing": {
     "message": "Procesamiento"
   },
@@ -1903,7 +2012,7 @@
     "message": "Si el precio cambia entre el momento en que hace el pedido y cuando se confirma, se denomina \"desfase\". El canje se cancelará automáticamente si el desfase supera lo establecido en la configuración \"tolerancia de desfase\"."
   },
   "swapQuoteIncludesRate": {
-    "message": "La cotización incluye una cuota de MetaMask de $1 %",
+    "message": "La cotización incluye una cuota de MetaMask de $1 %",
     "description": "Provides information about the fee that metamask takes for swaps. $1 is a decimal number."
   },
   "swapQuoteNofN": {
@@ -1994,6 +2103,9 @@
     "message": "Canjear $1 por $2",
     "description": "Used in the transaction display list to describe a swap. $1 and $2 are the symbols of tokens in involved in a swap."
   },
+  "swapTokenVerificationAddedManually": {
+    "message": "Este token se añadió de forma manual."
+  },
   "swapTokenVerificationMessage": {
     "message": "Siempre confirme la dirección del token en $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\" followed by an info icon that shows more info on hover."
@@ -2009,7 +2121,7 @@
     "message": "Transacción completa"
   },
   "swapTwoTransactions": {
-    "message": "2 transacciones"
+    "message": "2 transacciones"
   },
   "swapUnknown": {
     "message": "Desconocido"
@@ -2026,13 +2138,13 @@
     "description": "Tells the user how much of a token they have in their balance. $1 is a decimal number amount of tokens, and $2 is a token symbol"
   },
   "swapZeroSlippage": {
-    "message": "0 % de desfase"
+    "message": "0 % de desfase"
   },
   "swapsAdvancedOptions": {
     "message": "Opciones avanzadas"
   },
   "swapsExcessiveSlippageWarning": {
-    "message": "El monto del desfase es muy alto, por lo que recibirá una tasa de conversión desfavorable. Disminuya su tolerancia de desfase a un valor menor al 15 %."
+    "message": "El monto del desfase es muy alto, por lo que recibirá una tasa de conversión desfavorable. Disminuya su tolerancia de desfase a un valor menor al 15 %."
   },
   "swapsMaxSlippage": {
     "message": "Tolerancia de desfase"
@@ -2072,7 +2184,7 @@
     "message": "Símbolo"
   },
   "symbolBetweenZeroTwelve": {
-    "message": "El símbolo debe tener 11 caracteres o menos."
+    "message": "El símbolo debe tener 11 caracteres o menos."
   },
   "syncWithMobile": {
     "message": "Sincronizar con dispositivo móvil"
@@ -2261,7 +2373,7 @@
     "message": "Las direcciones URL requieren el prefijo HTTP/HTTPS adecuado."
   },
   "urlExistsErrorMsg": {
-    "message": "La dirección URL ya está en la lista de redes existentes"
+    "message": "En este momento, la red $1 está utilizando esta dirección URL."
   },
   "usePhishingDetection": {
     "message": "Usar detección de phishing"
@@ -2283,6 +2395,10 @@
     "message": "Comprobar este token en $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\""
   },
+  "verifyThisUnconfirmedTokenOn": {
+    "message": "Verifique este token en $1 y asegúrese de que sea el token con el que quiere realizar la transacción.",
+    "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": "Ver cuenta"
   },
@@ -2317,7 +2433,7 @@
     "message": "Frase secreta de recuperación de la cartera"
   },
   "web3ShimUsageNotification": {
-    "message": "Parece que el sitio web actual intentó utilizar la API de window.web3 que se eliminó. Si el sitio no funciona, haga clic en $1 para obtener más información.",
+    "message": "Parece que el sitio web actual intentó utilizar la API de window.web3 que se eliminó. Si el sitio no funciona, haga clic en $1 para obtener más información.",
     "description": "$1 is a clickable link."
   },
   "welcome": {
diff --git a/app/_locales/es_419/messages.json b/app/_locales/es_419/messages.json
index 961836bd8..8fe19f247 100644
--- a/app/_locales/es_419/messages.json
+++ b/app/_locales/es_419/messages.json
@@ -6,7 +6,7 @@
     "message": "Versión, centro de soporte técnico e información de contacto"
   },
   "acceleratingATransaction": {
-    "message": "* Usar un precio de gas más alto para acelerar una transacción aumenta las posibilidades de un procesamiento más rápido en la red, pero esto no siempre se garantiza."
+    "message": "* Usar un precio de gas más alto para acelerar una transacción aumenta las posibilidades de un procesamiento más rápido en la red, pero esto no siempre se garantiza."
   },
   "acceptTermsOfUse": {
     "message": "Leí y estoy de acuerdo con $1",
@@ -52,6 +52,10 @@
   "addContact": {
     "message": "Agregar contacto"
   },
+  "addCustomTokenByContractAddress": {
+    "message": "¿No encuentra un token? Puede agregar cualquier token si copia su dirección. Puede encontrar la dirección de contrato del token en $1.",
+    "description": "$1 is a blockchain explorer for a specific network, e.g. Etherscan for Ethereum"
+  },
   "addEthereumChainConfirmationDescription": {
     "message": "Esto permitirá que la red se utilice en MetaMask."
   },
@@ -85,7 +89,7 @@
     "message": "Agregar a la libreta de direcciones"
   },
   "addToAddressBookModalPlaceholder": {
-    "message": "p. ej., John D."
+    "message": "p. ej., John D."
   },
   "addToken": {
     "message": "Agregar token"
@@ -265,7 +269,7 @@
     "message": "Bytes"
   },
   "canToggleInSettings": {
-    "message": "Puede volver a activar esta notificación desde Configuración > Alertas."
+    "message": "Puede volver a activar esta notificación desde Configuración -> Alertas."
   },
   "cancel": {
     "message": "Cancelar"
@@ -282,8 +286,11 @@
   "chainIdDefinition": {
     "message": "El identificador de cadena que se utiliza para firmar transacciones en esta red."
   },
+  "chainIdExistsErrorMsg": {
+    "message": "En este momento, la red $1 está utilizando este identificador de cadena."
+  },
   "chromeRequiredForHardwareWallets": {
-    "message": "Debe usar MetaMask en Google Chrome para poder conectarse a su cartera de hardware."
+    "message": "Debe usar MetaMask en Google Chrome para poder conectarse a su cartera de hardware."
   },
   "clickToRevealSeed": {
     "message": "Haga clic aquí para revelar las palabras secretas"
@@ -407,6 +414,9 @@
   "continueToWyre": {
     "message": "Continuar a Wyre"
   },
+  "contract": {
+    "message": "Contrato"
+  },
   "contractAddressError": {
     "message": "Está enviando tokens a la dirección de contrato del token. Esto puede provocar la pérdida de los tokens."
   },
@@ -569,7 +579,7 @@
     "message": "No volver a mostrar"
   },
   "downloadGoogleChrome": {
-    "message": "Descargar Google Chrome"
+    "message": "Descargar Google Chrome"
   },
   "downloadSecretBackup": {
     "message": "Descargue esta frase secreta de respaldo y guárdela en un medio de almacenamiento o disco duro externo cifrado."
@@ -771,7 +781,7 @@
     "message": "El límite de gas es la cantidad máxima de unidades de gas que está dispuesto a gastar."
   },
   "gasLimitTooLow": {
-    "message": "El límite de gas debe ser al menos 21 000"
+    "message": "El límite de gas debe ser al menos 21 000"
   },
   "gasLimitTooLowWithDynamicFee": {
     "message": "El límite de gas debe ser al menos $1",
@@ -890,6 +900,12 @@
     "message": "o $1",
     "description": "$1 represents the text from `importAccountLinkText` as a link"
   },
+  "importTokenQuestion": {
+    "message": "¿Desea importar el token?"
+  },
+  "importTokenWarning": {
+    "message": "Toda persona puede crear un token con cualquier nombre, incluso versiones falsas de tokens existentes. ¡Agréguelo y realice transacciones bajo su propio riesgo!"
+  },
   "importWallet": {
     "message": "Importar cartera"
   },
@@ -961,7 +977,7 @@
     "message": "Número no válido. Quite todos los ceros iniciales."
   },
   "invalidRPC": {
-    "message": "Dirección URL de RPC no válida"
+    "message": "Dirección URL de RPC no válida"
   },
   "invalidSeedPhrase": {
     "message": "Frase secreta de recuperación no válida"
@@ -1028,7 +1044,7 @@
     "message": "Cargando tokens…"
   },
   "localhost": {
-    "message": "Host local 8545"
+    "message": "Host local 8545"
   },
   "lock": {
     "message": "Bloquear"
@@ -1115,7 +1131,7 @@
     "message": "Escriba su contraseña para confirmar que es usted."
   },
   "mustSelectOne": {
-    "message": "Debe seleccionar al menos 1 token."
+    "message": "Debe seleccionar al menos 1 token."
   },
   "myAccounts": {
     "message": "Mis cuentas"
@@ -1165,10 +1181,10 @@
     "message": "Agregar y editar redes RPC personalizadas"
   },
   "networkURL": {
-    "message": "Dirección URL de la red"
+    "message": "Dirección URL de la red"
   },
   "networkURLDefinition": {
-    "message": "La dirección URL que se utilizó para acceder a esta red."
+    "message": "La dirección URL que se utilizó para acceder a esta red."
   },
   "networks": {
     "message": "Redes"
@@ -1196,7 +1212,7 @@
     "message": "Red nueva"
   },
   "newPassword": {
-    "message": "Contraseña nueva (mín. de 8 caracteres)"
+    "message": "Contraseña nueva (mín. de 8 caracteres)"
   },
   "newToMetaMask": {
     "message": "¿Es nuevo en MetaMask?"
@@ -1292,6 +1308,22 @@
     "message": "Su \"frase de recuperación\" ahora se llama \"frase secreta de recuperación.\"",
     "description": "Description of a notification in the 'See What's New' popup. Describes the seed phrase wording update."
   },
+  "notifications6DescriptionOne": {
+    "message": "A partir de la versión 91 de Chrome, la API que habilitaba nuestro soporte para Ledger (U2F) ya no es compatible con carteras de hardware. MetaMask ha implementado un nuevo soporte para Ledger Live mediante el cual usted puede seguir conectándose a su dispositivo Ledger a través de la aplicación de escritorio Ledger Live.",
+    "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
+  },
+  "notifications6DescriptionThree": {
+    "message": "Cuando interactúe con su cuenta de Ledger a través de MetaMask, se abrirá una nueva pestaña y se le pedirá que abra la aplicación Ledger Live.  Una vez que se abra la aplicación, se le pedirá que otorgue permiso para establecer una conexión WebSocket con su cuenta de MetaMask.  ¡Eso es todo!",
+    "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
+  },
+  "notifications6DescriptionTwo": {
+    "message": "A fin de habilitar el soporte para Live Ledger, haga clic en Configuración > Avanzada > Utilizar Ledger Live.",
+    "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
+  },
+  "notifications6Title": {
+    "message": "Actualización del soporte para Ledger destinada a usuarios de Chrome",
+    "description": "Title for a notification in the 'See What's New' popup. Lets users know about the Ledger support update"
+  },
   "ofTextNofM": {
     "message": "de"
   },
@@ -1377,7 +1409,7 @@
     "message": "Moneda principal"
   },
   "primaryCurrencySettingDescription": {
-    "message": "Seleccione Nativa para dar prioridad a mostrar los valores en la moneda nativa de la cadena (p. ej., ETH). Seleccione Fiduciaria para dar prioridad a mostrar los valores en la moneda fiduciaria seleccionada."
+    "message": "Seleccione Nativa para dar prioridad a mostrar los valores en la moneda nativa de la cadena (p. ej., ETH). Seleccione Fiduciaria para dar prioridad a mostrar los valores en la moneda fiduciaria seleccionada."
   },
   "privacyMsg": {
     "message": "Política de privacidad"
@@ -1422,6 +1454,30 @@
   "recipientAddressPlaceholder": {
     "message": "Búsqueda, dirección pública (0x) o ENS"
   },
+  "recoveryPhraseReminderBackupStart": {
+    "message": "Iniciar aquí"
+  },
+  "recoveryPhraseReminderConfirm": {
+    "message": "Entendido"
+  },
+  "recoveryPhraseReminderHasBackedUp": {
+    "message": "Guarde siempre su frase secreta de recuperación en un lugar seguro y secreto."
+  },
+  "recoveryPhraseReminderHasNotBackedUp": {
+    "message": "¿Necesita volver a crear una copia de seguridad de su frase secreta de recuperación?"
+  },
+  "recoveryPhraseReminderItemOne": {
+    "message": "No comparta nunca su frase secreta de recuperación con nadie."
+  },
+  "recoveryPhraseReminderItemTwo": {
+    "message": "El equipo de MetaMask nunca le pedirá su frase secreta de recuperación."
+  },
+  "recoveryPhraseReminderSubText": {
+    "message": "Mediante su frase secreta de recuperación, se controlan todas sus cuentas."
+  },
+  "recoveryPhraseReminderTitle": {
+    "message": "Proteja sus fondos."
+  },
   "reject": {
     "message": "Rechazar"
   },
@@ -1429,7 +1485,7 @@
     "message": "Rechazar todo"
   },
   "rejectTxsDescription": {
-    "message": "Está a punto de rechazar $1 transacciones en lote."
+    "message": "Está a punto de rechazar $1 transacciones en lote."
   },
   "rejectTxsN": {
     "message": "Rechazar $1 transacciones"
@@ -1544,7 +1600,7 @@
     "message": "Ingrese su frase secreta aquí para restaurar su bóveda."
   },
   "securityAndPrivacy": {
-    "message": "Seguridad y privacidad"
+    "message": "Seguridad y privacidad"
   },
   "securitySettingsDescription": {
     "message": "Configuración de privacidad y frase secreta de recuperación de la cartera"
@@ -1592,7 +1648,7 @@
     "message": "Pegar la frase secreta de recuperación desde el Portapapeles"
   },
   "seedPhraseReq": {
-    "message": "Las frases secretas de recuperación contienen 12, 15, 18, 21 o 24 palabras"
+    "message": "Las frases secretas de recuperación contienen 12, 15, 18, 21 o 24 palabras"
   },
   "selectAHigherGasFee": {
     "message": "Seleccione una cuota de gas más alta para acelerar el procesamiento de la transacción.*"
@@ -1911,7 +1967,7 @@
     "message": "Cuota de MetaMask"
   },
   "swapMetaMaskFeeDescription": {
-    "message": "Buscamos el mejor precio en las fuentes de liquidez más importantes, todo el tiempo. Se incorpora de manera automática a esta cotización una cuota del $1 %.",
+    "message": "Buscamos el mejor precio en las fuentes de liquidez más importantes, todo el tiempo. Se incorpora de manera automática a esta cotización una cuota del $1 %.",
     "description": "Provides information about the fee that metamask takes for swaps. $1 is a decimal number."
   },
   "swapNQuotes": {
@@ -1934,9 +1990,18 @@
     "description": "This message represents the price slippage for the swap.  $1 and $4 are a number (ex: 2.89), $2 and $5 are symbols (ex: ETH), and $3 and $6 are fiat currency amounts."
   },
   "swapPriceDifferenceTitle": {
-    "message": "Diferencia de precio de ~$1 %",
+    "message": "Diferencia de precio de ~$1 %",
     "description": "$1 is a number (ex: 1.23) that represents the price difference."
   },
+  "swapPriceImpactTooltip": {
+    "message": "El impacto sobre el precio es la diferencia entre el precio actual del mercado y el monto recibido durante la ejecución de la transacción. El impacto sobre el precio es una función del tamaño de su transacción respecto de la dimensión del fondo de liquidez."
+  },
+  "swapPriceUnavailableDescription": {
+    "message": "No se pudo determinar el impacto sobre el precio debido a la falta de datos de los precios del mercado. Antes de realizar el canje, confirme que está de acuerdo con la cantidad de tokens que está a punto de recibir."
+  },
+  "swapPriceUnavailableTitle": {
+    "message": "Antes de continuar, verifique su tasa"
+  },
   "swapProcessing": {
     "message": "Procesamiento"
   },
@@ -1947,7 +2012,7 @@
     "message": "Si el precio cambia entre el momento en que hace el pedido y cuando se confirma, se denomina \"desfase\". El canje se cancelará automáticamente si el desfase supera lo establecido en la configuración \"tolerancia de desfase\"."
   },
   "swapQuoteIncludesRate": {
-    "message": "La cotización incluye una cuota de MetaMask de $1 %",
+    "message": "La cotización incluye una cuota de MetaMask de $1 %",
     "description": "Provides information about the fee that metamask takes for swaps. $1 is a decimal number."
   },
   "swapQuoteNofN": {
@@ -2038,6 +2103,9 @@
     "message": "Canjear $1 por $2",
     "description": "Used in the transaction display list to describe a swap. $1 and $2 are the symbols of tokens in involved in a swap."
   },
+  "swapTokenVerificationAddedManually": {
+    "message": "Este token se añadió de forma manual."
+  },
   "swapTokenVerificationMessage": {
     "message": "Siempre confirme la dirección del token en $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\" followed by an info icon that shows more info on hover."
@@ -2053,7 +2121,7 @@
     "message": "Transacción completa"
   },
   "swapTwoTransactions": {
-    "message": "2 transacciones"
+    "message": "2 transacciones"
   },
   "swapUnknown": {
     "message": "Desconocido"
@@ -2070,13 +2138,13 @@
     "description": "Tells the user how much of a token they have in their balance. $1 is a decimal number amount of tokens, and $2 is a token symbol"
   },
   "swapZeroSlippage": {
-    "message": "0 % de desfase"
+    "message": "0 % de desfase"
   },
   "swapsAdvancedOptions": {
     "message": "Opciones avanzadas"
   },
   "swapsExcessiveSlippageWarning": {
-    "message": "El monto del desfase es muy alto, por lo que recibirá una tasa de conversión desfavorable. Disminuya su tolerancia de desfase a un valor menor al 15 %."
+    "message": "El monto del desfase es muy alto, por lo que recibirá una tasa de conversión desfavorable. Disminuya su tolerancia de desfase a un valor menor al 15 %."
   },
   "swapsMaxSlippage": {
     "message": "Tolerancia de desfase"
@@ -2116,7 +2184,7 @@
     "message": "Símbolo"
   },
   "symbolBetweenZeroTwelve": {
-    "message": "El símbolo debe tener 11 caracteres o menos."
+    "message": "El símbolo debe tener 11 caracteres o menos."
   },
   "syncWithMobile": {
     "message": "Sincronizar con dispositivo móvil"
@@ -2305,7 +2373,7 @@
     "message": "Las direcciones URL requieren el prefijo HTTP/HTTPS adecuado."
   },
   "urlExistsErrorMsg": {
-    "message": "La dirección URL ya está en la lista de redes existentes"
+    "message": "En este momento, la red $1 está utilizando esta dirección URL."
   },
   "usePhishingDetection": {
     "message": "Usar detección de phishing"
@@ -2327,6 +2395,10 @@
     "message": "Comprobar este token en $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\""
   },
+  "verifyThisUnconfirmedTokenOn": {
+    "message": "Verifique este token en $1 y asegúrese de que sea el token con el que quiere realizar la transacción.",
+    "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": "Ver cuenta"
   },
@@ -2361,7 +2433,7 @@
     "message": "Frase secreta de recuperación de la cartera"
   },
   "web3ShimUsageNotification": {
-    "message": "Parece que el sitio web actual intentó utilizar la API de window.web3 que se eliminó. Si el sitio no funciona, haga clic en $1 para obtener más información.",
+    "message": "Parece que el sitio web actual intentó utilizar la API de window.web3 que se eliminó. Si el sitio no funciona, haga clic en $1 para obtener más información.",
     "description": "$1 is a clickable link."
   },
   "welcome": {
diff --git a/app/_locales/hi/messages.json b/app/_locales/hi/messages.json
index b3a66b5c8..b975bf714 100644
--- a/app/_locales/hi/messages.json
+++ b/app/_locales/hi/messages.json
@@ -52,6 +52,10 @@
   "addContact": {
     "message": "संपर्क जोड़ें"
   },
+  "addCustomTokenByContractAddress": {
+    "message": "टोकन नहीं मिल रहा है? आप अपने पते को चिपकाकर मैन्युअल रूप से किसी भी टोकन को जोड़ सकते हैं। टोकन अनुबंध पते $1 पर मिल सकते हैं।",
+    "description": "$1 is a blockchain explorer for a specific network, e.g. Etherscan for Ethereum"
+  },
   "addEthereumChainConfirmationDescription": {
     "message": "इससे इस नेटवर्क को MetaMask के अंदर उपयोग करने की अनुमति मिलेगी।"
   },
@@ -282,6 +286,9 @@
   "chainIdDefinition": {
     "message": "इस नेटवर्क के लिए लेन-देन पर हस्ताक्षर करने के लिए उपयोग की जाने वाली चेन ID।"
   },
+  "chainIdExistsErrorMsg": {
+    "message": "यह चेन ID वर्तमान में $1 नेटवर्क द्वारा उपयोग किया जाता है।"
+  },
   "chromeRequiredForHardwareWallets": {
     "message": "अपने हार्डवेयर वॉलेट से कनेक्ट करने के लिए आपको Google Chrome पर MetaMask का उपयोग करने की आवश्यकता है।"
   },
@@ -407,6 +414,9 @@
   "continueToWyre": {
     "message": "Wyre पर जारी रखें"
   },
+  "contract": {
+    "message": "अनुबंध"
+  },
   "contractAddressError": {
     "message": "आप टोकन के अनुबंध पते पर टोकन भेज रहे हैं। इसके परिणामस्वरूप इन टोकनों का नुकसान हो सकता है।"
   },
@@ -621,7 +631,11 @@
     "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 आपके गुप्त रिकवरी फ्रेज़ को पुनर्प्राप्त नहीं कर सकता है।"
@@ -882,6 +896,16 @@
   "importAccountSeedPhrase": {
     "message": "गुप्त रिकवरी फ्रेज़ के साथ एक खाता आयात करें"
   },
+  "importAccountText": {
+    "message": "या $1",
+    "description": "$1 represents the text from `importAccountLinkText` as a link"
+  },
+  "importTokenQuestion": {
+    "message": "टोकन का आयात करें?"
+  },
+  "importTokenWarning": {
+    "message": "कोई भी किसी भी नाम के साथ एक टोकन बना सकता है, जिसमें मौजूदा टोकन के नकली संस्करण शामिल हैं। अपने जोखिम पर जोड़ें और व्यापार करें!"
+  },
   "importWallet": {
     "message": "वॉलेट आयात करें"
   },
@@ -1284,6 +1308,22 @@
     "message": "आपके \"सीड फ्रेज़\" को अब आपका \"गुप्त रिकवरी फ्रेज़\" कहा जाता है।",
     "description": "Description of a notification in the 'See What's New' popup. Describes the seed phrase wording update."
   },
+  "notifications6DescriptionOne": {
+    "message": "Chrome के संस्करण 91 से, वह API जो हमारे Ledger सपोर्ट (U2F) को सक्षम करती है वह अब हार्डवेयर वॉलेट का समर्थन नहीं करती। MetaMask ने एक नया Ledger Live सपोर्ट लागू किया है, जिसकी मदद से आप Ledger Live डेस्कटॉप ऐप के माध्यम से अपने Ledger डिवाइस से कनेक्ट करना जारी रख सकते हैं।",
+    "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
+  },
+  "notifications6DescriptionThree": {
+    "message": "MetaMask में अपने Ledger खाते पर काम करते समय, एक नया टैब खुल जाएगा और आपको Ledger Live ऐप खोलने के लिए कहा जाएगा।  ऐप खुलने के बाद, आपको अपने MetaMask खाते के लिए एक WebSocket कनेक्शन को अनुमति देने के लिए कहा जाएगा।  बस इतना ही!",
+    "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
+  },
+  "notifications6DescriptionTwo": {
+    "message": "आप सेटिंग > उन्नत > Ledger Live का उपयोग करें पर क्लिक करके Ledger Live सहायता को सक्षम कर सकते हैं।",
+    "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
+  },
+  "notifications6Title": {
+    "message": "Chrome उपयोगकर्ताओं के लिए Ledger सहायता अद्यतन",
+    "description": "Title for a notification in the 'See What's New' popup. Lets users know about the Ledger support update"
+  },
   "ofTextNofM": {
     "message": "/"
   },
@@ -1414,6 +1454,30 @@
   "recipientAddressPlaceholder": {
     "message": "खोज, सार्वजनिक पता (0x) या ENS"
   },
+  "recoveryPhraseReminderBackupStart": {
+    "message": "यहाँ से प्रारंभ करें"
+  },
+  "recoveryPhraseReminderConfirm": {
+    "message": "समझ गया"
+  },
+  "recoveryPhraseReminderHasBackedUp": {
+    "message": "अपने गुप्त रिकवरी फ्रेज़ को हमेशा सुरक्षित और गुप्त स्थान पर रखें।"
+  },
+  "recoveryPhraseReminderHasNotBackedUp": {
+    "message": "अपने गुप्त रिकवरी फ्रेज़ को फिर से बैकअप करने की आवश्यकता है?"
+  },
+  "recoveryPhraseReminderItemOne": {
+    "message": "कभी भी अपना गुप्त रिकवरी फ्रेज़ किसी के साथ साझा न करें"
+  },
+  "recoveryPhraseReminderItemTwo": {
+    "message": "MetaMask टीम कभी भी आपके गुप्त रिकवरी फ्रेज़ के बारे में नहीं पूछेगा"
+  },
+  "recoveryPhraseReminderSubText": {
+    "message": "आपका गुप्त रिकवरी फ्रेज़ आपके सभी खातों को नियंत्रित करता है।"
+  },
+  "recoveryPhraseReminderTitle": {
+    "message": "अपने धन को सुरक्षित रखें"
+  },
   "reject": {
     "message": "अस्वीकार करें"
   },
@@ -1541,6 +1605,42 @@
   "securitySettingsDescription": {
     "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": "शुरुआत करने से पहले, अपने रिकवरी फ्रेज़ और अपने वॉलेट को सुरक्षित रखने के तरीके के बारे में जानने के लिए यह छोटा-सा वीडियो देखें।"
+  },
   "seedPhrasePlaceholder": {
     "message": "प्रत्येक शब्द को एक रिक्ति से अलग करें"
   },
@@ -2003,6 +2103,9 @@
     "message": "$1 से $2 में स्वैप करें",
     "description": "Used in the transaction display list to describe a swap. $1 and $2 are the symbols of tokens in involved in a swap."
   },
+  "swapTokenVerificationAddedManually": {
+    "message": "इस टोकन को मैन्युअल रूप से जोड़ा गया है।"
+  },
   "swapTokenVerificationMessage": {
     "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\" followed by an info icon that shows more info on hover."
@@ -2270,7 +2373,7 @@
     "message": "URL को उपयुक्त HTTP/HTTPS उपसर्ग की आवश्यकता होती है।"
   },
   "urlExistsErrorMsg": {
-    "message": "URL नेटवर्क की मौजूदा सूची में पहले से मौजूद है"
+    "message": "यह URL वर्तमान में $1 नेटवर्क द्वारा उपयोग किया जाता है।"
   },
   "usePhishingDetection": {
     "message": "फ़िशिंग डिटेक्शन का उपयोग करें"
@@ -2292,6 +2395,10 @@
     "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\""
   },
+  "verifyThisUnconfirmedTokenOn": {
+    "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": "खाता देखें"
   },
@@ -2325,6 +2432,10 @@
   "walletSeedRestore": {
     "message": "वॉलेट का गुप्त रिकवरी फ्रेज़"
   },
+  "web3ShimUsageNotification": {
+    "message": "हमने देखा है कि वर्तमान वेबसाइट ने हटाए गए window.web3 API का उपयोग करने की कोशिश की। यदि साइट में गड़बड़ी लगती है, तो कृपया अधिक जानकारी के लिए $1 पर क्लिक करें।",
+    "description": "$1 is a clickable link."
+  },
   "welcome": {
     "message": "MetaMask में आपका स्वागत है"
   },
diff --git a/app/_locales/id/messages.json b/app/_locales/id/messages.json
index 8ca4b680f..7a649946a 100644
--- a/app/_locales/id/messages.json
+++ b/app/_locales/id/messages.json
@@ -52,6 +52,10 @@
   "addContact": {
     "message": "Tambah kontak"
   },
+  "addCustomTokenByContractAddress": {
+    "message": "Tidak dapat menemukan token? Anda dapat menambahkan token secara manual dengan menempelkan alamatnya. Alamat kontrak token dapat ditemukan di $1.",
+    "description": "$1 is a blockchain explorer for a specific network, e.g. Etherscan for Ethereum"
+  },
   "addEthereumChainConfirmationDescription": {
     "message": "Ini akan memungkinkan jaringan ini digunakan dengan MetaMask."
   },
@@ -282,6 +286,9 @@
   "chainIdDefinition": {
     "message": "ID rantai digunakan untuk menandatangani transaksi untuk jaringan ini."
   },
+  "chainIdExistsErrorMsg": {
+    "message": "ID Rantai ini saat ini digunakan oleh jaringan $1."
+  },
   "chromeRequiredForHardwareWallets": {
     "message": "Anda perlu menggunakan MetaMask di Google Chrome untuk terhubung ke Dompet Perangkat Keras Anda."
   },
@@ -407,6 +414,9 @@
   "continueToWyre": {
     "message": "Lanjutkan ke Wyre"
   },
+  "contract": {
+    "message": "Kontrak"
+  },
   "contractAddressError": {
     "message": "Anda mengirim token ke alamat kontrak token. Ini dapat mengakibatkan token ini hilang."
   },
@@ -623,6 +633,10 @@
   "endOfFlowMessage6": {
     "message": "Jika Anda perlu mencadangkan Frasa Pemulihan Rahasia lagi, Anda dapat menemukannya di Pengaturan -> Keamanan."
   },
+  "endOfFlowMessage7": {
+    "message": "Jika Anda memiliki pertanyaan atau melihat sesuatu yang mencurigakan, hubungi dukungan $1 kami.",
+    "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 tidak dapat memulihkan Frasa Pemulihan Rahasia Anda."
   },
@@ -882,6 +896,16 @@
   "importAccountSeedPhrase": {
     "message": "Impor akun dengan Frasa Pemulihan Rahasia"
   },
+  "importAccountText": {
+    "message": "atau $1",
+    "description": "$1 represents the text from `importAccountLinkText` as a link"
+  },
+  "importTokenQuestion": {
+    "message": "Impor token?"
+  },
+  "importTokenWarning": {
+    "message": "Siapa pun dapat membuat token dengan nama apa pun, termasuk versi palsu dari token yang ada. Tambahkan dan perdagangkan dengan risiko Anda sendiri!"
+  },
   "importWallet": {
     "message": "Impor dompet"
   },
@@ -1284,6 +1308,22 @@
     "message": "\"Frasa Pemulihan\" Anda kini disebut \"Frasa Pemulihan Rahasia.\"",
     "description": "Description of a notification in the 'See What's New' popup. Describes the seed phrase wording update."
   },
+  "notifications6DescriptionOne": {
+    "message": "Pada Chrome versi 91, API yang memungkinkan dukungan Ledger (U2F) kami tidak lagi mendukung dompet perangkat keras. MetaMask telah menerapkan dukungan Ledger Live baru yang memungkinkan Anda terus terhubung ke perangkat Ledger Anda melalui aplikasi desktop Ledger Live.",
+    "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
+  },
+  "notifications6DescriptionThree": {
+    "message": "Saat berinteraksi dengan akun Ledger Anda di MetaMask, tab baru akan terbuka dan Anda akan diminta untuk membuka aplikasi Ledger Live.  Setelah aplikasi tersebut terbuka, Anda akan diminta untuk mengizinkan koneksi WebSocket ke akun MetaMask Anda.  Tidak diperlukan tindakan lebih lanjut.",
+    "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
+  },
+  "notifications6DescriptionTwo": {
+    "message": "Anda dapat mengaktifkan dukungan Ledger Live dengan mengklik Pengaturan > Lanjutan > Gunakan Ledger Live.",
+    "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
+  },
+  "notifications6Title": {
+    "message": "Pembaruan Dukungan Ledger untuk Pengguna Chrome",
+    "description": "Title for a notification in the 'See What's New' popup. Lets users know about the Ledger support update"
+  },
   "ofTextNofM": {
     "message": "dari"
   },
@@ -1414,6 +1454,30 @@
   "recipientAddressPlaceholder": {
     "message": "Cari, alamat publik (0x), atau ENS"
   },
+  "recoveryPhraseReminderBackupStart": {
+    "message": "Mulai di sini"
+  },
+  "recoveryPhraseReminderConfirm": {
+    "message": "Mengerti"
+  },
+  "recoveryPhraseReminderHasBackedUp": {
+    "message": "Jaga selalu Frasa Pemulihan Rahasia Anda di tempat yang aman dan rahasia"
+  },
+  "recoveryPhraseReminderHasNotBackedUp": {
+    "message": "Perlu mencadangkan Frasa Pemulihan Rahasia Anda lagi?"
+  },
+  "recoveryPhraseReminderItemOne": {
+    "message": "Jangan membagikan Frasa Pemulihan Rahasia Anda kepada siapa pun"
+  },
+  "recoveryPhraseReminderItemTwo": {
+    "message": "Tim MetaMask tidak akan pernah meminta Frasa Pemulihan Rahasia Anda"
+  },
+  "recoveryPhraseReminderSubText": {
+    "message": "Frasa Pemulihan Rahasia Anda mengendalikan semua akun Anda."
+  },
+  "recoveryPhraseReminderTitle": {
+    "message": "Lindungi dana Anda"
+  },
   "reject": {
     "message": "Tolak"
   },
@@ -1439,7 +1503,7 @@
     "message": "Hapus akun"
   },
   "removeAccountDescription": {
-    "message": "Akun ini akan dihapus dari dompet Anda. Pastikan Anda memiliki Frasa Pemulihan Rahasia asli atau kunci privat untuk akun impor ini sebelum melanjutkan. Anda dapat mengimpor atau membuat akun lagi dari drop down akun. "
+    "message": "Akun ini akan dihapus dari dompet Anda. Pastikan Anda memiliki Frasa Pemulihan Rahasia asli atau kunci privat untuk akun impor ini sebelum melanjutkan. Anda dapat mengimpor atau membuat akun lagi dari akun drop down. "
   },
   "requestsAwaitingAcknowledgement": {
     "message": "permintaan menunggu untuk diakui"
@@ -1541,6 +1605,42 @@
   "securitySettingsDescription": {
     "message": "Pengaturan privasi dan Frasa Pemulihan Rahasia dompet"
   },
+  "seedPhraseIntroSidebarBulletFour": {
+    "message": "Tuliskan dan simpan di beberapa tempat rahasia."
+  },
+  "seedPhraseIntroSidebarBulletOne": {
+    "message": "Simpan dalam pengelola kata sandi"
+  },
+  "seedPhraseIntroSidebarBulletThree": {
+    "message": "Simpan di kotak deposit yang aman."
+  },
+  "seedPhraseIntroSidebarBulletTwo": {
+    "message": "Simpan di vault bank."
+  },
+  "seedPhraseIntroSidebarCopyOne": {
+    "message": "Frasa pemulihan Anda adalah “kunci induk” ke dompet dan dana Anda."
+  },
+  "seedPhraseIntroSidebarCopyThree": {
+    "message": "Jika seseorang menanyakan frasa pemulihan Anda, kemungkinan mereka akan mencoba menipu Anda."
+  },
+  "seedPhraseIntroSidebarCopyTwo": {
+    "message": "Jangan pernah membagikan frasa pemulihan Anda bahkan kepada MetaMask!"
+  },
+  "seedPhraseIntroSidebarTitleOne": {
+    "message": "Apa itu frasa pemulihan?"
+  },
+  "seedPhraseIntroSidebarTitleThree": {
+    "message": "Haruskah saya membagikan frasa pemulihan saya?"
+  },
+  "seedPhraseIntroSidebarTitleTwo": {
+    "message": "Bagaimana cara menyimpan frasa pemulihan saya?"
+  },
+  "seedPhraseIntroTitle": {
+    "message": "Amankan dompet Anda"
+  },
+  "seedPhraseIntroTitleCopy": {
+    "message": "Sebelum memulai, lihat video singkat ini untuk mempelajari tentang frasa pemulihan Anda dan cara menjaga keamanan dompet Anda."
+  },
   "seedPhrasePlaceholder": {
     "message": "Pisahkan setiap kata dengan satu spasi"
   },
@@ -2003,6 +2103,9 @@
     "message": "Tukar $1 untuk $2",
     "description": "Used in the transaction display list to describe a swap. $1 and $2 are the symbols of tokens in involved in a swap."
   },
+  "swapTokenVerificationAddedManually": {
+    "message": "Token ini telah ditambahkan secara manual."
+  },
   "swapTokenVerificationMessage": {
     "message": "Selalu konfirmasikan alamat token di $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\" followed by an info icon that shows more info on hover."
@@ -2270,7 +2373,7 @@
     "message": "URL memerlukan awalan HTTP/HTTPS yang sesuai."
   },
   "urlExistsErrorMsg": {
-    "message": "URL sudah ada dalam daftar jaringan yang ada"
+    "message": "URL ini saat ini digunakan oleh jaringan $1."
   },
   "usePhishingDetection": {
     "message": "Menggunakan Deteksi Phishing"
@@ -2292,6 +2395,10 @@
     "message": "Verifikasikan token ini di $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\""
   },
+  "verifyThisUnconfirmedTokenOn": {
+    "message": "Verifikasi token ini di $1 dan pastikan ini adalah token yang ingin Anda perdagangkan.",
+    "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": "Lihat Akun"
   },
@@ -2325,6 +2432,10 @@
   "walletSeedRestore": {
     "message": "Frasa Pemulihan Rahasia Dompet"
   },
+  "web3ShimUsageNotification": {
+    "message": "Kami melihat situs web saat ini mencoba menggunakan API window.web3 yang dihapus. Jika situs tersebut tampak bermasalah, silakan klik $1 untuk informasi selengkapnya.",
+    "description": "$1 is a clickable link."
+  },
   "welcome": {
     "message": "Selamat datang di MetaMask"
   },
diff --git a/app/_locales/ja/messages.json b/app/_locales/ja/messages.json
index 9ffc5b75f..71c9ef90f 100644
--- a/app/_locales/ja/messages.json
+++ b/app/_locales/ja/messages.json
@@ -52,6 +52,10 @@
   "addContact": {
     "message": "連絡先の追加"
   },
+  "addCustomTokenByContractAddress": {
+    "message": "トークンを発見できませんか?アドレスをペーストすることで手動でトークンを追加することができます。トークン コントラクト アドレスは $1 にあります。",
+    "description": "$1 is a blockchain explorer for a specific network, e.g. Etherscan for Ethereum"
+  },
   "addEthereumChainConfirmationDescription": {
     "message": "これにより、このネットワークは MetaMask 内で使用できるようになります。"
   },
@@ -109,7 +113,7 @@
     "message": "アグリゲーター ネットワーク料金"
   },
   "alertDisableTooltip": {
-    "message": "\"設定 > 警告\" の設定で変更できます"
+    "message": "これは、[\"設定 > 警告\"] で変更できます"
   },
   "alertSettingsUnconnectedAccount": {
     "message": "選択した未接続のアカウントを使用して Web サイトをブラウズしています"
@@ -282,6 +286,9 @@
   "chainIdDefinition": {
     "message": "このネットワークのトランザクションの署名に使用されるチェーン ID。"
   },
+  "chainIdExistsErrorMsg": {
+    "message": "このチェーン ID は現在 $1 ネットワークで使用しています。"
+  },
   "chromeRequiredForHardwareWallets": {
     "message": "ハードウェア ウォレットに接続するには、MetaMask on Google Chrome を使用する必要があります。"
   },
@@ -407,6 +414,9 @@
   "continueToWyre": {
     "message": "Wyre に進む"
   },
+  "contract": {
+    "message": "コントラクト"
+  },
   "contractAddressError": {
     "message": "トークンのコントラクト アドレスにトークンを送信しています。これにより、これらのトークンが失われる可能性があります。"
   },
@@ -621,7 +631,11 @@
     "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 はシークレット リカバリー フレーズを復元できません。"
@@ -882,6 +896,16 @@
   "importAccountSeedPhrase": {
     "message": "シークレット リカバリー フレーズを使用してアカウントをインポートする:"
   },
+  "importAccountText": {
+    "message": "または $1",
+    "description": "$1 represents the text from `importAccountLinkText` as a link"
+  },
+  "importTokenQuestion": {
+    "message": "トークンをインポートしますか?"
+  },
+  "importTokenWarning": {
+    "message": "誰でも既存のトークンの偽バージョンを含めて、任意の名前でトークンを作成することができます。自己責任で追加およびトレードしてください。"
+  },
   "importWallet": {
     "message": "ウォレットのインポート"
   },
@@ -1284,6 +1308,22 @@
     "message": "これで、\"シード フレーズ\" は \"シークレット リカバリー フレーズ\" と呼ばれます。",
     "description": "Description of a notification in the 'See What's New' popup. Describes the seed phrase wording update."
   },
+  "notifications6DescriptionOne": {
+    "message": "Chrome バージョン 91 以降は、レジャーのサポート (U2F) を可能にした API がハードウェア ウォレットをサポートしなくなります。MetaMask では、ユーザーがレジャー ライブのデスクトップ アプリを介して、レジャー デバイスに継続的に接続することができる新しいレジャー ライブのサポートを導入しました。",
+    "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
+  },
+  "notifications6DescriptionThree": {
+    "message": "MetaMask のレジャーのアカウントを使用する際は、新しいタブが開き、レジャー ライブのアプリを開くよう指示されます。アプリが開いたら、WebSocket 接続を MetaMask のアカウントに許可するよう指示されます。以上です。",
+    "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
+  },
+  "notifications6DescriptionTwo": {
+    "message": "[設定] > [詳細] > [レジャー ライブを使用] の順にクリックすることで、レジャー ライブのサポートを有効にすることができます。",
+    "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
+  },
+  "notifications6Title": {
+    "message": "Chrome ユーザー向けのレジャーのサポートの更新",
+    "description": "Title for a notification in the 'See What's New' popup. Lets users know about the Ledger support update"
+  },
   "ofTextNofM": {
     "message": "中の"
   },
@@ -1414,6 +1454,30 @@
   "recipientAddressPlaceholder": {
     "message": "検索、パブリック アドレス (0x)、または ENS"
   },
+  "recoveryPhraseReminderBackupStart": {
+    "message": "ここから開始"
+  },
+  "recoveryPhraseReminderConfirm": {
+    "message": "OK"
+  },
+  "recoveryPhraseReminderHasBackedUp": {
+    "message": "シークレット リカバリー フレーズは常に安全かつ秘密の場所に保管してください"
+  },
+  "recoveryPhraseReminderHasNotBackedUp": {
+    "message": "シークレット リカバリー フレーズのバックアップが必要ですか？"
+  },
+  "recoveryPhraseReminderItemOne": {
+    "message": "シークレット リカバリー フレーズは誰とも決して共有しないでください"
+  },
+  "recoveryPhraseReminderItemTwo": {
+    "message": "MetaMask チームが、ユーザーのシークレット リカバリー フレーズを確認することは絶対にありません"
+  },
+  "recoveryPhraseReminderSubText": {
+    "message": "シークレット リカバリー フレーズは、ご利用のすべてのアカウントを制御します。"
+  },
+  "recoveryPhraseReminderTitle": {
+    "message": "資産を保護してください"
+  },
   "reject": {
     "message": "拒否"
   },
@@ -1541,6 +1605,42 @@
   "securitySettingsDescription": {
     "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": "始める前に、この短いビデオを見て、リカバリー フレーズとウォレットを安全に保つ方法について確認してください。"
+  },
   "seedPhrasePlaceholder": {
     "message": "単語ごとにスペースを 1 つ置いて分離します"
   },
@@ -1893,6 +1993,15 @@
     "message": "約 $1% の価格差",
     "description": "$1 is a number (ex: 1.23) that represents the price difference."
   },
+  "swapPriceImpactTooltip": {
+    "message": "プライスインパクトとは、現在の市場価格と取引の約定時に受け取った金額の差のことです。プライスインパクトとは、流動性プールの大きさに対するあなたのトレードの大きさを表わす関数です。"
+  },
+  "swapPriceUnavailableDescription": {
+    "message": "市場価格のデータが不足しているため、プライスインパクトを測定できませんでした。スワップする前に、これから受領するトークンの額に問題がないか確認してください。"
+  },
+  "swapPriceUnavailableTitle": {
+    "message": "続行する前にレートを確認してください"
+  },
   "swapProcessing": {
     "message": "処理中"
   },
@@ -1994,6 +2103,9 @@
     "message": "$1 を $2 にスワップ",
     "description": "Used in the transaction display list to describe a swap. $1 and $2 are the symbols of tokens in involved in a swap."
   },
+  "swapTokenVerificationAddedManually": {
+    "message": "このトークンは手動で追加されました。"
+  },
   "swapTokenVerificationMessage": {
     "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\" followed by an info icon that shows more info on hover."
@@ -2261,7 +2373,7 @@
     "message": "URL には適切な HTTP/HTTPS プレフィックスが必要です。"
   },
   "urlExistsErrorMsg": {
-    "message": "URL はネットワークの既存のリストに既に存在します"
+    "message": "この URL は現在 $1 ネットワークで使用しています。"
   },
   "usePhishingDetection": {
     "message": "フィッシング検出を使用"
@@ -2283,6 +2395,10 @@
     "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\""
   },
+  "verifyThisUnconfirmedTokenOn": {
+    "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": "アカウントを表示"
   },
diff --git a/app/_locales/ko/messages.json b/app/_locales/ko/messages.json
index 068dc1bf2..b063ea504 100644
--- a/app/_locales/ko/messages.json
+++ b/app/_locales/ko/messages.json
@@ -6,7 +6,7 @@
     "message": "버전, 지원 센터, 연락처"
   },
   "acceleratingATransaction": {
-    "message": "* 높은 Gas 가격을 이용한 거래 가속화는 네트워크를 통한 처리 속도 개선 확률을 높이지만, 항상 그렇지는 않습니다."
+    "message": "* 높은 Gas 가격을 이용해 거래를 가속화하면 네트워크를 통한 처리 속도가 개선되지만 항상 그렇지는 않습니다."
   },
   "acceptTermsOfUse": {
     "message": "$1을(를) 읽고 이에 동의합니다.",
@@ -52,22 +52,26 @@
   "addContact": {
     "message": "연락처 추가"
   },
+  "addCustomTokenByContractAddress": {
+    "message": "이 토큰을 찾을 수 없으신가요? 토큰 주소를 붙여넣으면 토큰을 직접 추가할 수 있습니다. 토큰의 계약 주소는 $1에서 찾을 수 있습니다.",
+    "description": "$1 is a blockchain explorer for a specific network, e.g. Etherscan for Ethereum"
+  },
   "addEthereumChainConfirmationDescription": {
-    "message": "이는 이 네트워크가 MetaMask 내에서 사용될 수 있도록 합니다."
+    "message": "이렇게 하면 이 네트워크가 MetaMask 내에서 사용됩니다."
   },
   "addEthereumChainConfirmationRisks": {
     "message": "MetaMask는 맞춤형 네트워크를 검증하지 않습니다."
   },
   "addEthereumChainConfirmationRisksLearnMore": {
-    "message": "$1에 대해 자세히 알아보십시오.",
+    "message": "$1에 대해 자세히 알아보세요.",
     "description": "$1 is a link with text that is provided by the 'addEthereumChainConfirmationRisksLearnMoreLink' key"
   },
   "addEthereumChainConfirmationRisksLearnMoreLink": {
-    "message": "사기와 보안 위험에 대해 자세히 알아보기",
+    "message": "사기와 네트워크 보안 위험",
     "description": "Link text for the 'addEthereumChainConfirmationRisksLearnMore' translation key"
   },
   "addEthereumChainConfirmationTitle": {
-    "message": "이 사이트에서 네트워크를 추가하도록 허용하시겠습니까?"
+    "message": "이 사이트에서 네트워크를 추가하도록 허용하시겠어요?"
   },
   "addFriendsAndAddresses": {
     "message": "신뢰하는 친구와 주소 추가하기"
@@ -106,7 +110,7 @@
     "message": "동의함"
   },
   "aggregatorFeeCost": {
-    "message": "애그리게이터 네트워크 요금"
+    "message": "애그리게이터 네트워크 수수료"
   },
   "alertDisableTooltip": {
     "message": "\"설정 > 경고\"에서 변경할 수 있습니다."
@@ -118,10 +122,10 @@
     "message": "이 경고는 연결된 web3 사이트를 탐색하고 있지만 현재 선택된 계정이 연결되지 않은 경우 팝업에 표시됩니다."
   },
   "alertSettingsWeb3ShimUsage": {
-    "message": "웹사이트가 제거된 window.web3 API를 이용하려 할 때"
+    "message": "웹사이트가 제거된 window.web3 API를 이용하는 경우"
   },
   "alertSettingsWeb3ShimUsageDescription": {
-    "message": "이 경고는 제거된 window.web3 API를 이용하는 사이트를 탐색할 때 팝업에 표시되며 손상이 발생할 수 있습니다."
+    "message": "이 경고는 제거된 window.web3 API를 이용하려고 시도하여 결과적으로 작동하지 않을 수 있는 사이트를 탐색할 때 팝업으로 표시됩니다."
   },
   "alerts": {
     "message": "경고"
@@ -133,7 +137,7 @@
     "message": "이 외부 확장을 통해 다음을 하도록 허용:"
   },
   "allowOriginSpendToken": {
-    "message": "$1에서 $2을(를) 사용하도록 허용하시겠습니까?",
+    "message": "$1에서 $2을(를) 지출하도록 허용하시겠어요?",
     "description": "$1 is the url of the site and $2 is the symbol of the token they are requesting to spend"
   },
   "allowThisSiteTo": {
@@ -158,7 +162,7 @@
     "description": "The name of the application"
   },
   "approvalAndAggregatorTxFeeCost": {
-    "message": "승인 및 애그리게이터 네트워크 요금"
+    "message": "승인 및 애그리게이터 네트워크 수수료"
   },
   "approvalTxGasCost": {
     "message": "승인 Tx Gas 비용"
@@ -186,13 +190,13 @@
     "message": "자산"
   },
   "attemptToCancel": {
-    "message": "취소하시겠습니까?"
+    "message": "취소하시겠어요?"
   },
   "attemptToCancelDescription": {
     "message": "이 시도를 제출한다고 해서 원래 거래가 반드시 취소되지는 않습니다. 취소 시도가 성공하면 위의 거래 수수료가 부과됩니다."
   },
   "attemptingConnect": {
-    "message": "블록체인 연결 시도 중입니다."
+    "message": "블록체인에 연결 중입니다."
   },
   "attributions": {
     "message": "속성"
@@ -216,10 +220,10 @@
     "message": "전체 목록으로 돌아가기"
   },
   "backupApprovalInfo": {
-    "message": "이 비밀 코드는 장치를 분실하여 지갑을 복구하거나, 암호를 잊거나, MetaMask를 다시 설치해야 하거나, 다른 장치에서 지갑에 액세스해야 할 때 필요합니다."
+    "message": "이 비밀 코드는 장치를 분실하여 지갑을 복구해야 하거나, 암호를 잊었거나, MetaMask를 다시 설치해야 하거나, 다른 장치에서 지갑에 액세스해야 할 때 필요합니다."
   },
   "backupApprovalNotice": {
-    "message": "비밀 복구 코드를 백업하여 지갑과 자금을 안전하게 보호하십시오."
+    "message": "시드 코드를 백업하여 지갑과 자금을 안전하게 보호하세요."
   },
   "backupNow": {
     "message": "지금 백업"
@@ -282,11 +286,14 @@
   "chainIdDefinition": {
     "message": "이 네트워크의 거래에 서명하는 데 사용되는 체인 ID입니다."
   },
+  "chainIdExistsErrorMsg": {
+    "message": "이 체인 ID는 현재 $1 네트워크에서 사용됩니다."
+  },
   "chromeRequiredForHardwareWallets": {
     "message": "하드웨어 지갑에 연결하려면 Google Chrome에서 MetaMask를 사용해야 합니다."
   },
   "clickToRevealSeed": {
-    "message": "암호를 표시하려면 여기를 클릭하세요"
+    "message": "비밀 단어를 표시하려면 여기를 클릭하세요."
   },
   "close": {
     "message": "닫기"
@@ -304,13 +311,13 @@
     "message": "확인됨"
   },
   "confusableUnicode": {
-    "message": "'$1'은 '$2'와 유사합니다."
+    "message": "'$1'은(는) '$2'와(과) 유사합니다."
   },
   "confusableZeroWidthUnicode": {
     "message": "폭이 0인 문자를 발견했습니다."
   },
   "confusingEnsDomain": {
-    "message": "ENS 이름에서 혼동하기 쉬운 문자를 발견했습니다. 잠재적 사기를 막기 위해 ENS 이름을 확인하십시오."
+    "message": "ENS 이름에서 혼동하기 쉬운 문자를 발견했습니다. 잠재적 사기를 막기 위해 ENS 이름을 확인하세요."
   },
   "congratulations": {
     "message": "축하합니다."
@@ -344,7 +351,7 @@
     "description": "$1 will be replaced by the translation of connectToMultipleNumberOfAccounts"
   },
   "connectToMultipleNumberOfAccounts": {
-    "message": "$1 계정",
+    "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": {
@@ -364,7 +371,7 @@
     "message": "연결된 사이트"
   },
   "connectedSitesDescription": {
-    "message": "$1이(가) 이 사이트에 연결되어 있습니다. 귀하의 계정 주소를 볼 수 있습니다.",
+    "message": "$1이(가) 이 사이트에 연결되어 귀하의 계정 주소를 볼 수 있습니다.",
     "description": "$1 is the account name"
   },
   "connectedSitesEmptyDescription": {
@@ -393,7 +400,7 @@
     "message": "Ropsten 테스트 네트워크에 연결 중"
   },
   "contactUs": {
-    "message": "당사에 문의하세요"
+    "message": "문의하기"
   },
   "contacts": {
     "message": "연락처"
@@ -407,8 +414,11 @@
   "continueToWyre": {
     "message": "Wyre로 넘어가기"
   },
+  "contract": {
+    "message": "계약"
+  },
   "contractAddressError": {
-    "message": "토큰의 계약 주소로 토큰을 보냅니다. 토큰이 손실될 수 있습니다."
+    "message": "토큰의 계약 주소로 토큰을 보냅니다. 이로 인해 토큰이 손실될 수 있습니다."
   },
   "contractDeployment": {
     "message": "계약 배포"
@@ -468,7 +478,7 @@
     "message": "Gas 맞춤화"
   },
   "customGasSubTitle": {
-    "message": "요금을 올리면 처리 시간이 줄어들 수 있지만 반드시 그렇지는 않습니다."
+    "message": "수수료를 올리면 처리 시간이 단축되기도 하지만 항상 그렇지는 않습니다."
   },
   "customRPC": {
     "message": "맞춤형 RPC"
@@ -480,7 +490,7 @@
     "message": "맞춤형 토큰"
   },
   "dataBackupFoundInfo": {
-    "message": "계정 데이터 일부가 MetaMask 이전 설치 도중에 백업되었습니다. 여기에는 설정, 연락처, 토큰이 포함될 수 있습니다. 지금 이 데이터를 복구하시겠습니까?"
+    "message": "일부 계정 데이터가 이전의 MetaMask 설치 도중에 백업되었습니다. 여기에는 설정, 연락처, 토큰이 포함될 수 있습니다. 지금 이 데이터를 복구하시겠어요?"
   },
   "decimal": {
     "message": "토큰 십진수"
@@ -509,7 +519,7 @@
     "message": "요청 암호 해독"
   },
   "defaultNetwork": {
-    "message": "Ether 거래의 기존 네트워크는 메인 넷입니다."
+    "message": "Ether 거래의 기본 네트워크는 메인 넷입니다."
   },
   "delete": {
     "message": "삭제"
@@ -518,10 +528,10 @@
     "message": "계정 삭제"
   },
   "deleteNetwork": {
-    "message": "네트워크를 삭제합니까?"
+    "message": "네트워크를 삭제하시겠어요?"
   },
   "deleteNetworkDescription": {
-    "message": "이 네트워크를 삭제하시겠습니까?"
+    "message": "이 네트워크를 삭제하시겠어요?"
   },
   "depositEther": {
     "message": "Ether 예치"
@@ -542,7 +552,7 @@
     "message": "모든 계정 연결 해제"
   },
   "disconnectAllAccountsConfirmationDescription": {
-    "message": "이 네트워크의 연결을 해제하시겠습니까? 사이트 기능을 이용하지 못하게 될 수도 있습니다."
+    "message": "연결을 해제하시겠어요? 사이트 기능을 이용하지 못하게 될 수도 있습니다."
   },
   "disconnectPrompt": {
     "message": "$1 연결 해제"
@@ -554,10 +564,10 @@
     "message": "해지"
   },
   "dismissReminderDescriptionField": {
-    "message": "이것을 켜서 복구 구문 백업 알림 메시지를 해지하십시오. 지갑을 복원할 수 있도록 비밀 복구 구문을 저장할 것을 강력하게 권장합니다."
+    "message": "이 기능을 켜면 복구 구문 백업 알림 메시지를 해지할 수 있습니다. 단, 자금 손실을 방지하려면 비밀 복구 구문을 백업하는 것이 좋습니다."
   },
   "dismissReminderField": {
-    "message": "복구 구문 백업 알림을 해지하십시오."
+    "message": "복구 구문 백업 알림 해지"
   },
   "domain": {
     "message": "도메인"
@@ -566,7 +576,7 @@
     "message": "완료"
   },
   "dontShowThisAgain": {
-    "message": "이 메시지를 다시 표시하지 않음"
+    "message": "다시 표시 안 함"
   },
   "downloadGoogleChrome": {
     "message": "Google Chrome 다운로드"
@@ -590,20 +600,20 @@
     "message": "임시값 편집"
   },
   "editNonceMessage": {
-    "message": "이것은 고급 기능으로, 주의해서 사용해야 합니다."
+    "message": "이는 고급 기능으로, 주의해서 사용해야 합니다."
   },
   "editPermission": {
     "message": "권한 편집"
   },
   "encryptionPublicKeyNotice": {
-    "message": "$1에서 귀하의 공개 암호화 키를 요구합니다. 동의하면 이 사이트에서 암호화된 메시지를 작성하여 귀하에게 전송할 수 있습니다.",
+    "message": "$1에서 귀하의 공개 암호화 키를 요구합니다. 동의를 받으면 이 사이트에서 암호화된 메시지를 작성하여 귀하에게 전송할 수 있습니다.",
     "description": "$1 is the web3 site name"
   },
   "encryptionPublicKeyRequest": {
     "message": "암호화 공개 키 요구"
   },
   "endOfFlowMessage1": {
-    "message": "테스트를 통과하셨습니다. 비밀 복구 구문을 안전하게 보관할 책임은 귀하에게 있습니다!"
+    "message": "테스트를 통과하셨습니다. 비밀 복구 구문을 안전하게 보관할 책임은 본인에게 있습니다."
   },
   "endOfFlowMessage10": {
     "message": "모두 완료"
@@ -618,10 +628,14 @@
     "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에서는 계정 시드 구문을 복구할 수 없습니다."
@@ -687,7 +701,7 @@
     "message": "예상 처리 시간"
   },
   "ethGasPriceFetchWarning": {
-    "message": "현재 주요 가스 견적 서비스를 사용할 수 없으므로 백업 가스 가격을 제공합니다."
+    "message": "현재 주요 Gas 견적 서비스를 사용할 수 없으므로 백업 Gas 가격을 제공합니다."
   },
   "eth_accounts": {
     "message": "허용되는 계정의 주소 보기(필수)",
@@ -712,7 +726,7 @@
     "message": "외부 확장"
   },
   "extraApprovalGas": {
-    "message": "+$1 승인 Gas",
+    "message": "+$1의 승인 Gas",
     "description": "Expresses an additional gas amount the user will have to pay, on top of some other displayed amount. $1 is a decimal amount of gas"
   },
   "failed": {
@@ -731,14 +745,14 @@
     "message": "가장 빠름"
   },
   "feeAssociatedRequest": {
-    "message": "요금이 이 권한과 연결되어 있습니다."
+    "message": "수수료가 이 요청과 연결되어 있습니다."
   },
   "fiat": {
     "message": "명목",
     "description": "Exchange type"
   },
   "fileImportFail": {
-    "message": "파일 가져오기가 작동하지 않나요? 여기를 클릭하세요!",
+    "message": "파일 가져오기가 작동하지 않나요? 여기를 클릭하세요.",
     "description": "Helps user import their account from a JSON file"
   },
   "forbiddenIpfsGateway": {
@@ -777,7 +791,7 @@
     "message": "Gas 가격(GWEI)"
   },
   "gasPriceExcessive": {
-    "message": "Gas 수수료가 불필요하게 높게 설정되었습니다. 수량을 낮추는 것을 고려해 보십시오."
+    "message": "Gas 수수료가 불필요하게 높게 설정되었습니다. 수량을 낮추는 것을 고려해 보세요."
   },
   "gasPriceExcessiveInput": {
     "message": "Gas 가격이 초과하였습니다."
@@ -795,11 +809,11 @@
     "message": "사용한 Gas"
   },
   "gdprMessage": {
-    "message": "이 데이터는 집계되므로 개인정보보호 규정(EU) 2016/679의 목적에 따라 익명으로 관리됩니다. 당사 개인정보 보호 관행과 관련된 자세한 내용은 $1을(를) 참조하세요.",
+    "message": "이 데이터는 집계되며 일반 데이터 보호 규칙(EU) 2016/679의 목적에 따라 익명으로 관리됩니다. 당사의 개인정보보호 관행에 관한 자세한 내용은 $1을(를) 참조하세요.",
     "description": "$1 refers to the gdprMessagePrivacyPolicy message, the translation of which is meant to be used exclusively in the context of gdprMessage"
   },
   "gdprMessagePrivacyPolicy": {
-    "message": "개인정보 보호정책",
+    "message": "개인정보보호정책",
     "description": "this translation is intended to be exclusively used as the replacement for the $1 in the gdprMessage translation"
   },
   "general": {
@@ -831,17 +845,17 @@
     "message": "하드웨어 지갑 연결됨"
   },
   "hardwareWalletLegacyDescription": {
-    "message": "(래거시)",
+    "message": "(레거시)",
     "description": "Text representing the MEW path"
   },
   "hardwareWalletSupportLinkConversion": {
-    "message": "여기를 클릭하세요."
+    "message": "여기를 클릭"
   },
   "hardwareWallets": {
     "message": "하드웨어 지갑 연결"
   },
   "hardwareWalletsMsg": {
-    "message": "MetaMask와 함께 사용할 하드웨어 지갑을 선택하십시오."
+    "message": "MetaMask와 함께 사용할 하드웨어 지갑을 선택하세요."
   },
   "here": {
     "message": "여기",
@@ -854,7 +868,7 @@
     "message": "숨기기"
   },
   "hideTokenPrompt": {
-    "message": "토큰을 숨기시겠습니까?"
+    "message": "토큰을 숨기시겠어요?"
   },
   "hideTokenSymbol": {
     "message": "$1 숨기기",
@@ -874,34 +888,40 @@
     "message": "계정 가져오기"
   },
   "importAccountLinkText": {
-    "message": "계정 시드 구문으로 가져오기"
+    "message": "비밀 복구 구문을 사용해 가져오기"
   },
   "importAccountMsg": {
-    "message": " 가져온 계정은 생성한 MetaMask 계정 시드 구문 원본에 연결되지 않습니다. 가져온 계정에 대해 자세히 알아보십시오. "
+    "message": " 가져온 계정은 생성한 MetaMask 계정 비밀 복구 구문 원본에 연결되지 않습니다. 가져온 계정에 대해 자세히 알아보기 "
   },
   "importAccountSeedPhrase": {
-    "message": "시드 구문으로 계정 가져오기"
+    "message": "비밀 복구 구문으로 계정 가져오기"
   },
   "importAccountText": {
     "message": "또는 $1",
     "description": "$1 represents the text from `importAccountLinkText` as a link"
   },
+  "importTokenQuestion": {
+    "message": "토큰을 가져오시겠어요?"
+  },
+  "importTokenWarning": {
+    "message": "기존 토큰의 가짜 버전을 포함하여 누구나 어떤 이름으로든 토큰을 만들 수 있습니다. 추가 및 거래는 사용자의 책임입니다."
+  },
   "importWallet": {
     "message": "지갑 가져오기"
   },
   "importYourExisting": {
-    "message": "12단어 시드 구문을 사용하여 지갑 가져오기"
+    "message": "비밀 복구 구문을 사용하여 기존 지갑 가져오기"
   },
   "imported": {
     "message": "가져옴",
     "description": "status showing that an account has been fully loaded into the keyring"
   },
   "infuraBlockedNotification": {
-    "message": "MetaMask이 블록체인 호스트에 연결할 수 없습니다. 가능성 있는 원인 $1을 검토하십시오.",
+    "message": "MetaMask이 블록체인 호스트에 연결할 수 없습니다. 가능성 있는 원인 $1을(를) 검토하세요.",
     "description": "$1 is a clickable link with with text defined by the 'here' key"
   },
   "initialTransactionConfirmed": {
-    "message": "최초 거래를 네트워크에서 확인했습니다. 확인을 클릭하여 뒤로 돌아가세요."
+    "message": "최초 거래를 네트워크에서 확인했습니다. 돌아가려면 확인을 클릭하세요."
   },
   "insufficientBalance": {
     "message": "잔액이 부족합니다."
@@ -928,7 +948,7 @@
     "message": "잘못된 체인 ID. 체인 ID가 너무 큽니다."
   },
   "invalidCustomNetworkAlertContent1": {
-    "message": "맞춤형 네트워크 '$1의 체인 ID를 다시 입력해야 합니다.",
+    "message": "맞춤형 네트워크 '$1'의 체인 ID를 다시 입력해야 합니다.",
     "description": "$1 is the name/identifier of the network."
   },
   "invalidCustomNetworkAlertContent2": {
@@ -960,7 +980,7 @@
     "message": "잘못된 RPC URL"
   },
   "invalidSeedPhrase": {
-    "message": "잘못된 계정 시드 구문"
+    "message": "잘못된 비밀 복구 구문"
   },
   "ipfsGateway": {
     "message": "IPFS 게이트웨이"
@@ -976,7 +996,7 @@
     "message": "알려진 계약 주소입니다."
   },
   "knownTokenWarning": {
-    "message": "이 작업은 피싱에 사용할 수 있는, 지갑에 이미 나열된 토큰을 편집합니다. 이 토큰이 나타내는 내용을 변경해야 할 때만 작업을 승인하세요."
+    "message": "이 작업은 지갑에 이미 나열되어 있고 피싱에 사용될 수 있는 토큰을 편집합니다. 해당 토큰이 나타내는 내용을 변경하려는 경우에만 작업을 승인하세요."
   },
   "kovan": {
     "message": "Kovan 테스트 네트워크"
@@ -994,28 +1014,28 @@
     "message": "Ledger Live 사용하기"
   },
   "ledgerLiveAdvancedSettingDescription": {
-    "message": "새로운 Ledger Live 브리지를 통해 Ledger를 더 쉽게 사용할 수 있습니다.  Chrome에서만 사용 가능."
+    "message": "새로운 Ledger Live 브리지를 통해 Ledger를 더 쉽게 사용할 수 있습니다.  Chrome에서만 사용 가능합니다."
   },
   "ledgerLiveApp": {
     "message": "Ledger Live 앱"
   },
   "ledgerLocked": {
-    "message": "Ledger 장치에 연결할 수 없습니다. 장치의 잠금이 해제되어 있고 이더리움 앱이 열려 있는지 확인하십시오."
+    "message": "Ledger 장치에 연결할 수 없습니다. 장치의 잠금이 해제되어 있고 이더리움 앱이 열려 있는지 확인하세요."
   },
   "ledgerTimeout": {
-    "message": "Ledger Live의 응답 시간이 너무 길거나 연결 시간을 초과하였습니다. Ledger Live가 열려있고 장치의 잠금이 해제되어 있는지 확인하십시오."
+    "message": "Ledger Live의 응답 시간이 너무 길거나 연결 시간을 초과하였습니다. Ledger Live 앱이 열려 있고 장치의 잠금이 해제되어 있는지 확인하세요."
   },
   "letsGoSetUp": {
     "message": "설정을 시작하죠!"
   },
   "likeToAddTokens": {
-    "message": "이 토큰을 추가하시겠습니까?"
+    "message": "이 토큰을 추가하시겠어요?"
   },
   "links": {
     "message": "링크"
   },
   "loadMore": {
-    "message": "추가 항목 로드"
+    "message": "추가 로드"
   },
   "loading": {
     "message": "로드 중..."
@@ -1030,7 +1050,7 @@
     "message": "잠금"
   },
   "lockTimeTooGreat": {
-    "message": "자금 시간이 너무 김"
+    "message": "잠금 시간이 너무 깁니다."
   },
   "mainnet": {
     "message": "이더리움 메인넷"
@@ -1051,13 +1071,13 @@
     "message": "메시지"
   },
   "metaMaskConnectStatusParagraphOne": {
-    "message": "MetaMask의 계정 연결에 대한 제어 기능이 강화되었습니다."
+    "message": "이제 MetaMask의 계정 연결을 더 효과적으로 제어할 수 있습니다."
   },
   "metaMaskConnectStatusParagraphThree": {
     "message": "클릭하여 연결된 계정을 관리하세요."
   },
   "metaMaskConnectStatusParagraphTwo": {
-    "message": "방문 중인 웹사이트가 현재 선택된 계정에 연결되어 있다면 연결 상태 버튼이 표시됩니다."
+    "message": "방문 중인 웹사이트가 현재 선택한 계정에 연결되어 있다면 연결 상태 버튼이 표시됩니다."
   },
   "metamaskDescription": {
     "message": "이더리움 및 분산형 웹에 연결합니다."
@@ -1079,15 +1099,15 @@
     "message": "MetaMask에서는.."
   },
   "metametricsCommitmentsNeverCollectIP": {
-    "message": "$1은(는) 전체 IP 주소를 수집하지 않습니다.",
+    "message": "전체 IP 주소를 절대 수집하지 않습니다.",
     "description": "The $1 is the bolded word 'Never', from 'metametricsCommitmentsBoldNever'"
   },
   "metametricsCommitmentsNeverCollectKeysEtc": {
-    "message": "$1은(는) 키, 주소, 거래, 잔액, 해시 또는 개인 정보를 수집합니다.",
+    "message": "키, 주소, 거래, 잔액, 해시 또는 개인 정보를 절대 수집하지 않습니다.",
     "description": "The $1 is the bolded word 'Never', from 'metametricsCommitmentsBoldNever'"
   },
   "metametricsCommitmentsNeverSellDataForProfit": {
-    "message": "$1은(는) 수익을 위해 데이터를 판매합니다. 절대로요!",
+    "message": "수익을 위해 데이터를 절대 판매하지 않습니다. 결코 그렇습니다.",
     "description": "The $1 is the bolded word 'Never', from 'metametricsCommitmentsBoldNever'"
   },
   "metametricsCommitmentsSendAnonymizedEvents": {
@@ -1097,7 +1117,7 @@
     "message": "MetaMask 개선에 참여"
   },
   "metametricsOptInDescription": {
-    "message": "MetaMask는 사용자의 확장 사용 방식을 더 잘 이해하기 위해 사용 데이터를 수집하려 합니다. 이 데이터는 제품과 이더리움 생태계의 사용 편의성과 사용자 경험을 지속적으로 개선하는 데 사용됩니다."
+    "message": "MetaMask는 사용자가 확장 프로그램과 상호작용하는 방식을 자세히 이해하기 위해 사용 데이터를 수집하려 합니다. 이 데이터는 당사의 제품과 이더리움 에코시스템의 사용 편의성 및 사용자 경험을 지속적으로 개선하는 데 사용됩니다."
   },
   "mismatchedChain": {
     "message": "이 체인 ID의 네트워크 세부 정보가 기록과 일치하지 않습니다. 진행하기 전에 $1을(를) 권장합니다.",
@@ -1108,7 +1128,7 @@
     "description": "Serves as link text for the 'mismatchedChain' key. This text will be embedded inside the translation for that key."
   },
   "mobileSyncText": {
-    "message": "암호를 입력하여 본인임을 확인하세요!"
+    "message": "암호를 입력하여 본인임을 인증하세요."
   },
   "mustSelectOne": {
     "message": "토큰을 1개 이상 선택해야 합니다."
@@ -1123,7 +1143,7 @@
     "message": "MetaMask를 이용하는 분산형 애플리케이션과 상호작용하려면 지갑에 Ether가 있어야 합니다."
   },
   "needHelp": {
-    "message": "도움이 필요하십니까? $1에 문의하십시오.",
+    "message": "도움이 필요하신가요? $1에 문의하세요.",
     "description": "$1 represents `needHelpLinkText`, the text which goes in the help link"
   },
   "needHelpLinkText": {
@@ -1155,7 +1175,7 @@
     "message": "테스트넷"
   },
   "networkSettingsChainIdDescription": {
-    "message": "체인 ID는 거래 서명에 사용합니다. 네트워크에서 반환하는 체인 ID와 일치해야 합니다. 십진수나 '0x'로 시작하는 16진수를 입력할 수 있지만, 표시될 때는 십진수로 표시됩니다."
+    "message": "체인 ID는 거래 서명에 사용됩니다. 이는 네트워크에서 반환하는 체인 ID와 일치해야 합니다. 십진수나 '0x'로 시작하는 16진수를 입력할 수 있지만, 표시되는 형식은 십진수입니다."
   },
   "networkSettingsDescription": {
     "message": "맞춤형 RPC 네트워크 추가 및 편집"
@@ -1164,7 +1184,7 @@
     "message": "네트워크 URL"
   },
   "networkURLDefinition": {
-    "message": "이 네트워크에 접근하기 위한 URL입니다."
+    "message": "이 네트워크에 액세스하는 데 사용되는 URL입니다."
   },
   "networks": {
     "message": "네트워크"
@@ -1207,20 +1227,20 @@
     "message": "다음"
   },
   "nextNonceWarning": {
-    "message": "임시값이 추천 임시값($1)보다 큼",
+    "message": "임시값이 추천 임시값($1)보다 큽니다.",
     "description": "The next nonce according to MetaMask's internal logic"
   },
   "noAccountsFound": {
-    "message": "검색 쿼리에 맞는 계정 없음"
+    "message": "검색어에 해당하는 계정이 없습니다."
   },
   "noAddressForName": {
     "message": "이 이름에 설정된 주소가 없습니다."
   },
   "noAlreadyHaveSeed": {
-    "message": "아니요. 이미 시드 구문이 있습니다."
+    "message": "아니요. 이미 비밀 복구 구문이 있습니다."
   },
   "noConversionRateAvailable": {
-    "message": "사용 가능한 전환율 없음"
+    "message": "사용 가능한 전환율이 없음"
   },
   "noThanks": {
     "message": "괜찮습니다"
@@ -1235,19 +1255,19 @@
     "message": "웹캠을 찾을 수 없음"
   },
   "nonce": {
-    "message": "임시"
+    "message": "임시값"
   },
   "nonceField": {
     "message": "거래 임시값 맞춤화"
   },
   "nonceFieldDescription": {
-    "message": "이 기능을 켜면 확인 화면에서 임시값(거래 번호)을 변경할 수 있습니다. 이것은 고급 기능으로, 주의해서 사용해야 합니다."
+    "message": "이 기능을 켜면 확인 화면에서 임시값(거래 번호)을 변경할 수 있습니다. 이는 고급 기능으로, 주의해서 사용해야 합니다."
   },
   "nonceFieldHeading": {
-    "message": "맞춤 임시값"
+    "message": "맞춤형 임시값"
   },
   "notCurrentAccount": {
-    "message": "이(가) 올바른 계정인가요? 지갑에서 현재 선택된 계정과 다릅니다."
+    "message": "올바른 계정인가요? 현재 지갑에서 선택된 계정과 다릅니다."
   },
   "notEnoughGas": {
     "message": "Gas 부족"
@@ -1265,7 +1285,7 @@
     "description": "The 'call to action' on the button, or link, of the 'Stay secure' notification. Upon clicking, users will be taken to a page about security on the metamask support website."
   },
   "notifications3Description": {
-    "message": "MetaMask 보안에 대한 모범 사례의 최신 정보를 얻고 공식 MetaMask 지원에서 최신 보안 팁을 확인하십시오.",
+    "message": "MetaMask 보안에 대한 모범 사례의 최신 정보를 얻고 공식 MetaMask 지원에서 최신 보안 팁을 확인하세요.",
     "description": "Description of a notification in the 'See What's New' popup. Describes the information they can get on security from the linked support page."
   },
   "notifications3Title": {
@@ -1277,7 +1297,7 @@
     "description": "The 'call to action' on the button, or link, of the 'Swap on Binance Smart Chain!' notification. Upon clicking, users will be taken to a page where then can swap tokens on Binance Smart Chain."
   },
   "notifications4Description": {
-    "message": "지갑에서 토큰 스왑 최고가를 바로 이용하십시오. MetaMask는 이제 바이낸스 스마트 체인의 여러 분산형 교환 애그리게이터 및 투자전문기관과 연결됩니다.",
+    "message": "지갑에서 토큰 스왑 최고가를 바로 이용하세요. MetaMask는 이제 바이낸스 스마트 체인의 여러 분산형 교환 애그리게이터 및 투자전문기관과 연결됩니다.",
     "description": "Description of a notification in the 'See What's New' popup."
   },
   "notifications4Title": {
@@ -1288,6 +1308,22 @@
     "message": "\"시드 구문\"을 이제 \"계정 시드 구문\"이라고 합니다.",
     "description": "Description of a notification in the 'See What's New' popup. Describes the seed phrase wording update."
   },
+  "notifications6DescriptionOne": {
+    "message": "Chrome 버전 91부터 Ledger 지원(U2F)을 활성화한 API에서 하드웨어 지갑을 지원하지 않습니다. MetaMask는 Ledger Live 데스크톱 앱을 통해 Ledger 장치에 계속 연결할 수 있는 새로운 Ledger Live 지원을 구축했습니다.",
+    "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
+  },
+  "notifications6DescriptionThree": {
+    "message": "MetaMask에서 Ledger 계정과 상호작용하면 새 탭이 열리고 Ledger Live 앱을 열라는 메시지가 표시됩니다.  앱이 열리면 MetaMask 계정에 대한 WebSocket 연결을 허용하라는 메시지가 표시됩니다.  이제 다 됐습니다.",
+    "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
+  },
+  "notifications6DescriptionTwo": {
+    "message": "Ledger Live 지원은 설정 > 고급 > Ledger Live 사용을 클릭하여 활성화할 수 있습니다.",
+    "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
+  },
+  "notifications6Title": {
+    "message": "Chrome 사용자용 Ledger 지원 업데이트",
+    "description": "Title for a notification in the 'See What's New' popup. Lets users know about the Ledger support update"
+  },
   "ofTextNofM": {
     "message": "/"
   },
@@ -1314,7 +1350,7 @@
     "message": "메인넷에서만 사용 가능"
   },
   "onlyConnectTrust": {
-    "message": "신뢰하는 사이트에만 연결하세요."
+    "message": "신뢰하는 사이트만 연결하세요."
   },
   "optionalBlockExplorerUrl": {
     "message": "블록 탐색기 URL(선택 사항)"
@@ -1351,10 +1387,10 @@
     "message": "보류 중"
   },
   "permissionCheckedIconDescription": {
-    "message": "이 권한을 수락하셨습니다."
+    "message": "이 권한을 승인했습니다."
   },
   "permissionUncheckedIconDescription": {
-    "message": "이 권한을 수락하지 않으셨습니다."
+    "message": "이 권한을 승인하지 않았습니다."
   },
   "permissions": {
     "message": "권한"
@@ -1363,7 +1399,7 @@
     "message": "개인 주소가 발견되었습니다. 토큰 계약 주소를 입력하세요."
   },
   "plusXMore": {
-    "message": "+ 외 $1개",
+    "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": {
@@ -1376,7 +1412,7 @@
     "message": "체인의 고유 통화(예: ETH)로 값을 우선 표시하려면 고유를 선택합니다. 선택한 명목 통화로 값을 우선 표시하려면 명목을 선택합니다."
   },
   "privacyMsg": {
-    "message": "개인정보 보호정책"
+    "message": "개인정보보호정책"
   },
   "privateKey": {
     "message": "비공개 키",
@@ -1404,7 +1440,7 @@
     "message": "대기열에 지정됨"
   },
   "readdToken": {
-    "message": "나중에 계정 옵션 메뉴의 “토큰 추가”로 이동하면 이 토큰을 다시 추가할 수 있습니다."
+    "message": "나중에 계정 옵션 메뉴의 '토큰 추가'로 이동하면 이 토큰을 다시 추가할 수 있습니다."
   },
   "receive": {
     "message": "받기"
@@ -1418,6 +1454,30 @@
   "recipientAddressPlaceholder": {
     "message": "검색, 공개 주소(0x) 또는 ENS"
   },
+  "recoveryPhraseReminderBackupStart": {
+    "message": "여기에서 시작"
+  },
+  "recoveryPhraseReminderConfirm": {
+    "message": "확인"
+  },
+  "recoveryPhraseReminderHasBackedUp": {
+    "message": "계정 시드 구문은 언제나 보안이 유지되고 알려지지 않은 곳에 보관해야 합니다."
+  },
+  "recoveryPhraseReminderHasNotBackedUp": {
+    "message": "계정 시드 구문을 다시 백업해야 합니까?"
+  },
+  "recoveryPhraseReminderItemOne": {
+    "message": "절대로 다른 사람과 계정 시드 구문을 공유하지 마십시오"
+  },
+  "recoveryPhraseReminderItemTwo": {
+    "message": "MetaMask 팀에서는 절대로 계정 시드 구문을 물어보지 않습니다"
+  },
+  "recoveryPhraseReminderSubText": {
+    "message": "계정 시드 구문으로 귀하의 모든 계정을 관리합니다."
+  },
+  "recoveryPhraseReminderTitle": {
+    "message": "자금을 지키세요"
+  },
   "reject": {
     "message": "거부"
   },
@@ -1443,7 +1503,7 @@
     "message": "계정 제거"
   },
   "removeAccountDescription": {
-    "message": "이 계정이 지갑에서 제거됩니다. 계속하기 전에 가져온 이 계정에 대한 원본 시드 구문이나 비공개 키가 있는지 확인하십시오. 계정 드롭다운에서 계정을 가져오거나 다시 만들 수 있습니다. "
+    "message": "이 계정이 지갑에서 제거됩니다. 계속하기 전에 가져온 이 계정에 대한 원본 비밀 복구 구문이나 비공개 키가 있는지 확인하세요. 계정 드롭다운에서 계정을 가져오거나 다시 만들 수 있습니다. "
   },
   "requestsAwaitingAcknowledgement": {
     "message": "확인 대기 중인 요청"
@@ -1458,32 +1518,32 @@
     "message": "계정 재설정"
   },
   "resetAccountDescription": {
-    "message": "계정을 재설정하면 거래 내역이 지워집니다. 계정의 잔액이 변경되지 않으면 시드 구문을 다시 입력하지 않아도 됩니다."
+    "message": "계정을 재설정하면 거래 내역이 지워집니다. 계정의 잔액은 변경되지 않으며 비밀 복구 구문을 다시 입력하지 않아도 됩니다."
   },
   "restore": {
     "message": "복구"
   },
   "restoreAccountWithSeed": {
-    "message": "시드 구문으로 계정 복구"
+    "message": "비밀 복구 구문으로 계정 복구"
   },
   "restoreWalletPreferences": {
-    "message": "$1의 데이터 백업이 발견되었습니다. 지갑 환경설정을 복구하시겠습니까?",
+    "message": "$1의 데이터 백업이 발견되었습니다. 지갑 환경설정을 복원하시겠어요?",
     "description": "$1 is the date at which the data was backed up"
   },
   "retryTransaction": {
     "message": "거래 재시도"
   },
   "reusedTokenNameWarning": {
-    "message": "여기에 있는 토큰은 사용자가 확인한 다른 토큰의 기호를 재사용하기 때문에 혼란스럽거나 속기 쉽습니다."
+    "message": "여기에 있는 토큰은 사용자가 주시 중인 다른 토큰의 기호를 재사용하기 때문에 혼동되거나 속기 쉽습니다."
   },
   "revealSeedWords": {
-    "message": "계정 시드 구문 공개"
+    "message": "비밀 복구 구문 공개"
   },
   "revealSeedWordsDescription": {
-    "message": "브라우저를 변경하거나 컴퓨터를 옮긴 경우, 계정에 액세스하려면 이 시드 구문이 필요합니다. 기밀이 보장된 안전한 곳에 보관하십시오."
+    "message": "브라우저를 변경하거나 컴퓨터를 옮긴 경우, 계정에 액세스하려면 이 비밀 복구 구문이 필요합니다. 기밀이 보장된 안전한 곳에 보관하세요."
   },
   "revealSeedWordsTitle": {
-    "message": "계정 시드 구문"
+    "message": "비밀 복구 구문"
   },
   "revealSeedWordsWarning": {
     "message": "이 구문은 계정 전체를 도용하는 데 사용될 수 있습니다."
@@ -1543,10 +1603,10 @@
     "message": "보안 및 개인정보 보호"
   },
   "securitySettingsDescription": {
-    "message": "개인정보 설정 및 지갑 시드 구문"
+    "message": "개인정보 설정 및 지갑 비밀 복구 구문"
   },
   "seedPhraseIntroSidebarBulletFour": {
-    "message": "적어서 여러 비밀 장소에 보관."
+    "message": "적어서 여러 비밀 장소에 보관하세요."
   },
   "seedPhraseIntroSidebarBulletOne": {
     "message": "암호 관리자에 저장"
@@ -1558,40 +1618,40 @@
     "message": "은행 금고에 보관."
   },
   "seedPhraseIntroSidebarCopyOne": {
-    "message": "복구 구문은 지갑과 펀드의 “마스터 키” 입니다."
+    "message": "복구 구문은 지갑과 자금의 '마스터 키'입니다."
   },
   "seedPhraseIntroSidebarCopyThree": {
-    "message": "복구 구문을 요청하는 사람은 사기를 치려고 하는 것입니다."
+    "message": "복구 구문을 요청하는 사람은 사기를 치려는 것입니다."
   },
   "seedPhraseIntroSidebarCopyTwo": {
-    "message": "절대로, MetaMask와도 복구 구문을 공유하면 안 됩니다!"
+    "message": "절대로, MetaMask와도 시드 구문을 공유하면 안 됩니다!"
   },
   "seedPhraseIntroSidebarTitleOne": {
-    "message": "'복구 구문'이란 무엇입니까?"
+    "message": "'복구 구문'이란 무엇인가요?"
   },
   "seedPhraseIntroSidebarTitleThree": {
-    "message": "복구 구문을 공유해야 합니까?"
+    "message": "복구 구문을 공유해야 하나요?"
   },
   "seedPhraseIntroSidebarTitleTwo": {
-    "message": "복구 구문을 어떻게 저장합니까?"
+    "message": "복구 구문은 어떻게 저장하나요?"
   },
   "seedPhraseIntroTitle": {
     "message": "지갑 보호하기"
   },
   "seedPhraseIntroTitleCopy": {
-    "message": "시작하기 전에 이 비디오를 통해 복구 구문과 지갑을 보호하는 방법에 대해 알아보십시오."
+    "message": "시작하기 전에 이 짧은 동영상을 보고 복구 구문과 지갑을 안전하게 보호하는 방법에 대해 알아보세요."
   },
   "seedPhrasePlaceholder": {
-    "message": "공백 한 칸으로 각 단어를 구분하십시오."
+    "message": "공백 한 칸으로 각 단어를 구분하세요."
   },
   "seedPhrasePlaceholderPaste": {
-    "message": "클립보드에서 시드 구문 붙여넣기"
+    "message": "클립보드에서 비밀 복구 구문 붙여넣기"
   },
   "seedPhraseReq": {
-    "message": "시드 구문에 12, 15, 18, 21 또는 24단어 포함"
+    "message": "비밀 복구 구문은 12, 15, 18, 21 또는 24개의 단어를 포함합니다."
   },
   "selectAHigherGasFee": {
-    "message": "높은 가스 요금을 선택하면 거래 처리 속도를 높일 수 있습니다.*"
+    "message": "높은 Gas 수수료를 선택하면 거래 처리 속도를 높일 수 있습니다.*"
   },
   "selectAccounts": {
     "message": "계정 선택"
@@ -1631,7 +1691,7 @@
     "message": "보내기"
   },
   "sendAmount": {
-    "message": "금액 보내기"
+    "message": "송금"
   },
   "sendSpecifiedTokens": {
     "message": "$1 보내기",
@@ -1644,7 +1704,7 @@
     "message": "Ether 보냄"
   },
   "separateEachWord": {
-    "message": "공백 한 칸으로 각 단어를 구분하십시오."
+    "message": "공백 한 칸으로 각 단어를 구분하세요."
   },
   "settings": {
     "message": "설정"
@@ -1653,13 +1713,13 @@
     "message": "고급 Gas 제어 기능"
   },
   "showAdvancedGasInlineDescription": {
-    "message": "이 항목을 선택하면 보내기 및 확인 화면에 Gas 가격이 표시되며 제어 기능을 바로 제한할 수 있습니다."
+    "message": "이 항목을 선택하면 보내기 및 확인 화면에서 바로 Gas 가격을 표시하고 제어 기능을 제한할 수 있습니다."
   },
   "showFiatConversionInTestnets": {
     "message": "테스트넷에 전환 표시"
   },
   "showFiatConversionInTestnetsDescription": {
-    "message": "이 항목을 선택하면 테스트넷에 명목 전환을 표시합니다."
+    "message": "이 항목을 선택하면 테스트넷에 명목 전환이 표시됩니다."
   },
   "showHexData": {
     "message": "16진수 데이터 표시"
@@ -1671,7 +1731,7 @@
     "message": "수신 거래 표시"
   },
   "showIncomingTransactionsDescription": {
-    "message": "이 항목을 선택하면 Etherscan을 사용하여 거래 목록에 수신 거래를 표시합니다."
+    "message": "이 항목을 선택하면 Etherscan을 사용해 거래 목록에 수신 거래를 표시할 수 있습니다."
   },
   "showPermissions": {
     "message": "권한 표시"
@@ -1680,7 +1740,7 @@
     "message": "비공개 키 표시"
   },
   "showSeedPhrase": {
-    "message": "계정 시드 구문 표시"
+    "message": "비밀 복구 구문 표시"
   },
   "sigRequest": {
     "message": "서명 요청"
@@ -1756,21 +1816,21 @@
     "message": "Ledger 앱 다운로드"
   },
   "step1LedgerWalletMsg": {
-    "message": "$1의 잠금을 해제하기 위해 다운로드, 설정 및 암호를 입력하세요.",
+    "message": "$1의 잠금을 해제하려면 다운로드, 설정 및 암호를 입력하세요.",
     "description": "$1 represents the `ledgerLiveApp` localization value"
   },
   "step1TrezorWallet": {
     "message": "Trezor 지갑 연결"
   },
   "step1TrezorWalletMsg": {
-    "message": "지갑을 컴퓨터에 바로 연결합니다. 하드웨어 지갑 장치를 사용하기 위한 더 많은 내용은 $1",
+    "message": "지갑을 컴퓨터에 바로 연결합니다. 하드웨어 지갑 장치를 사용하는 방법에 관한 자세한 내용은 $1",
     "description": "$1 represents the `hardwareWalletSupportLinkConversion` localization key"
   },
   "step2LedgerWallet": {
     "message": "Ledger 지갑 연결"
   },
   "step2LedgerWalletMsg": {
-    "message": "지갑을 컴퓨터에 바로 연결합니다.  Ledger를 잠금 해제하고 Ethereum 앱을 엽니다. 하드웨어 지갑 장치를 사용하기 위한 더 많은 내용은 $1.",
+    "message": "지갑을 컴퓨터에 바로 연결합니다.  Ledger를 잠금 해제하고 Ethereum 앱을 엽니다. 하드웨어 지갑 장치를 사용하는 방법에 관한 자세한 내용은 $1.",
     "description": "$1 represents the `hardwareWalletSupportLinkConversion` localization key"
   },
   "storePhrase": {
@@ -1792,7 +1852,7 @@
     "message": "스왑"
   },
   "swapAdvancedSlippageInfo": {
-    "message": "주문 시점과 확인 시점 사이에 가격이 변동되는 현상을 “슬리패지”라고 합니다. 슬리패지가 “최대 슬리패지” 설정을 초과하면 스왑이 자동으로 취소됩니다."
+    "message": "주문 시점과 확인 시점 사이에 가격이 변동되는 현상을 '슬리패지'라고 합니다. 슬리패지가 '최대 슬리패지' 설정을 초과하면 스왑이 자동으로 취소됩니다."
   },
   "swapAggregator": {
     "message": "애그리게이터"
@@ -1808,18 +1868,18 @@
     "message": "수신하는 최소 금액입니다. 슬리패지에 따라 추가 금액을 받을 수도 있습니다."
   },
   "swapApproval": {
-    "message": "$1 스왑 승인",
+    "message": "스왑을 위해 $1 승인",
     "description": "Used in the transaction display list to describe a transaction that is an approve call on a token that is to be swapped.. $1 is the symbol of a token that has been approved."
   },
   "swapApproveNeedMoreTokens": {
-    "message": "이 스왑을 완료하려면 $1와(과) 추가 $2이(가) 필요합니다.",
+    "message": "이 스왑을 완료하려면 $1개의 추가 $2이(가) 필요합니다.",
     "description": "Tells the user how many more of a given token they need for a specific swap. $1 is an amount of tokens and $2 is the token symbol."
   },
   "swapBetterQuoteAvailable": {
     "message": "더 나은 견적이 있습니다."
   },
   "swapBuildQuotePlaceHolderText": {
-    "message": "$1와(과) 일치하는 가용 토큰 없음",
+    "message": "$1와(과) 일치하는 토큰이 없습니다.",
     "description": "Tells the user that a given search string does not match any tokens in our token lists. $1 can be any string of text"
   },
   "swapCheckingQuote": {
@@ -1845,21 +1905,21 @@
     "message": "한도 편집"
   },
   "swapEnableDescription": {
-    "message": "필수이며 MetaMask에게 $1을(를) 스왑할 권한을 제공합니다.",
+    "message": "필수이며 MetaMask에게 $1을(를) 스왑할 권한을 부여합니다.",
     "description": "Gives the user info about the required approval transaction for swaps. $1 will be the symbol of a token being approved for swaps."
   },
   "swapEstimatedNetworkFee": {
-    "message": "예상 네트워크 요금"
+    "message": "예상 네트워크 수수료"
   },
   "swapEstimatedNetworkFeeSummary": {
-    "message": "“$1”은(는) 당사가 예상하는 실제 요금입니다. 정확한 금액은 네트워크 상태에 따라 달라집니다.",
+    "message": "'$1'은(는) 당사가 예상하는 실제 수수료입니다. 정확한 금액은 네트워크 상태에 따라 달라집니다.",
     "description": "$1 will be the translation of swapEstimatedNetworkFee, with the font bolded"
   },
   "swapEstimatedNetworkFees": {
-    "message": "예상 네트워크 요금"
+    "message": "예상 네트워크 수수료"
   },
   "swapEstimatedNetworkFeesInfo": {
-    "message": "스왑을 완료하는 데 사용할 네트워크 요금 예상치입니다. 실제 금액은 네트워크 조건에 따라 달라질 수 있습니다."
+    "message": "스왑을 완료하는 데 사용될 예상 네트워크 수수료입니다. 실제 금액은 네트워크 상태에 따라 달라질 수 있습니다."
   },
   "swapFailedErrorDescriptionWithSupportLink": {
     "message": "거래가 실패할 경우 언제든 문의하세요. 오류가 해결되지 않는다면 고객 지원 $1에 문의하세요.",
@@ -1872,7 +1932,7 @@
     "message": "음.... 문제가 발생했습니다. 다시 시도해 보고 오류가 해결되지 않는다면 고객 지원에 문의하세요."
   },
   "swapFetchingQuotesErrorTitle": {
-    "message": "견적 가져오는 중 오류 발생"
+    "message": "견적을 가져오는 중 오류 발생"
   },
   "swapFetchingTokens": {
     "message": "토큰 가져오는 중..."
@@ -1881,11 +1941,11 @@
     "message": "마무리 중..."
   },
   "swapFromTo": {
-    "message": "$1를 $2로 스왑",
+    "message": "$1을(를) $2(으)로 스왑",
     "description": "Tells a user that they need to confirm on their hardware wallet a swap of 2 tokens. $1 is a source token and $2 is a destination token"
   },
   "swapGasFeesSplit": {
-    "message": "이전 화면의 Gas 요금은 이 두 거래로 나뉩니다."
+    "message": "이전 화면의 Gas 수수료는 이 두 거래로 나뉩니다."
   },
   "swapHighSlippageWarning": {
     "message": "슬리패지 금액이 아주 큽니다."
@@ -1898,16 +1958,16 @@
     "description": "$1 will be the translation of swapMaxNetworkFees, with the font bolded"
   },
   "swapMaxNetworkFees": {
-    "message": "최대 네트워크 요금"
+    "message": "최대 네트워크 수수료"
   },
   "swapMaxSlippage": {
     "message": "최대 슬리패지"
   },
   "swapMetaMaskFee": {
-    "message": "MetaMask 요금"
+    "message": "MetaMask 수수료"
   },
   "swapMetaMaskFeeDescription": {
-    "message": "당사는 매번 최상의 유동성 소스에서 최적 가격을 찾습니다. 이 견적에는 $1%의 수수료가 자동으로 반영됩니다.",
+    "message": "당사는 매번 최상의 유동성 소스에서 최적의 가격을 찾습니다. 이 견적에는 $1%의 수수료가 자동으로 반영됩니다.",
     "description": "Provides information about the fee that metamask takes for swaps. $1 is a decimal number."
   },
   "swapNQuotes": {
@@ -1915,7 +1975,7 @@
     "description": "$1 is the number of quotes that the user can select from when opening the list of quotes on the 'view quote' screen"
   },
   "swapNetworkFeeSummary": {
-    "message": "네트워크 요금에는 스왑을 처리하고 $1 네트워크에 보관하는 비용이 적용됩니다. MetaMask는 이 요금을 이용해 이득을 얻지 않습니다."
+    "message": "네트워크 수수료에는 스왑을 처리하고 $1 네트워크에 보관하는 비용이 포함됩니다. MetaMask는 이 수수료로 수익을 얻지 않습니다."
   },
   "swapNewQuoteIn": {
     "message": "$1의 새 견적",
@@ -1926,7 +1986,7 @@
     "description": "This message communicates the token that is being transferred. It is shown on the awaiting swap screen. The $1 will be a token symbol."
   },
   "swapPriceDifference": {
-    "message": "$1 $2 (~$3)을 $4 $5 (~$6)로 스왑합니다.",
+    "message": "$1 $2(~$3)을(를) $4 $5(~$6)(으)로 스왑하려고 합니다.",
     "description": "This message represents the price slippage for the swap.  $1 and $4 are a number (ex: 2.89), $2 and $5 are symbols (ex: ETH), and $3 and $6 are fiat currency amounts."
   },
   "swapPriceDifferenceTitle": {
@@ -1937,10 +1997,10 @@
     "message": "가격 영향은 현재 시장 가격과 거래 실행 도중 받은 금액 사이의 차이입니다. 가격 영향은 유동성 풀의 크기 대비 거래의 크기를 나타내는 함수입니다."
   },
   "swapPriceUnavailableDescription": {
-    "message": "시장 가격 데이터가 부족하여 가격 영향을 파악할 수 없습니다. 스왑하기 전에 받게 될 토큰 수에 만족하시는지 확인하시기 바랍니다."
+    "message": "시장 가격 데이터가 부족하여 가격 영향을 파악할 수 없습니다. 스왑하기 전에 받게 될 토큰 수가 만족스러운지 확인하시기 바랍니다."
   },
   "swapPriceUnavailableTitle": {
-    "message": "진행하기 전에 요율을 확인하십시오."
+    "message": "진행하기 전에 요율 확인"
   },
   "swapProcessing": {
     "message": "처리 중"
@@ -1966,7 +2026,7 @@
     "message": "견적은 현재 시장 상황을 반영하도록 자주 갱신됩니다."
   },
   "swapQuotesExpiredErrorDescription": {
-    "message": "지금 견적을 요청해 최신 요율을 확인하세요."
+    "message": "새 견적을 요청해 최신 요율을 확인하세요."
   },
   "swapQuotesExpiredErrorTitle": {
     "message": "견적 시간 초과"
@@ -2014,7 +2074,7 @@
     "message": "유동성 소스"
   },
   "swapSourceInfo": {
-    "message": "당사에서는 여러 유동성 소스(교환, 애그리게이터, 투자전문기관)를 검색하여 최상의 요율과 최저 네트워크 요금을 찾습니다."
+    "message": "당사에서는 여러 유동성 소스(교환, 애그리게이터, 투자전문기관)를 검색하여 최상의 요율과 최저 네트워크 수수료를 찾습니다."
   },
   "swapSwapFrom": {
     "message": "다음에서 스왑"
@@ -2043,15 +2103,18 @@
     "message": "$1에서 $2(으)로 스왑",
     "description": "Used in the transaction display list to describe a swap. $1 and $2 are the symbols of tokens in involved in a swap."
   },
+  "swapTokenVerificationAddedManually": {
+    "message": "이 토큰은 수동으로 추가되었습니다."
+  },
   "swapTokenVerificationMessage": {
-    "message": "항상 $1에서 토큰 주소를 확인하십시오.",
+    "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\" followed by an info icon that shows more info on hover."
   },
   "swapTokenVerificationOnlyOneSource": {
     "message": "1개의 소스에서만 확인됩니다."
   },
   "swapTokenVerificationSources": {
-    "message": "$1 소스에서 확인되었습니다.",
+    "message": "$1개 소스에서 확인되었습니다.",
     "description": "Indicates the number of token information sources that recognize the symbol + address. $1 is a decimal number."
   },
   "swapTransactionComplete": {
@@ -2081,13 +2144,13 @@
     "message": "고급 옵션"
   },
   "swapsExcessiveSlippageWarning": {
-    "message": "슬리패지 금액이 너무 커서 전환율이 좋지 않습니다. 최대 슬리패지를 15% 값 이하로 줄이십시오."
+    "message": "슬리패지 금액이 너무 커서 전환율이 좋지 않습니다. 슬리패지 허용치를 15% 값 이하로 줄이세요."
   },
   "swapsMaxSlippage": {
-    "message": "최대 슬리패지"
+    "message": "슬리패지 허용치"
   },
   "swapsNotEnoughForTx": {
-    "message": "$1이(가) 부족하여 이 거래를 완료할 수 없음",
+    "message": "$1이(가) 부족하여 이 거래를 완료할 수 없습니다.",
     "description": "Tells the user that they don't have enough of a token for a proposed swap. $1 is a token symbol"
   },
   "swapsViewInActivity": {
@@ -2097,13 +2160,13 @@
     "message": "이는 MetaMask 내의 선택된 네트워크를 이전에 추가된 다음 네트워크로 전환합니다."
   },
   "switchEthereumChainConfirmationTitle": {
-    "message": "이 사이트가 네트워크를 전환하도록 허용합니까?"
+    "message": "이 사이트가 네트워크를 전환하도록 허용하시겠어요?"
   },
   "switchLedgerPaths": {
     "message": "Ledger 경로 전환"
   },
   "switchLedgerPathsText": {
-    "message": "다른 계정을 보려면 Ledger 경로 선택"
+    "message": "다른 계정을 보려면 Ledger 경로를 선택하세요."
   },
   "switchNetwork": {
     "message": "네트워크 전환"
@@ -2203,16 +2266,16 @@
     "message": "거래"
   },
   "transactionCancelAttempted": {
-    "message": "$2에서 Gas 요금이 $1인 거래 취소 시도됨"
+    "message": "$2에서 Gas 수수료가 $1인 거래의 취소가 시도되었습니다."
   },
   "transactionCancelSuccess": {
     "message": "$2에서 거래 취소 성공"
   },
   "transactionConfirmed": {
-    "message": "$2에서의 거래가 확인되었습니다."
+    "message": "$2에서 거래가 확인되었습니다."
   },
   "transactionCreated": {
-    "message": "$2에서 $1 값으로 거래를 만들었습니다."
+    "message": "$2에서 $1 값으로 거래가 생성되었습니다."
   },
   "transactionDropped": {
     "message": "$2에서의 거래가 중단되었습니다."
@@ -2230,10 +2293,10 @@
     "message": "거래 수수료"
   },
   "transactionResubmitted": {
-    "message": "$2에서 Gas 요금이 $1(으)로 증가한 거래가 다시 제출됨"
+    "message": "$2에서 Gas 수수료가 $1(으)로 증가한 거래가 다시 제출되었습니다."
   },
   "transactionSubmitted": {
-    "message": "$2에서 Gas 요금이 $1인 거래가 제출되었습니다."
+    "message": "$2에서 Gas 수수료가 $1인 거래가 제출되었습니다."
   },
   "transactionUpdated": {
     "message": "$2에서의 거래가 업데이트되었습니다."
@@ -2242,17 +2305,17 @@
     "message": "전송"
   },
   "transferBetweenAccounts": {
-    "message": "계정 간 전송"
+    "message": "내 계정 간 전송"
   },
   "transferFrom": {
     "message": "전송 위치"
   },
   "troubleConnectingToWallet": {
-    "message": "$1 연결 도중 문제가 발생했습니다. $2을(를) 검도하고 다시 시도해 보세요.",
+    "message": "$1 연결 도중 문제가 발생했습니다. $2을(를) 검토하고 다시 시도해 보세요.",
     "description": "$1 is the wallet device name; $2 is a link to wallet connection guide"
   },
   "troubleTokenBalances": {
-    "message": "토큰 잔액을 로드하는 도중 문제가 발생했습니다. 잔액을 확인할 수 있습니다. ",
+    "message": "토큰 잔액을 로드하는 도중 문제가 발생했습니다. 다음에서 잔액을 확인하세요. ",
     "description": "Followed by a link (here) to view token balances"
   },
   "trustSiteApprovePermission": {
@@ -2310,7 +2373,7 @@
     "message": "URI에는 적절한 HTTP/HTTPS 접두사가 필요합니다."
   },
   "urlExistsErrorMsg": {
-    "message": "URL이 기존 네트워크 목록에 이미 존재함"
+    "message": "이 URL은 현재 $1 네트워크에서 사용됩니다."
   },
   "usePhishingDetection": {
     "message": "피싱 감지 사용"
@@ -2332,6 +2395,10 @@
     "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\""
   },
+  "verifyThisUnconfirmedTokenOn": {
+    "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": "계정 보기"
   },
@@ -2360,10 +2427,14 @@
     "message": "당사의 하드웨어 지갑 연결 가이드"
   },
   "walletSeed": {
-    "message": "계정 시드 구문"
+    "message": "비밀 복구 구문"
   },
   "walletSeedRestore": {
-    "message": "지갑 계정 시드 구문"
+    "message": "지갑 비밀 복구 구문"
+  },
+  "web3ShimUsageNotification": {
+    "message": "현재의 웹사이트가 제거된 window.web3 API를 이용하려고 합니다. 이 사이트가 제대로 작동하지 않는 경우, $1을(를) 클릭해 자세히 알아보세요.",
+    "description": "$1 is a clickable link."
   },
   "welcome": {
     "message": "MetaMask 방문을 환영합니다"
@@ -2382,11 +2453,11 @@
     "message": "메모지에 이 구문을 적어 안전한 곳에 보관하세요. 보안을 더욱 강화하고 싶다면 여러 메모지에 적은 다음 2~3곳에 보관하세요."
   },
   "xOfY": {
-    "message": "$2 중 $1",
+    "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": "$2개 중 $1개 보류 중",
+    "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": {
@@ -2399,9 +2470,9 @@
     "message": "서명 중입니다."
   },
   "yourPrivateSeedPhrase": {
-    "message": "비밀 백업 구문 확인"
+    "message": "비공개 비밀 복구 구문"
   },
   "zeroGasPriceOnSpeedUpError": {
-    "message": "가속화 시 가스 가격 0"
+    "message": "가속화 시 Gas 가격 0"
   }
 }
diff --git a/app/_locales/ph/messages.json b/app/_locales/ph/messages.json
index 1caaf8875..c191a271b 100644
--- a/app/_locales/ph/messages.json
+++ b/app/_locales/ph/messages.json
@@ -6,7 +6,7 @@
     "message": "Bersyon, support center, at impormasyon sa pakikipag-ugnayan"
   },
   "acceleratingATransaction": {
-    "message": "* Kapag in-accelerate ang transaksyon sa pamamagitan ng paggamit ng mas mataas na presyo ng gas, mas magiging malaki ang tsansang mas mabilis na maproseso ng network, pero hindi ito palaging ginagarantiya."
+    "message": "* Kapag in-accelerate ang transaksyon sa pamamagitan ng paggamit ng mas mataas na presyo ng gas, mas magiging malaki ang tsansang mas mabilis na maiproseso ng network, pero hindi ito palaging ginagarantiya."
   },
   "acceptTermsOfUse": {
     "message": "Nabasa ko at sumasang-ayon ako sa $1",
@@ -52,6 +52,10 @@
   "addContact": {
     "message": "Magdagdag ng contact"
   },
+  "addCustomTokenByContractAddress": {
+    "message": "Walang makitang token? Puwede kang manual na magdagdag ng anumang token sa pamamagitan ng pag-paste ng address nito. Makikita ang mga address ng kontrata ng token sa $1.",
+    "description": "$1 is a blockchain explorer for a specific network, e.g. Etherscan for Ethereum"
+  },
   "addEthereumChainConfirmationDescription": {
     "message": "Bibigyang-daan nito na magamit ang network na ito sa MetaMask."
   },
@@ -282,6 +286,9 @@
   "chainIdDefinition": {
     "message": "Ginagamit ang chain ID para maglagda ng mga transaksyon para sa network na ito."
   },
+  "chainIdExistsErrorMsg": {
+    "message": "Kasalukuyang ginagamit ng $1 network ang Chain ID na ito."
+  },
   "chromeRequiredForHardwareWallets": {
     "message": "Kailangan mong gamitin ang MetaMask sa Google Chrome para maikonekta sa iyong Hardware Wallet."
   },
@@ -407,6 +414,9 @@
   "continueToWyre": {
     "message": "Magpatuloy sa Wyre"
   },
+  "contract": {
+    "message": "Kontrata"
+  },
   "contractAddressError": {
     "message": "Magpapadala ka ng mga token sa address ng kontrata ng token. Posible itong magresulta sa pagkawala ng mga token na ito."
   },
@@ -638,7 +648,7 @@
     "description": "$1 is the return value of eth_chainId from an RPC endpoint"
   },
   "ensNotFoundOnCurrentNetwork": {
-    "message": "Hindi nahanapa ang ENS name sa kasalukuyang network. Subukang lumipat sa Ethereum Mainnet."
+    "message": "Hindi nahanap ang ENS name sa kasalukuyang network. Subukang lumipat sa Ethereum Mainnet."
   },
   "ensRegistrationError": {
     "message": "Nagka-error sa pag-register ng ENS name"
@@ -691,7 +701,7 @@
     "message": "Mga Tinatantyang Tagal ng Pagproseso"
   },
   "ethGasPriceFetchWarning": {
-    "message": "Ibinibigay ang backup na presyo ng gas dahil hindi available ang pangunahing serbisyo sa pagtatantiya ng gas sa ngayon."
+    "message": "Ibinibigay ang backup na presyo ng gas dahil hindi available ang pangunahing serbisyo sa pagtatantya ng gas sa ngayon."
   },
   "eth_accounts": {
     "message": "Tingnan ang mga address ng iyong mga pinapayagang account (kinakailangan)",
@@ -790,7 +800,7 @@
     "message": "Sobrang Baba ng Presyo ng Gas"
   },
   "gasPriceFetchFailed": {
-    "message": "Hindi nagtagumpay ang pagtatantiya ng presyo ng gas dahil sa error sa network."
+    "message": "Hindi nagtagumpay ang pagtatantya ng presyo ng gas dahil sa error sa network."
   },
   "gasPriceInfoTooltipContent": {
     "message": "Tinutukoy ng presyo ng gas ang halaga ng Ether na handa mong bayaran para sa bawat unit ng gas."
@@ -890,6 +900,12 @@
     "message": "o $1",
     "description": "$1 represents the text from `importAccountLinkText` as a link"
   },
+  "importTokenQuestion": {
+    "message": "Mag-import ng token?"
+  },
+  "importTokenWarning": {
+    "message": "Sinuman ay makakagawa ng token na may anumang pangalan, kasama ang mga pekeng bersyon ng mga token na mayroon na. Magdagdag at mag-trade sa sarili mong pananagutan!"
+  },
   "importWallet": {
     "message": "Mag-import ng wallet"
   },
@@ -1019,7 +1035,7 @@
     "message": "Mga Link"
   },
   "loadMore": {
-    "message": "Matuto Pa"
+    "message": "Mag-load Pa"
   },
   "loading": {
     "message": "Nilo-load..."
@@ -1124,7 +1140,7 @@
     "message": "Pangalan"
   },
   "needEtherInWallet": {
-    "message": "Para makaugnayan ang mga decentralized ma application gamit ang MetaMask, kakailanganin mo ang Ether sa iyong wallet."
+    "message": "Para makaugnayan ang mga decentralized na application gamit ang MetaMask, kakailanganin mo ang Ether sa iyong wallet."
   },
   "needHelp": {
     "message": "Kailangan ng tulong? Makipag-ugnayan sa $1",
@@ -1159,7 +1175,7 @@
     "message": "Testnet"
   },
   "networkSettingsChainIdDescription": {
-    "message": "Ginagaamit ang chain ID sa paglagda ng mga transaksyon. Dapat itong tumugma sa chain ID na ibinalik ng network. Puwede kang maglagay ng decimal o '0x'-prefixed hexadecimal number, pero ipapakita namin ang numero sa decimal."
+    "message": "Ginagamit ang chain ID sa paglagda ng mga transaksyon. Dapat itong tumugma sa chain ID na ibinalik ng network. Puwede kang maglagay ng decimal o '0x'-prefixed hexadecimal number, pero ipapakita namin ang numero sa decimal."
   },
   "networkSettingsDescription": {
     "message": "Magdagdag at mag-edit ng mga custom na RPC network"
@@ -1211,7 +1227,7 @@
     "message": "Susunod"
   },
   "nextNonceWarning": {
-    "message": "Mas mataas ang noncesa iminumungkahing nonce na $1",
+    "message": "Mas mataas ang nonce sa iminumungkahing nonce na $1",
     "description": "The next nonce according to MetaMask's internal logic"
   },
   "noAccountsFound": {
@@ -1292,6 +1308,22 @@
     "message": "Tinatawag na ngayong \"Secret Recovery Phrase\" mo ang iyong \"Seed Phrase.\"",
     "description": "Description of a notification in the 'See What's New' popup. Describes the seed phrase wording update."
   },
+  "notifications6DescriptionOne": {
+    "message": "Simula sa Chrome version 91, hindi na susuportahan ng API na nag-enable sa aming Ledger support (U2F) ang mga hardware wallet. Nagpatupad ang MetaMask ng bagong Ledger Live support na nagbibigay-daan sa iyong patuloy na ikonekta ang Ledger device mo sa pamamagitan ng Ledger Live desktop app.",
+    "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
+  },
+  "notifications6DescriptionThree": {
+    "message": "Kapag ginagamit ang iyong Ledger account sa MetaMask, may bagong tab na magbubukas at hihilingin sa iyong buksan ang Ledger Live app.  Kapag nagbukas ang app, hihilingin sa iyong payagan ang isang koneksyon ng WebSocket sa MetaMask account mo.  Iyon lang!",
+    "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
+  },
+  "notifications6DescriptionTwo": {
+    "message": "Puwede mong i-enable ang Ledger Live support sa pamamagitan ng pag-click sa Mga Setting > Advanced > Gamitin ang Ledger Live.",
+    "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
+  },
+  "notifications6Title": {
+    "message": "Update sa Ledger Support para sa Mga Chrome User",
+    "description": "Title for a notification in the 'See What's New' popup. Lets users know about the Ledger support update"
+  },
   "ofTextNofM": {
     "message": "ng"
   },
@@ -1422,6 +1454,30 @@
   "recipientAddressPlaceholder": {
     "message": "Maghanap, pampublikong address (0x), o ENS"
   },
+  "recoveryPhraseReminderBackupStart": {
+    "message": "Magsimula rito"
+  },
+  "recoveryPhraseReminderConfirm": {
+    "message": "OK"
+  },
+  "recoveryPhraseReminderHasBackedUp": {
+    "message": "Palaging panatilihin ang iyong Secret Recovery Phrase sa isang ligtas at lihim na lugar"
+  },
+  "recoveryPhraseReminderHasNotBackedUp": {
+    "message": "Kailangan ulit i-back up ang Secret Recovery Phrase mo?"
+  },
+  "recoveryPhraseReminderItemOne": {
+    "message": "Huwag kailanman ipaalam sa iba ang iyong Secret Recovery Phrase"
+  },
+  "recoveryPhraseReminderItemTwo": {
+    "message": "Hindi kailanman hihingin ng MetaMask team ang iyong Secret Recovery Phrase"
+  },
+  "recoveryPhraseReminderSubText": {
+    "message": "Kinokontrol ng iyong Secret Recovery Phrase ang lahat ng iyong account."
+  },
+  "recoveryPhraseReminderTitle": {
+    "message": "Protektahan ang iyong pondo!"
+  },
   "reject": {
     "message": "Tanggihan"
   },
@@ -1866,7 +1922,7 @@
     "message": "Ito ay pagtatantya ng bayarin sa network na gagamitin para kumpletuhin ang iyong pag-swap. Posibleng magbago ang aktuwal na halaga ayon sa mga kundisyon ng network."
   },
   "swapFailedErrorDescriptionWithSupportLink": {
-    "message": "May mga hindi pagtatagumpay sa transkasyon na nangyayari at narito kami para tumulong. Kung magpapatuloy ang isyung ito, puwede kang makipag-ugnayan sa aming suporta sa customer sa $1 para sa karagdagang tulong.",
+    "message": "May mga hindi pagtatagumpay sa transaksyon na nangyayari at narito kami para tumulong. Kung magpapatuloy ang isyung ito, puwede kang makipag-ugnayan sa aming suporta sa customer sa $1 para sa karagdagang tulong.",
     "description": "This message is shown to a user if their swap fails. The $1 will be replaced by support.metamask.io"
   },
   "swapFailedErrorTitle": {
@@ -1898,7 +1954,7 @@
     "message": "Posibleng hindi magtagumpay ang transaksyon, masyadong mababa ang max na slippage."
   },
   "swapMaxNetworkFeeInfo": {
-    "message": "Aang “$1” ay ang pinakamalaking gagastusin mo. Kapag volatile ang network, maaaring malaking halaga ito.",
+    "message": "“$1” ang pinakamalaking gagastusin mo. Kapag volatile ang network, maaaring malaking halaga ito.",
     "description": "$1 will be the translation of swapMaxNetworkFees, with the font bolded"
   },
   "swapMaxNetworkFees": {
@@ -2047,6 +2103,9 @@
     "message": "I-swap ang $1 sa $2",
     "description": "Used in the transaction display list to describe a swap. $1 and $2 are the symbols of tokens in involved in a swap."
   },
+  "swapTokenVerificationAddedManually": {
+    "message": "Manual na idinagdag ang token na ito."
+  },
   "swapTokenVerificationMessage": {
     "message": "Palaging kumpirmahin ang address ng token sa $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\" followed by an info icon that shows more info on hover."
@@ -2314,7 +2373,7 @@
     "message": "Kinakailangan ng mga URL ang naaangkop na HTTP/HTTPS prefix."
   },
   "urlExistsErrorMsg": {
-    "message": "Nasa kasalukuyang listahan ng mga network na ang URL"
+    "message": "Kasalukuyang ginagamit ng $1 network ang URL na ito."
   },
   "usePhishingDetection": {
     "message": "Gumamit ng Pag-detect ng Phishing"
@@ -2336,6 +2395,10 @@
     "message": "I-verify ang token na ito sa $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\""
   },
+  "verifyThisUnconfirmedTokenOn": {
+    "message": "I-verify ang token na ito sa $1 at tiyaking ito ang token na gusto mong i-trade.",
+    "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": "Tingnan ang Account"
   },
diff --git a/app/_locales/pt_BR/messages.json b/app/_locales/pt_BR/messages.json
index 0fee19f91..9c8136fef 100644
--- a/app/_locales/pt_BR/messages.json
+++ b/app/_locales/pt_BR/messages.json
@@ -52,6 +52,10 @@
   "addContact": {
     "message": "Adicionar contato"
   },
+  "addCustomTokenByContractAddress": {
+    "message": "Não conseguiu encontrar um token? Cole o endereço para adicionar manualmente qualquer token. Os endereços de contato do token podem ser encontrados em $1.",
+    "description": "$1 is a blockchain explorer for a specific network, e.g. Etherscan for Ethereum"
+  },
   "addEthereumChainConfirmationDescription": {
     "message": "Isso permitirá esta rede ser usada dentro do MetaMask."
   },
@@ -282,6 +286,9 @@
   "chainIdDefinition": {
     "message": "O ID da chain usado para assinar transações para essa rede."
   },
+  "chainIdExistsErrorMsg": {
+    "message": "O ID da chain é usado no momento pela rede $1."
+  },
   "chromeRequiredForHardwareWallets": {
     "message": "Você precisa usar MetaMask no Google Chrome para se conectar com sua carteira de hardware."
   },
@@ -407,6 +414,9 @@
   "continueToWyre": {
     "message": "Continuar para o Wyre"
   },
+  "contract": {
+    "message": "Contrato"
+  },
   "contractAddressError": {
     "message": "Você está enviando tokens ao endereço de contrato do token. Isso pode resultar na perda destes tokens."
   },
@@ -623,6 +633,10 @@
   "endOfFlowMessage6": {
     "message": "Se você precisar fazer backup da sua Frase de recuperação secreta novamente, encontre-a em Configurações -> Segurança."
   },
+  "endOfFlowMessage7": {
+    "message": "Se você tiver alguma pergunta ou vir algo suspeito, entre em contato com o atendimento ao cliente em $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": "O MetaMask não pode recuperar sua Frase de recuperação secreta."
   },
@@ -882,6 +896,16 @@
   "importAccountSeedPhrase": {
     "message": "Importe uma conta com a Frase de recuperação secreta"
   },
+  "importAccountText": {
+    "message": "ou $1",
+    "description": "$1 represents the text from `importAccountLinkText` as a link"
+  },
+  "importTokenQuestion": {
+    "message": "Importar token?"
+  },
+  "importTokenWarning": {
+    "message": "Qualquer pessoa pode criar um token com um nome, incluindo versões falsas de tokens existentes. Adicione e negocie, assumindo o risco sozinho!"
+  },
   "importWallet": {
     "message": "Importar carteira"
   },
@@ -958,6 +982,12 @@
   "invalidSeedPhrase": {
     "message": "Frase de recuperação secreta inválida"
   },
+  "ipfsGateway": {
+    "message": "Gateway IPFS"
+  },
+  "ipfsGatewayDescription": {
+    "message": "Informe o URL do gateway de CID do IPFS para usar com resolução de conteúdo de ENS."
+  },
   "jsonFile": {
     "message": "Arquivo JSON",
     "description": "format for importing an account"
@@ -1101,7 +1131,7 @@
     "message": "Informe sua senha para confirmar que é você mesmo!"
   },
   "mustSelectOne": {
-    "message": "Selecione pelo menos 1 token."
+    "message": "Selecione pelo menos 1 token."
   },
   "myAccounts": {
     "message": "Minhas contas"
@@ -1278,8 +1308,24 @@
     "message": "A sua \"Frase Semente\" agora é chamada de sua \"Frase Secreta de Recuperação.\"",
     "description": "Description of a notification in the 'See What's New' popup. Describes the seed phrase wording update."
   },
+  "notifications6DescriptionOne": {
+    "message": "A partir do Chrome versão 91, a API que permitia nosso suporte ao Ledger (U2F) não é mais compatível com carteiras de hardware. O MetaMask implementou um novo suporte ao Ledger Live que permite continuar conectando o seu dispositivo Ledger device por meio do aplicativo de desktop Ledger Live.",
+    "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
+  },
+  "notifications6DescriptionThree": {
+    "message": "Ao interagir com sua conta do Ledger no MetaMask, uma nova aba será aberta e você deverá abrir o aplicativo Ledger Live.  Quando o aplicativo for aberto, você precisará permitir uma conexão do WebSocket com sua conta do MetaMask.  É isso!",
+    "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
+  },
+  "notifications6DescriptionTwo": {
+    "message": "Você pode habilitar o suporte do Ledger Live clicando em Configurações > Avançadas > Usar Ledger Live.",
+    "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
+  },
+  "notifications6Title": {
+    "message": "Atualização de suporte do Ledger para usuários do Chrome",
+    "description": "Title for a notification in the 'See What's New' popup. Lets users know about the Ledger support update"
+  },
   "ofTextNofM": {
-    "message": " de "
+    "message": "de"
   },
   "off": {
     "message": "Desativado"
@@ -1408,6 +1454,30 @@
   "recipientAddressPlaceholder": {
     "message": "Busca, endereço público (0x) ou ENS"
   },
+  "recoveryPhraseReminderBackupStart": {
+    "message": "Iniciar aqui"
+  },
+  "recoveryPhraseReminderConfirm": {
+    "message": "Entendi"
+  },
+  "recoveryPhraseReminderHasBackedUp": {
+    "message": "Mantenha sempre o sigilo e proteja a sua Frase de Recuperação Secreta."
+  },
+  "recoveryPhraseReminderHasNotBackedUp": {
+    "message": "Precisa fazer backup da sua Frase de recuperação Secreta novamente?"
+  },
+  "recoveryPhraseReminderItemOne": {
+    "message": "Nunca compartilhe a sua Frase de recuperação secreta com ninguém"
+  },
+  "recoveryPhraseReminderItemTwo": {
+    "message": "A equipe do MetaMask jamais pedirá sua Frase de recuperação secreta."
+  },
+  "recoveryPhraseReminderSubText": {
+    "message": "Sua Frase de recuperação secreta controla todas as suas contas."
+  },
+  "recoveryPhraseReminderTitle": {
+    "message": "Proteja seu dinheiro"
+  },
   "reject": {
     "message": "Rejeitar"
   },
@@ -1456,6 +1526,16 @@
   "restoreAccountWithSeed": {
     "message": "Restaure sua conta com a Frase de recuperação secreta"
   },
+  "restoreWalletPreferences": {
+    "message": "Encontramos um backup dos seus dados de $1. Gostaria de restaurar as preferências da sua carteira?",
+    "description": "$1 is the date at which the data was backed up"
+  },
+  "retryTransaction": {
+    "message": "Refazer transação"
+  },
+  "reusedTokenNameWarning": {
+    "message": "O token aqui reutiliza um símbolo de outro token que você observa; isso pode causar confusões ou induzir ao erro."
+  },
   "revealSeedWords": {
     "message": "Revelar Frase de recuperação secreta"
   },
@@ -1525,6 +1605,42 @@
   "securitySettingsDescription": {
     "message": "Configurações de privacidade e Frase de recuperação secreta"
   },
+  "seedPhraseIntroSidebarBulletFour": {
+    "message": "Anote e guarde em vários locais secretos."
+  },
+  "seedPhraseIntroSidebarBulletOne": {
+    "message": "Salve em um gerenciador de senhas"
+  },
+  "seedPhraseIntroSidebarBulletThree": {
+    "message": "Guarde dentro de um cofre."
+  },
+  "seedPhraseIntroSidebarBulletTwo": {
+    "message": "Guarde em um cofre-forte bancário."
+  },
+  "seedPhraseIntroSidebarCopyOne": {
+    "message": "A sua frase de recuperação é a “chave-mestra” para sua carteira e seus fundos."
+  },
+  "seedPhraseIntroSidebarCopyThree": {
+    "message": "Caso alguém lhe peça a sua frase de recuperação, essa pessoa provavelmente está tentando dar um golpe em você."
+  },
+  "seedPhraseIntroSidebarCopyTwo": {
+    "message": "Jamais compartilhe a sua frase de recuperação, mesmo com o MetaMask!"
+  },
+  "seedPhraseIntroSidebarTitleOne": {
+    "message": "O que é uma frase de recuperação?"
+  },
+  "seedPhraseIntroSidebarTitleThree": {
+    "message": "Devo compartilhar minha frase de recuperação?"
+  },
+  "seedPhraseIntroSidebarTitleTwo": {
+    "message": "Como salvo minha frase de recuperação?"
+  },
+  "seedPhraseIntroTitle": {
+    "message": "Proteger sua carteira"
+  },
+  "seedPhraseIntroTitleCopy": {
+    "message": "Antes de iniciar, assista esse vídeo curto para aprender sobre sua frase de recuperação e sobre como manter sua carteira segura."
+  },
   "seedPhrasePlaceholder": {
     "message": "Separe cada palavra com um único espaço"
   },
@@ -1987,6 +2103,9 @@
     "message": "Swap $1 para $2",
     "description": "Used in the transaction display list to describe a swap. $1 and $2 are the symbols of tokens in involved in a swap."
   },
+  "swapTokenVerificationAddedManually": {
+    "message": "Este token foi adicionado manualmente."
+  },
   "swapTokenVerificationMessage": {
     "message": "Sempre confirme o endereço do token em $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\" followed by an info icon that shows more info on hover."
@@ -2254,7 +2373,7 @@
     "message": "Os URLs precisam do prefixo HTTP/HTTPS adequado."
   },
   "urlExistsErrorMsg": {
-    "message": "O URL já está presente na lista de redes existente"
+    "message": "O ID da chain é usado no momento pela rede $1."
   },
   "usePhishingDetection": {
     "message": "Usar detecção de phishing"
@@ -2276,6 +2395,10 @@
     "message": "Verificar este token em $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\""
   },
+  "verifyThisUnconfirmedTokenOn": {
+    "message": "Verifique este token em $1 garanta que seja o token que você deseja negociar.",
+    "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": "Exibir conta"
   },
@@ -2309,6 +2432,10 @@
   "walletSeedRestore": {
     "message": "Frase de recuperação secreta da carteira"
   },
+  "web3ShimUsageNotification": {
+    "message": "Percebemos que o site atual tentou usar a API window.web3 removida. Se o site parecer estar corrompido, clique em $1 para obter mais informações.",
+    "description": "$1 is a clickable link."
+  },
   "welcome": {
     "message": "Bem-vindo(a) ao MetaMask"
   },
diff --git a/app/_locales/ru/messages.json b/app/_locales/ru/messages.json
index e72dcfc15..a29fe6c6b 100644
--- a/app/_locales/ru/messages.json
+++ b/app/_locales/ru/messages.json
@@ -52,6 +52,10 @@
   "addContact": {
     "message": "Добавить контакт"
   },
+  "addCustomTokenByContractAddress": {
+    "message": "Невозможно найти токен? Вы можете вручную добавить любой токен, вставив его адрес. Контактные адреса токена можно найти на $1.",
+    "description": "$1 is a blockchain explorer for a specific network, e.g. Etherscan for Ethereum"
+  },
   "addEthereumChainConfirmationDescription": {
     "message": "Это позволит использовать ее в MetaMask."
   },
@@ -277,11 +281,14 @@
     "message": "Отменено"
   },
   "chainId": {
-    "message": "Идентификатор цепи"
+    "message": "Идентификатор цепочки"
   },
   "chainIdDefinition": {
     "message": "Идентификатор цепочки, используемый для подписания транзакций для этой сети."
   },
+  "chainIdExistsErrorMsg": {
+    "message": "Этот идентификатор цепочки в настоящее время используется сетью $1."
+  },
   "chromeRequiredForHardwareWallets": {
     "message": "Вам необходимо использовать MetaMask в Google Chrome, чтобы подключиться к аппаратному кошельку."
   },
@@ -407,6 +414,9 @@
   "continueToWyre": {
     "message": "Продолжить к Wyre"
   },
+  "contract": {
+    "message": "Контракт"
+  },
   "contractAddressError": {
     "message": "Вы отправляете токены на адрес контракта токена. Это может привести к потере токенов."
   },
@@ -623,6 +633,10 @@
   "endOfFlowMessage6": {
     "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 не может восстановить секретную фразу восстановления."
   },
@@ -882,6 +896,16 @@
   "importAccountSeedPhrase": {
     "message": "Импортировать счет с секретной фразой восстановления"
   },
+  "importAccountText": {
+    "message": "или $1",
+    "description": "$1 represents the text from `importAccountLinkText` as a link"
+  },
+  "importTokenQuestion": {
+    "message": "Импортировать токен?"
+  },
+  "importTokenWarning": {
+    "message": "Кто угодно может создать токен с любым именем, включая поддельные версии существующих токенов. Добавляйте и торгуйте на свой страх и риск!"
+  },
   "importWallet": {
     "message": "Импортировать кошелек"
   },
@@ -1284,6 +1308,22 @@
     "message": "Исходная фраза теперь называется секретной фразой восстановления.",
     "description": "Description of a notification in the 'See What's New' popup. Describes the seed phrase wording update."
   },
+  "notifications6DescriptionOne": {
+    "message": "Начиная с Chrome версии 91, API, обеспечивающий поддержку нашего Ledger (U2F), аппаратные кошельки больше не поддерживаются. MetaMask реализовала новую поддержку Ledger Live, которая позволяет продолжать подключаться к устройству Ledger через настольное приложение Ledger Live.",
+    "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
+  },
+  "notifications6DescriptionThree": {
+    "message": "При взаимодействии с вашим счетом Ledger в MetaMask откроется новая вкладка, и вам будет предложено открыть приложение Ledger Live.  Когда приложение откроется, вам будет предложено разрешить WebSocket-соединение с вашим счетом MetaMask.  Вот и все!",
+    "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
+  },
+  "notifications6DescriptionTwo": {
+    "message": "Вы можете включить поддержку Ledger Live, нажав «Настройки» > «Дополнительно» > «Использовать Ledger Live».",
+    "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
+  },
+  "notifications6Title": {
+    "message": "Обновление поддержки Ledger для пользователей Chrome",
+    "description": "Title for a notification in the 'See What's New' popup. Lets users know about the Ledger support update"
+  },
   "ofTextNofM": {
     "message": "из"
   },
@@ -1414,6 +1454,30 @@
   "recipientAddressPlaceholder": {
     "message": "Поиск, публичный адрес (0x) или ENS"
   },
+  "recoveryPhraseReminderBackupStart": {
+    "message": "Начать здесь"
+  },
+  "recoveryPhraseReminderConfirm": {
+    "message": "Понятно"
+  },
+  "recoveryPhraseReminderHasBackedUp": {
+    "message": "Всегда храните свою секретную фразу восстановления в надежном и секретном месте"
+  },
+  "recoveryPhraseReminderHasNotBackedUp": {
+    "message": "Нужно снова сделать резервную копию секретной фразы восстановления?"
+  },
+  "recoveryPhraseReminderItemOne": {
+    "message": "Никогда никому не сообщайте свою секретную фразу восстановления"
+  },
+  "recoveryPhraseReminderItemTwo": {
+    "message": "Команда MetaMask никогда неожиданно не запросит вашу секретную фразу восстановления"
+  },
+  "recoveryPhraseReminderSubText": {
+    "message": "Ваша секретная фраза восстановления контролирует все ваши счета."
+  },
+  "recoveryPhraseReminderTitle": {
+    "message": "Защитите свои активы"
+  },
   "reject": {
     "message": "Отклонить"
   },
@@ -1473,7 +1537,7 @@
     "message": "Токен здесь повторно использует символ из другого токена, который вы смотрите, это может запутать или ввести в заблуждение."
   },
   "revealSeedWords": {
-    "message": "Показать секретную фразу восстановления"
+    "message": "Раскрыть секретную фразу восстановления"
   },
   "revealSeedWordsDescription": {
     "message": "Если вы меняете браузер или переходите на другой компьютер, вам понадобится эта секретная фраза восстановления для доступа к своим счетам. Сохраните ее в безопасном секретном месте."
@@ -1541,6 +1605,42 @@
   "securitySettingsDescription": {
     "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": "Прежде чем приступить к работе, посмотрите это короткое видео о том, что такое фраза восстановления и как обезопасить кошелек."
+  },
   "seedPhrasePlaceholder": {
     "message": "Отделяйте каждое слово одним пробелом"
   },
@@ -2003,6 +2103,9 @@
     "message": "Своп $1 на $2",
     "description": "Used in the transaction display list to describe a swap. $1 and $2 are the symbols of tokens in involved in a swap."
   },
+  "swapTokenVerificationAddedManually": {
+    "message": "Этот токен был добавлен вручную."
+  },
   "swapTokenVerificationMessage": {
     "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\" followed by an info icon that shows more info on hover."
@@ -2270,7 +2373,7 @@
     "message": "Для URL требуется соответствующий префикс HTTP/HTTPS."
   },
   "urlExistsErrorMsg": {
-    "message": "URL уже присутствует в имеющемся списке сетей"
+    "message": "Это URL в настоящее время используется сетью $1."
   },
   "usePhishingDetection": {
     "message": "Использовать обнаружение фишинга"
@@ -2292,6 +2395,10 @@
     "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\""
   },
+  "verifyThisUnconfirmedTokenOn": {
+    "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": "Посмотреть счет"
   },
@@ -2325,6 +2432,10 @@
   "walletSeedRestore": {
     "message": "Секретная фраза восстановления кошелька"
   },
+  "web3ShimUsageNotification": {
+    "message": "Мы заметили, что текущий веб-сайт пытался использовать удаленный API window.web3. Если сайт не работает, нажмите $1 для получения дополнительной информации.",
+    "description": "$1 is a clickable link."
+  },
   "welcome": {
     "message": "Добро пожаловать в MetaMask"
   },
diff --git a/app/_locales/vi/messages.json b/app/_locales/vi/messages.json
index 18de04779..9625b1d98 100644
--- a/app/_locales/vi/messages.json
+++ b/app/_locales/vi/messages.json
@@ -52,6 +52,10 @@
   "addContact": {
     "message": "Thêm người liên hệ"
   },
+  "addCustomTokenByContractAddress": {
+    "message": "Bạn không tìm thấy token? Bạn có thể dán địa chỉ của bất kỳ token nào để thêm token đó theo cách thủ công. Bạn có thể tìm thấy địa chỉ hợp đồng token trên $1.",
+    "description": "$1 is a blockchain explorer for a specific network, e.g. Etherscan for Ethereum"
+  },
   "addEthereumChainConfirmationDescription": {
     "message": "Thao tác này sẽ cho phép sử dụng mạng này trong MetaMask."
   },
@@ -282,6 +286,9 @@
   "chainIdDefinition": {
     "message": "Mã chuỗi được dùng để ký các giao dịch cho mạng này."
   },
+  "chainIdExistsErrorMsg": {
+    "message": "Mạng $1 hiện đang sử dụng mã chuỗi này."
+  },
   "chromeRequiredForHardwareWallets": {
     "message": "Bạn cần sử dụng MetaMask trên Google Chrome để kết nối với Ví cứng của bạn."
   },
@@ -407,6 +414,9 @@
   "continueToWyre": {
     "message": "Tiếp tục chuyển đến Wyre"
   },
+  "contract": {
+    "message": "Hợp đồng"
+  },
   "contractAddressError": {
     "message": "Bạn đang gửi token đến địa chỉ hợp đồng của token. Điều này có thể khiến bạn bị mất những token này."
   },
@@ -621,7 +631,11 @@
     "message": "Hãy cẩn thận với hoạt động lừa đảo! MetaMask sẽ không bao giờ tự ý hỏi Cụm mật khẩu khôi phục bí mật của bạn."
   },
   "endOfFlowMessage6": {
-    "message": "Nếu bạn cần sao lưu lại Cụm mật khẩu khôi phục bí mật, bạn có thể tìm thấy chức năng này trong Cài đặt -> Bảo mật."
+    "message": "Nếu bạn cần sao lưu lại Cụm mật khẩu khôi phục bí mật, bạn có thể tìm thấy chức năng này trong phần Cài đặt -> Bảo mật."
+  },
+  "endOfFlowMessage7": {
+    "message": "Nếu bạn có thắc mắc hoặc thấy điều gì đó đáng ngờ, hãy liên hệ với bộ phận hỗ trợ của chúng tôi $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 không thể khôi phục Cụm mật khẩu khôi phục bí mật của bạn."
@@ -882,6 +896,16 @@
   "importAccountSeedPhrase": {
     "message": "Nhập một tài khoản bằng Cụm mật khẩu khôi phục bí mật"
   },
+  "importAccountText": {
+    "message": "hoặc $1",
+    "description": "$1 represents the text from `importAccountLinkText` as a link"
+  },
+  "importTokenQuestion": {
+    "message": "Bạn muốn nhập token?"
+  },
+  "importTokenWarning": {
+    "message": "Bất kỳ ai cũng tạo được token bằng bất kỳ tên nào, kể cả phiên bản giả của token hiện có. Bạn tự chịu rủi ro khi thêm và giao dịch!"
+  },
   "importWallet": {
     "message": "Nhập ví"
   },
@@ -1284,6 +1308,22 @@
     "message": "Từ giờ, \"Cụm mật khẩu gốc\" sẽ được gọi là \"Cụm mật khẩu khôi phục bí mật.\"",
     "description": "Description of a notification in the 'See What's New' popup. Describes the seed phrase wording update."
   },
+  "notifications6DescriptionOne": {
+    "message": "Kể từ phiên bản Chrome 91, API từng cho phép hỗ trợ Ledger (U2F) của chúng tôi không còn hỗ trợ ví cứng nữa. MetaMask đã triển khai một tính năng hỗ trợ Ledger Live mới cho phép bạn tiếp tục kết nối với thiết bị Ledger của mình thông qua ứng dụng Ledger Live trên máy tính.",
+    "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
+  },
+  "notifications6DescriptionThree": {
+    "message": "Khi tương tác với tài khoản Ledger của bạn trong MetaMask, một tab mới sẽ mở ra và bạn sẽ được yêu cầu mở ứng dụng Ledger Live.  Khi ứng dụng này mở ra, bạn sẽ được yêu cầu cho phép kết nối WebSocket với tài khoản MetaMask của mình.  Đơn giản vậy thôi!",
+    "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
+  },
+  "notifications6DescriptionTwo": {
+    "message": "Bạn có thể kích hoạt tính năng hỗ trợ Ledger Live bằng cách nhấp vào phần Cài đặt > Nâng cao > Sử dụng Ledger Live.",
+    "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
+  },
+  "notifications6Title": {
+    "message": "Thông tin cập nhật về việc hỗ trợ Ledger cho người dùng Chrome",
+    "description": "Title for a notification in the 'See What's New' popup. Lets users know about the Ledger support update"
+  },
   "ofTextNofM": {
     "message": "trên"
   },
@@ -1414,6 +1454,30 @@
   "recipientAddressPlaceholder": {
     "message": "Tìm kiếm, địa chỉ công khai (0x) hoặc ENS"
   },
+  "recoveryPhraseReminderBackupStart": {
+    "message": "Bắt đầu tại đây"
+  },
+  "recoveryPhraseReminderConfirm": {
+    "message": "Đã hiểu"
+  },
+  "recoveryPhraseReminderHasBackedUp": {
+    "message": "Luôn lưu giữ Cụm mật khẩu khôi phục bí mật ở nơi an toàn và bí mật"
+  },
+  "recoveryPhraseReminderHasNotBackedUp": {
+    "message": "Bạn cần sao lưu lại Cụm mật khẩu khôi phục bí mật?"
+  },
+  "recoveryPhraseReminderItemOne": {
+    "message": "Tuyệt đối không cho ai biết Cụm mật khẩu khôi phục bí mật"
+  },
+  "recoveryPhraseReminderItemTwo": {
+    "message": "Nhóm MetaMask sẽ không bao giờ hỏi Cụm mật khẩu khôi phục bí mật của bạn"
+  },
+  "recoveryPhraseReminderSubText": {
+    "message": "Cụm mật khẩu khôi phục bí mật sẽ kiểm soát mọi thứ trong tài khoản của bạn."
+  },
+  "recoveryPhraseReminderTitle": {
+    "message": "Bảo vệ tiền của bạn"
+  },
   "reject": {
     "message": "Từ chối"
   },
@@ -1439,7 +1503,7 @@
     "message": "Xóa tài khoản"
   },
   "removeAccountDescription": {
-    "message": "Tài khoản này sẽ được xóa khỏi ví của bạn. Xin đảm bảo rằng bạn có Cụm mật khẩu khôi phục bí mật ban đầu hoặc khóa riêng tư cho tài khoản được nhập trước khi tiếp tục. Bạn có thể nhập hoặc tạo lại tài khoản từ trình đơn tài khoản thả xuống. "
+    "message": "Tài khoản này sẽ được xóa khỏi ví của bạn. Hãy đảm bảo rằng bạn có Cụm mật khẩu khôi phục bí mật ban đầu hoặc khóa riêng tư cho tài khoản được nhập trước khi tiếp tục. Bạn có thể nhập hoặc tạo lại tài khoản từ trình đơn tài khoản thả xuống. "
   },
   "requestsAwaitingAcknowledgement": {
     "message": "yêu cầu đang chờ xác nhận"
@@ -1473,10 +1537,10 @@
     "message": "Một token trong đây sử dụng lại ký hiệu của một token khác mà bạn thấy, điều này có thể gây nhầm lẫn hoặc mang tính lừa dối."
   },
   "revealSeedWords": {
-    "message": "Hiện cụm mật khẩu khôi phục bí mật"
+    "message": "Hiện Cụm mật khẩu khôi phục bí mật"
   },
   "revealSeedWordsDescription": {
-    "message": "Nếu thay đổi trình duyệt hoặc chuyển máy tính, bạn sẽ cần Cụm mật khẩu khôi phục bí mật này để truy cập tài khoản của mình. Hãy lưu cụm mật khẩu gốc này ở nơi an toàn và bí mật."
+    "message": "Nếu thay đổi trình duyệt hoặc chuyển máy tính, bạn sẽ cần Cụm mật khẩu khôi phục bí mật này để truy cập tài khoản của mình. Hãy lưu Cụm mật khẩu khôi phục bí mật này ở nơi an toàn và bí mật."
   },
   "revealSeedWordsTitle": {
     "message": "Cụm mật khẩu khôi phục bí mật"
@@ -1541,6 +1605,42 @@
   "securitySettingsDescription": {
     "message": "Các cài đặt quyền riêng tư và Cụm mật khẩu khôi phục bí mật của ví"
   },
+  "seedPhraseIntroSidebarBulletFour": {
+    "message": "Viết ra và cất ở nhiều nơi bí mật."
+  },
+  "seedPhraseIntroSidebarBulletOne": {
+    "message": "Lưu trong một trình quản lý mật khẩu"
+  },
+  "seedPhraseIntroSidebarBulletThree": {
+    "message": "Lưu giữ trong hộp ký gửi an toàn."
+  },
+  "seedPhraseIntroSidebarBulletTwo": {
+    "message": "Lưu giữ trong két an toàn."
+  },
+  "seedPhraseIntroSidebarCopyOne": {
+    "message": "Cụm mật khẩu khôi phục bí mật là “chìa khóa chính” để truy cập ví và số tiền của bạn."
+  },
+  "seedPhraseIntroSidebarCopyThree": {
+    "message": "Nếu ai đó hỏi bạn cụm mật khẩu khôi phục bí mật, thì họ đang cố gắng lừa đảo bạn."
+  },
+  "seedPhraseIntroSidebarCopyTwo": {
+    "message": "Đừng bao giờ cho ai biết cụm mật khẩu khôi phục bí mật, kể cả MetaMask!"
+  },
+  "seedPhraseIntroSidebarTitleOne": {
+    "message": "Cụm mật khẩu khôi phục là gì?"
+  },
+  "seedPhraseIntroSidebarTitleThree": {
+    "message": "Tôi có nên cho ai biết cụm mật khẩu khôi phục bí mật của mình không?"
+  },
+  "seedPhraseIntroSidebarTitleTwo": {
+    "message": "Tôi lưu cụm mật khẩu khôi phục của mình bằng cách nào?"
+  },
+  "seedPhraseIntroTitle": {
+    "message": "Bảo mật cho ví của bạn"
+  },
+  "seedPhraseIntroTitleCopy": {
+    "message": "Trước khi bắt đầu, hãy xem video ngắn này để tìm hiểu thêm về cụm mật khẩu khôi phục bí mật của bạn và cách bảo vệ ví của bạn."
+  },
   "seedPhrasePlaceholder": {
     "message": "Phân tách mỗi từ bằng một dấu cách"
   },
@@ -1841,7 +1941,7 @@
     "message": "Đang hoàn tất..."
   },
   "swapFromTo": {
-    "message": "Hoán đổi $1 sang $2",
+    "message": "Giao dịch hoán đổi $1 sang $2",
     "description": "Tells a user that they need to confirm on their hardware wallet a swap of 2 tokens. $1 is a source token and $2 is a destination token"
   },
   "swapGasFeesSplit": {
@@ -2003,6 +2103,9 @@
     "message": "Hoán đổi $1 sang $2",
     "description": "Used in the transaction display list to describe a swap. $1 and $2 are the symbols of tokens in involved in a swap."
   },
+  "swapTokenVerificationAddedManually": {
+    "message": "Token này đã được thêm theo cách thủ công."
+  },
   "swapTokenVerificationMessage": {
     "message": "Luôn xác nhận địa chỉ token trên $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\" followed by an info icon that shows more info on hover."
@@ -2270,7 +2373,7 @@
     "message": "URL phải có tiền tố HTTP/HTTPS phù hợp."
   },
   "urlExistsErrorMsg": {
-    "message": "URL đã có trong danh sách mạng hiện tại"
+    "message": "Mạng $1 hiện đang sử dụng URL này."
   },
   "usePhishingDetection": {
     "message": "Sử dụng tính năng Phát hiện lừa đảo"
@@ -2292,6 +2395,10 @@
     "message": "Xác minh token này trên $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\""
   },
+  "verifyThisUnconfirmedTokenOn": {
+    "message": "Hãy xác minh token này trên $1 và đảm bảo đây là token bạn muốn giao dịch.",
+    "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": "Xem tài khoản"
   },
@@ -2325,6 +2432,10 @@
   "walletSeedRestore": {
     "message": "Cụm mật khẩu khôi phục bí mật của ví"
   },
+  "web3ShimUsageNotification": {
+    "message": "Chúng tôi nhận thấy rằng trang web hiện tại đã cố dùng API window.web3 đã bị xóa. Nếu trang web có vẻ như đã bị lỗi, vui lòng nhấp vào $1 để biết thêm thông tin.",
+    "description": "$1 is a clickable link."
+  },
   "welcome": {
     "message": "Chào mừng bạn đến với MetaMask"
   },

From cf34e64f1528019f380b99f92b09edb099ea620c Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Wed, 16 Jun 2021 15:40:17 -0500
Subject: [PATCH 020/141] Support EIP-2718 transaction types, EIP-2930 and
 EIP-1559 support (#11288)

---
 app/scripts/controllers/transactions/index.js | 74 ++++++++++++++++---
 .../controllers/transactions/index.test.js    | 14 ++--
 .../transactions/tx-gas-utils.test.js         | 13 +++-
 app/scripts/metamask-controller.js            |  3 +
 package.json                                  |  3 +-
 yarn.lock                                     | 18 ++---
 6 files changed, 98 insertions(+), 27 deletions(-)

diff --git a/app/scripts/controllers/transactions/index.js b/app/scripts/controllers/transactions/index.js
index fa7c46a2b..3889b9fb8 100644
--- a/app/scripts/controllers/transactions/index.js
+++ b/app/scripts/controllers/transactions/index.js
@@ -1,10 +1,11 @@
 import EventEmitter from 'safe-event-emitter';
 import { ObservableStore } from '@metamask/obs-store';
 import { bufferToHex, keccak, toBuffer } from 'ethereumjs-util';
-import Transaction from 'ethereumjs-tx';
 import EthQuery from 'ethjs-query';
 import { ethErrors } from 'eth-rpc-errors';
 import abi from 'human-standard-token-abi';
+import Common from '@ethereumjs/common';
+import { TransactionFactory } from '@ethereumjs/tx';
 import { ethers } from 'ethers';
 import NonceTracker from 'nonce-tracker';
 import log from 'loglevel';
@@ -24,11 +25,17 @@ import {
 } from '../../../../shared/constants/transaction';
 import { METAMASK_CONTROLLER_EVENTS } from '../../metamask-controller';
 import { GAS_LIMITS } from '../../../../shared/constants/gas';
+import {
+  MAINNET,
+  NETWORK_TYPE_RPC,
+} from '../../../../shared/constants/network';
 import TransactionStateManager from './tx-state-manager';
 import TxGasUtil from './tx-gas-utils';
 import PendingTransactionTracker from './pending-tx-tracker';
 import * as txUtils from './lib/util';
 
+const HARDFORK = 'berlin';
+
 const hstInterface = new ethers.utils.Interface(abi);
 
 const MAX_MEMSTORE_TX_LIST_SIZE = 100; // Number of transactions (by unique nonces) to keep in memory
@@ -53,7 +60,7 @@ const MAX_MEMSTORE_TX_LIST_SIZE = 100; // Number of transactions (by unique nonc
   @param {Object} opts.networkStore - an observable store for network number
   @param {Object} opts.blockTracker - An instance of eth-blocktracker
   @param {Object} opts.provider - A network provider.
-  @param {Function} opts.signTransaction - function the signs an ethereumjs-tx
+  @param {Function} opts.signTransaction - function the signs an @ethereumjs/tx
   @param {Object} opts.getPermittedAccounts - get accounts that an origin has permissions for
   @param {Function} opts.signTransaction - ethTx signer that returns a rawTx
   @param {number} [opts.txHistoryLimit] - number *optional* for limiting how many transactions are in state
@@ -65,6 +72,7 @@ export default class TransactionController extends EventEmitter {
     super();
     this.networkStore = opts.networkStore || new ObservableStore({});
     this._getCurrentChainId = opts.getCurrentChainId;
+    this.getProviderConfig = opts.getProviderConfig;
     this.preferencesStore = opts.preferencesStore || new ObservableStore({});
     this.provider = opts.provider;
     this.getPermittedAccounts = opts.getPermittedAccounts;
@@ -146,6 +154,49 @@ export default class TransactionController extends EventEmitter {
     return integerChainId;
   }
 
+  /**
+   * @ethereumjs/tx uses @ethereumjs/common as a configuration tool for
+   * specifying which chain, network, hardfork and EIPs to support for
+   * a transaction. By referencing this configuration, and analyzing the fields
+   * specified in txParams, @ethereumjs/tx is able to determine which EIP-2718
+   * transaction type to use.
+   * @returns {Common} common configuration object
+   */
+  getCommonConfiguration() {
+    const { type, nickname: name } = this.getProviderConfig();
+
+    // type will be one of our default network names or 'rpc'. the default
+    // network names are sufficient configuration, simply pass the name as the
+    // chain argument in the constructor.
+    if (type !== NETWORK_TYPE_RPC) {
+      return new Common({ chain: type, hardfork: HARDFORK });
+    }
+
+    // For 'rpc' we need to use the same basic configuration as mainnet,
+    // since we only support EVM compatible chains, and then override the
+    // name, chainId and networkId properties. This is done using the
+    // `forCustomChain` static method on the Common class.
+    const chainId = parseInt(this._getCurrentChainId(), 16);
+    const networkId = this.networkStore.getState();
+
+    const customChainParams = {
+      name,
+      chainId,
+      // It is improbable for a transaction to be signed while the network
+      // is loading for two reasons.
+      // 1. Pending, unconfirmed transactions are wiped on network change
+      // 2. The UI is unusable (loading indicator) when network is loading.
+      // setting the networkId to 0 is for type safety and to explicity lead
+      // the transaction to failing if a user is able to get to this branch
+      // on a custom network that requires valid network id. I have not ran
+      // into this limitation on any network I have attempted, even when
+      // hardcoding networkId to 'loading'.
+      networkId: networkId === 'loading' ? 0 : parseInt(networkId, 10),
+    };
+
+    return Common.forCustomChain(MAINNET, customChainParams, HARDFORK);
+  }
+
   /**
   Adds a tx to the txlist
   @emits ${txMeta.id}:unapproved
@@ -561,17 +612,22 @@ export default class TransactionController extends EventEmitter {
     const txMeta = this.txStateManager.getTransaction(txId);
     // add network/chain id
     const chainId = this.getChainId();
-    const txParams = { ...txMeta.txParams, chainId };
+    const txParams = {
+      ...txMeta.txParams,
+      chainId,
+      gasLimit: txMeta.txParams.gas,
+    };
     // sign tx
     const fromAddress = txParams.from;
-    const ethTx = new Transaction(txParams);
-    await this.signEthTx(ethTx, fromAddress);
+    const common = this.getCommonConfiguration();
+    const unsignedEthTx = TransactionFactory.fromTxData(txParams, { common });
+    const signedEthTx = await this.signEthTx(unsignedEthTx, fromAddress);
 
     // add r,s,v values for provider request purposes see createMetamaskMiddleware
     // and JSON rpc standard for further explanation
-    txMeta.r = bufferToHex(ethTx.r);
-    txMeta.s = bufferToHex(ethTx.s);
-    txMeta.v = bufferToHex(ethTx.v);
+    txMeta.r = bufferToHex(signedEthTx.r);
+    txMeta.s = bufferToHex(signedEthTx.s);
+    txMeta.v = bufferToHex(signedEthTx.v);
 
     this.txStateManager.updateTransaction(
       txMeta,
@@ -580,7 +636,7 @@ export default class TransactionController extends EventEmitter {
 
     // set state to signed
     this.txStateManager.setTxStatusSigned(txMeta.id);
-    const rawTx = bufferToHex(ethTx.serialize());
+    const rawTx = bufferToHex(signedEthTx.serialize());
     return rawTx;
   }
 
diff --git a/app/scripts/controllers/transactions/index.test.js b/app/scripts/controllers/transactions/index.test.js
index 3615c33d0..d08aa856a 100644
--- a/app/scripts/controllers/transactions/index.test.js
+++ b/app/scripts/controllers/transactions/index.test.js
@@ -1,7 +1,7 @@
 import { strict as assert } from 'assert';
 import EventEmitter from 'events';
 import { toBuffer } from 'ethereumjs-util';
-import EthTx from 'ethereumjs-tx';
+import { TransactionFactory } from '@ethereumjs/tx';
 import { ObservableStore } from '@metamask/obs-store';
 import sinon from 'sinon';
 
@@ -20,6 +20,9 @@ import TransactionController from '.';
 const noop = () => true;
 const currentNetworkId = '42';
 const currentChainId = '0x2a';
+const providerConfig = {
+  type: 'kovan',
+};
 
 const VALID_ADDRESS = '0x0000000000000000000000000000000000000000';
 const VALID_ADDRESS_TWO = '0x0000000000000000000000000000000000000001';
@@ -36,6 +39,7 @@ describe('Transaction Controller', function () {
     };
     provider = createTestProviderTools({ scaffold: providerResultStub })
       .provider;
+
     fromAccount = getTestAccounts()[0];
     const blockTrackerStub = new EventEmitter();
     blockTrackerStub.getCurrentBlock = noop;
@@ -50,9 +54,9 @@ describe('Transaction Controller', function () {
       blockTracker: blockTrackerStub,
       signTransaction: (ethTx) =>
         new Promise((resolve) => {
-          ethTx.sign(fromAccount.key);
-          resolve();
+          resolve(ethTx.sign(fromAccount.key));
         }),
+      getProviderConfig: () => providerConfig,
       getPermittedAccounts: () => undefined,
       getCurrentChainId: () => currentChainId,
       getParticipateInMetrics: () => false,
@@ -519,8 +523,8 @@ describe('Transaction Controller', function () {
         noop,
       );
       const rawTx = await txController.signTransaction('1');
-      const ethTx = new EthTx(toBuffer(rawTx));
-      assert.equal(ethTx.getChainId(), 42);
+      const ethTx = TransactionFactory.fromSerializedData(toBuffer(rawTx));
+      assert.equal(ethTx.common.chainIdBN().toNumber(), 42);
     });
   });
 
diff --git a/app/scripts/controllers/transactions/tx-gas-utils.test.js b/app/scripts/controllers/transactions/tx-gas-utils.test.js
index 635802925..15386e319 100644
--- a/app/scripts/controllers/transactions/tx-gas-utils.test.js
+++ b/app/scripts/controllers/transactions/tx-gas-utils.test.js
@@ -1,5 +1,6 @@
 import { strict as assert } from 'assert';
-import Transaction from 'ethereumjs-tx';
+import { TransactionFactory } from '@ethereumjs/tx';
+import Common from '@ethereumjs/common';
 import { hexToBn, bnToHex } from '../../lib/util';
 import TxUtils from './tx-gas-utils';
 
@@ -31,8 +32,14 @@ describe('txUtils', function () {
         nonce: '0x3',
         chainId: 42,
       };
-      const ethTx = new Transaction(txParams);
-      assert.equal(ethTx.getChainId(), 42, 'chainId is set from tx params');
+      const ethTx = TransactionFactory.fromTxData(txParams, {
+        common: new Common({ chain: 'kovan' }),
+      });
+      assert.equal(
+        ethTx.common.chainIdBN().toNumber(),
+        42,
+        'chainId is set from tx params',
+      );
     });
   });
 
diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
index e2546a91f..304dccf7a 100644
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@@ -322,6 +322,9 @@ export default class MetamaskController extends EventEmitter {
       getPermittedAccounts: this.permissionsController.getAccounts.bind(
         this.permissionsController,
       ),
+      getProviderConfig: this.networkController.getProviderConfig.bind(
+        this.networkController,
+      ),
       networkStore: this.networkController.networkStore,
       getCurrentChainId: this.networkController.getCurrentChainId.bind(
         this.networkController,
diff --git a/package.json b/package.json
index 8e420c948..b6181d71b 100644
--- a/package.json
+++ b/package.json
@@ -93,6 +93,8 @@
     "3box": "^1.10.2",
     "@babel/runtime": "^7.5.5",
     "@download/blockies": "^1.0.3",
+    "@ethereumjs/common": "^2.3.1",
+    "@ethereumjs/tx": "^3.2.1",
     "@formatjs/intl-relativetimeformat": "^5.2.6",
     "@fortawesome/fontawesome-free": "^5.13.0",
     "@lavamoat/preinstall-always-fail": "^1.0.0",
@@ -138,7 +140,6 @@
     "eth-trezor-keyring": "^0.7.0",
     "ethereum-ens-network-map": "^1.0.2",
     "ethereumjs-abi": "^0.6.4",
-    "ethereumjs-tx": "1.3.7",
     "ethereumjs-util": "^7.0.10",
     "ethereumjs-wallet": "^0.6.4",
     "ethers": "^5.0.8",
diff --git a/yarn.lock b/yarn.lock
index 20bc48aae..4861bf74e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1529,7 +1529,7 @@
     crc-32 "^1.2.0"
     ethereumjs-util "^7.0.10"
 
-"@ethereumjs/tx@^3.1.1", "@ethereumjs/tx@^3.1.4":
+"@ethereumjs/tx@^3.1.1", "@ethereumjs/tx@^3.1.4", "@ethereumjs/tx@^3.2.1":
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/@ethereumjs/tx/-/tx-3.2.1.tgz#65f5f1c11541764f08377a94ba4b0dcbbd67739e"
   integrity sha512-i9V39OtKvwWos1uVNZxdVhd7zFOyzFLjgt69CoiOY0EmXugS0HjO3uxpLBSglDKFMRriuGqw6ddKEv+RP1UNEw==
@@ -10900,14 +10900,6 @@ ethereumjs-common@^1.1.0, ethereumjs-common@^1.3.2, ethereumjs-common@^1.5.0:
   resolved "https://registry.yarnpkg.com/ethereumjs-common/-/ethereumjs-common-1.5.1.tgz#4e75042473a64daec0ed9fe84323dd9576aa5dba"
   integrity sha512-aVUPRLgmXORGXXEVkFYgPhr9TGtpBY2tGhZ9Uh0A3lIUzUDr1x6kQx33SbjPUkLkX3eniPQnIL/2psjkjrOfcQ==
 
-ethereumjs-tx@1.3.7, ethereumjs-tx@^1.1.1, ethereumjs-tx@^1.2.0, ethereumjs-tx@^1.2.2, ethereumjs-tx@^1.3.3, ethereumjs-tx@^1.3.4, ethereumjs-tx@^1.3.7:
-  version "1.3.7"
-  resolved "https://registry.yarnpkg.com/ethereumjs-tx/-/ethereumjs-tx-1.3.7.tgz#88323a2d875b10549b8347e09f4862b546f3d89a"
-  integrity sha512-wvLMxzt1RPhAQ9Yi3/HKZTn0FZYpnsmQdbKYfUUpi4j1SEIcbkd9tndVjcPrufY3V7j2IebOpC00Zp2P/Ay2kA==
-  dependencies:
-    ethereum-common "^0.0.18"
-    ethereumjs-util "^5.0.0"
-
 ethereumjs-tx@2.1.2, ethereumjs-tx@^2.1.1, ethereumjs-tx@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ethereumjs-tx/-/ethereumjs-tx-2.1.2.tgz#5dfe7688bf177b45c9a23f86cf9104d47ea35fed"
@@ -10916,6 +10908,14 @@ ethereumjs-tx@2.1.2, ethereumjs-tx@^2.1.1, ethereumjs-tx@^2.1.2:
     ethereumjs-common "^1.5.0"
     ethereumjs-util "^6.0.0"
 
+ethereumjs-tx@^1.1.1, ethereumjs-tx@^1.2.0, ethereumjs-tx@^1.2.2, ethereumjs-tx@^1.3.3, ethereumjs-tx@^1.3.4, ethereumjs-tx@^1.3.7:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/ethereumjs-tx/-/ethereumjs-tx-1.3.7.tgz#88323a2d875b10549b8347e09f4862b546f3d89a"
+  integrity sha512-wvLMxzt1RPhAQ9Yi3/HKZTn0FZYpnsmQdbKYfUUpi4j1SEIcbkd9tndVjcPrufY3V7j2IebOpC00Zp2P/Ay2kA==
+  dependencies:
+    ethereum-common "^0.0.18"
+    ethereumjs-util "^5.0.0"
+
 ethereumjs-util@6.2.1, ethereumjs-util@^6.0.0, ethereumjs-util@^6.1.0, ethereumjs-util@^6.2.0:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/ethereumjs-util/-/ethereumjs-util-6.2.1.tgz#fcb4e4dd5ceacb9d2305426ab1a5cd93e3163b69"

From 910a3ab81a14cced61fcda92ca0d5827edac363b Mon Sep 17 00:00:00 2001
From: PeterYinusa <53189696+PeterYinusa@users.noreply.github.com>
Date: Wed, 16 Jun 2021 21:59:10 +0100
Subject: [PATCH 021/141] refactor send eth tests to use fixture (#11189)

---
 test/e2e/metamask-ui.spec.js    | 193 ++--------------------------
 test/e2e/tests/send-eth.spec.js | 218 ++++++++++++++++++++++++++++++++
 2 files changed, 226 insertions(+), 185 deletions(-)
 create mode 100644 test/e2e/tests/send-eth.spec.js

diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js
index c28ab6e5c..63ae22bdd 100644
--- a/test/e2e/metamask-ui.spec.js
+++ b/test/e2e/metamask-ui.spec.js
@@ -297,184 +297,6 @@ describe('MetaMask', function () {
     });
   });
 
-  describe('Send ETH from inside MetaMask using default gas', function () {
-    it('starts a send transaction', async function () {
-      await driver.clickElement('[data-testid="eth-overview-send"]');
-      await driver.delay(regularDelayMs);
-
-      await driver.fill(
-        'input[placeholder="Search, public address (0x), or ENS"]',
-        '0x2f318C334780961FB129D2a6c30D0763d9a5C970',
-      );
-
-      const inputAmount = await driver.findElement('.unit-input__input');
-      await inputAmount.fill('1000');
-
-      const errorAmount = await driver.findElement('.send-v2__error-amount');
-      assert.equal(
-        await errorAmount.getText(),
-        'Insufficient funds.',
-        'send screen should render an insufficient fund error message',
-      );
-
-      await inputAmount.press(driver.Key.BACK_SPACE);
-      await driver.delay(50);
-      await inputAmount.press(driver.Key.BACK_SPACE);
-      await driver.delay(50);
-      await inputAmount.press(driver.Key.BACK_SPACE);
-      await driver.delay(tinyDelayMs);
-
-      await driver.assertElementNotPresent('.send-v2__error-amount');
-
-      const amountMax = await driver.findClickableElement(
-        '.send-v2__amount-max',
-      );
-      await amountMax.click();
-
-      let inputValue = await inputAmount.getAttribute('value');
-
-      assert(Number(inputValue) > 99);
-
-      await amountMax.click();
-
-      assert.equal(await inputAmount.isEnabled(), true);
-
-      await inputAmount.fill('1');
-
-      inputValue = await inputAmount.getAttribute('value');
-      assert.equal(inputValue, '1');
-      await driver.delay(regularDelayMs);
-
-      // Continue to next screen
-      await driver.clickElement({ text: 'Next', tag: 'button' });
-      await driver.delay(regularDelayMs);
-    });
-
-    it('confirms the transaction', async function () {
-      await driver.clickElement({ text: 'Confirm', tag: 'button' });
-      await driver.delay(largeDelayMs * 2);
-    });
-
-    it('finds the transaction in the transactions list', async function () {
-      await driver.clickElement('[data-testid="home__activity-tab"]');
-      await driver.wait(async () => {
-        const confirmedTxes = await driver.findElements(
-          '.transaction-list__completed-transactions .transaction-list-item',
-        );
-        return confirmedTxes.length === 1;
-      }, 10000);
-
-      await driver.waitForSelector({
-        css: '.transaction-list-item__primary-currency',
-        text: '-1 ETH',
-      });
-    });
-  });
-
-  describe('Send ETH from inside MetaMask using fast gas option', function () {
-    it('starts a send transaction', async function () {
-      await driver.clickElement('[data-testid="eth-overview-send"]');
-      await driver.delay(regularDelayMs);
-
-      await driver.fill(
-        'input[placeholder="Search, public address (0x), or ENS"]',
-        '0x2f318C334780961FB129D2a6c30D0763d9a5C970',
-      );
-
-      const inputAmount = await driver.findElement('.unit-input__input');
-      await inputAmount.fill('1');
-
-      const inputValue = await inputAmount.getAttribute('value');
-      assert.equal(inputValue, '1');
-
-      // Set the gas price
-      await driver.clickElement({ text: 'Fast', tag: 'button/div/div' });
-      await driver.delay(regularDelayMs);
-
-      // Continue to next screen
-      await driver.clickElement({ text: 'Next', tag: 'button' });
-      await driver.delay(regularDelayMs);
-    });
-
-    it('confirms the transaction', async function () {
-      await driver.clickElement({ text: 'Confirm', tag: 'button' });
-      await driver.delay(largeDelayMs);
-    });
-
-    it('finds the transaction in the transactions list', async function () {
-      await driver.waitForSelector(
-        '.transaction-list__completed-transactions .transaction-list-item:nth-child(2)',
-      );
-      await driver.waitForSelector({
-        css: '.transaction-list-item__primary-currency',
-        text: '-1 ETH',
-      });
-    });
-  });
-
-  describe('Send ETH from inside MetaMask using advanced gas modal', function () {
-    it('starts a send transaction', async function () {
-      await driver.clickElement('[data-testid="eth-overview-send"]');
-      await driver.delay(regularDelayMs);
-
-      await driver.fill(
-        'input[placeholder="Search, public address (0x), or ENS"]',
-        '0x2f318C334780961FB129D2a6c30D0763d9a5C970',
-      );
-
-      const inputAmount = await driver.findElement('.unit-input__input');
-      await inputAmount.fill('1');
-
-      const inputValue = await inputAmount.getAttribute('value');
-      assert.equal(inputValue, '1');
-
-      // Set the gas limit
-      await driver.clickElement('.advanced-gas-options-btn');
-      await driver.delay(regularDelayMs);
-
-      // wait for gas modal to be visible
-      const gasModal = await driver.findVisibleElement('span .modal');
-
-      await driver.clickElement({ text: 'Save', tag: 'button' });
-
-      // Wait for gas modal to be removed from DOM
-      await gasModal.waitForElementState('hidden');
-      await driver.delay(regularDelayMs);
-
-      // Continue to next screen
-      await driver.clickElement({ text: 'Next', tag: 'button' });
-      await driver.delay(regularDelayMs);
-    });
-
-    it('confirms the transaction', async function () {
-      const transactionAmounts = await driver.findElements(
-        '.currency-display-component__text',
-      );
-      const transactionAmount = transactionAmounts[0];
-      assert.equal(await transactionAmount.getText(), '1');
-
-      await driver.clickElement({ text: 'Confirm', tag: 'button' });
-      await driver.delay(largeDelayMs);
-    });
-
-    it('finds the transaction in the transactions list', async function () {
-      await driver.wait(async () => {
-        const confirmedTxes = await driver.findElements(
-          '.transaction-list__completed-transactions .transaction-list-item',
-        );
-        return confirmedTxes.length === 3;
-      }, 10000);
-
-      await driver.waitForSelector(
-        {
-          css: '.transaction-list-item__primary-currency',
-          text: '-1 ETH',
-        },
-        { timeout: 10000 },
-      );
-    });
-  });
-
   describe('Send ETH from dapp using advanced gas controls', function () {
     let windowHandles;
     let extension;
@@ -585,11 +407,12 @@ describe('MetaMask', function () {
     });
 
     it('finds the transaction in the transactions list', async function () {
+      await driver.clickElement('[data-testid="home__activity-tab"]');
       await driver.wait(async () => {
         const confirmedTxes = await driver.findElements(
           '.transaction-list__completed-transactions .transaction-list-item',
         );
-        return confirmedTxes.length === 4;
+        return confirmedTxes.length === 1;
       }, 10000);
 
       await driver.waitForSelector({
@@ -804,7 +627,7 @@ describe('MetaMask', function () {
         const confirmedTxes = await driver.findElements(
           '.transaction-list__completed-transactions .transaction-list-item',
         );
-        return confirmedTxes.length === 5;
+        return confirmedTxes.length === 2;
       }, 10000);
     });
   });
@@ -855,7 +678,7 @@ describe('MetaMask', function () {
       await driver.delay(largeDelayMs);
 
       await driver.waitForSelector(
-        '.transaction-list__completed-transactions .transaction-list-item:nth-of-type(6)',
+        '.transaction-list__completed-transactions .transaction-list-item:nth-of-type(3)',
       );
 
       await driver.waitForSelector(
@@ -937,7 +760,7 @@ describe('MetaMask', function () {
       await driver.delay(regularDelayMs);
 
       await driver.waitForSelector(
-        '.transaction-list__completed-transactions .transaction-list-item:nth-of-type(7)',
+        '.transaction-list__completed-transactions .transaction-list-item:nth-of-type(4)',
         { timeout: 10000 },
       );
       await driver.waitForSelector(
@@ -972,7 +795,7 @@ describe('MetaMask', function () {
         const confirmedTxes = await driver.findElements(
           '.transaction-list__completed-transactions .transaction-list-item',
         );
-        return confirmedTxes.length === 8;
+        return confirmedTxes.length === 5;
       }, 10000);
 
       await driver.waitForSelector(
@@ -991,12 +814,12 @@ describe('MetaMask', function () {
       const balance = await driver.waitForSelector(
         {
           css: '[data-testid="eth-overview__primary-currency"]',
-          text: '87.',
+          text: '90.',
         },
         { timeout: 10000 },
       );
       const tokenAmount = await balance.getText();
-      assert.ok(/^87.*\s*ETH.*$/u.test(tokenAmount));
+      assert.ok(/^90.*\s*ETH.*$/u.test(tokenAmount));
       await driver.delay(regularDelayMs);
     });
   });
diff --git a/test/e2e/tests/send-eth.spec.js b/test/e2e/tests/send-eth.spec.js
new file mode 100644
index 000000000..b6c5130c0
--- /dev/null
+++ b/test/e2e/tests/send-eth.spec.js
@@ -0,0 +1,218 @@
+const { strict: assert } = require('assert');
+const { withFixtures } = require('../helpers');
+
+describe('Send ETH from inside MetaMask using default gas', function () {
+  const ganacheOptions = {
+    accounts: [
+      {
+        secretKey:
+          '0x7C9529A67102755B7E6102D6D950AC5D5863C98713805CEC576B945B15B71EAC',
+        balance: 25000000000000000000,
+      },
+    ],
+  };
+  it('finds the transaction in the transactions list', async function () {
+    await withFixtures(
+      {
+        fixtures: 'imported-account',
+        ganacheOptions,
+        title: this.test.title,
+      },
+      async ({ driver }) => {
+        await driver.navigate();
+        await driver.fill('#password', 'correct horse battery staple');
+        await driver.press('#password', driver.Key.ENTER);
+
+        await driver.clickElement('[data-testid="eth-overview-send"]');
+
+        await driver.fill(
+          'input[placeholder="Search, public address (0x), or ENS"]',
+          '0x2f318C334780961FB129D2a6c30D0763d9a5C970',
+        );
+
+        const inputAmount = await driver.findElement('.unit-input__input');
+        await inputAmount.fill('1000');
+
+        const errorAmount = await driver.findElement('.send-v2__error-amount');
+        assert.equal(
+          await errorAmount.getText(),
+          'Insufficient funds.',
+          'send screen should render an insufficient fund error message',
+        );
+
+        await inputAmount.press(driver.Key.BACK_SPACE);
+        await inputAmount.press(driver.Key.BACK_SPACE);
+        await inputAmount.press(driver.Key.BACK_SPACE);
+
+        await driver.assertElementNotPresent('.send-v2__error-amount');
+
+        const amountMax = await driver.findClickableElement(
+          '.send-v2__amount-max',
+        );
+        await amountMax.click();
+
+        let inputValue = await inputAmount.getAttribute('value');
+
+        assert(Number(inputValue) > 24);
+
+        await amountMax.click();
+
+        assert.equal(await inputAmount.isEnabled(), true);
+
+        await inputAmount.fill('1');
+
+        inputValue = await inputAmount.getAttribute('value');
+        assert.equal(inputValue, '1');
+
+        // Continue to next screen
+        await driver.clickElement({ text: 'Next', tag: 'button' });
+
+        await driver.clickElement({ text: 'Confirm', tag: 'button' });
+
+        await driver.clickElement('[data-testid="home__activity-tab"]');
+        await driver.wait(async () => {
+          const confirmedTxes = await driver.findElements(
+            '.transaction-list__completed-transactions .transaction-list-item',
+          );
+          return confirmedTxes.length === 1;
+        }, 10000);
+
+        await driver.waitForSelector({
+          css: '.transaction-list-item__primary-currency',
+          text: '-1 ETH',
+        });
+      },
+    );
+  });
+});
+
+describe('Send ETH from inside MetaMask using fast gas option', function () {
+  const ganacheOptions = {
+    accounts: [
+      {
+        secretKey:
+          '0x7C9529A67102755B7E6102D6D950AC5D5863C98713805CEC576B945B15B71EAC',
+        balance: 25000000000000000000,
+      },
+    ],
+  };
+  it('finds the transaction in the transactions list', async function () {
+    await withFixtures(
+      {
+        fixtures: 'imported-account',
+        ganacheOptions,
+        title: this.test.title,
+      },
+      async ({ driver }) => {
+        await driver.navigate();
+        await driver.fill('#password', 'correct horse battery staple');
+        await driver.press('#password', driver.Key.ENTER);
+
+        await driver.clickElement('[data-testid="eth-overview-send"]');
+
+        await driver.fill(
+          'input[placeholder="Search, public address (0x), or ENS"]',
+          '0x2f318C334780961FB129D2a6c30D0763d9a5C970',
+        );
+
+        const inputAmount = await driver.findElement('.unit-input__input');
+        await inputAmount.fill('1');
+
+        const inputValue = await inputAmount.getAttribute('value');
+        assert.equal(inputValue, '1');
+
+        // Set the gas price
+        await driver.clickElement({ text: 'Fast', tag: 'button/div/div' });
+
+        // Continue to next screen
+        await driver.clickElement({ text: 'Next', tag: 'button' });
+
+        await driver.clickElement({ text: 'Confirm', tag: 'button' });
+
+        await driver.waitForSelector(
+          '.transaction-list__completed-transactions .transaction-list-item',
+        );
+        await driver.waitForSelector({
+          css: '.transaction-list-item__primary-currency',
+          text: '-1 ETH',
+        });
+      },
+    );
+  });
+});
+
+describe('Send ETH from inside MetaMask using advanced gas modal', function () {
+  const ganacheOptions = {
+    accounts: [
+      {
+        secretKey:
+          '0x7C9529A67102755B7E6102D6D950AC5D5863C98713805CEC576B945B15B71EAC',
+        balance: 25000000000000000000,
+      },
+    ],
+  };
+  it('finds the transaction in the transactions list', async function () {
+    await withFixtures(
+      {
+        fixtures: 'imported-account',
+        ganacheOptions,
+        title: this.test.title,
+      },
+      async ({ driver }) => {
+        await driver.navigate();
+        await driver.fill('#password', 'correct horse battery staple');
+        await driver.press('#password', driver.Key.ENTER);
+
+        await driver.clickElement('[data-testid="eth-overview-send"]');
+
+        await driver.fill(
+          'input[placeholder="Search, public address (0x), or ENS"]',
+          '0x2f318C334780961FB129D2a6c30D0763d9a5C970',
+        );
+
+        const inputAmount = await driver.findElement('.unit-input__input');
+        await inputAmount.fill('1');
+
+        const inputValue = await inputAmount.getAttribute('value');
+        assert.equal(inputValue, '1');
+
+        // Set the gas limit
+        await driver.clickElement('.advanced-gas-options-btn');
+
+        // wait for gas modal to be visible
+        const gasModal = await driver.findVisibleElement('span .modal');
+
+        await driver.clickElement({ text: 'Save', tag: 'button' });
+
+        // Wait for gas modal to be removed from DOM
+        await gasModal.waitForElementState('hidden');
+
+        // Continue to next screen
+        await driver.clickElement({ text: 'Next', tag: 'button' });
+
+        const transactionAmounts = await driver.findElements(
+          '.currency-display-component__text',
+        );
+        const transactionAmount = transactionAmounts[0];
+        assert.equal(await transactionAmount.getText(), '1');
+
+        await driver.clickElement({ text: 'Confirm', tag: 'button' });
+
+        await driver.wait(async () => {
+          const confirmedTxes = await driver.findElements(
+            '.transaction-list__completed-transactions .transaction-list-item',
+          );
+          return confirmedTxes.length === 1;
+        }, 10000);
+
+        await driver.waitForSelector(
+          {
+            css: '.transaction-list-item__primary-currency',
+            text: '-1 ETH',
+          },
+          { timeout: 10000 },
+        );
+      },
+    );
+  });
+});

From 3c2e83dff3e7fa4978b481a519291ff774b3a4fc Mon Sep 17 00:00:00 2001
From: sooyoung <hyunsy822@gmail.com>
Date: Thu, 17 Jun 2021 23:26:58 +0900
Subject: [PATCH 022/141] fix 'confirm popup' ui (#11331)

---
 ui/pages/confirm-approve/confirm-approve-content/index.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/pages/confirm-approve/confirm-approve-content/index.scss b/ui/pages/confirm-approve/confirm-approve-content/index.scss
index edfafbebe..d005811af 100644
--- a/ui/pages/confirm-approve/confirm-approve-content/index.scss
+++ b/ui/pages/confirm-approve/confirm-approve-content/index.scss
@@ -3,7 +3,6 @@
   flex-flow: column;
   align-items: center;
   width: 100%;
-  height: 100%;
   font-style: normal;
 
   &__identicon-wrapper {

From 64835b1457b005e832767fe566a912f8a5cf712c Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Thu, 17 Jun 2021 11:40:36 -0700
Subject: [PATCH 023/141] Fixing untranslated text in ConfirmApproveContent
 (#11339)

---
 app/_locales/en/messages.json                                 | 3 +++
 .../confirm-approve-content.component.js                      | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 6b7739ed0..fe0dc82f1 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -2429,6 +2429,9 @@
   "viewContact": {
     "message": "View Contact"
   },
+  "viewFullTransactionDetails": {
+    "message": "View full transaction details"
+  },
   "viewMore": {
     "message": "View More"
   },
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 05bb4c77b..e8230a9f5 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
@@ -303,7 +303,7 @@ export default class ConfirmApproveContent extends Component {
               >
                 <div className="confirm-approve-content__view-full-tx-button cursor-pointer">
                   <div className="confirm-approve-content__small-blue-text">
-                    View full transaction details
+                    {t('viewFullTransactionDetails')}
                   </div>
                   <i
                     className={classnames({
@@ -332,7 +332,7 @@ export default class ConfirmApproveContent extends Component {
                 >
                   <div className="confirm-approve-content__view-full-tx-button cursor-pointer">
                     <div className="confirm-approve-content__small-blue-text">
-                      View full transaction details
+                      {t('viewFullTransactionDetails')}
                     </div>
                     <i
                       className={classnames({

From 76f25eef819146e34f25b1edb3a488d1d61d340c Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Thu, 17 Jun 2021 11:43:25 -0700
Subject: [PATCH 024/141] Updating Secret Recovery code -> Secret Recovery
 Phrase (Backup notice) (#11338)

* Updating Secret Recovery code -> Secret Recovery Phrase (Backup notice)

* Updating expected text for e2e test
---
 app/_locales/en/messages.json               | 2 +-
 test/e2e/tests/incremental-security.spec.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index fe0dc82f1..ddc5a5e18 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -229,7 +229,7 @@
     "message": "This secret code is required to recover your wallet in case you lose your device, forget your password, have to re-install MetaMask, or want to access your wallet on another device."
   },
   "backupApprovalNotice": {
-    "message": "Backup your Secret Recovery code to keep your wallet and funds secure."
+    "message": "Backup your Secret Recovery Phrase to keep your wallet and funds secure."
   },
   "backupNow": {
     "message": "Backup now"
diff --git a/test/e2e/tests/incremental-security.spec.js b/test/e2e/tests/incremental-security.spec.js
index a07f44c96..185a0d8c0 100644
--- a/test/e2e/tests/incremental-security.spec.js
+++ b/test/e2e/tests/incremental-security.spec.js
@@ -122,7 +122,7 @@ describe('Incremental Security', function () {
         // should show a backup reminder
         const backupReminder = await driver.findElements({
           xpath:
-            "//div[contains(@class, 'home-notification__text') and contains(text(), 'Backup your Secret Recovery code to keep your wallet and funds secure')]",
+            "//div[contains(@class, 'home-notification__text') and contains(text(), 'Backup your Secret Recovery Phrase to keep your wallet and funds secure')]",
         });
         assert.equal(backupReminder.length, 1);
 

From 52de2cda494a1690a8cf8e02b496b30b7f838994 Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Thu, 17 Jun 2021 18:36:53 -0230
Subject: [PATCH 025/141] Update `benchmark.js` script to use `yargs` (#11318)

Our benchmark script now uses `yargs`. Functionally it should be nearly
the same as before, except that now it has more documentation and
validation. The one functional difference aside from that is that the
`--pages` flag now takes space-separated arguments rather than comma-
separated.
---
 test/e2e/benchmark.js | 82 ++++++++++++++++++++-----------------------
 1 file changed, 38 insertions(+), 44 deletions(-)

diff --git a/test/e2e/benchmark.js b/test/e2e/benchmark.js
index bc3bc5070..a9d38c6fc 100644
--- a/test/e2e/benchmark.js
+++ b/test/e2e/benchmark.js
@@ -2,6 +2,8 @@
 
 const path = require('path');
 const { promises: fs, constants: fsConstants } = require('fs');
+const yargs = require('yargs/yargs');
+const { hideBin } = require('yargs/helpers');
 const ttest = require('ttest');
 const { withFixtures } = require('./helpers');
 const { PAGES } = require('./webdriver/driver');
@@ -129,60 +131,52 @@ async function getFirstParentDirectoryThatExists(directory) {
 }
 
 async function main() {
-  const args = process.argv.slice(2);
+  const { argv } = yargs(hideBin(process.argv)).usage(
+    '$0 [options]',
+    'Run a page load benchmark',
+    (_yargs) =>
+      _yargs
+        .option('pages', {
+          array: true,
+          default: ['home'],
+          description:
+            'Set the page(s) to be benchmarked. This flag can accept multiple values (space-separated).',
+          choices: ALL_PAGES,
+        })
+        .option('samples', {
+          default: DEFAULT_NUM_SAMPLES,
+          description: 'The number of times the benchmark should be run.',
+          type: 'number',
+        })
+        .option('out', {
+          description:
+            'Output filename. Output printed to STDOUT of this is omitted.',
+          type: 'string',
+          normalize: true,
+        }),
+  );
+
+  const { pages, samples, out } = argv;
 
-  let pages = ['home'];
-  let numSamples = DEFAULT_NUM_SAMPLES;
-  let outputPath;
   let outputDirectory;
   let existingParentDirectory;
-
-  while (args.length) {
-    if (/^(--pages|-p)$/u.test(args[0])) {
-      if (args[1] === undefined) {
-        throw new Error('Missing pages argument');
-      }
-      pages = args[1].split(',');
-      for (const page of pages) {
-        if (!ALL_PAGES.includes(page)) {
-          throw new Error(`Invalid page: '${page}`);
-        }
-      }
-      args.splice(0, 2);
-    } else if (/^(--samples|-s)$/u.test(args[0])) {
-      if (args[1] === undefined) {
-        throw new Error('Missing number of samples');
-      }
-      numSamples = parseInt(args[1], 10);
-      if (isNaN(numSamples)) {
-        throw new Error(`Invalid 'samples' argument given: '${args[1]}'`);
-      }
-      args.splice(0, 2);
-    } else if (/^(--out|-o)$/u.test(args[0])) {
-      if (args[1] === undefined) {
-        throw new Error('Missing output filename');
-      }
-      outputPath = path.resolve(args[1]);
-      outputDirectory = path.dirname(outputPath);
-      existingParentDirectory = await getFirstParentDirectoryThatExists(
-        outputDirectory,
-      );
-      if (!(await isWritable(existingParentDirectory))) {
-        throw new Error(`Specified directory is not writable: '${args[1]}'`);
-      }
-      args.splice(0, 2);
-    } else {
-      throw new Error(`Unrecognized argument: '${args[0]}'`);
+  if (out) {
+    outputDirectory = path.dirname(out);
+    existingParentDirectory = await getFirstParentDirectoryThatExists(
+      outputDirectory,
+    );
+    if (!(await isWritable(existingParentDirectory))) {
+      throw new Error('Specified output file directory is not writable');
     }
   }
 
-  const results = await profilePageLoad(pages, numSamples);
+  const results = await profilePageLoad(pages, samples);
 
-  if (outputPath) {
+  if (out) {
     if (outputDirectory !== existingParentDirectory) {
       await fs.mkdir(outputDirectory, { recursive: true });
     }
-    await fs.writeFile(outputPath, JSON.stringify(results, null, 2));
+    await fs.writeFile(out, JSON.stringify(results, null, 2));
   } else {
     console.log(JSON.stringify(results, null, 2));
   }

From 7cc747c792fb1a490163427e671c51298c7652b9 Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Fri, 18 Jun 2021 11:45:58 -0500
Subject: [PATCH 026/141] change download location of chrome file (#11346)

* change download location of chrome file

* Update .circleci/scripts/chrome-install.sh

Co-authored-by: Mark Stacey <markjstacey@gmail.com>

Co-authored-by: Mark Stacey <markjstacey@gmail.com>
---
 .circleci/scripts/chrome-install.sh | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/.circleci/scripts/chrome-install.sh b/.circleci/scripts/chrome-install.sh
index 491e8c3ed..c301f9056 100755
--- a/.circleci/scripts/chrome-install.sh
+++ b/.circleci/scripts/chrome-install.sh
@@ -6,10 +6,17 @@ set -o pipefail
 
 CHROME_VERSION='79.0.3945.117-1'
 CHROME_BINARY="google-chrome-stable_${CHROME_VERSION}_amd64.deb"
-CHROME_BINARY_URL="http://dl.google.com/linux/chrome/deb/pool/main/g/google-chrome-stable/${CHROME_BINARY}"
+CHROME_BINARY_URL="http://mirror.cs.uchicago.edu/google-chrome/pool/main/g/google-chrome-stable/${CHROME_BINARY}"
+
+CHROME_BINARY_SHA512SUM='2d4f76202219a40e560477d79023fa4a847187a086278924a9d916dcd5fbefafdcf7dfd8879fae907b8276b244e71a3b8a1b00a88dee87b18738ce31134a6713'
 
 wget -O "${CHROME_BINARY}" -t 5 "${CHROME_BINARY_URL}"
 
+if [[ $(shasum -a 512 "${CHROME_BINARY}" | cut '--delimiter= ' -f1) != "${CHROME_BINARY_SHA512SUM}" ]]
+then
+  exit 1
+fi
+
 (sudo dpkg -i "${CHROME_BINARY}" || sudo apt-get -fy install)
 
 rm -rf "${CHROME_BINARY}"

From 27389fc71ed28334a4f2134eb3a88bd6d8f82900 Mon Sep 17 00:00:00 2001
From: Alex Donesky <adonesky@gmail.com>
Date: Mon, 21 Jun 2021 09:28:35 -0500
Subject: [PATCH 027/141] fix unsafe destructuring instance (#11351)

---
 ui/ducks/confirm-transaction/confirm-transaction.duck.js | 4 +---
 ui/selectors/confirm-transaction.js                      | 4 +---
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/ui/ducks/confirm-transaction/confirm-transaction.duck.js b/ui/ducks/confirm-transaction/confirm-transaction.duck.js
index c02af582a..b0dfd5636 100644
--- a/ui/ducks/confirm-transaction/confirm-transaction.duck.js
+++ b/ui/ducks/confirm-transaction/confirm-transaction.duck.js
@@ -203,9 +203,7 @@ export function updateTxDataAndCalculate(txData) {
 
     // if the gas price from our infura endpoint is null or undefined
     // use the metaswap average price estimation as a fallback
-    let {
-      txParams: { gasPrice },
-    } = txData;
+    let { txParams: { gasPrice } = {} } = txData;
     if (!gasPrice) {
       gasPrice = getAveragePriceEstimateInHexWEI(state) || '0x0';
     }
diff --git a/ui/selectors/confirm-transaction.js b/ui/selectors/confirm-transaction.js
index 8c8abc4e3..101e522d4 100644
--- a/ui/selectors/confirm-transaction.js
+++ b/ui/selectors/confirm-transaction.js
@@ -223,9 +223,7 @@ export const transactionFeeSelector = function (state, txData) {
 
   // if the gas price from our infura endpoint is null or undefined
   // use the metaswap average price estimation as a fallback
-  let {
-    txParams: { gasPrice },
-  } = txData;
+  let { txParams: { gasPrice } = {} } = txData;
   if (!gasPrice) {
     gasPrice = getAveragePriceEstimateInHexWEI(state) || '0x0';
   }

From cc90fca2f6031854f35c8ac6cf2e4ce83db39a53 Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Mon, 21 Jun 2021 12:46:18 -0230
Subject: [PATCH 028/141] Add retries to the benchmark script (#11319)

The benchmark script can now be set to retry upon failure, like the E2E
tests do. The default is zero, just as with the E2E tests. A retry of 2
has been set in CI to match the E2E tests as well.

The `retry` module had to be adjusted to throw an error in the case of
failure. Previously it just set the exit code, but that only worked
because it was the last thing called before the process ended. That is
no longer the case.
---
 .circleci/config.yml     |  2 +-
 development/lib/retry.js |  4 +---
 test/e2e/benchmark.js    | 25 ++++++++++++++++++-------
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 27c4c8144..cc41155be 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -448,7 +448,7 @@ jobs:
           command: mv ./builds-test ./builds
       - run:
           name: Run page load benchmark
-          command: yarn benchmark:chrome --out test-artifacts/chrome/benchmark/pageload.json
+          command: yarn benchmark:chrome --out test-artifacts/chrome/benchmark/pageload.json --retries 2
       - store_artifacts:
           path: test-artifacts
           destination: test-artifacts
diff --git a/development/lib/retry.js b/development/lib/retry.js
index 20783aa32..356f1a08f 100644
--- a/development/lib/retry.js
+++ b/development/lib/retry.js
@@ -1,5 +1,3 @@
-const { exitWithError } = require('./exit-with-error');
-
 /**
  * Run the given function, retrying it upon failure until reaching the
  * specified number of retries.
@@ -19,7 +17,7 @@ async function retry(retries, functionToRetry) {
       attempts += 1;
     }
   }
-  exitWithError('Retry limit reached');
+  throw new Error('Retry limit reached');
 }
 
 module.exports = { retry };
diff --git a/test/e2e/benchmark.js b/test/e2e/benchmark.js
index a9d38c6fc..fc8843c58 100644
--- a/test/e2e/benchmark.js
+++ b/test/e2e/benchmark.js
@@ -5,6 +5,8 @@ const { promises: fs, constants: fsConstants } = require('fs');
 const yargs = require('yargs/yargs');
 const { hideBin } = require('yargs/helpers');
 const ttest = require('ttest');
+const { retry } = require('../../development/lib/retry');
+const { exitWithError } = require('../../development/lib/exit-with-error');
 const { withFixtures } = require('./helpers');
 const { PAGES } = require('./webdriver/driver');
 
@@ -54,12 +56,16 @@ const marginOfErrorResult = calculateResult((array) =>
   array.length === 1 ? 0 : calculateMarginOfError(array),
 );
 
-async function profilePageLoad(pages, numSamples) {
+async function profilePageLoad(pages, numSamples, retries) {
   const results = {};
   for (const pageName of pages) {
     const runResults = [];
     for (let i = 0; i < numSamples; i += 1) {
-      runResults.push(await measurePage(pageName));
+      let result;
+      await retry(retries, async () => {
+        result = await measurePage(pageName);
+      });
+      runResults.push(result);
     }
 
     if (runResults.some((result) => result.navigation.lenth > 1)) {
@@ -153,10 +159,16 @@ async function main() {
             'Output filename. Output printed to STDOUT of this is omitted.',
           type: 'string',
           normalize: true,
+        })
+        .option('retries', {
+          default: 0,
+          description:
+            'Set how many times each benchmark sample should be retried upon failure.',
+          type: 'number',
         }),
   );
 
-  const { pages, samples, out } = argv;
+  const { pages, samples, out, retries } = argv;
 
   let outputDirectory;
   let existingParentDirectory;
@@ -170,7 +182,7 @@ async function main() {
     }
   }
 
-  const results = await profilePageLoad(pages, samples);
+  const results = await profilePageLoad(pages, samples, retries);
 
   if (out) {
     if (outputDirectory !== existingParentDirectory) {
@@ -182,7 +194,6 @@ async function main() {
   }
 }
 
-main().catch((e) => {
-  console.error(e);
-  process.exit(1);
+main().catch((error) => {
+  exitWithError(error);
 });

From 303ba1eac87d7b746545a43632a588463f24d736 Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Mon, 21 Jun 2021 12:02:43 -0700
Subject: [PATCH 029/141] Add 'Transaction Added' metric event to
 TransactionController (#11341)

---
 app/scripts/controllers/transactions/index.js | 24 +++++
 .../controllers/transactions/index.test.js    | 90 +++++++++++++++++++
 2 files changed, 114 insertions(+)

diff --git a/app/scripts/controllers/transactions/index.js b/app/scripts/controllers/transactions/index.js
index 3889b9fb8..a544c222f 100644
--- a/app/scripts/controllers/transactions/index.js
+++ b/app/scripts/controllers/transactions/index.js
@@ -202,8 +202,32 @@ export default class TransactionController extends EventEmitter {
   @emits ${txMeta.id}:unapproved
   */
   addTransaction(txMeta) {
+    const {
+      type,
+      status,
+      chainId,
+      origin: referrer,
+      txParams: { gasPrice },
+      metamaskNetworkId: network,
+    } = txMeta;
+    const source = referrer === 'metamask' ? 'user' : 'dapp';
+
     this.txStateManager.addTransaction(txMeta);
     this.emit(`${txMeta.id}:unapproved`, txMeta);
+
+    this._trackMetaMetricsEvent({
+      event: 'Transaction Added',
+      category: 'Transactions',
+      sensitiveProperties: {
+        type,
+        status,
+        gasPrice,
+        referrer,
+        source,
+        network,
+        chain_id: chainId,
+      },
+    });
   }
 
   /**
diff --git a/app/scripts/controllers/transactions/index.test.js b/app/scripts/controllers/transactions/index.test.js
index d08aa856a..54a1f7271 100644
--- a/app/scripts/controllers/transactions/index.test.js
+++ b/app/scripts/controllers/transactions/index.test.js
@@ -60,6 +60,7 @@ describe('Transaction Controller', function () {
       getPermittedAccounts: () => undefined,
       getCurrentChainId: () => currentChainId,
       getParticipateInMetrics: () => false,
+      trackMetaMetricsEvent: () => undefined,
     });
     txController.nonceTracker.getNonceLock = () =>
       Promise.resolve({ nextNonce: 0, releaseLock: noop });
@@ -418,6 +419,19 @@ describe('Transaction Controller', function () {
   });
 
   describe('#addTransaction', function () {
+    let trackMetaMetricsEventSpy;
+
+    beforeEach(function () {
+      trackMetaMetricsEventSpy = sinon.spy(
+        txController,
+        '_trackMetaMetricsEvent',
+      );
+    });
+
+    afterEach(function () {
+      trackMetaMetricsEventSpy.restore();
+    });
+
     it('should emit updates', function (done) {
       const txMeta = {
         id: '1',
@@ -455,6 +469,82 @@ describe('Transaction Controller', function () {
         .catch(done);
       txController.addTransaction(txMeta);
     });
+
+    it('should call _trackMetaMetricsEvent with the correct payload (one)', function () {
+      const txMeta = {
+        id: 1,
+        status: TRANSACTION_STATUSES.UNAPPROVED,
+        txParams: {
+          from: fromAccount.address,
+          to: '0x1678a085c290ebd122dc42cba69373b5953b831d',
+          gasPrice: '0x77359400',
+          gas: '0x7b0d',
+          nonce: '0x4b',
+        },
+        type: 'sentEther',
+        origin: 'metamask',
+        chainId: currentChainId,
+        metamaskNetworkId: currentNetworkId,
+      };
+      const expectedPayload = {
+        event: 'Transaction Added',
+        category: 'Transactions',
+        sensitiveProperties: {
+          chain_id: '0x2a',
+          gasPrice: '0x77359400',
+          network: '42',
+          referrer: 'metamask',
+          source: 'user',
+          status: 'unapproved',
+          type: 'sentEther',
+        },
+      };
+
+      txController.addTransaction(txMeta);
+      assert.equal(trackMetaMetricsEventSpy.callCount, 1);
+      assert.deepEqual(
+        trackMetaMetricsEventSpy.getCall(0).args[0],
+        expectedPayload,
+      );
+    });
+
+    it('should call _trackMetaMetricsEvent with the correct payload (two)', function () {
+      const txMeta = {
+        id: 1,
+        status: TRANSACTION_STATUSES.UNAPPROVED,
+        txParams: {
+          from: fromAccount.address,
+          to: '0x1678a085c290ebd122dc42cba69373b5953b831d',
+          gasPrice: '0x77359400',
+          gas: '0x7b0d',
+          nonce: '0x4b',
+        },
+        type: 'sentEther',
+        origin: 'other',
+        chainId: '0x3',
+        metamaskNetworkId: '3',
+      };
+      const expectedPayload = {
+        event: 'Transaction Added',
+        category: 'Transactions',
+        sensitiveProperties: {
+          chain_id: '0x3',
+          gasPrice: '0x77359400',
+          network: '3',
+          referrer: 'other',
+          source: 'dapp',
+          status: 'unapproved',
+          type: 'sentEther',
+        },
+      };
+
+      txController.addTransaction(txMeta);
+      assert.equal(trackMetaMetricsEventSpy.callCount, 1);
+      assert.deepEqual(
+        trackMetaMetricsEventSpy.getCall(0).args[0],
+        expectedPayload,
+      );
+    });
   });
 
   describe('#approveTransaction', function () {

From e144bbd356c5e98cc4960a8b5916c21f56a9caee Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Mon, 21 Jun 2021 12:02:51 -0700
Subject: [PATCH 030/141] Adding gasEstimateType to 'Changed Gas Button'
 metrics event (#11352)

Adding 'Changed Gas Button' metrics event
---
 .../send-gas-row/send-gas-row.component.js    | 25 ++++++++-----------
 .../send-gas-row.component.test.js            |  2 +-
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/ui/pages/send/send-content/send-gas-row/send-gas-row.component.js b/ui/pages/send/send-content/send-gas-row/send-gas-row.component.js
index 9cbe21629..0ee7a6030 100644
--- a/ui/pages/send/send-content/send-gas-row/send-gas-row.component.js
+++ b/ui/pages/send/send-content/send-gas-row/send-gas-row.component.js
@@ -32,11 +32,11 @@ export default class SendGasRow extends Component {
 
   static contextTypes = {
     t: PropTypes.func,
-    metricsEvent: PropTypes.func,
+    trackEvent: PropTypes.func,
   };
 
   renderAdvancedOptionsButton() {
-    const { metricsEvent } = this.context;
+    const { trackEvent } = this.context;
     const {
       showCustomizeGasModal,
       isMainnet,
@@ -54,12 +54,9 @@ export default class SendGasRow extends Component {
       <div
         className="advanced-gas-options-btn"
         onClick={() => {
-          metricsEvent({
-            eventOpts: {
-              category: 'Transactions',
-              action: 'Edit Screen',
-              name: 'Clicked "Advanced Options"',
-            },
+          trackEvent({
+            category: 'Transactions',
+            event: 'Clicked "Advanced Options"',
           });
           showCustomizeGasModal();
         }}
@@ -105,7 +102,7 @@ export default class SendGasRow extends Component {
       isEthGasPrice,
       noGasPrice,
     } = this.props;
-    const { metricsEvent } = this.context;
+    const { trackEvent } = this.context;
     const gasPriceFetchFailure = isEthGasPrice || noGasPrice;
 
     const gasPriceButtonGroup = (
@@ -115,11 +112,11 @@ export default class SendGasRow extends Component {
           showCheck={false}
           {...gasPriceButtonGroupProps}
           handleGasPriceSelection={async (opts) => {
-            metricsEvent({
-              eventOpts: {
-                category: 'Transactions',
-                action: 'Edit Screen',
-                name: 'Changed Gas Button',
+            trackEvent({
+              category: 'Transactions',
+              event: 'User Clicked Gas Estimate Button',
+              properties: {
+                gasEstimateType: opts.gasEstimateType.toLowerCase(),
               },
             });
             await gasPriceButtonGroupProps.handleGasPriceSelection(opts);
diff --git a/ui/pages/send/send-content/send-gas-row/send-gas-row.component.test.js b/ui/pages/send/send-content/send-gas-row/send-gas-row.component.test.js
index b6382f5bf..7f4505558 100644
--- a/ui/pages/send/send-content/send-gas-row/send-gas-row.component.test.js
+++ b/ui/pages/send/send-content/send-gas-row/send-gas-row.component.test.js
@@ -32,7 +32,7 @@ describe('SendGasRow Component', () => {
             anotherGasPriceButtonGroupProp: 'bar',
           }}
         />,
-        { context: { t: (str) => `${str}_t`, metricsEvent: () => ({}) } },
+        { context: { t: (str) => `${str}_t`, trackEvent: () => ({}) } },
       );
       wrapper.setProps({ isMainnet: true });
     });

From f1f2a01c76c0e5eece2e53d88df4ae932d11b425 Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Mon, 21 Jun 2021 15:51:09 -0700
Subject: [PATCH 031/141] Using fixed positioning for home notifications
 (#11356)

---
 ui/components/app/multiple-notifications/index.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/components/app/multiple-notifications/index.scss b/ui/components/app/multiple-notifications/index.scss
index ea17e9467..01d3af889 100644
--- a/ui/components/app/multiple-notifications/index.scss
+++ b/ui/components/app/multiple-notifications/index.scss
@@ -55,9 +55,9 @@
 
 .home-notification-wrapper--show-first {
   > div {
-    position: absolute;
-    bottom: 0;
-    right: 0;
+    position: fixed;
+    bottom: 10px;
+    right: 10px;
     visibility: hidden;
   }
 

From be244f4908a370b63a69dc43ab0faaa4acd89d15 Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Tue, 22 Jun 2021 15:02:54 -0230
Subject: [PATCH 032/141] Fix chromereload while on development (#11359)

---
 development/build/static.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/development/build/static.js b/development/build/static.js
index 9ae309e53..636af1106 100644
--- a/development/build/static.js
+++ b/development/build/static.js
@@ -76,7 +76,7 @@ for (const tag of languageTags) {
 const copyTargetsDev = [
   ...copyTargets,
   {
-    src: './app/scripts/',
+    src: './development',
     pattern: '/chromereload.js',
     dest: ``,
   },

From e10ddbe3a347f08d5a60d5ec307e70f29b2ef7c8 Mon Sep 17 00:00:00 2001
From: Alex Donesky <adonesky@gmail.com>
Date: Tue, 22 Jun 2021 12:39:44 -0500
Subject: [PATCH 033/141] add erc-721 token detection and flag to disable
 sending (#11210)

* add erc-721 token detection and flag to disable sending

* addressing feedback

* remove redundant provider instantiation

* fix issue caused by unprotected destructuring

* add tests and documentation

* move add isERC721 flag to useTokenTracker hook

* Update  and  unit tests

* use memoizedTokens in useTokenTracker

Co-authored-by: Dan Miller <danjm.com@gmail.com>
---
 app/_locales/en/messages.json                 |   4 +
 app/scripts/controllers/detect-tokens.test.js |  15 +-
 app/scripts/controllers/preferences.js        |  93 +++++++++---
 app/scripts/controllers/preferences.test.js   | 143 +++++++++++++++++-
 app/scripts/metamask-controller.js            |  15 +-
 package.json                                  |   1 +
 .../app/asset-list-item/asset-list-item.js    |  12 +-
 ui/components/app/token-cell/token-cell.js    |   3 +
 .../app/wallet-overview/token-overview.js     |   2 +
 ui/helpers/constants/error-keys.js            |   1 +
 ui/hooks/useTokenTracker.js                   |  12 +-
 .../send-asset-row.component.js               |  45 +++++-
 .../send-asset-row.container.js               |  10 +-
 .../send-content/send-content.component.js    |  21 ++-
 ui/selectors/confirm-transaction.js           |   5 +-
 ui/store/actions.js                           |  15 ++
 16 files changed, 346 insertions(+), 51 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index ddc5a5e18..7b53b9456 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -2387,6 +2387,10 @@
     "message": "verify the network details",
     "description": "Serves as link text for the 'unrecognizedChain' key. This text will be embedded inside the translation for that key."
   },
+  "unsendableAsset": {
+    "message": "Sending collectible (ERC-721) tokens is not currently supported",
+    "description": "This is an error message we show the user if they attempt to send a collectible asset type, for which currently don't support sending"
+  },
   "updatedWithDate": {
     "message": "Updated $1"
   },
diff --git a/app/scripts/controllers/detect-tokens.test.js b/app/scripts/controllers/detect-tokens.test.js
index 3b5eddd24..4d4578124 100644
--- a/app/scripts/controllers/detect-tokens.test.js
+++ b/app/scripts/controllers/detect-tokens.test.js
@@ -11,7 +11,7 @@ import PreferencesController from './preferences';
 
 describe('DetectTokensController', function () {
   const sandbox = sinon.createSandbox();
-  let keyringMemStore, network, preferences;
+  let keyringMemStore, network, preferences, provider;
 
   const noop = () => undefined;
 
@@ -23,12 +23,16 @@ describe('DetectTokensController', function () {
     keyringMemStore = new ObservableStore({ isUnlocked: false });
     network = new NetworkController();
     network.setInfuraProjectId('foo');
-    preferences = new PreferencesController({ network });
+    network.initializeProvider(networkControllerProviderConfig);
+    provider = network.getProviderAndBlockTracker().provider;
+    preferences = new PreferencesController({ network, provider });
     preferences.setAddresses([
       '0x7e57e2',
       '0xbc86727e770de68b1060c91f6bb6945c73e10388',
     ]);
-    network.initializeProvider(networkControllerProviderConfig);
+    sandbox
+      .stub(preferences, '_detectIsERC721')
+      .returns(Promise.resolve(false));
   });
 
   after(function () {
@@ -125,6 +129,7 @@ describe('DetectTokensController', function () {
         address: existingTokenAddress.toLowerCase(),
         decimals: existingToken.decimals,
         symbol: existingToken.symbol,
+        isERC721: false,
       },
     ]);
   });
@@ -177,11 +182,13 @@ describe('DetectTokensController', function () {
         address: existingTokenAddress.toLowerCase(),
         decimals: existingToken.decimals,
         symbol: existingToken.symbol,
+        isERC721: false,
       },
       {
         address: tokenAddressToAdd.toLowerCase(),
         decimals: tokenToAdd.decimals,
         symbol: tokenToAdd.symbol,
+        isERC721: false,
       },
     ]);
   });
@@ -234,11 +241,13 @@ describe('DetectTokensController', function () {
         address: existingTokenAddress.toLowerCase(),
         decimals: existingToken.decimals,
         symbol: existingToken.symbol,
+        isERC721: false,
       },
       {
         address: tokenAddressToAdd.toLowerCase(),
         decimals: tokenToAdd.decimals,
         symbol: tokenToAdd.symbol,
+        isERC721: false,
       },
     ]);
   });
diff --git a/app/scripts/controllers/preferences.js b/app/scripts/controllers/preferences.js
index 19aef453e..1c34a46b2 100644
--- a/app/scripts/controllers/preferences.js
+++ b/app/scripts/controllers/preferences.js
@@ -2,14 +2,21 @@ import { strict as assert } from 'assert';
 import { ObservableStore } from '@metamask/obs-store';
 import { ethErrors } from 'eth-rpc-errors';
 import { normalize as normalizeAddress } from 'eth-sig-util';
-import ethers from 'ethers';
+import { ethers } from 'ethers';
 import log from 'loglevel';
+import abiERC721 from 'human-standard-collectible-abi';
+import contractsMap from '@metamask/contract-metadata';
 import { LISTED_CONTRACT_ADDRESSES } from '../../../shared/constants/tokens';
 import { NETWORK_TYPE_TO_ID_MAP } from '../../../shared/constants/network';
 import { isPrefixedFormattedHexString } from '../../../shared/modules/network.utils';
-import { isValidHexAddress } from '../../../shared/modules/hexstring-utils';
+import {
+  isValidHexAddress,
+  toChecksumHexAddress,
+} from '../../../shared/modules/hexstring-utils';
 import { NETWORK_EVENTS } from './network';
 
+const ERC721METADATA_INTERFACE_ID = '0x5b5e139f';
+
 export default class PreferencesController {
   /**
    *
@@ -73,11 +80,18 @@ export default class PreferencesController {
     };
 
     this.network = opts.network;
+    this.ethersProvider = new ethers.providers.Web3Provider(opts.provider);
     this.store = new ObservableStore(initState);
     this.store.setMaxListeners(12);
     this.openPopup = opts.openPopup;
     this.migrateAddressBookState = opts.migrateAddressBookState;
-    this._subscribeToNetworkDidChange();
+
+    this.network.on(NETWORK_EVENTS.NETWORK_DID_CHANGE, () => {
+      const { tokens, hiddenTokens } = this._getTokenRelatedStates();
+      this.ethersProvider = new ethers.providers.Web3Provider(opts.provider);
+      this._updateAccountTokens(tokens, this.getAssetImages(), hiddenTokens);
+    });
+
     this._subscribeToInfuraAvailability();
 
     global.setPreference = (key, value) => {
@@ -393,6 +407,8 @@ export default class PreferencesController {
     });
     const previousIndex = tokens.indexOf(previousEntry);
 
+    newEntry.isERC721 = await this._detectIsERC721(newEntry.address);
+
     if (previousEntry) {
       tokens[previousIndex] = newEntry;
     } else {
@@ -403,6 +419,24 @@ export default class PreferencesController {
     return Promise.resolve(tokens);
   }
 
+  /**
+   * Adds isERC721 field to token object
+   * (Called when a user attempts to add tokens that were previously added which do not yet had isERC721 field)
+   *
+   * @param {string} tokenAddress - The contract address of the token requiring the isERC721 field added.
+   * @returns {Promise<object>} The new token object with the added isERC721 field.
+   *
+   */
+  async updateTokenType(tokenAddress) {
+    const { tokens } = this.store.getState();
+    const tokenIndex = tokens.findIndex((token) => {
+      return token.address === tokenAddress;
+    });
+    tokens[tokenIndex].isERC721 = await this._detectIsERC721(tokenAddress);
+    this.store.updateState({ tokens });
+    return Promise.resolve(tokens[tokenIndex]);
+  }
+
   /**
    * Removes a specified token from the tokens array and adds it to hiddenTokens array
    *
@@ -480,11 +514,8 @@ export default class PreferencesController {
         let addressBookKey = rpcDetail.chainId;
         if (!addressBookKey) {
           // We need to find the networkId to determine what these addresses were keyed by
-          const provider = new ethers.providers.JsonRpcProvider(
-            rpcDetail.rpcUrl,
-          );
           try {
-            addressBookKey = await provider.send('net_version');
+            addressBookKey = await this.ethersProvider.send('net_version');
             assert(typeof addressBookKey === 'string');
           } catch (error) {
             log.debug(error);
@@ -701,17 +732,6 @@ export default class PreferencesController {
   // PRIVATE METHODS
   //
 
-  /**
-   * Handle updating token list to reflect current network by listening for the
-   * NETWORK_DID_CHANGE event.
-   */
-  _subscribeToNetworkDidChange() {
-    this.network.on(NETWORK_EVENTS.NETWORK_DID_CHANGE, () => {
-      const { tokens, hiddenTokens } = this._getTokenRelatedStates();
-      this._updateAccountTokens(tokens, this.getAssetImages(), hiddenTokens);
-    });
-  }
-
   _subscribeToInfuraAvailability() {
     this.network.on(NETWORK_EVENTS.INFURA_IS_BLOCKED, () => {
       this._setInfuraBlocked(true);
@@ -763,6 +783,43 @@ export default class PreferencesController {
     });
   }
 
+  /**
+   * Detects whether or not a token is ERC-721 compatible.
+   *
+   * @param {string} tokensAddress - the token contract address.
+   *
+   */
+  async _detectIsERC721(tokenAddress) {
+    const checksumAddress = toChecksumHexAddress(tokenAddress);
+    // if this token is already in our contract metadata map we don't need
+    // to check against the contract
+    if (contractsMap[checksumAddress]?.erc721 === true) {
+      return Promise.resolve(true);
+    }
+    const tokenContract = await this._createEthersContract(
+      tokenAddress,
+      abiERC721,
+      this.ethersProvider,
+    );
+
+    return await tokenContract
+      .supportsInterface(ERC721METADATA_INTERFACE_ID)
+      .catch((error) => {
+        console.log('error', error);
+        log.debug(error);
+        return false;
+      });
+  }
+
+  async _createEthersContract(tokenAddress, abi, ethersProvider) {
+    const tokenContract = await new ethers.Contract(
+      tokenAddress,
+      abi,
+      ethersProvider,
+    );
+    return tokenContract;
+  }
+
   /**
    * Updates `tokens` and `hiddenTokens` of current account and network.
    *
diff --git a/app/scripts/controllers/preferences.test.js b/app/scripts/controllers/preferences.test.js
index 4141f0f5f..d5b993c8e 100644
--- a/app/scripts/controllers/preferences.test.js
+++ b/app/scripts/controllers/preferences.test.js
@@ -1,10 +1,13 @@
 import { strict as assert } from 'assert';
 import sinon from 'sinon';
+import contractMaps from '@metamask/contract-metadata';
+import abiERC721 from 'human-standard-collectible-abi';
 import {
   MAINNET_CHAIN_ID,
   RINKEBY_CHAIN_ID,
 } from '../../../shared/constants/network';
 import PreferencesController from './preferences';
+import NetworkController from './network';
 
 describe('preferences controller', function () {
   let preferencesController;
@@ -13,19 +16,32 @@ describe('preferences controller', function () {
   let triggerNetworkChange;
   let switchToMainnet;
   let switchToRinkeby;
+  let provider;
   const migrateAddressBookState = sinon.stub();
 
   beforeEach(function () {
+    const sandbox = sinon.createSandbox();
     currentChainId = MAINNET_CHAIN_ID;
-    network = {
-      getCurrentChainId: () => currentChainId,
-      on: sinon.spy(),
+    const networkControllerProviderConfig = {
+      getAccounts: () => undefined,
     };
+    network = new NetworkController();
+    network.setInfuraProjectId('foo');
+    network.initializeProvider(networkControllerProviderConfig);
+    provider = network.getProviderAndBlockTracker().provider;
+
+    sandbox.stub(network, 'getCurrentChainId').callsFake(() => currentChainId);
+    sandbox
+      .stub(network, 'getProviderConfig')
+      .callsFake(() => ({ type: 'mainnet' }));
+    const spy = sandbox.spy(network, 'on');
+
     preferencesController = new PreferencesController({
       migrateAddressBookState,
       network,
+      provider,
     });
-    triggerNetworkChange = network.on.firstCall.args[1];
+    triggerNetworkChange = spy.firstCall.args[1];
     switchToMainnet = () => {
       currentChainId = MAINNET_CHAIN_ID;
       triggerNetworkChange();
@@ -86,6 +102,104 @@ describe('preferences controller', function () {
     });
   });
 
+  describe('updateTokenType', function () {
+    it('should add isERC721 = true to token object in state when token is collectible and in our contract-metadata repo', async function () {
+      const contractAddresses = Object.keys(contractMaps);
+      const erc721ContractAddresses = contractAddresses.filter(
+        (contractAddress) => contractMaps[contractAddress].erc721 === true,
+      );
+      const address = erc721ContractAddresses[0];
+      const { symbol, decimals } = contractMaps[address];
+      preferencesController.store.updateState({
+        tokens: [{ address, symbol, decimals }],
+      });
+      const result = await preferencesController.updateTokenType(address);
+      assert.equal(result.isERC721, true);
+    });
+
+    it('should add isERC721 = true to token object in state when token is collectible and not in our contract-metadata repo', async function () {
+      const tokenAddress = '0xda5584cc586d07c7141aa427224a4bd58e64af7d';
+      preferencesController.store.updateState({
+        tokens: [
+          {
+            address: tokenAddress,
+            symbol: 'TESTNFT',
+            decimals: '0',
+          },
+        ],
+      });
+      sinon
+        .stub(preferencesController, '_detectIsERC721')
+        .callsFake(() => true);
+
+      const result = await preferencesController.updateTokenType(tokenAddress);
+      assert.equal(
+        preferencesController._detectIsERC721.getCall(0).args[0],
+        tokenAddress,
+      );
+      assert.equal(result.isERC721, true);
+    });
+  });
+
+  describe('_detectIsERC721', function () {
+    it('should return true when token is in our contract-metadata repo', async function () {
+      const tokenAddress = '0x06012c8cf97BEaD5deAe237070F9587f8E7A266d';
+
+      const result = await preferencesController._detectIsERC721(tokenAddress);
+      assert.equal(result, true);
+    });
+
+    it('should return true when the token is not in our contract-metadata repo but tokenContract.supportsInterface returns true', async function () {
+      const tokenAddress = '0xda5584cc586d07c7141aa427224a4bd58e64af7d';
+
+      const supportsInterfaceStub = sinon.stub().returns(Promise.resolve(true));
+      sinon
+        .stub(preferencesController, '_createEthersContract')
+        .callsFake(() => ({ supportsInterface: supportsInterfaceStub }));
+
+      const result = await preferencesController._detectIsERC721(tokenAddress);
+      assert.equal(
+        preferencesController._createEthersContract.getCall(0).args[0],
+        tokenAddress,
+      );
+      assert.deepEqual(
+        preferencesController._createEthersContract.getCall(0).args[1],
+        abiERC721,
+      );
+      assert.equal(
+        preferencesController._createEthersContract.getCall(0).args[2],
+        preferencesController.ethersProvider,
+      );
+      assert.equal(result, true);
+    });
+
+    it('should return false when the token is not in our contract-metadata repo and tokenContract.supportsInterface returns false', async function () {
+      const tokenAddress = '0xda5584cc586d07c7141aa427224a4bd58e64af7d';
+
+      const supportsInterfaceStub = sinon
+        .stub()
+        .returns(Promise.resolve(false));
+      sinon
+        .stub(preferencesController, '_createEthersContract')
+        .callsFake(() => ({ supportsInterface: supportsInterfaceStub }));
+
+      const result = await preferencesController._detectIsERC721(tokenAddress);
+      assert.equal(
+        preferencesController._createEthersContract.getCall(0).args[0],
+        tokenAddress,
+      );
+      assert.deepEqual(
+        preferencesController._createEthersContract.getCall(0).args[1],
+        abiERC721,
+      );
+      assert.equal(
+        preferencesController._createEthersContract.getCall(0).args[2],
+        preferencesController.ethersProvider,
+      );
+      assert.equal(result, false);
+    });
+  });
+
   describe('removeAddress', function () {
     it('should remove an address from state', function () {
       preferencesController.setAddresses(['0xda22le', '0x7e57e2']);
@@ -291,7 +405,12 @@ describe('preferences controller', function () {
       assert.equal(tokens.length, 1, 'one token removed');
 
       const [token1] = tokens;
-      assert.deepEqual(token1, { address: '0xb', symbol: 'B', decimals: 5 });
+      assert.deepEqual(token1, {
+        address: '0xb',
+        symbol: 'B',
+        decimals: 5,
+        isERC721: false,
+      });
     });
 
     it('should remove a token from its state on corresponding address', async function () {
@@ -310,7 +429,12 @@ describe('preferences controller', function () {
       assert.equal(tokensFirst.length, 1, 'one token removed in account');
 
       const [token1] = tokensFirst;
-      assert.deepEqual(token1, { address: '0xb', symbol: 'B', decimals: 5 });
+      assert.deepEqual(token1, {
+        address: '0xb',
+        symbol: 'B',
+        decimals: 5,
+        isERC721: false,
+      });
 
       await preferencesController.setSelectedAddress('0x7e57e3');
       const tokensSecond = preferencesController.getTokens();
@@ -335,7 +459,12 @@ describe('preferences controller', function () {
       assert.equal(tokensFirst.length, 1, 'one token removed in network');
 
       const [token1] = tokensFirst;
-      assert.deepEqual(token1, { address: '0xb', symbol: 'B', decimals: 5 });
+      assert.deepEqual(token1, {
+        address: '0xb',
+        symbol: 'B',
+        decimals: 5,
+        isERC721: false,
+      });
 
       switchToRinkeby();
       const tokensSecond = preferencesController.getTokens();
diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
index 304dccf7a..5ed42f662 100644
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@@ -132,11 +132,17 @@ export default class MetamaskController extends EventEmitter {
     this.networkController = new NetworkController(initState.NetworkController);
     this.networkController.setInfuraProjectId(opts.infuraProjectId);
 
+    // now we can initialize the RPC provider, which other controllers require
+    this.initializeProvider();
+    this.provider = this.networkController.getProviderAndBlockTracker().provider;
+    this.blockTracker = this.networkController.getProviderAndBlockTracker().blockTracker;
+
     this.preferencesController = new PreferencesController({
       initState: initState.PreferencesController,
       initLangCode: opts.initLangCode,
       openPopup: opts.openPopup,
       network: this.networkController,
+      provider: this.provider,
       migrateAddressBookState: this.migrateAddressBookState.bind(this),
     });
 
@@ -183,11 +189,6 @@ export default class MetamaskController extends EventEmitter {
       initState.NotificationController,
     );
 
-    // now we can initialize the RPC provider, which other controllers require
-    this.initializeProvider();
-    this.provider = this.networkController.getProviderAndBlockTracker().provider;
-    this.blockTracker = this.networkController.getProviderAndBlockTracker().blockTracker;
-
     // token exchange rate tracker
     this.tokenRatesController = new TokenRatesController({
       preferences: this.preferencesController.store,
@@ -731,6 +732,10 @@ export default class MetamaskController extends EventEmitter {
         preferencesController,
       ),
       addToken: nodeify(preferencesController.addToken, preferencesController),
+      updateTokenType: nodeify(
+        preferencesController.updateTokenType,
+        preferencesController,
+      ),
       removeToken: nodeify(
         preferencesController.removeToken,
         preferencesController,
diff --git a/package.json b/package.json
index b6181d71b..0362be9eb 100644
--- a/package.json
+++ b/package.json
@@ -153,6 +153,7 @@
     "fast-safe-stringify": "^2.0.7",
     "fuse.js": "^3.2.0",
     "globalthis": "^1.0.1",
+    "human-standard-collectible-abi": "^1.0.2",
     "human-standard-token-abi": "^2.0.0",
     "immer": "^8.0.1",
     "json-rpc-engine": "^6.1.0",
diff --git a/ui/components/app/asset-list-item/asset-list-item.js b/ui/components/app/asset-list-item/asset-list-item.js
index c147297b5..8d7f67965 100644
--- a/ui/components/app/asset-list-item/asset-list-item.js
+++ b/ui/components/app/asset-list-item/asset-list-item.js
@@ -27,6 +27,7 @@ const AssetListItem = ({
   primary,
   secondary,
   identiconBorder,
+  isERC721,
 }) => {
   const t = useI18nContext();
   const dispatch = useDispatch();
@@ -121,10 +122,12 @@ const AssetListItem = ({
       }
       midContent={midContent}
       rightContent={
-        <>
-          <i className="fas fa-chevron-right asset-list-item__chevron-right" />
-          {sendTokenButton}
-        </>
+        !isERC721 && (
+          <>
+            <i className="fas fa-chevron-right asset-list-item__chevron-right" />
+            {sendTokenButton}
+          </>
+        )
       }
     />
   );
@@ -143,6 +146,7 @@ AssetListItem.propTypes = {
   'primary': PropTypes.string,
   'secondary': PropTypes.string,
   'identiconBorder': PropTypes.bool,
+  'isERC721': PropTypes.bool,
 };
 
 AssetListItem.defaultProps = {
diff --git a/ui/components/app/token-cell/token-cell.js b/ui/components/app/token-cell/token-cell.js
index 777e9b560..18a7cd698 100644
--- a/ui/components/app/token-cell/token-cell.js
+++ b/ui/components/app/token-cell/token-cell.js
@@ -15,6 +15,7 @@ export default function TokenCell({
   string,
   image,
   onClick,
+  isERC721,
 }) {
   const userAddress = useSelector(getSelectedAddress);
   const t = useI18nContext();
@@ -50,6 +51,7 @@ export default function TokenCell({
       warning={warning}
       primary={`${string || 0}`}
       secondary={formattedFiat}
+      isERC721={isERC721}
     />
   );
 }
@@ -62,6 +64,7 @@ TokenCell.propTypes = {
   string: PropTypes.string,
   image: PropTypes.string,
   onClick: PropTypes.func.isRequired,
+  isERC721: PropTypes.bool,
 };
 
 TokenCell.defaultProps = {
diff --git a/ui/components/app/wallet-overview/token-overview.js b/ui/components/app/wallet-overview/token-overview.js
index 9bdb87533..f34cc3900 100644
--- a/ui/components/app/wallet-overview/token-overview.js
+++ b/ui/components/app/wallet-overview/token-overview.js
@@ -91,6 +91,7 @@ const TokenOverview = ({ className, token }) => {
             Icon={SendIcon}
             label={t('send')}
             data-testid="eth-overview-send"
+            disabled={token.isERC721}
           />
           <IconButton
             className="token-overview__button"
@@ -145,6 +146,7 @@ TokenOverview.propTypes = {
     address: PropTypes.string.isRequired,
     decimals: PropTypes.number,
     symbol: PropTypes.string,
+    isERC721: PropTypes.bool,
   }).isRequired,
 };
 
diff --git a/ui/helpers/constants/error-keys.js b/ui/helpers/constants/error-keys.js
index bfdb7474f..e51b87736 100644
--- a/ui/helpers/constants/error-keys.js
+++ b/ui/helpers/constants/error-keys.js
@@ -5,3 +5,4 @@ export const TRANSACTION_NO_CONTRACT_ERROR_KEY = 'transactionErrorNoContract';
 export const ETH_GAS_PRICE_FETCH_WARNING_KEY = 'ethGasPriceFetchWarning';
 export const GAS_PRICE_FETCH_FAILURE_ERROR_KEY = 'gasPriceFetchFailed';
 export const GAS_PRICE_EXCESSIVE_ERROR_KEY = 'gasPriceExcessive';
+export const UNSENDABLE_ASSET_ERROR_KEY = 'unsendableAsset';
diff --git a/ui/hooks/useTokenTracker.js b/ui/hooks/useTokenTracker.js
index 601254932..abcf03233 100644
--- a/ui/hooks/useTokenTracker.js
+++ b/ui/hooks/useTokenTracker.js
@@ -23,11 +23,19 @@ export function useTokenTracker(
       const matchingTokens = hideZeroBalanceTokens
         ? tokenWithBalances.filter((token) => Number(token.balance) > 0)
         : tokenWithBalances;
-      setTokensWithBalances(matchingTokens);
+      // TODO: improve this pattern for adding this field when we improve support for
+      // EIP721 tokens.
+      const matchingTokensWithIsERC721Flag = matchingTokens.map((token) => {
+        const additionalTokenData = memoizedTokens.find(
+          (t) => t.address === token.address,
+        );
+        return { ...token, isERC721: additionalTokenData?.isERC721 };
+      });
+      setTokensWithBalances(matchingTokensWithIsERC721Flag);
       setLoading(false);
       setError(null);
     },
-    [hideZeroBalanceTokens],
+    [hideZeroBalanceTokens, memoizedTokens],
   );
 
   const showError = useCallback((err) => {
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 35c89a041..785b711b0 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
@@ -22,6 +22,9 @@ export default class SendAssetRow extends Component {
     setSendToken: PropTypes.func.isRequired,
     nativeCurrency: PropTypes.string,
     nativeCurrencyImage: PropTypes.string,
+    setUnsendableAssetError: PropTypes.func.isRequired,
+    updateSendErrors: PropTypes.func.isRequired,
+    updateTokenType: PropTypes.func.isRequired,
   };
 
   static contextTypes = {
@@ -31,13 +34,41 @@ export default class SendAssetRow extends Component {
 
   state = {
     isShowingDropdown: false,
+    sendableTokens: [],
   };
 
+  async componentDidMount() {
+    const sendableTokens = this.props.tokens.filter((token) => !token.isERC721);
+    this.setState({ sendableTokens });
+  }
+
   openDropdown = () => this.setState({ isShowingDropdown: true });
 
   closeDropdown = () => this.setState({ isShowingDropdown: false });
 
-  selectToken = (token) => {
+  clearUnsendableAssetError = () => {
+    this.props.setUnsendableAssetError(false);
+    this.props.updateSendErrors({
+      unsendableAssetError: null,
+      gasLoadingError: null,
+    });
+  };
+
+  selectToken = async (token) => {
+    if (token && token.isERC721 === undefined) {
+      const updatedToken = await this.props.updateTokenType(token.address);
+      if (updatedToken.isERC721) {
+        this.props.setUnsendableAssetError(true);
+        this.props.updateSendErrors({
+          unsendableAssetError: 'unsendableAssetError',
+        });
+      }
+    }
+
+    if ((token && token.isERC721 === false) || token === undefined) {
+      this.clearUnsendableAssetError();
+    }
+
     this.setState(
       {
         isShowingDropdown: false,
@@ -65,7 +96,9 @@ export default class SendAssetRow extends Component {
       <SendRowWrapper label={`${t('asset')}:`}>
         <div className="send-v2__asset-dropdown">
           {this.renderSendToken()}
-          {this.props.tokens.length > 0 ? this.renderAssetDropdown() : null}
+          {this.state.sendableTokens.length > 0
+            ? this.renderAssetDropdown()
+            : null}
         </div>
       </SendRowWrapper>
     );
@@ -96,7 +129,9 @@ export default class SendAssetRow extends Component {
           />
           <div className="send-v2__asset-dropdown__list">
             {this.renderNativeCurrency(true)}
-            {this.props.tokens.map((token) => this.renderAsset(token, true))}
+            {this.state.sendableTokens.map((token) =>
+              this.renderAsset(token, true),
+            )}
           </div>
         </div>
       )
@@ -119,7 +154,7 @@ export default class SendAssetRow extends Component {
     return (
       <div
         className={
-          this.props.tokens.length > 0
+          this.state.sendableTokens.length > 0
             ? 'send-v2__asset-dropdown__asset'
             : 'send-v2__asset-dropdown__single-asset'
         }
@@ -146,7 +181,7 @@ export default class SendAssetRow extends Component {
             />
           </div>
         </div>
-        {!insideDropdown && this.props.tokens.length > 0 && (
+        {!insideDropdown && this.state.sendableTokens.length > 0 && (
           <i className="fa fa-caret-down fa-lg send-v2__asset-dropdown__caret" />
         )}
       </div>
diff --git a/ui/pages/send/send-content/send-asset-row/send-asset-row.container.js b/ui/pages/send/send-content/send-asset-row/send-asset-row.container.js
index 61c659434..eeeabba28 100644
--- a/ui/pages/send/send-content/send-asset-row/send-asset-row.container.js
+++ b/ui/pages/send/send-content/send-asset-row/send-asset-row.container.js
@@ -6,7 +6,11 @@ import {
   getSendTokenAddress,
   getAssetImages,
 } from '../../../../selectors';
-import { updateSendToken } from '../../../../ducks/send/send.duck';
+import { updateTokenType } from '../../../../store/actions';
+import {
+  updateSendErrors,
+  updateSendToken,
+} from '../../../../ducks/send/send.duck';
 import SendAssetRow from './send-asset-row.component';
 
 function mapStateToProps(state) {
@@ -24,6 +28,10 @@ function mapStateToProps(state) {
 function mapDispatchToProps(dispatch) {
   return {
     setSendToken: (token) => dispatch(updateSendToken(token)),
+    updateTokenType: (tokenAddress) => dispatch(updateTokenType(tokenAddress)),
+    updateSendErrors: (error) => {
+      dispatch(updateSendErrors(error));
+    },
   };
 }
 
diff --git a/ui/pages/send/send-content/send-content.component.js b/ui/pages/send/send-content/send-content.component.js
index 6f1a82b92..96d728024 100644
--- a/ui/pages/send/send-content/send-content.component.js
+++ b/ui/pages/send/send-content/send-content.component.js
@@ -6,6 +6,7 @@ import {
   ETH_GAS_PRICE_FETCH_WARNING_KEY,
   GAS_PRICE_FETCH_FAILURE_ERROR_KEY,
   GAS_PRICE_EXCESSIVE_ERROR_KEY,
+  UNSENDABLE_ASSET_ERROR_KEY,
 } from '../../../helpers/constants/error-keys';
 import SendAmountRow from './send-amount-row';
 import SendGasRow from './send-gas-row';
@@ -17,6 +18,10 @@ export default class SendContent extends Component {
     t: PropTypes.func,
   };
 
+  state = {
+    unsendableAssetError: false,
+  };
+
   static propTypes = {
     updateGas: PropTypes.func,
     showAddToAddressBookModal: PropTypes.func,
@@ -32,6 +37,9 @@ export default class SendContent extends Component {
 
   updateGas = (updateData) => this.props.updateGas(updateData);
 
+  setUnsendableAssetError = (unsendableAssetError) =>
+    this.setState({ unsendableAssetError });
+
   render() {
     const {
       warning,
@@ -41,6 +49,7 @@ export default class SendContent extends Component {
       noGasPrice,
     } = this.props;
 
+    const { unsendableAssetError } = this.state;
     let gasError;
     if (gasIsExcessive) gasError = GAS_PRICE_EXCESSIVE_ERROR_KEY;
     else if (noGasPrice) gasError = GAS_PRICE_FETCH_FAILURE_ERROR_KEY;
@@ -50,10 +59,13 @@ export default class SendContent extends Component {
         <div className="send-v2__form">
           {gasError && this.renderError(gasError)}
           {isEthGasPrice && this.renderWarning(ETH_GAS_PRICE_FETCH_WARNING_KEY)}
-          {error && this.renderError()}
+          {unsendableAssetError && this.renderError(UNSENDABLE_ASSET_ERROR_KEY)}
+          {error && this.renderError(error)}
           {warning && this.renderWarning()}
           {this.maybeRenderAddContact()}
-          <SendAssetRow />
+          <SendAssetRow
+            setUnsendableAssetError={this.setUnsendableAssetError}
+          />
           <SendAmountRow updateGas={this.updateGas} />
           <SendGasRow />
           {this.props.showHexData && (
@@ -97,12 +109,11 @@ export default class SendContent extends Component {
     );
   }
 
-  renderError(gasError = '') {
+  renderError(error) {
     const { t } = this.context;
-    const { error } = this.props;
     return (
       <Dialog type="error" className="send__error-dialog">
-        {gasError === '' ? t(error) : t(gasError)}
+        {t(error)}
       </Dialog>
     );
   }
diff --git a/ui/selectors/confirm-transaction.js b/ui/selectors/confirm-transaction.js
index 101e522d4..80de94e0f 100644
--- a/ui/selectors/confirm-transaction.js
+++ b/ui/selectors/confirm-transaction.js
@@ -223,7 +223,10 @@ export const transactionFeeSelector = function (state, txData) {
 
   // if the gas price from our infura endpoint is null or undefined
   // use the metaswap average price estimation as a fallback
-  let { txParams: { gasPrice } = {} } = txData;
+  let {
+    txParams: { gasPrice },
+  } = txData;
+
   if (!gasPrice) {
     gasPrice = getAveragePriceEstimateInHexWEI(state) || '0x0';
   }
diff --git a/ui/store/actions.js b/ui/store/actions.js
index f2269cdad..57f11fe04 100644
--- a/ui/store/actions.js
+++ b/ui/store/actions.js
@@ -1234,6 +1234,21 @@ export function addToken(
   };
 }
 
+export function updateTokenType(tokenAddress) {
+  return async (dispatch) => {
+    let token = {};
+    dispatch(showLoadingIndication());
+    try {
+      token = await promisifiedBackground.updateTokenType(tokenAddress);
+    } catch (error) {
+      log.error(error);
+    } finally {
+      dispatch(hideLoadingIndication());
+    }
+    return token;
+  };
+}
+
 export function removeToken(address) {
   return (dispatch) => {
     dispatch(showLoadingIndication());

From a171ac7b34df17603cf4424861649614c5911adb Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Wed, 23 Jun 2021 09:14:38 -0700
Subject: [PATCH 034/141] Allowing custom rpc form submission when chainId is a
 duplicate (#11363)

---
 test/e2e/tests/custom-rpc-history.spec.js     |  42 +++++-
 .../network-form/network-form.component.js    | 128 ++++++++++++------
 2 files changed, 125 insertions(+), 45 deletions(-)

diff --git a/test/e2e/tests/custom-rpc-history.spec.js b/test/e2e/tests/custom-rpc-history.spec.js
index 3405b9a5d..792bfa980 100644
--- a/test/e2e/tests/custom-rpc-history.spec.js
+++ b/test/e2e/tests/custom-rpc-history.spec.js
@@ -54,7 +54,7 @@ describe('Stores custom RPC history', function () {
     );
   });
 
-  it('warns user when they enter url or chainId for an already configured network', async function () {
+  it('warns user when they enter url for an already configured network', async function () {
     await withFixtures(
       {
         fixtures: 'imported-account',
@@ -68,6 +68,40 @@ describe('Stores custom RPC history', function () {
 
         // duplicate network
         const duplicateRpcUrl = 'http://localhost:8545';
+
+        await driver.clickElement('.network-display');
+
+        await driver.clickElement({ text: 'Custom RPC', tag: 'span' });
+
+        await driver.findElement('.settings-page__sub-header-text');
+
+        const customRpcInputs = await driver.findElements('input[type="text"]');
+        const rpcUrlInput = customRpcInputs[1];
+
+        await rpcUrlInput.clear();
+        await rpcUrlInput.sendKeys(duplicateRpcUrl);
+        await driver.findElement({
+          text: 'This URL is currently used by the Localhost 8545 network.',
+          tag: 'p',
+        });
+      },
+    );
+  });
+
+  it('warns user when they enter chainId for an already configured network', async function () {
+    await withFixtures(
+      {
+        fixtures: 'imported-account',
+        ganacheOptions,
+        title: this.test.title,
+      },
+      async ({ driver }) => {
+        await driver.navigate();
+        await driver.fill('#password', 'correct horse battery staple');
+        await driver.press('#password', driver.Key.ENTER);
+
+        // duplicate network
+        const newRpcUrl = 'http://localhost:8544';
         const duplicateChainId = '0x539';
 
         await driver.clickElement('.network-display');
@@ -81,11 +115,7 @@ describe('Stores custom RPC history', function () {
         const chainIdInput = customRpcInputs[2];
 
         await rpcUrlInput.clear();
-        await rpcUrlInput.sendKeys(duplicateRpcUrl);
-        await driver.findElement({
-          text: 'This URL is currently used by the Localhost 8545 network.',
-          tag: 'p',
-        });
+        await rpcUrlInput.sendKeys(newRpcUrl);
 
         await chainIdInput.clear();
         await chainIdInput.sendKeys(duplicateChainId);
diff --git a/ui/pages/settings/networks-tab/network-form/network-form.component.js b/ui/pages/settings/networks-tab/network-form/network-form.component.js
index eeaebeeaa..8381c921d 100644
--- a/ui/pages/settings/networks-tab/network-form/network-form.component.js
+++ b/ui/pages/settings/networks-tab/network-form/network-form.component.js
@@ -280,6 +280,7 @@ export default class NetworkForm extends PureComponent {
   }) {
     const { errors } = this.state;
     const { viewOnly } = this.props;
+    const errorMessage = errors[fieldKey]?.msg || '';
 
     return (
       <div className="networks-tab__network-form-row">
@@ -305,7 +306,7 @@ export default class NetworkForm extends PureComponent {
           margin="dense"
           value={value}
           disabled={viewOnly}
-          error={errors[fieldKey]}
+          error={errorMessage}
           autoFocus={autoFocus}
         />
       </div>
@@ -328,45 +329,78 @@ export default class NetworkForm extends PureComponent {
     });
   };
 
-  hasError = (errorKey, errorVal) => {
-    return this.state.errors[errorKey] === errorVal;
+  setErrorEmpty = (errorKey) => {
+    this.setState({
+      errors: {
+        ...this.state.errors,
+        [errorKey]: {
+          msg: '',
+          key: '',
+        },
+      },
+    });
   };
 
-  validateChainIdOnChange = (chainIdArg = '') => {
+  hasError = (errorKey, errorKeyVal) => {
+    return this.state.errors[errorKey]?.key === errorKeyVal;
+  };
+
+  hasErrors = () => {
+    const { errors } = this.state;
+    return Object.keys(errors).some((key) => {
+      const error = errors[key];
+      // Do not factor in duplicate chain id error for submission disabling
+      if (key === 'chainId' && error.key === 'chainIdExistsErrorMsg') {
+        return false;
+      }
+      return error.key && error.msg;
+    });
+  };
+
+  validateChainIdOnChange = (selfRpcUrl, chainIdArg = '') => {
     const { networksToRender } = this.props;
     const chainId = chainIdArg.trim();
+    let errorKey = '';
     let errorMessage = '';
     let radix = 10;
     const hexChainId = chainId.startsWith('0x')
       ? chainId
       : `0x${decimalToHex(chainId)}`;
     const [matchingChainId] = networksToRender.filter(
-      (e) => e.chainId === hexChainId,
+      (e) => e.chainId === hexChainId && e.rpcUrl !== selfRpcUrl,
     );
 
     if (chainId === '') {
-      this.setErrorTo('chainId', '');
+      this.setErrorEmpty('chainId');
       return;
     } else if (matchingChainId) {
+      errorKey = 'chainIdExistsErrorMsg';
       errorMessage = this.context.t('chainIdExistsErrorMsg', [
         matchingChainId.label ?? matchingChainId.labelKey,
       ]);
     } else if (chainId.startsWith('0x')) {
       radix = 16;
       if (!/^0x[0-9a-f]+$/iu.test(chainId)) {
+        errorKey = 'invalidHexNumber';
         errorMessage = this.context.t('invalidHexNumber');
       } else if (!isPrefixedFormattedHexString(chainId)) {
         errorMessage = this.context.t('invalidHexNumberLeadingZeros');
       }
     } else if (!/^[0-9]+$/u.test(chainId)) {
+      errorKey = 'invalidNumber';
       errorMessage = this.context.t('invalidNumber');
     } else if (chainId.startsWith('0')) {
+      errorKey = 'invalidNumberLeadingZeros';
       errorMessage = this.context.t('invalidNumberLeadingZeros');
     } else if (!isSafeChainId(parseInt(chainId, radix))) {
+      errorKey = 'invalidChainIdTooBig';
       errorMessage = this.context.t('invalidChainIdTooBig');
     }
 
-    this.setErrorTo('chainId', errorMessage);
+    this.setErrorTo('chainId', {
+      key: errorKey,
+      msg: errorMessage,
+    });
   };
 
   /**
@@ -381,6 +415,7 @@ export default class NetworkForm extends PureComponent {
    */
   validateChainIdOnSubmit = async (formChainId, parsedChainId, rpcUrl) => {
     const { t } = this.context;
+    let errorKey;
     let errorMessage;
     let endpointChainId;
     let providerError;
@@ -393,6 +428,7 @@ export default class NetworkForm extends PureComponent {
     }
 
     if (providerError || typeof endpointChainId !== 'string') {
+      errorKey = 'failedToFetchChainId';
       errorMessage = t('failedToFetchChainId');
     } else if (parsedChainId !== endpointChainId) {
       // Here, we are in an error state. The endpoint should always return a
@@ -410,6 +446,7 @@ export default class NetworkForm extends PureComponent {
         }
       }
 
+      errorKey = 'endpointReturnedDifferentChainId';
       errorMessage = t('endpointReturnedDifferentChainId', [
         endpointChainId.length <= 12
           ? endpointChainId
@@ -417,12 +454,15 @@ export default class NetworkForm extends PureComponent {
       ]);
     }
 
-    if (errorMessage) {
-      this.setErrorTo('chainId', errorMessage);
+    if (errorKey) {
+      this.setErrorTo('chainId', {
+        key: errorKey,
+        msg: errorMessage,
+      });
       return false;
     }
 
-    this.setErrorTo('chainId', '');
+    this.setErrorEmpty('chainId');
     return true;
   };
 
@@ -432,17 +472,25 @@ export default class NetworkForm extends PureComponent {
   };
 
   validateBlockExplorerURL = (url, stateKey) => {
+    const { t } = this.context;
     if (!validUrl.isWebUri(url) && url !== '') {
-      this.setErrorTo(
-        stateKey,
-        this.context.t(
-          this.isValidWhenAppended(url)
-            ? 'urlErrorMsg'
-            : 'invalidBlockExplorerURL',
-        ),
-      );
+      let errorKey;
+      let errorMessage;
+
+      if (this.isValidWhenAppended(url)) {
+        errorKey = 'urlErrorMsg';
+        errorMessage = t('urlErrorMsg');
+      } else {
+        errorKey = 'invalidBlockExplorerURL';
+        errorMessage = t('invalidBlockExplorerURL');
+      }
+
+      this.setErrorTo(stateKey, {
+        key: errorKey,
+        msg: errorMessage,
+      });
     } else {
-      this.setErrorTo(stateKey, '');
+      this.setErrorEmpty(stateKey);
     }
   };
 
@@ -451,28 +499,32 @@ export default class NetworkForm extends PureComponent {
     const { networksToRender } = this.props;
     const { chainId: stateChainId } = this.state;
     const isValidUrl = validUrl.isWebUri(url);
-    const chainIdFetchFailed = this.hasError(
-      'chainId',
-      t('failedToFetchChainId'),
-    );
+    const chainIdFetchFailed = this.hasError('chainId', 'failedToFetchChainId');
     const [matchingRPCUrl] = networksToRender.filter((e) => e.rpcUrl === url);
 
     if (!isValidUrl && url !== '') {
-      this.setErrorTo(
-        stateKey,
-        this.context.t(
-          this.isValidWhenAppended(url) ? 'urlErrorMsg' : 'invalidRPC',
-        ),
-      );
+      let errorKey;
+      let errorMessage;
+      if (this.isValidWhenAppended(url)) {
+        errorKey = 'urlErrorMsg';
+        errorMessage = t('urlErrorMsg');
+      } else {
+        errorKey = 'invalidRPC';
+        errorMessage = t('invalidRPC');
+      }
+      this.setErrorTo(stateKey, {
+        key: errorKey,
+        msg: errorMessage,
+      });
     } else if (matchingRPCUrl) {
-      this.setErrorTo(
-        stateKey,
-        this.context.t('urlExistsErrorMsg', [
+      this.setErrorTo(stateKey, {
+        key: 'urlExistsErrorMsg',
+        msg: t('urlExistsErrorMsg', [
           matchingRPCUrl.label ?? matchingRPCUrl.labelKey,
         ]),
-      );
+      });
     } else {
-      this.setErrorTo(stateKey, '');
+      this.setErrorEmpty(stateKey);
     }
 
     // Re-validate the chain id if it could not be found with previous rpc url
@@ -501,18 +553,16 @@ export default class NetworkForm extends PureComponent {
       chainId = '',
       ticker,
       blockExplorerUrl,
-      errors,
     } = this.state;
 
     const deletable =
       !networksTabIsInAddMode && !isCurrentRpcTarget && !viewOnly;
-
     const isSubmitDisabled =
+      this.hasErrors() ||
       this.isSubmitting() ||
       this.stateIsUnchanged() ||
       !rpcUrl ||
-      !chainId ||
-      Object.values(errors).some((x) => x);
+      !chainId;
 
     return (
       <div className="networks-tab__network-form">
@@ -535,7 +585,7 @@ export default class NetworkForm extends PureComponent {
           textFieldId: 'chainId',
           onChange: this.setStateWithValue(
             'chainId',
-            this.validateChainIdOnChange,
+            this.validateChainIdOnChange.bind(this, rpcUrl),
           ),
           value: chainId,
           tooltipText: viewOnly ? null : t('networkSettingsChainIdDescription'),

From 6416a1ef983cf69ab8ee655d7d55a35abbb1dc25 Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Wed, 23 Jun 2021 17:17:16 -0230
Subject: [PATCH 035/141] Add logs for Google Chrome binary checksum
 verification (#11366)

The Chrome installation script now has logs explaining whether the
checksum verification succeeded or failed.
---
 .circleci/scripts/chrome-install.sh | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.circleci/scripts/chrome-install.sh b/.circleci/scripts/chrome-install.sh
index c301f9056..37272e1a5 100755
--- a/.circleci/scripts/chrome-install.sh
+++ b/.circleci/scripts/chrome-install.sh
@@ -14,7 +14,10 @@ wget -O "${CHROME_BINARY}" -t 5 "${CHROME_BINARY_URL}"
 
 if [[ $(shasum -a 512 "${CHROME_BINARY}" | cut '--delimiter= ' -f1) != "${CHROME_BINARY_SHA512SUM}" ]]
 then
+  echo "Google Chrome binary checksum did not match."
   exit 1
+else
+  echo "Google Chrome binary checksum verified."
 fi
 
 (sudo dpkg -i "${CHROME_BINARY}" || sudo apt-get -fy install)

From 23f0270af2fcc2474cdb385f805ce7c0f6d8ed80 Mon Sep 17 00:00:00 2001
From: Alex Donesky <adonesky@gmail.com>
Date: Wed, 23 Jun 2021 16:32:23 -0500
Subject: [PATCH 036/141] add back strict equality checks in
 typed-message-manager, ensure that chainId comparison bases are both ints
 (#11340)

---
 app/scripts/lib/typed-message-manager.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/scripts/lib/typed-message-manager.js b/app/scripts/lib/typed-message-manager.js
index 33bc80dd9..63f371684 100644
--- a/app/scripts/lib/typed-message-manager.js
+++ b/app/scripts/lib/typed-message-manager.js
@@ -1,5 +1,5 @@
 import EventEmitter from 'events';
-import assert from 'assert';
+import { strict as assert } from 'assert';
 import { ObservableStore } from '@metamask/obs-store';
 import { ethErrors } from 'eth-rpc-errors';
 import { typedSignatureHash, TYPED_MESSAGE_SCHEMA } from 'eth-sig-util';
@@ -177,7 +177,7 @@ export default class TypedMessageManager extends EventEmitter {
         break;
       case 'V3':
       case 'V4': {
-        assert.strictEqual(
+        assert.equal(
           typeof params.data,
           'string',
           '"params.data" must be a string.',
@@ -191,18 +191,21 @@ export default class TypedMessageManager extends EventEmitter {
           data.primaryType in data.types,
           `Primary type of "${data.primaryType}" has no type definition.`,
         );
-        assert.strictEqual(
+        assert.equal(
           validation.errors.length,
           0,
           'Signing data must conform to EIP-712 schema. See https://git.io/fNtcx.',
         );
-        const { chainId } = data.domain;
+        let { chainId } = data.domain;
         if (chainId) {
           const activeChainId = parseInt(this._getCurrentChainId(), 16);
           assert.ok(
             !Number.isNaN(activeChainId),
             `Cannot sign messages for chainId "${chainId}", because MetaMask is switching networks.`,
           );
+          if (typeof chainId === 'string') {
+            chainId = parseInt(chainId, 16);
+          }
           assert.equal(
             chainId,
             activeChainId,

From c30cb7d33a6ed0e774580879f872cedf369f763e Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Wed, 23 Jun 2021 16:35:25 -0500
Subject: [PATCH 037/141] Refactor send page state management (#10965)

---
 app/_locales/am/messages.json                 |    3 -
 app/_locales/ar/messages.json                 |    3 -
 app/_locales/bg/messages.json                 |    3 -
 app/_locales/bn/messages.json                 |    3 -
 app/_locales/ca/messages.json                 |    3 -
 app/_locales/cs/messages.json                 |    3 -
 app/_locales/da/messages.json                 |    3 -
 app/_locales/de/messages.json                 |    3 -
 app/_locales/el/messages.json                 |    3 -
 app/_locales/en/messages.json                 |   12 +-
 app/_locales/es/messages.json                 |    3 -
 app/_locales/es_419/messages.json             |    3 -
 app/_locales/et/messages.json                 |    3 -
 app/_locales/fa/messages.json                 |    3 -
 app/_locales/fi/messages.json                 |    3 -
 app/_locales/fil/messages.json                |    3 -
 app/_locales/fr/messages.json                 |    3 -
 app/_locales/he/messages.json                 |    3 -
 app/_locales/hi/messages.json                 |    3 -
 app/_locales/hn/messages.json                 |    3 -
 app/_locales/hr/messages.json                 |    3 -
 app/_locales/ht/messages.json                 |    3 -
 app/_locales/hu/messages.json                 |    3 -
 app/_locales/id/messages.json                 |    3 -
 app/_locales/it/messages.json                 |    3 -
 app/_locales/ja/messages.json                 |    3 -
 app/_locales/kn/messages.json                 |    3 -
 app/_locales/ko/messages.json                 |    3 -
 app/_locales/lt/messages.json                 |    3 -
 app/_locales/lv/messages.json                 |    3 -
 app/_locales/ms/messages.json                 |    3 -
 app/_locales/nl/messages.json                 |    3 -
 app/_locales/no/messages.json                 |    3 -
 app/_locales/ph/messages.json                 |    3 -
 app/_locales/pl/messages.json                 |    3 -
 app/_locales/pt/messages.json                 |    3 -
 app/_locales/pt_BR/messages.json              |    3 -
 app/_locales/ro/messages.json                 |    3 -
 app/_locales/ru/messages.json                 |    3 -
 app/_locales/sk/messages.json                 |    3 -
 app/_locales/sl/messages.json                 |    3 -
 app/_locales/sr/messages.json                 |    3 -
 app/_locales/sv/messages.json                 |    3 -
 app/_locales/sw/messages.json                 |    3 -
 app/_locales/ta/messages.json                 |    3 -
 app/_locales/th/messages.json                 |    3 -
 app/_locales/tl/messages.json                 |    3 -
 app/_locales/tr/messages.json                 |    3 -
 app/_locales/uk/messages.json                 |    3 -
 app/_locales/vi/messages.json                 |    3 -
 app/_locales/zh_CN/messages.json              |    3 -
 app/_locales/zh_TW/messages.json              |    3 -
 development/build/scripts.js                  |    2 +-
 test/e2e/tests/send-eth.spec.js               |    3 +-
 .../app/asset-list-item/asset-list-item.js    |   18 +-
 ...gas-modal-page-container-container.test.js |   54 +-
 .../gas-modal-page-container.container.js     |   74 +-
 .../app/wallet-overview/token-overview.js     |   12 +-
 .../ui/unit-input/unit-input.component.js     |    5 +-
 ui/contexts/metametrics.js                    |   14 +-
 ui/ducks/ens.js                               |  197 ++
 ui/ducks/gas/gas-action-constants.js          |   14 +
 ui/ducks/gas/gas-duck.test.js                 |   15 +-
 ui/ducks/gas/gas.duck.js                      |   16 +-
 ui/ducks/index.js                             |    4 +-
 ui/ducks/send/index.js                        |    1 +
 ui/ducks/send/send-duck.test.js               |  142 --
 ui/ducks/send/send.duck.js                    |  382 ----
 ui/ducks/send/send.js                         | 1472 ++++++++++++++
 ui/ducks/send/send.test.js                    | 1808 +++++++++++++++++
 .../confirm-send-ether.container.js           |   20 +-
 .../confirm-send-token.container.js           |   43 +-
 ui/pages/confirm-transaction/conf-tx.js       |   15 +-
 .../confirm-transaction.component.js          |    6 +-
 .../confirm-transaction.container.js          |    5 +-
 ui/pages/send/index.js                        |    2 +-
 .../add-recipient/add-recipient.component.js  |  120 +-
 .../add-recipient.component.test.js           |   68 +-
 .../add-recipient/add-recipient.container.js  |   36 +-
 .../add-recipient.container.test.js           |   62 +-
 .../add-recipient/add-recipient.js            |   56 -
 .../add-recipient/add-recipient.utils.test.js |  115 --
 .../add-recipient/ens-input.component.js      |  330 +--
 .../add-recipient/ens-input.container.js      |   26 +-
 .../amount-max-button.component.js            |   81 -
 .../amount-max-button.component.test.js       |   93 -
 .../amount-max-button.container.js            |   42 -
 .../amount-max-button.container.test.js       |   83 -
 .../amount-max-button/amount-max-button.js    |   49 +
 .../amount-max-button.test.js                 |   61 +
 .../amount-max-button.utils.js                |   22 -
 .../amount-max-button.utils.test.js           |   26 -
 .../amount-max-button/index.js                |    2 +-
 .../send-amount-row.component.js              |   92 +-
 .../send-amount-row.component.test.js         |  129 +-
 .../send-amount-row.container.js              |   34 +-
 .../send-amount-row.container.test.js         |   58 +-
 .../send-asset-row.component.js               |   45 +-
 .../send-asset-row.container.js               |   16 +-
 .../send-content/send-content.component.js    |   26 +-
 .../send-content/send-content.container.js    |    6 +-
 .../send-gas-row/send-gas-row.component.js    |  106 +-
 .../send-gas-row.component.test.js            |   11 +-
 .../send-gas-row/send-gas-row.container.js    |  100 +-
 .../send-gas-row.container.test.js            |   67 +-
 .../send-hex-data-row.component.js            |    4 +-
 .../send-hex-data-row.container.js            |    4 +-
 .../send-row-error-message.container.js       |    2 +-
 .../send-row-error-message.container.test.js  |    2 +-
 .../send/send-footer/send-footer.component.js |   86 +-
 .../send-footer/send-footer.component.test.js |  125 +-
 .../send/send-footer/send-footer.container.js |  107 +-
 .../send-footer/send-footer.container.test.js |  135 +-
 .../send/send-footer/send-footer.utils.js     |   96 -
 .../send-footer/send-footer.utils.test.js     |  215 --
 ui/pages/send/send-header/index.js            |    2 +-
 .../send/send-header/send-header.component.js |   66 +-
 .../send-header/send-header.component.test.js |  167 +-
 .../send/send-header/send-header.container.js |   20 -
 ui/pages/send/send.component.js               |  403 ----
 ui/pages/send/send.component.test.js          |  467 -----
 ui/pages/send/send.constants.js               |   16 +-
 ui/pages/send/send.container.js               |  138 --
 ui/pages/send/send.container.test.js          |  128 --
 ui/pages/send/send.js                         |  112 +
 ui/pages/send/send.test.js                    |  173 ++
 ui/pages/send/send.utils.js                   |  206 +-
 ui/pages/send/send.utils.test.js              |  329 ---
 .../add-contact/add-contact.component.js      |   54 +-
 .../add-contact/add-contact.container.js      |   10 +-
 ui/selectors/custom-gas.js                    |   10 +-
 ui/selectors/custom-gas.test.js               |   44 +-
 ui/selectors/index.js                         |    1 -
 ui/selectors/send-selectors-test-data.js      |  214 --
 ui/selectors/send.js                          |  135 --
 ui/selectors/send.test.js                     |  417 ----
 ui/store/actionConstants.js                   |    4 +
 ui/store/actionConstants.test.js              |    9 +-
 ui/store/actions.js                           |  124 +-
 ui/store/actions.test.js                      |  134 +-
 140 files changed, 4822 insertions(+), 5788 deletions(-)
 create mode 100644 ui/ducks/ens.js
 create mode 100644 ui/ducks/gas/gas-action-constants.js
 create mode 100644 ui/ducks/send/index.js
 delete mode 100644 ui/ducks/send/send-duck.test.js
 delete mode 100644 ui/ducks/send/send.duck.js
 create mode 100644 ui/ducks/send/send.js
 create mode 100644 ui/ducks/send/send.test.js
 delete mode 100644 ui/pages/send/send-content/add-recipient/add-recipient.js
 delete mode 100644 ui/pages/send/send-content/add-recipient/add-recipient.utils.test.js
 delete mode 100644 ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
 delete mode 100644 ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.test.js
 delete mode 100644 ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.js
 delete mode 100644 ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.test.js
 create mode 100644 ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.js
 create mode 100644 ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.test.js
 delete mode 100644 ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js
 delete mode 100644 ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.test.js
 delete mode 100644 ui/pages/send/send-footer/send-footer.utils.js
 delete mode 100644 ui/pages/send/send-footer/send-footer.utils.test.js
 delete mode 100644 ui/pages/send/send-header/send-header.container.js
 delete mode 100644 ui/pages/send/send.component.js
 delete mode 100644 ui/pages/send/send.component.test.js
 delete mode 100644 ui/pages/send/send.container.js
 delete mode 100644 ui/pages/send/send.container.test.js
 create mode 100644 ui/pages/send/send.js
 create mode 100644 ui/pages/send/send.test.js
 delete mode 100644 ui/selectors/send-selectors-test-data.js
 delete mode 100644 ui/selectors/send.js
 delete mode 100644 ui/selectors/send.test.js

diff --git a/app/_locales/am/messages.json b/app/_locales/am/messages.json
index e16deef2c..18c3b7378 100644
--- a/app/_locales/am/messages.json
+++ b/app/_locales/am/messages.json
@@ -748,9 +748,6 @@
   "recents": {
     "message": "የቅርብ ጊዜያት"
   },
-  "recipientAddress": {
-    "message": "የተቀባይ አድራሻ"
-  },
   "recipientAddressPlaceholder": {
     "message": "ፍለጋ፣ ለሕዝብ ክፍት የሆነ አድራሻ (0x), ወይም ENS"
   },
diff --git a/app/_locales/ar/messages.json b/app/_locales/ar/messages.json
index db0ba6d0a..90f7618c8 100644
--- a/app/_locales/ar/messages.json
+++ b/app/_locales/ar/messages.json
@@ -744,9 +744,6 @@
   "recents": {
     "message": "الحديث"
   },
-  "recipientAddress": {
-    "message": "عنوان المستلم"
-  },
   "recipientAddressPlaceholder": {
     "message": "البحث، العنوان العام (0x)، أو ENS"
   },
diff --git a/app/_locales/bg/messages.json b/app/_locales/bg/messages.json
index a1ace1be6..26cae225a 100644
--- a/app/_locales/bg/messages.json
+++ b/app/_locales/bg/messages.json
@@ -747,9 +747,6 @@
   "recents": {
     "message": "Скорошни"
   },
-  "recipientAddress": {
-    "message": "Адрес на получателя"
-  },
   "recipientAddressPlaceholder": {
     "message": "Търсене, публичен адрес (0x) или ENS"
   },
diff --git a/app/_locales/bn/messages.json b/app/_locales/bn/messages.json
index 378a950b8..2b1724128 100644
--- a/app/_locales/bn/messages.json
+++ b/app/_locales/bn/messages.json
@@ -751,9 +751,6 @@
   "recents": {
     "message": "সাম্প্রতিকগুলি"
   },
-  "recipientAddress": {
-    "message": "প্রাপকের ঠিকানা"
-  },
   "recipientAddressPlaceholder": {
     "message": "অনুসন্ধান, সার্বজনীন ঠিকানা (0x), বা ENS"
   },
diff --git a/app/_locales/ca/messages.json b/app/_locales/ca/messages.json
index 0531dbcb8..7571840c8 100644
--- a/app/_locales/ca/messages.json
+++ b/app/_locales/ca/messages.json
@@ -729,9 +729,6 @@
   "readdToken": {
     "message": "Pots tornar a afegir aquesta fitxa en el futur anant a \"Afegir fitxa\" al menu d'opcions dels teus comptes."
   },
-  "recipientAddress": {
-    "message": "Adreça del destinatari"
-  },
   "recipientAddressPlaceholder": {
     "message": "Cerca, adreça pública (0x), o ENS"
   },
diff --git a/app/_locales/cs/messages.json b/app/_locales/cs/messages.json
index ee22b9aec..3e158ca01 100644
--- a/app/_locales/cs/messages.json
+++ b/app/_locales/cs/messages.json
@@ -305,9 +305,6 @@
   "readdToken": {
     "message": "Tento token můžete v budoucnu přidat zpět s „Přidat token“ v nastavení účtu."
   },
-  "recipientAddress": {
-    "message": "Adresa příjemce"
-  },
   "reject": {
     "message": "Odmítnout"
   },
diff --git a/app/_locales/da/messages.json b/app/_locales/da/messages.json
index b5bd7eb02..8138bdc93 100644
--- a/app/_locales/da/messages.json
+++ b/app/_locales/da/messages.json
@@ -732,9 +732,6 @@
   "recents": {
     "message": "Seneste"
   },
-  "recipientAddress": {
-    "message": "Modtagerens adresse"
-  },
   "recipientAddressPlaceholder": {
     "message": "Søg, offentlig adresse (0x) eller ENS"
   },
diff --git a/app/_locales/de/messages.json b/app/_locales/de/messages.json
index 08d79a54e..48cfd91bc 100644
--- a/app/_locales/de/messages.json
+++ b/app/_locales/de/messages.json
@@ -720,9 +720,6 @@
   "recents": {
     "message": "Letzte"
   },
-  "recipientAddress": {
-    "message": "Empfängeradresse"
-  },
   "recipientAddressPlaceholder": {
     "message": "Suchen, öffentliche Adresse (0x) oder ENS"
   },
diff --git a/app/_locales/el/messages.json b/app/_locales/el/messages.json
index c58385c6a..59ba5729b 100644
--- a/app/_locales/el/messages.json
+++ b/app/_locales/el/messages.json
@@ -748,9 +748,6 @@
   "recents": {
     "message": "Πρόσφατα"
   },
-  "recipientAddress": {
-    "message": "Διεύθυνση Παραλήπτη"
-  },
   "recipientAddressPlaceholder": {
     "message": "Αναζήτηση, δημόσια διεύθυνση (0x) ή ENS"
   },
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 7b53b9456..7feb91856 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -659,12 +659,21 @@
     "message": "The endpoint returned a different chain ID: $1",
     "description": "$1 is the return value of eth_chainId from an RPC endpoint"
   },
+  "ensIllegalCharacter": {
+    "message": "Illegal Character for ENS."
+  },
   "ensNotFoundOnCurrentNetwork": {
     "message": "ENS name not found on the current network. Try switching to Ethereum Mainnet."
   },
+  "ensNotSupportedOnNetwork": {
+    "message": "Network does not support ENS"
+  },
   "ensRegistrationError": {
     "message": "Error in ENS name registration"
   },
+  "ensUnknownError": {
+    "message": "ENS Lookup failed."
+  },
   "enterAnAlias": {
     "message": "Enter an alias"
   },
@@ -1466,9 +1475,6 @@
   "recents": {
     "message": "Recents"
   },
-  "recipientAddress": {
-    "message": "Recipient Address"
-  },
   "recipientAddressPlaceholder": {
     "message": "Search, public address (0x), or ENS"
   },
diff --git a/app/_locales/es/messages.json b/app/_locales/es/messages.json
index 8fe19f247..23d44c8af 100644
--- a/app/_locales/es/messages.json
+++ b/app/_locales/es/messages.json
@@ -1448,9 +1448,6 @@
   "recents": {
     "message": "Recientes"
   },
-  "recipientAddress": {
-    "message": "Dirección del destinatario"
-  },
   "recipientAddressPlaceholder": {
     "message": "Búsqueda, dirección pública (0x) o ENS"
   },
diff --git a/app/_locales/es_419/messages.json b/app/_locales/es_419/messages.json
index 8fe19f247..23d44c8af 100644
--- a/app/_locales/es_419/messages.json
+++ b/app/_locales/es_419/messages.json
@@ -1448,9 +1448,6 @@
   "recents": {
     "message": "Recientes"
   },
-  "recipientAddress": {
-    "message": "Dirección del destinatario"
-  },
   "recipientAddressPlaceholder": {
     "message": "Búsqueda, dirección pública (0x) o ENS"
   },
diff --git a/app/_locales/et/messages.json b/app/_locales/et/messages.json
index 4e2a6a0a0..23de7d7e1 100644
--- a/app/_locales/et/messages.json
+++ b/app/_locales/et/messages.json
@@ -741,9 +741,6 @@
   "recents": {
     "message": "Hiljutised"
   },
-  "recipientAddress": {
-    "message": "Saaja aadress"
-  },
   "recipientAddressPlaceholder": {
     "message": "Otsing, avalik aadress (0x) või ENS"
   },
diff --git a/app/_locales/fa/messages.json b/app/_locales/fa/messages.json
index 4a0b6a3dd..d5230d513 100644
--- a/app/_locales/fa/messages.json
+++ b/app/_locales/fa/messages.json
@@ -751,9 +751,6 @@
   "recents": {
     "message": "واپسین"
   },
-  "recipientAddress": {
-    "message": "آدرس دریافت کننده"
-  },
   "recipientAddressPlaceholder": {
     "message": "جستجو، آدرس عمومی (0x)، یا ENS"
   },
diff --git a/app/_locales/fi/messages.json b/app/_locales/fi/messages.json
index 0cb3ea696..f2a96b511 100644
--- a/app/_locales/fi/messages.json
+++ b/app/_locales/fi/messages.json
@@ -748,9 +748,6 @@
   "recents": {
     "message": "Viimeaikaiset"
   },
-  "recipientAddress": {
-    "message": "Vastaanottajan osoite"
-  },
   "recipientAddressPlaceholder": {
     "message": "Haku, julkinen osoite (0x) tai ENS"
   },
diff --git a/app/_locales/fil/messages.json b/app/_locales/fil/messages.json
index 8dded66bb..d7ef62fa2 100644
--- a/app/_locales/fil/messages.json
+++ b/app/_locales/fil/messages.json
@@ -675,9 +675,6 @@
   "recents": {
     "message": "Kamakailan"
   },
-  "recipientAddress": {
-    "message": "Address ng Recipient"
-  },
   "recipientAddressPlaceholder": {
     "message": "Maghanap, pampublikong address (0x), o ENS"
   },
diff --git a/app/_locales/fr/messages.json b/app/_locales/fr/messages.json
index 05ae8872d..31358aa71 100644
--- a/app/_locales/fr/messages.json
+++ b/app/_locales/fr/messages.json
@@ -733,9 +733,6 @@
   "recents": {
     "message": "Récents"
   },
-  "recipientAddress": {
-    "message": "Adresse du destinataire"
-  },
   "recipientAddressPlaceholder": {
     "message": "Recherche, adresse publique (0x) ou ENS"
   },
diff --git a/app/_locales/he/messages.json b/app/_locales/he/messages.json
index e80aafba6..795a25c53 100644
--- a/app/_locales/he/messages.json
+++ b/app/_locales/he/messages.json
@@ -748,9 +748,6 @@
   "recents": {
     "message": "אחרונים"
   },
-  "recipientAddress": {
-    "message": "כתובת הנמען"
-  },
   "recipientAddressPlaceholder": {
     "message": "חיפוש, כתובת ציבורית (0x), או ENS"
   },
diff --git a/app/_locales/hi/messages.json b/app/_locales/hi/messages.json
index b975bf714..4bb244a11 100644
--- a/app/_locales/hi/messages.json
+++ b/app/_locales/hi/messages.json
@@ -1448,9 +1448,6 @@
   "recents": {
     "message": "हाल ही के"
   },
-  "recipientAddress": {
-    "message": "प्राप्तकर्ता का पता"
-  },
   "recipientAddressPlaceholder": {
     "message": "खोज, सार्वजनिक पता (0x) या ENS"
   },
diff --git a/app/_locales/hn/messages.json b/app/_locales/hn/messages.json
index 6b5761c40..d8aeceb8e 100644
--- a/app/_locales/hn/messages.json
+++ b/app/_locales/hn/messages.json
@@ -282,9 +282,6 @@
   "readdToken": {
     "message": "आप अपने खाता विकल्प मेनू में .टोकन जोड़ें. पर जाकर भविष्य में इस टोकन को वापस जोड़ सकते हैं।"
   },
-  "recipientAddress": {
-    "message": "प्राप्तकर्ता पता"
-  },
   "reject": {
     "message": "अस्वीकार"
   },
diff --git a/app/_locales/hr/messages.json b/app/_locales/hr/messages.json
index cc7991b96..c56b5d88b 100644
--- a/app/_locales/hr/messages.json
+++ b/app/_locales/hr/messages.json
@@ -744,9 +744,6 @@
   "recents": {
     "message": "Nedavno"
   },
-  "recipientAddress": {
-    "message": "Adresa primatelja"
-  },
   "recipientAddressPlaceholder": {
     "message": "Pretraži, javne adrese (0x) ili ENS"
   },
diff --git a/app/_locales/ht/messages.json b/app/_locales/ht/messages.json
index 4cd74e121..78cc96a2a 100644
--- a/app/_locales/ht/messages.json
+++ b/app/_locales/ht/messages.json
@@ -447,9 +447,6 @@
   "readdToken": {
     "message": "Ou ka ajoute token sa aprè sa ankò ou prale nan  \"Ajoute token\" nan opsyon meni kont ou an."
   },
-  "recipientAddress": {
-    "message": "Adrès pou resevwa"
-  },
   "reject": {
     "message": "Rejte"
   },
diff --git a/app/_locales/hu/messages.json b/app/_locales/hu/messages.json
index 085e93c3e..2293d2956 100644
--- a/app/_locales/hu/messages.json
+++ b/app/_locales/hu/messages.json
@@ -744,9 +744,6 @@
   "recents": {
     "message": "Legutóbbiak"
   },
-  "recipientAddress": {
-    "message": "Címzett címe"
-  },
   "recipientAddressPlaceholder": {
     "message": "Keresés, nyilvános cím (0x) vagy ENS"
   },
diff --git a/app/_locales/id/messages.json b/app/_locales/id/messages.json
index 7a649946a..d5e42a1b0 100644
--- a/app/_locales/id/messages.json
+++ b/app/_locales/id/messages.json
@@ -1448,9 +1448,6 @@
   "recents": {
     "message": "Terkini"
   },
-  "recipientAddress": {
-    "message": "Alamat Penerima"
-  },
   "recipientAddressPlaceholder": {
     "message": "Cari, alamat publik (0x), atau ENS"
   },
diff --git a/app/_locales/it/messages.json b/app/_locales/it/messages.json
index 975c8769b..f09f50b96 100644
--- a/app/_locales/it/messages.json
+++ b/app/_locales/it/messages.json
@@ -1198,9 +1198,6 @@
   "recents": {
     "message": "Recenti"
   },
-  "recipientAddress": {
-    "message": "Indirizzo Destinatario"
-  },
   "recipientAddressPlaceholder": {
     "message": "Ricerca, indirizzo pubblico (0x) o ENS"
   },
diff --git a/app/_locales/ja/messages.json b/app/_locales/ja/messages.json
index 71c9ef90f..bd73411ca 100644
--- a/app/_locales/ja/messages.json
+++ b/app/_locales/ja/messages.json
@@ -1448,9 +1448,6 @@
   "recents": {
     "message": "最近"
   },
-  "recipientAddress": {
-    "message": "受信者のアドレス"
-  },
   "recipientAddressPlaceholder": {
     "message": "検索、パブリック アドレス (0x)、または ENS"
   },
diff --git a/app/_locales/kn/messages.json b/app/_locales/kn/messages.json
index 964e1d489..9f3b17c66 100644
--- a/app/_locales/kn/messages.json
+++ b/app/_locales/kn/messages.json
@@ -751,9 +751,6 @@
   "recents": {
     "message": "ಇತ್ತೀಚಿನವುಗಳು"
   },
-  "recipientAddress": {
-    "message": "ಸ್ವೀಕರಿಸುವವರ ವಿಳಾಸ"
-  },
   "recipientAddressPlaceholder": {
     "message": "ಸಾರ್ವಜನಿಕ ವಿಳಾಸ (0x) ಅಥವಾ ENS ಹುಡುಕಿ"
   },
diff --git a/app/_locales/ko/messages.json b/app/_locales/ko/messages.json
index b063ea504..0cd69a0f5 100644
--- a/app/_locales/ko/messages.json
+++ b/app/_locales/ko/messages.json
@@ -1448,9 +1448,6 @@
   "recents": {
     "message": "최근"
   },
-  "recipientAddress": {
-    "message": "수신인 주소"
-  },
   "recipientAddressPlaceholder": {
     "message": "검색, 공개 주소(0x) 또는 ENS"
   },
diff --git a/app/_locales/lt/messages.json b/app/_locales/lt/messages.json
index 1984ba7e6..da2c253b0 100644
--- a/app/_locales/lt/messages.json
+++ b/app/_locales/lt/messages.json
@@ -751,9 +751,6 @@
   "recents": {
     "message": "Naujausi"
   },
-  "recipientAddress": {
-    "message": "Gavėjo adresas"
-  },
   "recipientAddressPlaceholder": {
     "message": "Ieška, viešieji adresai (0x) arba ENS"
   },
diff --git a/app/_locales/lv/messages.json b/app/_locales/lv/messages.json
index 974c3abb9..2aa8e03e4 100644
--- a/app/_locales/lv/messages.json
+++ b/app/_locales/lv/messages.json
@@ -747,9 +747,6 @@
   "recents": {
     "message": "Nesenie"
   },
-  "recipientAddress": {
-    "message": "Saņēmēja adrese"
-  },
   "recipientAddressPlaceholder": {
     "message": "Meklēšana, publiskā adrese (0x) vai ENS"
   },
diff --git a/app/_locales/ms/messages.json b/app/_locales/ms/messages.json
index b2a48bacc..7ad59e94f 100644
--- a/app/_locales/ms/messages.json
+++ b/app/_locales/ms/messages.json
@@ -728,9 +728,6 @@
   "recents": {
     "message": "Baru-baru ini"
   },
-  "recipientAddress": {
-    "message": "Alamat Penerima"
-  },
   "recipientAddressPlaceholder": {
     "message": "Cari, alamat awam (0x), atau ENS"
   },
diff --git a/app/_locales/nl/messages.json b/app/_locales/nl/messages.json
index de1b19e96..e70f716af 100644
--- a/app/_locales/nl/messages.json
+++ b/app/_locales/nl/messages.json
@@ -269,9 +269,6 @@
   "readdToken": {
     "message": "U kunt dit token in de toekomst weer toevoegen door naar \"Token toevoegen\" te gaan in het menu met accountopties."
   },
-  "recipientAddress": {
-    "message": "Geadresseerde adres"
-  },
   "reject": {
     "message": "Afwijzen"
   },
diff --git a/app/_locales/no/messages.json b/app/_locales/no/messages.json
index 0bfe2ef14..1728b607c 100644
--- a/app/_locales/no/messages.json
+++ b/app/_locales/no/messages.json
@@ -738,9 +738,6 @@
   "recents": {
     "message": "Nylige"
   },
-  "recipientAddress": {
-    "message": "Mottakeradresse"
-  },
   "recipientAddressPlaceholder": {
     "message": "Søk, offentlig adresse (0x) eller ENS"
   },
diff --git a/app/_locales/ph/messages.json b/app/_locales/ph/messages.json
index c191a271b..56763f94d 100644
--- a/app/_locales/ph/messages.json
+++ b/app/_locales/ph/messages.json
@@ -1448,9 +1448,6 @@
   "recents": {
     "message": "Mga Kamakailan"
   },
-  "recipientAddress": {
-    "message": "Address ng Tatanggap"
-  },
   "recipientAddressPlaceholder": {
     "message": "Maghanap, pampublikong address (0x), o ENS"
   },
diff --git a/app/_locales/pl/messages.json b/app/_locales/pl/messages.json
index fbcd93c1d..209b01e35 100644
--- a/app/_locales/pl/messages.json
+++ b/app/_locales/pl/messages.json
@@ -745,9 +745,6 @@
   "recents": {
     "message": "Ostatnie"
   },
-  "recipientAddress": {
-    "message": "Adres odbiorcy"
-  },
   "recipientAddressPlaceholder": {
     "message": "Szukaj, adres publiczny (0x) lub ENS"
   },
diff --git a/app/_locales/pt/messages.json b/app/_locales/pt/messages.json
index e75fd618c..1d0676ee1 100644
--- a/app/_locales/pt/messages.json
+++ b/app/_locales/pt/messages.json
@@ -279,9 +279,6 @@
   "readdToken": {
     "message": "Pode adicionar este token de novo clicando na opção “Adicionar token” no menu de opções da sua conta."
   },
-  "recipientAddress": {
-    "message": "Endereço do Destinatário"
-  },
   "reject": {
     "message": "Rejeitar"
   },
diff --git a/app/_locales/pt_BR/messages.json b/app/_locales/pt_BR/messages.json
index 9c8136fef..117c704f8 100644
--- a/app/_locales/pt_BR/messages.json
+++ b/app/_locales/pt_BR/messages.json
@@ -1448,9 +1448,6 @@
   "recents": {
     "message": "Recentes"
   },
-  "recipientAddress": {
-    "message": "Endereço do destinatário"
-  },
   "recipientAddressPlaceholder": {
     "message": "Busca, endereço público (0x) ou ENS"
   },
diff --git a/app/_locales/ro/messages.json b/app/_locales/ro/messages.json
index 76a0cf529..2ba1a3a60 100644
--- a/app/_locales/ro/messages.json
+++ b/app/_locales/ro/messages.json
@@ -738,9 +738,6 @@
   "recents": {
     "message": "Recente"
   },
-  "recipientAddress": {
-    "message": "Adresă destinatar"
-  },
   "recipientAddressPlaceholder": {
     "message": "Căutare, adresa publică (0x) sau ENS"
   },
diff --git a/app/_locales/ru/messages.json b/app/_locales/ru/messages.json
index a29fe6c6b..233d76216 100644
--- a/app/_locales/ru/messages.json
+++ b/app/_locales/ru/messages.json
@@ -1448,9 +1448,6 @@
   "recents": {
     "message": "Недавние"
   },
-  "recipientAddress": {
-    "message": "Адрес получателя"
-  },
   "recipientAddressPlaceholder": {
     "message": "Поиск, публичный адрес (0x) или ENS"
   },
diff --git a/app/_locales/sk/messages.json b/app/_locales/sk/messages.json
index 360d89dbc..2cf89a50b 100644
--- a/app/_locales/sk/messages.json
+++ b/app/_locales/sk/messages.json
@@ -720,9 +720,6 @@
   "recents": {
     "message": "Posledné"
   },
-  "recipientAddress": {
-    "message": "Adresa příjemce"
-  },
   "recipientAddressPlaceholder": {
     "message": "Vyhľadávať verejnú adresu (0x) alebo ENS"
   },
diff --git a/app/_locales/sl/messages.json b/app/_locales/sl/messages.json
index 3a84787c5..d4de42b88 100644
--- a/app/_locales/sl/messages.json
+++ b/app/_locales/sl/messages.json
@@ -739,9 +739,6 @@
   "recents": {
     "message": "Nedavno"
   },
-  "recipientAddress": {
-    "message": "Prejemnikov naslov"
-  },
   "recipientAddressPlaceholder": {
     "message": "Iskanje, javni naslov (0x) ali ENS"
   },
diff --git a/app/_locales/sr/messages.json b/app/_locales/sr/messages.json
index a6d16b233..8170b146a 100644
--- a/app/_locales/sr/messages.json
+++ b/app/_locales/sr/messages.json
@@ -742,9 +742,6 @@
   "recents": {
     "message": "Skorašnje"
   },
-  "recipientAddress": {
-    "message": "Adresa primaoca"
-  },
   "recipientAddressPlaceholder": {
     "message": "Pretraga, javna adresa (0x) ili ENS"
   },
diff --git a/app/_locales/sv/messages.json b/app/_locales/sv/messages.json
index 2e36636c6..8fbe73469 100644
--- a/app/_locales/sv/messages.json
+++ b/app/_locales/sv/messages.json
@@ -735,9 +735,6 @@
   "recents": {
     "message": "Senaste"
   },
-  "recipientAddress": {
-    "message": "Mottagaradress"
-  },
   "recipientAddressPlaceholder": {
     "message": "Sök, allmän adress (0x) eller ENS"
   },
diff --git a/app/_locales/sw/messages.json b/app/_locales/sw/messages.json
index 6f85051f2..5e493a99f 100644
--- a/app/_locales/sw/messages.json
+++ b/app/_locales/sw/messages.json
@@ -729,9 +729,6 @@
   "recents": {
     "message": "Za hivi karibuni"
   },
-  "recipientAddress": {
-    "message": "Anwani ya Mpokeaji"
-  },
   "recipientAddressPlaceholder": {
     "message": "Tafuta, anwani za umma (0x), au ENS"
   },
diff --git a/app/_locales/ta/messages.json b/app/_locales/ta/messages.json
index 360ae15cd..425b104c1 100644
--- a/app/_locales/ta/messages.json
+++ b/app/_locales/ta/messages.json
@@ -369,9 +369,6 @@
   "readdToken": {
     "message": "உங்கள் கணக்கு விருப்பங்கள் மெனுவில் \"டோக்கனைச் சேர்\" என்பதன் மூலம் நீங்கள் எதிர்காலத்தில் இந்த டோக்கனை மீண்டும் சேர்க்கலாம்."
   },
-  "recipientAddress": {
-    "message": "பெறுநர் முகவரி"
-  },
   "reject": {
     "message": "நிராகரி"
   },
diff --git a/app/_locales/th/messages.json b/app/_locales/th/messages.json
index 037d7b80a..3c193a838 100644
--- a/app/_locales/th/messages.json
+++ b/app/_locales/th/messages.json
@@ -372,9 +372,6 @@
   "readdToken": {
     "message": "คุณสามารถเพิ่มโทเค็นนี้ในอนาคตได้โดยไปที่ “เพิ่มโทเค็น” ในเมนูตัวเลือกบัญชีของคุณ"
   },
-  "recipientAddress": {
-    "message": "แอดแดรสผู้รับ"
-  },
   "reject": {
     "message": "ปฏิเสธ"
   },
diff --git a/app/_locales/tl/messages.json b/app/_locales/tl/messages.json
index a2ddbee64..af413eadd 100644
--- a/app/_locales/tl/messages.json
+++ b/app/_locales/tl/messages.json
@@ -1189,9 +1189,6 @@
   "recents": {
     "message": "Mga Kamakailan"
   },
-  "recipientAddress": {
-    "message": "Address ng Tatanggap"
-  },
   "recipientAddressPlaceholder": {
     "message": "Maghanap, pampublikong address (0x), o ENS"
   },
diff --git a/app/_locales/tr/messages.json b/app/_locales/tr/messages.json
index 91e60a3a7..3c4bdebf7 100644
--- a/app/_locales/tr/messages.json
+++ b/app/_locales/tr/messages.json
@@ -321,9 +321,6 @@
   "readdToken": {
     "message": "Gelecekte Bu jetonu hesap seçenekleri menüsünde “Jeton ekle”'ye giderek geri ekleyebilirsiniz."
   },
-  "recipientAddress": {
-    "message": "Alıcı adresi"
-  },
   "reject": {
     "message": "Reddetmek"
   },
diff --git a/app/_locales/uk/messages.json b/app/_locales/uk/messages.json
index 736200897..290378224 100644
--- a/app/_locales/uk/messages.json
+++ b/app/_locales/uk/messages.json
@@ -751,9 +751,6 @@
   "recents": {
     "message": "Останні"
   },
-  "recipientAddress": {
-    "message": "Адреса отримувача"
-  },
   "recipientAddressPlaceholder": {
     "message": "Пошук, публічна адреса (0x), або ENS"
   },
diff --git a/app/_locales/vi/messages.json b/app/_locales/vi/messages.json
index 9625b1d98..ca3ca9c66 100644
--- a/app/_locales/vi/messages.json
+++ b/app/_locales/vi/messages.json
@@ -1448,9 +1448,6 @@
   "recents": {
     "message": "Gần đây"
   },
-  "recipientAddress": {
-    "message": "Địa chỉ người nhận"
-  },
   "recipientAddressPlaceholder": {
     "message": "Tìm kiếm, địa chỉ công khai (0x) hoặc ENS"
   },
diff --git a/app/_locales/zh_CN/messages.json b/app/_locales/zh_CN/messages.json
index 0bc804c35..3eb07cf4e 100644
--- a/app/_locales/zh_CN/messages.json
+++ b/app/_locales/zh_CN/messages.json
@@ -1192,9 +1192,6 @@
   "recents": {
     "message": "最近记录"
   },
-  "recipientAddress": {
-    "message": "接收地址"
-  },
   "recipientAddressPlaceholder": {
     "message": "查找、公用地址 (0x) 或 ENS"
   },
diff --git a/app/_locales/zh_TW/messages.json b/app/_locales/zh_TW/messages.json
index 4df54a9db..245558800 100644
--- a/app/_locales/zh_TW/messages.json
+++ b/app/_locales/zh_TW/messages.json
@@ -748,9 +748,6 @@
   "recents": {
     "message": "最近"
   },
-  "recipientAddress": {
-    "message": "接收位址"
-  },
   "recipientAddressPlaceholder": {
     "message": "搜尋，公開地址 (0x)，或 ENS"
   },
diff --git a/development/build/scripts.js b/development/build/scripts.js
index f0e399d47..f9683f57d 100644
--- a/development/build/scripts.js
+++ b/development/build/scripts.js
@@ -44,7 +44,7 @@ const materialUIDependencies = ['@material-ui/core'];
 const reactDepenendencies = dependencies.filter((dep) => dep.match(/react/u));
 
 const externalDependenciesMap = {
-  background: ['3box'],
+  background: ['3box', '@ethereumjs/common', 'unicode-confusables'],
   ui: [...materialUIDependencies, ...reactDepenendencies],
 };
 
diff --git a/test/e2e/tests/send-eth.spec.js b/test/e2e/tests/send-eth.spec.js
index b6c5130c0..2c1c1c97e 100644
--- a/test/e2e/tests/send-eth.spec.js
+++ b/test/e2e/tests/send-eth.spec.js
@@ -1,5 +1,5 @@
 const { strict: assert } = require('assert');
-const { withFixtures } = require('../helpers');
+const { withFixtures, regularDelayMs } = require('../helpers');
 
 describe('Send ETH from inside MetaMask using default gas', function () {
   const ganacheOptions = {
@@ -43,6 +43,7 @@ describe('Send ETH from inside MetaMask using default gas', function () {
         await inputAmount.press(driver.Key.BACK_SPACE);
         await inputAmount.press(driver.Key.BACK_SPACE);
         await inputAmount.press(driver.Key.BACK_SPACE);
+        await driver.delay(regularDelayMs);
 
         await driver.assertElementNotPresent('.send-v2__error-amount');
 
diff --git a/ui/components/app/asset-list-item/asset-list-item.js b/ui/components/app/asset-list-item/asset-list-item.js
index 8d7f67965..3c2325d48 100644
--- a/ui/components/app/asset-list-item/asset-list-item.js
+++ b/ui/components/app/asset-list-item/asset-list-item.js
@@ -10,7 +10,7 @@ import InfoIcon from '../../ui/icon/info-icon.component';
 import Button from '../../ui/button';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { useMetricEvent } from '../../../hooks/useMetricEvent';
-import { updateSendToken } from '../../../ducks/send/send.duck';
+import { ASSET_TYPES, updateSendAsset } from '../../../ducks/send';
 import { SEND_ROUTE } from '../../../helpers/constants/routes';
 import { SEVERITIES } from '../../../helpers/constants/design-system';
 
@@ -69,13 +69,17 @@ const AssetListItem = ({
           e.stopPropagation();
           sendTokenEvent();
           dispatch(
-            updateSendToken({
-              address: tokenAddress,
-              decimals: tokenDecimals,
-              symbol: tokenSymbol,
+            updateSendAsset({
+              type: ASSET_TYPES.TOKEN,
+              details: {
+                address: tokenAddress,
+                decimals: tokenDecimals,
+                symbol: tokenSymbol,
+              },
             }),
-          );
-          history.push(SEND_ROUTE);
+          ).then(() => {
+            history.push(SEND_ROUTE);
+          });
         }}
       >
         {t('sendSpecifiedTokens', [tokenSymbol])}
diff --git a/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container-container.test.js b/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container-container.test.js
index 6b36af651..d82a8fb0a 100644
--- a/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container-container.test.js
+++ b/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container-container.test.js
@@ -9,10 +9,10 @@ import {
 } from '../../../../ducks/gas/gas.duck';
 
 import {
-  hideGasButtonGroup,
-  setGasLimit,
-  setGasPrice,
-} from '../../../../ducks/send/send.duck';
+  useCustomGas,
+  updateGasLimit,
+  updateGasPrice,
+} from '../../../../ducks/send';
 
 let mapDispatchToProps;
 let mergeProps;
@@ -32,8 +32,6 @@ jest.mock('../../../../selectors', () => ({
     `mockRenderableBasicEstimateData:${Object.keys(s).length}`,
   getDefaultActiveButtonIndex: (a, b) => a + b,
   getCurrentEthBalance: (state) => state.metamask.balance || '0x0',
-  getSendToken: () => null,
-  getTokenBalance: (state) => state.send.tokenBalance || '0x0',
   getCustomGasPrice: (state) => state.gas.customData.price || '0x0',
   getCustomGasLimit: (state) => state.gas.customData.limit || '0x0',
   getCurrentCurrency: jest.fn().mockReturnValue('usd'),
@@ -57,11 +55,15 @@ jest.mock('../../../../ducks/gas/gas.duck', () => ({
   resetCustomData: jest.fn(),
 }));
 
-jest.mock('../../../../ducks/send/send.duck', () => ({
-  hideGasButtonGroup: jest.fn(),
-  setGasLimit: jest.fn(),
-  setGasPrice: jest.fn(),
-}));
+jest.mock('../../../../ducks/send', () => {
+  const { ASSET_TYPES } = jest.requireActual('../../../../ducks/send');
+  return {
+    useCustomGas: jest.fn(),
+    updateGasLimit: jest.fn(),
+    updateGasPrice: jest.fn(),
+    getSendAsset: jest.fn(() => ({ type: ASSET_TYPES.NATIVE })),
+  };
+});
 
 require('./gas-modal-page-container.container');
 
@@ -79,11 +81,11 @@ describe('gas-modal-page-container container', () => {
       dispatchSpy.resetHistory();
     });
 
-    describe('hideGasButtonGroup()', () => {
-      it('should dispatch a hideGasButtonGroup action', () => {
-        mapDispatchToPropsObject.hideGasButtonGroup();
+    describe('useCustomGas()', () => {
+      it('should dispatch a useCustomGas action', () => {
+        mapDispatchToPropsObject.useCustomGas();
         expect(dispatchSpy.calledOnce).toStrictEqual(true);
-        expect(hideGasButtonGroup).toHaveBeenCalled();
+        expect(useCustomGas).toHaveBeenCalled();
       });
     });
 
@@ -126,13 +128,13 @@ describe('gas-modal-page-container container', () => {
     });
 
     describe('setGasData()', () => {
-      it('should dispatch a setGasPrice and setGasLimit action with the correct props', () => {
+      it('should dispatch a updateGasPrice and updateGasLimit action with the correct props', () => {
         mapDispatchToPropsObject.setGasData('ffff', 'aaaa');
         expect(dispatchSpy.calledTwice).toStrictEqual(true);
-        expect(setGasPrice).toHaveBeenCalled();
-        expect(setGasLimit).toHaveBeenCalled();
-        expect(setGasLimit).toHaveBeenCalledWith('ffff');
-        expect(setGasPrice).toHaveBeenCalledWith('aaaa');
+        expect(updateGasPrice).toHaveBeenCalled();
+        expect(updateGasLimit).toHaveBeenCalled();
+        expect(updateGasLimit).toHaveBeenCalledWith('ffff');
+        expect(updateGasPrice).toHaveBeenCalledWith('aaaa');
       });
     });
 
@@ -165,7 +167,7 @@ describe('gas-modal-page-container container', () => {
       };
       dispatchProps = {
         updateCustomGasPrice: sinon.spy(),
-        hideGasButtonGroup: sinon.spy(),
+        useCustomGas: sinon.spy(),
         setGasData: sinon.spy(),
         updateConfirmTxGasAndCalculate: sinon.spy(),
         someOtherDispatchProp: sinon.spy(),
@@ -194,7 +196,7 @@ describe('gas-modal-page-container container', () => {
         dispatchProps.updateConfirmTxGasAndCalculate.callCount,
       ).toStrictEqual(0);
       expect(dispatchProps.setGasData.callCount).toStrictEqual(0);
-      expect(dispatchProps.hideGasButtonGroup.callCount).toStrictEqual(0);
+      expect(dispatchProps.useCustomGas.callCount).toStrictEqual(0);
       expect(dispatchProps.hideModal.callCount).toStrictEqual(0);
 
       result.onSubmit();
@@ -203,7 +205,7 @@ describe('gas-modal-page-container container', () => {
         dispatchProps.updateConfirmTxGasAndCalculate.callCount,
       ).toStrictEqual(1);
       expect(dispatchProps.setGasData.callCount).toStrictEqual(0);
-      expect(dispatchProps.hideGasButtonGroup.callCount).toStrictEqual(0);
+      expect(dispatchProps.useCustomGas.callCount).toStrictEqual(0);
       expect(dispatchProps.hideModal.callCount).toStrictEqual(1);
 
       expect(dispatchProps.updateCustomGasPrice.callCount).toStrictEqual(0);
@@ -238,7 +240,7 @@ describe('gas-modal-page-container container', () => {
         dispatchProps.updateConfirmTxGasAndCalculate.callCount,
       ).toStrictEqual(0);
       expect(dispatchProps.setGasData.callCount).toStrictEqual(0);
-      expect(dispatchProps.hideGasButtonGroup.callCount).toStrictEqual(0);
+      expect(dispatchProps.useCustomGas.callCount).toStrictEqual(0);
       expect(dispatchProps.cancelAndClose.callCount).toStrictEqual(0);
 
       result.onSubmit('mockNewLimit', 'mockNewPrice');
@@ -251,7 +253,7 @@ describe('gas-modal-page-container container', () => {
         'mockNewLimit',
         'mockNewPrice',
       ]);
-      expect(dispatchProps.hideGasButtonGroup.callCount).toStrictEqual(1);
+      expect(dispatchProps.useCustomGas.callCount).toStrictEqual(1);
       expect(dispatchProps.cancelAndClose.callCount).toStrictEqual(1);
 
       expect(dispatchProps.updateCustomGasPrice.callCount).toStrictEqual(0);
@@ -278,7 +280,7 @@ describe('gas-modal-page-container container', () => {
         dispatchProps.updateConfirmTxGasAndCalculate.callCount,
       ).toStrictEqual(0);
       expect(dispatchProps.setGasData.callCount).toStrictEqual(0);
-      expect(dispatchProps.hideGasButtonGroup.callCount).toStrictEqual(0);
+      expect(dispatchProps.useCustomGas.callCount).toStrictEqual(0);
       expect(dispatchProps.cancelAndClose.callCount).toStrictEqual(1);
 
       expect(dispatchProps.createSpeedUpTransaction.callCount).toStrictEqual(1);
diff --git a/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js b/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
index c02eca852..2c7d0aff4 100644
--- a/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
+++ b/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
@@ -14,19 +14,21 @@ import {
   fetchBasicGasEstimates,
 } from '../../../../ducks/gas/gas.duck';
 import {
-  hideGasButtonGroup,
-  setGasLimit,
-  setGasPrice,
-  setGasTotal,
-  updateSendAmount,
-  updateSendErrors,
-} from '../../../../ducks/send/send.duck';
+  getSendMaxModeState,
+  getGasLimit,
+  getGasPrice,
+  getSendAmount,
+  updateGasLimit,
+  updateGasPrice,
+  useCustomGas,
+  getSendAsset,
+  ASSET_TYPES,
+} from '../../../../ducks/send';
 import {
   conversionRateSelector as getConversionRate,
   getCurrentCurrency,
   getCurrentEthBalance,
   getIsMainnet,
-  getSendToken,
   getPreferences,
   getBasicGasEstimateLoadingStatus,
   getCustomGasLimit,
@@ -34,8 +36,6 @@ import {
   getDefaultActiveButtonIndex,
   getRenderableBasicEstimateData,
   isCustomPriceSafe,
-  getTokenBalance,
-  getSendMaxModeState,
   getAveragePriceEstimateInHexWEI,
   isCustomPriceExcessive,
   getIsGasEstimatesFetched,
@@ -54,16 +54,15 @@ import {
   isBalanceSufficient,
 } from '../../../../pages/send/send.utils';
 import { MIN_GAS_LIMIT_DEC } from '../../../../pages/send/send.constants';
-import { calcMaxAmount } from '../../../../pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils';
 import { TRANSACTION_STATUSES } from '../../../../../shared/constants/transaction';
 import { GAS_LIMITS } from '../../../../../shared/constants/gas';
 import GasModalPageContainer from './gas-modal-page-container.component';
 
 const mapStateToProps = (state, ownProps) => {
-  const {
-    metamask: { currentNetworkTxList },
-    send,
-  } = state;
+  const gasLimit = getGasLimit(state);
+  const gasPrice = getGasPrice(state);
+  const amount = getSendAmount(state);
+  const { currentNetworkTxList } = state.metamask;
   const { modalState: { props: modalProps } = {} } = state.appState.modal || {};
   const { txData = {} } = modalProps || {};
   const { transaction = {}, onSubmit } = ownProps;
@@ -71,15 +70,15 @@ const mapStateToProps = (state, ownProps) => {
     ({ id }) => id === (transaction.id || txData.id),
   );
   const buttonDataLoading = getBasicGasEstimateLoadingStatus(state);
-  const sendToken = getSendToken(state);
+  const asset = getSendAsset(state);
 
   // a "default" txParams is used during the send flow, since the transaction doesn't exist yet in that case
   const txParams = selectedTransaction?.txParams
     ? selectedTransaction.txParams
     : {
-        gas: send.gasLimit || GAS_LIMITS.SIMPLE,
-        gasPrice: send.gasPrice || getAveragePriceEstimateInHexWEI(state, true),
-        value: sendToken ? '0x0' : send.amount,
+        gas: gasLimit || GAS_LIMITS.SIMPLE,
+        gasPrice: gasPrice || getAveragePriceEstimateInHexWEI(state, true),
+        value: asset.type === ASSET_TYPES.TOKEN ? '0x0' : amount,
       };
 
   const { gasPrice: currentGasPrice, gas: currentGasLimit } = txParams;
@@ -117,15 +116,13 @@ const mapStateToProps = (state, ownProps) => {
   const isMainnet = getIsMainnet(state);
   const showFiat = Boolean(isMainnet || showFiatInTestnets);
 
-  const isSendTokenSet = Boolean(sendToken);
-
   const newTotalEth =
-    maxModeOn && !isSendTokenSet
+    maxModeOn && asset.type === ASSET_TYPES.NATIVE
       ? sumHexWEIsToRenderableEth([balance, '0x0'])
       : sumHexWEIsToRenderableEth([value, customGasTotal]);
 
   const sendAmount =
-    maxModeOn && !isSendTokenSet
+    maxModeOn && asset.type === ASSET_TYPES.NATIVE
       ? subtractHexWEIsFromRenderableEth(balance, customGasTotal)
       : sumHexWEIsToRenderableEth([value, '0x0']);
 
@@ -179,9 +176,7 @@ const mapStateToProps = (state, ownProps) => {
     txId: transaction.id,
     insufficientBalance,
     isMainnet,
-    sendToken,
     balance,
-    tokenBalance: getTokenBalance(state),
     conversionRate,
     value,
     onSubmit,
@@ -198,12 +193,13 @@ const mapDispatchToProps = (dispatch) => {
       dispatch(hideModal());
     },
     hideModal: () => dispatch(hideModal()),
+    useCustomGas: () => dispatch(useCustomGas()),
     updateCustomGasPrice,
     updateCustomGasLimit: (newLimit) =>
       dispatch(setCustomGasLimit(addHexPrefix(newLimit))),
     setGasData: (newLimit, newPrice) => {
-      dispatch(setGasLimit(newLimit));
-      dispatch(setGasPrice(newPrice));
+      dispatch(updateGasLimit(newLimit));
+      dispatch(updateGasPrice(newPrice));
     },
     updateConfirmTxGasAndCalculate: (gasLimit, gasPrice, updatedTx) => {
       updateCustomGasPrice(gasPrice);
@@ -216,14 +212,8 @@ const mapDispatchToProps = (dispatch) => {
     createSpeedUpTransaction: (txId, gasPrice, gasLimit) => {
       return dispatch(createSpeedUpTransaction(txId, gasPrice, gasLimit));
     },
-    hideGasButtonGroup: () => dispatch(hideGasButtonGroup()),
     hideSidebar: () => dispatch(hideSidebar()),
     fetchBasicGasEstimates: () => dispatch(fetchBasicGasEstimates()),
-    setGasTotal: (total) => dispatch(setGasTotal(total)),
-    setAmountToMax: (maxAmountDataObject) => {
-      dispatch(updateSendErrors({ amount: null }));
-      dispatch(updateSendAmount(calcMaxAmount(maxAmountDataObject)));
-    },
   };
 };
 
@@ -236,17 +226,12 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     isSpeedUp,
     isRetry,
     insufficientBalance,
-    maxModeOn,
     customGasPrice,
-    customGasTotal,
-    balance,
-    sendToken,
-    tokenBalance,
     customGasLimit,
     transaction,
   } = stateProps;
   const {
-    hideGasButtonGroup: dispatchHideGasButtonGroup,
+    useCustomGas: dispatchUseCustomGas,
     setGasData: dispatchSetGasData,
     updateConfirmTxGasAndCalculate: dispatchUpdateConfirmTxGasAndCalculate,
     createSpeedUpTransaction: dispatchCreateSpeedUpTransaction,
@@ -254,7 +239,6 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     hideSidebar: dispatchHideSidebar,
     cancelAndClose: dispatchCancelAndClose,
     hideModal: dispatchHideModal,
-    setAmountToMax: dispatchSetAmountToMax,
     ...otherDispatchProps
   } = dispatchProps;
 
@@ -290,17 +274,9 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
         dispatchCancelAndClose();
       } else {
         dispatchSetGasData(gasLimit, gasPrice);
-        dispatchHideGasButtonGroup();
+        dispatchUseCustomGas();
         dispatchCancelAndClose();
       }
-      if (maxModeOn) {
-        dispatchSetAmountToMax({
-          balance,
-          gasTotal: customGasTotal,
-          sendToken,
-          tokenBalance,
-        });
-      }
     },
     gasPriceButtonGroupProps: {
       ...gasPriceButtonGroupProps,
diff --git a/ui/components/app/wallet-overview/token-overview.js b/ui/components/app/wallet-overview/token-overview.js
index f34cc3900..e40003067 100644
--- a/ui/components/app/wallet-overview/token-overview.js
+++ b/ui/components/app/wallet-overview/token-overview.js
@@ -17,7 +17,7 @@ import {
 } from '../../../hooks/useMetricEvent';
 import { useTokenTracker } from '../../../hooks/useTokenTracker';
 import { useTokenFiatAmount } from '../../../hooks/useTokenFiatAmount';
-import { updateSendToken } from '../../../ducks/send/send.duck';
+import { ASSET_TYPES, updateSendAsset } from '../../../ducks/send';
 import { setSwapsFromToken } from '../../../ducks/swaps/swaps';
 import {
   getAssetImages,
@@ -85,8 +85,14 @@ const TokenOverview = ({ className, token }) => {
             className="token-overview__button"
             onClick={() => {
               sendTokenEvent();
-              dispatch(updateSendToken(token));
-              history.push(SEND_ROUTE);
+              dispatch(
+                updateSendAsset({
+                  type: ASSET_TYPES.TOKEN,
+                  details: token,
+                }),
+              ).then(() => {
+                history.push(SEND_ROUTE);
+              });
             }}
             Icon={SendIcon}
             label={t('send')}
diff --git a/ui/components/ui/unit-input/unit-input.component.js b/ui/components/ui/unit-input/unit-input.component.js
index 8eeb39e1b..78458cab6 100644
--- a/ui/components/ui/unit-input/unit-input.component.js
+++ b/ui/components/ui/unit-input/unit-input.component.js
@@ -1,7 +1,10 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { removeLeadingZeroes } from '../../../pages/send/send.utils';
+
+function removeLeadingZeroes(str) {
+  return str.replace(/^0*(?=\d)/u, '');
+}
 
 /**
  * Component that attaches a suffix or unit of measurement trailing user input, ex. 'ETH'. Also
diff --git a/ui/contexts/metametrics.js b/ui/contexts/metametrics.js
index 7a1cafd80..bb23afef8 100644
--- a/ui/contexts/metametrics.js
+++ b/ui/contexts/metametrics.js
@@ -15,10 +15,11 @@ import {
   getNumberOfAccounts,
   getNumberOfTokens,
 } from '../selectors/selectors';
-import { getSendToken } from '../selectors/send';
+import { getSendAsset, ASSET_TYPES } from '../ducks/send';
 import { txDataSelector } from '../selectors/confirm-transaction';
 import { getEnvironmentType } from '../../app/scripts/lib/util';
 import { trackMetaMetricsEvent } from '../store/actions';
+import { getNativeCurrency } from '../ducks/metamask/metamask';
 
 export const MetaMetricsContext = createContext(() => {
   captureException(
@@ -31,7 +32,8 @@ export const MetaMetricsContext = createContext(() => {
 export function MetaMetricsProvider({ children }) {
   const txData = useSelector(txDataSelector) || {};
   const environmentType = getEnvironmentType();
-  const activeCurrency = useSelector(getSendToken)?.symbol;
+  const activeAsset = useSelector(getSendAsset);
+  const nativeAssetSymbol = useSelector(getNativeCurrency);
   const accountType = useSelector(getAccountType);
   const confirmTransactionOrigin = txData.origin;
   const numberOfTokens = useSelector(getNumberOfTokens);
@@ -72,7 +74,10 @@ export function MetaMetricsProvider({ children }) {
             action: eventOpts.action,
             number_of_tokens: numberOfTokens,
             number_of_accounts: numberOfAccounts,
-            active_currency: activeCurrency,
+            active_currency:
+              activeAsset.type === ASSET_TYPES.NATIVE
+                ? nativeAssetSymbol
+                : activeAsset?.details?.symbol,
             account_type: accountType,
             is_new_visit: config.is_new_visit,
             // the properties coming from this key will not match our standards for
@@ -102,7 +107,8 @@ export function MetaMetricsProvider({ children }) {
       accountType,
       currentPath,
       confirmTransactionOrigin,
-      activeCurrency,
+      activeAsset,
+      nativeAssetSymbol,
       numberOfTokens,
       numberOfAccounts,
       environmentType,
diff --git a/ui/ducks/ens.js b/ui/ducks/ens.js
new file mode 100644
index 000000000..de72739e6
--- /dev/null
+++ b/ui/ducks/ens.js
@@ -0,0 +1,197 @@
+import { createSlice } from '@reduxjs/toolkit';
+import ENS from 'ethjs-ens';
+import log from 'loglevel';
+import networkMap from 'ethereum-ens-network-map';
+import { isConfusing } from 'unicode-confusables';
+import { isHexString } from 'ethereumjs-util';
+
+import { getCurrentChainId } from '../selectors';
+import {
+  CHAIN_ID_TO_NETWORK_ID_MAP,
+  MAINNET_NETWORK_ID,
+} from '../../shared/constants/network';
+import {
+  CONFUSING_ENS_ERROR,
+  ENS_ILLEGAL_CHARACTER,
+  ENS_NOT_FOUND_ON_NETWORK,
+  ENS_NOT_SUPPORTED_ON_NETWORK,
+  ENS_NO_ADDRESS_FOR_NAME,
+  ENS_REGISTRATION_ERROR,
+  ENS_UNKNOWN_ERROR,
+} from '../pages/send/send.constants';
+import { isValidDomainName } from '../helpers/utils/util';
+import { CHAIN_CHANGED } from '../store/actionConstants';
+import {
+  BURN_ADDRESS,
+  isBurnAddress,
+  isValidHexAddress,
+} from '../../shared/modules/hexstring-utils';
+
+// Local Constants
+const ZERO_X_ERROR_ADDRESS = '0x';
+
+const initialState = {
+  stage: 'UNINITIALIZED',
+  resolution: null,
+  error: null,
+  warning: null,
+  network: null,
+};
+
+export const ensInitialState = initialState;
+
+const name = 'ENS';
+
+let ens = null;
+
+const slice = createSlice({
+  name,
+  initialState,
+  reducers: {
+    ensLookup: (state, action) => {
+      // first clear out the previous state
+      state.resolution = null;
+      state.error = null;
+      state.warning = null;
+      const { address, ensName, error, network } = action.payload;
+
+      if (error) {
+        if (
+          isValidDomainName(ensName) &&
+          error.message === 'ENS name not defined.'
+        ) {
+          state.error =
+            network === MAINNET_NETWORK_ID
+              ? ENS_NO_ADDRESS_FOR_NAME
+              : ENS_NOT_FOUND_ON_NETWORK;
+        } else if (error.message === 'Illegal Character for ENS.') {
+          state.error = ENS_ILLEGAL_CHARACTER;
+        } else {
+          log.error(error);
+          state.error = ENS_UNKNOWN_ERROR;
+        }
+      } else if (address) {
+        if (address === BURN_ADDRESS) {
+          state.error = ENS_NO_ADDRESS_FOR_NAME;
+        } else if (address === ZERO_X_ERROR_ADDRESS) {
+          state.error = ENS_REGISTRATION_ERROR;
+        } else {
+          state.resolution = address;
+        }
+        if (isValidDomainName(address) && isConfusing(address)) {
+          state.warning = CONFUSING_ENS_ERROR;
+        }
+      }
+    },
+    enableEnsLookup: (state, action) => {
+      state.stage = 'INITIALIZED';
+      state.error = null;
+      state.resolution = null;
+      state.warning = null;
+      state.network = action.payload;
+    },
+    disableEnsLookup: (state) => {
+      state.stage = 'NO_NETWORK_SUPPORT';
+      state.error = ENS_NOT_SUPPORTED_ON_NETWORK;
+      state.warning = null;
+      state.resolution = null;
+      state.network = null;
+    },
+    resetResolution: (state) => {
+      state.resolution = null;
+      state.warning = null;
+      state.error =
+        state.stage === 'NO_NETWORK_SUPPORT'
+          ? ENS_NOT_SUPPORTED_ON_NETWORK
+          : null;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(CHAIN_CHANGED, (state, action) => {
+      if (action.payload !== state.currentChainId) {
+        state.stage = 'UNINITIALIZED';
+        ens = null;
+      }
+    });
+  },
+});
+
+const { reducer, actions } = slice;
+export default reducer;
+
+const {
+  disableEnsLookup,
+  ensLookup,
+  enableEnsLookup,
+  resetResolution,
+} = actions;
+export { resetResolution };
+
+export function initializeEnsSlice() {
+  return (dispatch, getState) => {
+    const state = getState();
+    const chainId = getCurrentChainId(state);
+    const network = CHAIN_ID_TO_NETWORK_ID_MAP[chainId];
+    const networkIsSupported = Boolean(networkMap[network]);
+    if (networkIsSupported) {
+      ens = new ENS({ provider: global.ethereumProvider, network });
+      dispatch(enableEnsLookup(network));
+    } else {
+      ens = null;
+      dispatch(disableEnsLookup());
+    }
+  };
+}
+
+export function lookupEnsName(ensName) {
+  return async (dispatch, getState) => {
+    const trimmedEnsName = ensName.trim();
+    let state = getState();
+    if (state[name].stage === 'UNINITIALIZED') {
+      await dispatch(initializeEnsSlice());
+    }
+    state = getState();
+    if (
+      state[name].stage === 'NO_NETWORK_SUPPORT' &&
+      !(
+        isBurnAddress(trimmedEnsName) === false &&
+        isValidHexAddress(trimmedEnsName, { mixedCaseUseChecksum: true })
+      ) &&
+      !isHexString(trimmedEnsName)
+    ) {
+      await dispatch(resetResolution());
+    } else {
+      log.info(`ENS attempting to resolve name: ${trimmedEnsName}`);
+      let address;
+      let error;
+      try {
+        address = await ens.lookup(trimmedEnsName);
+      } catch (err) {
+        error = err;
+      }
+      const chainId = getCurrentChainId(state);
+      const network = CHAIN_ID_TO_NETWORK_ID_MAP[chainId];
+      await dispatch(
+        ensLookup({
+          ensName: trimmedEnsName,
+          address,
+          error,
+          chainId,
+          network,
+        }),
+      );
+    }
+  };
+}
+
+export function getEnsResolution(state) {
+  return state[name].resolution;
+}
+
+export function getEnsError(state) {
+  return state[name].error;
+}
+
+export function getEnsWarning(state) {
+  return state[name].warning;
+}
diff --git a/ui/ducks/gas/gas-action-constants.js b/ui/ducks/gas/gas-action-constants.js
new file mode 100644
index 000000000..19cb16ee7
--- /dev/null
+++ b/ui/ducks/gas/gas-action-constants.js
@@ -0,0 +1,14 @@
+// This file has been separated because it is required in both the gas and send
+// slices. This created a circular dependency problem as both slices also
+// import from the actions and selectors files. This easiest path for
+// untangling is having the constants separate.
+
+// Actions
+export const BASIC_GAS_ESTIMATE_STATUS =
+  'metamask/gas/BASIC_GAS_ESTIMATE_STATUS';
+export const RESET_CUSTOM_DATA = 'metamask/gas/RESET_CUSTOM_DATA';
+export const SET_BASIC_GAS_ESTIMATE_DATA =
+  'metamask/gas/SET_BASIC_GAS_ESTIMATE_DATA';
+export const SET_CUSTOM_GAS_LIMIT = 'metamask/gas/SET_CUSTOM_GAS_LIMIT';
+export const SET_CUSTOM_GAS_PRICE = 'metamask/gas/SET_CUSTOM_GAS_PRICE';
+export const SET_ESTIMATE_SOURCE = 'metamask/gas/SET_ESTIMATE_SOURCE';
diff --git a/ui/ducks/gas/gas-duck.test.js b/ui/ducks/gas/gas-duck.test.js
index d4301f9b3..221e4dbd8 100644
--- a/ui/ducks/gas/gas-duck.test.js
+++ b/ui/ducks/gas/gas-duck.test.js
@@ -10,6 +10,14 @@ import GasReducer, {
   fetchBasicGasEstimates,
 } from './gas.duck';
 
+import {
+  BASIC_GAS_ESTIMATE_STATUS,
+  SET_BASIC_GAS_ESTIMATE_DATA,
+  SET_CUSTOM_GAS_PRICE,
+  SET_CUSTOM_GAS_LIMIT,
+  SET_ESTIMATE_SOURCE,
+} from './gas-action-constants';
+
 jest.mock('../../helpers/utils/storage-helpers.js', () => ({
   getStorageItem: jest.fn(),
   setStorageItem: jest.fn(),
@@ -61,13 +69,6 @@ describe('Gas Duck', () => {
     type: 'mainnet',
   };
 
-  const BASIC_GAS_ESTIMATE_STATUS = 'metamask/gas/BASIC_GAS_ESTIMATE_STATUS';
-  const SET_BASIC_GAS_ESTIMATE_DATA =
-    'metamask/gas/SET_BASIC_GAS_ESTIMATE_DATA';
-  const SET_CUSTOM_GAS_LIMIT = 'metamask/gas/SET_CUSTOM_GAS_LIMIT';
-  const SET_CUSTOM_GAS_PRICE = 'metamask/gas/SET_CUSTOM_GAS_PRICE';
-  const SET_ESTIMATE_SOURCE = 'metamask/gas/SET_ESTIMATE_SOURCE';
-
   describe('GasReducer()', () => {
     it('should initialize state', () => {
       expect(GasReducer(undefined, {})).toStrictEqual(initState);
diff --git a/ui/ducks/gas/gas.duck.js b/ui/ducks/gas/gas.duck.js
index e991e5e73..a41c313c5 100644
--- a/ui/ducks/gas/gas.duck.js
+++ b/ui/ducks/gas/gas.duck.js
@@ -10,6 +10,14 @@ import {
 } from '../../helpers/utils/conversions.util';
 import { getIsMainnet, getCurrentChainId } from '../../selectors';
 import fetchWithCache from '../../helpers/utils/fetch-with-cache';
+import {
+  BASIC_GAS_ESTIMATE_STATUS,
+  RESET_CUSTOM_DATA,
+  SET_BASIC_GAS_ESTIMATE_DATA,
+  SET_CUSTOM_GAS_LIMIT,
+  SET_CUSTOM_GAS_PRICE,
+  SET_ESTIMATE_SOURCE,
+} from './gas-action-constants';
 
 export const BASIC_ESTIMATE_STATES = {
   LOADING: 'LOADING',
@@ -22,14 +30,6 @@ export const GAS_SOURCE = {
   ETHGASPRICE: 'eth_gasprice',
 };
 
-// Actions
-const BASIC_GAS_ESTIMATE_STATUS = 'metamask/gas/BASIC_GAS_ESTIMATE_STATUS';
-const RESET_CUSTOM_DATA = 'metamask/gas/RESET_CUSTOM_DATA';
-const SET_BASIC_GAS_ESTIMATE_DATA = 'metamask/gas/SET_BASIC_GAS_ESTIMATE_DATA';
-const SET_CUSTOM_GAS_LIMIT = 'metamask/gas/SET_CUSTOM_GAS_LIMIT';
-const SET_CUSTOM_GAS_PRICE = 'metamask/gas/SET_CUSTOM_GAS_PRICE';
-const SET_ESTIMATE_SOURCE = 'metamask/gas/SET_ESTIMATE_SOURCE';
-
 const initState = {
   customData: {
     price: null,
diff --git a/ui/ducks/index.js b/ui/ducks/index.js
index bae560536..11b525e4c 100644
--- a/ui/ducks/index.js
+++ b/ui/ducks/index.js
@@ -2,7 +2,8 @@ import { combineReducers } from 'redux';
 import { ALERT_TYPES } from '../../shared/constants/alerts';
 import metamaskReducer from './metamask/metamask';
 import localeMessagesReducer from './locale/locale';
-import sendReducer from './send/send.duck';
+import sendReducer from './send/send';
+import ensReducer from './ens';
 import appStateReducer from './app/app';
 import confirmTransactionReducer from './confirm-transaction/confirm-transaction.duck';
 import gasReducer from './gas/gas.duck';
@@ -16,6 +17,7 @@ export default combineReducers({
   activeTab: (s) => (s === undefined ? null : s),
   metamask: metamaskReducer,
   appState: appStateReducer,
+  ENS: ensReducer,
   history: historyReducer,
   send: sendReducer,
   confirmTransaction: confirmTransactionReducer,
diff --git a/ui/ducks/send/index.js b/ui/ducks/send/index.js
new file mode 100644
index 000000000..d1ab99c82
--- /dev/null
+++ b/ui/ducks/send/index.js
@@ -0,0 +1 @@
+export * from './send';
diff --git a/ui/ducks/send/send-duck.test.js b/ui/ducks/send/send-duck.test.js
deleted file mode 100644
index 7c05e8689..000000000
--- a/ui/ducks/send/send-duck.test.js
+++ /dev/null
@@ -1,142 +0,0 @@
-import SendReducer, {
-  openToDropdown,
-  closeToDropdown,
-  updateSendErrors,
-  showGasButtonGroup,
-  hideGasButtonGroup,
-} from './send.duck';
-
-describe('Send Duck', () => {
-  const mockState = {
-    mockProp: 123,
-  };
-  const initState = {
-    toDropdownOpen: false,
-    gasButtonGroupShown: true,
-    errors: {},
-    gasLimit: null,
-    gasPrice: null,
-    gasTotal: null,
-    tokenBalance: '0x0',
-    from: '',
-    to: '',
-    amount: '0',
-    memo: '',
-    maxModeOn: false,
-    editingTransactionId: null,
-    toNickname: '',
-    ensResolution: null,
-    ensResolutionError: '',
-    gasIsLoading: false,
-  };
-  const OPEN_TO_DROPDOWN = 'metamask/send/OPEN_TO_DROPDOWN';
-  const CLOSE_TO_DROPDOWN = 'metamask/send/CLOSE_TO_DROPDOWN';
-  const UPDATE_SEND_ERRORS = 'metamask/send/UPDATE_SEND_ERRORS';
-  const RESET_SEND_STATE = 'metamask/send/RESET_SEND_STATE';
-  const SHOW_GAS_BUTTON_GROUP = 'metamask/send/SHOW_GAS_BUTTON_GROUP';
-  const HIDE_GAS_BUTTON_GROUP = 'metamask/send/HIDE_GAS_BUTTON_GROUP';
-
-  describe('SendReducer()', () => {
-    it('should initialize state', () => {
-      expect(SendReducer(undefined, {})).toStrictEqual(initState);
-    });
-
-    it('should return state unchanged if it does not match a dispatched actions type', () => {
-      expect(
-        SendReducer(mockState, {
-          type: 'someOtherAction',
-          value: 'someValue',
-        }),
-      ).toStrictEqual(mockState);
-    });
-
-    it('should set toDropdownOpen to true when receiving a OPEN_TO_DROPDOWN action', () => {
-      expect(
-        SendReducer(mockState, {
-          type: OPEN_TO_DROPDOWN,
-        }),
-      ).toStrictEqual({ toDropdownOpen: true, ...mockState });
-    });
-
-    it('should set toDropdownOpen to false when receiving a CLOSE_TO_DROPDOWN action', () => {
-      expect(
-        SendReducer(mockState, {
-          type: CLOSE_TO_DROPDOWN,
-        }),
-      ).toStrictEqual({ toDropdownOpen: false, ...mockState });
-    });
-
-    it('should set gasButtonGroupShown to true when receiving a SHOW_GAS_BUTTON_GROUP action', () => {
-      expect(
-        SendReducer(
-          { ...mockState, gasButtonGroupShown: false },
-          { type: SHOW_GAS_BUTTON_GROUP },
-        ),
-      ).toStrictEqual({ gasButtonGroupShown: true, ...mockState });
-    });
-
-    it('should set gasButtonGroupShown to false when receiving a HIDE_GAS_BUTTON_GROUP action', () => {
-      expect(
-        SendReducer(mockState, { type: HIDE_GAS_BUTTON_GROUP }),
-      ).toStrictEqual({ gasButtonGroupShown: false, ...mockState });
-    });
-
-    it('should extend send.errors with the value of a UPDATE_SEND_ERRORS action', () => {
-      const modifiedMockState = {
-        ...mockState,
-        errors: {
-          someError: false,
-        },
-      };
-      expect(
-        SendReducer(modifiedMockState, {
-          type: UPDATE_SEND_ERRORS,
-          value: { someOtherError: true },
-        }),
-      ).toStrictEqual({
-        ...modifiedMockState,
-        errors: {
-          someError: false,
-          someOtherError: true,
-        },
-      });
-    });
-
-    it('should return the initial state in response to a RESET_SEND_STATE action', () => {
-      expect(
-        SendReducer(mockState, {
-          type: RESET_SEND_STATE,
-        }),
-      ).toStrictEqual(initState);
-    });
-  });
-
-  describe('Send Duck Actions', () => {
-    it('calls openToDropdown action', () => {
-      expect(openToDropdown()).toStrictEqual({ type: OPEN_TO_DROPDOWN });
-    });
-
-    it('calls closeToDropdown action', () => {
-      expect(closeToDropdown()).toStrictEqual({ type: CLOSE_TO_DROPDOWN });
-    });
-
-    it('calls showGasButtonGroup action', () => {
-      expect(showGasButtonGroup()).toStrictEqual({
-        type: SHOW_GAS_BUTTON_GROUP,
-      });
-    });
-
-    it('calls hideGasButtonGroup action', () => {
-      expect(hideGasButtonGroup()).toStrictEqual({
-        type: HIDE_GAS_BUTTON_GROUP,
-      });
-    });
-
-    it('calls updateSendErrors action', () => {
-      expect(updateSendErrors('mockErrorObject')).toStrictEqual({
-        type: UPDATE_SEND_ERRORS,
-        value: 'mockErrorObject',
-      });
-    });
-  });
-});
diff --git a/ui/ducks/send/send.duck.js b/ui/ducks/send/send.duck.js
deleted file mode 100644
index 82d9b9d82..000000000
--- a/ui/ducks/send/send.duck.js
+++ /dev/null
@@ -1,382 +0,0 @@
-import log from 'loglevel';
-import { estimateGas } from '../../store/actions';
-import { setCustomGasLimit } from '../gas/gas.duck';
-import {
-  estimateGasForSend,
-  calcTokenBalance,
-} from '../../pages/send/send.utils';
-
-// Actions
-const OPEN_TO_DROPDOWN = 'metamask/send/OPEN_TO_DROPDOWN';
-const CLOSE_TO_DROPDOWN = 'metamask/send/CLOSE_TO_DROPDOWN';
-const UPDATE_SEND_ERRORS = 'metamask/send/UPDATE_SEND_ERRORS';
-const RESET_SEND_STATE = 'metamask/send/RESET_SEND_STATE';
-const SHOW_GAS_BUTTON_GROUP = 'metamask/send/SHOW_GAS_BUTTON_GROUP';
-const HIDE_GAS_BUTTON_GROUP = 'metamask/send/HIDE_GAS_BUTTON_GROUP';
-const UPDATE_GAS_LIMIT = 'UPDATE_GAS_LIMIT';
-const UPDATE_GAS_PRICE = 'UPDATE_GAS_PRICE';
-const UPDATE_GAS_TOTAL = 'UPDATE_GAS_TOTAL';
-const UPDATE_SEND_HEX_DATA = 'UPDATE_SEND_HEX_DATA';
-const UPDATE_SEND_TOKEN_BALANCE = 'UPDATE_SEND_TOKEN_BALANCE';
-const UPDATE_SEND_TO = 'UPDATE_SEND_TO';
-const UPDATE_SEND_AMOUNT = 'UPDATE_SEND_AMOUNT';
-const UPDATE_MAX_MODE = 'UPDATE_MAX_MODE';
-const UPDATE_SEND = 'UPDATE_SEND';
-const UPDATE_SEND_TOKEN = 'UPDATE_SEND_TOKEN';
-const CLEAR_SEND = 'CLEAR_SEND';
-const GAS_LOADING_STARTED = 'GAS_LOADING_STARTED';
-const GAS_LOADING_FINISHED = 'GAS_LOADING_FINISHED';
-const UPDATE_SEND_ENS_RESOLUTION = 'UPDATE_SEND_ENS_RESOLUTION';
-const UPDATE_SEND_ENS_RESOLUTION_ERROR = 'UPDATE_SEND_ENS_RESOLUTION_ERROR';
-
-const initState = {
-  toDropdownOpen: false,
-  gasButtonGroupShown: true,
-  errors: {},
-  gasLimit: null,
-  gasPrice: null,
-  gasTotal: null,
-  tokenBalance: '0x0',
-  from: '',
-  to: '',
-  amount: '0',
-  memo: '',
-  maxModeOn: false,
-  editingTransactionId: null,
-  toNickname: '',
-  ensResolution: null,
-  ensResolutionError: '',
-  gasIsLoading: false,
-};
-
-// Reducer
-export default function reducer(state = initState, action) {
-  switch (action.type) {
-    case OPEN_TO_DROPDOWN:
-      return {
-        ...state,
-        toDropdownOpen: true,
-      };
-    case CLOSE_TO_DROPDOWN:
-      return {
-        ...state,
-        toDropdownOpen: false,
-      };
-    case UPDATE_SEND_ERRORS:
-      return {
-        ...state,
-        errors: {
-          ...state.errors,
-          ...action.value,
-        },
-      };
-    case SHOW_GAS_BUTTON_GROUP:
-      return {
-        ...state,
-        gasButtonGroupShown: true,
-      };
-    case HIDE_GAS_BUTTON_GROUP:
-      return {
-        ...state,
-        gasButtonGroupShown: false,
-      };
-    case UPDATE_GAS_LIMIT:
-      return {
-        ...state,
-        gasLimit: action.value,
-      };
-    case UPDATE_GAS_PRICE:
-      return {
-        ...state,
-        gasPrice: action.value,
-      };
-    case RESET_SEND_STATE:
-      return { ...initState };
-    case UPDATE_GAS_TOTAL:
-      return {
-        ...state,
-        gasTotal: action.value,
-      };
-    case UPDATE_SEND_TOKEN_BALANCE:
-      return {
-        ...state,
-        tokenBalance: action.value,
-      };
-    case UPDATE_SEND_HEX_DATA:
-      return {
-        ...state,
-        data: action.value,
-      };
-    case UPDATE_SEND_TO:
-      return {
-        ...state,
-        to: action.value.to,
-        toNickname: action.value.nickname,
-      };
-    case UPDATE_SEND_AMOUNT:
-      return {
-        ...state,
-        amount: action.value,
-      };
-    case UPDATE_MAX_MODE:
-      return {
-        ...state,
-        maxModeOn: action.value,
-      };
-    case UPDATE_SEND:
-      return Object.assign(state, action.value);
-    case UPDATE_SEND_TOKEN: {
-      const newSend = {
-        ...state,
-        token: action.value,
-      };
-      // erase token-related state when switching back to native currency
-      if (newSend.editingTransactionId && !newSend.token) {
-        const unapprovedTx =
-          newSend?.unapprovedTxs?.[newSend.editingTransactionId] || {};
-        const txParams = unapprovedTx.txParams || {};
-        Object.assign(newSend, {
-          tokenBalance: null,
-          balance: '0',
-          from: unapprovedTx.from || '',
-          unapprovedTxs: {
-            ...newSend.unapprovedTxs,
-            [newSend.editingTransactionId]: {
-              ...unapprovedTx,
-              txParams: {
-                ...txParams,
-                data: '',
-              },
-            },
-          },
-        });
-      }
-      return Object.assign(state, newSend);
-    }
-    case UPDATE_SEND_ENS_RESOLUTION:
-      return {
-        ...state,
-        ensResolution: action.payload,
-        ensResolutionError: '',
-      };
-    case UPDATE_SEND_ENS_RESOLUTION_ERROR:
-      return {
-        ...state,
-        ensResolution: null,
-        ensResolutionError: action.payload,
-      };
-    case CLEAR_SEND:
-      return {
-        ...state,
-        gasLimit: null,
-        gasPrice: null,
-        gasTotal: null,
-        tokenBalance: null,
-        from: '',
-        to: '',
-        amount: '0x0',
-        memo: '',
-        errors: {},
-        maxModeOn: false,
-        editingTransactionId: null,
-        toNickname: '',
-      };
-    case GAS_LOADING_STARTED:
-      return {
-        ...state,
-        gasIsLoading: true,
-      };
-
-    case GAS_LOADING_FINISHED:
-      return {
-        ...state,
-        gasIsLoading: false,
-      };
-    default:
-      return state;
-  }
-}
-
-// Action Creators
-export function openToDropdown() {
-  return { type: OPEN_TO_DROPDOWN };
-}
-
-export function closeToDropdown() {
-  return { type: CLOSE_TO_DROPDOWN };
-}
-
-export function showGasButtonGroup() {
-  return { type: SHOW_GAS_BUTTON_GROUP };
-}
-
-export function hideGasButtonGroup() {
-  return { type: HIDE_GAS_BUTTON_GROUP };
-}
-
-export function updateSendErrors(errorObject) {
-  return {
-    type: UPDATE_SEND_ERRORS,
-    value: errorObject,
-  };
-}
-
-export function resetSendState() {
-  return { type: RESET_SEND_STATE };
-}
-
-export function setGasLimit(gasLimit) {
-  return {
-    type: UPDATE_GAS_LIMIT,
-    value: gasLimit,
-  };
-}
-
-export function setGasPrice(gasPrice) {
-  return {
-    type: UPDATE_GAS_PRICE,
-    value: gasPrice,
-  };
-}
-
-export function setGasTotal(gasTotal) {
-  return {
-    type: UPDATE_GAS_TOTAL,
-    value: gasTotal,
-  };
-}
-
-export function updateGasData({
-  gasPrice,
-  blockGasLimit,
-  selectedAddress,
-  sendToken,
-  to,
-  value,
-  data,
-}) {
-  return (dispatch) => {
-    dispatch(gasLoadingStarted());
-    return estimateGasForSend({
-      estimateGasMethod: estimateGas,
-      blockGasLimit,
-      selectedAddress,
-      sendToken,
-      to,
-      value,
-      estimateGasPrice: gasPrice,
-      data,
-    })
-      .then((gas) => {
-        dispatch(setGasLimit(gas));
-        dispatch(setCustomGasLimit(gas));
-        dispatch(updateSendErrors({ gasLoadingError: null }));
-        dispatch(gasLoadingFinished());
-      })
-      .catch((err) => {
-        log.error(err);
-        dispatch(updateSendErrors({ gasLoadingError: 'gasLoadingError' }));
-        dispatch(gasLoadingFinished());
-      });
-  };
-}
-
-export function gasLoadingStarted() {
-  return {
-    type: GAS_LOADING_STARTED,
-  };
-}
-
-export function gasLoadingFinished() {
-  return {
-    type: GAS_LOADING_FINISHED,
-  };
-}
-
-export function updateSendTokenBalance({ sendToken, tokenContract, address }) {
-  return (dispatch) => {
-    const tokenBalancePromise = tokenContract
-      ? tokenContract.balanceOf(address)
-      : Promise.resolve();
-    return tokenBalancePromise
-      .then((usersToken) => {
-        if (usersToken) {
-          const newTokenBalance = calcTokenBalance({ sendToken, usersToken });
-          dispatch(setSendTokenBalance(newTokenBalance));
-        }
-      })
-      .catch((err) => {
-        log.error(err);
-        updateSendErrors({ tokenBalance: 'tokenBalanceError' });
-      });
-  };
-}
-
-export function setSendTokenBalance(tokenBalance) {
-  return {
-    type: UPDATE_SEND_TOKEN_BALANCE,
-    value: tokenBalance,
-  };
-}
-
-export function updateSendHexData(value) {
-  return {
-    type: UPDATE_SEND_HEX_DATA,
-    value,
-  };
-}
-
-export function updateSendTo(to, nickname = '') {
-  return {
-    type: UPDATE_SEND_TO,
-    value: { to, nickname },
-  };
-}
-
-export function updateSendAmount(amount) {
-  return {
-    type: UPDATE_SEND_AMOUNT,
-    value: amount,
-  };
-}
-
-export function setMaxModeTo(bool) {
-  return {
-    type: UPDATE_MAX_MODE,
-    value: bool,
-  };
-}
-
-export function updateSend(newSend) {
-  return {
-    type: UPDATE_SEND,
-    value: newSend,
-  };
-}
-
-export function updateSendToken(token) {
-  return {
-    type: UPDATE_SEND_TOKEN,
-    value: token,
-  };
-}
-
-export function clearSend() {
-  return {
-    type: CLEAR_SEND,
-  };
-}
-
-export function updateSendEnsResolution(ensResolution) {
-  return {
-    type: UPDATE_SEND_ENS_RESOLUTION,
-    payload: ensResolution,
-  };
-}
-
-export function updateSendEnsResolutionError(errorMessage) {
-  return {
-    type: UPDATE_SEND_ENS_RESOLUTION_ERROR,
-    payload: errorMessage,
-  };
-}
diff --git a/ui/ducks/send/send.js b/ui/ducks/send/send.js
new file mode 100644
index 000000000..3ed41512b
--- /dev/null
+++ b/ui/ducks/send/send.js
@@ -0,0 +1,1472 @@
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import abi from 'human-standard-token-abi';
+import contractMap from '@metamask/contract-metadata';
+import BigNumber from 'bignumber.js';
+import { addHexPrefix, toChecksumAddress } from 'ethereumjs-util';
+import { debounce } from 'lodash';
+import {
+  conversionGreaterThan,
+  conversionUtil,
+  multiplyCurrencies,
+  subtractCurrencies,
+} from '../../helpers/utils/conversion-util';
+import { GAS_LIMITS } from '../../../shared/constants/gas';
+import {
+  CONTRACT_ADDRESS_ERROR,
+  INSUFFICIENT_FUNDS_ERROR,
+  INSUFFICIENT_TOKENS_ERROR,
+  INVALID_RECIPIENT_ADDRESS_ERROR,
+  INVALID_RECIPIENT_ADDRESS_NOT_ETH_NETWORK_ERROR,
+  KNOWN_RECIPIENT_ADDRESS_WARNING,
+  MIN_GAS_LIMIT_HEX,
+  NEGATIVE_ETH_ERROR,
+} from '../../pages/send/send.constants';
+
+import {
+  addGasBuffer,
+  calcGasTotal,
+  generateTokenTransferData,
+  isBalanceSufficient,
+  isTokenBalanceSufficient,
+} from '../../pages/send/send.utils';
+import {
+  getAddressBookEntry,
+  getAdvancedInlineGasShown,
+  getCurrentChainId,
+  getGasPriceInHexWei,
+  getIsMainnet,
+  getSelectedAddress,
+  getTargetAccount,
+} from '../../selectors';
+import {
+  displayWarning,
+  estimateGas,
+  hideLoadingIndication,
+  showConfTxPage,
+  showLoadingIndication,
+  updateTokenType,
+  updateTransaction,
+} from '../../store/actions';
+import {
+  fetchBasicGasEstimates,
+  setCustomGasLimit,
+  BASIC_ESTIMATE_STATES,
+} from '../gas/gas.duck';
+import {
+  SET_BASIC_GAS_ESTIMATE_DATA,
+  BASIC_GAS_ESTIMATE_STATUS,
+} from '../gas/gas-action-constants';
+import {
+  QR_CODE_DETECTED,
+  SELECTED_ACCOUNT_CHANGED,
+  ACCOUNT_CHANGED,
+  ADDRESS_BOOK_UPDATED,
+} from '../../store/actionConstants';
+import {
+  calcTokenAmount,
+  getTokenAddressParam,
+  getTokenValueParam,
+} from '../../helpers/utils/token-util';
+import {
+  checkExistingAddresses,
+  isDefaultMetaMaskChain,
+  isOriginContractAddress,
+  isValidDomainName,
+} from '../../helpers/utils/util';
+import { getTokens, getUnapprovedTxs } from '../metamask/metamask';
+import { resetResolution } from '../ens';
+import {
+  isBurnAddress,
+  isValidHexAddress,
+} from '../../../shared/modules/hexstring-utils';
+
+// typedefs
+/**
+ * @typedef {import('@reduxjs/toolkit').PayloadAction} PayloadAction
+ */
+
+const name = 'send';
+
+/**
+ * The Stages that the send slice can be in
+ * 1. UNINITIALIZED - The send state is idle, and hasn't yet fetched required
+ *  data for gasPrice and gasLimit estimations, etc.
+ * 2. ADD_RECIPIENT - The user is selecting which address to send an asset to
+ * 3. DRAFT - The send form is shown for a transaction yet to be sent to the
+ *  Transaction Controller.
+ * 4. EDIT - The send form is shown for a transaction already submitted to the
+ *  Transaction Controller but not yet confirmed. This happens when a
+ *  confirmation is shown for a transaction and the 'edit' button in the header
+ *  is clicked.
+ */
+export const SEND_STAGES = {
+  INACTIVE: 'INACTIVE',
+  ADD_RECIPIENT: 'ADD_RECIPIENT',
+  DRAFT: 'DRAFT',
+  EDIT: 'EDIT',
+};
+
+/**
+ * The status that the send slice can be in is either
+ * 1. VALID - the transaction is valid and can be submitted
+ * 2. INVALID - the transaction is invalid and cannot be submitted
+ *
+ * A number of cases would result in an invalid form
+ * 1. The recipient is not yet defined
+ * 2. The amount + gasTotal is greater than the user's balance when sending
+ *  native currency
+ * 3. The gasTotal is greater than the user's *native* balance
+ * 4. The amount of sent asset is greater than the user's *asset* balance
+ * 5. Gas price estimates failed to load entirely
+ * 6. The gasLimit is less than 21000 (0x5208)
+ */
+export const SEND_STATUSES = {
+  VALID: 'VALID',
+  INVALID: 'INVALID',
+};
+
+/**
+ * Controls what is displayed in the send-gas-row component.
+ * 1. BASIC - Shows the basic estimate slow/avg/fast buttons when on mainnet
+ *  and the metaswaps API request is successful.
+ * 2. INLINE - Shows inline gasLimit/gasPrice fields when on any other network
+ *  or metaswaps API fails and we use eth_gasPrice
+ * 3. CUSTOM - Shows GasFeeDisplay component that is a read only display of the
+ *  values the user has set in the advanced gas modal (stored in the gas duck
+ *  under the customData key).
+ */
+export const GAS_INPUT_MODES = {
+  BASIC: 'BASIC',
+  INLINE: 'INLINE',
+  CUSTOM: 'CUSTOM',
+};
+
+/**
+ * The types of assets that a user can send
+ * 1. NATIVE - The native asset for the current network, such as ETH
+ * 2. TOKEN - An ERC20 token.
+ */
+export const ASSET_TYPES = {
+  NATIVE: 'NATIVE',
+  TOKEN: 'TOKEN',
+};
+
+/**
+ * The modes that the amount field can be set by
+ * 1. INPUT - the user provides the amount by typing in the field
+ * 2. MAX - The user selects the MAX button and amount is calculated based on
+ *  balance - (amount + gasTotal)
+ */
+export const AMOUNT_MODES = {
+  INPUT: 'INPUT',
+  MAX: 'MAX',
+};
+
+export const RECIPIENT_SEARCH_MODES = {
+  MY_ACCOUNTS: 'MY_ACCOUNTS',
+  CONTACT_LIST: 'CONTACT_LIST',
+};
+
+async function estimateGasLimitForSend({
+  selectedAddress,
+  value,
+  gasPrice,
+  sendToken,
+  to,
+  data,
+  ...options
+}) {
+  // blockGasLimit may be a falsy, but defined, value when we receive it from
+  // state, so we use logical or to fall back to MIN_GAS_LIMIT_HEX.
+  const blockGasLimit = options.blockGasLimit || MIN_GAS_LIMIT_HEX;
+  // The parameters below will be sent to our background process to estimate
+  // how much gas will be used for a transaction. That background process is
+  // located in tx-gas-utils.js in the transaction controller folder.
+  const paramsForGasEstimate = { from: selectedAddress, value, gasPrice };
+
+  if (sendToken) {
+    if (!to) {
+      // if no to address is provided, we cannot generate the token transfer
+      // hexData. hexData in a transaction largely dictates how much gas will
+      // be consumed by a transaction. We must use our best guess, which is
+      // represented in the gas shared constants.
+      return GAS_LIMITS.BASE_TOKEN_ESTIMATE;
+    }
+    paramsForGasEstimate.value = '0x0';
+    // We have to generate the erc20 contract call to transfer tokens in
+    // order to get a proper estimate for gasLimit.
+    paramsForGasEstimate.data = generateTokenTransferData({
+      toAddress: to,
+      amount: value,
+      sendToken,
+    });
+    paramsForGasEstimate.to = sendToken.address;
+  } else {
+    if (!data) {
+      // eth.getCode will return the compiled smart contract code at the
+      // address. If this returns 0x, 0x0 or a nullish value then the address
+      // is an externally owned account (NOT a contract account). For these
+      // types of transactions the gasLimit will always be 21,000 or 0x5208
+      const contractCode = Boolean(to) && (await global.eth.getCode(to));
+      // Geth will return '0x', and ganache-core v2.2.1 will return '0x0'
+      const contractCodeIsEmpty =
+        !contractCode || contractCode === '0x' || contractCode === '0x0';
+      if (contractCodeIsEmpty) {
+        return GAS_LIMITS.SIMPLE;
+      }
+    }
+
+    paramsForGasEstimate.data = data;
+
+    if (to) {
+      paramsForGasEstimate.to = to;
+    }
+
+    if (!value || value === '0') {
+      // TODO: Figure out what's going on here. According to eth_estimateGas
+      // docs this value can be zero, or undefined, yet we are setting it to a
+      // value here when the value is undefined or zero. For more context:
+      // https://github.com/MetaMask/metamask-extension/pull/6195
+      paramsForGasEstimate.value = '0xff';
+    }
+  }
+
+  // If we do not yet have a gasLimit, we must call into our background
+  // process to get an estimate for gasLimit based on known parameters.
+
+  paramsForGasEstimate.gas = addHexPrefix(
+    multiplyCurrencies(blockGasLimit, 0.95, {
+      multiplicandBase: 16,
+      multiplierBase: 10,
+      roundDown: '0',
+      toNumericBase: 'hex',
+    }),
+  );
+  try {
+    // call into the background process that will simulate transaction
+    // execution on the node and return an estimate of gasLimit
+    const estimatedGasLimit = await estimateGas(paramsForGasEstimate);
+    const estimateWithBuffer = addGasBuffer(
+      estimatedGasLimit,
+      blockGasLimit,
+      1.5,
+    );
+    return addHexPrefix(estimateWithBuffer);
+  } catch (error) {
+    const simulationFailed =
+      error.message.includes('Transaction execution error.') ||
+      error.message.includes(
+        'gas required exceeds allowance or always failing transaction',
+      );
+    if (simulationFailed) {
+      const estimateWithBuffer = addGasBuffer(
+        paramsForGasEstimate.gas,
+        blockGasLimit,
+        1.5,
+      );
+      return addHexPrefix(estimateWithBuffer);
+    }
+    throw error;
+  }
+}
+
+export async function getERC20Balance(token, accountAddress) {
+  const contract = global.eth.contract(abi).at(token.address);
+  const usersToken = (await contract.balanceOf(accountAddress)) ?? null;
+  if (!usersToken) {
+    return '0x0';
+  }
+  const amount = calcTokenAmount(
+    usersToken.balance.toString(),
+    token.decimals,
+  ).toString(16);
+  return addHexPrefix(amount);
+}
+
+// After modification of specific fields in specific circumstances we must
+// recompute the gasLimit estimate to be as accurate as possible. the cases
+// that necessitate this logic are listed below:
+// 1. when the amount sent changes when sending a token due to the amount being
+//    part of the hex encoded data property of the transaction.
+// 2. when updating the data property while sending NATIVE currency (ex: ETH)
+//    because the data parameter defines function calls that the EVM will have
+//    to execute which is where a large chunk of gas is potentially consumed.
+// 3. when the recipient changes while sending a token due to the recipient's
+//    address being included in the hex encoded data property of the
+//    transaction
+// 4. when the asset being sent changes due to the contract address and details
+//    of the token being included in the hex encoded data property of the
+//    transaction. If switching to NATIVE currency (ex: ETH), the gasLimit will
+//    change due to hex data being removed (unless supplied by user).
+// This method computes the gasLimit estimate which is written to state in an
+// action handler in extraReducers.
+export const computeEstimatedGasLimit = createAsyncThunk(
+  'send/computeEstimatedGasLimit',
+  async (_, thunkApi) => {
+    const { send, metamask } = thunkApi.getState();
+    if (send.stage !== SEND_STAGES.EDIT) {
+      const gasLimit = await estimateGasLimitForSend({
+        gasPrice: send.gas.gasPrice,
+        blockGasLimit: metamask.blockGasLimit,
+        selectedAddress: metamask.selectedAddress,
+        sendToken: send.asset.details,
+        to: send.recipient.address?.toLowerCase(),
+        value: send.amount.value,
+        data: send.draftTransaction.userInputHexData,
+      });
+      await thunkApi.dispatch(setCustomGasLimit(gasLimit));
+      return {
+        gasLimit,
+      };
+    }
+    return null;
+  },
+);
+
+/**
+ * Responsible for initializing required state for the send slice.
+ * This method is dispatched from the send page in the componentDidMount
+ * method. It is also dispatched anytime the network changes to ensure that
+ * the slice remains valid with changing token and account balances. To do so
+ * it keys into state to get necessary values and computes a starting point for
+ * the send slice. It returns the values that might change from this action and
+ * those values are written to the slice in the `initializeSendState.fulfilled`
+ * action handler.
+ */
+export const initializeSendState = createAsyncThunk(
+  'send/initializeSendState',
+  async (_, thunkApi) => {
+    const state = thunkApi.getState();
+    const {
+      send: { asset, stage, recipient, amount, draftTransaction },
+      metamask,
+    } = state;
+    // First determine the correct from address. For new sends this is always
+    // the currently selected account and switching accounts switches the from
+    // address. If editing an existing transaction (by clicking 'edit' on the
+    // send page), the fromAddress is always the address from the txParams.
+    const fromAddress =
+      stage === SEND_STAGES.EDIT
+        ? draftTransaction.txParams.from
+        : metamask.selectedAddress;
+    // We need the account's balance which is calculated from cachedBalances in
+    // the getMetaMaskAccounts selector. getTargetAccount consumes this
+    // selector and returns the account at the specified address.
+    const account = getTargetAccount(state, fromAddress);
+    // Initiate gas slices work to fetch gasPrice estimates. We need to get the
+    // new state after this is set to determine if initialization can proceed.
+    await thunkApi.dispatch(fetchBasicGasEstimates());
+    const {
+      gas: { basicEstimateStatus, basicEstimates },
+    } = thunkApi.getState();
+    // Default gasPrice to 1 gwei if all estimation fails
+    const gasPrice =
+      basicEstimateStatus === BASIC_ESTIMATE_STATES.READY
+        ? getGasPriceInHexWei(basicEstimates.average)
+        : '0x1';
+    // Set a basic gasLimit in the event that other estimation fails
+    let gasLimit =
+      asset.type === ASSET_TYPES.TOKEN
+        ? GAS_LIMITS.BASE_TOKEN_ESTIMATE
+        : GAS_LIMITS.SIMPLE;
+    if (
+      basicEstimateStatus === BASIC_ESTIMATE_STATES.READY &&
+      stage !== SEND_STAGES.EDIT
+    ) {
+      // Run our estimateGasLimit logic to get a more accurate estimation of
+      // required gas. If this value isn't nullish, set it as the new gasLimit
+      const estimatedGasLimit = await estimateGasLimitForSend({
+        gasPrice: getGasPriceInHexWei(basicEstimates.average),
+        blockGasLimit: metamask.blockGasLimit,
+        selectedAddress: fromAddress,
+        sendToken: asset.details,
+        to: recipient.address.toLowerCase(),
+        value: amount.value,
+        data: draftTransaction.userInputHexData,
+      });
+      gasLimit = estimatedGasLimit || gasLimit;
+    }
+    // We have to keep the gas slice in sync with the draft send transaction
+    // so that it'll be initialized correctly if the gas modal is opened.
+    await thunkApi.dispatch(setCustomGasLimit(gasLimit));
+    // We must determine the balance of the asset that the transaction will be
+    // sending. This is done by referencing the native balance on the account
+    // for native assets, and calling the balanceOf method on the ERC20
+    // contract for token sends.
+    let { balance } = account;
+    if (asset.type === ASSET_TYPES.TOKEN) {
+      if (asset.details === null) {
+        // If we're sending a token but details have not been provided we must
+        // abort and set the send slice into invalid status.
+        throw new Error(
+          'Send slice initialized as token send without token details',
+        );
+      }
+      balance = await getERC20Balance(asset.details, fromAddress);
+    }
+    return {
+      address: fromAddress,
+      nativeBalance: account.balance,
+      assetBalance: balance,
+      chainId: getCurrentChainId(state),
+      tokens: getTokens(state),
+      gasPrice,
+      gasLimit,
+      gasTotal: addHexPrefix(calcGasTotal(gasLimit, gasPrice)),
+    };
+  },
+);
+
+export const initialState = {
+  // which stage of the send flow is the user on
+  stage: SEND_STAGES.UNINITIALIZED,
+  // status of the send slice, either VALID or INVALID
+  status: SEND_STATUSES.VALID,
+  account: {
+    // from account address, defaults to selected account. will be the account
+    // the original transaction was sent from in the case of the EDIT stage
+    address: null,
+    // balance of the from account
+    balance: '0x0',
+  },
+  gas: {
+    // indicate whether the gas estimate is loading
+    isGasEstimateLoading: true,
+    // has the user set custom gas in the custom gas modal
+    isCustomGasSet: false,
+    // maximum gas needed for tx
+    gasLimit: '0x0',
+    // price in gwei to pay per gas
+    gasPrice: '0x0',
+    // maximum total price in gwei to pay
+    gasTotal: '0x0',
+    // minimum supported gasLimit
+    minimumGasLimit: GAS_LIMITS.SIMPLE,
+    // error to display for gas fields
+    error: null,
+  },
+  amount: {
+    // The mode to use when determining new amounts. For INPUT mode the
+    // provided payload is always used. For MAX it is calculated based on avail
+    // asset balance
+    mode: AMOUNT_MODES.INPUT,
+    // Current value of the transaction, how much of the asset are we sending
+    value: '0x0',
+    // error to display for amount field
+    error: null,
+  },
+  asset: {
+    // type can be either NATIVE such as ETH or TOKEN for ERC20 tokens
+    type: ASSET_TYPES.NATIVE,
+    // the balance the user holds at the from address for this asset
+    balance: '0x0',
+    // In the case of tokens, the address, decimals and symbol of the token
+    // will be included in details
+    details: null,
+  },
+  draftTransaction: {
+    // The metamask internal id of the transaction. Only populated in the EDIT
+    // stage.
+    id: null,
+    // The hex encoded data provided by the user who has enabled hex data field
+    // in advanced settings
+    userInputHexData: null,
+    // The txParams that should be submitted to the network once this
+    // transaction is confirmed. This object is computed on every write to the
+    // slice of fields that would result in the txParams changing
+    txParams: {
+      to: '',
+      from: '',
+      data: undefined,
+      value: '0x0',
+      gas: '0x0',
+      gasPrice: '0x0',
+    },
+  },
+  recipient: {
+    // Defines which mode to use for searching for matches in the input field
+    mode: RECIPIENT_SEARCH_MODES.CONTACT_LIST,
+    // Partial, not yet validated, entry into the address field. Used to share
+    // user input amongst the AddRecipient and EnsInput components.
+    userInput: '',
+    // The address of the recipient
+    address: '',
+    // The nickname stored in the user's address book for the recipient address
+    nickname: '',
+    // Error to display on the address field
+    error: null,
+    // Warning to display on the address field
+    warning: null,
+  },
+};
+
+const slice = createSlice({
+  name,
+  initialState,
+  reducers: {
+    /**
+     * update current amount.value in state and run post update validation of
+     * the amount field and the send state. Recomputes the draftTransaction
+     */
+    updateSendAmount: (state, action) => {
+      state.amount.value = addHexPrefix(action.payload);
+      // Once amount has changed, validate the field
+      slice.caseReducers.validateAmountField(state);
+      if (state.asset.type === ASSET_TYPES.NATIVE) {
+        // if sending the native asset the amount being sent will impact the
+        // gas field as well because the gas validation takes into
+        // consideration the available balance minus amount sent before
+        // checking if there is enough left to cover the gas fee.
+        slice.caseReducers.validateGasField(state);
+      }
+      // validate send state
+      slice.caseReducers.validateSendState(state);
+    },
+    /**
+     * computes the maximum amount of asset that can be sent and then calls
+     * the updateSendAmount action above with the computed value, which will
+     * revalidate the field and form and recomputes the draftTransaction
+     */
+    updateAmountToMax: (state) => {
+      let amount = '0x0';
+      if (state.asset.type === ASSET_TYPES.TOKEN) {
+        const decimals = state.asset.details?.decimals ?? 0;
+        const multiplier = Math.pow(10, Number(decimals));
+
+        amount = multiplyCurrencies(state.asset.balance, multiplier, {
+          toNumericBase: 'hex',
+          multiplicandBase: 16,
+          multiplierBase: 10,
+        });
+      } else {
+        amount = subtractCurrencies(
+          addHexPrefix(state.asset.balance),
+          addHexPrefix(state.gas.gasTotal),
+          {
+            toNumericBase: 'hex',
+            aBase: 16,
+            bBase: 16,
+          },
+        );
+      }
+      slice.caseReducers.updateSendAmount(state, {
+        payload: amount,
+      });
+      // draftTransaction update happens in updateSendAmount
+    },
+    /**
+     * updates the draftTransaction.userInputHexData state key and then
+     * recomputes the draftTransaction if the user is currently sending the
+     * native asset. When sending ERC20 assets, this is unnecessary because the
+     * hex data used in the transaction will be that for interacting with the
+     * ERC20 contract
+     */
+    updateUserInputHexData: (state, action) => {
+      state.draftTransaction.userInputHexData = action.payload;
+      if (state.asset.type === ASSET_TYPES.NATIVE) {
+        slice.caseReducers.updateDraftTransaction(state);
+      }
+    },
+    /**
+     * Initiates the edit transaction flow by setting the stage to 'EDIT' and
+     * then pulling the details of the previously submitted transaction from
+     * the action payload. It also computes a new draftTransaction that will be
+     * used when updating the transaction in the provider
+     */
+    editTransaction: (state, action) => {
+      state.stage = SEND_STAGES.EDIT;
+      state.gas.gasLimit = action.payload.gasLimit;
+      state.gas.gasPrice = action.payload.gasPrice;
+      state.amount.value = action.payload.amount;
+      state.gas.error = null;
+      state.amount.error = null;
+      state.recipient.address = action.payload.address;
+      state.recipient.nickname = action.payload.nickname;
+      state.draftTransaction.id = action.payload.id;
+      state.draftTransaction.txParams.from = action.payload.from;
+      slice.caseReducers.updateDraftTransaction(state);
+    },
+    /**
+     * gasTotal is computed based on gasPrice and gasLimit and set in state
+     * recomputes the maximum amount if the current amount mode is 'MAX' and
+     * sending the native token. ERC20 assets max amount is unaffected by
+     * gasTotal so does not need to be recomputed. Finally, validates the gas
+     * field and send state, then updates the draft transaction.
+     */
+    calculateGasTotal: (state) => {
+      state.gas.gasTotal = addHexPrefix(
+        calcGasTotal(state.gas.gasLimit, state.gas.gasPrice),
+      );
+      if (
+        state.amount.mode === AMOUNT_MODES.MAX &&
+        state.asset.type === ASSET_TYPES.NATIVE
+      ) {
+        slice.caseReducers.updateAmountToMax(state);
+      }
+      slice.caseReducers.validateAmountField(state);
+      slice.caseReducers.validateGasField(state);
+      // validate send state
+      slice.caseReducers.validateSendState(state);
+    },
+    /**
+     * sets the provided gasLimit in state and then recomputes the gasTotal.
+     */
+    updateGasLimit: (state, action) => {
+      state.gas.gasLimit = addHexPrefix(action.payload);
+      slice.caseReducers.calculateGasTotal(state);
+    },
+    /**
+     * sets the provided gasPrice in state and then recomputes the gasTotal
+     */
+    updateGasPrice: (state, action) => {
+      state.gas.gasPrice = addHexPrefix(action.payload);
+      slice.caseReducers.calculateGasTotal(state);
+    },
+    /**
+     * sets the amount mode to the provided value as long as it is one of the
+     * supported modes (MAX|INPUT)
+     */
+    updateAmountMode: (state, action) => {
+      if (Object.values(AMOUNT_MODES).includes(action.payload)) {
+        state.amount.mode = action.payload;
+      }
+    },
+    updateAsset: (state, action) => {
+      state.asset.type = action.payload.type;
+      state.asset.balance = action.payload.balance;
+      if (state.asset.type === ASSET_TYPES.TOKEN) {
+        state.asset.details = action.payload.details;
+      } else {
+        // clear the details object when sending native currency
+        state.asset.details = null;
+        if (state.recipient.error === CONTRACT_ADDRESS_ERROR) {
+          // Errors related to sending tokens to their own contract address
+          // are no longer valid when sending native currency.
+          state.recipient.error = null;
+        }
+
+        if (state.recipient.warning === KNOWN_RECIPIENT_ADDRESS_WARNING) {
+          // Warning related to sending tokens to a known contract address
+          // are no longer valid when sending native currency.
+          state.recipient.warning = null;
+        }
+      }
+      // if amount mode is MAX update amount to max of new asset, otherwise set
+      // to zero. This will revalidate the send amount field.
+      if (state.amount.mode === AMOUNT_MODES.MAX) {
+        slice.caseReducers.updateAmountToMax(state);
+      } else {
+        slice.caseReducers.updateSendAmount(state, { payload: '0x0' });
+      }
+      // validate send state
+      slice.caseReducers.validateSendState(state);
+    },
+    updateRecipient: (state, action) => {
+      state.recipient.error = null;
+      state.recipient.userInput = '';
+      state.recipient.address = action.payload.address ?? '';
+      state.recipient.nickname = action.payload.nickname ?? '';
+
+      if (state.recipient.address === '') {
+        // If address is null we are clearing the recipient and must return
+        // to the ADD_RECIPIENT stage.
+        state.stage = SEND_STAGES.ADD_RECIPIENT;
+      } else {
+        // if and address is provided and an id exists on the draft transaction,
+        // we progress to the EDIT stage, otherwise we progress to the DRAFT
+        // stage. We also reset the search mode for recipient search.
+        state.stage =
+          state.draftTransaction.id === null
+            ? SEND_STAGES.DRAFT
+            : SEND_STAGES.EDIT;
+        state.recipient.mode = RECIPIENT_SEARCH_MODES.CONTACT_LIST;
+      }
+
+      // validate send state
+      slice.caseReducers.validateSendState(state);
+    },
+    updateDraftTransaction: (state) => {
+      // We keep a copy of txParams in state that could be submitted to the
+      // network if the form state is valid.
+      if (state.status === SEND_STATUSES.VALID) {
+        state.draftTransaction.txParams.from = state.account.address;
+        switch (state.asset.type) {
+          case ASSET_TYPES.TOKEN:
+            // 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
+            // amount.
+            state.draftTransaction.txParams.to = state.asset.details.address;
+            state.draftTransaction.txParams.value = '0x0';
+            state.draftTransaction.txParams.gas = state.gas.gasLimit;
+            state.draftTransaction.txParams.gasPrice = state.gas.gasPrice;
+            state.draftTransaction.txParams.data = generateTokenTransferData({
+              toAddress: state.recipient.address,
+              amount: state.amount.value,
+              sendToken: state.asset.details,
+            });
+            break;
+          case ASSET_TYPES.NATIVE:
+          default:
+            // When sending native currency the to and value fields use the
+            // recipient and amount values and the data key is either null or
+            // populated with the user input provided in hex field.
+            state.draftTransaction.txParams.to = state.recipient.address;
+            state.draftTransaction.txParams.value = state.amount.value;
+            state.draftTransaction.txParams.gas = state.gas.gasLimit;
+            state.draftTransaction.txParams.gasPrice = state.gas.gasPrice;
+            state.draftTransaction.txParams.data =
+              state.draftTransaction.userInputHexData ?? undefined;
+        }
+      }
+    },
+    useDefaultGas: (state) => {
+      // Show the default gas price/limit fields in the send page
+      state.gas.isCustomGasSet = false;
+    },
+    useCustomGas: (state) => {
+      // Show the gas fees set in the custom gas modal (state.gas.customData)
+      state.gas.isCustomGasSet = true;
+    },
+    updateRecipientUserInput: (state, action) => {
+      // Update the value in state to match what the user is typing into the
+      // input field
+      state.recipient.userInput = action.payload;
+    },
+    validateRecipientUserInput: (state, action) => {
+      const { asset, recipient } = state;
+
+      if (
+        recipient.mode === RECIPIENT_SEARCH_MODES.MY_ACCOUNTS ||
+        recipient.userInput === '' ||
+        recipient.userInput === null
+      ) {
+        recipient.error = null;
+        recipient.warning = null;
+      } else {
+        const isSendingToken = asset.type === ASSET_TYPES.TOKEN;
+        const { chainId, tokens } = action.payload;
+        if (
+          isBurnAddress(recipient.userInput) ||
+          (!isValidHexAddress(recipient.userInput, {
+            mixedCaseUseChecksum: true,
+          }) &&
+            !isValidDomainName(recipient.userInput))
+        ) {
+          recipient.error = isDefaultMetaMaskChain(chainId)
+            ? INVALID_RECIPIENT_ADDRESS_ERROR
+            : INVALID_RECIPIENT_ADDRESS_NOT_ETH_NETWORK_ERROR;
+        } else if (
+          isSendingToken &&
+          isOriginContractAddress(recipient.userInput, asset.details.address)
+        ) {
+          recipient.error = CONTRACT_ADDRESS_ERROR;
+        } else {
+          recipient.error = null;
+        }
+
+        if (
+          isSendingToken &&
+          (toChecksumAddress(recipient.userInput) in contractMap ||
+            checkExistingAddresses(recipient.userInput, tokens))
+        ) {
+          recipient.warning = KNOWN_RECIPIENT_ADDRESS_WARNING;
+        } else {
+          recipient.warning = null;
+        }
+      }
+    },
+    updateRecipientSearchMode: (state, action) => {
+      state.recipient.userInput = '';
+      state.recipient.mode = action.payload;
+    },
+    resetSendState: () => initialState,
+    validateAmountField: (state) => {
+      switch (true) {
+        // set error to INSUFFICIENT_FUNDS_ERROR if the account balance is lower
+        // than the total price of the transaction inclusive of gas fees.
+        case state.asset.type === ASSET_TYPES.NATIVE &&
+          !isBalanceSufficient({
+            amount: state.amount.value,
+            balance: state.asset.balance,
+            gasTotal: state.gas.gasTotal ?? '0x0',
+          }):
+          state.amount.error = INSUFFICIENT_FUNDS_ERROR;
+          break;
+        // set error to INSUFFICIENT_FUNDS_ERROR if the token balance is lower
+        // than the amount of token the user is attempting to send.
+        case state.asset.type === ASSET_TYPES.TOKEN &&
+          !isTokenBalanceSufficient({
+            tokenBalance: state.asset.balance ?? '0x0',
+            amount: state.amount.value,
+            decimals: state.asset.details.decimals,
+          }):
+          state.amount.error = INSUFFICIENT_TOKENS_ERROR;
+          break;
+        // if the amount is negative, set error to NEGATIVE_ETH_ERROR
+        // TODO: change this to NEGATIVE_ERROR and remove the currency bias.
+        case conversionGreaterThan(
+          { value: 0, fromNumericBase: 'dec' },
+          { value: state.amount.value, fromNumericBase: 'hex' },
+        ):
+          state.amount.error = NEGATIVE_ETH_ERROR;
+          break;
+        // If none of the above are true, set error to null
+        default:
+          state.amount.error = null;
+      }
+    },
+    validateGasField: (state) => {
+      // Checks if the user has enough funds to cover the cost of gas, always
+      // uses the native currency and does not take into account the amount
+      // being sent. If the user has enough to cover cost of gas but not gas
+      // + amount then the error will be displayed on the amount field.
+      const insufficientFunds = !isBalanceSufficient({
+        amount:
+          state.asset.type === ASSET_TYPES.NATIVE ? state.amount.value : '0x0',
+        balance: state.account.balance,
+        gasTotal: state.gas.gasTotal ?? '0x0',
+      });
+
+      state.gas.error = insufficientFunds ? INSUFFICIENT_FUNDS_ERROR : null;
+    },
+    validateSendState: (state) => {
+      switch (true) {
+        // 1 + 2. State is invalid when either gas or amount fields have errors
+        // 3. State is invalid if asset type is a token and the token details
+        //  are unknown.
+        // 4. State is invalid if no recipient has been added
+        // 5. State is invalid if the send state is uninitialized
+        // 6. State is invalid if gas estimates are loading
+        // 7. State is invalid if gasLimit is less than the minimumGasLimit
+        // 8. State is invalid if the selected asset is a ERC721
+        case Boolean(state.amount.error):
+        case Boolean(state.gas.error):
+        case state.asset.type === ASSET_TYPES.TOKEN &&
+          state.asset.details === null:
+        case state.stage === SEND_STAGES.ADD_RECIPIENT:
+        case state.stage === SEND_STAGES.UNINITIALIZED:
+        case state.gas.isGasEstimateLoading:
+        case new BigNumber(state.gas.gasLimit, 16).lessThan(
+          new BigNumber(state.gas.minimumGasLimit),
+        ):
+          state.status = SEND_STATUSES.INVALID;
+          break;
+        case state.asset.type === ASSET_TYPES.TOKEN &&
+          state.asset.details.isERC721 === true:
+          state.state = SEND_STATUSES.INVALID;
+          break;
+        default:
+          state.status = SEND_STATUSES.VALID;
+          // Recompute the draftTransaction object
+          slice.caseReducers.updateDraftTransaction(state);
+      }
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(QR_CODE_DETECTED, (state, action) => {
+        // When data is received from the QR Code Scanner we set the recipient
+        // as long as a valid address can be pulled from the data. If an
+        // address is pulled but it is invalid, we display an error.
+        const qrCodeData = action.value;
+        if (qrCodeData) {
+          if (qrCodeData.type === 'address') {
+            const scannedAddress = qrCodeData.values.address.toLowerCase();
+            if (
+              isValidHexAddress(scannedAddress, { allowNonPrefixed: false })
+            ) {
+              if (state.recipient.address !== scannedAddress) {
+                slice.caseReducers.updateRecipient(state, {
+                  payload: { address: scannedAddress },
+                });
+              }
+            } else {
+              state.recipient.error = INVALID_RECIPIENT_ADDRESS_ERROR;
+            }
+          }
+        }
+      })
+      .addCase(SELECTED_ACCOUNT_CHANGED, (state, action) => {
+        // If we are on the edit flow the account we are keyed into will be the
+        // original 'from' account, which may differ from the selected account
+        if (state.stage !== SEND_STAGES.EDIT) {
+          // This event occurs when the user selects a new account from the
+          // account menu, or the currently active account's balance updates.
+          state.account.balance = action.payload.account.balance;
+          state.account.address = action.payload.account.address;
+          // We need to update the asset balance if the asset is the native
+          // network asset. Once we update the balance we recompute error state.
+          if (state.asset.type === ASSET_TYPES.NATIVE) {
+            state.asset.balance = action.payload.account.balance;
+          }
+          slice.caseReducers.validateAmountField(state);
+          slice.caseReducers.validateGasField(state);
+          slice.caseReducers.validateSendState(state);
+        }
+      })
+      .addCase(ACCOUNT_CHANGED, (state, action) => {
+        // If we are on the edit flow then we need to watch for changes to the
+        // current account.address in state and keep balance updated
+        // appropriately
+        if (
+          state.stage === SEND_STAGES.EDIT &&
+          action.payload.account.address === state.account.address
+        ) {
+          // This event occurs when the user's account details update due to
+          // background state changes. If the account that is being updated is
+          // the current from account on the edit flow we need to update
+          // the balance for the account and revalidate the send state.
+          state.account.balance = action.payload.account.balance;
+          // We need to update the asset balance if the asset is the native
+          // network asset. Once we update the balance we recompute error state.
+          if (state.asset.type === ASSET_TYPES.NATIVE) {
+            state.asset.balance = action.payload.account.balance;
+          }
+          slice.caseReducers.validateAmountField(state);
+          slice.caseReducers.validateGasField(state);
+          slice.caseReducers.validateSendState(state);
+        }
+      })
+      .addCase(ADDRESS_BOOK_UPDATED, (state, action) => {
+        // When the address book updates from background state changes we need
+        // to check to see if an entry exists for the current address or if the
+        // entry changed.
+        const { addressBook } = action.payload;
+        if (addressBook[state.recipient.address]?.name) {
+          state.recipient.nickname = addressBook[state.recipient.address].name;
+        }
+      })
+      .addCase(initializeSendState.pending, (state) => {
+        // when we begin initializing state, which can happen when switching
+        // chains even after loading the send flow, we set
+        // gas.isGasEstimateLoading as initialization will trigger a fetch
+        // for gasPrice estimates.
+        state.gas.isGasEstimateLoading = true;
+      })
+      .addCase(initializeSendState.fulfilled, (state, action) => {
+        // writes the computed initialized state values into the slice and then
+        // calculates slice validity using the caseReducers.
+        state.account.address = action.payload.address;
+        state.account.balance = action.payload.nativeBalance;
+        state.asset.balance = action.payload.assetBalance;
+        state.gas.gasLimit = action.payload.gasLimit;
+        state.gas.gasPrice = action.payload.gasPrice;
+        state.gas.gasTotal = action.payload.gasTotal;
+        if (state.stage !== SEND_STAGES.UNINITIALIZED) {
+          slice.caseReducers.validateRecipientUserInput(state, {
+            payload: {
+              chainId: action.payload.chainId,
+              tokens: action.payload.tokens,
+            },
+          });
+        }
+        state.stage =
+          state.stage === SEND_STAGES.UNINITIALIZED
+            ? SEND_STAGES.ADD_RECIPIENT
+            : state.stage;
+        slice.caseReducers.validateAmountField(state);
+        slice.caseReducers.validateGasField(state);
+        slice.caseReducers.validateSendState(state);
+      })
+      .addCase(computeEstimatedGasLimit.pending, (state) => {
+        // When we begin to fetch gasLimit we should indicate we are loading
+        // a gas estimate.
+        state.gas.isGasEstimateLoading = true;
+      })
+      .addCase(computeEstimatedGasLimit.fulfilled, (state, action) => {
+        // When we receive a new gasLimit from the computeEstimatedGasLimit
+        // thunk we need to update our gasLimit in the slice. We call into the
+        // caseReducer updateGasLimit to tap into the appropriate follow up
+        // checks and gasTotal calculation. First set isGasEstimateLoading to
+        // false.
+        state.gas.isGasEstimateLoading = false;
+        if (action.payload?.gasLimit) {
+          slice.caseReducers.updateGasLimit(state, {
+            payload: action.payload.gasLimit,
+          });
+        }
+      })
+      .addCase(SET_BASIC_GAS_ESTIMATE_DATA, (state, action) => {
+        // When we receive a new gasPrice via the gas duck we need to update
+        // the gasPrice in our slice. We call into the caseReducer
+        // updateGasPrice to also tap into the appropriate follow up checks
+        // and gasTotal calculation.
+        slice.caseReducers.updateGasPrice(state, {
+          payload: getGasPriceInHexWei(action.value.average),
+        });
+      })
+      .addCase(BASIC_GAS_ESTIMATE_STATUS, (state, action) => {
+        // When we fetch gas prices we should temporarily set the form invalid
+        // Once the price updates we get that value in the
+        // SET_BASIC_GAS_ESTIMATE_DATA extraReducer above. Finally as long as
+        // the state is 'READY' we will revalidate the form.
+        switch (action.value) {
+          case BASIC_ESTIMATE_STATES.FAILED:
+            state.status = SEND_STATUSES.INVALID;
+            state.gas.isGasEstimateLoading = true;
+            break;
+          case BASIC_ESTIMATE_STATES.LOADING:
+            state.status = SEND_STATUSES.INVALID;
+            state.gas.isGasEstimateLoading = true;
+            break;
+          case BASIC_ESTIMATE_STATES.READY:
+          default:
+            state.gas.isGasEstimateLoading = false;
+            slice.caseReducers.validateSendState(state);
+        }
+      });
+  },
+});
+
+const { actions, reducer } = slice;
+
+export default reducer;
+
+const {
+  useDefaultGas,
+  useCustomGas,
+  updateGasLimit,
+  updateGasPrice,
+  resetSendState,
+  validateRecipientUserInput,
+  updateRecipientSearchMode,
+} = actions;
+
+export {
+  useDefaultGas,
+  useCustomGas,
+  updateGasLimit,
+  updateGasPrice,
+  resetSendState,
+};
+
+// Action Creators
+
+/**
+ * Updates the amount the user intends to send and performs side effects.
+ * 1. If the current mode is MAX change to INPUT
+ * 2. If sending a token, recompute the gasLimit estimate
+ * @param {string} amount - hex string representing value
+ * @returns {void}
+ */
+export function updateSendAmount(amount) {
+  return async (dispatch, getState) => {
+    await dispatch(actions.updateSendAmount(amount));
+    const state = getState();
+    if (state.send.amount.mode === AMOUNT_MODES.MAX) {
+      await dispatch(actions.updateAmountMode(AMOUNT_MODES.INPUT));
+    }
+    if (state.send.asset.type === ASSET_TYPES.TOKEN) {
+      await dispatch(computeEstimatedGasLimit());
+    }
+  };
+}
+
+/**
+ * updates the asset to send to one of NATIVE or TOKEN and ensures that the
+ * asset balance is set. If sending a TOKEN also updates the asset details
+ * object with the appropriate ERC20 details including address, symbol and
+ * decimals.
+ * @param {Object} payload - action payload
+ * @param {string} payload.type - type of asset to send
+ * @param {Object} [payload.details] - ERC20 details if sending TOKEN asset
+ * @param {string} [payload.details.address] - contract address for ERC20
+ * @param {string} [payload.details.decimals] - Number of token decimals
+ * @param {string} [payload.details.symbol] - asset symbol to display
+ * @returns {void}
+ */
+export function updateSendAsset({ type, details }) {
+  return async (dispatch, getState) => {
+    const state = getState();
+    let { balance } = state.send.asset;
+    if (type === ASSET_TYPES.TOKEN) {
+      // if changing to a token, get the balance from the network. The asset
+      // overview page and asset list on the wallet overview page contain
+      // send buttons that call this method before initialization occurs.
+      // When this happens we don't yet have an account.address so default to
+      // the currently active account. In addition its possible for the balance
+      // check to take a decent amount of time, so we display a loading
+      // indication so that that immediate feedback is displayed to the user.
+      await dispatch(showLoadingIndication());
+      balance = await getERC20Balance(
+        details,
+        state.send.account.address ?? getSelectedAddress(state),
+      );
+      if (details && details.isERC721 === undefined) {
+        const updatedAssetDetails = await updateTokenType(details.address);
+        details.isERC721 = updatedAssetDetails.isERC721;
+      }
+
+      await dispatch(hideLoadingIndication());
+    } else {
+      // if changing to native currency, get it from the account key in send
+      // state which is kept in sync when accounts change.
+      balance = state.send.account.balance;
+    }
+    // update the asset in state which will re-run amount and gas validation
+    await dispatch(actions.updateAsset({ type, details, balance }));
+    await dispatch(computeEstimatedGasLimit());
+  };
+}
+
+/**
+ * This method is for usage when validating user input so that validation
+ * is only run after a delay in typing of 300ms. Usage at callsites requires
+ * passing in both the dispatch method and the payload to dispatch, which makes
+ * it only applicable for use within action creators.
+ */
+const debouncedValidateRecipientUserInput = debounce((dispatch, payload) => {
+  dispatch(validateRecipientUserInput(payload));
+}, 300);
+
+/**
+ * This method is called to update the user's input into the ENS input field.
+ * Once the field is updated, the field will be validated using a debounced
+ * version of the validateRecipientUserInput action. This way validation only
+ * occurs once the user has stopped typing.
+ * @param {string} userInput - the value that the user is typing into the field
+ * @returns {void}
+ */
+export function updateRecipientUserInput(userInput) {
+  return async (dispatch, getState) => {
+    await dispatch(actions.updateRecipientUserInput(userInput));
+    const state = getState();
+    const chainId = getCurrentChainId(state);
+    const tokens = getTokens(state);
+    debouncedValidateRecipientUserInput(dispatch, { chainId, tokens });
+  };
+}
+
+export function useContactListForRecipientSearch() {
+  return (dispatch) => {
+    dispatch(updateRecipientSearchMode(RECIPIENT_SEARCH_MODES.CONTACT_LIST));
+  };
+}
+
+export function useMyAccountsForRecipientSearch() {
+  return (dispatch) => {
+    dispatch(updateRecipientSearchMode(RECIPIENT_SEARCH_MODES.MY_ACCOUNTS));
+  };
+}
+
+/**
+ * Updates the recipient in state based on the input provided, and then will
+ * recompute gas limit when sending a TOKEN asset type. Changing the recipient
+ * address results in hex data changing because the recipient address is
+ * encoded in the data instead of being in the 'to' field. The to field in a
+ * token send will always be the token contract address.
+ * @param {Object} recipient - Recipient information
+ * @param {string} recipient.address - hex address to send the transaction to
+ * @param {string} [recipient.nickname] - Alias for the address to display
+ *  to the user
+ * @returns {void}
+ */
+export function updateRecipient({ address, nickname }) {
+  return async (dispatch, getState) => {
+    await dispatch(actions.updateRecipient({ address, nickname }));
+    const state = getState();
+    if (state.send.asset.type === ASSET_TYPES.TOKEN) {
+      await dispatch(computeEstimatedGasLimit());
+    }
+  };
+}
+
+/**
+ * Clears out the recipient user input, ENS resolution and recipient validation
+ * @returns {void}
+ */
+export function resetRecipientInput() {
+  return async (dispatch) => {
+    await dispatch(updateRecipientUserInput(''));
+    await dispatch(updateRecipient({ address: '', nickname: '' }));
+    await dispatch(resetResolution());
+    await dispatch(validateRecipientUserInput());
+  };
+}
+
+/**
+ * When a user has enabled hex data field in advanced settings they will be
+ * able to supply hex data on a transaction. This method updates the user
+ * supplied data. Note, when sending native assets this will result in
+ * recomputing estimated gasLimit. When sending a ERC20 asset this is not done
+ * because the data sent in the transaction will be determined by the asset,
+ * recipient and value, NOT what the user has supplied.
+ * @param {string} hexData - hex encoded string representing transaction data
+ * @returns {void}
+ */
+export function updateSendHexData(hexData) {
+  return async (dispatch, getState) => {
+    await dispatch(actions.updateUserInputHexData(hexData));
+    const state = getState();
+    if (state.send.asset.type === ASSET_TYPES.NATIVE) {
+      await dispatch(computeEstimatedGasLimit());
+    }
+  };
+}
+
+/**
+ * Toggles the amount.mode between INPUT and MAX modes.
+ * As a result, the amount.value will change to either '0x0' when moving from
+ * MAX to INPUT, or to the maximum allowable amount based on current asset when
+ * moving from INPUT to MAX.
+ * @returns {void}
+ */
+export function toggleSendMaxMode() {
+  return async (dispatch, getState) => {
+    const state = getState();
+    if (state.send.amount.mode === AMOUNT_MODES.MAX) {
+      await dispatch(actions.updateAmountMode(AMOUNT_MODES.INPUT));
+      await dispatch(actions.updateSendAmount('0x0'));
+    } else {
+      await dispatch(actions.updateAmountMode(AMOUNT_MODES.MAX));
+      await dispatch(actions.updateAmountToMax());
+    }
+  };
+}
+
+/**
+ * Signs a transaction or updates a transaction in state if editing.
+ * This method is called when a user clicks the next button in the footer of
+ * the send page, signaling that a transaction should be executed. This method
+ * will create the transaction in state (by way of the various global provider
+ * constructs) which will eventually (and fairly quickly from user perspective)
+ * result in a confirmation window being displayed for the transaction.
+ * @returns {void}
+ */
+export function signTransaction() {
+  return async (dispatch, getState) => {
+    const state = getState();
+    const {
+      asset,
+      stage,
+      draftTransaction: { id, txParams },
+      recipient: { address },
+      amount: { value },
+    } = state[name];
+    if (stage === SEND_STAGES.EDIT) {
+      // When dealing with the edit flow there is already a transaction in
+      // state that we must update, this branch is responsible for that logic.
+      // We first must grab the previous transaction object from state and then
+      // merge in the modified txParams. Once the transaction has been modified
+      // we can send that to the background to update the transaction in state.
+      const unapprovedTxs = getUnapprovedTxs(state);
+      const unapprovedTx = unapprovedTxs[id];
+      const editingTx = {
+        ...unapprovedTx,
+        txParams: Object.assign(unapprovedTx.txParams, txParams),
+      };
+      dispatch(updateTransaction(editingTx));
+    } else if (asset.type === ASSET_TYPES.TOKEN) {
+      // When sending a token transaction we have to the token.transfer method
+      // on the token contract to construct the transaction. This results in
+      // the proper transaction data and properties being set and a new
+      // transaction being added to background state. Once the new transaction
+      // is added to state a subsequent confirmation will be queued.
+      try {
+        const token = global.eth.contract(abi).at(asset.details.address);
+        token.transfer(address, value, {
+          ...txParams,
+          to: undefined,
+          data: undefined,
+        });
+        dispatch(showConfTxPage());
+        dispatch(hideLoadingIndication());
+      } catch (error) {
+        dispatch(hideLoadingIndication());
+        dispatch(displayWarning(error.message));
+      }
+    } else {
+      // When sending a native asset we use the ethQuery.sendTransaction method
+      // which will result in the transaction being added to background state
+      // and a subsequent confirmation will be queued.
+      global.ethQuery.sendTransaction(txParams, (err) => {
+        if (err) {
+          dispatch(displayWarning(err.message));
+        }
+      });
+      dispatch(showConfTxPage());
+    }
+  };
+}
+
+export function editTransaction(
+  assetType,
+  transactionId,
+  tokenData,
+  assetDetails,
+) {
+  return async (dispatch, getState) => {
+    const state = getState();
+    const unapprovedTransactions = getUnapprovedTxs(state);
+    const transaction = unapprovedTransactions[transactionId];
+    const { txParams } = transaction;
+    if (assetType === ASSET_TYPES.NATIVE) {
+      const {
+        from,
+        gas: gasLimit,
+        gasPrice,
+        to: address,
+        value: amount,
+      } = txParams;
+      const nickname = getAddressBookEntry(state, address)?.name ?? '';
+      await dispatch(
+        actions.editTransaction({
+          id: transactionId,
+          gasLimit,
+          gasPrice,
+          from,
+          amount,
+          address,
+          nickname,
+        }),
+      );
+    } else if (!tokenData || !assetDetails) {
+      throw new Error(
+        `send/editTransaction dispatched with assetType 'TOKEN' but missing assetData or assetDetails parameter`,
+      );
+    } else {
+      const { from, to: tokenAddress, gas: gasLimit, gasPrice } = txParams;
+      const tokenAmountInDec = getTokenValueParam(tokenData);
+      const address = getTokenAddressParam(tokenData);
+      const nickname = getAddressBookEntry(state, address)?.name ?? '';
+
+      const tokenAmountInHex = addHexPrefix(
+        conversionUtil(tokenAmountInDec, {
+          fromNumericBase: 'dec',
+          toNumericBase: 'hex',
+        }),
+      );
+
+      await dispatch(
+        updateSendAsset({
+          type: ASSET_TYPES.TOKEN,
+          details: { ...assetDetails, address: tokenAddress },
+        }),
+      );
+
+      await dispatch(
+        actions.editTransaction({
+          id: transactionId,
+          gasLimit,
+          gasPrice,
+          from,
+          amount: tokenAmountInHex,
+          address,
+          nickname,
+        }),
+      );
+    }
+  };
+}
+
+// Selectors
+
+// Gas selectors
+export function getGasLimit(state) {
+  return state[name].gas.gasLimit;
+}
+
+export function getGasPrice(state) {
+  return state[name].gas.gasPrice;
+}
+
+export function getGasTotal(state) {
+  return state[name].gas.gasTotal;
+}
+
+export function gasFeeIsInError(state) {
+  return Boolean(state[name].gas.error);
+}
+
+export function getMinimumGasLimitForSend(state) {
+  return state[name].gas.minimumGasLimit;
+}
+
+export function getGasInputMode(state) {
+  const isMainnet = getIsMainnet(state);
+  const showAdvancedGasFields = getAdvancedInlineGasShown(state);
+  if (state[name].gas.isCustomGasSet) {
+    return GAS_INPUT_MODES.CUSTOM;
+  }
+  if ((!isMainnet && !process.env.IN_TEST) || showAdvancedGasFields) {
+    return GAS_INPUT_MODES.INLINE;
+  }
+  return GAS_INPUT_MODES.BASIC;
+}
+
+// Asset Selectors
+
+export function getSendAsset(state) {
+  return state[name].asset;
+}
+
+export function getSendAssetAddress(state) {
+  return getSendAsset(state)?.details?.address;
+}
+
+export function getIsAssetSendable(state) {
+  if (state[name].asset.type === ASSET_TYPES.NATIVE) {
+    return true;
+  }
+  return state[name].asset.details.isERC721 === false;
+}
+
+// Amount Selectors
+export function getSendAmount(state) {
+  return state[name].amount.value;
+}
+
+export function getIsBalanceInsufficient(state) {
+  return state[name].gas.error === INSUFFICIENT_FUNDS_ERROR;
+}
+export function getSendMaxModeState(state) {
+  return state[name].amount.mode === AMOUNT_MODES.MAX;
+}
+
+export function getSendHexData(state) {
+  return state[name].draftTransaction.userInputHexData;
+}
+
+export function sendAmountIsInError(state) {
+  return Boolean(state[name].amount.error);
+}
+
+// Recipient Selectors
+
+export function getSendTo(state) {
+  return state[name].recipient.address;
+}
+
+export function getIsUsingMyAccountForRecipientSearch(state) {
+  return state[name].recipient.mode === RECIPIENT_SEARCH_MODES.MY_ACCOUNTS;
+}
+
+export function getRecipientUserInput(state) {
+  return state[name].recipient.userInput;
+}
+
+export function getRecipient(state) {
+  return state[name].recipient;
+}
+
+// Overall validity and stage selectors
+
+export function getSendErrors(state) {
+  return {
+    gasFee: state.send.gas.error,
+    amount: state.send.amount.error,
+  };
+}
+
+export function isSendStateInitialized(state) {
+  return state[name].stage !== SEND_STAGES.UNINITIALIZED;
+}
+
+export function isSendFormInvalid(state) {
+  return state[name].status === SEND_STATUSES.INVALID;
+}
+
+export function getSendStage(state) {
+  return state[name].stage;
+}
diff --git a/ui/ducks/send/send.test.js b/ui/ducks/send/send.test.js
new file mode 100644
index 000000000..b4918d01d
--- /dev/null
+++ b/ui/ducks/send/send.test.js
@@ -0,0 +1,1808 @@
+import sinon from 'sinon';
+import createMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import { ethers } from 'ethers';
+import {
+  CONTRACT_ADDRESS_ERROR,
+  INSUFFICIENT_FUNDS_ERROR,
+  INSUFFICIENT_TOKENS_ERROR,
+  INVALID_RECIPIENT_ADDRESS_ERROR,
+  KNOWN_RECIPIENT_ADDRESS_WARNING,
+  NEGATIVE_ETH_ERROR,
+} from '../../pages/send/send.constants';
+import { BASIC_ESTIMATE_STATES } from '../gas/gas.duck';
+import { RINKEBY_CHAIN_ID } from '../../../shared/constants/network';
+import { GAS_LIMITS } from '../../../shared/constants/gas';
+import { TRANSACTION_TYPES } from '../../../shared/constants/transaction';
+import sendReducer, {
+  initialState,
+  initializeSendState,
+  updateSendAmount,
+  updateSendAsset,
+  updateRecipientUserInput,
+  useContactListForRecipientSearch,
+  useMyAccountsForRecipientSearch,
+  updateRecipient,
+  resetRecipientInput,
+  updateSendHexData,
+  toggleSendMaxMode,
+  signTransaction,
+  SEND_STATUSES,
+  ASSET_TYPES,
+  SEND_STAGES,
+  AMOUNT_MODES,
+  RECIPIENT_SEARCH_MODES,
+  editTransaction,
+} from './send';
+
+const mockStore = createMockStore([thunk]);
+
+jest.mock('../../store/actions', () => {
+  const actual = jest.requireActual('../../store/actions');
+  return {
+    ...actual,
+    estimateGas: jest.fn(() => Promise.resolve('0x0')),
+    updateTokenType: jest.fn(() => Promise.resolve({ isERC721: false })),
+  };
+});
+
+jest.mock('./send', () => {
+  const actual = jest.requireActual('./send');
+  return {
+    __esModule: true,
+    ...actual,
+    getERC20Balance: jest.fn(() => '0x0'),
+  };
+});
+
+describe('Send Slice', () => {
+  describe('Reducers', () => {
+    describe('updateSendAmount', () => {
+      it('should', async () => {
+        const action = { type: 'send/updateSendAmount', payload: '0x1' };
+        const result = sendReducer(initialState, action);
+        expect(result.amount.value).toStrictEqual('0x1');
+      });
+    });
+
+    describe('updateAmountToMax', () => {
+      it('should calculate the max amount based off of the asset balance and gas total then updates send amount value', () => {
+        const maxAmountState = {
+          amount: {
+            value: '',
+          },
+          asset: {
+            balance: '0x56bc75e2d63100000', // 100000000000000000000
+          },
+          gas: {
+            gasLimit: '0x5208', // 21000
+            gasTotal: '0x1319718a5000', // 21000000000000
+            minimumGasLimit: '0x5208',
+          },
+        };
+
+        const state = { ...initialState, ...maxAmountState };
+        const action = { type: 'send/updateAmountToMax' };
+        const result = sendReducer(state, action);
+
+        expect(result.amount.value).toStrictEqual('0x56bc74b13f185b000'); // 99999979000000000000
+      });
+    });
+
+    describe('updateUserInputHexData', () => {
+      it('should', () => {
+        const action = {
+          type: 'send/updateUserInputHexData',
+          payload: 'TestData',
+        };
+        const result = sendReducer(initialState, action);
+
+        expect(result.draftTransaction.userInputHexData).toStrictEqual(
+          action.payload,
+        );
+      });
+    });
+
+    describe('updateGasLimit', () => {
+      const action = {
+        type: 'send/updateGasLimit',
+        payload: '0x5208', // 21000
+      };
+
+      it('should', () => {
+        const result = sendReducer(
+          {
+            ...initialState,
+            stage: SEND_STAGES.DRAFT,
+            gas: { ...initialState.gas, isGasEstimateLoading: false },
+          },
+          action,
+        );
+
+        expect(result.gas.gasLimit).toStrictEqual(action.payload);
+        expect(result.draftTransaction.txParams.gas).toStrictEqual(
+          action.payload,
+        );
+      });
+
+      it('should recalculate gasTotal', () => {
+        const gasState = {
+          ...initialState,
+          gas: {
+            gasLimit: '0x0',
+            gasPrice: '0x3b9aca00', // 1000000000
+          },
+        };
+
+        const result = sendReducer(gasState, action);
+
+        expect(result.gas.gasLimit).toStrictEqual(action.payload);
+        expect(result.gas.gasPrice).toStrictEqual(gasState.gas.gasPrice);
+        expect(result.gas.gasTotal).toStrictEqual('0x1319718a5000'); // 21000000000000
+      });
+    });
+
+    describe('updateGasPrice', () => {
+      const action = {
+        type: 'send/updateGasPrice',
+        payload: '0x3b9aca00', // 1000000000
+      };
+
+      it('should update gas price and update draft transaction with validated state', () => {
+        const validSendState = {
+          ...initialState,
+          stage: SEND_STAGES.DRAFT,
+          account: {
+            balance: '0x56bc75e2d63100000',
+          },
+          asset: {
+            balance: '0x56bc75e2d63100000',
+            type: ASSET_TYPES.NATIVE,
+          },
+          gas: {
+            isGasEstimateLoading: false,
+            gasTotal: '0x1319718a5000', // 21000000000000
+            gasLimit: '0x5208', // 21000
+            minimumGasLimit: '0x5208',
+          },
+        };
+
+        const result = sendReducer(validSendState, action);
+
+        expect(result.gas.gasPrice).toStrictEqual(action.payload);
+        expect(result.draftTransaction.txParams.gasPrice).toStrictEqual(
+          action.payload,
+        );
+      });
+
+      it('should recalculate gasTotal', () => {
+        const gasState = {
+          gas: {
+            gasLimit: '0x5208', // 21000,
+            gasPrice: '0x0',
+          },
+        };
+
+        const state = { ...initialState, ...gasState };
+        const result = sendReducer(state, action);
+
+        expect(result.gas.gasPrice).toStrictEqual(action.payload);
+        expect(result.gas.gasLimit).toStrictEqual(gasState.gas.gasLimit);
+        expect(result.gas.gasTotal).toStrictEqual('0x1319718a5000'); // 21000000000000
+      });
+    });
+
+    describe('updateAmountMode', () => {
+      it('should change to INPUT amount mode', () => {
+        const emptyAmountModeState = {
+          amount: {
+            mode: '',
+          },
+        };
+
+        const action = {
+          type: 'send/updateAmountMode',
+          payload: AMOUNT_MODES.INPUT,
+        };
+        const result = sendReducer(emptyAmountModeState, action);
+
+        expect(result.amount.mode).toStrictEqual(action.payload);
+      });
+
+      it('should change to MAX amount mode', () => {
+        const action = {
+          type: 'send/updateAmountMode',
+          payload: AMOUNT_MODES.MAX,
+        };
+        const result = sendReducer(initialState, action);
+
+        expect(result.amount.mode).toStrictEqual(action.payload);
+      });
+
+      it('should', () => {
+        const action = {
+          type: 'send/updateAmountMode',
+          payload: 'RANDOM',
+        };
+        const result = sendReducer(initialState, action);
+
+        expect(result.amount.mode).not.toStrictEqual(action.payload);
+      });
+    });
+
+    describe('updateAsset', () => {
+      it('should update asset type and balance from respective action payload', () => {
+        const updateAssetState = {
+          ...initialState,
+          asset: {
+            type: 'old type',
+            balance: 'old balance',
+          },
+        };
+
+        const action = {
+          type: 'send/updateAsset',
+          payload: {
+            type: 'new type',
+            balance: 'new balance',
+          },
+        };
+
+        const result = sendReducer(updateAssetState, action);
+
+        expect(result.asset.type).toStrictEqual(action.payload.type);
+        expect(result.asset.balance).toStrictEqual(action.payload.balance);
+      });
+
+      it('should nullify old contract address error when asset types is not TOKEN', () => {
+        const recipientErrorState = {
+          ...initialState,
+          recipient: {
+            error: CONTRACT_ADDRESS_ERROR,
+          },
+          asset: {
+            type: ASSET_TYPES.TOKEN,
+          },
+        };
+
+        const action = {
+          type: 'send/updateAsset',
+          payload: {
+            type: 'New Type',
+          },
+        };
+
+        const result = sendReducer(recipientErrorState, action);
+
+        expect(result.recipient.error).not.toStrictEqual(
+          recipientErrorState.recipient.error,
+        );
+        expect(result.recipient.error).toBeNull();
+      });
+
+      it('should nullify old known address error when asset types is not TOKEN', () => {
+        const recipientErrorState = {
+          ...initialState,
+          recipient: {
+            warning: KNOWN_RECIPIENT_ADDRESS_WARNING,
+          },
+          asset: {
+            type: ASSET_TYPES.TOKEN,
+          },
+        };
+
+        const action = {
+          type: 'send/updateAsset',
+          payload: {
+            type: 'New Type',
+          },
+        };
+
+        const result = sendReducer(recipientErrorState, action);
+
+        expect(result.recipient.warning).not.toStrictEqual(
+          recipientErrorState.recipient.warning,
+        );
+        expect(result.recipient.warning).toBeNull();
+      });
+
+      it('should update asset type and details to TOKEN payload', () => {
+        const action = {
+          type: 'send/updateAsset',
+          payload: {
+            type: ASSET_TYPES.TOKEN,
+            details: {
+              address: '0xTokenAddress',
+              decimals: 0,
+              symbol: 'TKN',
+            },
+          },
+        };
+
+        const result = sendReducer(initialState, action);
+        expect(result.asset.type).toStrictEqual(action.payload.type);
+        expect(result.asset.details).toStrictEqual(action.payload.details);
+      });
+    });
+
+    describe('updateRecipient', () => {
+      it('should', () => {
+        const action = {
+          type: 'send/updateRecipient',
+          payload: {
+            address: '0xNewAddress',
+          },
+        };
+
+        const result = sendReducer(initialState, action);
+
+        expect(result.stage).toStrictEqual(SEND_STAGES.DRAFT);
+        expect(result.recipient.address).toStrictEqual(action.payload.address);
+      });
+    });
+
+    describe('updateDraftTransaction', () => {
+      it('should', () => {
+        const detailsForDraftTransactionState = {
+          ...initialState,
+          status: SEND_STATUSES.VALID,
+          account: {
+            address: '0xCurrentAddress',
+          },
+          asset: {
+            type: '',
+          },
+          recipient: {
+            address: '0xRecipientAddress',
+          },
+          amount: {
+            value: '0x1',
+          },
+          gas: {
+            gasPrice: '0x3b9aca00', // 1000000000
+            gasLimit: '0x5208', // 21000
+          },
+        };
+
+        const action = {
+          type: 'send/updateDraftTransaction',
+        };
+
+        const result = sendReducer(detailsForDraftTransactionState, action);
+
+        expect(result.draftTransaction.txParams.to).toStrictEqual(
+          detailsForDraftTransactionState.recipient.address,
+        );
+        expect(result.draftTransaction.txParams.value).toStrictEqual(
+          detailsForDraftTransactionState.amount.value,
+        );
+        expect(result.draftTransaction.txParams.gas).toStrictEqual(
+          detailsForDraftTransactionState.gas.gasLimit,
+        );
+        expect(result.draftTransaction.txParams.gasPrice).toStrictEqual(
+          detailsForDraftTransactionState.gas.gasPrice,
+        );
+      });
+
+      it('should update the draftTransaction txParams recipient to token address when asset is type TOKEN', () => {
+        const detailsForDraftTransactionState = {
+          ...initialState,
+          status: SEND_STATUSES.VALID,
+          account: {
+            address: '0xCurrentAddress',
+          },
+          asset: {
+            type: ASSET_TYPES.TOKEN,
+            details: {
+              address: '0xTokenAddress',
+            },
+          },
+          amount: {
+            value: '0x1',
+          },
+          gas: {
+            gasPrice: '0x3b9aca00', // 1000000000
+            gasLimit: '0x5208', // 21000
+          },
+        };
+
+        const action = {
+          type: 'send/updateDraftTransaction',
+        };
+
+        const result = sendReducer(detailsForDraftTransactionState, action);
+
+        expect(result.draftTransaction.txParams.to).toStrictEqual(
+          detailsForDraftTransactionState.asset.details.address,
+        );
+        expect(result.draftTransaction.txParams.value).toStrictEqual('0x0');
+        expect(result.draftTransaction.txParams.gas).toStrictEqual(
+          detailsForDraftTransactionState.gas.gasLimit,
+        );
+        expect(result.draftTransaction.txParams.gasPrice).toStrictEqual(
+          detailsForDraftTransactionState.gas.gasPrice,
+        );
+        expect(result.draftTransaction.txParams.data).toStrictEqual(
+          '0xa9059cbb00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001',
+        );
+      });
+    });
+
+    describe('useDefaultGas', () => {
+      it('should', () => {
+        const action = {
+          type: 'send/useDefaultGas',
+        };
+
+        const result = sendReducer(initialState, action);
+
+        expect(result.gas.isCustomGasSet).toStrictEqual(false);
+      });
+    });
+
+    describe('useCustomGas', () => {
+      it('should', () => {
+        const action = {
+          type: 'send/useCustomGas',
+        };
+
+        const result = sendReducer(initialState, action);
+
+        expect(result.gas.isCustomGasSet).toStrictEqual(true);
+      });
+    });
+
+    describe('updateRecipientUserInput', () => {
+      it('should update recipient user input with payload', () => {
+        const action = {
+          type: 'send/updateRecipientUserInput',
+          payload: 'user input',
+        };
+
+        const result = sendReducer(initialState, action);
+
+        expect(result.recipient.userInput).toStrictEqual(action.payload);
+      });
+    });
+
+    describe('validateRecipientUserInput', () => {
+      it('should set recipient error and warning to null when user input is', () => {
+        const noUserInputState = {
+          recipient: {
+            mode: RECIPIENT_SEARCH_MODES.MY_ACCOUNTS,
+            userInput: '',
+            error: 'someError',
+            warning: 'someWarning',
+          },
+        };
+
+        const action = {
+          type: 'send/validateRecipientUserInput',
+        };
+
+        const result = sendReducer(noUserInputState, action);
+
+        expect(result.recipient.error).toBeNull();
+        expect(result.recipient.warning).toBeNull();
+      });
+
+      it('should error with an invalid address error when user input is not a valid hex string', () => {
+        const tokenAssetTypeState = {
+          ...initialState,
+          recipient: {
+            userInput: '0xValidateError',
+          },
+        };
+        const action = {
+          type: 'send/validateRecipientUserInput',
+          payload: {
+            chainId: '',
+            tokens: [],
+          },
+        };
+
+        const result = sendReducer(tokenAssetTypeState, action);
+
+        expect(result.recipient.error).toStrictEqual('invalidAddressRecipient');
+      });
+
+      // TODO: Expectation might change in the future
+      it('should error with an invalid network error when user input is not a valid hex string on a non default network', () => {
+        const tokenAssetTypeState = {
+          ...initialState,
+          recipient: {
+            userInput: '0xValidateError',
+          },
+        };
+        const action = {
+          type: 'send/validateRecipientUserInput',
+          payload: {
+            chainId: '0x55',
+            tokens: [],
+          },
+        };
+
+        const result = sendReducer(tokenAssetTypeState, action);
+
+        expect(result.recipient.error).toStrictEqual(
+          'invalidAddressRecipientNotEthNetwork',
+        );
+      });
+
+      it('should error with invalid address recipient when the user inputs the burn address', () => {
+        const tokenAssetTypeState = {
+          ...initialState,
+          recipient: {
+            userInput: '0x0000000000000000000000000000000000000000',
+          },
+        };
+        const action = {
+          type: 'send/validateRecipientUserInput',
+          payload: {
+            chainId: '',
+            tokens: [],
+          },
+        };
+
+        const result = sendReducer(tokenAssetTypeState, action);
+
+        expect(result.recipient.error).toStrictEqual('invalidAddressRecipient');
+      });
+
+      it('should error with same address recipient as a token', () => {
+        const tokenAssetTypeState = {
+          ...initialState,
+          asset: {
+            type: ASSET_TYPES.TOKEN,
+            details: {
+              address: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
+            },
+          },
+          recipient: {
+            userInput: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
+          },
+        };
+
+        const action = {
+          type: 'send/validateRecipientUserInput',
+          payload: {
+            chainId: '0x4',
+            tokens: [],
+          },
+        };
+
+        const result = sendReducer(tokenAssetTypeState, action);
+
+        expect(result.recipient.error).toStrictEqual('contractAddressError');
+      });
+    });
+
+    describe('updateRecipientSearchMode', () => {
+      it('should', () => {
+        const action = {
+          type: 'send/updateRecipientSearchMode',
+          payload: 'a-random-string',
+        };
+
+        const result = sendReducer(initialState, action);
+
+        expect(result.recipient.mode).toStrictEqual(action.payload);
+      });
+    });
+
+    describe('resetSendState', () => {
+      it('should', () => {
+        const action = {
+          type: 'send/resetSendState',
+        };
+
+        const result = sendReducer({}, action);
+
+        expect(result).toStrictEqual(initialState);
+      });
+    });
+
+    describe('validateAmountField', () => {
+      it('should error with insufficient funds when amount asset value plust gas is higher than asset balance', () => {
+        const nativeAssetState = {
+          ...initialState,
+          amount: {
+            value: '0x6fc23ac0', // 1875000000
+          },
+          asset: {
+            type: ASSET_TYPES.NATIVE,
+            balance: '0x77359400', // 2000000000
+          },
+          gas: {
+            gasTotal: '0x8f0d180', // 150000000
+          },
+        };
+
+        const action = {
+          type: 'send/validateAmountField',
+        };
+
+        const result = sendReducer(nativeAssetState, action);
+
+        expect(result.amount.error).toStrictEqual(INSUFFICIENT_FUNDS_ERROR);
+      });
+
+      it('should error with insufficient tokens when amount value of tokens is higher than asset balance of token', () => {
+        const tokenAssetState = {
+          ...initialState,
+          amount: {
+            value: '0x77359400', // 2000000000
+          },
+          asset: {
+            type: ASSET_TYPES.TOKEN,
+            balance: '0x6fc23ac0', // 1875000000
+            details: {
+              decimals: 0,
+            },
+          },
+        };
+
+        const action = {
+          type: 'send/validateAmountField',
+        };
+
+        const result = sendReducer(tokenAssetState, action);
+
+        expect(result.amount.error).toStrictEqual(INSUFFICIENT_TOKENS_ERROR);
+      });
+
+      it('should error negative value amount', () => {
+        const negativeAmountState = {
+          ...initialState,
+          amount: {
+            value: '-1',
+          },
+        };
+
+        const action = {
+          type: 'send/validateAmountField',
+        };
+
+        const result = sendReducer(negativeAmountState, action);
+
+        expect(result.amount.error).toStrictEqual(NEGATIVE_ETH_ERROR);
+      });
+
+      it('should not error for positive value amount', () => {
+        const otherState = {
+          ...initialState,
+          amount: {
+            error: 'someError',
+            value: '1',
+          },
+          asset: {
+            type: '',
+          },
+        };
+
+        const action = {
+          type: 'send/validateAmountField',
+        };
+
+        const result = sendReducer(otherState, action);
+        expect(result.amount.error).toBeNull();
+      });
+    });
+
+    describe('validateGasField', () => {
+      it('should error when total amount of gas is higher than account balance', () => {
+        const gasFieldState = {
+          ...initialState,
+          account: {
+            balance: '0x0',
+          },
+          gas: {
+            gasTotal: '0x1319718a5000', // 21000000000000
+          },
+        };
+
+        const action = {
+          type: 'send/validateGasField',
+        };
+
+        const result = sendReducer(gasFieldState, action);
+        expect(result.gas.error).toStrictEqual(INSUFFICIENT_FUNDS_ERROR);
+      });
+    });
+
+    describe('validateSendState', () => {
+      it('should set `INVALID` send state status when amount error is present', () => {
+        const amountErrorState = {
+          ...initialState,
+          amount: {
+            error: 'Some Amount Error',
+          },
+        };
+
+        const action = {
+          type: 'send/validateSendState',
+        };
+
+        const result = sendReducer(amountErrorState, action);
+        expect(result.status).toStrictEqual(SEND_STATUSES.INVALID);
+      });
+
+      it('should set `INVALID` send state status when gas error is present', () => {
+        const gasErrorState = {
+          ...initialState,
+          gas: {
+            error: 'Some Amount Error',
+          },
+        };
+
+        const action = {
+          type: 'send/validateSendState',
+        };
+
+        const result = sendReducer(gasErrorState, action);
+        expect(result.status).toStrictEqual(SEND_STATUSES.INVALID);
+      });
+
+      it('should set `INVALID` send state status when asset type is `TOKEN` without token details present', () => {
+        const assetErrorState = {
+          ...initialState,
+          asset: {
+            type: ASSET_TYPES.TOKEN,
+          },
+        };
+
+        const action = {
+          type: 'send/validateSendState',
+        };
+
+        const result = sendReducer(assetErrorState, action);
+        expect(result.status).toStrictEqual(SEND_STATUSES.INVALID);
+      });
+
+      it('should set `INVALID` send state status when gasLimit is under the minimumGasLimit', () => {
+        const gasLimitErroState = {
+          ...initialState,
+          gas: {
+            gasLimit: '0x5207',
+            minimumGasLimit: '0x5208',
+          },
+        };
+
+        const action = {
+          type: 'send/validateSendState',
+        };
+
+        const result = sendReducer(gasLimitErroState, action);
+        expect(result.status).toStrictEqual(SEND_STATUSES.INVALID);
+      });
+
+      it('should set `VALID` send state status when conditionals have not been met', () => {
+        const validSendStatusState = {
+          ...initialState,
+          stage: SEND_STAGES.DRAFT,
+          asset: {
+            type: ASSET_TYPES.TOKEN,
+            details: {
+              address: '0x000',
+            },
+          },
+          gas: {
+            isGasEstimateLoading: false,
+            gasLimit: '0x5208',
+            minimumGasLimit: '0x5208',
+          },
+        };
+
+        const action = {
+          type: 'send/validateSendState',
+        };
+
+        const result = sendReducer(validSendStatusState, action);
+
+        expect(result.status).toStrictEqual(SEND_STATUSES.VALID);
+      });
+    });
+  });
+
+  describe('extraReducers/externalReducers', () => {
+    describe('QR Code Detected', () => {
+      const qrCodestate = {
+        ...initialState,
+        recipient: {
+          address: '0xAddress',
+        },
+      };
+
+      it('should set the recipient address to the scanned address value if they are not equal', () => {
+        const action = {
+          type: 'UI_QR_CODE_DETECTED',
+          value: {
+            type: 'address',
+            values: {
+              address: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
+            },
+          },
+        };
+
+        const result = sendReducer(qrCodestate, action);
+        expect(result.recipient.address).toStrictEqual(
+          action.value.values.address,
+        );
+      });
+
+      it('should not set the recipient address to invalid scanned address and errors', () => {
+        const badQRAddressAction = {
+          type: 'UI_QR_CODE_DETECTED',
+          value: {
+            type: 'address',
+            values: {
+              address: '0xBadAddress',
+            },
+          },
+        };
+
+        const result = sendReducer(qrCodestate, badQRAddressAction);
+
+        expect(result.recipient.address).toStrictEqual(
+          qrCodestate.recipient.address,
+        );
+        expect(result.recipient.error).toStrictEqual(
+          INVALID_RECIPIENT_ADDRESS_ERROR,
+        );
+      });
+    });
+
+    describe('Selected Address Changed', () => {
+      it('should update selected account address and balance on non-edit stages', () => {
+        const olderState = {
+          ...initialState,
+          account: {
+            balance: '0x0',
+            address: '0xAddress',
+          },
+        };
+
+        const action = {
+          type: 'SELECTED_ACCOUNT_CHANGED',
+          payload: {
+            account: {
+              address: '0xDifferentAddress',
+              balance: '0x1',
+            },
+          },
+        };
+
+        const result = sendReducer(olderState, action);
+
+        expect(result.account.balance).toStrictEqual(
+          action.payload.account.balance,
+        );
+        expect(result.account.address).toStrictEqual(
+          action.payload.account.address,
+        );
+      });
+    });
+
+    describe('Account Changed', () => {
+      it('should', () => {
+        const accountsChangedState = {
+          ...initialState,
+          stage: SEND_STAGES.EDIT,
+          account: {
+            address: '0xAddress',
+            balance: '0x0',
+          },
+        };
+
+        const action = {
+          type: 'ACCOUNT_CHANGED',
+          payload: {
+            account: {
+              address: '0xAddress',
+              balance: '0x1',
+            },
+          },
+        };
+
+        const result = sendReducer(accountsChangedState, action);
+
+        expect(result.account.balance).toStrictEqual(
+          action.payload.account.balance,
+        );
+      });
+
+      it(`should not edit account balance if action payload address is not the same as state's address`, () => {
+        const accountsChangedState = {
+          ...initialState,
+          stage: SEND_STAGES.EDIT,
+          account: {
+            address: '0xAddress',
+            balance: '0x0',
+          },
+        };
+
+        const action = {
+          type: 'ACCOUNT_CHANGED',
+          payload: {
+            account: {
+              address: '0xDifferentAddress',
+              balance: '0x1',
+            },
+          },
+        };
+
+        const result = sendReducer(accountsChangedState, action);
+        expect(result.account.address).not.toStrictEqual(
+          action.payload.account.address,
+        );
+        expect(result.account.balance).not.toStrictEqual(
+          action.payload.account.balance,
+        );
+      });
+    });
+
+    describe('Initialize Pending Send State', () => {
+      let dispatchSpy;
+      let getState;
+
+      beforeEach(() => {
+        dispatchSpy = jest.fn();
+      });
+
+      it('should dispatch async action thunk first with pending, then finally fulfilling from minimal state', async () => {
+        getState = jest.fn().mockReturnValue({
+          metamask: {
+            accounts: {
+              '0xAddress': {
+                address: '0xAddress',
+                balance: '0x0',
+              },
+            },
+            cachedBalances: {
+              0x4: {
+                '0xAddress': '0x0',
+              },
+            },
+            selectedAddress: '0xAddress',
+            provider: {
+              chainId: '0x4',
+            },
+          },
+          send: initialState,
+          gas: {
+            basicEstimateStatus: 'LOADING',
+            basicEstimatesStatus: {
+              safeLow: null,
+              average: null,
+              fast: null,
+            },
+          },
+        });
+
+        const action = initializeSendState();
+        await action(dispatchSpy, getState, undefined);
+
+        expect(dispatchSpy).toHaveBeenCalledTimes(4);
+
+        expect(dispatchSpy.mock.calls[0][0].type).toStrictEqual(
+          'send/initializeSendState/pending',
+        );
+        expect(dispatchSpy.mock.calls[3][0].type).toStrictEqual(
+          'send/initializeSendState/fulfilled',
+        );
+      });
+    });
+
+    describe('Set Basic Gas Estimate Data', () => {
+      it('should recalculate gas based off of average basic estimate data', () => {
+        const gasState = {
+          ...initialState,
+          gas: {
+            gasPrice: '0x0',
+            gasLimit: '0x5208',
+            gasTotal: '0x0',
+            minimumGasLimit: '0x5208',
+          },
+        };
+
+        const action = {
+          type: 'metamask/gas/SET_BASIC_GAS_ESTIMATE_DATA',
+          value: {
+            average: '1',
+          },
+        };
+
+        const result = sendReducer(gasState, action);
+
+        expect(result.gas.gasPrice).toStrictEqual('0x3b9aca00'); // 1000000000
+        expect(result.gas.gasLimit).toStrictEqual(gasState.gas.gasLimit);
+        expect(result.gas.gasTotal).toStrictEqual('0x1319718a5000');
+      });
+    });
+
+    describe('BASIC_GAS_ESTIMATE_STATUS', () => {
+      it('should invalidate the send status when status is LOADING', () => {
+        const validSendStatusState = {
+          ...initialState,
+          status: SEND_STATUSES.VALID,
+        };
+
+        const action = {
+          type: 'metamask/gas/BASIC_GAS_ESTIMATE_STATUS',
+          value: BASIC_ESTIMATE_STATES.LOADING,
+        };
+
+        const result = sendReducer(validSendStatusState, action);
+
+        expect(result.status).not.toStrictEqual(validSendStatusState.status);
+      });
+
+      it('should invalidate the send status when status is FAILED and use INLINE gas input mode', () => {
+        const validSendStatusState = {
+          ...initialState,
+          status: SEND_STATUSES.VALID,
+        };
+
+        const action = {
+          type: 'metamask/gas/BASIC_GAS_ESTIMATE_STATUS',
+          value: BASIC_ESTIMATE_STATES.FAILED,
+        };
+
+        const result = sendReducer(validSendStatusState, action);
+
+        expect(result.status).not.toStrictEqual(validSendStatusState.status);
+      });
+    });
+  });
+
+  describe('Action Creators', () => {
+    describe('UpdateSendAmount', () => {
+      const defaultSendAmountState = {
+        send: {
+          amount: {
+            mode: undefined,
+          },
+          asset: {
+            type: '',
+          },
+        },
+      };
+
+      it('should create an action to update send amount', async () => {
+        const store = mockStore(defaultSendAmountState);
+
+        const newSendAmount = 'aNewSendAmount';
+
+        await store.dispatch(updateSendAmount(newSendAmount));
+
+        const actionResult = store.getActions();
+
+        const expectedActionResult = [
+          { type: 'send/updateSendAmount', payload: 'aNewSendAmount' },
+        ];
+
+        expect(actionResult).toStrictEqual(expectedActionResult);
+      });
+
+      it('should create an action to update send amount mode to `INPUT` when mode is `MAX`', async () => {
+        const maxModeSendState = {
+          send: {
+            ...defaultSendAmountState.send,
+            amount: {
+              mode: AMOUNT_MODES.MAX,
+            },
+          },
+        };
+
+        const store = mockStore(maxModeSendState);
+
+        await store.dispatch(updateSendAmount());
+
+        const actionResult = store.getActions();
+
+        const expectedActionResult = [
+          { type: 'send/updateSendAmount', payload: undefined },
+          { type: 'send/updateAmountMode', payload: AMOUNT_MODES.INPUT },
+        ];
+
+        expect(actionResult).toStrictEqual(expectedActionResult);
+      });
+
+      it('should create an action computeEstimateGasLimit and change states from pending to fulfilled with token asset types', async () => {
+        const tokenAssetTypeSendState = {
+          metamask: {
+            blockGasLimit: '',
+            selectedAddress: '',
+          },
+          ...defaultSendAmountState.send,
+          send: {
+            asset: {
+              type: ASSET_TYPES.TOKEN,
+              details: {},
+            },
+            gas: {
+              gasPrice: '',
+            },
+            recipient: {
+              address: '',
+            },
+            amount: {
+              value: '',
+            },
+            draftTransaction: {
+              userInputHexData: '',
+            },
+          },
+        };
+
+        const store = mockStore(tokenAssetTypeSendState);
+
+        await store.dispatch(updateSendAmount());
+
+        const actionResult = store.getActions();
+
+        expect(actionResult).toHaveLength(4);
+        expect(actionResult[0].type).toStrictEqual('send/updateSendAmount');
+        expect(actionResult[1].type).toStrictEqual(
+          'send/computeEstimatedGasLimit/pending',
+        );
+        expect(actionResult[2].type).toStrictEqual(
+          'metamask/gas/SET_CUSTOM_GAS_LIMIT',
+        );
+        expect(actionResult[3].type).toStrictEqual(
+          'send/computeEstimatedGasLimit/fulfilled',
+        );
+      });
+    });
+
+    describe('UpdateSendAsset', () => {
+      const defaultSendAssetState = {
+        metamask: {
+          blockGasLimit: '',
+          selectedAddress: '',
+        },
+        send: {
+          account: {
+            balance: '',
+          },
+          asset: {
+            type: '',
+            details: {},
+          },
+          gas: {
+            gasPrice: '',
+          },
+          recipient: {
+            address: '',
+          },
+          amount: {
+            value: '',
+          },
+          draftTransaction: {
+            userInputHexData: '',
+          },
+        },
+      };
+
+      it('should create actions for updateSendAsset', async () => {
+        const store = mockStore(defaultSendAssetState);
+
+        const newSendAsset = {
+          type: '',
+          details: {
+            address: '',
+            symbol: '',
+            decimals: '',
+          },
+        };
+
+        await store.dispatch(updateSendAsset(newSendAsset));
+
+        const actionResult = store.getActions();
+
+        expect(actionResult).toHaveLength(4);
+
+        expect(actionResult[0].type).toStrictEqual('send/updateAsset');
+        expect(actionResult[0].payload).toStrictEqual({
+          ...newSendAsset,
+          balance: '',
+        });
+
+        expect(actionResult[1].type).toStrictEqual(
+          'send/computeEstimatedGasLimit/pending',
+        );
+        expect(actionResult[2].type).toStrictEqual(
+          'metamask/gas/SET_CUSTOM_GAS_LIMIT',
+        );
+        expect(actionResult[3].type).toStrictEqual(
+          'send/computeEstimatedGasLimit/fulfilled',
+        );
+      });
+
+      it('should create actions for updateSendAsset with tokens', async () => {
+        global.eth = {
+          contract: sinon.stub().returns({
+            at: sinon.stub().returns({
+              balanceOf: sinon.stub().returns(undefined),
+            }),
+          }),
+        };
+        const store = mockStore(defaultSendAssetState);
+
+        const newSendAsset = {
+          type: ASSET_TYPES.TOKEN,
+          details: {
+            address: 'tokenAddress',
+            symbol: 'tokenSymbol',
+            decimals: 'tokenDecimals',
+          },
+        };
+
+        await store.dispatch(updateSendAsset(newSendAsset));
+
+        const actionResult = store.getActions();
+
+        expect(actionResult).toHaveLength(6);
+        expect(actionResult[0].type).toStrictEqual('SHOW_LOADING_INDICATION');
+        expect(actionResult[1].type).toStrictEqual('HIDE_LOADING_INDICATION');
+        expect(actionResult[2].payload).toStrictEqual({
+          ...newSendAsset,
+          balance: '0x0',
+        });
+
+        expect(actionResult[3].type).toStrictEqual(
+          'send/computeEstimatedGasLimit/pending',
+        );
+        expect(actionResult[4].type).toStrictEqual(
+          'metamask/gas/SET_CUSTOM_GAS_LIMIT',
+        );
+        expect(actionResult[5].type).toStrictEqual(
+          'send/computeEstimatedGasLimit/fulfilled',
+        );
+      });
+    });
+
+    describe('updateRecipientUserInput', () => {
+      const updateRecipientUserInputState = {
+        metamask: {
+          provider: {
+            chainId: '',
+          },
+          tokens: [],
+        },
+      };
+
+      it('should create actions for updateRecipientUserInput and checks debounce for validation', async () => {
+        const clock = sinon.useFakeTimers();
+
+        const store = mockStore(updateRecipientUserInputState);
+        const newUserRecipientInput = 'newUserRecipientInput';
+
+        await store.dispatch(updateRecipientUserInput(newUserRecipientInput));
+
+        expect(store.getActions()).toHaveLength(1);
+        expect(store.getActions()[0].type).toStrictEqual(
+          'send/updateRecipientUserInput',
+        );
+        expect(store.getActions()[0].payload).toStrictEqual(
+          newUserRecipientInput,
+        );
+
+        clock.tick(300); // debounce
+
+        expect(store.getActions()).toHaveLength(2);
+        expect(store.getActions()[1].type).toStrictEqual(
+          'send/validateRecipientUserInput',
+        );
+        expect(store.getActions()[1].payload).toStrictEqual({
+          chainId: '',
+          tokens: [],
+        });
+      });
+    });
+
+    describe('useContactListForRecipientSearch', () => {
+      it('should create action to change send recipient search to contact list', async () => {
+        const store = mockStore();
+
+        await store.dispatch(useContactListForRecipientSearch());
+
+        const actionResult = store.getActions();
+
+        expect(actionResult).toStrictEqual([
+          {
+            type: 'send/updateRecipientSearchMode',
+            payload: RECIPIENT_SEARCH_MODES.CONTACT_LIST,
+          },
+        ]);
+      });
+    });
+
+    describe('UseMyAccountsForRecipientSearch', () => {
+      it('should create action to change send recipient search to derived accounts', async () => {
+        const store = mockStore();
+
+        await store.dispatch(useMyAccountsForRecipientSearch());
+
+        const actionResult = store.getActions();
+
+        expect(actionResult).toStrictEqual([
+          {
+            type: 'send/updateRecipientSearchMode',
+            payload: RECIPIENT_SEARCH_MODES.MY_ACCOUNTS,
+          },
+        ]);
+      });
+    });
+
+    describe('UpdateRecipient', () => {
+      const recipient = {
+        address: '',
+        nickname: '',
+      };
+
+      it('should create an action to update recipient', async () => {
+        const updateRecipientState = {
+          send: {
+            asset: {
+              type: '',
+            },
+          },
+        };
+
+        const store = mockStore(updateRecipientState);
+
+        await store.dispatch(updateRecipient(recipient));
+
+        const actionResult = store.getActions();
+
+        const expectedActionResult = [
+          {
+            type: 'send/updateRecipient',
+            payload: recipient,
+          },
+        ];
+
+        expect(actionResult).toHaveLength(1);
+        expect(actionResult).toStrictEqual(expectedActionResult);
+      });
+
+      it('should create actions to update recipient and recalculate gas limit if the asset is a token', async () => {
+        const tokenState = {
+          metamask: {
+            blockGasLimit: '',
+            selectedAddress: '',
+          },
+          send: {
+            account: {
+              balance: '',
+            },
+            asset: {
+              type: ASSET_TYPES.TOKEN,
+              details: {},
+            },
+            gas: {
+              gasPrice: '',
+            },
+            recipient: {
+              address: '',
+            },
+            amount: {
+              value: '',
+            },
+            draftTransaction: {
+              userInputHexData: '',
+            },
+          },
+        };
+
+        const store = mockStore(tokenState);
+
+        await store.dispatch(updateRecipient(recipient));
+
+        const actionResult = store.getActions();
+
+        expect(actionResult).toHaveLength(4);
+        expect(actionResult[0].type).toStrictEqual('send/updateRecipient');
+        expect(actionResult[1].type).toStrictEqual(
+          'send/computeEstimatedGasLimit/pending',
+        );
+        expect(actionResult[2].type).toStrictEqual(
+          'metamask/gas/SET_CUSTOM_GAS_LIMIT',
+        );
+        expect(actionResult[3].type).toStrictEqual(
+          'send/computeEstimatedGasLimit/fulfilled',
+        );
+      });
+    });
+
+    describe('ResetRecipientInput', () => {
+      it('should create actions to reset recipient input and ens then validates input', async () => {
+        const updateRecipientState = {
+          metamask: {
+            provider: {
+              chainId: '',
+            },
+            tokens: [],
+          },
+          send: {
+            asset: {
+              type: '',
+            },
+            recipient: {
+              address: 'Address',
+              nickname: 'NickName',
+            },
+          },
+        };
+
+        const store = mockStore(updateRecipientState);
+
+        await store.dispatch(resetRecipientInput());
+        const actionResult = store.getActions();
+
+        expect(actionResult).toHaveLength(4);
+        expect(actionResult[0].type).toStrictEqual(
+          'send/updateRecipientUserInput',
+        );
+        expect(actionResult[0].payload).toStrictEqual('');
+        expect(actionResult[1].type).toStrictEqual('send/updateRecipient');
+        expect(actionResult[2].type).toStrictEqual('ENS/resetResolution');
+        expect(actionResult[3].type).toStrictEqual(
+          'send/validateRecipientUserInput',
+        );
+      });
+    });
+
+    describe('UpdateSendHexData', () => {
+      const sendHexDataState = {
+        send: {
+          asset: {
+            type: '',
+          },
+        },
+      };
+
+      it('should create action to update hexData', async () => {
+        const hexData = '0x1';
+        const store = mockStore(sendHexDataState);
+
+        await store.dispatch(updateSendHexData(hexData));
+
+        const actionResult = store.getActions();
+
+        const expectActionResult = [
+          { type: 'send/updateUserInputHexData', payload: hexData },
+        ];
+
+        expect(actionResult).toHaveLength(1);
+        expect(actionResult).toStrictEqual(expectActionResult);
+      });
+    });
+
+    describe('ToggleSendMaxMode', () => {
+      it('should create actions to toggle update max mode when send amount mode is not max', async () => {
+        const sendMaxModeState = {
+          send: {
+            amount: {
+              mode: '',
+            },
+          },
+        };
+
+        const store = mockStore(sendMaxModeState);
+
+        await store.dispatch(toggleSendMaxMode());
+
+        const actionResult = store.getActions();
+
+        const expectedActionReslt = [
+          { type: 'send/updateAmountMode', payload: AMOUNT_MODES.MAX },
+          { type: 'send/updateAmountToMax', payload: undefined },
+        ];
+
+        expect(actionResult).toHaveLength(2);
+        expect(actionResult).toStrictEqual(expectedActionReslt);
+      });
+
+      it('should create actions to toggle off  max mode when send amount mode is max', async () => {
+        const sendMaxModeState = {
+          send: {
+            amount: {
+              mode: AMOUNT_MODES.MAX,
+            },
+          },
+        };
+        const store = mockStore(sendMaxModeState);
+
+        await store.dispatch(toggleSendMaxMode());
+
+        const actionResult = store.getActions();
+
+        const expectedActionReslt = [
+          { type: 'send/updateAmountMode', payload: AMOUNT_MODES.INPUT },
+          { type: 'send/updateSendAmount', payload: '0x0' },
+        ];
+
+        expect(actionResult).toHaveLength(2);
+        expect(actionResult).toStrictEqual(expectedActionReslt);
+      });
+    });
+
+    describe('SignTransaction', () => {
+      const signTransactionState = {
+        send: {
+          asset: {},
+          stage: '',
+          draftTransaction: {},
+          recipient: {},
+          amount: {},
+        },
+      };
+
+      it('should show confirm tx page when no other conditions for signing have been met', async () => {
+        global.ethQuery = {
+          sendTransaction: sinon.stub(),
+        };
+
+        const store = mockStore(signTransactionState);
+
+        await store.dispatch(signTransaction());
+
+        const actionResult = store.getActions();
+
+        expect(actionResult).toHaveLength(1);
+        expect(actionResult[0].type).toStrictEqual('SHOW_CONF_TX_PAGE');
+      });
+
+      it('should create actions for updateTransaction rejecting', async () => {
+        const editStageSignTxState = {
+          metamask: {
+            unapprovedTxs: {
+              1: {
+                id: 1,
+                txParams: {
+                  value: 'oldTxValue',
+                },
+              },
+            },
+          },
+          send: {
+            ...signTransactionState.send,
+            stage: SEND_STAGES.EDIT,
+            draftTransaction: {
+              id: 1,
+              txParams: {
+                value: 'newTxValue',
+              },
+            },
+          },
+        };
+
+        jest.mock('../../store/actions.js');
+
+        const store = mockStore(editStageSignTxState);
+
+        await store.dispatch(signTransaction());
+
+        const actionResult = store.getActions();
+
+        expect(actionResult).toHaveLength(5);
+        expect(actionResult[0].type).toStrictEqual('SHOW_LOADING_INDICATION');
+        expect(actionResult[1].type).toStrictEqual('UPDATE_TRANSACTION_PARAMS');
+        expect(actionResult[2].type).toStrictEqual('HIDE_LOADING_INDICATION');
+      });
+    });
+
+    describe('editTransaction', () => {
+      it('should set up the appropriate state for editing a native asset transaction', async () => {
+        const editTransactionState = {
+          metamask: {
+            provider: {
+              chainId: RINKEBY_CHAIN_ID,
+            },
+            tokens: [],
+            addressBook: {
+              [RINKEBY_CHAIN_ID]: {},
+            },
+            identities: {},
+            unapprovedTxs: {
+              1: {
+                id: 1,
+                txParams: {
+                  from: '0xAddress',
+                  to: '0xRecipientAddress',
+                  gas: GAS_LIMITS.SIMPLE,
+                  gasPrice: '0x3b9aca00', // 1000000000
+                  value: '0xde0b6b3a7640000', // 1000000000000000000
+                },
+              },
+            },
+          },
+          send: {
+            asset: {
+              type: '',
+            },
+            recipient: {
+              address: 'Address',
+              nickname: 'NickName',
+            },
+          },
+        };
+
+        const store = mockStore(editTransactionState);
+
+        await store.dispatch(editTransaction(ASSET_TYPES.NATIVE, 1));
+        const actionResult = store.getActions();
+
+        expect(actionResult).toHaveLength(1);
+        expect(actionResult[0].type).toStrictEqual('send/editTransaction');
+        expect(actionResult[0].payload).toStrictEqual({
+          address: '0xRecipientAddress',
+          amount: '0xde0b6b3a7640000',
+          from: '0xAddress',
+          gasLimit: GAS_LIMITS.SIMPLE,
+          gasPrice: '0x3b9aca00',
+          id: 1,
+          nickname: '',
+        });
+
+        const action = actionResult[0];
+
+        const result = sendReducer(initialState, action);
+
+        expect(result.gas.gasLimit).toStrictEqual(action.payload.gasLimit);
+        expect(result.gas.gasPrice).toStrictEqual(action.payload.gasPrice);
+
+        expect(result.amount.value).toStrictEqual(action.payload.amount);
+
+        expect(result.draftTransaction.txParams.to).toStrictEqual(
+          action.payload.address,
+        );
+        expect(result.draftTransaction.txParams.value).toStrictEqual(
+          action.payload.amount,
+        );
+        expect(result.draftTransaction.txParams.gasPrice).toStrictEqual(
+          action.payload.gasPrice,
+        );
+        expect(result.draftTransaction.txParams.gas).toStrictEqual(
+          action.payload.gasLimit,
+        );
+      });
+
+      it('should set up the appropriate state for editing a token asset transaction', async () => {
+        const editTransactionState = {
+          metamask: {
+            blockGasLimit: '0x3a98',
+            selectedAddress: '',
+            provider: {
+              chainId: RINKEBY_CHAIN_ID,
+            },
+            tokens: [],
+            addressBook: {
+              [RINKEBY_CHAIN_ID]: {},
+            },
+            identities: {},
+            unapprovedTxs: {
+              1: {
+                id: 1,
+                txParams: {
+                  from: '0xAddress',
+                  to: '0xTokenAddress',
+                  gas: GAS_LIMITS.SIMPLE,
+                  gasPrice: '0x3b9aca00', // 1000000000
+                  value: '0x0',
+                },
+              },
+            },
+          },
+          send: {
+            account: {
+              address: '0xAddress',
+              balance: '0x0',
+            },
+            asset: {
+              type: '',
+            },
+            gas: {
+              gasPrice: '',
+            },
+            amount: {
+              value: '',
+            },
+            draftTransaction: {
+              userInputHexData: '',
+            },
+            recipient: {
+              address: 'Address',
+              nickname: 'NickName',
+            },
+          },
+        };
+
+        global.eth = {
+          contract: sinon.stub().returns({
+            at: sinon.stub().returns({
+              balanceOf: sinon.stub().returns(undefined),
+            }),
+          }),
+          getCode: jest.fn(() => '0xa'),
+        };
+
+        const store = mockStore(editTransactionState);
+
+        await store.dispatch(
+          editTransaction(
+            ASSET_TYPES.TOKEN,
+            1,
+            {
+              name: TRANSACTION_TYPES.TOKEN_METHOD_TRANSFER,
+              args: {
+                _to: '0xRecipientAddress',
+                _value: ethers.BigNumber.from(15000),
+              },
+            },
+            { address: '0xAddress', symbol: 'SYMB', decimals: 18 },
+          ),
+        );
+        const actionResult = store.getActions();
+
+        expect(actionResult).toHaveLength(7);
+        expect(actionResult[0].type).toStrictEqual('SHOW_LOADING_INDICATION');
+        expect(actionResult[1].type).toStrictEqual('HIDE_LOADING_INDICATION');
+        expect(actionResult[2].type).toStrictEqual('send/updateAsset');
+        expect(actionResult[2].payload).toStrictEqual({
+          balance: '0x0',
+          type: ASSET_TYPES.TOKEN,
+          details: {
+            address: '0xTokenAddress',
+            decimals: 18,
+            symbol: 'SYMB',
+            isERC721: false,
+          },
+        });
+        expect(actionResult[3].type).toStrictEqual(
+          'send/computeEstimatedGasLimit/pending',
+        );
+        expect(actionResult[4].type).toStrictEqual(
+          'metamask/gas/SET_CUSTOM_GAS_LIMIT',
+        );
+        expect(actionResult[5].type).toStrictEqual(
+          'send/computeEstimatedGasLimit/fulfilled',
+        );
+        expect(actionResult[6].type).toStrictEqual('send/editTransaction');
+        expect(actionResult[6].payload).toStrictEqual({
+          address: '0xrecipientaddress', // getting address from tokenData does .toLowerCase
+          amount: '0x3a98',
+          from: '0xAddress',
+          gasLimit: GAS_LIMITS.SIMPLE,
+          gasPrice: '0x3b9aca00',
+          id: 1,
+          nickname: '',
+        });
+
+        const action = actionResult[6];
+
+        const result = sendReducer(initialState, action);
+
+        expect(result.gas.gasLimit).toStrictEqual(action.payload.gasLimit);
+        expect(result.gas.gasPrice).toStrictEqual(action.payload.gasPrice);
+
+        expect(result.amount.value).toStrictEqual(action.payload.amount);
+
+        expect(result.draftTransaction.txParams.to).toStrictEqual(
+          action.payload.address,
+        );
+        expect(result.draftTransaction.txParams.value).toStrictEqual(
+          action.payload.amount,
+        );
+        expect(result.draftTransaction.txParams.gasPrice).toStrictEqual(
+          action.payload.gasPrice,
+        );
+        expect(result.draftTransaction.txParams.gas).toStrictEqual(
+          action.payload.gasLimit,
+        );
+      });
+    });
+  });
+});
diff --git a/ui/pages/confirm-send-ether/confirm-send-ether.container.js b/ui/pages/confirm-send-ether/confirm-send-ether.container.js
index 475ee5213..5f7527226 100644
--- a/ui/pages/confirm-send-ether/confirm-send-ether.container.js
+++ b/ui/pages/confirm-send-ether/confirm-send-ether.container.js
@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { withRouter } from 'react-router-dom';
-import { updateSend } from '../../ducks/send/send.duck';
+import { ASSET_TYPES, editTransaction } from '../../ducks/send';
 import { clearConfirmTransaction } from '../../ducks/confirm-transaction/confirm-transaction.duck';
 import ConfirmSendEther from './confirm-send-ether.component';
 
@@ -18,22 +18,8 @@ const mapStateToProps = (state) => {
 const mapDispatchToProps = (dispatch) => {
   return {
     editTransaction: (txData) => {
-      const { id, txParams } = txData;
-      const { from, gas: gasLimit, gasPrice, to, value: amount } = txParams;
-
-      dispatch(
-        updateSend({
-          from,
-          gasLimit,
-          gasPrice,
-          gasTotal: null,
-          to,
-          amount,
-          errors: { to: null, amount: null },
-          editingTransactionId: id?.toString(),
-        }),
-      );
-
+      const { id } = txData;
+      dispatch(editTransaction(ASSET_TYPES.NATIVE, id.toString()));
       dispatch(clearConfirmTransaction());
     },
   };
diff --git a/ui/pages/confirm-send-token/confirm-send-token.container.js b/ui/pages/confirm-send-token/confirm-send-token.container.js
index fd869a9a7..d823e25aa 100644
--- a/ui/pages/confirm-send-token/confirm-send-token.container.js
+++ b/ui/pages/confirm-send-token/confirm-send-token.container.js
@@ -3,13 +3,8 @@ import { compose } from 'redux';
 import { withRouter } from 'react-router-dom';
 import { clearConfirmTransaction } from '../../ducks/confirm-transaction/confirm-transaction.duck';
 import { showSendTokenPage } from '../../store/actions';
-import { conversionUtil } from '../../helpers/utils/conversion-util';
-import {
-  getTokenValueParam,
-  getTokenAddressParam,
-} from '../../helpers/utils/token-util';
+import { ASSET_TYPES, editTransaction } from '../../ducks/send';
 import { sendTokenTokenAmountAndToAddressSelector } from '../../selectors';
-import { updateSend } from '../../ducks/send/send.duck';
 import ConfirmSendToken from './confirm-send-token.component';
 
 const mapStateToProps = (state) => {
@@ -22,35 +17,15 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    editTransaction: ({ txData, tokenData, tokenProps }) => {
-      const {
-        id,
-        txParams: { from, to: tokenAddress, gas: gasLimit, gasPrice } = {},
-      } = txData;
-
-      const to = getTokenValueParam(tokenData);
-      const tokenAmountInDec = getTokenAddressParam(tokenData);
-
-      const tokenAmountInHex = conversionUtil(tokenAmountInDec, {
-        fromNumericBase: 'dec',
-        toNumericBase: 'hex',
-      });
-
+    editTransaction: ({ txData, tokenData, tokenProps: assetDetails }) => {
+      const { id } = txData;
       dispatch(
-        updateSend({
-          from,
-          gasLimit,
-          gasPrice,
-          gasTotal: null,
-          to,
-          amount: tokenAmountInHex,
-          errors: { to: null, amount: null },
-          editingTransactionId: id?.toString(),
-          token: {
-            ...tokenProps,
-            address: tokenAddress,
-          },
-        }),
+        editTransaction(
+          ASSET_TYPES.TOKEN,
+          id.toString(),
+          tokenData,
+          assetDetails,
+        ),
       );
       dispatch(clearConfirmTransaction());
       dispatch(showSendTokenPage());
diff --git a/ui/pages/confirm-transaction/conf-tx.js b/ui/pages/confirm-transaction/conf-tx.js
index 4f2028197..8990e21c5 100644
--- a/ui/pages/confirm-transaction/conf-tx.js
+++ b/ui/pages/confirm-transaction/conf-tx.js
@@ -12,6 +12,7 @@ import Loading from '../../components/ui/loading-screen';
 import { getMostRecentOverviewPage } from '../../ducks/history/history';
 import { MESSAGE_TYPE } from '../../../shared/constants/app';
 import { TRANSACTION_STATUSES } from '../../../shared/constants/transaction';
+import { getSendTo } from '../../ducks/send';
 
 function mapStateToProps(state) {
   const { metamask, appState } = state;
@@ -38,7 +39,7 @@ function mapStateToProps(state) {
     unapprovedMsgCount,
     unapprovedPersonalMsgCount,
     unapprovedTypedMessagesCount,
-    send: state.send,
+    sendTo: getSendTo(state),
     currentNetworkTxList: state.metamask.currentNetworkTxList,
   };
 }
@@ -68,9 +69,7 @@ class ConfirmTxScreen extends Component {
     history: PropTypes.object,
     identities: PropTypes.object,
     dispatch: PropTypes.func.isRequired,
-    send: PropTypes.shape({
-      to: PropTypes.string,
-    }).isRequired,
+    sendTo: PropTypes.string,
   };
 
   getUnapprovedMessagesTotal() {
@@ -182,13 +181,13 @@ class ConfirmTxScreen extends Component {
       mostRecentOverviewPage,
       network,
       chainId,
-      send,
+      sendTo,
     } = this.props;
     const unconfTxList = txHelper(unapprovedTxs, {}, {}, {}, network, chainId);
 
     if (
       unconfTxList.length === 0 &&
-      !send.to &&
+      !sendTo &&
       this.getUnapprovedMessagesTotal() === 0
     ) {
       history.push(mostRecentOverviewPage);
@@ -201,7 +200,7 @@ class ConfirmTxScreen extends Component {
       network,
       chainId,
       currentNetworkTxList,
-      send,
+      sendTo,
       history,
       match: { params: { id: transactionId } = {} },
       mostRecentOverviewPage,
@@ -241,7 +240,7 @@ class ConfirmTxScreen extends Component {
 
     if (
       unconfTxList.length === 0 &&
-      !send.to &&
+      !sendTo &&
       this.getUnapprovedMessagesTotal() === 0
     ) {
       this.props.history.push(mostRecentOverviewPage);
diff --git a/ui/pages/confirm-transaction/confirm-transaction.component.js b/ui/pages/confirm-transaction/confirm-transaction.component.js
index b88424cc7..5bc374edc 100644
--- a/ui/pages/confirm-transaction/confirm-transaction.component.js
+++ b/ui/pages/confirm-transaction/confirm-transaction.component.js
@@ -35,7 +35,7 @@ export default class ConfirmTransaction extends Component {
   static propTypes = {
     history: PropTypes.object.isRequired,
     totalUnapprovedCount: PropTypes.number.isRequired,
-    send: PropTypes.object,
+    sendTo: PropTypes.string,
     setTransactionToConfirm: PropTypes.func,
     clearConfirmTransaction: PropTypes.func,
     fetchBasicGasEstimates: PropTypes.func,
@@ -52,7 +52,7 @@ export default class ConfirmTransaction extends Component {
   componentDidMount() {
     const {
       totalUnapprovedCount = 0,
-      send = {},
+      sendTo,
       history,
       mostRecentOverviewPage,
       transaction: { txParams: { data, to } = {} } = {},
@@ -64,7 +64,7 @@ export default class ConfirmTransaction extends Component {
       isTokenMethodAction,
     } = this.props;
 
-    if (!totalUnapprovedCount && !send.to) {
+    if (!totalUnapprovedCount && !sendTo) {
       history.replace(mostRecentOverviewPage);
       return;
     }
diff --git a/ui/pages/confirm-transaction/confirm-transaction.container.js b/ui/pages/confirm-transaction/confirm-transaction.container.js
index b04ee76fa..bf0020c64 100644
--- a/ui/pages/confirm-transaction/confirm-transaction.container.js
+++ b/ui/pages/confirm-transaction/confirm-transaction.container.js
@@ -15,17 +15,18 @@ import {
 } from '../../store/actions';
 import { unconfirmedTransactionsListSelector } from '../../selectors';
 import { getMostRecentOverviewPage } from '../../ducks/history/history';
+import { getSendTo } from '../../ducks/send';
 import ConfirmTransaction from './confirm-transaction.component';
 
 const mapStateToProps = (state, ownProps) => {
   const {
     metamask: { unapprovedTxs },
-    send,
   } = state;
   const {
     match: { params = {} },
   } = ownProps;
   const { id } = params;
+  const sendTo = getSendTo(state);
 
   const unconfirmedTransactions = unconfirmedTransactionsListSelector(state);
   const totalUnconfirmed = unconfirmedTransactions.length;
@@ -36,7 +37,7 @@ const mapStateToProps = (state, ownProps) => {
 
   return {
     totalUnapprovedCount: totalUnconfirmed,
-    send,
+    sendTo,
     unapprovedTxs,
     id,
     mostRecentOverviewPage: getMostRecentOverviewPage(state),
diff --git a/ui/pages/send/index.js b/ui/pages/send/index.js
index 36fa285d4..2fc7580b7 100644
--- a/ui/pages/send/index.js
+++ b/ui/pages/send/index.js
@@ -1 +1 @@
-export { default } from './send.container';
+export { default } from './send';
diff --git a/ui/pages/send/send-content/add-recipient/add-recipient.component.js b/ui/pages/send/send-content/add-recipient/add-recipient.component.js
index da7999c94..322dca677 100644
--- a/ui/pages/send/send-content/add-recipient/add-recipient.component.js
+++ b/ui/pages/send/send-content/add-recipient/add-recipient.component.js
@@ -8,26 +8,28 @@ import RecipientGroup from '../../../../components/app/contact-list/recipient-gr
 import { ellipsify } from '../../send.utils';
 import Button from '../../../../components/ui/button';
 import Confusable from '../../../../components/ui/confusable';
-import {
-  isBurnAddress,
-  isValidHexAddress,
-} from '../../../../../shared/modules/hexstring-utils';
 
 export default class AddRecipient extends Component {
   static propTypes = {
-    query: PropTypes.string,
+    userInput: PropTypes.string,
     ownedAccounts: PropTypes.array,
     addressBook: PropTypes.array,
-    updateGas: PropTypes.func,
-    updateSendTo: PropTypes.func,
+    updateRecipient: PropTypes.func,
     ensResolution: PropTypes.string,
-    toError: PropTypes.string,
-    toWarning: PropTypes.string,
-    ensResolutionError: PropTypes.string,
+    ensError: PropTypes.string,
+    ensWarning: PropTypes.string,
     addressBookEntryName: PropTypes.string,
     contacts: PropTypes.array,
     nonContacts: PropTypes.array,
-    setInternalSearch: PropTypes.func,
+    useMyAccountsForRecipientSearch: PropTypes.func,
+    useContactListForRecipientSearch: PropTypes.func,
+    isUsingMyAccountsForRecipientSearch: PropTypes.bool,
+    recipient: PropTypes.shape({
+      address: PropTypes.string,
+      nickname: PropTypes.nickname,
+      error: PropTypes.string,
+      warning: PropTypes.string,
+    }),
   };
 
   constructor(props) {
@@ -61,60 +63,58 @@ export default class AddRecipient extends Component {
     metricsEvent: PropTypes.func,
   };
 
-  state = {
-    isShowingTransfer: false,
-  };
-
-  selectRecipient = (to, nickname = '') => {
-    const { updateSendTo, updateGas } = this.props;
-
-    updateSendTo(to, nickname);
-    updateGas({ to });
+  selectRecipient = (address, nickname = '') => {
+    this.props.updateRecipient({ address, nickname });
   };
 
   searchForContacts = () => {
-    const { query, contacts } = this.props;
+    const { userInput, contacts } = this.props;
 
     let _contacts = contacts;
 
-    if (query) {
+    if (userInput) {
       this.contactFuse.setCollection(contacts);
-      _contacts = this.contactFuse.search(query);
+      _contacts = this.contactFuse.search(userInput);
     }
 
     return _contacts;
   };
 
   searchForRecents = () => {
-    const { query, nonContacts } = this.props;
+    const { userInput, nonContacts } = this.props;
 
     let _nonContacts = nonContacts;
 
-    if (query) {
+    if (userInput) {
       this.recentFuse.setCollection(nonContacts);
-      _nonContacts = this.recentFuse.search(query);
+      _nonContacts = this.recentFuse.search(userInput);
     }
 
     return _nonContacts;
   };
 
   render() {
-    const { ensResolution, query, addressBookEntryName } = this.props;
-    const { isShowingTransfer } = this.state;
+    const {
+      ensResolution,
+      recipient,
+      userInput,
+      addressBookEntryName,
+      isUsingMyAccountsForRecipientSearch,
+    } = this.props;
 
     let content;
 
-    if (
-      !isBurnAddress(query) &&
-      isValidHexAddress(query, { mixedCaseUseChecksum: true })
-    ) {
-      content = this.renderExplicitAddress(query);
+    if (recipient.address) {
+      content = this.renderExplicitAddress(
+        recipient.address,
+        recipient.nickname,
+      );
     } else if (ensResolution) {
       content = this.renderExplicitAddress(
         ensResolution,
-        addressBookEntryName || query,
+        addressBookEntryName || userInput,
       );
-    } else if (isShowingTransfer) {
+    } else if (isUsingMyAccountsForRecipientSearch) {
       content = this.renderTransfer();
     }
 
@@ -150,15 +150,18 @@ export default class AddRecipient extends Component {
 
   renderTransfer() {
     let { ownedAccounts } = this.props;
-    const { query, setInternalSearch } = this.props;
+    const {
+      userInput,
+      useContactListForRecipientSearch,
+      isUsingMyAccountsForRecipientSearch,
+    } = this.props;
     const { t } = this.context;
-    const { isShowingTransfer } = this.state;
 
-    if (isShowingTransfer && query) {
+    if (isUsingMyAccountsForRecipientSearch && userInput) {
       ownedAccounts = ownedAccounts.filter(
         (item) =>
-          item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 ||
-          item.address.toLowerCase().indexOf(query.toLowerCase()) > -1,
+          item.name.toLowerCase().indexOf(userInput.toLowerCase()) > -1 ||
+          item.address.toLowerCase().indexOf(userInput.toLowerCase()) > -1,
       );
     }
 
@@ -167,10 +170,7 @@ export default class AddRecipient extends Component {
         <Button
           type="link"
           className="send__select-recipient-wrapper__list__link"
-          onClick={() => {
-            setInternalSearch(false);
-            this.setState({ isShowingTransfer: false });
-          }}
+          onClick={useContactListForRecipientSearch}
         >
           <div className="send__select-recipient-wrapper__list__back-caret" />
           {t('backToAll')}
@@ -187,10 +187,10 @@ export default class AddRecipient extends Component {
   renderMain() {
     const { t } = this.context;
     const {
-      query,
+      userInput,
       ownedAccounts = [],
       addressBook,
-      setInternalSearch,
+      useMyAccountsForRecipientSearch,
     } = this.props;
 
     return (
@@ -201,14 +201,11 @@ export default class AddRecipient extends Component {
           searchForRecents={this.searchForRecents.bind(this)}
           selectRecipient={this.selectRecipient.bind(this)}
         >
-          {ownedAccounts && ownedAccounts.length > 1 && !query && (
+          {ownedAccounts && ownedAccounts.length > 1 && !userInput && (
             <Button
               type="link"
               className="send__select-recipient-wrapper__list__link"
-              onClick={() => {
-                setInternalSearch(true);
-                this.setState({ isShowingTransfer: true });
-              }}
+              onClick={useMyAccountsForRecipientSearch}
             >
               {t('transferBetweenAccounts')}
             </Button>
@@ -219,30 +216,19 @@ export default class AddRecipient extends Component {
   }
 
   renderDialogs() {
-    const {
-      toError,
-      toWarning,
-      ensResolutionError,
-      ensResolution,
-    } = this.props;
+    const { ensError, recipient, ensWarning } = this.props;
     const { t } = this.context;
 
-    if (ensResolutionError) {
+    if (ensError || (recipient.error && recipient.error !== 'required')) {
       return (
         <Dialog type="error" className="send__error-dialog">
-          {ensResolutionError}
+          {t(ensError ?? recipient.error)}
         </Dialog>
       );
-    } else if (toError && toError !== 'required' && !ensResolution) {
-      return (
-        <Dialog type="error" className="send__error-dialog">
-          {t(toError)}
-        </Dialog>
-      );
-    } else if (toWarning) {
+    } else if (ensWarning || recipient.warning) {
       return (
         <Dialog type="warning" className="send__error-dialog">
-          {t(toWarning)}
+          {t(ensWarning ?? recipient.warning)}
         </Dialog>
       );
     }
diff --git a/ui/pages/send/send-content/add-recipient/add-recipient.component.test.js b/ui/pages/send/send-content/add-recipient/add-recipient.component.test.js
index ec2772f13..7c58d36fa 100644
--- a/ui/pages/send/send-content/add-recipient/add-recipient.component.test.js
+++ b/ui/pages/send/send-content/add-recipient/add-recipient.component.test.js
@@ -5,30 +5,24 @@ import Dialog from '../../../../components/ui/dialog';
 import AddRecipient from './add-recipient.component';
 
 const propsMethodSpies = {
-  closeToDropdown: sinon.spy(),
-  openToDropdown: sinon.spy(),
-  updateGas: sinon.spy(),
-  updateSendTo: sinon.spy(),
-  updateSendToError: sinon.spy(),
-  updateSendToWarning: sinon.spy(),
+  updateRecipient: sinon.spy(),
+  useMyAccountsForRecipientSearch: sinon.spy(),
+  useContactListForRecipientSearch: sinon.spy(),
 };
 
 describe('AddRecipient Component', () => {
   let wrapper;
-  let instance;
 
   beforeEach(() => {
     wrapper = shallow(
       <AddRecipient
-        closeToDropdown={propsMethodSpies.closeToDropdown}
-        inError={false}
-        inWarning={false}
-        network="mockNetwork"
-        openToDropdown={propsMethodSpies.openToDropdown}
-        to="mockTo"
-        toAccounts={['mockAccount']}
-        toDropdownOpen={false}
-        updateGas={propsMethodSpies.updateGas}
+        userInput=""
+        recipient={{
+          address: '',
+          nickname: '',
+          error: '',
+          warning: '',
+        }}
         updateSendTo={propsMethodSpies.updateSendTo}
         updateSendToError={propsMethodSpies.updateSendToError}
         updateSendToWarning={propsMethodSpies.updateSendToWarning}
@@ -53,34 +47,12 @@ describe('AddRecipient Component', () => {
       />,
       { context: { t: (str) => `${str}_t` } },
     );
-    instance = wrapper.instance();
   });
 
   afterEach(() => {
-    propsMethodSpies.closeToDropdown.resetHistory();
-    propsMethodSpies.openToDropdown.resetHistory();
-    propsMethodSpies.updateSendTo.resetHistory();
-    propsMethodSpies.updateSendToError.resetHistory();
-    propsMethodSpies.updateSendToWarning.resetHistory();
-    propsMethodSpies.updateGas.resetHistory();
-  });
-
-  describe('selectRecipient', () => {
-    it('should call updateSendTo', () => {
-      expect(propsMethodSpies.updateSendTo.callCount).toStrictEqual(0);
-      instance.selectRecipient('mockTo2', 'mockNickname');
-      expect(propsMethodSpies.updateSendTo.callCount).toStrictEqual(1);
-      expect(propsMethodSpies.updateSendTo.getCall(0).args).toStrictEqual([
-        'mockTo2',
-        'mockNickname',
-      ]);
-    });
-
-    it('should call updateGas if there is no to error', () => {
-      expect(propsMethodSpies.updateGas.callCount).toStrictEqual(0);
-      instance.selectRecipient(false);
-      expect(propsMethodSpies.updateGas.callCount).toStrictEqual(1);
-    });
+    propsMethodSpies.updateRecipient.resetHistory();
+    propsMethodSpies.useMyAccountsForRecipientSearch.resetHistory();
+    propsMethodSpies.useContactListForRecipientSearch.resetHistory();
   });
 
   describe('render', () => {
@@ -104,6 +76,7 @@ describe('AddRecipient Component', () => {
 
     it('should render transfer', () => {
       wrapper.setProps({
+        isUsingMyAccountsForRecipientSearch: true,
         ownedAccounts: [
           { address: '0x123', name: '123' },
           { address: '0x124', name: '124' },
@@ -163,7 +136,7 @@ describe('AddRecipient Component', () => {
     it('should render error when query has no results', () => {
       wrapper.setProps({
         addressBook: [],
-        toError: 'bad',
+        ensError: 'bad',
         contacts: [],
         nonContacts: [],
       });
@@ -178,8 +151,7 @@ describe('AddRecipient Component', () => {
     it('should render error when query has ens does not resolve', () => {
       wrapper.setProps({
         addressBook: [],
-        toError: 'bad',
-        ensResolutionError: 'very bad',
+        ensError: 'very bad',
         contacts: [],
         nonContacts: [],
       });
@@ -187,20 +159,20 @@ describe('AddRecipient Component', () => {
       const dialog = wrapper.find(Dialog);
 
       expect(dialog.props().type).toStrictEqual('error');
-      expect(dialog.props().children).toStrictEqual('very bad');
+      expect(dialog.props().children).toStrictEqual('very bad_t');
       expect(dialog).toHaveLength(1);
     });
 
-    it('should not render error when ens resolved', () => {
+    it('should render error when ens resolved but ens error exists', () => {
       wrapper.setProps({
         addressBook: [],
-        toError: 'bad',
+        ensError: 'bad',
         ensResolution: '0x128',
       });
 
       const dialog = wrapper.find(Dialog);
 
-      expect(dialog).toHaveLength(0);
+      expect(dialog).toHaveLength(1);
     });
   });
 });
diff --git a/ui/pages/send/send-content/add-recipient/add-recipient.container.js b/ui/pages/send/send-content/add-recipient/add-recipient.container.js
index c131ebb7f..27353e778 100644
--- a/ui/pages/send/send-content/add-recipient/add-recipient.container.js
+++ b/ui/pages/send/send-content/add-recipient/add-recipient.container.js
@@ -1,19 +1,30 @@
 import { connect } from 'react-redux';
 import {
-  getSendEnsResolution,
-  getSendEnsResolutionError,
   accountsWithSendEtherInfoSelector,
   getAddressBook,
   getAddressBookEntry,
 } from '../../../../selectors';
 
-import { updateSendTo } from '../../../../ducks/send/send.duck';
+import {
+  updateRecipient,
+  updateRecipientUserInput,
+  useMyAccountsForRecipientSearch,
+  useContactListForRecipientSearch,
+  getIsUsingMyAccountForRecipientSearch,
+  getRecipientUserInput,
+  getRecipient,
+} from '../../../../ducks/send';
+import {
+  getEnsResolution,
+  getEnsError,
+  getEnsWarning,
+} from '../../../../ducks/ens';
 import AddRecipient from './add-recipient.component';
 
 export default connect(mapStateToProps, mapDispatchToProps)(AddRecipient);
 
 function mapStateToProps(state) {
-  const ensResolution = getSendEnsResolution(state);
+  const ensResolution = getEnsResolution(state);
 
   let addressBookEntryName = '';
   if (ensResolution) {
@@ -32,14 +43,27 @@ function mapStateToProps(state) {
     addressBookEntryName,
     contacts: addressBook.filter(({ name }) => Boolean(name)),
     ensResolution,
-    ensResolutionError: getSendEnsResolutionError(state),
+    ensError: getEnsError(state),
+    ensWarning: getEnsWarning(state),
     nonContacts: addressBook.filter(({ name }) => !name),
     ownedAccounts,
+    isUsingMyAccountsForRecipientSearch: getIsUsingMyAccountForRecipientSearch(
+      state,
+    ),
+    userInput: getRecipientUserInput(state),
+    recipient: getRecipient(state),
   };
 }
 
 function mapDispatchToProps(dispatch) {
   return {
-    updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)),
+    updateRecipient: ({ address, nickname }) =>
+      dispatch(updateRecipient({ address, nickname })),
+    updateRecipientUserInput: (newInput) =>
+      dispatch(updateRecipientUserInput(newInput)),
+    useMyAccountsForRecipientSearch: () =>
+      dispatch(useMyAccountsForRecipientSearch()),
+    useContactListForRecipientSearch: () =>
+      dispatch(useContactListForRecipientSearch()),
   };
 }
diff --git a/ui/pages/send/send-content/add-recipient/add-recipient.container.test.js b/ui/pages/send/send-content/add-recipient/add-recipient.container.test.js
index 1d8e05bdc..81db6cf28 100644
--- a/ui/pages/send/send-content/add-recipient/add-recipient.container.test.js
+++ b/ui/pages/send/send-content/add-recipient/add-recipient.container.test.js
@@ -1,6 +1,3 @@
-import sinon from 'sinon';
-import { updateSendTo } from '../../../../ducks/send/send.duck';
-
 let mapStateToProps;
 let mapDispatchToProps;
 
@@ -13,8 +10,6 @@ jest.mock('react-redux', () => ({
 }));
 
 jest.mock('../../../../selectors', () => ({
-  getSendEnsResolution: (s) => `mockSendEnsResolution:${s}`,
-  getSendEnsResolutionError: (s) => `mockSendEnsResolutionError:${s}`,
   getAddressBook: (s) => [{ name: `mockAddressBook:${s}` }],
   getAddressBookEntry: (s) => `mockAddressBookEntry:${s}`,
   accountsWithSendEtherInfoSelector: () => [
@@ -23,8 +18,26 @@ jest.mock('../../../../selectors', () => ({
   ],
 }));
 
-jest.mock('../../../../ducks/send/send.duck.js', () => ({
-  updateSendTo: jest.fn(),
+jest.mock('../../../../ducks/ens', () => ({
+  getEnsResolution: (s) => `mockSendEnsResolution:${s}`,
+  getEnsError: (s) => `mockSendEnsResolutionError:${s}`,
+  getEnsWarning: (s) => `mockSendEnsResolutionWarning:${s}`,
+  useMyAccountsForRecipientSearch: (s) =>
+    `useMyAccountsForRecipientSearch:${s}`,
+}));
+
+jest.mock('../../../../ducks/send', () => ({
+  updateRecipient: ({ address, nickname }) =>
+    `{mockUpdateRecipient: {address: ${address}, nickname: ${nickname}}}`,
+  updateRecipientUserInput: (s) => `mockUpdateRecipientUserInput:${s}`,
+  useMyAccountsForRecipientSearch: (s) =>
+    `mockUseMyAccountsForRecipientSearch:${s}`,
+  useContactListForRecipientSearch: (s) =>
+    `mockUseContactListForRecipientSearch:${s}`,
+  getIsUsingMyAccountForRecipientSearch: (s) =>
+    `mockGetIsUsingMyAccountForRecipientSearch:${s}`,
+  getRecipientUserInput: (s) => `mockRecipientUserInput:${s}`,
+  getRecipient: (s) => `mockRecipient:${s}`,
 }));
 
 require('./add-recipient.container.js');
@@ -34,29 +47,40 @@ describe('add-recipient container', () => {
     it('should map the correct properties to props', () => {
       expect(mapStateToProps('mockState')).toStrictEqual({
         addressBook: [{ name: 'mockAddressBook:mockState' }],
+        addressBookEntryName: undefined,
         contacts: [{ name: 'mockAddressBook:mockState' }],
         ensResolution: 'mockSendEnsResolution:mockState',
-        ensResolutionError: 'mockSendEnsResolutionError:mockState',
-        ownedAccounts: [
-          { name: `account1:mockState` },
-          { name: `account2:mockState` },
-        ],
-        addressBookEntryName: undefined,
+        ensError: 'mockSendEnsResolutionError:mockState',
+        ensWarning: 'mockSendEnsResolutionWarning:mockState',
         nonContacts: [],
+        ownedAccounts: [
+          { name: 'account1:mockState' },
+          { name: 'account2:mockState' },
+        ],
+        isUsingMyAccountsForRecipientSearch:
+          'mockGetIsUsingMyAccountForRecipientSearch:mockState',
+        userInput: 'mockRecipientUserInput:mockState',
+        recipient: 'mockRecipient:mockState',
       });
     });
   });
 
   describe('mapDispatchToProps()', () => {
-    describe('updateSendTo()', () => {
-      const dispatchSpy = sinon.spy();
+    describe('updateRecipient()', () => {
+      const dispatchSpy = jest.fn();
+
       const mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy);
 
       it('should dispatch an action', () => {
-        mapDispatchToPropsObject.updateSendTo('mockTo', 'mockNickname');
-        expect(dispatchSpy.calledOnce).toStrictEqual(true);
-        expect(updateSendTo).toHaveBeenCalled();
-        expect(updateSendTo).toHaveBeenCalledWith('mockTo', 'mockNickname');
+        mapDispatchToPropsObject.updateRecipient({
+          address: 'mockAddress',
+          nickname: 'mockNickname',
+        });
+
+        expect(dispatchSpy).toHaveBeenCalledTimes(1);
+        expect(dispatchSpy.mock.calls[0][0]).toStrictEqual(
+          '{mockUpdateRecipient: {address: mockAddress, nickname: mockNickname}}',
+        );
       });
     });
   });
diff --git a/ui/pages/send/send-content/add-recipient/add-recipient.js b/ui/pages/send/send-content/add-recipient/add-recipient.js
deleted file mode 100644
index 5141fda1d..000000000
--- a/ui/pages/send/send-content/add-recipient/add-recipient.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import contractMap from '@metamask/contract-metadata';
-import { isConfusing } from 'unicode-confusables';
-import {
-  REQUIRED_ERROR,
-  INVALID_RECIPIENT_ADDRESS_ERROR,
-  KNOWN_RECIPIENT_ADDRESS_ERROR,
-  INVALID_RECIPIENT_ADDRESS_NOT_ETH_NETWORK_ERROR,
-  CONFUSING_ENS_ERROR,
-  CONTRACT_ADDRESS_ERROR,
-} from '../../send.constants';
-
-import {
-  checkExistingAddresses,
-  isValidDomainName,
-  isOriginContractAddress,
-  isDefaultMetaMaskChain,
-} from '../../../../helpers/utils/util';
-import {
-  isBurnAddress,
-  isValidHexAddress,
-  toChecksumHexAddress,
-} from '../../../../../shared/modules/hexstring-utils';
-
-export function getToErrorObject(to, sendTokenAddress, chainId) {
-  let toError = null;
-  if (!to) {
-    toError = REQUIRED_ERROR;
-  } else if (
-    isBurnAddress(to) ||
-    (!isValidHexAddress(to, { mixedCaseUseChecksum: true }) &&
-      !isValidDomainName(to))
-  ) {
-    toError = isDefaultMetaMaskChain(chainId)
-      ? INVALID_RECIPIENT_ADDRESS_ERROR
-      : INVALID_RECIPIENT_ADDRESS_NOT_ETH_NETWORK_ERROR;
-  } else if (isOriginContractAddress(to, sendTokenAddress)) {
-    toError = CONTRACT_ADDRESS_ERROR;
-  }
-
-  return { to: toError };
-}
-
-export function getToWarningObject(to, tokens = [], sendToken = null) {
-  let toWarning = null;
-  if (
-    sendToken &&
-    (toChecksumHexAddress(to) in contractMap ||
-      checkExistingAddresses(to, tokens))
-  ) {
-    toWarning = KNOWN_RECIPIENT_ADDRESS_ERROR;
-  } else if (isValidDomainName(to) && isConfusing(to)) {
-    toWarning = CONFUSING_ENS_ERROR;
-  }
-
-  return { to: toWarning };
-}
diff --git a/ui/pages/send/send-content/add-recipient/add-recipient.utils.test.js b/ui/pages/send/send-content/add-recipient/add-recipient.utils.test.js
deleted file mode 100644
index 4a9605d32..000000000
--- a/ui/pages/send/send-content/add-recipient/add-recipient.utils.test.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import {
-  REQUIRED_ERROR,
-  INVALID_RECIPIENT_ADDRESS_ERROR,
-  KNOWN_RECIPIENT_ADDRESS_ERROR,
-  CONFUSING_ENS_ERROR,
-  CONTRACT_ADDRESS_ERROR,
-} from '../../send.constants';
-import { getToErrorObject, getToWarningObject } from './add-recipient';
-
-jest.mock('../../../../helpers/utils/util', () => ({
-  isDefaultMetaMaskChain: jest.fn().mockReturnValue(true),
-  isEthNetwork: jest.fn().mockReturnValue(true),
-  checkExistingAddresses: jest.fn().mockReturnValue(true),
-  isValidDomainName: jest.requireActual('../../../../helpers/utils/util')
-    .isValidDomainName,
-  isOriginContractAddress: jest.requireActual('../../../../helpers/utils/util')
-    .isOriginContractAddress,
-}));
-
-jest.mock('../../../../../shared/modules/hexstring-utils', () => ({
-  isValidHexAddress: jest.fn((to) =>
-    Boolean(to.match(/^[0xabcdef123456798]+$/u)),
-  ),
-  isBurnAddress: jest.fn(() => false),
-  toChecksumHexAddress: jest.fn((input) => input),
-}));
-
-describe('add-recipient utils', () => {
-  describe('getToErrorObject()', () => {
-    it('should return a required error if "to" is falsy', () => {
-      expect(getToErrorObject(null)).toStrictEqual({
-        to: REQUIRED_ERROR,
-      });
-    });
-
-    it('should return an invalid recipient error if "to" is truthy but invalid', () => {
-      expect(getToErrorObject('mockInvalidTo')).toStrictEqual({
-        to: INVALID_RECIPIENT_ADDRESS_ERROR,
-      });
-    });
-
-    it('should return null if "to" is truthy and valid', () => {
-      expect(getToErrorObject('0xabc123')).toStrictEqual({
-        to: null,
-      });
-    });
-
-    it('should return a contract address error if the recipient is the same as the tokens contract address', () => {
-      expect(getToErrorObject('0xabc123', '0xabc123')).toStrictEqual({
-        to: CONTRACT_ADDRESS_ERROR,
-      });
-    });
-
-    it('should return null if the recipient address is not the token contract address', () => {
-      expect(getToErrorObject('0xabc123', '0xabc456')).toStrictEqual({
-        to: null,
-      });
-    });
-  });
-
-  describe('getToWarningObject()', () => {
-    it('should return a known address recipient error if "to" is a token address', () => {
-      expect(
-        getToWarningObject('0xabc123', [{ address: '0xabc123' }], {
-          address: '0xabc123',
-        }),
-      ).toStrictEqual({
-        to: KNOWN_RECIPIENT_ADDRESS_ERROR,
-      });
-    });
-
-    it('should null if "to" is a token address but sendToken is falsy', () => {
-      expect(
-        getToWarningObject('0xabc123', [{ address: '0xabc123' }]),
-      ).toStrictEqual({
-        to: null,
-      });
-    });
-
-    it('should return a known address recipient error if "to" is part of contract metadata', () => {
-      expect(
-        getToWarningObject(
-          '0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359',
-          [{ address: '0xabc123' }],
-          { address: '0xabc123' },
-        ),
-      ).toStrictEqual({
-        to: KNOWN_RECIPIENT_ADDRESS_ERROR,
-      });
-    });
-    it('should null if "to" is part of contract metadata but sendToken is falsy', () => {
-      expect(
-        getToWarningObject(
-          '0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359',
-          [{ address: '0xabc123' }],
-          { address: '0xabc123' },
-        ),
-      ).toStrictEqual({
-        to: KNOWN_RECIPIENT_ADDRESS_ERROR,
-      });
-    });
-
-    it('should warn if name is a valid domain and confusable', () => {
-      expect(getToWarningObject('demo.eth')).toStrictEqual({
-        to: CONFUSING_ENS_ERROR,
-      });
-    });
-
-    it('should not warn if name is a valid domain and not confusable', () => {
-      expect(getToWarningObject('vitalik.eth')).toStrictEqual({
-        to: null,
-      });
-    });
-  });
-});
diff --git a/ui/pages/send/send-content/add-recipient/ens-input.component.js b/ui/pages/send/send-content/add-recipient/ens-input.component.js
index 658ac9bde..bb1c7f3e7 100644
--- a/ui/pages/send/send-content/add-recipient/ens-input.component.js
+++ b/ui/pages/send/send-content/add-recipient/ens-input.component.js
@@ -2,146 +2,39 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import { debounce } from 'lodash';
-import copyToClipboard from 'copy-to-clipboard/index';
-import ENS from 'ethjs-ens';
-import networkMap from 'ethereum-ens-network-map';
-import log from 'loglevel';
-import { isHexString } from 'ethereumjs-util';
 import { ellipsify } from '../../send.utils';
 import { isValidDomainName } from '../../../../helpers/utils/util';
-import { MAINNET_NETWORK_ID } from '../../../../../shared/constants/network';
 import {
   isBurnAddress,
   isValidHexAddress,
 } from '../../../../../shared/modules/hexstring-utils';
 
-// Local Constants
-const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000';
-const ZERO_X_ERROR_ADDRESS = '0x';
-
 export default class EnsInput extends Component {
   static contextTypes = {
     t: PropTypes.func,
+    metricsEvent: PropTypes.func,
   };
 
   static propTypes = {
     className: PropTypes.string,
-    network: PropTypes.string,
     selectedAddress: PropTypes.string,
     selectedName: PropTypes.string,
-    onChange: PropTypes.func,
-    updateEnsResolution: PropTypes.func,
     scanQrCode: PropTypes.func,
-    updateEnsResolutionError: PropTypes.func,
     onPaste: PropTypes.func,
-    onReset: PropTypes.func,
     onValidAddressTyped: PropTypes.func,
-    contact: PropTypes.object,
-    value: PropTypes.string,
     internalSearch: PropTypes.bool,
-  };
-
-  state = {
-    input: '',
-    toError: null,
-    ensResolution: undefined,
+    userInput: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+    onReset: PropTypes.func.isRequired,
+    lookupEnsName: PropTypes.func.isRequired,
+    initializeEnsSlice: PropTypes.func.isRequired,
+    resetEnsResolution: PropTypes.func.isRequired,
   };
 
   componentDidMount() {
-    const { network, internalSearch } = this.props;
-    const networkHasEnsSupport = getNetworkEnsSupport(network);
-    this.setState({ ensResolution: ZERO_ADDRESS });
-
-    if (networkHasEnsSupport && !internalSearch) {
-      const provider = global.ethereumProvider;
-      this.ens = new ENS({ provider, network });
-      this.checkName = debounce(this.lookupEnsName, 200);
-    }
+    this.props.initializeEnsSlice();
   }
 
-  componentDidUpdate(prevProps) {
-    const { input } = this.state;
-    const { network, value, internalSearch } = this.props;
-
-    let newValue;
-
-    // Set the value of our input based on QR code provided by parent
-    const newProvidedValue = input !== value && prevProps.value !== value;
-    if (newProvidedValue) {
-      newValue = value;
-    }
-
-    if (prevProps.network !== network) {
-      if (getNetworkEnsSupport(network)) {
-        const provider = global.ethereumProvider;
-        this.ens = new ENS({ provider, network });
-        this.checkName = debounce(this.lookupEnsName, 200);
-        if (!newProvidedValue) {
-          newValue = input;
-        }
-      } else {
-        // ens is null on mount on a network that does not have ens support
-        // this is intended to prevent accidental lookup of domains across
-        // networks
-        this.ens = null;
-        this.checkName = null;
-      }
-    }
-
-    if (newValue !== undefined) {
-      this.onChange({ target: { value: newValue } });
-    }
-    if (!internalSearch && prevProps.internalSearch) {
-      this.resetInput();
-    }
-  }
-
-  resetInput = () => {
-    const {
-      updateEnsResolution,
-      updateEnsResolutionError,
-      onReset,
-    } = this.props;
-    this.onChange({ target: { value: '' } });
-    onReset();
-    updateEnsResolution('');
-    updateEnsResolutionError('');
-  };
-
-  lookupEnsName = (ensName) => {
-    const { network } = this.props;
-    const recipient = ensName.trim();
-
-    log.info(`ENS attempting to resolve name: ${recipient}`);
-    this.ens
-      .lookup(recipient)
-      .then((address) => {
-        if (address === ZERO_ADDRESS) {
-          throw new Error(this.context.t('noAddressForName'));
-        }
-        if (address === ZERO_X_ERROR_ADDRESS) {
-          throw new Error(this.context.t('ensRegistrationError'));
-        }
-        this.props.updateEnsResolution(address);
-      })
-      .catch((reason) => {
-        if (
-          isValidDomainName(recipient) &&
-          reason.message === 'ENS name not defined.'
-        ) {
-          this.props.updateEnsResolutionError(
-            network === MAINNET_NETWORK_ID
-              ? this.context.t('noAddressForName')
-              : this.context.t('ensNotFoundOnCurrentNetwork'),
-          );
-        } else {
-          log.error(reason);
-          this.props.updateEnsResolutionError(reason.message);
-        }
-      });
-  };
-
   onPaste = (event) => {
     event.clipboardData.items[0].getAsString((text) => {
       if (
@@ -155,40 +48,23 @@ export default class EnsInput extends Component {
 
   onChange = (e) => {
     const {
-      network,
-      onChange,
-      updateEnsResolution,
-      updateEnsResolutionError,
       onValidAddressTyped,
       internalSearch,
+      onChange,
+      lookupEnsName,
+      resetEnsResolution,
     } = this.props;
     const input = e.target.value;
-    const networkHasEnsSupport = getNetworkEnsSupport(network);
 
-    this.setState({ input }, () => onChange(input));
+    onChange(input);
     if (internalSearch) {
       return null;
     }
     // Empty ENS state if input is empty
     // maybe scan ENS
 
-    if (
-      !networkHasEnsSupport &&
-      !(
-        isBurnAddress(input) === false &&
-        isValidHexAddress(input, { mixedCaseUseChecksum: true })
-      ) &&
-      !isHexString(input)
-    ) {
-      updateEnsResolution('');
-      updateEnsResolutionError(
-        networkHasEnsSupport ? '' : 'Network does not support ENS',
-      );
-      return null;
-    }
-
     if (isValidDomainName(input)) {
-      this.lookupEnsName(input);
+      lookupEnsName(input);
     } else if (
       onValidAddressTyped &&
       !isBurnAddress(input) &&
@@ -196,20 +72,16 @@ export default class EnsInput extends Component {
     ) {
       onValidAddressTyped(input);
     } else {
-      updateEnsResolution('');
-      updateEnsResolutionError('');
+      resetEnsResolution();
     }
     return null;
   };
 
   render() {
     const { t } = this.context;
-    const { className, selectedAddress } = this.props;
-    const { input } = this.state;
+    const { className, selectedAddress, selectedName, userInput } = this.props;
 
-    if (selectedAddress) {
-      return this.renderSelected();
-    }
+    const hasSelectedAddress = Boolean(selectedAddress);
 
     return (
       <div className={classnames('ens-input', className)}>
@@ -217,135 +89,61 @@ export default class EnsInput extends Component {
           className={classnames('ens-input__wrapper', {
             'ens-input__wrapper__status-icon--error': false,
             'ens-input__wrapper__status-icon--valid': false,
+            'ens-input__wrapper--valid': hasSelectedAddress,
           })}
         >
-          <div className="ens-input__wrapper__status-icon" />
-          <input
-            className="ens-input__wrapper__input"
-            type="text"
-            dir="auto"
-            placeholder={t('recipientAddressPlaceholder')}
-            onChange={this.onChange}
-            onPaste={this.onPaste}
-            value={selectedAddress || input}
-            autoFocus
-            data-testid="ens-input"
-          />
-          <button
-            className={classnames('ens-input__wrapper__action-icon', {
-              'ens-input__wrapper__action-icon--erase': input,
-              'ens-input__wrapper__action-icon--qrcode': !input,
+          <div
+            className={classnames('ens-input__wrapper__status-icon', {
+              'ens-input__wrapper__status-icon--valid': hasSelectedAddress,
             })}
-            onClick={() => {
-              if (input) {
-                this.resetInput();
-              } else {
-                this.props.scanQrCode();
-              }
-            }}
           />
-        </div>
-      </div>
-    );
-  }
-
-  renderSelected() {
-    const { t } = this.context;
-    const {
-      className,
-      selectedAddress,
-      selectedName,
-      contact = {},
-    } = this.props;
-    const name = contact.name || selectedName;
-
-    return (
-      <div className={classnames('ens-input', className)}>
-        <div className="ens-input__wrapper ens-input__wrapper--valid">
-          <div className="ens-input__wrapper__status-icon ens-input__wrapper__status-icon--valid" />
-          <div
-            className="ens-input__wrapper__input ens-input__wrapper__input--selected"
-            placeholder={t('recipientAddress')}
-            onChange={this.onChange}
-          >
-            <div className="ens-input__selected-input__title">
-              {name || ellipsify(selectedAddress)}
-            </div>
-            {name && (
-              <div className="ens-input__selected-input__subtitle">
-                {selectedAddress}
+          {hasSelectedAddress ? (
+            <>
+              <div className="ens-input__wrapper__input ens-input__wrapper__input--selected">
+                <div className="ens-input__selected-input__title">
+                  {selectedName || ellipsify(selectedAddress)}
+                </div>
+                {selectedName && (
+                  <div className="ens-input__selected-input__subtitle">
+                    {selectedAddress}
+                  </div>
+                )}
               </div>
-            )}
-          </div>
-          <div
-            className="ens-input__wrapper__action-icon ens-input__wrapper__action-icon--erase"
-            onClick={this.resetInput}
-          />
+              <div
+                className="ens-input__wrapper__action-icon ens-input__wrapper__action-icon--erase"
+                onClick={this.props.onReset}
+              />
+            </>
+          ) : (
+            <>
+              <input
+                className="ens-input__wrapper__input"
+                type="text"
+                dir="auto"
+                placeholder={t('recipientAddressPlaceholder')}
+                onChange={this.onChange}
+                onPaste={this.onPaste}
+                value={selectedAddress || userInput}
+                autoFocus
+                data-testid="ens-input"
+              />
+              <button
+                className={classnames('ens-input__wrapper__action-icon', {
+                  'ens-input__wrapper__action-icon--erase': userInput,
+                  'ens-input__wrapper__action-icon--qrcode': !userInput,
+                })}
+                onClick={() => {
+                  if (userInput) {
+                    this.props.onReset();
+                  } else {
+                    this.props.scanQrCode();
+                  }
+                }}
+              />
+            </>
+          )}
         </div>
       </div>
     );
   }
-
-  ensIcon(recipient) {
-    const { hoverText } = this.state;
-
-    return (
-      <span
-        className="#ensIcon"
-        title={hoverText}
-        style={{
-          position: 'absolute',
-          top: '16px',
-          left: '-25px',
-        }}
-      >
-        {this.ensIconContents(recipient)}
-      </span>
-    );
-  }
-
-  ensIconContents() {
-    const { loadingEns, ensFailure, ensResolution, toError } = this.state;
-
-    if (toError) {
-      return null;
-    }
-
-    if (loadingEns) {
-      return (
-        <img
-          src="images/loading.svg"
-          style={{
-            width: '30px',
-            height: '30px',
-            transform: 'translateY(-6px)',
-          }}
-        />
-      );
-    }
-
-    if (ensFailure) {
-      return <i className="fa fa-warning fa-lg warning" />;
-    }
-
-    if (ensResolution && ensResolution !== ZERO_ADDRESS) {
-      return (
-        <i
-          className="fa fa-check-circle fa-lg cursor-pointer"
-          style={{ color: 'green' }}
-          onClick={(event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            copyToClipboard(ensResolution);
-          }}
-        />
-      );
-    }
-
-    return null;
-  }
-}
-
-function getNetworkEnsSupport(network) {
-  return Boolean(networkMap[network]);
 }
diff --git a/ui/pages/send/send-content/add-recipient/ens-input.container.js b/ui/pages/send/send-content/add-recipient/ens-input.container.js
index 90d2c3ff4..ef61fce85 100644
--- a/ui/pages/send/send-content/add-recipient/ens-input.container.js
+++ b/ui/pages/send/send-content/add-recipient/ens-input.container.js
@@ -1,20 +1,18 @@
+import { debounce } from 'lodash';
 import { connect } from 'react-redux';
-import { CHAIN_ID_TO_NETWORK_ID_MAP } from '../../../../../shared/constants/network';
 import {
-  getSendTo,
-  getSendToNickname,
-  getAddressBookEntry,
-  getCurrentChainId,
-} from '../../../../selectors';
+  lookupEnsName,
+  initializeEnsSlice,
+  resetResolution,
+} from '../../../../ducks/ens';
 import EnsInput from './ens-input.component';
 
-export default connect((state) => {
-  const selectedAddress = getSendTo(state);
-  const chainId = getCurrentChainId(state);
+function mapDispatchToProps(dispatch) {
   return {
-    network: CHAIN_ID_TO_NETWORK_ID_MAP[chainId],
-    selectedAddress,
-    selectedName: getSendToNickname(state),
-    contact: getAddressBookEntry(state, selectedAddress),
+    lookupEnsName: debounce((ensName) => dispatch(lookupEnsName(ensName)), 150),
+    initializeEnsSlice: () => dispatch(initializeEnsSlice()),
+    resetEnsResolution: debounce(() => dispatch(resetResolution()), 300),
   };
-})(EnsInput);
+}
+
+export default connect(null, mapDispatchToProps)(EnsInput);
diff --git a/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js b/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
deleted file mode 100644
index 223e6da91..000000000
--- a/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-
-export default class AmountMaxButton extends Component {
-  static propTypes = {
-    balance: PropTypes.string,
-    buttonDataLoading: PropTypes.bool,
-    clearMaxAmount: PropTypes.func,
-    inError: PropTypes.bool,
-    gasTotal: PropTypes.string,
-    maxModeOn: PropTypes.bool,
-    sendToken: PropTypes.object,
-    setAmountToMax: PropTypes.func,
-    setMaxModeTo: PropTypes.func,
-    tokenBalance: PropTypes.string,
-  };
-
-  static contextTypes = {
-    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
-  };
-
-  setMaxAmount() {
-    const {
-      balance,
-      gasTotal,
-      sendToken,
-      setAmountToMax,
-      tokenBalance,
-    } = this.props;
-
-    setAmountToMax({
-      balance,
-      gasTotal,
-      sendToken,
-      tokenBalance,
-    });
-  }
-
-  onMaxClick = () => {
-    const { setMaxModeTo, clearMaxAmount, maxModeOn } = this.props;
-    const { metricsEvent } = this.context;
-
-    metricsEvent({
-      eventOpts: {
-        category: 'Transactions',
-        action: 'Edit Screen',
-        name: 'Clicked "Amount Max"',
-      },
-    });
-    if (maxModeOn) {
-      setMaxModeTo(false);
-      clearMaxAmount();
-    } else {
-      setMaxModeTo(true);
-      this.setMaxAmount();
-    }
-  };
-
-  render() {
-    const { maxModeOn, buttonDataLoading, inError } = this.props;
-
-    return (
-      <button
-        className="send-v2__amount-max"
-        onClick={buttonDataLoading || inError ? null : this.onMaxClick}
-      >
-        <input type="checkbox" checked={maxModeOn} readOnly />
-        <div
-          className={classnames('send-v2__amount-max__button', {
-            'send-v2__amount-max__button__disabled':
-              buttonDataLoading || inError,
-          })}
-        >
-          {this.context.t('max')}
-        </div>
-      </button>
-    );
-  }
-}
diff --git a/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.test.js b/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.test.js
deleted file mode 100644
index 8c38d3be5..000000000
--- a/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.test.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import sinon from 'sinon';
-import AmountMaxButton from './amount-max-button.component';
-
-describe('AmountMaxButton Component', () => {
-  let wrapper;
-  let instance;
-
-  const propsMethodSpies = {
-    setAmountToMax: sinon.spy(),
-    setMaxModeTo: sinon.spy(),
-  };
-
-  const MOCK_EVENT = { preventDefault: () => undefined };
-
-  beforeAll(() => {
-    sinon.spy(AmountMaxButton.prototype, 'setMaxAmount');
-  });
-
-  beforeEach(() => {
-    wrapper = shallow(
-      <AmountMaxButton
-        balance="mockBalance"
-        gasTotal="mockGasTotal"
-        maxModeOn={false}
-        sendToken={{ address: 'mockTokenAddress' }}
-        setAmountToMax={propsMethodSpies.setAmountToMax}
-        setMaxModeTo={propsMethodSpies.setMaxModeTo}
-        tokenBalance="mockTokenBalance"
-      />,
-      {
-        context: {
-          t: (str) => `${str}_t`,
-          metricsEvent: () => undefined,
-        },
-      },
-    );
-    instance = wrapper.instance();
-  });
-
-  afterEach(() => {
-    propsMethodSpies.setAmountToMax.resetHistory();
-    propsMethodSpies.setMaxModeTo.resetHistory();
-    AmountMaxButton.prototype.setMaxAmount.resetHistory();
-  });
-
-  afterAll(() => {
-    sinon.restore();
-  });
-
-  describe('setMaxAmount', () => {
-    it('should call setAmountToMax with the correct params', () => {
-      expect(propsMethodSpies.setAmountToMax.callCount).toStrictEqual(0);
-      instance.setMaxAmount();
-      expect(propsMethodSpies.setAmountToMax.callCount).toStrictEqual(1);
-      expect(propsMethodSpies.setAmountToMax.getCall(0).args).toStrictEqual([
-        {
-          balance: 'mockBalance',
-          gasTotal: 'mockGasTotal',
-          sendToken: { address: 'mockTokenAddress' },
-          tokenBalance: 'mockTokenBalance',
-        },
-      ]);
-    });
-  });
-
-  describe('render', () => {
-    it('should render an element with a send-v2__amount-max class', () => {
-      expect(wrapper.find('.send-v2__amount-max')).toHaveLength(1);
-    });
-
-    it('should call setMaxModeTo and setMaxAmount when the checkbox is checked', () => {
-      const { onClick } = wrapper.find('.send-v2__amount-max').props();
-
-      expect(AmountMaxButton.prototype.setMaxAmount.callCount).toStrictEqual(0);
-      expect(propsMethodSpies.setMaxModeTo.callCount).toStrictEqual(0);
-      onClick(MOCK_EVENT);
-      expect(AmountMaxButton.prototype.setMaxAmount.callCount).toStrictEqual(1);
-      expect(propsMethodSpies.setMaxModeTo.callCount).toStrictEqual(1);
-      expect(propsMethodSpies.setMaxModeTo.getCall(0).args).toStrictEqual([
-        true,
-      ]);
-    });
-
-    it('should render the expected text when maxModeOn is false', () => {
-      wrapper.setProps({ maxModeOn: false });
-      expect(wrapper.find('.send-v2__amount-max').text()).toStrictEqual(
-        'max_t',
-      );
-    });
-  });
-});
diff --git a/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.js b/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.js
deleted file mode 100644
index a2fe64b94..000000000
--- a/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import { connect } from 'react-redux';
-import {
-  getGasTotal,
-  getSendToken,
-  getSendFromBalance,
-  getTokenBalance,
-  getSendMaxModeState,
-  getBasicGasEstimateLoadingStatus,
-} from '../../../../../selectors';
-import {
-  updateSendErrors,
-  updateSendAmount,
-  setMaxModeTo,
-} from '../../../../../ducks/send/send.duck';
-import { calcMaxAmount } from './amount-max-button.utils';
-import AmountMaxButton from './amount-max-button.component';
-
-export default connect(mapStateToProps, mapDispatchToProps)(AmountMaxButton);
-
-function mapStateToProps(state) {
-  return {
-    balance: getSendFromBalance(state),
-    buttonDataLoading: getBasicGasEstimateLoadingStatus(state),
-    gasTotal: getGasTotal(state),
-    maxModeOn: getSendMaxModeState(state),
-    sendToken: getSendToken(state),
-    tokenBalance: getTokenBalance(state),
-  };
-}
-
-function mapDispatchToProps(dispatch) {
-  return {
-    setAmountToMax: (maxAmountDataObject) => {
-      dispatch(updateSendErrors({ amount: null }));
-      dispatch(updateSendAmount(calcMaxAmount(maxAmountDataObject)));
-    },
-    clearMaxAmount: () => {
-      dispatch(updateSendAmount('0'));
-    },
-    setMaxModeTo: (bool) => dispatch(setMaxModeTo(bool)),
-  };
-}
diff --git a/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.test.js b/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.test.js
deleted file mode 100644
index cb86c88ff..000000000
--- a/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.container.test.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import sinon from 'sinon';
-
-import {
-  updateSendErrors,
-  setMaxModeTo,
-  updateSendAmount,
-} from '../../../../../ducks/send/send.duck';
-
-let mapStateToProps;
-let mapDispatchToProps;
-
-jest.mock('react-redux', () => ({
-  connect: (ms, md) => {
-    mapStateToProps = ms;
-    mapDispatchToProps = md;
-    return () => ({});
-  },
-}));
-
-jest.mock('../../../../../selectors', () => ({
-  getGasTotal: (s) => `mockGasTotal:${s}`,
-  getSendToken: (s) => `mockSendToken:${s}`,
-  getSendFromBalance: (s) => `mockBalance:${s}`,
-  getTokenBalance: (s) => `mockTokenBalance:${s}`,
-  getSendMaxModeState: (s) => `mockMaxModeOn:${s}`,
-  getBasicGasEstimateLoadingStatus: (s) => `mockButtonDataLoading:${s}`,
-}));
-
-jest.mock('./amount-max-button.utils.js', () => ({
-  calcMaxAmount: (mockObj) => mockObj.val + 1,
-}));
-
-jest.mock('../../../../../ducks/send/send.duck', () => ({
-  setMaxModeTo: jest.fn(),
-  updateSendAmount: jest.fn(),
-  updateSendErrors: jest.fn(),
-}));
-
-require('./amount-max-button.container.js');
-
-describe('amount-max-button container', () => {
-  describe('mapStateToProps()', () => {
-    it('should map the correct properties to props', () => {
-      expect(mapStateToProps('mockState')).toStrictEqual({
-        balance: 'mockBalance:mockState',
-        buttonDataLoading: 'mockButtonDataLoading:mockState',
-        gasTotal: 'mockGasTotal:mockState',
-        maxModeOn: 'mockMaxModeOn:mockState',
-        sendToken: 'mockSendToken:mockState',
-        tokenBalance: 'mockTokenBalance:mockState',
-      });
-    });
-  });
-
-  describe('mapDispatchToProps()', () => {
-    let dispatchSpy;
-    let mapDispatchToPropsObject;
-
-    beforeEach(() => {
-      dispatchSpy = sinon.spy();
-      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy);
-    });
-
-    describe('setAmountToMax()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.setAmountToMax({ val: 11, foo: 'bar' });
-        expect(dispatchSpy.calledTwice).toStrictEqual(true);
-        expect(updateSendErrors).toHaveBeenCalled();
-        expect(updateSendErrors).toHaveBeenCalledWith({ amount: null });
-        expect(updateSendAmount).toHaveBeenCalled();
-        expect(updateSendAmount).toHaveBeenCalledWith(12);
-      });
-    });
-
-    describe('setMaxModeTo()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.setMaxModeTo('mockVal');
-        expect(dispatchSpy.calledOnce).toStrictEqual(true);
-        expect(setMaxModeTo).toHaveBeenCalledWith('mockVal');
-      });
-    });
-  });
-});
diff --git a/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.js b/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.js
new file mode 100644
index 000000000..7f143879b
--- /dev/null
+++ b/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import classnames from 'classnames';
+import { useDispatch, useSelector } from 'react-redux';
+import { getBasicGasEstimateLoadingStatus } from '../../../../../selectors';
+import {
+  getSendMaxModeState,
+  isSendFormInvalid,
+  toggleSendMaxMode,
+} from '../../../../../ducks/send';
+import { useI18nContext } from '../../../../../hooks/useI18nContext';
+import { useMetricEvent } from '../../../../../hooks/useMetricEvent';
+
+export default function AmountMaxButton() {
+  const buttonDataLoading = useSelector(getBasicGasEstimateLoadingStatus);
+  const isDraftTransactionInvalid = useSelector(isSendFormInvalid);
+  const maxModeOn = useSelector(getSendMaxModeState);
+  const dispatch = useDispatch();
+  const trackClickedMax = useMetricEvent({
+    eventOpts: {
+      category: 'Transactions',
+      action: 'Edit Screen',
+      name: 'Clicked "Amount Max"',
+    },
+  });
+  const t = useI18nContext();
+
+  const onMaxClick = () => {
+    trackClickedMax();
+    dispatch(toggleSendMaxMode());
+  };
+
+  return (
+    <button
+      className="send-v2__amount-max"
+      disabled={buttonDataLoading || isDraftTransactionInvalid}
+      onClick={onMaxClick}
+    >
+      <input type="checkbox" checked={maxModeOn} readOnly />
+      <div
+        className={classnames('send-v2__amount-max__button', {
+          'send-v2__amount-max__button__disabled':
+            buttonDataLoading || isDraftTransactionInvalid,
+        })}
+      >
+        {t('max')}
+      </div>
+    </button>
+  );
+}
diff --git a/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.test.js b/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.test.js
new file mode 100644
index 000000000..7f4482517
--- /dev/null
+++ b/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.test.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+
+import { fireEvent } from '@testing-library/react';
+import { initialState, SEND_STATUSES } from '../../../../../ducks/send';
+import { renderWithProvider } from '../../../../../../test/jest';
+import AmountMaxButton from './amount-max-button';
+
+const middleware = [thunk];
+
+describe('AmountMaxButton Component', () => {
+  describe('render', () => {
+    it('should render a "Max" button', () => {
+      const { getByText } = renderWithProvider(
+        <AmountMaxButton />,
+        configureMockStore(middleware)({
+          send: initialState,
+          gas: { basicEstimateStatus: 'LOADING' },
+        }),
+      );
+      expect(getByText('Max')).toBeTruthy();
+    });
+
+    it('should dispatch action to set mode to MAX', () => {
+      const store = configureMockStore(middleware)({
+        send: { ...initialState, status: SEND_STATUSES.VALID },
+        gas: { basicEstimateStatus: 'READY' },
+      });
+      const { getByText } = renderWithProvider(<AmountMaxButton />, store);
+
+      const expectedActions = [
+        { type: 'send/updateAmountMode', payload: 'MAX' },
+      ];
+
+      fireEvent.click(getByText('Max'), { bubbles: true });
+      const actions = store.getActions();
+      expect(actions).toStrictEqual(expectedActions);
+    });
+
+    it('should dispatch action to set amount mode to INPUT', () => {
+      const store = configureMockStore(middleware)({
+        send: {
+          ...initialState,
+          status: SEND_STATUSES.VALID,
+          amount: { ...initialState.amount, mode: 'MAX' },
+        },
+        gas: { basicEstimateStatus: 'READY' },
+      });
+      const { getByText } = renderWithProvider(<AmountMaxButton />, store);
+
+      const expectedActions = [
+        { type: 'send/updateAmountMode', payload: 'INPUT' },
+      ];
+
+      fireEvent.click(getByText('Max'), { bubbles: true });
+      const actions = store.getActions();
+      expect(actions).toStrictEqual(expectedActions);
+    });
+  });
+});
diff --git a/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js b/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js
deleted file mode 100644
index 6826b5e39..000000000
--- a/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import {
-  multiplyCurrencies,
-  subtractCurrencies,
-} from '../../../../../helpers/utils/conversion-util';
-import { addHexPrefix } from '../../../../../../app/scripts/lib/util';
-
-export function calcMaxAmount({ balance, gasTotal, sendToken, tokenBalance }) {
-  const { decimals } = sendToken || {};
-  const multiplier = Math.pow(10, Number(decimals || 0));
-
-  return sendToken
-    ? multiplyCurrencies(tokenBalance, multiplier, {
-        toNumericBase: 'hex',
-        multiplicandBase: 16,
-        multiplierBase: 10,
-      })
-    : subtractCurrencies(addHexPrefix(balance), addHexPrefix(gasTotal), {
-        toNumericBase: 'hex',
-        aBase: 16,
-        bBase: 16,
-      });
-}
diff --git a/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.test.js b/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.test.js
deleted file mode 100644
index 87b334386..000000000
--- a/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils.test.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { calcMaxAmount } from './amount-max-button.utils';
-
-describe('amount-max-button utils', () => {
-  describe('calcMaxAmount()', () => {
-    it('should calculate the correct amount when no sendToken defined', () => {
-      expect(
-        calcMaxAmount({
-          balance: 'ffffff',
-          gasTotal: 'ff',
-          sendToken: false,
-        }),
-      ).toStrictEqual('ffff00');
-    });
-
-    it('should calculate the correct amount when a sendToken is defined', () => {
-      expect(
-        calcMaxAmount({
-          sendToken: {
-            decimals: 10,
-          },
-          tokenBalance: '64',
-        }),
-      ).toStrictEqual('e8d4a51000');
-    });
-  });
-});
diff --git a/ui/pages/send/send-content/send-amount-row/amount-max-button/index.js b/ui/pages/send/send-content/send-amount-row/amount-max-button/index.js
index 26d87ffb5..16657e95d 100644
--- a/ui/pages/send/send-content/send-amount-row/amount-max-button/index.js
+++ b/ui/pages/send/send-content/send-amount-row/amount-max-button/index.js
@@ -1 +1 @@
-export { default } from './amount-max-button.container';
+export { default } from './amount-max-button';
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 3f3d64e45..7cf67fdd1 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
@@ -1,111 +1,35 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { debounce } from 'lodash';
 import SendRowWrapper from '../send-row-wrapper';
 import UserPreferencedCurrencyInput from '../../../../components/app/user-preferenced-currency-input';
 import UserPreferencedTokenInput from '../../../../components/app/user-preferenced-token-input';
+import { ASSET_TYPES } from '../../../../ducks/send';
 import AmountMaxButton from './amount-max-button';
 
 export default class SendAmountRow extends Component {
   static propTypes = {
     amount: PropTypes.string,
-    balance: PropTypes.string,
-    conversionRate: PropTypes.number,
-    gasTotal: PropTypes.string,
     inError: PropTypes.bool,
-    primaryCurrency: PropTypes.string,
-    sendToken: PropTypes.object,
-    setMaxModeTo: PropTypes.func,
-    tokenBalance: PropTypes.string,
-    updateGasFeeError: PropTypes.func,
+    asset: PropTypes.object,
     updateSendAmount: PropTypes.func,
-    updateSendAmountError: PropTypes.func,
-    updateGas: PropTypes.func,
-    maxModeOn: PropTypes.bool,
   };
 
   static contextTypes = {
     t: PropTypes.func,
   };
 
-  componentDidUpdate(prevProps) {
-    const { maxModeOn: prevMaxModeOn, gasTotal: prevGasTotal } = prevProps;
-    const { maxModeOn, amount, gasTotal, sendToken } = this.props;
-
-    if (maxModeOn && sendToken && !prevMaxModeOn) {
-      this.updateGas(amount);
-    }
-
-    if (prevGasTotal !== gasTotal) {
-      this.validateAmount(amount);
-    }
-  }
-
-  updateGas = debounce(this.updateGas.bind(this), 500);
-
-  validateAmount(amount) {
-    const {
-      balance,
-      conversionRate,
-      gasTotal,
-      primaryCurrency,
-      sendToken,
-      tokenBalance,
-      updateGasFeeError,
-      updateSendAmountError,
-    } = this.props;
-
-    updateSendAmountError({
-      amount,
-      balance,
-      conversionRate,
-      gasTotal,
-      primaryCurrency,
-      sendToken,
-      tokenBalance,
-    });
-
-    if (sendToken) {
-      updateGasFeeError({
-        balance,
-        conversionRate,
-        gasTotal,
-        primaryCurrency,
-        sendToken,
-        tokenBalance,
-      });
-    }
-  }
-
-  updateAmount(amount) {
-    const { updateSendAmount, setMaxModeTo } = this.props;
-
-    setMaxModeTo(false);
-    updateSendAmount(amount);
-  }
-
-  updateGas(amount) {
-    const { sendToken, updateGas } = this.props;
-
-    if (sendToken) {
-      updateGas({ amount });
-    }
-  }
-
   handleChange = (newAmount) => {
-    this.validateAmount(newAmount);
-    this.updateGas(newAmount);
-    this.updateAmount(newAmount);
+    this.props.updateSendAmount(newAmount);
   };
 
   renderInput() {
-    const { amount, inError, sendToken } = this.props;
+    const { amount, inError, asset } = this.props;
 
-    return sendToken ? (
+    return asset.type === ASSET_TYPES.TOKEN ? (
       <UserPreferencedTokenInput
         error={inError}
         onChange={this.handleChange}
-        token={sendToken}
+        token={asset.details}
         value={amount}
       />
     ) : (
@@ -118,7 +42,7 @@ export default class SendAmountRow extends Component {
   }
 
   render() {
-    const { gasTotal, inError } = this.props;
+    const { inError } = this.props;
 
     return (
       <SendRowWrapper
@@ -126,7 +50,7 @@ export default class SendAmountRow extends Component {
         showError={inError}
         errorType="amount"
       >
-        {gasTotal && <AmountMaxButton inError={inError} />}
+        <AmountMaxButton inError={inError} />
         {this.renderInput()}
       </SendRowWrapper>
     );
diff --git a/ui/pages/send/send-content/send-amount-row/send-amount-row.component.test.js b/ui/pages/send/send-content/send-amount-row/send-amount-row.component.test.js
index 8ed1a7438..c6e8e23be 100644
--- a/ui/pages/send/send-content/send-amount-row/send-amount-row.component.test.js
+++ b/ui/pages/send/send-content/send-amount-row/send-amount-row.component.test.js
@@ -3,88 +3,13 @@ import { shallow } from 'enzyme';
 import sinon from 'sinon';
 import SendRowWrapper from '../send-row-wrapper/send-row-wrapper.component';
 import UserPreferencedTokenInput from '../../../../components/app/user-preferenced-token-input';
+import { ASSET_TYPES } from '../../../../ducks/send';
 import SendAmountRow from './send-amount-row.component';
 
-import AmountMaxButton from './amount-max-button/amount-max-button.container';
+import AmountMaxButton from './amount-max-button/amount-max-button';
 
 describe('SendAmountRow Component', () => {
-  describe('validateAmount', () => {
-    it('should call updateSendAmountError with the correct params', () => {
-      const {
-        instance,
-        propsMethodSpies: { updateSendAmountError },
-      } = shallowRenderSendAmountRow();
-
-      expect(updateSendAmountError.callCount).toStrictEqual(0);
-
-      instance.validateAmount('someAmount');
-
-      expect(
-        updateSendAmountError.calledOnceWithExactly({
-          amount: 'someAmount',
-          balance: 'mockBalance',
-          conversionRate: 7,
-          gasTotal: 'mockGasTotal',
-          primaryCurrency: 'mockPrimaryCurrency',
-          sendToken: { address: 'mockTokenAddress' },
-          tokenBalance: 'mockTokenBalance',
-        }),
-      ).toStrictEqual(true);
-    });
-
-    it('should call updateGasFeeError if sendToken is truthy', () => {
-      const {
-        instance,
-        propsMethodSpies: { updateGasFeeError },
-      } = shallowRenderSendAmountRow();
-
-      expect(updateGasFeeError.callCount).toStrictEqual(0);
-
-      instance.validateAmount('someAmount');
-
-      expect(
-        updateGasFeeError.calledOnceWithExactly({
-          balance: 'mockBalance',
-          conversionRate: 7,
-          gasTotal: 'mockGasTotal',
-          primaryCurrency: 'mockPrimaryCurrency',
-          sendToken: { address: 'mockTokenAddress' },
-          tokenBalance: 'mockTokenBalance',
-        }),
-      ).toStrictEqual(true);
-    });
-
-    it('should call not updateGasFeeError if sendToken is falsey', () => {
-      const {
-        wrapper,
-        instance,
-        propsMethodSpies: { updateGasFeeError },
-      } = shallowRenderSendAmountRow();
-
-      wrapper.setProps({ sendToken: null });
-
-      expect(updateGasFeeError.callCount).toStrictEqual(0);
-
-      instance.validateAmount('someAmount');
-
-      expect(updateGasFeeError.callCount).toStrictEqual(0);
-    });
-  });
-
   describe('updateAmount', () => {
-    it('should call setMaxModeTo', () => {
-      const {
-        instance,
-        propsMethodSpies: { setMaxModeTo },
-      } = shallowRenderSendAmountRow();
-
-      expect(setMaxModeTo.callCount).toStrictEqual(0);
-
-      instance.updateAmount('someAmount');
-
-      expect(setMaxModeTo.calledOnceWithExactly(false)).toStrictEqual(true);
-    });
-
     it('should call updateSendAmount', () => {
       const {
         instance,
@@ -93,7 +18,7 @@ describe('SendAmountRow Component', () => {
 
       expect(updateSendAmount.callCount).toStrictEqual(0);
 
-      instance.updateAmount('someAmount');
+      instance.handleChange('someAmount');
 
       expect(
         updateSendAmount.calledOnceWithExactly('someAmount'),
@@ -136,10 +61,7 @@ describe('SendAmountRow Component', () => {
     });
 
     it('should render the UserPreferencedTokenInput with the correct props', () => {
-      const {
-        wrapper,
-        instanceSpies: { updateGas, updateAmount, validateAmount },
-      } = shallowRenderSendAmountRow();
+      const { wrapper } = shallowRenderSendAmountRow();
       const { onChange, error, value } = wrapper
         .find(SendRowWrapper)
         .childAt(1)
@@ -147,67 +69,34 @@ describe('SendAmountRow Component', () => {
 
       expect(error).toStrictEqual(false);
       expect(value).toStrictEqual('mockAmount');
-      expect(updateGas.callCount).toStrictEqual(0);
-      expect(updateAmount.callCount).toStrictEqual(0);
-      expect(validateAmount.callCount).toStrictEqual(0);
 
       onChange('mockNewAmount');
-
-      expect(updateGas.calledOnceWithExactly('mockNewAmount')).toStrictEqual(
-        true,
-      );
-      expect(updateAmount.calledOnceWithExactly('mockNewAmount')).toStrictEqual(
-        true,
-      );
-      expect(
-        validateAmount.calledOnceWithExactly('mockNewAmount'),
-      ).toStrictEqual(true);
     });
   });
 });
 
 function shallowRenderSendAmountRow() {
-  const setMaxModeTo = sinon.spy();
-  const updateGasFeeError = sinon.spy();
   const updateSendAmount = sinon.spy();
-  const updateSendAmountError = sinon.spy();
   const wrapper = shallow(
     <SendAmountRow
       amount="mockAmount"
-      balance="mockBalance"
-      conversionRate={7}
-      convertedCurrency="mockConvertedCurrency"
-      gasTotal="mockGasTotal"
       inError={false}
-      primaryCurrency="mockPrimaryCurrency"
-      sendToken={{ address: 'mockTokenAddress' }}
-      setMaxModeTo={setMaxModeTo}
-      tokenBalance="mockTokenBalance"
-      updateGasFeeError={updateGasFeeError}
+      asset={{
+        type: ASSET_TYPES.TOKEN,
+        balance: 'mockTokenBalance',
+        details: { address: 'mockTokenAddress' },
+      }}
       updateSendAmount={updateSendAmount}
-      updateSendAmountError={updateSendAmountError}
-      updateGas={() => undefined}
     />,
     { context: { t: (str) => `${str}_t` } },
   );
   const instance = wrapper.instance();
-  const updateAmount = sinon.spy(instance, 'updateAmount');
-  const updateGas = sinon.spy(instance, 'updateGas');
-  const validateAmount = sinon.spy(instance, 'validateAmount');
 
   return {
     instance,
     wrapper,
     propsMethodSpies: {
-      setMaxModeTo,
-      updateGasFeeError,
       updateSendAmount,
-      updateSendAmountError,
-    },
-    instanceSpies: {
-      updateAmount,
-      updateGas,
-      validateAmount,
     },
   };
 }
diff --git a/ui/pages/send/send-content/send-amount-row/send-amount-row.container.js b/ui/pages/send/send-content/send-amount-row/send-amount-row.container.js
index ea76e87a4..261c91168 100644
--- a/ui/pages/send/send-content/send-amount-row/send-amount-row.container.js
+++ b/ui/pages/send/send-content/send-amount-row/send-amount-row.container.js
@@ -1,21 +1,10 @@
 import { connect } from 'react-redux';
 import {
-  getGasTotal,
-  getPrimaryCurrency,
-  getSendToken,
-  getSendAmount,
-  getSendFromBalance,
-  getTokenBalance,
-  getSendMaxModeState,
-  sendAmountIsInError,
-} from '../../../../selectors';
-import { getAmountErrorObject, getGasFeeErrorObject } from '../../send.utils';
-import {
-  updateSendErrors,
-  setMaxModeTo,
   updateSendAmount,
-} from '../../../../ducks/send/send.duck';
-import { getConversionRate } from '../../../../ducks/metamask/metamask';
+  getSendAmount,
+  sendAmountIsInError,
+  getSendAsset,
+} from '../../../../ducks/send';
 import SendAmountRow from './send-amount-row.component';
 
 export default connect(mapStateToProps, mapDispatchToProps)(SendAmountRow);
@@ -23,26 +12,13 @@ export default connect(mapStateToProps, mapDispatchToProps)(SendAmountRow);
 function mapStateToProps(state) {
   return {
     amount: getSendAmount(state),
-    balance: getSendFromBalance(state),
-    conversionRate: getConversionRate(state),
-    gasTotal: getGasTotal(state),
     inError: sendAmountIsInError(state),
-    primaryCurrency: getPrimaryCurrency(state),
-    sendToken: getSendToken(state),
-    tokenBalance: getTokenBalance(state),
-    maxModeOn: getSendMaxModeState(state),
+    asset: getSendAsset(state),
   };
 }
 
 function mapDispatchToProps(dispatch) {
   return {
-    setMaxModeTo: (bool) => dispatch(setMaxModeTo(bool)),
     updateSendAmount: (newAmount) => dispatch(updateSendAmount(newAmount)),
-    updateGasFeeError: (amountDataObject) => {
-      dispatch(updateSendErrors(getGasFeeErrorObject(amountDataObject)));
-    },
-    updateSendAmountError: (amountDataObject) => {
-      dispatch(updateSendErrors(getAmountErrorObject(amountDataObject)));
-    },
   };
 }
diff --git a/ui/pages/send/send-content/send-amount-row/send-amount-row.container.test.js b/ui/pages/send/send-content/send-amount-row/send-amount-row.container.test.js
index edad05014..4911cb612 100644
--- a/ui/pages/send/send-content/send-amount-row/send-amount-row.container.test.js
+++ b/ui/pages/send/send-content/send-amount-row/send-amount-row.container.test.js
@@ -1,10 +1,6 @@
 import sinon from 'sinon';
 
-import {
-  updateSendErrors,
-  setMaxModeTo,
-  updateSendAmount,
-} from '../../../../ducks/send/send.duck';
+import { updateSendAmount } from '../../../../ducks/send';
 
 let mapDispatchToProps;
 
@@ -15,24 +11,7 @@ jest.mock('react-redux', () => ({
   },
 }));
 
-jest.mock('../../../../selectors/send.js', () => ({
-  sendAmountIsInError: (s) => `mockInError:${s}`,
-}));
-
-jest.mock('../../send.utils', () => ({
-  getAmountErrorObject: (mockDataObject) => ({
-    ...mockDataObject,
-    mockChange: true,
-  }),
-  getGasFeeErrorObject: (mockDataObject) => ({
-    ...mockDataObject,
-    mockGasFeeErrorChange: true,
-  }),
-}));
-
-jest.mock('../../../../ducks/send/send.duck', () => ({
-  updateSendErrors: jest.fn(),
-  setMaxModeTo: jest.fn(),
+jest.mock('../../../../ducks/send', () => ({
   updateSendAmount: jest.fn(),
 }));
 
@@ -48,15 +27,6 @@ describe('send-amount-row container', () => {
       mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy);
     });
 
-    describe('setMaxModeTo()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.setMaxModeTo('mockBool');
-        expect(dispatchSpy.calledOnce).toStrictEqual(true);
-        expect(setMaxModeTo).toHaveBeenCalled();
-        expect(setMaxModeTo).toHaveBeenCalledWith('mockBool');
-      });
-    });
-
     describe('updateSendAmount()', () => {
       it('should dispatch an action', () => {
         mapDispatchToPropsObject.updateSendAmount('mockAmount');
@@ -65,29 +35,5 @@ describe('send-amount-row container', () => {
         expect(updateSendAmount).toHaveBeenCalledWith('mockAmount');
       });
     });
-
-    describe('updateGasFeeError()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.updateGasFeeError({ some: 'data' });
-        expect(dispatchSpy.calledOnce).toStrictEqual(true);
-        expect(updateSendErrors).toHaveBeenCalled();
-        expect(updateSendErrors).toHaveBeenCalledWith({
-          some: 'data',
-          mockGasFeeErrorChange: true,
-        });
-      });
-    });
-
-    describe('updateSendAmountError()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.updateSendAmountError({ some: 'data' });
-        expect(dispatchSpy.calledOnce).toStrictEqual(true);
-        expect(updateSendErrors).toHaveBeenCalled();
-        expect(updateSendErrors).toHaveBeenCalledWith({
-          some: 'data',
-          mockChange: true,
-        });
-      });
-    });
   });
 });
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 785b711b0..e6c1d9bb9 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
@@ -5,6 +5,7 @@ import Identicon from '../../../../components/ui/identicon/identicon.component';
 import TokenBalance from '../../../../components/ui/token-balance';
 import UserPreferencedCurrencyDisplay from '../../../../components/app/user-preferenced-currency-display';
 import { ERC20, PRIMARY } from '../../../../helpers/constants/common';
+import { ASSET_TYPES } from '../../../../ducks/send';
 
 export default class SendAssetRow extends Component {
   static propTypes = {
@@ -18,13 +19,10 @@ export default class SendAssetRow extends Component {
     accounts: PropTypes.object.isRequired,
     assetImages: PropTypes.object,
     selectedAddress: PropTypes.string.isRequired,
-    sendTokenAddress: PropTypes.string,
-    setSendToken: PropTypes.func.isRequired,
+    sendAssetAddress: PropTypes.string,
+    updateSendAsset: PropTypes.func.isRequired,
     nativeCurrency: PropTypes.string,
     nativeCurrencyImage: PropTypes.string,
-    setUnsendableAssetError: PropTypes.func.isRequired,
-    updateSendErrors: PropTypes.func.isRequired,
-    updateTokenType: PropTypes.func.isRequired,
   };
 
   static contextTypes = {
@@ -46,29 +44,7 @@ export default class SendAssetRow extends Component {
 
   closeDropdown = () => this.setState({ isShowingDropdown: false });
 
-  clearUnsendableAssetError = () => {
-    this.props.setUnsendableAssetError(false);
-    this.props.updateSendErrors({
-      unsendableAssetError: null,
-      gasLoadingError: null,
-    });
-  };
-
-  selectToken = async (token) => {
-    if (token && token.isERC721 === undefined) {
-      const updatedToken = await this.props.updateTokenType(token.address);
-      if (updatedToken.isERC721) {
-        this.props.setUnsendableAssetError(true);
-        this.props.updateSendErrors({
-          unsendableAssetError: 'unsendableAssetError',
-        });
-      }
-    }
-
-    if ((token && token.isERC721 === false) || token === undefined) {
-      this.clearUnsendableAssetError();
-    }
-
+  selectToken = (type, token) => {
     this.setState(
       {
         isShowingDropdown: false,
@@ -84,7 +60,10 @@ export default class SendAssetRow extends Component {
             assetSelected: token ? ERC20 : this.props.nativeCurrency,
           },
         });
-        this.props.setSendToken(token);
+        this.props.updateSendAsset({
+          type,
+          details: type === ASSET_TYPES.NATIVE ? null : token,
+        });
       },
     );
   };
@@ -105,9 +84,9 @@ export default class SendAssetRow extends Component {
   }
 
   renderSendToken() {
-    const { sendTokenAddress } = this.props;
+    const { sendAssetAddress } = this.props;
     const token = this.props.tokens.find(
-      ({ address }) => address === sendTokenAddress,
+      ({ address }) => address === sendAssetAddress,
     );
     return (
       <div
@@ -158,7 +137,7 @@ export default class SendAssetRow extends Component {
             ? 'send-v2__asset-dropdown__asset'
             : 'send-v2__asset-dropdown__single-asset'
         }
-        onClick={() => this.selectToken()}
+        onClick={() => this.selectToken(ASSET_TYPES.NATIVE)}
       >
         <div className="send-v2__asset-dropdown__asset-icon">
           <Identicon
@@ -197,7 +176,7 @@ export default class SendAssetRow extends Component {
       <div
         key={address}
         className="send-v2__asset-dropdown__asset"
-        onClick={() => this.selectToken(token)}
+        onClick={() => this.selectToken(ASSET_TYPES.TOKEN, token)}
       >
         <div className="send-v2__asset-dropdown__asset-icon">
           <Identicon
diff --git a/ui/pages/send/send-content/send-asset-row/send-asset-row.container.js b/ui/pages/send/send-content/send-asset-row/send-asset-row.container.js
index eeeabba28..674d3bec1 100644
--- a/ui/pages/send/send-content/send-asset-row/send-asset-row.container.js
+++ b/ui/pages/send/send-content/send-asset-row/send-asset-row.container.js
@@ -3,21 +3,16 @@ import { getNativeCurrency } from '../../../../ducks/metamask/metamask';
 import {
   getMetaMaskAccounts,
   getNativeCurrencyImage,
-  getSendTokenAddress,
   getAssetImages,
 } from '../../../../selectors';
-import { updateTokenType } from '../../../../store/actions';
-import {
-  updateSendErrors,
-  updateSendToken,
-} from '../../../../ducks/send/send.duck';
+import { updateSendAsset, getSendAssetAddress } from '../../../../ducks/send';
 import SendAssetRow from './send-asset-row.component';
 
 function mapStateToProps(state) {
   return {
     tokens: state.metamask.tokens,
     selectedAddress: state.metamask.selectedAddress,
-    sendTokenAddress: getSendTokenAddress(state),
+    sendAssetAddress: getSendAssetAddress(state),
     accounts: getMetaMaskAccounts(state),
     nativeCurrency: getNativeCurrency(state),
     nativeCurrencyImage: getNativeCurrencyImage(state),
@@ -27,11 +22,8 @@ function mapStateToProps(state) {
 
 function mapDispatchToProps(dispatch) {
   return {
-    setSendToken: (token) => dispatch(updateSendToken(token)),
-    updateTokenType: (tokenAddress) => dispatch(updateTokenType(tokenAddress)),
-    updateSendErrors: (error) => {
-      dispatch(updateSendErrors(error));
-    },
+    updateSendAsset: ({ type, details }) =>
+      dispatch(updateSendAsset({ type, details })),
   };
 }
 
diff --git a/ui/pages/send/send-content/send-content.component.js b/ui/pages/send/send-content/send-content.component.js
index 96d728024..fc27aff25 100644
--- a/ui/pages/send/send-content/send-content.component.js
+++ b/ui/pages/send/send-content/send-content.component.js
@@ -18,12 +18,8 @@ export default class SendContent extends Component {
     t: PropTypes.func,
   };
 
-  state = {
-    unsendableAssetError: false,
-  };
-
   static propTypes = {
-    updateGas: PropTypes.func,
+    isAssetSendable: PropTypes.bool,
     showAddToAddressBookModal: PropTypes.func,
     showHexData: PropTypes.bool,
     contact: PropTypes.object,
@@ -35,11 +31,6 @@ export default class SendContent extends Component {
     noGasPrice: PropTypes.bool,
   };
 
-  updateGas = (updateData) => this.props.updateGas(updateData);
-
-  setUnsendableAssetError = (unsendableAssetError) =>
-    this.setState({ unsendableAssetError });
-
   render() {
     const {
       warning,
@@ -47,9 +38,9 @@ export default class SendContent extends Component {
       gasIsExcessive,
       isEthGasPrice,
       noGasPrice,
+      isAssetSendable,
     } = this.props;
 
-    const { unsendableAssetError } = this.state;
     let gasError;
     if (gasIsExcessive) gasError = GAS_PRICE_EXCESSIVE_ERROR_KEY;
     else if (noGasPrice) gasError = GAS_PRICE_FETCH_FAILURE_ERROR_KEY;
@@ -59,18 +50,15 @@ export default class SendContent extends Component {
         <div className="send-v2__form">
           {gasError && this.renderError(gasError)}
           {isEthGasPrice && this.renderWarning(ETH_GAS_PRICE_FETCH_WARNING_KEY)}
-          {unsendableAssetError && this.renderError(UNSENDABLE_ASSET_ERROR_KEY)}
+          {isAssetSendable === false &&
+            this.renderError(UNSENDABLE_ASSET_ERROR_KEY)}
           {error && this.renderError(error)}
           {warning && this.renderWarning()}
           {this.maybeRenderAddContact()}
-          <SendAssetRow
-            setUnsendableAssetError={this.setUnsendableAssetError}
-          />
-          <SendAmountRow updateGas={this.updateGas} />
+          <SendAssetRow />
+          <SendAmountRow />
           <SendGasRow />
-          {this.props.showHexData && (
-            <SendHexDataRow updateGas={this.updateGas} />
-          )}
+          {this.props.showHexData && <SendHexDataRow />}
         </div>
       </PageContainerContent>
     );
diff --git a/ui/pages/send/send-content/send-content.container.js b/ui/pages/send/send-content/send-content.container.js
index 3c99b3237..be623f937 100644
--- a/ui/pages/send/send-content/send-content.container.js
+++ b/ui/pages/send/send-content/send-content.container.js
@@ -1,12 +1,13 @@
 import { connect } from 'react-redux';
 import {
-  getSendTo,
   accountsWithSendEtherInfoSelector,
   getAddressBookEntry,
   getIsEthGasPriceFetched,
   getNoGasPriceFetched,
 } from '../../../selectors';
 
+import { getIsAssetSendable, getSendTo } from '../../../ducks/send';
+
 import * as actions from '../../../store/actions';
 import SendContent from './send-content.component';
 
@@ -14,15 +15,16 @@ function mapStateToProps(state) {
   const ownedAccounts = accountsWithSendEtherInfoSelector(state);
   const to = getSendTo(state);
   return {
+    isAssetSendable: getIsAssetSendable(state),
     isOwnedAccount: Boolean(
       ownedAccounts.find(
         ({ address }) => address.toLowerCase() === to.toLowerCase(),
       ),
     ),
     contact: getAddressBookEntry(state, to),
-    to,
     isEthGasPrice: getIsEthGasPriceFetched(state),
     noGasPrice: getNoGasPriceFetched(state),
+    to,
   };
 }
 
diff --git a/ui/pages/send/send-content/send-gas-row/send-gas-row.component.js b/ui/pages/send/send-content/send-gas-row/send-gas-row.component.js
index 0ee7a6030..b662261bb 100644
--- a/ui/pages/send/send-content/send-gas-row/send-gas-row.component.js
+++ b/ui/pages/send/send-content/send-gas-row/send-gas-row.component.js
@@ -3,31 +3,25 @@ import PropTypes from 'prop-types';
 import SendRowWrapper from '../send-row-wrapper';
 import GasPriceButtonGroup from '../../../../components/app/gas-customization/gas-price-button-group';
 import AdvancedGasInputs from '../../../../components/app/gas-customization/advanced-gas-inputs';
+import { GAS_INPUT_MODES } from '../../../../ducks/send';
 import GasFeeDisplay from './gas-fee-display/gas-fee-display.component';
 
 export default class SendGasRow extends Component {
   static propTypes = {
-    balance: PropTypes.string,
     gasFeeError: PropTypes.bool,
     gasLoadingError: PropTypes.bool,
     gasTotal: PropTypes.string,
-    maxModeOn: PropTypes.bool,
     showCustomizeGasModal: PropTypes.func,
-    sendToken: PropTypes.object,
-    setAmountToMax: PropTypes.func,
-    setGasPrice: PropTypes.func,
-    setGasLimit: PropTypes.func,
-    tokenBalance: PropTypes.string,
+    updateGasPrice: PropTypes.func,
+    updateGasLimit: PropTypes.func,
+    gasInputMode: PropTypes.oneOf(Object.values(GAS_INPUT_MODES)),
     gasPriceButtonGroupProps: PropTypes.object,
-    gasButtonGroupShown: PropTypes.bool,
     advancedInlineGasShown: PropTypes.bool,
     resetGasButtons: PropTypes.func,
     gasPrice: PropTypes.string,
     gasLimit: PropTypes.string,
     insufficientBalance: PropTypes.bool,
-    isMainnet: PropTypes.bool,
-    isEthGasPrice: PropTypes.bool,
-    noGasPrice: PropTypes.bool,
+    minimumGasLimit: PropTypes.string,
   };
 
   static contextTypes = {
@@ -37,19 +31,7 @@ export default class SendGasRow extends Component {
 
   renderAdvancedOptionsButton() {
     const { trackEvent } = this.context;
-    const {
-      showCustomizeGasModal,
-      isMainnet,
-      isEthGasPrice,
-      noGasPrice,
-    } = this.props;
-    // Tests should behave in same way as mainnet, but are using Localhost
-    if (!isMainnet && !process.env.IN_TEST) {
-      return null;
-    }
-    if (isEthGasPrice || noGasPrice) {
-      return null;
-    }
+    const { showCustomizeGasModal } = this.props;
     return (
       <div
         className="advanced-gas-options-btn"
@@ -66,44 +48,22 @@ export default class SendGasRow extends Component {
     );
   }
 
-  setMaxAmount() {
-    const {
-      balance,
-      gasTotal,
-      sendToken,
-      setAmountToMax,
-      tokenBalance,
-    } = this.props;
-
-    setAmountToMax({
-      balance,
-      gasTotal,
-      sendToken,
-      tokenBalance,
-    });
-  }
-
   renderContent() {
     const {
       gasLoadingError,
       gasTotal,
       showCustomizeGasModal,
       gasPriceButtonGroupProps,
-      gasButtonGroupShown,
-      advancedInlineGasShown,
-      maxModeOn,
+      gasInputMode,
       resetGasButtons,
-      setGasPrice,
-      setGasLimit,
+      updateGasPrice,
+      updateGasLimit,
       gasPrice,
       gasLimit,
       insufficientBalance,
-      isMainnet,
-      isEthGasPrice,
-      noGasPrice,
+      minimumGasLimit,
     } = this.props;
     const { trackEvent } = this.context;
-    const gasPriceFetchFailure = isEthGasPrice || noGasPrice;
 
     const gasPriceButtonGroup = (
       <div>
@@ -120,9 +80,6 @@ export default class SendGasRow extends Component {
               },
             });
             await gasPriceButtonGroupProps.handleGasPriceSelection(opts);
-            if (maxModeOn) {
-              this.setMaxAmount();
-            }
           }}
         />
       </div>
@@ -131,51 +88,38 @@ export default class SendGasRow extends Component {
       <GasFeeDisplay
         gasLoadingError={gasLoadingError}
         gasTotal={gasTotal}
-        onReset={() => {
-          resetGasButtons();
-          if (maxModeOn) {
-            this.setMaxAmount();
-          }
-        }}
-        onClick={() => showCustomizeGasModal()}
+        onReset={resetGasButtons}
+        onClick={showCustomizeGasModal}
       />
     );
     const advancedGasInputs = (
       <div>
         <AdvancedGasInputs
-          updateCustomGasPrice={(newGasPrice) =>
-            setGasPrice({ gasPrice: newGasPrice, gasLimit })
-          }
-          updateCustomGasLimit={(newGasLimit) =>
-            setGasLimit(newGasLimit, gasPrice)
-          }
+          updateCustomGasPrice={updateGasPrice}
+          updateCustomGasLimit={updateGasLimit}
           customGasPrice={gasPrice}
           customGasLimit={gasLimit}
           insufficientBalance={insufficientBalance}
+          minimumGasLimit={minimumGasLimit}
           customPriceIsSafe
           isSpeedUp={false}
         />
       </div>
     );
     // Tests should behave in same way as mainnet, but are using Localhost
-    if (
-      advancedInlineGasShown ||
-      (!isMainnet && !process.env.IN_TEST) ||
-      gasPriceFetchFailure
-    ) {
-      return advancedGasInputs;
-    } else if (gasButtonGroupShown) {
-      return gasPriceButtonGroup;
+    switch (gasInputMode) {
+      case GAS_INPUT_MODES.BASIC:
+        return gasPriceButtonGroup;
+      case GAS_INPUT_MODES.INLINE:
+        return advancedGasInputs;
+      case GAS_INPUT_MODES.CUSTOM:
+      default:
+        return gasFeeDisplay;
     }
-    return gasFeeDisplay;
   }
 
   render() {
-    const {
-      gasFeeError,
-      gasButtonGroupShown,
-      advancedInlineGasShown,
-    } = this.props;
+    const { gasFeeError, gasInputMode, advancedInlineGasShown } = this.props;
 
     return (
       <>
@@ -186,7 +130,7 @@ export default class SendGasRow extends Component {
         >
           {this.renderContent()}
         </SendRowWrapper>
-        {gasButtonGroupShown || advancedInlineGasShown ? (
+        {gasInputMode === GAS_INPUT_MODES.BASIC || advancedInlineGasShown ? (
           <SendRowWrapper>{this.renderAdvancedOptionsButton()}</SendRowWrapper>
         ) : null}
       </>
diff --git a/ui/pages/send/send-content/send-gas-row/send-gas-row.component.test.js b/ui/pages/send/send-content/send-gas-row/send-gas-row.component.test.js
index 7f4505558..9c5cfa30f 100644
--- a/ui/pages/send/send-content/send-gas-row/send-gas-row.component.test.js
+++ b/ui/pages/send/send-content/send-gas-row/send-gas-row.component.test.js
@@ -3,6 +3,7 @@ import { shallow } from 'enzyme';
 import sinon from 'sinon';
 import SendRowWrapper from '../send-row-wrapper/send-row-wrapper.component';
 import GasPriceButtonGroup from '../../../../components/app/gas-customization/gas-price-button-group';
+import { GAS_INPUT_MODES } from '../../../../ducks/send';
 import SendGasRow from './send-gas-row.component';
 
 import GasFeeDisplay from './gas-fee-display/gas-fee-display.component';
@@ -24,7 +25,7 @@ describe('SendGasRow Component', () => {
           gasFeeError
           gasLoadingError={false}
           gasTotal="mockGasTotal"
-          gasButtonGroupShown={false}
+          gasInputMode={GAS_INPUT_MODES.CUSTOM}
           showCustomizeGasModal={propsMethodSpies.showCustomizeGasModal}
           resetGasButtons={propsMethodSpies.resetGasButtons}
           gasPriceButtonGroupProps={{
@@ -76,8 +77,8 @@ describe('SendGasRow Component', () => {
       expect(propsMethodSpies.resetGasButtons.callCount).toStrictEqual(1);
     });
 
-    it('should render the GasPriceButtonGroup if gasButtonGroupShown is true', () => {
-      wrapper.setProps({ gasButtonGroupShown: true });
+    it('should render the GasPriceButtonGroup if gasInputMode is BASIC', () => {
+      wrapper.setProps({ gasInputMode: GAS_INPUT_MODES.BASIC });
       const rendered = wrapper.find(SendRowWrapper).first().childAt(0);
       expect(wrapper.children()).toHaveLength(2);
 
@@ -95,8 +96,8 @@ describe('SendGasRow Component', () => {
       ).toStrictEqual('bar');
     });
 
-    it('should render an advanced options button if gasButtonGroupShown is true', () => {
-      wrapper.setProps({ gasButtonGroupShown: true });
+    it('should render an advanced options button if gasInputMode is BASIC', () => {
+      wrapper.setProps({ gasInputMode: GAS_INPUT_MODES.BASIC });
       const rendered = wrapper.find(SendRowWrapper).last();
       expect(wrapper.children()).toHaveLength(2);
 
diff --git a/ui/pages/send/send-content/send-gas-row/send-gas-row.container.js b/ui/pages/send/send-content/send-gas-row/send-gas-row.container.js
index 84d6886fb..189fa95e4 100644
--- a/ui/pages/send/send-content/send-gas-row/send-gas-row.container.js
+++ b/ui/pages/send/send-content/send-gas-row/send-gas-row.container.js
@@ -1,42 +1,30 @@
 import { connect } from 'react-redux';
+import {
+  getBasicGasEstimateLoadingStatus,
+  getRenderableEstimateDataForSmallButtonsFromGWEI,
+  getDefaultActiveButtonIndex,
+  getAdvancedInlineGasShown,
+} from '../../../../selectors';
 import {
   getGasTotal,
   getGasPrice,
   getGasLimit,
-  getSendAmount,
-  getSendFromBalance,
-  getTokenBalance,
-  getSendMaxModeState,
-  getGasLoadingError,
   gasFeeIsInError,
-  getGasButtonGroupShown,
-  getAdvancedInlineGasShown,
-  getCurrentEthBalance,
-  getSendToken,
-  getBasicGasEstimateLoadingStatus,
-  getRenderableEstimateDataForSmallButtonsFromGWEI,
-  getDefaultActiveButtonIndex,
-  getIsMainnet,
-  getIsEthGasPriceFetched,
-  getNoGasPriceFetched,
-} from '../../../../selectors';
-import { isBalanceSufficient, calcGasTotal } from '../../send.utils';
-import { calcMaxAmount } from '../send-amount-row/amount-max-button/amount-max-button.utils';
-import {
-  showGasButtonGroup,
-  updateSendErrors,
-  setGasPrice,
-  setGasLimit,
-  setGasTotal,
-  updateSendAmount,
-} from '../../../../ducks/send/send.duck';
+  getGasInputMode,
+  updateGasPrice,
+  updateGasLimit,
+  isSendStateInitialized,
+  getIsBalanceInsufficient,
+  getMinimumGasLimitForSend,
+  useDefaultGas,
+} from '../../../../ducks/send';
 import {
   resetCustomData,
   setCustomGasPrice,
   setCustomGasLimit,
 } from '../../../../ducks/gas/gas.duck';
-import { getConversionRate } from '../../../../ducks/metamask/metamask';
 import { showModal } from '../../../../store/actions';
+import { hexToDecimal } from '../../../../helpers/utils/conversions.util';
 import SendGasRow from './send-gas-row.component';
 
 export default connect(
@@ -55,40 +43,25 @@ function mapStateToProps(state) {
   );
 
   const gasTotal = getGasTotal(state);
-  const conversionRate = getConversionRate(state);
-  const balance = getCurrentEthBalance(state);
 
-  const insufficientBalance = !isBalanceSufficient({
-    amount: getSendToken(state) ? '0x0' : getSendAmount(state),
-    gasTotal,
-    balance,
-    conversionRate,
-  });
-  const isEthGasPrice = getIsEthGasPriceFetched(state);
-  const noGasPrice = getNoGasPriceFetched(state);
+  const minimumGasLimit = getMinimumGasLimitForSend(state);
 
   return {
-    balance: getSendFromBalance(state),
     gasTotal,
+    minimumGasLimit: hexToDecimal(minimumGasLimit),
     gasFeeError: gasFeeIsInError(state),
-    gasLoadingError: getGasLoadingError(state),
+    gasLoadingError: isSendStateInitialized(state),
     gasPriceButtonGroupProps: {
       buttonDataLoading: getBasicGasEstimateLoadingStatus(state),
       defaultActiveButtonIndex: 1,
       newActiveButtonIndex: activeButtonIndex > -1 ? activeButtonIndex : null,
       gasButtonInfo,
     },
-    gasButtonGroupShown: getGasButtonGroupShown(state),
     advancedInlineGasShown: getAdvancedInlineGasShown(state),
+    gasInputMode: getGasInputMode(state),
     gasPrice,
     gasLimit,
-    insufficientBalance,
-    maxModeOn: getSendMaxModeState(state),
-    sendToken: getSendToken(state),
-    tokenBalance: getTokenBalance(state),
-    isMainnet: getIsMainnet(state),
-    isEthGasPrice,
-    noGasPrice,
+    insufficientBalance: getIsBalanceInsufficient(state),
   };
 }
 
@@ -96,26 +69,16 @@ function mapDispatchToProps(dispatch) {
   return {
     showCustomizeGasModal: () =>
       dispatch(showModal({ name: 'CUSTOMIZE_GAS', hideBasic: true })),
-    setGasPrice: ({ gasPrice, gasLimit }) => {
-      dispatch(setGasPrice(gasPrice));
+    updateGasPrice: (gasPrice) => {
+      dispatch(updateGasPrice(gasPrice));
       dispatch(setCustomGasPrice(gasPrice));
-      if (gasLimit) {
-        dispatch(setGasTotal(calcGasTotal(gasLimit, gasPrice)));
-      }
     },
-    setGasLimit: (newLimit, gasPrice) => {
-      dispatch(setGasLimit(newLimit));
+    updateGasLimit: (newLimit) => {
+      dispatch(updateGasLimit(newLimit));
       dispatch(setCustomGasLimit(newLimit));
-      if (gasPrice) {
-        dispatch(setGasTotal(calcGasTotal(newLimit, gasPrice)));
-      }
     },
-    setAmountToMax: (maxAmountDataObject) => {
-      dispatch(updateSendErrors({ amount: null }));
-      dispatch(updateSendAmount(calcMaxAmount(maxAmountDataObject)));
-    },
-    showGasButtonGroup: () => dispatch(showGasButtonGroup()),
     resetCustomData: () => dispatch(resetCustomData()),
+    useDefaultGas: () => dispatch(useDefaultGas()),
   };
 }
 
@@ -123,8 +86,8 @@ function mergeProps(stateProps, dispatchProps, ownProps) {
   const { gasPriceButtonGroupProps } = stateProps;
   const { gasButtonInfo } = gasPriceButtonGroupProps;
   const {
-    setGasPrice: dispatchSetGasPrice,
-    showGasButtonGroup: dispatchShowGasButtonGroup,
+    updateGasPrice: dispatchUpdateGasPrice,
+    useDefaultGas: dispatchUseDefaultGas,
     resetCustomData: dispatchResetCustomData,
     ...otherDispatchProps
   } = dispatchProps;
@@ -135,13 +98,14 @@ function mergeProps(stateProps, dispatchProps, ownProps) {
     ...ownProps,
     gasPriceButtonGroupProps: {
       ...gasPriceButtonGroupProps,
-      handleGasPriceSelection: dispatchSetGasPrice,
+      handleGasPriceSelection: ({ gasPrice }) =>
+        dispatchUpdateGasPrice(gasPrice),
     },
     resetGasButtons: () => {
       dispatchResetCustomData();
-      dispatchSetGasPrice(gasButtonInfo[1].priceInHexWei);
-      dispatchShowGasButtonGroup();
+      dispatchUpdateGasPrice(gasButtonInfo[1].priceInHexWei);
+      dispatchUseDefaultGas();
     },
-    setGasPrice: dispatchSetGasPrice,
+    updateGasPrice: dispatchUpdateGasPrice,
   };
 }
diff --git a/ui/pages/send/send-content/send-gas-row/send-gas-row.container.test.js b/ui/pages/send/send-content/send-gas-row/send-gas-row.container.test.js
index 80757f230..b7aa23c86 100644
--- a/ui/pages/send/send-content/send-gas-row/send-gas-row.container.test.js
+++ b/ui/pages/send/send-content/send-gas-row/send-gas-row.container.test.js
@@ -8,12 +8,7 @@ import {
   setCustomGasLimit,
 } from '../../../../ducks/gas/gas.duck';
 
-import {
-  showGasButtonGroup,
-  setGasPrice,
-  setGasTotal,
-  setGasLimit,
-} from '../../../../ducks/send/send.duck';
+import { updateGasPrice, updateGasLimit } from '../../../../ducks/send';
 
 let mapDispatchToProps;
 let mergeProps;
@@ -26,9 +21,15 @@ jest.mock('react-redux', () => ({
   },
 }));
 
-jest.mock('../../../../selectors', () => ({
-  getSendMaxModeState: (s) => `mockMaxModeOn:${s}`,
-}));
+jest.mock('../../../../ducks/send', () => {
+  const original = jest.requireActual('../../../../ducks/send');
+  return {
+    ...original,
+    getSendMaxModeState: (s) => `mockMaxModeOn:${s}`,
+    updateGasPrice: jest.fn(),
+    updateGasLimit: jest.fn(),
+  };
+});
 
 jest.mock('../../send.utils.js', () => ({
   isBalanceSufficient: ({ amount, gasTotal, balance, conversionRate }) =>
@@ -41,13 +42,6 @@ jest.mock('../../../../store/actions', () => ({
   showModal: jest.fn(),
 }));
 
-jest.mock('../../../../ducks/send/send.duck', () => ({
-  showGasButtonGroup: jest.fn(),
-  setGasPrice: jest.fn(),
-  setGasTotal: jest.fn(),
-  setGasLimit: jest.fn(),
-}));
-
 jest.mock('../../../../ducks/gas/gas.duck', () => ({
   resetCustomData: jest.fn(),
   setCustomGasPrice: jest.fn(),
@@ -77,36 +71,21 @@ describe('send-gas-row container', () => {
       });
     });
 
-    describe('setGasPrice()', () => {
+    describe('updateGasPrice()', () => {
       it('should dispatch an action', () => {
-        mapDispatchToPropsObject.setGasPrice({
-          gasPrice: 'mockNewPrice',
-          gasLimit: 'mockLimit',
-        });
-        expect(dispatchSpy.calledThrice).toStrictEqual(true);
-        expect(setGasPrice).toHaveBeenCalled();
+        mapDispatchToPropsObject.updateGasPrice('mockNewPrice');
+        expect(dispatchSpy.calledTwice).toStrictEqual(true);
+        expect(updateGasPrice).toHaveBeenCalled();
         expect(setCustomGasPrice).toHaveBeenCalledWith('mockNewPrice');
-        expect(setGasTotal).toHaveBeenCalled();
-        expect(setGasTotal).toHaveBeenCalledWith('mockLimitmockNewPrice');
       });
     });
 
-    describe('setGasLimit()', () => {
+    describe('updateGasLimit()', () => {
       it('should dispatch an action', () => {
-        mapDispatchToPropsObject.setGasLimit('mockNewLimit', 'mockPrice');
-        expect(dispatchSpy.calledThrice).toStrictEqual(true);
-        expect(setGasLimit).toHaveBeenCalled();
+        mapDispatchToPropsObject.updateGasLimit('mockNewLimit');
+        expect(dispatchSpy.calledTwice).toStrictEqual(true);
+        expect(updateGasLimit).toHaveBeenCalled();
         expect(setCustomGasLimit).toHaveBeenCalledWith('mockNewLimit');
-        expect(setGasTotal).toHaveBeenCalled();
-        expect(setGasTotal).toHaveBeenCalledWith('mockNewLimitmockPrice');
-      });
-    });
-
-    describe('showGasButtonGroup()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.showGasButtonGroup();
-        expect(dispatchSpy.calledOnce).toStrictEqual(true);
-        expect(showGasButtonGroup).toHaveBeenCalled();
       });
     });
 
@@ -129,7 +108,7 @@ describe('send-gas-row container', () => {
         someOtherStateProp: 'baz',
       };
       const dispatchProps = {
-        setGasPrice: sinon.spy(),
+        updateGasPrice: sinon.spy(),
         someOtherDispatchProp: sinon.spy(),
       };
       const ownProps = { someOwnProp: 123 };
@@ -144,9 +123,11 @@ describe('send-gas-row container', () => {
       ).toStrictEqual('bar');
       expect(result.someOwnProp).toStrictEqual(123);
 
-      expect(dispatchProps.setGasPrice.callCount).toStrictEqual(0);
-      result.gasPriceButtonGroupProps.handleGasPriceSelection();
-      expect(dispatchProps.setGasPrice.callCount).toStrictEqual(1);
+      expect(dispatchProps.updateGasPrice.callCount).toStrictEqual(0);
+      result.gasPriceButtonGroupProps.handleGasPriceSelection({
+        gasPrice: undefined,
+      });
+      expect(dispatchProps.updateGasPrice.callCount).toStrictEqual(1);
 
       expect(dispatchProps.someOtherDispatchProp.callCount).toStrictEqual(0);
       result.someOtherDispatchProp();
diff --git a/ui/pages/send/send-content/send-hex-data-row/send-hex-data-row.component.js b/ui/pages/send/send-content/send-hex-data-row/send-hex-data-row.component.js
index 497b7e5e3..bcb6530f8 100644
--- a/ui/pages/send/send-content/send-hex-data-row/send-hex-data-row.component.js
+++ b/ui/pages/send/send-content/send-hex-data-row/send-hex-data-row.component.js
@@ -6,7 +6,6 @@ export default class SendHexDataRow extends Component {
   static propTypes = {
     inError: PropTypes.bool,
     updateSendHexData: PropTypes.func.isRequired,
-    updateGas: PropTypes.func.isRequired,
   };
 
   static contextTypes = {
@@ -14,10 +13,9 @@ export default class SendHexDataRow extends Component {
   };
 
   onInput = (event) => {
-    const { updateSendHexData, updateGas } = this.props;
+    const { updateSendHexData } = this.props;
     const data = event.target.value.replace(/\n/gu, '') || null;
     updateSendHexData(data);
-    updateGas({ data });
   };
 
   render() {
diff --git a/ui/pages/send/send-content/send-hex-data-row/send-hex-data-row.container.js b/ui/pages/send/send-content/send-hex-data-row/send-hex-data-row.container.js
index f645aff7a..044f3eb69 100644
--- a/ui/pages/send/send-content/send-hex-data-row/send-hex-data-row.container.js
+++ b/ui/pages/send/send-content/send-hex-data-row/send-hex-data-row.container.js
@@ -1,12 +1,12 @@
 import { connect } from 'react-redux';
-import { updateSendHexData } from '../../../../ducks/send/send.duck';
+import { getSendHexData, updateSendHexData } from '../../../../ducks/send';
 import SendHexDataRow from './send-hex-data-row.component';
 
 export default connect(mapStateToProps, mapDispatchToProps)(SendHexDataRow);
 
 function mapStateToProps(state) {
   return {
-    data: state.send.data,
+    data: getSendHexData(state),
   };
 }
 
diff --git a/ui/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js b/ui/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js
index f857183f3..45a208537 100644
--- a/ui/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js
+++ b/ui/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.js
@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { getSendErrors } from '../../../../../selectors';
+import { getSendErrors } from '../../../../../ducks/send';
 import SendRowErrorMessage from './send-row-error-message.component';
 
 export default connect(mapStateToProps)(SendRowErrorMessage);
diff --git a/ui/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.test.js b/ui/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.test.js
index a8012f200..23f1d2c68 100644
--- a/ui/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.test.js
+++ b/ui/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.test.js
@@ -8,7 +8,7 @@ jest.mock('react-redux', () => ({
   },
 }));
 
-jest.mock('../../../../../selectors', () => ({
+jest.mock('../../../../../ducks/send', () => ({
   getSendErrors: (s) => `mockErrors:${s}`,
 }));
 
diff --git a/ui/pages/send/send-footer/send-footer.component.js b/ui/pages/send/send-footer/send-footer.component.js
index ef18f48b1..840146f5f 100644
--- a/ui/pages/send/send-footer/send-footer.component.js
+++ b/ui/pages/send/send-footer/send-footer.component.js
@@ -1,33 +1,21 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { isEqual } from 'lodash';
 import PageContainerFooter from '../../../components/ui/page-container/page-container-footer';
 import { CONFIRM_TRANSACTION_ROUTE } from '../../../helpers/constants/routes';
 
 export default class SendFooter extends Component {
   static propTypes = {
     addToAddressBookIfNew: PropTypes.func,
-    amount: PropTypes.string,
-    data: PropTypes.string,
-    clearSend: PropTypes.func,
-    editingTransactionId: PropTypes.string,
-    from: PropTypes.object,
-    gasLimit: PropTypes.string,
-    gasPrice: PropTypes.string,
-    gasTotal: PropTypes.string,
+    resetSendState: PropTypes.func,
+    disabled: PropTypes.bool.isRequired,
     history: PropTypes.object,
-    inError: PropTypes.bool,
-    sendToken: PropTypes.object,
     sign: PropTypes.func,
     to: PropTypes.string,
     toAccounts: PropTypes.array,
-    tokenBalance: PropTypes.string,
-    unapprovedTxs: PropTypes.object,
-    update: PropTypes.func,
     sendErrors: PropTypes.object,
     gasEstimateType: PropTypes.string,
-    gasIsLoading: PropTypes.bool,
     mostRecentOverviewPage: PropTypes.string.isRequired,
-    noGasPrice: PropTypes.bool,
   };
 
   static contextTypes = {
@@ -36,8 +24,8 @@ export default class SendFooter extends Component {
   };
 
   onCancel() {
-    const { clearSend, history, mostRecentOverviewPage } = this.props;
-    clearSend();
+    const { resetSendState, history, mostRecentOverviewPage } = this.props;
+    resetSendState();
     history.push(mostRecentOverviewPage);
   }
 
@@ -45,45 +33,17 @@ export default class SendFooter extends Component {
     event.preventDefault();
     const {
       addToAddressBookIfNew,
-      amount,
-      data,
-      editingTransactionId,
-      from: { address: from },
-      gasLimit: gas,
-      gasPrice,
-      sendToken,
       sign,
       to,
-      unapprovedTxs,
-      update,
       toAccounts,
       history,
       gasEstimateType,
     } = this.props;
     const { metricsEvent } = this.context;
 
-    // Should not be needed because submit should be disabled if there are errors.
-    // const noErrors = !amountError && toError === null
-
-    // if (!noErrors) {
-    //   return
-    // }
-
     // TODO: add nickname functionality
     await addToAddressBookIfNew(to, toAccounts);
-    const promise = editingTransactionId
-      ? update({
-          amount,
-          data,
-          editingTransactionId,
-          from,
-          gas,
-          gasPrice,
-          sendToken,
-          to,
-          unapprovedTxs,
-        })
-      : sign({ data, sendToken, to, amount, from, gas, gasPrice });
+    const promise = sign();
 
     Promise.resolve(promise).then(() => {
       metricsEvent({
@@ -100,35 +60,13 @@ export default class SendFooter extends Component {
     });
   }
 
-  formShouldBeDisabled() {
-    const {
-      data,
-      inError,
-      sendToken,
-      tokenBalance,
-      gasTotal,
-      to,
-      gasLimit,
-      gasIsLoading,
-      noGasPrice,
-    } = this.props;
-    const missingTokenBalance = sendToken && !tokenBalance;
-    const gasLimitTooLow = gasLimit < 5208; // 5208 is hex value of 21000, minimum gas limit
-    const shouldBeDisabled =
-      inError ||
-      !gasTotal ||
-      missingTokenBalance ||
-      !(data || to) ||
-      gasLimitTooLow ||
-      gasIsLoading ||
-      noGasPrice;
-    return shouldBeDisabled;
-  }
-
   componentDidUpdate(prevProps) {
-    const { inError, sendErrors } = this.props;
+    const { sendErrors } = this.props;
     const { metricsEvent } = this.context;
-    if (!prevProps.inError && inError) {
+    if (
+      Object.keys(sendErrors).length > 0 &&
+      isEqual(sendErrors, prevProps.sendErrors) === false
+    ) {
       const errorField = Object.keys(sendErrors).find((key) => sendErrors[key]);
       const errorMessage = sendErrors[errorField];
 
@@ -151,7 +89,7 @@ export default class SendFooter extends Component {
       <PageContainerFooter
         onCancel={() => this.onCancel()}
         onSubmit={(e) => this.onSubmit(e)}
-        disabled={this.formShouldBeDisabled()}
+        disabled={this.props.disabled}
       />
     );
   }
diff --git a/ui/pages/send/send-footer/send-footer.component.test.js b/ui/pages/send/send-footer/send-footer.component.test.js
index 900c26b2a..fcd4472d6 100644
--- a/ui/pages/send/send-footer/send-footer.component.test.js
+++ b/ui/pages/send/send-footer/send-footer.component.test.js
@@ -10,7 +10,7 @@ describe('SendFooter Component', () => {
 
   const propsMethodSpies = {
     addToAddressBookIfNew: sinon.spy(),
-    clearSend: sinon.spy(),
+    resetSendState: sinon.spy(),
     sign: sinon.spy(),
     update: sinon.spy(),
     mostRecentOverviewPage: '/',
@@ -29,36 +29,24 @@ describe('SendFooter Component', () => {
     wrapper = shallow(
       <SendFooter
         addToAddressBookIfNew={propsMethodSpies.addToAddressBookIfNew}
-        amount="mockAmount"
-        clearSend={propsMethodSpies.clearSend}
+        resetSendState={propsMethodSpies.resetSendState}
         disabled
-        editingTransactionId="mockEditingTransactionId"
-        errors={{}}
-        from={{ address: 'mockAddress', balance: 'mockBalance' }}
-        gasLimit="mockGasLimit"
-        gasPrice="mockGasPrice"
-        gasTotal="mockGasTotal"
         history={historySpies}
-        inError={false}
-        sendToken={{ mockProp: 'mockSendTokenProp' }}
         sign={propsMethodSpies.sign}
         to="mockTo"
         toAccounts={['mockAccount']}
-        tokenBalance="mockTokenBalance"
-        unapprovedTxs={{}}
-        update={propsMethodSpies.update}
         sendErrors={{}}
+        gasEstimateType="BASIC"
         mostRecentOverviewPage="mostRecentOverviewPage"
-        noGasPrice={false}
       />,
       { context: { t: (str) => str, metricsEvent: () => ({}) } },
     );
   });
 
   afterEach(() => {
-    propsMethodSpies.clearSend.resetHistory();
+    propsMethodSpies.resetSendState.resetHistory();
     propsMethodSpies.addToAddressBookIfNew.resetHistory();
-    propsMethodSpies.clearSend.resetHistory();
+    propsMethodSpies.resetSendState.resetHistory();
     propsMethodSpies.sign.resetHistory();
     propsMethodSpies.update.resetHistory();
     historySpies.push.resetHistory();
@@ -71,10 +59,10 @@ describe('SendFooter Component', () => {
   });
 
   describe('onCancel', () => {
-    it('should call clearSend', () => {
-      expect(propsMethodSpies.clearSend.callCount).toStrictEqual(0);
+    it('should call resetSendState', () => {
+      expect(propsMethodSpies.resetSendState.callCount).toStrictEqual(0);
       wrapper.instance().onCancel();
-      expect(propsMethodSpies.clearSend.callCount).toStrictEqual(1);
+      expect(propsMethodSpies.resetSendState.callCount).toStrictEqual(1);
     });
 
     it('should call history.push', () => {
@@ -87,59 +75,6 @@ describe('SendFooter Component', () => {
     });
   });
 
-  describe('formShouldBeDisabled()', () => {
-    const config = {
-      'should return true if inError is truthy': {
-        inError: true,
-        expectedResult: true,
-        gasIsLoading: false,
-      },
-      'should return true if gasTotal is falsy': {
-        inError: false,
-        gasTotal: '',
-        expectedResult: true,
-        gasIsLoading: false,
-      },
-      'should return true if to is truthy': {
-        to: '0xsomevalidAddress',
-        inError: false,
-        gasTotal: '',
-        expectedResult: true,
-        gasIsLoading: false,
-      },
-      'should return true if sendToken is truthy and tokenBalance is falsy': {
-        sendToken: { mockProp: 'mockSendTokenProp' },
-        tokenBalance: '',
-        expectedResult: true,
-        gasIsLoading: false,
-      },
-      'should return true if gasIsLoading is truthy but all other params are falsy': {
-        inError: false,
-        gasTotal: '',
-        sendToken: null,
-        tokenBalance: '',
-        expectedResult: true,
-        gasIsLoading: true,
-      },
-      'should return false if inError is false and all other params are truthy': {
-        inError: false,
-        gasTotal: '0x123',
-        sendToken: { mockProp: 'mockSendTokenProp' },
-        tokenBalance: '123',
-        expectedResult: false,
-        gasIsLoading: false,
-      },
-    };
-    Object.entries(config).forEach(([description, obj]) => {
-      it(`${description}`, () => {
-        wrapper.setProps(obj);
-        expect(wrapper.instance().formShouldBeDisabled()).toStrictEqual(
-          obj.expectedResult,
-        );
-      });
-    });
-  });
-
   describe('onSubmit', () => {
     it('should call addToAddressBookIfNew with the correct params', () => {
       wrapper.instance().onSubmit(MOCK_EVENT);
@@ -151,43 +86,9 @@ describe('SendFooter Component', () => {
       ).toStrictEqual(['mockTo', ['mockAccount']]);
     });
 
-    it('should call props.update if editingTransactionId is truthy', async () => {
-      await wrapper.instance().onSubmit(MOCK_EVENT);
-      expect(propsMethodSpies.update.calledOnce).toStrictEqual(true);
-      expect(propsMethodSpies.update.getCall(0).args[0]).toStrictEqual({
-        data: undefined,
-        amount: 'mockAmount',
-        editingTransactionId: 'mockEditingTransactionId',
-        from: 'mockAddress',
-        gas: 'mockGasLimit',
-        gasPrice: 'mockGasPrice',
-        sendToken: { mockProp: 'mockSendTokenProp' },
-        to: 'mockTo',
-        unapprovedTxs: {},
-      });
-    });
-
-    it('should not call props.sign if editingTransactionId is truthy', () => {
-      expect(propsMethodSpies.sign.callCount).toStrictEqual(0);
-    });
-
-    it('should call props.sign if editingTransactionId is falsy', async () => {
-      wrapper.setProps({ editingTransactionId: null });
+    it('should call props.sign whe submitting', async () => {
       await wrapper.instance().onSubmit(MOCK_EVENT);
       expect(propsMethodSpies.sign.calledOnce).toStrictEqual(true);
-      expect(propsMethodSpies.sign.getCall(0).args[0]).toStrictEqual({
-        data: undefined,
-        amount: 'mockAmount',
-        from: 'mockAddress',
-        gas: 'mockGasLimit',
-        gasPrice: 'mockGasPrice',
-        sendToken: { mockProp: 'mockSendTokenProp' },
-        to: 'mockTo',
-      });
-    });
-
-    it('should not call props.update if editingTransactionId is falsy', () => {
-      expect(propsMethodSpies.update.callCount).toStrictEqual(0);
     });
 
     it('should call history.push', async () => {
@@ -201,12 +102,11 @@ describe('SendFooter Component', () => {
 
   describe('render', () => {
     beforeEach(() => {
-      sinon.stub(SendFooter.prototype, 'formShouldBeDisabled').returns(true);
       wrapper = shallow(
         <SendFooter
           addToAddressBookIfNew={propsMethodSpies.addToAddressBookIfNew}
           amount="mockAmount"
-          clearSend={propsMethodSpies.clearSend}
+          resetSendState={propsMethodSpies.resetSendState}
           disabled
           editingTransactionId="mockEditingTransactionId"
           errors={{}}
@@ -215,7 +115,6 @@ describe('SendFooter Component', () => {
           gasPrice="mockGasPrice"
           gasTotal="mockGasTotal"
           history={historySpies}
-          inError={false}
           sendToken={{ mockProp: 'mockSendTokenProp' }}
           sign={propsMethodSpies.sign}
           to="mockTo"
@@ -229,10 +128,6 @@ describe('SendFooter Component', () => {
       );
     });
 
-    afterEach(() => {
-      SendFooter.prototype.formShouldBeDisabled.restore();
-    });
-
     it('should render a PageContainerFooter component', () => {
       expect(wrapper.find(PageContainerFooter)).toHaveLength(1);
     });
diff --git a/ui/pages/send/send-footer/send-footer.container.js b/ui/pages/send/send-footer/send-footer.container.js
index 8848255d3..bcdb796e1 100644
--- a/ui/pages/send/send-footer/send-footer.container.js
+++ b/ui/pages/send/send-footer/send-footer.container.js
@@ -1,44 +1,32 @@
 import { connect } from 'react-redux';
+import { addToAddressBook } from '../../../store/actions';
 import {
-  addToAddressBook,
-  signTokenTx,
-  signTx,
-  updateTransaction,
-} from '../../../store/actions';
-import {
-  getGasLimit,
-  getGasPrice,
-  getGasTotal,
-  getSendToken,
-  getSendAmount,
-  getSendEditingTransactionId,
-  getSendFromObject,
-  getSendTo,
-  getSendHexData,
-  getTokenBalance,
-  getSendErrors,
-  isSendFormInError,
-  getGasIsLoading,
   getRenderableEstimateDataForSmallButtonsFromGWEI,
   getDefaultActiveButtonIndex,
-  getNoGasPriceFetched,
 } from '../../../selectors';
+import {
+  resetSendState,
+  getGasPrice,
+  getSendTo,
+  getSendErrors,
+  isSendFormInvalid,
+  signTransaction,
+} from '../../../ducks/send';
 import { getMostRecentOverviewPage } from '../../../ducks/history/history';
 import { addHexPrefix } from '../../../../app/scripts/lib/util';
-import {
-  getSendToAccounts,
-  getUnapprovedTxs,
-} from '../../../ducks/metamask/metamask';
-import { clearSend } from '../../../ducks/send/send.duck';
+import { getSendToAccounts } from '../../../ducks/metamask/metamask';
 import SendFooter from './send-footer.component';
-import {
-  addressIsNew,
-  constructTxParams,
-  constructUpdatedTx,
-} from './send-footer.utils';
 
 export default connect(mapStateToProps, mapDispatchToProps)(SendFooter);
 
+function addressIsNew(toAccounts, newAddress) {
+  const newAddressNormalized = newAddress.toLowerCase();
+  const foundMatching = toAccounts.some(
+    ({ address }) => address.toLowerCase() === newAddressNormalized,
+  );
+  return !foundMatching;
+}
+
 function mapStateToProps(state) {
   const gasButtonInfo = getRenderableEstimateDataForSmallButtonsFromGWEI(state);
   const gasPrice = getGasPrice(state);
@@ -50,74 +38,21 @@ function mapStateToProps(state) {
     activeButtonIndex >= 0
       ? gasButtonInfo[activeButtonIndex].gasEstimateType
       : 'custom';
-  const editingTransactionId = getSendEditingTransactionId(state);
 
   return {
-    amount: getSendAmount(state),
-    data: getSendHexData(state),
-    editingTransactionId,
-    from: getSendFromObject(state),
-    gasLimit: getGasLimit(state),
-    gasPrice: getGasPrice(state),
-    gasTotal: getGasTotal(state),
-    inError: isSendFormInError(state),
-    sendToken: getSendToken(state),
+    disabled: isSendFormInvalid(state),
     to: getSendTo(state),
     toAccounts: getSendToAccounts(state),
-    tokenBalance: getTokenBalance(state),
-    unapprovedTxs: getUnapprovedTxs(state),
     sendErrors: getSendErrors(state),
     gasEstimateType,
-    gasIsLoading: getGasIsLoading(state),
     mostRecentOverviewPage: getMostRecentOverviewPage(state),
-    noGasPrice: getNoGasPriceFetched(state),
   };
 }
 
 function mapDispatchToProps(dispatch) {
   return {
-    clearSend: () => dispatch(clearSend()),
-    sign: ({ sendToken, to, amount, from, gas, gasPrice, data }) => {
-      const txParams = constructTxParams({
-        amount,
-        data,
-        from,
-        gas,
-        gasPrice,
-        sendToken,
-        to,
-      });
-
-      return sendToken
-        ? dispatch(signTokenTx(sendToken.address, to, amount, txParams))
-        : dispatch(signTx(txParams));
-    },
-    update: ({
-      amount,
-      data,
-      editingTransactionId,
-      from,
-      gas,
-      gasPrice,
-      sendToken,
-      to,
-      unapprovedTxs,
-    }) => {
-      const editingTx = constructUpdatedTx({
-        amount,
-        data,
-        editingTransactionId,
-        from,
-        gas,
-        gasPrice,
-        sendToken,
-        to,
-        unapprovedTxs,
-      });
-
-      return dispatch(updateTransaction(editingTx));
-    },
-
+    resetSendState: () => dispatch(resetSendState()),
+    sign: () => dispatch(signTransaction()),
     addToAddressBookIfNew: (newAddress, toAccounts, nickname = '') => {
       const hexPrefixedAddress = addHexPrefix(newAddress);
       if (addressIsNew(toAccounts, hexPrefixedAddress)) {
diff --git a/ui/pages/send/send-footer/send-footer.container.test.js b/ui/pages/send/send-footer/send-footer.container.test.js
index 3cb6e474e..61c081719 100644
--- a/ui/pages/send/send-footer/send-footer.container.test.js
+++ b/ui/pages/send/send-footer/send-footer.container.test.js
@@ -1,12 +1,7 @@
 import sinon from 'sinon';
-import { clearSend } from '../../../ducks/send/send.duck';
 
-import { signTx, signTokenTx, addToAddressBook } from '../../../store/actions';
-import {
-  addressIsNew,
-  constructTxParams,
-  constructUpdatedTx,
-} from './send-footer.utils';
+import { addToAddressBook } from '../../../store/actions';
+import { resetSendState, signTransaction } from '../../../ducks/send';
 
 let mapDispatchToProps;
 
@@ -19,32 +14,18 @@ jest.mock('react-redux', () => ({
 
 jest.mock('../../../store/actions.js', () => ({
   addToAddressBook: jest.fn(),
-  signTokenTx: jest.fn(),
-  signTx: jest.fn(),
-  updateTransaction: jest.fn(),
 }));
 
-jest.mock('../../../ducks/send/send.duck.js', () => ({
-  clearSend: jest.fn(),
+jest.mock('../../../ducks/metamask/metamask', () => ({
+  getSendToAccounts: (s) => [`mockToAccounts:${s}`],
 }));
 
-jest.mock('../../../selectors/send.js', () => ({
-  getGasLimit: (s) => `mockGasLimit:${s}`,
+jest.mock('../../../ducks/send', () => ({
   getGasPrice: (s) => `mockGasPrice:${s}`,
-  getGasTotal: (s) => `mockGasTotal:${s}`,
-  getSendToken: (s) => `mockSendToken:${s}`,
-  getSendAmount: (s) => `mockAmount:${s}`,
-  getSendEditingTransactionId: (s) => `mockEditingTransactionId:${s}`,
-  getSendFromObject: (s) => `mockFromObject:${s}`,
   getSendTo: (s) => `mockTo:${s}`,
-  getSendToNickname: (s) => `mockToNickname:${s}`,
-  getSendToAccounts: (s) => `mockToAccounts:${s}`,
-  getTokenBalance: (s) => `mockTokenBalance:${s}`,
-  getSendHexData: (s) => `mockHexData:${s}`,
-  getUnapprovedTxs: (s) => `mockUnapprovedTxs:${s}`,
   getSendErrors: (s) => `mockSendErrors:${s}`,
-  isSendFormInError: (s) => `mockInError:${s}`,
-  getDefaultActiveButtonIndex: () => 0,
+  resetSendState: jest.fn(),
+  signTransaction: jest.fn(),
 }));
 
 jest.mock('../../../selectors/custom-gas.js', () => ({
@@ -52,15 +33,6 @@ jest.mock('../../../selectors/custom-gas.js', () => ({
     { gasEstimateType: `mockGasEstimateType:${s}` },
   ],
 }));
-
-jest.mock('./send-footer.utils', () => ({
-  addressIsNew: jest.fn().mockReturnValue(true),
-  constructTxParams: jest.fn().mockReturnValue({ value: 'mockAmount' }),
-  constructUpdatedTx: jest
-    .fn()
-    .mockReturnValue('mockConstructedUpdatedTxParams'),
-}));
-
 require('./send-footer.container.js');
 
 describe('send-footer container', () => {
@@ -73,94 +45,19 @@ describe('send-footer container', () => {
       mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy);
     });
 
-    describe('clearSend()', () => {
+    describe('resetSendState()', () => {
       it('should dispatch an action', () => {
-        mapDispatchToPropsObject.clearSend();
+        mapDispatchToPropsObject.resetSendState();
         expect(dispatchSpy.calledOnce).toStrictEqual(true);
-        expect(clearSend).toHaveBeenCalled();
+        expect(resetSendState).toHaveBeenCalled();
       });
     });
 
     describe('sign()', () => {
-      it('should dispatch a signTokenTx action if sendToken is defined', () => {
-        mapDispatchToPropsObject.sign({
-          sendToken: {
-            address: '0xabc',
-          },
-          to: 'mockTo',
-          amount: 'mockAmount',
-          from: 'mockFrom',
-          gas: 'mockGas',
-          gasPrice: 'mockGasPrice',
-        });
+      it('should dispatch a signTransaction action', () => {
+        mapDispatchToPropsObject.sign();
         expect(dispatchSpy.calledOnce).toStrictEqual(true);
-        expect(constructTxParams).toHaveBeenCalledWith({
-          data: undefined,
-          sendToken: {
-            address: '0xabc',
-          },
-          to: 'mockTo',
-          amount: 'mockAmount',
-          from: 'mockFrom',
-          gas: 'mockGas',
-          gasPrice: 'mockGasPrice',
-        });
-        expect(signTokenTx).toHaveBeenCalledWith(
-          '0xabc',
-          'mockTo',
-          'mockAmount',
-          { value: 'mockAmount' },
-        );
-      });
-
-      it('should dispatch a sign action if sendToken is not defined', () => {
-        mapDispatchToPropsObject.sign({
-          to: 'mockTo',
-          amount: 'mockAmount',
-          from: 'mockFrom',
-          gas: 'mockGas',
-          gasPrice: 'mockGasPrice',
-        });
-        expect(dispatchSpy.calledOnce).toStrictEqual(true);
-        expect(constructTxParams).toHaveBeenCalledWith({
-          data: undefined,
-          sendToken: undefined,
-          to: 'mockTo',
-          amount: 'mockAmount',
-          from: 'mockFrom',
-          gas: 'mockGas',
-          gasPrice: 'mockGasPrice',
-        });
-        expect(signTx).toHaveBeenCalledWith({
-          value: 'mockAmount',
-        });
-      });
-    });
-
-    describe('update()', () => {
-      it('should dispatch an updateTransaction action', () => {
-        mapDispatchToPropsObject.update({
-          to: 'mockTo',
-          amount: 'mockAmount',
-          from: 'mockFrom',
-          gas: 'mockGas',
-          gasPrice: 'mockGasPrice',
-          editingTransactionId: 'mockEditingTransactionId',
-          sendToken: { address: 'mockAddress' },
-          unapprovedTxs: 'mockUnapprovedTxs',
-        });
-        expect(dispatchSpy.calledOnce).toStrictEqual(true);
-        expect(constructUpdatedTx).toHaveBeenCalledWith({
-          data: undefined,
-          to: 'mockTo',
-          amount: 'mockAmount',
-          from: 'mockFrom',
-          gas: 'mockGas',
-          gasPrice: 'mockGasPrice',
-          editingTransactionId: 'mockEditingTransactionId',
-          sendToken: { address: 'mockAddress' },
-          unapprovedTxs: 'mockUnapprovedTxs',
-        });
+        expect(signTransaction).toHaveBeenCalledTimes(1);
       });
     });
 
@@ -168,14 +65,10 @@ describe('send-footer container', () => {
       it('should dispatch an action', () => {
         mapDispatchToPropsObject.addToAddressBookIfNew(
           'mockNewAddress',
-          'mockToAccounts',
+          [{ address: 'mockToAccounts' }],
           'mockNickname',
         );
         expect(dispatchSpy.calledOnce).toStrictEqual(true);
-        expect(addressIsNew).toHaveBeenCalledWith(
-          'mockToAccounts',
-          '0xmockNewAddress',
-        );
         expect(addToAddressBook).toHaveBeenCalledWith(
           '0xmockNewAddress',
           'mockNickname',
diff --git a/ui/pages/send/send-footer/send-footer.utils.js b/ui/pages/send/send-footer/send-footer.utils.js
deleted file mode 100644
index 778b07867..000000000
--- a/ui/pages/send/send-footer/send-footer.utils.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import ethAbi from 'ethereumjs-abi';
-import { TOKEN_TRANSFER_FUNCTION_SIGNATURE } from '../send.constants';
-import { addHexPrefix } from '../../../../app/scripts/lib/util';
-import { addHexPrefixToObjectValues } from '../../../helpers/utils/util';
-
-export function constructTxParams({
-  sendToken,
-  data,
-  to,
-  amount,
-  from,
-  gas,
-  gasPrice,
-}) {
-  const txParams = {
-    data,
-    from,
-    value: '0',
-    gas,
-    gasPrice,
-  };
-
-  if (!sendToken) {
-    txParams.value = amount;
-    txParams.to = to;
-  }
-
-  return addHexPrefixToObjectValues(txParams);
-}
-
-export function constructUpdatedTx({
-  amount,
-  data,
-  editingTransactionId,
-  from,
-  gas,
-  gasPrice,
-  sendToken,
-  to,
-  unapprovedTxs,
-}) {
-  const unapprovedTx = unapprovedTxs[editingTransactionId];
-  const txParamsData = unapprovedTx.txParams.data
-    ? unapprovedTx.txParams.data
-    : data;
-
-  const editingTx = {
-    ...unapprovedTx,
-    txParams: Object.assign(
-      unapprovedTx.txParams,
-      addHexPrefixToObjectValues({
-        data: txParamsData,
-        to,
-        from,
-        gas,
-        gasPrice,
-        value: amount,
-      }),
-    ),
-  };
-
-  if (sendToken) {
-    Object.assign(
-      editingTx.txParams,
-      addHexPrefixToObjectValues({
-        value: '0',
-        to: sendToken.address,
-        data:
-          TOKEN_TRANSFER_FUNCTION_SIGNATURE +
-          Array.prototype.map
-            .call(
-              ethAbi.rawEncode(
-                ['address', 'uint256'],
-                [to, addHexPrefix(amount)],
-              ),
-              (x) => `00${x.toString(16)}`.slice(-2),
-            )
-            .join(''),
-      }),
-    );
-  }
-
-  if (typeof editingTx.txParams.data === 'undefined') {
-    delete editingTx.txParams.data;
-  }
-
-  return editingTx;
-}
-
-export function addressIsNew(toAccounts, newAddress) {
-  const newAddressNormalized = newAddress.toLowerCase();
-  const foundMatching = toAccounts.some(
-    ({ address }) => address.toLowerCase() === newAddressNormalized,
-  );
-  return !foundMatching;
-}
diff --git a/ui/pages/send/send-footer/send-footer.utils.test.js b/ui/pages/send/send-footer/send-footer.utils.test.js
deleted file mode 100644
index 034ca2ecd..000000000
--- a/ui/pages/send/send-footer/send-footer.utils.test.js
+++ /dev/null
@@ -1,215 +0,0 @@
-import { addHexPrefixToObjectValues } from '../../../helpers/utils/util';
-import { TOKEN_TRANSFER_FUNCTION_SIGNATURE } from '../send.constants';
-
-import {
-  addressIsNew,
-  constructTxParams,
-  constructUpdatedTx,
-} from './send-footer.utils';
-
-jest.mock('ethereumjs-abi', () => ({
-  rawEncode: jest.fn((arr1, arr2) => {
-    return [...arr1, ...arr2];
-  }),
-}));
-
-describe('send-footer utils', () => {
-  describe('addHexPrefixToObjectValues()', () => {
-    it('should return a new object with the same properties with a 0x prefix', () => {
-      expect(
-        addHexPrefixToObjectValues({
-          prop1: '0x123',
-          prop2: '456',
-          prop3: 'x',
-        }),
-      ).toStrictEqual({
-        prop1: '0x123',
-        prop2: '0x456',
-        prop3: '0xx',
-      });
-    });
-  });
-
-  describe('addressIsNew()', () => {
-    it('should return false if the address exists in toAccounts', () => {
-      expect(
-        addressIsNew(
-          [{ address: '0xabc' }, { address: '0xdef' }, { address: '0xghi' }],
-          '0xdef',
-        ),
-      ).toStrictEqual(false);
-    });
-
-    it('should return true if the address does not exists in toAccounts', () => {
-      expect(
-        addressIsNew(
-          [{ address: '0xabc' }, { address: '0xdef' }, { address: '0xghi' }],
-          '0xxyz',
-        ),
-      ).toStrictEqual(true);
-    });
-  });
-
-  describe('constructTxParams()', () => {
-    it('should return a new txParams object with data if there data is given', () => {
-      expect(
-        constructTxParams({
-          data: 'someData',
-          sendToken: undefined,
-          to: 'mockTo',
-          amount: 'mockAmount',
-          from: 'mockFrom',
-          gas: 'mockGas',
-          gasPrice: 'mockGasPrice',
-        }),
-      ).toStrictEqual({
-        data: '0xsomeData',
-        to: '0xmockTo',
-        value: '0xmockAmount',
-        from: '0xmockFrom',
-        gas: '0xmockGas',
-        gasPrice: '0xmockGasPrice',
-      });
-    });
-
-    it('should return a new txParams object with value and to properties if there is no sendToken', () => {
-      expect(
-        constructTxParams({
-          sendToken: undefined,
-          to: 'mockTo',
-          amount: 'mockAmount',
-          from: 'mockFrom',
-          gas: 'mockGas',
-          gasPrice: 'mockGasPrice',
-        }),
-      ).toStrictEqual({
-        data: undefined,
-        to: '0xmockTo',
-        value: '0xmockAmount',
-        from: '0xmockFrom',
-        gas: '0xmockGas',
-        gasPrice: '0xmockGasPrice',
-      });
-    });
-
-    it('should return a new txParams object without a to property and a 0 value if there is a sendToken', () => {
-      expect(
-        constructTxParams({
-          sendToken: { address: '0x0' },
-          to: 'mockTo',
-          amount: 'mockAmount',
-          from: 'mockFrom',
-          gas: 'mockGas',
-          gasPrice: 'mockGasPrice',
-        }),
-      ).toStrictEqual({
-        data: undefined,
-        value: '0x0',
-        from: '0xmockFrom',
-        gas: '0xmockGas',
-        gasPrice: '0xmockGasPrice',
-      });
-    });
-  });
-
-  describe('constructUpdatedTx()', () => {
-    it('should return a new object with an updated txParams', () => {
-      const result = constructUpdatedTx({
-        amount: 'mockAmount',
-        editingTransactionId: '0x456',
-        from: 'mockFrom',
-        gas: 'mockGas',
-        gasPrice: 'mockGasPrice',
-        sendToken: false,
-        to: 'mockTo',
-        unapprovedTxs: {
-          '0x123': {},
-          '0x456': {
-            unapprovedTxParam: 'someOtherParam',
-            txParams: {
-              data: 'someData',
-            },
-          },
-        },
-      });
-      expect(result).toStrictEqual({
-        unapprovedTxParam: 'someOtherParam',
-        txParams: {
-          from: '0xmockFrom',
-          gas: '0xmockGas',
-          gasPrice: '0xmockGasPrice',
-          value: '0xmockAmount',
-          to: '0xmockTo',
-          data: '0xsomeData',
-        },
-      });
-    });
-
-    it('should not have data property if there is non in the original tx', () => {
-      const result = constructUpdatedTx({
-        amount: 'mockAmount',
-        editingTransactionId: '0x456',
-        from: 'mockFrom',
-        gas: 'mockGas',
-        gasPrice: 'mockGasPrice',
-        sendToken: false,
-        to: 'mockTo',
-        unapprovedTxs: {
-          '0x123': {},
-          '0x456': {
-            unapprovedTxParam: 'someOtherParam',
-            txParams: {
-              from: 'oldFrom',
-              gas: 'oldGas',
-              gasPrice: 'oldGasPrice',
-            },
-          },
-        },
-      });
-
-      expect(result).toStrictEqual({
-        unapprovedTxParam: 'someOtherParam',
-        txParams: {
-          from: '0xmockFrom',
-          gas: '0xmockGas',
-          gasPrice: '0xmockGasPrice',
-          value: '0xmockAmount',
-          to: '0xmockTo',
-        },
-      });
-    });
-
-    it('should have token property values if sendToken is truthy', () => {
-      const result = constructUpdatedTx({
-        amount: 'mockAmount',
-        editingTransactionId: '0x456',
-        from: 'mockFrom',
-        gas: 'mockGas',
-        gasPrice: 'mockGasPrice',
-        sendToken: {
-          address: 'mockTokenAddress',
-        },
-        to: 'mockTo',
-        unapprovedTxs: {
-          '0x123': {},
-          '0x456': {
-            unapprovedTxParam: 'someOtherParam',
-            txParams: {},
-          },
-        },
-      });
-
-      expect(result).toStrictEqual({
-        unapprovedTxParam: 'someOtherParam',
-        txParams: {
-          from: '0xmockFrom',
-          gas: '0xmockGas',
-          gasPrice: '0xmockGasPrice',
-          value: '0x0',
-          to: '0xmockTokenAddress',
-          data: `${TOKEN_TRANSFER_FUNCTION_SIGNATURE}ss56Tont`,
-        },
-      });
-    });
-  });
-});
diff --git a/ui/pages/send/send-header/index.js b/ui/pages/send/send-header/index.js
index cfb482303..b4bda8af7 100644
--- a/ui/pages/send/send-header/index.js
+++ b/ui/pages/send/send-header/index.js
@@ -1 +1 @@
-export { default } from './send-header.container';
+export { default } from './send-header.component';
diff --git a/ui/pages/send/send-header/send-header.component.js b/ui/pages/send/send-header/send-header.component.js
index 303ef4c7a..1b8af5312 100644
--- a/ui/pages/send/send-header/send-header.component.js
+++ b/ui/pages/send/send-header/send-header.component.js
@@ -1,33 +1,47 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
 import PageContainerHeader from '../../../components/ui/page-container/page-container-header';
+import { getMostRecentOverviewPage } from '../../../ducks/history/history';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import {
+  ASSET_TYPES,
+  getSendAsset,
+  getSendStage,
+  resetSendState,
+  SEND_STAGES,
+} from '../../../ducks/send';
 
-export default class SendHeader extends Component {
-  static propTypes = {
-    clearSend: PropTypes.func,
-    history: PropTypes.object,
-    mostRecentOverviewPage: PropTypes.string,
-    titleKey: PropTypes.string,
-  };
+export default function SendHeader() {
+  const history = useHistory();
+  const mostRecentOverviewPage = useSelector(getMostRecentOverviewPage);
+  const dispatch = useDispatch();
+  const stage = useSelector(getSendStage);
+  const asset = useSelector(getSendAsset);
+  const t = useI18nContext();
 
-  static contextTypes = {
-    t: PropTypes.func,
-  };
-
-  onClose() {
-    const { clearSend, history, mostRecentOverviewPage } = this.props;
-    clearSend();
+  const onClose = () => {
+    dispatch(resetSendState());
     history.push(mostRecentOverviewPage);
+  };
+
+  let title = asset.type === ASSET_TYPES.NATIVE ? t('send') : t('sendTokens');
+
+  if (
+    stage === SEND_STAGES.ADD_RECIPIENT ||
+    stage === SEND_STAGES.UNINITIALIZED
+  ) {
+    title = t('addRecipient');
+  } else if (stage === SEND_STAGES.EDIT) {
+    title = t('edit');
   }
 
-  render() {
-    return (
-      <PageContainerHeader
-        className="send__header"
-        onClose={() => this.onClose()}
-        title={this.context.t(this.props.titleKey)}
-        headerCloseText={this.context.t('cancel')}
-      />
-    );
-  }
+  return (
+    <PageContainerHeader
+      className="send__header"
+      onClose={onClose}
+      title={title}
+      headerCloseText={t('cancel')}
+    />
+  );
 }
diff --git a/ui/pages/send/send-header/send-header.component.test.js b/ui/pages/send/send-header/send-header.component.test.js
index 8ff76c35e..a8fa64342 100644
--- a/ui/pages/send/send-header/send-header.component.test.js
+++ b/ui/pages/send/send-header/send-header.component.test.js
@@ -1,73 +1,120 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import sinon from 'sinon';
-import PageContainerHeader from '../../../components/ui/page-container/page-container-header';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+
+import { fireEvent } from '@testing-library/react';
+import { ASSET_TYPES, initialState, SEND_STAGES } from '../../../ducks/send';
+import { renderWithProvider } from '../../../../test/jest';
 import SendHeader from './send-header.component';
 
+const middleware = [thunk];
+
+jest.mock('react-router-dom', () => {
+  const original = jest.requireActual('react-router-dom');
+  return {
+    ...original,
+    useHistory: () => ({
+      push: jest.fn(),
+    }),
+  };
+});
+
 describe('SendHeader Component', () => {
-  let wrapper;
-
-  const propsMethodSpies = {
-    clearSend: sinon.spy(),
-  };
-  const historySpies = {
-    push: sinon.spy(),
-  };
-
-  beforeAll(() => {
-    sinon.spy(SendHeader.prototype, 'onClose');
-  });
-
-  beforeEach(() => {
-    wrapper = shallow(
-      <SendHeader
-        clearSend={propsMethodSpies.clearSend}
-        history={historySpies}
-        mostRecentOverviewPage="mostRecentOverviewPage"
-        titleKey="mockTitleKey"
-      />,
-      { context: { t: (str1, str2) => (str2 ? str1 + str2 : str1) } },
-    );
-  });
-
-  afterEach(() => {
-    propsMethodSpies.clearSend.resetHistory();
-    historySpies.push.resetHistory();
-    SendHeader.prototype.onClose.resetHistory();
-  });
-
-  afterAll(() => {
-    sinon.restore();
-  });
-
-  describe('onClose', () => {
-    it('should call clearSend', () => {
-      expect(propsMethodSpies.clearSend.callCount).toStrictEqual(0);
-      wrapper.instance().onClose();
-      expect(propsMethodSpies.clearSend.callCount).toStrictEqual(1);
-    });
-
-    it('should call history.push', () => {
-      expect(historySpies.push.callCount).toStrictEqual(0);
-      wrapper.instance().onClose();
-      expect(historySpies.push.callCount).toStrictEqual(1);
-      expect(historySpies.push.getCall(0).args[0]).toStrictEqual(
-        'mostRecentOverviewPage',
+  describe('Title', () => {
+    it('should render "Add Recipient" for UNINITIALIZED or ADD_RECIPIENT stages', () => {
+      const { getByText, rerender } = renderWithProvider(
+        <SendHeader />,
+        configureMockStore(middleware)({
+          send: initialState,
+          gas: { basicEstimateStatus: 'LOADING' },
+          history: { mostRecentOverviewPage: 'activity' },
+        }),
       );
+      expect(getByText('Add Recipient')).toBeTruthy();
+      rerender(
+        <SendHeader />,
+        configureMockStore(middleware)({
+          send: { ...initialState, stage: SEND_STAGES.ADD_RECIPIENT },
+          gas: { basicEstimateStatus: 'LOADING' },
+          history: { mostRecentOverviewPage: 'activity' },
+        }),
+      );
+      expect(getByText('Add Recipient')).toBeTruthy();
+    });
+
+    it('should render "Send" for DRAFT stage when asset type is NATIVE', () => {
+      const { getByText } = renderWithProvider(
+        <SendHeader />,
+        configureMockStore(middleware)({
+          send: {
+            ...initialState,
+            stage: SEND_STAGES.DRAFT,
+            asset: { ...initialState.asset, type: ASSET_TYPES.NATIVE },
+          },
+          gas: { basicEstimateStatus: 'LOADING' },
+          history: { mostRecentOverviewPage: 'activity' },
+        }),
+      );
+      expect(getByText('Send')).toBeTruthy();
+    });
+
+    it('should render "Send Tokens" for DRAFT stage when asset type is TOKEN', () => {
+      const { getByText } = renderWithProvider(
+        <SendHeader />,
+        configureMockStore(middleware)({
+          send: {
+            ...initialState,
+            stage: SEND_STAGES.DRAFT,
+            asset: { ...initialState.asset, type: ASSET_TYPES.TOKEN },
+          },
+          gas: { basicEstimateStatus: 'LOADING' },
+          history: { mostRecentOverviewPage: 'activity' },
+        }),
+      );
+      expect(getByText('Send Tokens')).toBeTruthy();
+    });
+
+    it('should render "Edit" for EDIT stage', () => {
+      const { getByText } = renderWithProvider(
+        <SendHeader />,
+        configureMockStore(middleware)({
+          send: {
+            ...initialState,
+            stage: SEND_STAGES.EDIT,
+          },
+          gas: { basicEstimateStatus: 'LOADING' },
+          history: { mostRecentOverviewPage: 'activity' },
+        }),
+      );
+      expect(getByText('Edit')).toBeTruthy();
     });
   });
 
-  describe('render', () => {
-    it('should render a PageContainerHeader component', () => {
-      expect(wrapper.find(PageContainerHeader)).toHaveLength(1);
+  describe('Cancel Button', () => {
+    it('has a cancel button in header', () => {
+      const { getByText } = renderWithProvider(
+        <SendHeader />,
+        configureMockStore(middleware)({
+          send: initialState,
+          gas: { basicEstimateStatus: 'LOADING' },
+          history: { mostRecentOverviewPage: 'activity' },
+        }),
+      );
+      expect(getByText('Cancel')).toBeTruthy();
     });
 
-    it('should pass the correct props to PageContainerHeader', () => {
-      const { onClose, title } = wrapper.find(PageContainerHeader).props();
-      expect(title).toStrictEqual('mockTitleKey');
-      expect(SendHeader.prototype.onClose.callCount).toStrictEqual(0);
-      onClose();
-      expect(SendHeader.prototype.onClose.callCount).toStrictEqual(1);
+    it('resets send state when clicked', () => {
+      const store = configureMockStore(middleware)({
+        send: initialState,
+        gas: { basicEstimateStatus: 'LOADING' },
+        history: { mostRecentOverviewPage: 'activity' },
+      });
+      const { getByText } = renderWithProvider(<SendHeader />, store);
+      const expectedActions = [
+        { type: 'send/resetSendState', payload: undefined },
+      ];
+      fireEvent.click(getByText('Cancel'));
+      expect(store.getActions()).toStrictEqual(expectedActions);
     });
   });
 });
diff --git a/ui/pages/send/send-header/send-header.container.js b/ui/pages/send/send-header/send-header.container.js
deleted file mode 100644
index b66a9ba89..000000000
--- a/ui/pages/send/send-header/send-header.container.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { connect } from 'react-redux';
-import { clearSend } from '../../../ducks/send/send.duck';
-import { getTitleKey } from '../../../selectors';
-import { getMostRecentOverviewPage } from '../../../ducks/history/history';
-import SendHeader from './send-header.component';
-
-export default connect(mapStateToProps, mapDispatchToProps)(SendHeader);
-
-function mapStateToProps(state) {
-  return {
-    mostRecentOverviewPage: getMostRecentOverviewPage(state),
-    titleKey: getTitleKey(state),
-  };
-}
-
-function mapDispatchToProps(dispatch) {
-  return {
-    clearSend: () => dispatch(clearSend()),
-  };
-}
diff --git a/ui/pages/send/send.component.js b/ui/pages/send/send.component.js
deleted file mode 100644
index 6954f9cfc..000000000
--- a/ui/pages/send/send.component.js
+++ /dev/null
@@ -1,403 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { debounce } from 'lodash';
-import { isValidHexAddress } from '../../../shared/modules/hexstring-utils';
-import {
-  getAmountErrorObject,
-  getGasFeeErrorObject,
-  getToAddressForGasUpdate,
-  doesAmountErrorRequireUpdate,
-} from './send.utils';
-import {
-  getToWarningObject,
-  getToErrorObject,
-} from './send-content/add-recipient/add-recipient';
-import SendHeader from './send-header';
-import AddRecipient from './send-content/add-recipient';
-import SendContent from './send-content';
-import SendFooter from './send-footer';
-import EnsInput from './send-content/add-recipient/ens-input';
-import {
-  INVALID_RECIPIENT_ADDRESS_ERROR,
-  KNOWN_RECIPIENT_ADDRESS_ERROR,
-  CONTRACT_ADDRESS_ERROR,
-} from './send.constants';
-
-export default class SendTransactionScreen extends Component {
-  static propTypes = {
-    addressBook: PropTypes.arrayOf(PropTypes.object),
-    amount: PropTypes.string,
-    blockGasLimit: PropTypes.string,
-    conversionRate: PropTypes.number,
-    editingTransactionId: PropTypes.string,
-    fetchBasicGasEstimates: PropTypes.func.isRequired,
-    from: PropTypes.object,
-    gasLimit: PropTypes.string,
-    gasPrice: PropTypes.string,
-    gasTotal: PropTypes.string,
-    history: PropTypes.object,
-    chainId: PropTypes.string,
-    primaryCurrency: PropTypes.string,
-    resetSendState: PropTypes.func.isRequired,
-    selectedAddress: PropTypes.string,
-    sendToken: PropTypes.object,
-    showHexData: PropTypes.bool,
-    to: PropTypes.string,
-    toNickname: PropTypes.string,
-    tokens: PropTypes.array,
-    tokenBalance: PropTypes.string,
-    tokenContract: PropTypes.object,
-    updateAndSetGasLimit: PropTypes.func.isRequired,
-    updateSendEnsResolution: PropTypes.func.isRequired,
-    updateSendEnsResolutionError: PropTypes.func.isRequired,
-    updateSendErrors: PropTypes.func.isRequired,
-    updateSendTo: PropTypes.func.isRequired,
-    updateSendTokenBalance: PropTypes.func.isRequired,
-    updateToNicknameIfNecessary: PropTypes.func.isRequired,
-    scanQrCode: PropTypes.func.isRequired,
-    qrCodeDetected: PropTypes.func.isRequired,
-    qrCodeData: PropTypes.object,
-    sendTokenAddress: PropTypes.string,
-    gasIsExcessive: PropTypes.bool.isRequired,
-  };
-
-  static contextTypes = {
-    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
-  };
-
-  state = {
-    query: '',
-    toError: null,
-    toWarning: null,
-    internalSearch: false,
-  };
-
-  constructor(props) {
-    super(props);
-    this.dValidate = debounce(this.validate, 1000);
-  }
-
-  componentDidUpdate(prevProps) {
-    const {
-      amount,
-      conversionRate,
-      from: { address, balance },
-      gasTotal,
-      chainId,
-      primaryCurrency,
-      sendToken,
-      tokenBalance,
-      updateSendErrors,
-      updateSendTo,
-      updateSendTokenBalance,
-      tokenContract,
-      to,
-      toNickname,
-      addressBook,
-      updateToNicknameIfNecessary,
-      qrCodeData,
-      qrCodeDetected,
-    } = this.props;
-    const { toError, toWarning } = this.state;
-
-    let updateGas = false;
-    const {
-      from: { balance: prevBalance },
-      gasTotal: prevGasTotal,
-      tokenBalance: prevTokenBalance,
-      chainId: prevChainId,
-      sendToken: prevSendToken,
-      to: prevTo,
-    } = prevProps;
-
-    const uninitialized = [prevBalance, prevGasTotal].every((n) => n === null);
-
-    const amountErrorRequiresUpdate = doesAmountErrorRequireUpdate({
-      balance,
-      gasTotal,
-      prevBalance,
-      prevGasTotal,
-      prevTokenBalance,
-      sendToken,
-      tokenBalance,
-    });
-
-    if (amountErrorRequiresUpdate) {
-      const amountErrorObject = getAmountErrorObject({
-        amount,
-        balance,
-        conversionRate,
-        gasTotal,
-        primaryCurrency,
-        sendToken,
-        tokenBalance,
-      });
-      const gasFeeErrorObject = sendToken
-        ? getGasFeeErrorObject({
-            balance,
-            conversionRate,
-            gasTotal,
-            primaryCurrency,
-            sendToken,
-          })
-        : { gasFee: null };
-      updateSendErrors(Object.assign(amountErrorObject, gasFeeErrorObject));
-    }
-
-    if (!uninitialized) {
-      if (chainId !== prevChainId && chainId !== undefined) {
-        updateSendTokenBalance({
-          sendToken,
-          tokenContract,
-          address,
-        });
-        updateToNicknameIfNecessary(to, toNickname, addressBook);
-        this.props.fetchBasicGasEstimates();
-        updateGas = true;
-      }
-    }
-
-    const prevTokenAddress = prevSendToken && prevSendToken.address;
-    const sendTokenAddress = sendToken && sendToken.address;
-
-    if (sendTokenAddress && prevTokenAddress !== sendTokenAddress) {
-      this.updateSendToken();
-      this.validate(this.state.query);
-      updateGas = true;
-    }
-
-    let scannedAddress;
-    if (qrCodeData) {
-      if (qrCodeData.type === 'address') {
-        scannedAddress = qrCodeData.values.address.toLowerCase();
-        if (isValidHexAddress(scannedAddress, { allowNonPrefixed: false })) {
-          const currentAddress = prevTo?.toLowerCase();
-          if (currentAddress !== scannedAddress) {
-            updateSendTo(scannedAddress);
-            updateGas = true;
-            // Clean up QR code data after handling
-            qrCodeDetected(null);
-          }
-        } else {
-          scannedAddress = null;
-          qrCodeDetected(null);
-          this.setState({ toError: INVALID_RECIPIENT_ADDRESS_ERROR });
-        }
-      }
-    }
-
-    if (updateGas) {
-      if (scannedAddress) {
-        this.updateGas({ to: scannedAddress });
-      } else {
-        this.updateGas();
-      }
-    }
-
-    // If selecting ETH after selecting a token, clear token related messages.
-    if (prevSendToken && !sendToken) {
-      let error = toError;
-      let warning = toWarning;
-
-      if (toError === CONTRACT_ADDRESS_ERROR) {
-        error = null;
-      }
-
-      if (toWarning === KNOWN_RECIPIENT_ADDRESS_ERROR) {
-        warning = null;
-      }
-
-      this.setState({
-        toError: error,
-        toWarning: warning,
-      });
-    }
-  }
-
-  componentDidMount() {
-    this.props.fetchBasicGasEstimates().then(() => {
-      this.updateGas();
-    });
-  }
-
-  UNSAFE_componentWillMount() {
-    this.updateSendToken();
-
-    // Show QR Scanner modal  if ?scan=true
-    if (window.location.search === '?scan=true') {
-      this.props.scanQrCode();
-
-      // Clear the queryString param after showing the modal
-      const cleanUrl = window.location.href.split('?')[0];
-      window.history.pushState({}, null, `${cleanUrl}`);
-      window.location.hash = '#send';
-    }
-  }
-
-  componentWillUnmount() {
-    this.props.resetSendState();
-  }
-
-  onRecipientInputChange = (query) => {
-    const { internalSearch } = this.state;
-
-    if (!internalSearch) {
-      if (query) {
-        this.dValidate(query);
-      } else {
-        this.dValidate.cancel();
-        this.validate(query);
-      }
-    }
-
-    this.setState({ query });
-  };
-
-  setInternalSearch(internalSearch) {
-    this.setState({ query: '', internalSearch });
-  }
-
-  validate(query) {
-    const { tokens, sendToken, chainId, sendTokenAddress } = this.props;
-
-    const { internalSearch } = this.state;
-
-    if (!query || internalSearch) {
-      this.setState({ toError: '', toWarning: '' });
-      return;
-    }
-
-    const toErrorObject = getToErrorObject(query, sendTokenAddress, chainId);
-    const toWarningObject = getToWarningObject(query, tokens, sendToken);
-
-    this.setState({
-      toError: toErrorObject.to,
-      toWarning: toWarningObject.to,
-    });
-  }
-
-  updateSendToken() {
-    const {
-      from: { address },
-      sendToken,
-      tokenContract,
-      updateSendTokenBalance,
-    } = this.props;
-
-    updateSendTokenBalance({
-      sendToken,
-      tokenContract,
-      address,
-    });
-  }
-
-  updateGas({ to: updatedToAddress, amount: value, data } = {}) {
-    const {
-      amount,
-      blockGasLimit,
-      editingTransactionId,
-      gasLimit,
-      gasPrice,
-      selectedAddress,
-      sendToken,
-      to: currentToAddress,
-      updateAndSetGasLimit,
-    } = this.props;
-
-    updateAndSetGasLimit({
-      blockGasLimit,
-      editingTransactionId,
-      gasLimit,
-      gasPrice,
-      selectedAddress,
-      sendToken,
-      to: getToAddressForGasUpdate(updatedToAddress, currentToAddress),
-      value: value || amount,
-      data,
-    });
-  }
-
-  render() {
-    const { history, to } = this.props;
-    let content;
-
-    if (to) {
-      content = this.renderSendContent();
-    } else {
-      content = this.renderAddRecipient();
-    }
-
-    return (
-      <div className="page-container">
-        <SendHeader history={history} />
-        {this.renderInput()}
-        {content}
-      </div>
-    );
-  }
-
-  renderInput() {
-    const { internalSearch } = this.state;
-    return (
-      <EnsInput
-        className="send__to-row"
-        scanQrCode={(_) => {
-          this.context.metricsEvent({
-            eventOpts: {
-              category: 'Transactions',
-              action: 'Edit Screen',
-              name: 'Used QR scanner',
-            },
-          });
-          this.props.scanQrCode();
-        }}
-        onChange={this.onRecipientInputChange}
-        onValidAddressTyped={(address) => this.props.updateSendTo(address, '')}
-        onPaste={(text) => {
-          this.props.updateSendTo(text) && this.updateGas();
-        }}
-        onReset={() => this.props.updateSendTo('', '')}
-        updateEnsResolution={this.props.updateSendEnsResolution}
-        updateEnsResolutionError={this.props.updateSendEnsResolutionError}
-        internalSearch={internalSearch}
-      />
-    );
-  }
-
-  renderAddRecipient() {
-    const { toError, toWarning } = this.state;
-    return (
-      <AddRecipient
-        updateGas={({ to, amount, data } = {}) =>
-          this.updateGas({ to, amount, data })
-        }
-        query={this.state.query}
-        toError={toError}
-        toWarning={toWarning}
-        setInternalSearch={(internalSearch) =>
-          this.setInternalSearch(internalSearch)
-        }
-      />
-    );
-  }
-
-  renderSendContent() {
-    const { history, showHexData, gasIsExcessive } = this.props;
-    const { toWarning, toError } = this.state;
-
-    return [
-      <SendContent
-        key="send-content"
-        updateGas={({ to, amount, data } = {}) =>
-          this.updateGas({ to, amount, data })
-        }
-        showHexData={showHexData}
-        warning={toWarning}
-        error={toError}
-        gasIsExcessive={gasIsExcessive}
-      />,
-      <SendFooter key="send-footer" history={history} />,
-    ];
-  }
-}
diff --git a/ui/pages/send/send.component.test.js b/ui/pages/send/send.component.test.js
deleted file mode 100644
index 5cc90307e..000000000
--- a/ui/pages/send/send.component.test.js
+++ /dev/null
@@ -1,467 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import sinon from 'sinon';
-import {
-  RINKEBY_CHAIN_ID,
-  ROPSTEN_CHAIN_ID,
-} from '../../../shared/constants/network';
-import SendTransactionScreen from './send.component';
-import * as util from './send.utils';
-
-import SendHeader from './send-header/send-header.container';
-import SendContent from './send-content/send-content.container';
-import SendFooter from './send-footer/send-footer.container';
-
-import AddRecipient from './send-content/add-recipient/add-recipient.container';
-
-jest.mock('./send.utils', () => ({
-  getToAddressForGasUpdate: jest.fn().mockReturnValue('mockAddress'),
-  getAmountErrorObject: jest.fn().mockReturnValue({
-    amount: 'mockAmountError',
-  }),
-  getGasFeeErrorObject: jest.fn().mockReturnValue({
-    gasFee: 'mockGasFeeError',
-  }),
-  doesAmountErrorRequireUpdate: jest.fn(
-    (obj) => obj.balance !== obj.prevBalance,
-  ),
-}));
-
-describe('Send Component', () => {
-  let wrapper, didMountSpy, updateGasSpy;
-
-  const mockBasicGasEstimates = {
-    blockTime: 'mockBlockTime',
-  };
-
-  const propsMethodSpies = {
-    updateAndSetGasLimit: jest.fn(),
-    updateSendErrors: jest.fn(),
-    updateSendTokenBalance: jest.fn(),
-    resetSendState: jest.fn(),
-    fetchBasicGasEstimates: jest.fn(() =>
-      Promise.resolve(mockBasicGasEstimates),
-    ),
-    fetchGasEstimates: jest.fn(),
-    updateToNicknameIfNecessary: jest.fn(),
-  };
-
-  beforeAll(() => {
-    didMountSpy = sinon.spy(
-      SendTransactionScreen.prototype,
-      'componentDidMount',
-    );
-    updateGasSpy = sinon.spy(SendTransactionScreen.prototype, 'updateGas');
-  });
-
-  beforeEach(() => {
-    wrapper = shallow(
-      <SendTransactionScreen
-        amount="mockAmount"
-        blockGasLimit="mockBlockGasLimit"
-        conversionRate={10}
-        editingTransactionId="mockEditingTransactionId"
-        fetchBasicGasEstimates={propsMethodSpies.fetchBasicGasEstimates}
-        fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
-        from={{ address: 'mockAddress', balance: 'mockBalance' }}
-        gasLimit="mockGasLimit"
-        gasPrice="mockGasPrice"
-        gasTotal="mockGasTotal"
-        history={{ mockProp: 'history-abc' }}
-        chainId={ROPSTEN_CHAIN_ID}
-        primaryCurrency="mockPrimaryCurrency"
-        selectedAddress="mockSelectedAddress"
-        sendToken={{ address: 'mockTokenAddress', decimals: 18, symbol: 'TST' }}
-        showHexData
-        tokenBalance="mockTokenBalance"
-        tokenContract={{ method: 'mockTokenMethod' }}
-        updateAndSetGasLimit={propsMethodSpies.updateAndSetGasLimit}
-        qrCodeDetected={() => undefined}
-        scanQrCode={() => undefined}
-        updateSendEnsResolution={() => undefined}
-        updateSendEnsResolutionError={() => undefined}
-        updateSendErrors={propsMethodSpies.updateSendErrors}
-        updateSendTo={() => undefined}
-        updateSendTokenBalance={propsMethodSpies.updateSendTokenBalance}
-        resetSendState={propsMethodSpies.resetSendState}
-        updateToNicknameIfNecessary={
-          propsMethodSpies.updateToNicknameIfNecessary
-        }
-        gasIsExcessive={false}
-      />,
-    );
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-    didMountSpy.resetHistory();
-    updateGasSpy.resetHistory();
-  });
-
-  describe('componentDidMount', () => {
-    it('should call componentDidMount', () => {
-      expect(didMountSpy.callCount).toStrictEqual(1);
-    });
-
-    it('should call props.fetchBasicGasAndTimeEstimates', () => {
-      propsMethodSpies.fetchBasicGasEstimates.mockClear();
-      expect(propsMethodSpies.fetchBasicGasEstimates).not.toHaveBeenCalled();
-      wrapper.instance().componentDidMount();
-      expect(propsMethodSpies.fetchBasicGasEstimates).toHaveBeenCalled();
-    });
-
-    it('should call this.updateGas', () => {
-      expect(updateGasSpy.callCount).toStrictEqual(1);
-    });
-  });
-
-  describe('componentWillUnmount', () => {
-    it('should call this.props.resetSendState', () => {
-      propsMethodSpies.resetSendState.mockClear();
-      expect(propsMethodSpies.resetSendState).not.toHaveBeenCalled();
-      wrapper.instance().componentWillUnmount();
-      expect(propsMethodSpies.resetSendState).toHaveBeenCalled();
-    });
-  });
-
-  describe('componentDidUpdate', () => {
-    it('should call doesAmountErrorRequireUpdate with the expected params', () => {
-      wrapper.instance().componentDidUpdate({
-        from: {
-          balance: '',
-        },
-      });
-      expect(util.doesAmountErrorRequireUpdate).toHaveBeenCalled();
-      expect(util.doesAmountErrorRequireUpdate.mock.calls[0][0]).toMatchObject({
-        balance: 'mockBalance',
-        gasTotal: 'mockGasTotal',
-        prevBalance: '',
-        prevGasTotal: undefined,
-        prevTokenBalance: undefined,
-        sendToken: {
-          address: 'mockTokenAddress',
-          decimals: 18,
-          symbol: 'TST',
-        },
-        tokenBalance: 'mockTokenBalance',
-      });
-    });
-
-    it('should not call getAmountErrorObject if doesAmountErrorRequireUpdate returns false', () => {
-      wrapper.instance().componentDidUpdate({
-        from: {
-          balance: 'mockBalance',
-        },
-      });
-      expect(util.getAmountErrorObject).not.toHaveBeenCalled();
-    });
-
-    it('should call getAmountErrorObject if doesAmountErrorRequireUpdate returns true', () => {
-      wrapper.instance().componentDidUpdate({
-        from: {
-          balance: 'balanceChanged',
-        },
-      });
-      expect(util.getAmountErrorObject).toHaveBeenCalled();
-      expect(util.getAmountErrorObject.mock.calls[0][0]).toMatchObject({
-        amount: 'mockAmount',
-        balance: 'mockBalance',
-        conversionRate: 10,
-        gasTotal: 'mockGasTotal',
-        primaryCurrency: 'mockPrimaryCurrency',
-        sendToken: {
-          address: 'mockTokenAddress',
-          decimals: 18,
-          symbol: 'TST',
-        },
-        tokenBalance: 'mockTokenBalance',
-      });
-    });
-
-    it('should call getGasFeeErrorObject if doesAmountErrorRequireUpdate returns true and sendToken is truthy', () => {
-      wrapper.instance().componentDidUpdate({
-        from: {
-          balance: 'balanceChanged',
-        },
-      });
-      expect(util.getGasFeeErrorObject).toHaveBeenCalled();
-      expect(util.getGasFeeErrorObject.mock.calls[0][0]).toMatchObject({
-        balance: 'mockBalance',
-        conversionRate: 10,
-        gasTotal: 'mockGasTotal',
-        primaryCurrency: 'mockPrimaryCurrency',
-        sendToken: {
-          address: 'mockTokenAddress',
-          decimals: 18,
-          symbol: 'TST',
-        },
-      });
-    });
-
-    it('should not call getGasFeeErrorObject if doesAmountErrorRequireUpdate returns false', () => {
-      wrapper.instance().componentDidUpdate({
-        from: { address: 'mockAddress', balance: 'mockBalance' },
-      });
-      expect(util.getGasFeeErrorObject).not.toHaveBeenCalled();
-    });
-
-    it('should not call getGasFeeErrorObject if doesAmountErrorRequireUpdate returns true but sendToken is falsy', () => {
-      wrapper.setProps({ sendToken: null });
-      wrapper.instance().componentDidUpdate({
-        from: {
-          balance: 'balanceChanged',
-        },
-      });
-      expect(util.getGasFeeErrorObject).not.toHaveBeenCalled();
-    });
-
-    it('should call updateSendErrors with the expected params if sendToken is falsy', () => {
-      wrapper.setProps({ sendToken: null });
-      wrapper.instance().componentDidUpdate({
-        from: {
-          balance: 'balanceChanged',
-        },
-      });
-      expect(propsMethodSpies.updateSendErrors).toHaveBeenCalledTimes(1);
-      expect(propsMethodSpies.updateSendErrors.mock.calls[0][0]).toMatchObject({
-        amount: 'mockAmountError',
-        gasFee: null,
-      });
-    });
-
-    it('should call updateSendErrors with the expected params if sendToken is truthy', () => {
-      wrapper.setProps({
-        sendToken: { address: 'mockTokenAddress', decimals: 18, symbol: 'TST' },
-      });
-      wrapper.instance().componentDidUpdate({
-        from: {
-          balance: 'balanceChanged',
-        },
-      });
-      expect(propsMethodSpies.updateSendErrors).toHaveBeenCalled();
-      expect(propsMethodSpies.updateSendErrors.mock.calls[0][0]).toMatchObject({
-        amount: 'mockAmountError',
-        gasFee: 'mockGasFeeError',
-      });
-    });
-
-    it('should not call updateSendTokenBalance or this.updateGas if network === prevNetwork', () => {
-      propsMethodSpies.updateSendTokenBalance.mockClear();
-      updateGasSpy.resetHistory();
-      wrapper.instance().componentDidUpdate({
-        from: {
-          balance: 'balanceChanged',
-        },
-        chainId: ROPSTEN_CHAIN_ID,
-        sendToken: { address: 'mockTokenAddress', decimals: 18, symbol: 'TST' }, // Make sure not to hit updateGas when changing asset
-      });
-      expect(propsMethodSpies.updateSendTokenBalance).not.toHaveBeenCalled();
-      expect(updateGasSpy.callCount).toStrictEqual(0);
-    });
-
-    it('should not call updateSendTokenBalance or this.updateGas if network === loading', () => {
-      propsMethodSpies.updateSendTokenBalance.mockClear();
-      updateGasSpy.resetHistory();
-      wrapper.setProps({ network: 'loading' });
-      wrapper.instance().componentDidUpdate({
-        from: {
-          balance: 'balanceChanged',
-        },
-        chainId: ROPSTEN_CHAIN_ID,
-        sendToken: { address: 'mockTokenAddress', decimals: 18, symbol: 'TST' }, // Make sure not to hit updateGas when changing asset
-      });
-      expect(propsMethodSpies.updateSendTokenBalance).not.toHaveBeenCalled();
-      expect(updateGasSpy.callCount).toStrictEqual(0);
-    });
-
-    it('should call updateSendTokenBalance and this.updateGas with the correct params', () => {
-      updateGasSpy.resetHistory();
-      wrapper.instance().componentDidUpdate({
-        from: {
-          balance: 'balanceChanged',
-        },
-        chainId: RINKEBY_CHAIN_ID,
-        sendToken: { address: 'mockTokenAddress', decimals: 18, symbol: 'TST' }, // Make sure not to hit updateGas when changing asset
-      });
-      expect(propsMethodSpies.updateSendTokenBalance).toHaveBeenCalled();
-      expect(
-        propsMethodSpies.updateSendTokenBalance.mock.calls[0][0],
-      ).toMatchObject({
-        sendToken: {
-          address: 'mockTokenAddress',
-          decimals: 18,
-          symbol: 'TST',
-        }, // Make sure not to hit updateGas when changing asset
-        tokenContract: { method: 'mockTokenMethod' },
-        address: 'mockAddress',
-      });
-      expect(updateGasSpy.callCount).toStrictEqual(1);
-    });
-
-    it('should call updateGas when sendToken.address is changed', () => {
-      wrapper.instance().componentDidUpdate({
-        from: {
-          balance: 'balancedChanged',
-        },
-        chainId: ROPSTEN_CHAIN_ID, // Make sure not to hit updateGas when changing network
-        sendToken: { address: 'newSelectedToken' },
-      });
-      expect(
-        propsMethodSpies.updateToNicknameIfNecessary,
-      ).not.toHaveBeenCalled(); // Network did not change
-      expect(propsMethodSpies.updateAndSetGasLimit).toHaveBeenCalled();
-    });
-  });
-
-  describe('updateGas', () => {
-    it('should call updateAndSetGasLimit with the correct params if no to prop is passed', () => {
-      propsMethodSpies.updateAndSetGasLimit.mockClear();
-      wrapper.instance().updateGas();
-      expect(propsMethodSpies.updateAndSetGasLimit).toHaveBeenCalled();
-      expect(
-        propsMethodSpies.updateAndSetGasLimit.mock.calls[0][0],
-      ).toMatchObject({
-        blockGasLimit: 'mockBlockGasLimit',
-        editingTransactionId: 'mockEditingTransactionId',
-        gasLimit: 'mockGasLimit',
-        gasPrice: 'mockGasPrice',
-        selectedAddress: 'mockSelectedAddress',
-        sendToken: {
-          address: 'mockTokenAddress',
-          decimals: 18,
-          symbol: 'TST',
-        },
-        to: 'mockAddress',
-        value: 'mockAmount',
-        data: undefined,
-      });
-    });
-  });
-
-  describe('render', () => {
-    it('should render a page-container class', () => {
-      expect(wrapper.find('.page-container')).toHaveLength(1);
-    });
-
-    it('should render SendHeader and AddRecipient', () => {
-      expect(wrapper.find(SendHeader)).toHaveLength(1);
-      expect(wrapper.find(AddRecipient)).toHaveLength(1);
-    });
-
-    it('should pass the history prop to SendHeader and SendFooter', () => {
-      wrapper.setProps({
-        to: '0x80F061544cC398520615B5d3e7A3BedD70cd4510',
-      });
-      expect(wrapper.find(SendHeader)).toHaveLength(1);
-      expect(wrapper.find(SendContent)).toHaveLength(1);
-      expect(wrapper.find(SendFooter)).toHaveLength(1);
-      expect(wrapper.find(SendFooter).props()).toStrictEqual({
-        history: { mockProp: 'history-abc' },
-      });
-    });
-
-    it('should pass showHexData to SendContent', () => {
-      wrapper.setProps({
-        to: '0x80F061544cC398520615B5d3e7A3BedD70cd4510',
-      });
-      expect(wrapper.find(SendContent).props().showHexData).toStrictEqual(true);
-    });
-  });
-
-  describe('validate when input change', () => {
-    let clock;
-
-    beforeEach(() => {
-      clock = sinon.useFakeTimers();
-    });
-
-    afterEach(() => {
-      clock.restore();
-    });
-
-    it('should validate when input changes', () => {
-      const instance = wrapper.instance();
-      instance.onRecipientInputChange(
-        '0x80F061544cC398520615B5d3e7A3BedD70cd4510',
-      );
-
-      expect(instance.state).toStrictEqual({
-        internalSearch: false,
-        query: '0x80F061544cC398520615B5d3e7A3BedD70cd4510',
-        toError: null,
-        toWarning: null,
-      });
-    });
-
-    it('should validate when input changes and has error', () => {
-      const instance = wrapper.instance();
-      instance.onRecipientInputChange(
-        '0x80F061544cC398520615B5d3e7a3BedD70cd4510',
-      );
-
-      clock.tick(1001);
-      expect(instance.state).toStrictEqual({
-        internalSearch: false,
-        query: '0x80F061544cC398520615B5d3e7a3BedD70cd4510',
-        toError: 'invalidAddressRecipient',
-        toWarning: null,
-      });
-    });
-
-    it('should validate when input changes and has error on a bad network', () => {
-      wrapper.setProps({ network: 'bad' });
-      const instance = wrapper.instance();
-      instance.onRecipientInputChange(
-        '0x80F061544cC398520615B5d3e7a3BedD70cd4510',
-      );
-
-      clock.tick(1001);
-      expect(instance.state).toStrictEqual({
-        internalSearch: false,
-        query: '0x80F061544cC398520615B5d3e7a3BedD70cd4510',
-        toError: 'invalidAddressRecipient',
-        toWarning: null,
-      });
-    });
-
-    it('should synchronously validate when input changes to ""', () => {
-      wrapper.setProps({ network: 'bad' });
-      const instance = wrapper.instance();
-      instance.onRecipientInputChange(
-        '0x80F061544cC398520615B5d3e7a3BedD70cd4510',
-      );
-
-      clock.tick(1001);
-      expect(instance.state).toStrictEqual({
-        internalSearch: false,
-        query: '0x80F061544cC398520615B5d3e7a3BedD70cd4510',
-        toError: 'invalidAddressRecipient',
-        toWarning: null,
-      });
-
-      instance.onRecipientInputChange('');
-      expect(instance.state).toStrictEqual({
-        internalSearch: false,
-        query: '',
-        toError: '',
-        toWarning: '',
-      });
-    });
-
-    it('should warn when send to a known token contract address', () => {
-      wrapper.setProps({ address: '0x888', decimals: 18, symbol: '888' });
-      const instance = wrapper.instance();
-      instance.onRecipientInputChange(
-        '0x13cb85823f78Cff38f0B0E90D3e975b8CB3AAd64',
-      );
-
-      clock.tick(1001);
-      expect(instance.state).toStrictEqual({
-        internalSearch: false,
-        query: '0x13cb85823f78Cff38f0B0E90D3e975b8CB3AAd64',
-        toError: null,
-        toWarning: 'knownAddressRecipient',
-      });
-    });
-  });
-});
diff --git a/ui/pages/send/send.constants.js b/ui/pages/send/send.constants.js
index ba5113603..48e96ef95 100644
--- a/ui/pages/send/send.constants.js
+++ b/ui/pages/send/send.constants.js
@@ -34,17 +34,29 @@ const INVALID_RECIPIENT_ADDRESS_ERROR = 'invalidAddressRecipient';
 const INVALID_RECIPIENT_ADDRESS_NOT_ETH_NETWORK_ERROR =
   'invalidAddressRecipientNotEthNetwork';
 const REQUIRED_ERROR = 'required';
-const KNOWN_RECIPIENT_ADDRESS_ERROR = 'knownAddressRecipient';
+const KNOWN_RECIPIENT_ADDRESS_WARNING = 'knownAddressRecipient';
 const CONTRACT_ADDRESS_ERROR = 'contractAddressError';
 const CONFUSING_ENS_ERROR = 'confusingEnsDomain';
+const ENS_NO_ADDRESS_FOR_NAME = 'noAddressForName';
+const ENS_NOT_FOUND_ON_NETWORK = 'ensNotFoundOnCurrentNetwork';
+const ENS_NOT_SUPPORTED_ON_NETWORK = 'ensNotSupportedOnNetwork';
+const ENS_ILLEGAL_CHARACTER = 'ensIllegalCharacter';
+const ENS_UNKNOWN_ERROR = 'ensUnknownError';
+const ENS_REGISTRATION_ERROR = 'ensRegistrationError';
 
 export {
   INSUFFICIENT_FUNDS_ERROR,
   INSUFFICIENT_TOKENS_ERROR,
   INVALID_RECIPIENT_ADDRESS_ERROR,
-  KNOWN_RECIPIENT_ADDRESS_ERROR,
+  KNOWN_RECIPIENT_ADDRESS_WARNING,
   CONTRACT_ADDRESS_ERROR,
   INVALID_RECIPIENT_ADDRESS_NOT_ETH_NETWORK_ERROR,
+  ENS_NO_ADDRESS_FOR_NAME,
+  ENS_NOT_FOUND_ON_NETWORK,
+  ENS_NOT_SUPPORTED_ON_NETWORK,
+  ENS_ILLEGAL_CHARACTER,
+  ENS_UNKNOWN_ERROR,
+  ENS_REGISTRATION_ERROR,
   MIN_GAS_LIMIT_DEC,
   MIN_GAS_LIMIT_HEX,
   MIN_GAS_PRICE_DEC,
diff --git a/ui/pages/send/send.container.js b/ui/pages/send/send.container.js
deleted file mode 100644
index f942131dd..000000000
--- a/ui/pages/send/send.container.js
+++ /dev/null
@@ -1,138 +0,0 @@
-import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
-import { compose } from 'redux';
-
-import {
-  getGasLimit,
-  getGasPrice,
-  getGasTotal,
-  getPrimaryCurrency,
-  getSendToken,
-  getSendTokenContract,
-  getSendAmount,
-  getSendEditingTransactionId,
-  getSendFromObject,
-  getSendTo,
-  getSendToNickname,
-  getTokenBalance,
-  getQrCodeData,
-  getSelectedAddress,
-  getAddressBook,
-  getSendTokenAddress,
-  isCustomPriceExcessive,
-  getCurrentChainId,
-} from '../../selectors';
-
-import { showQrScanner, qrCodeDetected } from '../../store/actions';
-import {
-  resetSendState,
-  updateSendErrors,
-  updateSendTo,
-  updateSendTokenBalance,
-  updateGasData,
-  setGasTotal,
-  updateSendEnsResolution,
-  updateSendEnsResolutionError,
-} from '../../ducks/send/send.duck';
-import { fetchBasicGasEstimates } from '../../ducks/gas/gas.duck';
-import {
-  getBlockGasLimit,
-  getConversionRate,
-  getSendHexDataFeatureFlagState,
-  getTokens,
-} from '../../ducks/metamask/metamask';
-import { isValidDomainName } from '../../helpers/utils/util';
-import { calcGasTotal } from './send.utils';
-import SendEther from './send.component';
-
-function mapStateToProps(state) {
-  const editingTransactionId = getSendEditingTransactionId(state);
-
-  return {
-    addressBook: getAddressBook(state),
-    amount: getSendAmount(state),
-    blockGasLimit: getBlockGasLimit(state),
-    conversionRate: getConversionRate(state),
-    editingTransactionId,
-    from: getSendFromObject(state),
-    gasLimit: getGasLimit(state),
-    gasPrice: getGasPrice(state),
-    gasTotal: getGasTotal(state),
-    chainId: getCurrentChainId(state),
-    primaryCurrency: getPrimaryCurrency(state),
-    qrCodeData: getQrCodeData(state),
-    selectedAddress: getSelectedAddress(state),
-    sendToken: getSendToken(state),
-    showHexData: getSendHexDataFeatureFlagState(state),
-    to: getSendTo(state),
-    toNickname: getSendToNickname(state),
-    tokens: getTokens(state),
-    tokenBalance: getTokenBalance(state),
-    tokenContract: getSendTokenContract(state),
-    sendTokenAddress: getSendTokenAddress(state),
-    gasIsExcessive: isCustomPriceExcessive(state, true),
-  };
-}
-
-function mapDispatchToProps(dispatch) {
-  return {
-    updateAndSetGasLimit: ({
-      blockGasLimit,
-      editingTransactionId,
-      gasLimit,
-      gasPrice,
-      selectedAddress,
-      sendToken,
-      to,
-      value,
-      data,
-    }) => {
-      editingTransactionId
-        ? dispatch(setGasTotal(calcGasTotal(gasLimit, gasPrice)))
-        : dispatch(
-            updateGasData({
-              gasPrice,
-              selectedAddress,
-              sendToken,
-              blockGasLimit,
-              to,
-              value,
-              data,
-            }),
-          );
-    },
-    updateSendTokenBalance: ({ sendToken, tokenContract, address }) => {
-      dispatch(
-        updateSendTokenBalance({
-          sendToken,
-          tokenContract,
-          address,
-        }),
-      );
-    },
-    updateSendErrors: (newError) => dispatch(updateSendErrors(newError)),
-    resetSendState: () => dispatch(resetSendState()),
-    scanQrCode: () => dispatch(showQrScanner()),
-    qrCodeDetected: (data) => dispatch(qrCodeDetected(data)),
-    updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)),
-    fetchBasicGasEstimates: () => dispatch(fetchBasicGasEstimates()),
-    updateSendEnsResolution: (ensResolution) =>
-      dispatch(updateSendEnsResolution(ensResolution)),
-    updateSendEnsResolutionError: (message) =>
-      dispatch(updateSendEnsResolutionError(message)),
-    updateToNicknameIfNecessary: (to, toNickname, addressBook) => {
-      if (isValidDomainName(toNickname)) {
-        const addressBookEntry =
-          addressBook.find(({ address }) => to === address) || {};
-        if (!addressBookEntry.name !== toNickname) {
-          dispatch(updateSendTo(to, addressBookEntry.name || ''));
-        }
-      }
-    },
-  };
-}
-
-export default compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps),
-)(SendEther);
diff --git a/ui/pages/send/send.container.test.js b/ui/pages/send/send.container.test.js
deleted file mode 100644
index 3072b3243..000000000
--- a/ui/pages/send/send.container.test.js
+++ /dev/null
@@ -1,128 +0,0 @@
-import sinon from 'sinon';
-
-import {
-  updateSendTokenBalance,
-  updateGasData,
-  setGasTotal,
-  updateSendErrors,
-  resetSendState,
-} from '../../ducks/send/send.duck';
-
-let mapDispatchToProps;
-
-jest.mock('react-redux', () => ({
-  connect: (_, md) => {
-    mapDispatchToProps = md;
-    return () => ({});
-  },
-}));
-
-jest.mock('react-router-dom', () => ({
-  withRouter: () => undefined,
-}));
-
-jest.mock('redux', () => ({
-  compose: (_, arg2) => () => arg2(),
-}));
-
-jest.mock('../../ducks/send/send.duck', () => ({
-  updateSendErrors: jest.fn(),
-  resetSendState: jest.fn(),
-  updateSendTokenBalance: jest.fn(),
-  updateGasData: jest.fn(),
-  setGasTotal: jest.fn(),
-}));
-
-jest.mock('./send.utils.js', () => ({
-  calcGasTotal: (gasLimit, gasPrice) => gasLimit + gasPrice,
-}));
-
-require('./send.container.js');
-
-describe('send container', () => {
-  describe('mapDispatchToProps()', () => {
-    let dispatchSpy;
-    let mapDispatchToPropsObject;
-
-    beforeEach(() => {
-      dispatchSpy = sinon.spy();
-      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy);
-    });
-
-    describe('updateAndSetGasLimit()', () => {
-      const mockProps = {
-        blockGasLimit: 'mockBlockGasLimit',
-        editingTransactionId: '0x2',
-        gasLimit: '0x3',
-        gasPrice: '0x4',
-        selectedAddress: '0x4',
-        sendToken: { address: '0x1' },
-        to: 'mockTo',
-        value: 'mockValue',
-        data: undefined,
-      };
-
-      it('should dispatch a setGasTotal action when editingTransactionId is truthy', () => {
-        mapDispatchToPropsObject.updateAndSetGasLimit(mockProps);
-        expect(dispatchSpy.calledOnce).toStrictEqual(true);
-        expect(setGasTotal).toHaveBeenCalledWith('0x30x4');
-      });
-
-      it('should dispatch an updateGasData action when editingTransactionId is falsy', () => {
-        const {
-          gasPrice,
-          selectedAddress,
-          sendToken,
-          blockGasLimit,
-          to,
-          value,
-          data,
-        } = mockProps;
-        mapDispatchToPropsObject.updateAndSetGasLimit({
-          ...mockProps,
-          editingTransactionId: false,
-        });
-        expect(dispatchSpy.calledOnce).toStrictEqual(true);
-        expect(updateGasData).toHaveBeenCalledWith({
-          gasPrice,
-          selectedAddress,
-          sendToken,
-          blockGasLimit,
-          to,
-          value,
-          data,
-        });
-      });
-    });
-
-    describe('updateSendTokenBalance()', () => {
-      const mockProps = {
-        address: '0x10',
-        tokenContract: '0x00a',
-        sendToken: { address: '0x1' },
-      };
-
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.updateSendTokenBalance({ ...mockProps });
-        expect(dispatchSpy.calledOnce).toStrictEqual(true);
-        expect(updateSendTokenBalance).toHaveBeenCalledWith(mockProps);
-      });
-    });
-
-    describe('updateSendErrors()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.updateSendErrors('mockError');
-        expect(dispatchSpy.calledOnce).toStrictEqual(true);
-        expect(updateSendErrors).toHaveBeenCalledWith('mockError');
-      });
-    });
-
-    describe('resetSendState()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.resetSendState();
-        expect(dispatchSpy.calledOnce).toStrictEqual(true);
-        expect(resetSendState).toHaveBeenCalled();
-      });
-    });
-  });
-});
diff --git a/ui/pages/send/send.js b/ui/pages/send/send.js
new file mode 100644
index 000000000..1e908d9de
--- /dev/null
+++ b/ui/pages/send/send.js
@@ -0,0 +1,112 @@
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory, useLocation } from 'react-router-dom';
+import {
+  getIsUsingMyAccountForRecipientSearch,
+  getRecipient,
+  getRecipientUserInput,
+  getSendStage,
+  initializeSendState,
+  resetRecipientInput,
+  resetSendState,
+  SEND_STAGES,
+  updateRecipient,
+  updateRecipientUserInput,
+} from '../../ducks/send';
+import { getCurrentChainId, isCustomPriceExcessive } from '../../selectors';
+import { getSendHexDataFeatureFlagState } from '../../ducks/metamask/metamask';
+import { showQrScanner } from '../../store/actions';
+import { useMetricEvent } from '../../hooks/useMetricEvent';
+import SendHeader from './send-header';
+import AddRecipient from './send-content/add-recipient';
+import SendContent from './send-content';
+import SendFooter from './send-footer';
+import EnsInput from './send-content/add-recipient/ens-input';
+
+const sendSliceIsCustomPriceExcessive = (state) =>
+  isCustomPriceExcessive(state, true);
+
+export default function SendTransactionScreen() {
+  const history = useHistory();
+  const chainId = useSelector(getCurrentChainId);
+  const stage = useSelector(getSendStage);
+  const gasIsExcessive = useSelector(sendSliceIsCustomPriceExcessive);
+  const isUsingMyAccountsForRecipientSearch = useSelector(
+    getIsUsingMyAccountForRecipientSearch,
+  );
+  const recipient = useSelector(getRecipient);
+  const showHexData = useSelector(getSendHexDataFeatureFlagState);
+  const userInput = useSelector(getRecipientUserInput);
+  const location = useLocation();
+  const trackUsedQRScanner = useMetricEvent({
+    eventOpts: {
+      category: 'Transactions',
+      action: 'Edit Screen',
+      name: 'Used QR scanner',
+    },
+  });
+
+  const dispatch = useDispatch();
+  useEffect(() => {
+    if (chainId !== undefined) {
+      dispatch(initializeSendState());
+    }
+  }, [chainId, dispatch]);
+
+  useEffect(() => {
+    if (location.search === '?scan=true') {
+      dispatch(showQrScanner());
+
+      // Clear the queryString param after showing the modal
+      const cleanUrl = window.location.href.split('?')[0];
+      window.history.pushState({}, null, `${cleanUrl}`);
+      window.location.hash = '#send';
+    }
+  }, [location, dispatch]);
+
+  useEffect(() => {
+    return () => {
+      dispatch(resetSendState());
+    };
+  }, [dispatch]);
+
+  let content;
+
+  if ([SEND_STAGES.EDIT, SEND_STAGES.DRAFT].includes(stage)) {
+    content = (
+      <>
+        <SendContent
+          showHexData={showHexData}
+          gasIsExcessive={gasIsExcessive}
+        />
+        <SendFooter key="send-footer" history={history} />
+      </>
+    );
+  } else {
+    content = <AddRecipient />;
+  }
+
+  return (
+    <div className="page-container">
+      <SendHeader history={history} />
+      <EnsInput
+        userInput={userInput}
+        className="send__to-row"
+        onChange={(address) => dispatch(updateRecipientUserInput(address))}
+        onValidAddressTyped={(address) =>
+          dispatch(updateRecipient({ address, nickname: '' }))
+        }
+        internalSearch={isUsingMyAccountsForRecipientSearch}
+        selectedAddress={recipient.address}
+        selectedName={recipient.nickname}
+        onPaste={(text) => updateRecipient({ address: text, nickname: '' })}
+        onReset={() => dispatch(resetRecipientInput())}
+        scanQrCode={() => {
+          trackUsedQRScanner();
+          dispatch(showQrScanner());
+        }}
+      />
+      {content}
+    </div>
+  );
+}
diff --git a/ui/pages/send/send.test.js b/ui/pages/send/send.test.js
new file mode 100644
index 000000000..07bef5b26
--- /dev/null
+++ b/ui/pages/send/send.test.js
@@ -0,0 +1,173 @@
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+
+import { useLocation } from 'react-router-dom';
+import { describe } from 'globalthis/implementation';
+import { initialState, SEND_STAGES } from '../../ducks/send';
+import { ensInitialState } from '../../ducks/ens';
+import { renderWithProvider } from '../../../test/jest';
+import { RINKEBY_CHAIN_ID } from '../../../shared/constants/network';
+import Send from './send';
+
+const middleware = [thunk];
+
+jest.mock('react-router-dom', () => {
+  const original = jest.requireActual('react-router-dom');
+  return {
+    ...original,
+    useLocation: jest.fn(() => ({ search: '' })),
+    useHistory: () => ({
+      push: jest.fn(),
+    }),
+  };
+});
+
+jest.mock(
+  'ethjs-ens',
+  () =>
+    class MocKENS {
+      async ensLookup() {
+        return '';
+      }
+    },
+);
+
+const baseStore = {
+  send: initialState,
+  ENS: ensInitialState,
+  gas: {
+    basicEstimateStatus: 'READY',
+    basicEstimates: { slow: '0x0', average: '0x1', fast: '0x2' },
+    customData: { limit: null, price: null },
+  },
+  history: { mostRecentOverviewPage: 'activity' },
+  metamask: {
+    tokens: [],
+    preferences: {
+      useNativeCurrencyAsPrimaryCurrency: false,
+    },
+    currentCurrency: 'USD',
+    provider: {
+      chainId: RINKEBY_CHAIN_ID,
+    },
+    nativeCurrency: 'ETH',
+    featureFlags: {
+      sendHexData: false,
+    },
+    addressBook: {
+      [RINKEBY_CHAIN_ID]: [],
+    },
+    cachedBalances: {
+      [RINKEBY_CHAIN_ID]: {},
+    },
+    accounts: {
+      '0x0': { balance: '0x0', address: '0x0' },
+    },
+    identities: { '0x0': {} },
+  },
+};
+
+describe('Send Page', () => {
+  describe('Send Flow Initialization', () => {
+    it('should initialize the send, ENS, and gas slices on render', () => {
+      const store = configureMockStore(middleware)(baseStore);
+      renderWithProvider(<Send />, store);
+      const actions = store.getActions();
+      expect(actions).toStrictEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            type: 'ENS/enableEnsLookup',
+          }),
+          expect.objectContaining({
+            type: 'send/initializeSendState/pending',
+          }),
+          expect.objectContaining({
+            type: 'metamask/gas/BASIC_GAS_ESTIMATE_STATUS',
+          }),
+          expect.objectContaining({
+            type: 'metamask/gas/SET_ESTIMATE_SOURCE',
+          }),
+        ]),
+      );
+    });
+
+    it('should showQrScanner when location.search is ?scan=true', () => {
+      useLocation.mockImplementation(() => ({ search: '?scan=true' }));
+      const store = configureMockStore(middleware)(baseStore);
+      renderWithProvider(<Send />, store);
+      const actions = store.getActions();
+      expect(actions).toStrictEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            type: 'ENS/enableEnsLookup',
+          }),
+          expect.objectContaining({
+            type: 'send/initializeSendState/pending',
+          }),
+          expect.objectContaining({
+            type: 'metamask/gas/BASIC_GAS_ESTIMATE_STATUS',
+          }),
+          expect.objectContaining({
+            type: 'metamask/gas/SET_ESTIMATE_SOURCE',
+          }),
+          expect.objectContaining({
+            type: 'UI_MODAL_OPEN',
+            payload: { name: 'QR_SCANNER' },
+          }),
+        ]),
+      );
+      useLocation.mockImplementation(() => ({ search: '' }));
+    });
+  });
+
+  describe('Add Recipient Flow', () => {
+    it('should render the header with Add Recipient displayed', () => {
+      const store = configureMockStore(middleware)(baseStore);
+      const { getByText } = renderWithProvider(<Send />, store);
+      expect(getByText('Add Recipient')).toBeTruthy();
+    });
+
+    it('should render the EnsInput field', () => {
+      const store = configureMockStore(middleware)(baseStore);
+      const { getByPlaceholderText } = renderWithProvider(<Send />, store);
+      expect(
+        getByPlaceholderText('Search, public address (0x), or ENS'),
+      ).toBeTruthy();
+    });
+
+    it('should not render the footer', () => {
+      const store = configureMockStore(middleware)(baseStore);
+      const { queryByText } = renderWithProvider(<Send />, store);
+      expect(queryByText('Next')).toBeNull();
+    });
+  });
+
+  describe('Send and Edit Flow', () => {
+    it('should render the header with Send displayed', () => {
+      const store = configureMockStore(middleware)({
+        ...baseStore,
+        send: { ...baseStore.send, stage: SEND_STAGES.DRAFT },
+      });
+      const { getByText } = renderWithProvider(<Send />, store);
+      expect(getByText('Send')).toBeTruthy();
+    });
+
+    it('should render the EnsInput field', () => {
+      const store = configureMockStore(middleware)(baseStore);
+      const { getByPlaceholderText } = renderWithProvider(<Send />, store);
+      expect(
+        getByPlaceholderText('Search, public address (0x), or ENS'),
+      ).toBeTruthy();
+    });
+
+    it('should render the footer', () => {
+      const store = configureMockStore(middleware)({
+        ...baseStore,
+        send: { ...baseStore.send, stage: SEND_STAGES.DRAFT },
+      });
+      const { getByText } = renderWithProvider(<Send />, store);
+      expect(getByText('Next')).toBeTruthy();
+    });
+  });
+});
diff --git a/ui/pages/send/send.utils.js b/ui/pages/send/send.utils.js
index 1d7fb3562..d4d4e7670 100644
--- a/ui/pages/send/send.utils.js
+++ b/ui/pages/send/send.utils.js
@@ -11,28 +11,14 @@ import {
 import { calcTokenAmount } from '../../helpers/utils/token-util';
 import { addHexPrefix } from '../../../app/scripts/lib/util';
 
-import { GAS_LIMITS } from '../../../shared/constants/gas';
-import {
-  INSUFFICIENT_FUNDS_ERROR,
-  INSUFFICIENT_TOKENS_ERROR,
-  MIN_GAS_LIMIT_HEX,
-  NEGATIVE_ETH_ERROR,
-  TOKEN_TRANSFER_FUNCTION_SIGNATURE,
-} from './send.constants';
+import { TOKEN_TRANSFER_FUNCTION_SIGNATURE } from './send.constants';
 
 export {
   addGasBuffer,
   calcGasTotal,
-  calcTokenBalance,
-  doesAmountErrorRequireUpdate,
-  estimateGasForSend,
   generateTokenTransferData,
-  getAmountErrorObject,
-  getGasFeeErrorObject,
-  getToAddressForGasUpdate,
   isBalanceSufficient,
   isTokenBalanceSufficient,
-  removeLeadingZeroes,
   ellipsify,
 };
 
@@ -93,186 +79,6 @@ function isTokenBalanceSufficient({ amount = '0x0', tokenBalance, decimals }) {
   return tokenBalanceIsSufficient;
 }
 
-function getAmountErrorObject({
-  amount,
-  balance,
-  conversionRate,
-  gasTotal,
-  primaryCurrency,
-  sendToken,
-  tokenBalance,
-}) {
-  let insufficientFunds = false;
-  if (gasTotal && conversionRate && !sendToken) {
-    insufficientFunds = !isBalanceSufficient({
-      amount,
-      balance,
-      conversionRate,
-      gasTotal,
-      primaryCurrency,
-    });
-  }
-
-  let inSufficientTokens = false;
-  if (sendToken && tokenBalance !== null) {
-    const { decimals } = sendToken;
-    inSufficientTokens = !isTokenBalanceSufficient({
-      tokenBalance,
-      amount,
-      decimals,
-    });
-  }
-
-  const amountLessThanZero = conversionGreaterThan(
-    { value: 0, fromNumericBase: 'dec' },
-    { value: amount, fromNumericBase: 'hex' },
-  );
-
-  let amountError = null;
-
-  if (insufficientFunds) {
-    amountError = INSUFFICIENT_FUNDS_ERROR;
-  } else if (inSufficientTokens) {
-    amountError = INSUFFICIENT_TOKENS_ERROR;
-  } else if (amountLessThanZero) {
-    amountError = NEGATIVE_ETH_ERROR;
-  }
-
-  return { amount: amountError };
-}
-
-function getGasFeeErrorObject({
-  balance,
-  conversionRate,
-  gasTotal,
-  primaryCurrency,
-}) {
-  let gasFeeError = null;
-
-  if (gasTotal && conversionRate) {
-    const insufficientFunds = !isBalanceSufficient({
-      amount: '0x0',
-      balance,
-      conversionRate,
-      gasTotal,
-      primaryCurrency,
-    });
-
-    if (insufficientFunds) {
-      gasFeeError = INSUFFICIENT_FUNDS_ERROR;
-    }
-  }
-
-  return { gasFee: gasFeeError };
-}
-
-function calcTokenBalance({ sendToken, usersToken }) {
-  const { decimals } = sendToken || {};
-  return calcTokenAmount(usersToken.balance.toString(), decimals).toString(16);
-}
-
-function doesAmountErrorRequireUpdate({
-  balance,
-  gasTotal,
-  prevBalance,
-  prevGasTotal,
-  prevTokenBalance,
-  sendToken,
-  tokenBalance,
-}) {
-  const balanceHasChanged = balance !== prevBalance;
-  const gasTotalHasChange = gasTotal !== prevGasTotal;
-  const tokenBalanceHasChanged = sendToken && tokenBalance !== prevTokenBalance;
-  const amountErrorRequiresUpdate =
-    balanceHasChanged || gasTotalHasChange || tokenBalanceHasChanged;
-
-  return amountErrorRequiresUpdate;
-}
-
-async function estimateGasForSend({
-  selectedAddress,
-  sendToken,
-  blockGasLimit = MIN_GAS_LIMIT_HEX,
-  to,
-  value,
-  data,
-  gasPrice,
-  estimateGasMethod,
-}) {
-  const paramsForGasEstimate = { from: selectedAddress, value, gasPrice };
-
-  // if recipient has no code, gas is 21k max:
-  if (!sendToken && !data) {
-    const code = Boolean(to) && (await global.eth.getCode(to));
-    // Geth will return '0x', and ganache-core v2.2.1 will return '0x0'
-    const codeIsEmpty = !code || code === '0x' || code === '0x0';
-    if (codeIsEmpty) {
-      return GAS_LIMITS.SIMPLE;
-    }
-  } else if (sendToken && !to) {
-    return GAS_LIMITS.BASE_TOKEN_ESTIMATE;
-  }
-
-  if (sendToken) {
-    paramsForGasEstimate.value = '0x0';
-    paramsForGasEstimate.data = generateTokenTransferData({
-      toAddress: to,
-      amount: value,
-      sendToken,
-    });
-    paramsForGasEstimate.to = sendToken.address;
-  } else {
-    if (data) {
-      paramsForGasEstimate.data = data;
-    }
-
-    if (to) {
-      paramsForGasEstimate.to = to;
-    }
-
-    if (!value || value === '0') {
-      paramsForGasEstimate.value = '0xff';
-    }
-  }
-
-  // if not, fall back to block gasLimit
-  if (!blockGasLimit) {
-    // eslint-disable-next-line no-param-reassign
-    blockGasLimit = MIN_GAS_LIMIT_HEX;
-  }
-
-  paramsForGasEstimate.gas = addHexPrefix(
-    multiplyCurrencies(blockGasLimit, 0.95, {
-      multiplicandBase: 16,
-      multiplierBase: 10,
-      roundDown: '0',
-      toNumericBase: 'hex',
-    }),
-  );
-
-  // run tx
-  try {
-    const estimatedGas = await estimateGasMethod(paramsForGasEstimate);
-    const estimateWithBuffer = addGasBuffer(estimatedGas, blockGasLimit, 1.5);
-    return addHexPrefix(estimateWithBuffer);
-  } catch (error) {
-    const simulationFailed =
-      error.message.includes('Transaction execution error.') ||
-      error.message.includes(
-        'gas required exceeds allowance or always failing transaction',
-      );
-    if (simulationFailed) {
-      const estimateWithBuffer = addGasBuffer(
-        paramsForGasEstimate.gas,
-        blockGasLimit,
-        1.5,
-      );
-      return addHexPrefix(estimateWithBuffer);
-    }
-    throw error;
-  }
-}
-
 function addGasBuffer(
   initialGasLimitHex,
   blockGasLimitHex,
@@ -339,16 +145,6 @@ function generateTokenTransferData({
   );
 }
 
-function getToAddressForGasUpdate(...addresses) {
-  return [...addresses, '']
-    .find((str) => str !== undefined && str !== null)
-    .toLowerCase();
-}
-
-function removeLeadingZeroes(str) {
-  return str.replace(/^0*(?=\d)/u, '');
-}
-
 function ellipsify(text, first = 6, last = 4) {
   return `${text.slice(0, first)}...${text.slice(-last)}`;
 }
diff --git a/ui/pages/send/send.utils.test.js b/ui/pages/send/send.utils.test.js
index 02b45f1fa..7960b4aca 100644
--- a/ui/pages/send/send.utils.test.js
+++ b/ui/pages/send/send.utils.test.js
@@ -1,4 +1,3 @@
-import sinon from 'sinon';
 import { rawEncode } from 'ethereumjs-abi';
 
 import {
@@ -8,26 +7,13 @@ import {
   conversionUtil,
 } from '../../helpers/utils/conversion-util';
 
-import { GAS_LIMITS } from '../../../shared/constants/gas';
 import {
   calcGasTotal,
-  estimateGasForSend,
-  doesAmountErrorRequireUpdate,
   generateTokenTransferData,
-  getAmountErrorObject,
-  getGasFeeErrorObject,
-  getToAddressForGasUpdate,
-  calcTokenBalance,
   isBalanceSufficient,
   isTokenBalanceSufficient,
-  removeLeadingZeroes,
 } from './send.utils';
 
-import {
-  INSUFFICIENT_FUNDS_ERROR,
-  INSUFFICIENT_TOKENS_ERROR,
-} from './send.constants';
-
 jest.mock('../../helpers/utils/conversion-util', () => ({
   addCurrencies: jest.fn((a, b) => {
     let [a1, b1] = [a, b];
@@ -67,44 +53,6 @@ describe('send utils', () => {
     });
   });
 
-  describe('doesAmountErrorRequireUpdate()', () => {
-    const config = {
-      'should return true if balances are different': {
-        balance: 0,
-        prevBalance: 1,
-        expectedResult: true,
-      },
-      'should return true if gasTotals are different': {
-        gasTotal: 0,
-        prevGasTotal: 1,
-        expectedResult: true,
-      },
-      'should return true if token balances are different': {
-        tokenBalance: 0,
-        prevTokenBalance: 1,
-        sendToken: { address: '0x0' },
-        expectedResult: true,
-      },
-      'should return false if they are all the same': {
-        balance: 1,
-        prevBalance: 1,
-        gasTotal: 1,
-        prevGasTotal: 1,
-        tokenBalance: 1,
-        prevTokenBalance: 1,
-        sendToken: { address: '0x0' },
-        expectedResult: false,
-      },
-    };
-    Object.entries(config).forEach(([description, obj]) => {
-      it(`${description}`, () => {
-        expect(doesAmountErrorRequireUpdate(obj)).toStrictEqual(
-          obj.expectedResult,
-        );
-      });
-    });
-  });
-
   describe('generateTokenTransferData()', () => {
     it('should return undefined if not passed a send token', () => {
       expect(
@@ -141,86 +89,6 @@ describe('send utils', () => {
     });
   });
 
-  describe('getAmountErrorObject()', () => {
-    const config = {
-      'should return insufficientFunds error if isBalanceSufficient returns false': {
-        amount: 15,
-        balance: 1,
-        conversionRate: 3,
-        gasTotal: 17,
-        primaryCurrency: 'ABC',
-        expectedResult: { amount: INSUFFICIENT_FUNDS_ERROR },
-      },
-      'should not return insufficientFunds error if sendToken is truthy': {
-        amount: '0x0',
-        balance: 1,
-        conversionRate: 3,
-        gasTotal: 17,
-        primaryCurrency: 'ABC',
-        sendToken: { address: '0x0', symbol: 'DEF', decimals: 0 },
-        decimals: 0,
-        tokenBalance: 'sometokenbalance',
-        expectedResult: { amount: null },
-      },
-      'should return insufficientTokens error if token is selected and isTokenBalanceSufficient returns false': {
-        amount: '0x10',
-        balance: 100,
-        conversionRate: 3,
-        decimals: 10,
-        gasTotal: 17,
-        primaryCurrency: 'ABC',
-        sendToken: { address: '0x0' },
-        tokenBalance: 123,
-        expectedResult: { amount: INSUFFICIENT_TOKENS_ERROR },
-      },
-    };
-    Object.entries(config).forEach(([description, obj]) => {
-      it(`${description}`, () => {
-        expect(getAmountErrorObject(obj)).toStrictEqual(obj.expectedResult);
-      });
-    });
-  });
-
-  describe('getGasFeeErrorObject()', () => {
-    const config = {
-      'should return insufficientFunds error if isBalanceSufficient returns false': {
-        balance: 16,
-        conversionRate: 3,
-        gasTotal: 17,
-        primaryCurrency: 'ABC',
-        expectedResult: { gasFee: INSUFFICIENT_FUNDS_ERROR },
-      },
-      'should return null error if isBalanceSufficient returns true': {
-        balance: 16,
-        conversionRate: 3,
-        gasTotal: 15,
-        primaryCurrency: 'ABC',
-        expectedResult: { gasFee: null },
-      },
-    };
-    Object.entries(config).forEach(([description, obj]) => {
-      it(`${description}`, () => {
-        expect(getGasFeeErrorObject(obj)).toStrictEqual(obj.expectedResult);
-      });
-    });
-  });
-
-  describe('calcTokenBalance()', () => {
-    it('should return the calculated token balance', () => {
-      expect(
-        calcTokenBalance({
-          sendToken: {
-            address: '0x0',
-            decimals: 11,
-          },
-          usersToken: {
-            balance: 20,
-          },
-        }),
-      ).toStrictEqual('calc:2011');
-    });
-  });
-
   describe('isBalanceSufficient()', () => {
     it('should correctly call addCurrencies and return the result of calling conversionGTE', () => {
       const result = isBalanceSufficient({
@@ -279,201 +147,4 @@ describe('send utils', () => {
       expect(result).toStrictEqual(false);
     });
   });
-
-  describe('estimateGasForSend', () => {
-    const baseMockParams = {
-      blockGasLimit: '0x64',
-      selectedAddress: 'mockAddress',
-      to: '0xisContract',
-      estimateGasMethod: sinon.stub().callsFake(({ to }) => {
-        if (typeof to === 'string' && to.match(/willFailBecauseOf:/u)) {
-          throw new Error(to.match(/:(.+)$/u)[1]);
-        }
-        return '0xabc16';
-      }),
-    };
-    const baseexpectedCall = {
-      from: 'mockAddress',
-      gas: '0x64x0.95',
-      to: '0xisContract',
-      value: '0xff',
-    };
-
-    beforeEach(() => {
-      global.eth = {
-        getCode: sinon
-          .stub()
-          .callsFake((address) =>
-            Promise.resolve(address.match(/isContract/u) ? 'not-0x' : '0x'),
-          ),
-      };
-    });
-
-    afterEach(() => {
-      baseMockParams.estimateGasMethod.resetHistory();
-      global.eth.getCode.resetHistory();
-    });
-
-    it('should call ethQuery.estimateGasForSend with the expected params', async () => {
-      const result = await estimateGasForSend(baseMockParams);
-      expect(baseMockParams.estimateGasMethod.callCount).toStrictEqual(1);
-      expect(baseMockParams.estimateGasMethod.getCall(0).args[0]).toStrictEqual(
-        {
-          gasPrice: undefined,
-          value: undefined,
-          ...baseexpectedCall,
-        },
-      );
-      expect(result).toStrictEqual('0xabc16');
-    });
-
-    it('should call ethQuery.estimateGasForSend with the expected params when initialGasLimitHex is lower than the upperGasLimit', async () => {
-      const result = await estimateGasForSend({
-        ...baseMockParams,
-        blockGasLimit: '0xbcd',
-      });
-      expect(baseMockParams.estimateGasMethod.callCount).toStrictEqual(1);
-      expect(baseMockParams.estimateGasMethod.getCall(0).args[0]).toStrictEqual(
-        {
-          gasPrice: undefined,
-          value: undefined,
-          ...baseexpectedCall,
-          gas: '0xbcdx0.95',
-        },
-      );
-      expect(result).toStrictEqual('0xabc16x1.5');
-    });
-
-    it('should call ethQuery.estimateGasForSend with a value of 0x0 and the expected data and to if passed a sendToken', async () => {
-      const result = await estimateGasForSend({
-        data: 'mockData',
-        sendToken: { address: 'mockAddress' },
-        ...baseMockParams,
-      });
-      expect(baseMockParams.estimateGasMethod.callCount).toStrictEqual(1);
-      expect(baseMockParams.estimateGasMethod.getCall(0).args[0]).toStrictEqual(
-        {
-          ...baseexpectedCall,
-          gasPrice: undefined,
-          value: '0x0',
-          data: '0xa9059cbb',
-          to: 'mockAddress',
-        },
-      );
-      expect(result).toStrictEqual('0xabc16');
-    });
-
-    it('should call ethQuery.estimateGasForSend without a recipient if the recipient is empty and data passed', async () => {
-      const data = 'mockData';
-      const to = '';
-      const result = await estimateGasForSend({ ...baseMockParams, data, to });
-      expect(baseMockParams.estimateGasMethod.callCount).toStrictEqual(1);
-      expect(baseMockParams.estimateGasMethod.getCall(0).args[0]).toStrictEqual(
-        {
-          gasPrice: undefined,
-          value: '0xff',
-          data,
-          from: baseexpectedCall.from,
-          gas: baseexpectedCall.gas,
-        },
-      );
-      expect(result).toStrictEqual('0xabc16');
-    });
-
-    it(`should return ${GAS_LIMITS.SIMPLE} if ethQuery.getCode does not return '0x'`, async () => {
-      expect(baseMockParams.estimateGasMethod.callCount).toStrictEqual(0);
-      const result = await estimateGasForSend({
-        ...baseMockParams,
-        to: '0x123',
-      });
-      expect(result).toStrictEqual(GAS_LIMITS.SIMPLE);
-    });
-
-    it(`should return ${GAS_LIMITS.SIMPLE} if not passed a sendToken or truthy to address`, async () => {
-      expect(baseMockParams.estimateGasMethod.callCount).toStrictEqual(0);
-      const result = await estimateGasForSend({ ...baseMockParams, to: null });
-      expect(result).toStrictEqual(GAS_LIMITS.SIMPLE);
-    });
-
-    it(`should not return ${GAS_LIMITS.SIMPLE} if passed a sendToken`, async () => {
-      expect(baseMockParams.estimateGasMethod.callCount).toStrictEqual(0);
-      const result = await estimateGasForSend({
-        ...baseMockParams,
-        to: '0x123',
-        sendToken: { address: '0x0' },
-      });
-      expect(result).not.toStrictEqual(GAS_LIMITS.SIMPLE);
-    });
-
-    it(`should return ${GAS_LIMITS.BASE_TOKEN_ESTIMATE} if passed a sendToken but no to address`, async () => {
-      const result = await estimateGasForSend({
-        ...baseMockParams,
-        to: null,
-        sendToken: { address: '0x0' },
-      });
-      expect(result).toStrictEqual(GAS_LIMITS.BASE_TOKEN_ESTIMATE);
-    });
-
-    it(`should return the adjusted blockGasLimit if it fails with a 'Transaction execution error.'`, async () => {
-      const result = await estimateGasForSend({
-        ...baseMockParams,
-        to: 'isContract willFailBecauseOf:Transaction execution error.',
-      });
-      expect(result).toStrictEqual('0x64x0.95');
-    });
-
-    it(`should return the adjusted blockGasLimit if it fails with a 'gas required exceeds allowance or always failing transaction.'`, async () => {
-      const result = await estimateGasForSend({
-        ...baseMockParams,
-        to:
-          'isContract willFailBecauseOf:gas required exceeds allowance or always failing transaction.',
-      });
-      expect(result).toStrictEqual('0x64x0.95');
-    });
-
-    it(`should reject other errors`, async () => {
-      await expect(
-        estimateGasForSend({
-          ...baseMockParams,
-          to: 'isContract willFailBecauseOf:some other error',
-        }),
-      ).rejects.toThrow('some other error');
-    });
-  });
-
-  describe('getToAddressForGasUpdate()', () => {
-    it('should return empty string if all params are undefined or null', () => {
-      expect(getToAddressForGasUpdate(undefined, null)).toStrictEqual('');
-    });
-
-    it('should return the first string that is not defined or null in lower case', () => {
-      expect(getToAddressForGasUpdate('A', null)).toStrictEqual('a');
-      expect(getToAddressForGasUpdate(undefined, 'B')).toStrictEqual('b');
-    });
-  });
-
-  describe('removeLeadingZeroes()', () => {
-    it('should remove leading zeroes from int when user types', () => {
-      expect(removeLeadingZeroes('0')).toStrictEqual('0');
-      expect(removeLeadingZeroes('1')).toStrictEqual('1');
-      expect(removeLeadingZeroes('00')).toStrictEqual('0');
-      expect(removeLeadingZeroes('01')).toStrictEqual('1');
-    });
-
-    it('should remove leading zeroes from int when user copy/paste', () => {
-      expect(removeLeadingZeroes('001')).toStrictEqual('1');
-    });
-
-    it('should remove leading zeroes from float when user types', () => {
-      expect(removeLeadingZeroes('0.')).toStrictEqual('0.');
-      expect(removeLeadingZeroes('0.0')).toStrictEqual('0.0');
-      expect(removeLeadingZeroes('0.00')).toStrictEqual('0.00');
-      expect(removeLeadingZeroes('0.001')).toStrictEqual('0.001');
-      expect(removeLeadingZeroes('0.10')).toStrictEqual('0.10');
-    });
-
-    it('should remove leading zeroes from float when user copy/paste', () => {
-      expect(removeLeadingZeroes('00.1')).toStrictEqual('0.1');
-    });
-  });
 });
diff --git a/ui/pages/settings/contact-list-tab/add-contact/add-contact.component.js b/ui/pages/settings/contact-list-tab/add-contact/add-contact.component.js
index e454838d1..64e076973 100644
--- a/ui/pages/settings/contact-list-tab/add-contact/add-contact.component.js
+++ b/ui/pages/settings/contact-list-tab/add-contact/add-contact.component.js
@@ -11,6 +11,7 @@ import {
   isBurnAddress,
   isValidHexAddress,
 } from '../../../../../shared/modules/hexstring-utils';
+import { INVALID_RECIPIENT_ADDRESS_ERROR } from '../../../send/send.constants';
 
 export default class AddContact extends PureComponent {
   static contextTypes = {
@@ -24,28 +25,32 @@ export default class AddContact extends PureComponent {
     qrCodeData:
       PropTypes.object /* eslint-disable-line react/no-unused-prop-types */,
     qrCodeDetected: PropTypes.func,
+    ensResolution: PropTypes.string,
+    ensError: PropTypes.string,
+    resetResolution: PropTypes.func,
   };
 
   state = {
     newName: '',
     ethAddress: '',
-    ensAddress: '',
     error: '',
-    ensError: '',
+    input: '',
   };
 
   constructor(props) {
     super(props);
-    this.dValidate = debounce(this.validate, 1000);
+    this.dValidate = debounce(this.validate, 500);
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.qrCodeData) {
       if (nextProps.qrCodeData.type === 'address') {
+        const { ensResolution } = this.props;
         const scannedAddress = nextProps.qrCodeData.values.address.toLowerCase();
-        const currentAddress = this.state.ensAddress || this.state.ethAddress;
+        const currentAddress = ensResolution || this.state.ethAddress;
         if (currentAddress.toLowerCase() !== scannedAddress) {
-          this.setState({ ethAddress: scannedAddress, ensAddress: '' });
+          this.setState({ input: scannedAddress });
+          this.validate(scannedAddress);
           // Clean up QR code data after handling
           this.props.qrCodeDetected(null);
         }
@@ -62,43 +67,48 @@ export default class AddContact extends PureComponent {
     if (valid || validEnsAddress || address === '') {
       this.setState({ error: '', ethAddress: address });
     } else {
-      this.setState({ error: 'Invalid Address' });
+      this.setState({ error: INVALID_RECIPIENT_ADDRESS_ERROR });
     }
   };
 
+  onChange = (input) => {
+    this.setState({ input });
+    this.dValidate(input);
+  };
+
   renderInput() {
     return (
       <EnsInput
         scanQrCode={(_) => {
           this.props.scanQrCode();
         }}
-        onChange={this.dValidate}
-        onPaste={(text) => this.setState({ ethAddress: text })}
-        onReset={() => this.setState({ ethAddress: '', ensAddress: '' })}
-        updateEnsResolution={(address) => {
-          this.setState({ ensAddress: address, error: '', ensError: '' });
+        onChange={this.onChange}
+        onPaste={(text) => {
+          this.setState({ input: text });
+          this.validate(text);
         }}
-        updateEnsResolutionError={(message) =>
-          this.setState({ ensError: message })
-        }
-        value={this.state.ethAddress || ''}
+        onReset={() => {
+          this.props.resetResolution();
+          this.setState({ ethAddress: '', input: '' });
+        }}
+        userInput={this.state.input}
       />
     );
   }
 
   render() {
     const { t } = this.context;
-    const { history, addToAddressBook } = this.props;
+    const { history, addToAddressBook, ensError, ensResolution } = this.props;
 
-    const errorToRender = this.state.ensError || this.state.error;
+    const errorToRender = ensError || this.state.error;
 
     return (
       <div className="settings-page__content-row address-book__add-contact">
-        {this.state.ensAddress && (
+        {ensResolution && (
           <div className="address-book__view-contact__group">
-            <Identicon address={this.state.ensAddress} diameter={60} />
+            <Identicon address={ensResolution} diameter={60} />
             <div className="address-book__view-contact__group__value">
-              {this.state.ensAddress}
+              {ensResolution}
             </div>
           </div>
         )}
@@ -124,7 +134,7 @@ export default class AddContact extends PureComponent {
             {this.renderInput()}
             {errorToRender && (
               <div className="address-book__add-contact__error">
-                {errorToRender}
+                {t(errorToRender)}
               </div>
             )}
           </div>
@@ -134,7 +144,7 @@ export default class AddContact extends PureComponent {
           disabled={Boolean(this.state.error)}
           onSubmit={async () => {
             await addToAddressBook(
-              this.state.ensAddress || this.state.ethAddress,
+              ensResolution || this.state.ethAddress,
               this.state.newName,
             );
             history.push(CONTACT_LIST_ROUTE);
diff --git a/ui/pages/settings/contact-list-tab/add-contact/add-contact.container.js b/ui/pages/settings/contact-list-tab/add-contact/add-contact.container.js
index 8d3c63c5f..49f4deb70 100644
--- a/ui/pages/settings/contact-list-tab/add-contact/add-contact.container.js
+++ b/ui/pages/settings/contact-list-tab/add-contact/add-contact.container.js
@@ -6,12 +6,19 @@ import {
   showQrScanner,
   qrCodeDetected,
 } from '../../../../store/actions';
-import { getQrCodeData } from '../../../../selectors';
+import { getQrCodeData } from '../../../../ducks/app/app';
+import {
+  getEnsError,
+  getEnsResolution,
+  resetResolution,
+} from '../../../../ducks/ens';
 import AddContact from './add-contact.component';
 
 const mapStateToProps = (state) => {
   return {
     qrCodeData: getQrCodeData(state),
+    ensError: getEnsError(state),
+    ensResolution: getEnsResolution(state),
   };
 };
 
@@ -21,6 +28,7 @@ const mapDispatchToProps = (dispatch) => {
       dispatch(addToAddressBook(recipient, nickname)),
     scanQrCode: () => dispatch(showQrScanner()),
     qrCodeDetected: (data) => dispatch(qrCodeDetected(data)),
+    resetResolution: () => dispatch(resetResolution()),
   };
 };
 
diff --git a/ui/selectors/custom-gas.js b/ui/selectors/custom-gas.js
index 041d971d2..c53e37c36 100644
--- a/ui/selectors/custom-gas.js
+++ b/ui/selectors/custom-gas.js
@@ -9,14 +9,10 @@ import { formatETHFee } from '../helpers/utils/formatters';
 import { calcGasTotal } from '../pages/send/send.utils';
 
 import { GAS_ESTIMATE_TYPES } from '../helpers/constants/common';
+import { getGasPrice } from '../ducks/send';
 import { BASIC_ESTIMATE_STATES, GAS_SOURCE } from '../ducks/gas/gas.duck';
 import { GAS_LIMITS } from '../../shared/constants/gas';
-import {
-  getCurrentCurrency,
-  getIsMainnet,
-  getPreferences,
-  getGasPrice,
-} from '.';
+import { getCurrentCurrency, getIsMainnet, getPreferences } from '.';
 
 const NUMBER_OF_DECIMALS_SM_BTNS = 5;
 
@@ -296,7 +292,7 @@ export function getRenderableEstimateDataForSmallButtonsFromGWEI(state) {
   const isMainnet = getIsMainnet(state);
   const showFiat = isMainnet || Boolean(showFiatInTestnets);
   const gasLimit =
-    state.send.gasLimit || getCustomGasLimit(state) || GAS_LIMITS.SIMPLE;
+    state.send.gas.gasLimit || getCustomGasLimit(state) || GAS_LIMITS.SIMPLE;
   const { conversionRate } = state.metamask;
   const currentCurrency = getCurrentCurrency(state);
   const {
diff --git a/ui/selectors/custom-gas.test.js b/ui/selectors/custom-gas.test.js
index 91344b96b..fb383248d 100644
--- a/ui/selectors/custom-gas.test.js
+++ b/ui/selectors/custom-gas.test.js
@@ -112,7 +112,9 @@ describe('custom-gas selectors', () => {
     it('should return false gas.basicEstimates.price 0x28bed01600 (175) (checkSend=true)', () => {
       const mockState = {
         send: {
-          gasPrice: '0x28bed0160',
+          gas: {
+            gasPrice: '0x28bed0160',
+          },
         },
         gas: {
           customData: { price: null },
@@ -124,7 +126,9 @@ describe('custom-gas selectors', () => {
     it('should return true gas.basicEstimates.price 0x30e4f9b400 (210) (checkSend=true)', () => {
       const mockState = {
         send: {
-          gasPrice: '0x30e4f9b400',
+          gas: {
+            gasPrice: '0x30e4f9b400',
+          },
         },
         gas: {
           customData: { price: null },
@@ -226,7 +230,9 @@ describe('custom-gas selectors', () => {
             },
           },
           send: {
-            gasLimit: GAS_LIMITS.SIMPLE,
+            gas: {
+              gasLimit: GAS_LIMITS.SIMPLE,
+            },
           },
           gas: {
             basicEstimates: {
@@ -277,7 +283,9 @@ describe('custom-gas selectors', () => {
             },
           },
           send: {
-            gasLimit: GAS_LIMITS.SIMPLE,
+            gas: {
+              gasLimit: GAS_LIMITS.SIMPLE,
+            },
           },
           gas: {
             basicEstimates: {
@@ -328,7 +336,9 @@ describe('custom-gas selectors', () => {
             },
           },
           send: {
-            gasLimit: GAS_LIMITS.SIMPLE,
+            gas: {
+              gasLimit: GAS_LIMITS.SIMPLE,
+            },
           },
           gas: {
             basicEstimates: {
@@ -373,7 +383,9 @@ describe('custom-gas selectors', () => {
             },
           },
           send: {
-            gasLimit: GAS_LIMITS.SIMPLE,
+            gas: {
+              gasLimit: GAS_LIMITS.SIMPLE,
+            },
           },
           gas: {
             basicEstimates: {
@@ -434,7 +446,9 @@ describe('custom-gas selectors', () => {
             },
           },
           send: {
-            gasLimit: GAS_LIMITS.SIMPLE,
+            gas: {
+              gasLimit: GAS_LIMITS.SIMPLE,
+            },
           },
           gas: {
             basicEstimates: {
@@ -479,7 +493,9 @@ describe('custom-gas selectors', () => {
             },
           },
           send: {
-            gasLimit: GAS_LIMITS.SIMPLE,
+            gas: {
+              gasLimit: GAS_LIMITS.SIMPLE,
+            },
           },
           gas: {
             basicEstimates: {
@@ -530,7 +546,9 @@ describe('custom-gas selectors', () => {
             },
           },
           send: {
-            gasLimit: GAS_LIMITS.SIMPLE,
+            gas: {
+              gasLimit: GAS_LIMITS.SIMPLE,
+            },
           },
           gas: {
             basicEstimates: {
@@ -581,7 +599,9 @@ describe('custom-gas selectors', () => {
             },
           },
           send: {
-            gasLimit: GAS_LIMITS.SIMPLE,
+            gas: {
+              gasLimit: GAS_LIMITS.SIMPLE,
+            },
           },
           gas: {
             basicEstimates: {
@@ -626,7 +646,9 @@ describe('custom-gas selectors', () => {
             },
           },
           send: {
-            gasLimit: GAS_LIMITS.SIMPLE,
+            gas: {
+              gasLimit: GAS_LIMITS.SIMPLE,
+            },
           },
           gas: {
             basicEstimates: {
diff --git a/ui/selectors/index.js b/ui/selectors/index.js
index b82c59c05..3f4ff3b0e 100644
--- a/ui/selectors/index.js
+++ b/ui/selectors/index.js
@@ -3,5 +3,4 @@ export * from './custom-gas';
 export * from './first-time-flow';
 export * from './permissions';
 export * from './selectors';
-export * from './send';
 export * from './transactions';
diff --git a/ui/selectors/send-selectors-test-data.js b/ui/selectors/send-selectors-test-data.js
deleted file mode 100644
index b2663aadb..000000000
--- a/ui/selectors/send-selectors-test-data.js
+++ /dev/null
@@ -1,214 +0,0 @@
-import { TRANSACTION_STATUSES } from '../../shared/constants/transaction';
-
-const state = {
-  metamask: {
-    isInitialized: true,
-    isUnlocked: true,
-    featureFlags: { sendHexData: true },
-    identities: {
-      '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825': {
-        address: '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825',
-        name: 'Send Account 1',
-      },
-      '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb': {
-        address: '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb',
-        name: 'Send Account 2',
-      },
-      '0x2f8d4a878cfa04a6e60d46362f5644deab66572d': {
-        address: '0x2f8d4a878cfa04a6e60d46362f5644deab66572d',
-        name: 'Send Account 3',
-      },
-      '0xd85a4b6a394794842887b8284293d69163007bbb': {
-        address: '0xd85a4b6a394794842887b8284293d69163007bbb',
-        name: 'Send Account 4',
-      },
-    },
-    cachedBalances: {},
-    currentBlockGasLimit: '0x4c1878',
-    currentCurrency: 'USD',
-    conversionRate: 1200.88200327,
-    conversionDate: 1489013762,
-    nativeCurrency: 'ETH',
-    frequentRpcList: [],
-    network: '3',
-    provider: {
-      type: 'testnet',
-      chainId: '0x3',
-    },
-    accounts: {
-      '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825': {
-        code: '0x',
-        balance: '0x47c9d71831c76efe',
-        nonce: '0x1b',
-        address: '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825',
-      },
-      '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb': {
-        code: '0x',
-        balance: '0x37452b1315889f80',
-        nonce: '0xa',
-        address: '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb',
-      },
-      '0x2f8d4a878cfa04a6e60d46362f5644deab66572d': {
-        code: '0x',
-        balance: '0x30c9d71831c76efe',
-        nonce: '0x1c',
-        address: '0x2f8d4a878cfa04a6e60d46362f5644deab66572d',
-      },
-      '0xd85a4b6a394794842887b8284293d69163007bbb': {
-        code: '0x',
-        balance: '0x0',
-        nonce: '0x0',
-        address: '0xd85a4b6a394794842887b8284293d69163007bbb',
-      },
-    },
-    addressBook: {
-      '0x3': {
-        '0x06195827297c7a80a443b6894d3bdb8824b43896': {
-          address: '0x06195827297c7a80a443b6894d3bdb8824b43896',
-          name: 'Address Book Account 1',
-          chainId: '0x3',
-        },
-      },
-    },
-    tokens: [
-      {
-        address: '0x1a195821297c7a80a433b6894d3bdb8824b43896',
-        decimals: 18,
-        symbol: 'ABC',
-      },
-      {
-        address: '0x8d6b81208414189a58339873ab429b6c47ab92d3',
-        decimals: 4,
-        symbol: 'DEF',
-      },
-      {
-        address: '0xa42084c8d1d9a2198631988579bb36b48433a72b',
-        decimals: 18,
-        symbol: 'GHI',
-      },
-    ],
-    transactions: {},
-    currentNetworkTxList: [
-      {
-        id: 'mockTokenTx1',
-        txParams: {
-          to: '0x8d6b81208414189a58339873ab429b6c47ab92d3',
-          from: '0xd85a4b6a394794842887b8284293d69163007bbb',
-        },
-        time: 1700000000000,
-      },
-      {
-        id: 'mockTokenTx2',
-        txParams: {
-          to: '0xafaketokenaddress',
-          from: '0xd85a4b6a394794842887b8284293d69163007bbb',
-        },
-        time: 1600000000000,
-      },
-      {
-        id: 'mockTokenTx3',
-        txParams: {
-          to: '0x8d6b81208414189a58339873ab429b6c47ab92d3',
-          from: '0xd85a4b6a394794842887b8284293d69163007bbb',
-        },
-        time: 1500000000000,
-      },
-      {
-        id: 'mockEthTx1',
-        txParams: {
-          to: '0xd85a4b6a394794842887b8284293d69163007bbb',
-          from: '0xd85a4b6a394794842887b8284293d69163007bbb',
-        },
-        time: 1400000000000,
-      },
-    ],
-    unapprovedMsgs: {
-      '0xabc': { id: 'unapprovedMessage1', time: 1650000000000 },
-      '0xdef': { id: 'unapprovedMessage2', time: 1550000000000 },
-      '0xghi': { id: 'unapprovedMessage3', time: 1450000000000 },
-    },
-    unapprovedMsgCount: 0,
-    unapprovedPersonalMsgs: {},
-    unapprovedPersonalMsgCount: 0,
-    unapprovedDecryptMsgs: {},
-    unapprovedDecryptMsgCount: 0,
-    unapprovedEncryptionPublicKeyMsgs: {},
-    unapprovedEncryptionPublicKeyMsgCount: 0,
-    keyringTypes: ['Simple Key Pair', 'HD Key Tree'],
-    keyrings: [
-      {
-        type: 'HD Key Tree',
-        accounts: [
-          'fdea65c8e26263f6d9a1b5de9555d2931a33b825',
-          'c5b8dbac4c1d3f152cdeb400e2313f309c410acb',
-          '2f8d4a878cfa04a6e60d46362f5644deab66572d',
-        ],
-      },
-      {
-        type: 'Simple Key Pair',
-        accounts: ['0xd85a4b6a394794842887b8284293d69163007bbb'],
-      },
-    ],
-    selectedAddress: '0xd85a4b6a394794842887b8284293d69163007bbb',
-    unapprovedTxs: {
-      4768706228115573: {
-        id: 4768706228115573,
-        time: 1487363153561,
-        status: TRANSACTION_STATUSES.UNAPPROVED,
-        gasMultiplier: 1,
-        metamaskNetworkId: '3',
-        txParams: {
-          from: '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb',
-          to: '0x18a3462427bcc9133bb46e88bcbe39cd7ef0e761',
-          value: '0xde0b6b3a7640000',
-          metamaskId: 4768706228115573,
-          metamaskNetworkId: '3',
-          gas: '0x5209',
-        },
-        txFee: '17e0186e60800',
-        txValue: 'de0b6b3a7640000',
-        maxCost: 'de234b52e4a0800',
-        gasPrice: '4a817c800',
-      },
-    },
-    currentLocale: 'en',
-  },
-  appState: {
-    menuOpen: false,
-    currentView: {
-      name: 'accountDetail',
-      detailView: null,
-      context: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
-    },
-    accountDetail: {
-      subview: 'transactions',
-    },
-    modal: {
-      modalState: {},
-      previousModalState: {},
-    },
-    isLoading: false,
-    warning: null,
-    scrollToBottom: false,
-    forgottenPassword: null,
-  },
-  identities: {},
-  send: {
-    fromDropdownOpen: false,
-    gasLimit: '0xFFFF',
-    gasPrice: '0xaa',
-    gasTotal: '0xb451dc41b578',
-    tokenBalance: 3434,
-    from: '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb',
-    to: '0x987fedabc',
-    amount: '0x080',
-    memo: '',
-    errors: {
-      someError: null,
-    },
-    maxModeOn: false,
-    editingTransactionId: 97531,
-  },
-};
-
-export default state;
diff --git a/ui/selectors/send.js b/ui/selectors/send.js
deleted file mode 100644
index 3d0b11d83..000000000
--- a/ui/selectors/send.js
+++ /dev/null
@@ -1,135 +0,0 @@
-import abi from 'human-standard-token-abi';
-import { calcGasTotal } from '../pages/send/send.utils';
-import {
-  getSelectedAccount,
-  getTargetAccount,
-  getAveragePriceEstimateInHexWEI,
-} from '.';
-
-export function getGasLimit(state) {
-  return state.send.gasLimit || '0';
-}
-
-export function getGasPrice(state) {
-  return state.send.gasPrice || getAveragePriceEstimateInHexWEI(state);
-}
-
-export function getGasTotal(state) {
-  return calcGasTotal(getGasLimit(state), getGasPrice(state));
-}
-
-export function getPrimaryCurrency(state) {
-  const sendToken = getSendToken(state);
-  return sendToken?.symbol;
-}
-
-export function getSendToken(state) {
-  return state.send.token;
-}
-
-export function getSendTokenAddress(state) {
-  return getSendToken(state)?.address;
-}
-
-export function getSendTokenContract(state) {
-  const sendTokenAddress = getSendTokenAddress(state);
-  return sendTokenAddress
-    ? global.eth.contract(abi).at(sendTokenAddress)
-    : null;
-}
-
-export function getSendAmount(state) {
-  return state.send.amount;
-}
-
-export function getSendHexData(state) {
-  return state.send.data;
-}
-
-export function getSendEditingTransactionId(state) {
-  return state.send.editingTransactionId;
-}
-
-export function getSendErrors(state) {
-  return state.send.errors;
-}
-
-export function sendAmountIsInError(state) {
-  return Boolean(state.send.errors.amount);
-}
-
-export function getSendFrom(state) {
-  return state.send.from;
-}
-
-export function getSendFromBalance(state) {
-  const fromAccount = getSendFromObject(state);
-  return fromAccount.balance;
-}
-
-export function getSendFromObject(state) {
-  const fromAddress = getSendFrom(state);
-  return fromAddress
-    ? getTargetAccount(state, fromAddress)
-    : getSelectedAccount(state);
-}
-
-export function getSendMaxModeState(state) {
-  return state.send.maxModeOn;
-}
-
-export function getSendTo(state) {
-  return state.send.to;
-}
-
-export function getSendToNickname(state) {
-  return state.send.toNickname;
-}
-
-export function getTokenBalance(state) {
-  return state.send.tokenBalance;
-}
-
-export function getSendEnsResolution(state) {
-  return state.send.ensResolution;
-}
-
-export function getSendEnsResolutionError(state) {
-  return state.send.ensResolutionError;
-}
-
-export function getQrCodeData(state) {
-  return state.appState.qrCodeData;
-}
-
-export function getGasLoadingError(state) {
-  return state.send.errors.gasLoading;
-}
-
-export function gasFeeIsInError(state) {
-  return Boolean(state.send.errors.gasFee);
-}
-
-export function getGasButtonGroupShown(state) {
-  return state.send.gasButtonGroupShown;
-}
-
-export function getTitleKey(state) {
-  const isEditing = Boolean(getSendEditingTransactionId(state));
-  const isToken = Boolean(getSendToken(state));
-
-  if (!getSendTo(state)) {
-    return 'addRecipient';
-  }
-
-  if (isEditing) {
-    return 'edit';
-  } else if (isToken) {
-    return 'sendTokens';
-  }
-  return 'send';
-}
-
-export function isSendFormInError(state) {
-  return Object.values(getSendErrors(state)).some((n) => n);
-}
diff --git a/ui/selectors/send.test.js b/ui/selectors/send.test.js
deleted file mode 100644
index aadbc28e5..000000000
--- a/ui/selectors/send.test.js
+++ /dev/null
@@ -1,417 +0,0 @@
-import sinon from 'sinon';
-import {
-  getGasLimit,
-  getGasPrice,
-  getGasTotal,
-  getPrimaryCurrency,
-  getSendToken,
-  getSendTokenContract,
-  getSendAmount,
-  sendAmountIsInError,
-  getSendEditingTransactionId,
-  getSendErrors,
-  getSendFrom,
-  getSendFromBalance,
-  getSendFromObject,
-  getSendMaxModeState,
-  getSendTo,
-  getTokenBalance,
-  gasFeeIsInError,
-  getGasLoadingError,
-  getGasButtonGroupShown,
-  getTitleKey,
-  isSendFormInError,
-} from './send';
-import mockState from './send-selectors-test-data';
-import {
-  accountsWithSendEtherInfoSelector,
-  getCurrentAccountWithSendEtherInfo,
-} from '.';
-
-describe('send selectors', () => {
-  const tempGlobalEth = { ...global.eth };
-  beforeEach(() => {
-    global.eth = {
-      contract: sinon.stub().returns({
-        at: (address) => `mockAt:${address}`,
-      }),
-    };
-  });
-
-  afterEach(() => {
-    global.eth = tempGlobalEth;
-  });
-
-  describe('accountsWithSendEtherInfoSelector()', () => {
-    it('should return an array of account objects with name info from identities', () => {
-      expect(accountsWithSendEtherInfoSelector(mockState)).toStrictEqual([
-        {
-          code: '0x',
-          balance: '0x47c9d71831c76efe',
-          nonce: '0x1b',
-          address: '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825',
-          name: 'Send Account 1',
-        },
-        {
-          code: '0x',
-          balance: '0x37452b1315889f80',
-          nonce: '0xa',
-          address: '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb',
-          name: 'Send Account 2',
-        },
-        {
-          code: '0x',
-          balance: '0x30c9d71831c76efe',
-          nonce: '0x1c',
-          address: '0x2f8d4a878cfa04a6e60d46362f5644deab66572d',
-          name: 'Send Account 3',
-        },
-        {
-          code: '0x',
-          balance: '0x0',
-          nonce: '0x0',
-          address: '0xd85a4b6a394794842887b8284293d69163007bbb',
-          name: 'Send Account 4',
-        },
-      ]);
-    });
-  });
-
-  describe('getCurrentAccountWithSendEtherInfo()', () => {
-    it('should return the currently selected account with identity info', () => {
-      expect(getCurrentAccountWithSendEtherInfo(mockState)).toStrictEqual({
-        code: '0x',
-        balance: '0x0',
-        nonce: '0x0',
-        address: '0xd85a4b6a394794842887b8284293d69163007bbb',
-        name: 'Send Account 4',
-      });
-    });
-  });
-
-  describe('getGasLimit()', () => {
-    it('should return the send.gasLimit', () => {
-      expect(getGasLimit(mockState)).toStrictEqual('0xFFFF');
-    });
-  });
-
-  describe('getGasPrice()', () => {
-    it('should return the send.gasPrice', () => {
-      expect(getGasPrice(mockState)).toStrictEqual('0xaa');
-    });
-  });
-
-  describe('getGasTotal()', () => {
-    it('should return the send.gasTotal', () => {
-      expect(getGasTotal(mockState)).toStrictEqual('a9ff56');
-    });
-  });
-
-  describe('getPrimaryCurrency()', () => {
-    it('should return the symbol of the send token', () => {
-      expect(
-        getPrimaryCurrency({
-          send: { token: { symbol: 'DEF' } },
-        }),
-      ).toStrictEqual('DEF');
-    });
-  });
-
-  describe('getSendToken()', () => {
-    it('should return the current send token if set', () => {
-      expect(
-        getSendToken({
-          send: {
-            token: {
-              address: '0x8d6b81208414189a58339873ab429b6c47ab92d3',
-              decimals: 4,
-              symbol: 'DEF',
-            },
-          },
-        }),
-      ).toStrictEqual({
-        address: '0x8d6b81208414189a58339873ab429b6c47ab92d3',
-        decimals: 4,
-        symbol: 'DEF',
-      });
-    });
-  });
-
-  describe('getSendTokenContract()', () => {
-    it('should return the contract at the send token address', () => {
-      expect(
-        getSendTokenContract({
-          send: {
-            token: {
-              address: '0x8d6b81208414189a58339873ab429b6c47ab92d3',
-              decimals: 4,
-              symbol: 'DEF',
-            },
-          },
-        }),
-      ).toStrictEqual('mockAt:0x8d6b81208414189a58339873ab429b6c47ab92d3');
-    });
-
-    it('should return null if send token is not set', () => {
-      expect(getSendTokenContract({ ...mockState, send: {} })).toBeNull();
-    });
-  });
-
-  describe('getSendAmount()', () => {
-    it('should return the send.amount', () => {
-      expect(getSendAmount(mockState)).toStrictEqual('0x080');
-    });
-  });
-
-  describe('getSendEditingTransactionId()', () => {
-    it('should return the send.editingTransactionId', () => {
-      expect(getSendEditingTransactionId(mockState)).toStrictEqual(97531);
-    });
-  });
-
-  describe('getSendErrors()', () => {
-    it('should return the send.errors', () => {
-      expect(getSendErrors(mockState)).toStrictEqual({ someError: null });
-    });
-  });
-
-  describe('getSendFrom()', () => {
-    it('should return the send.from', () => {
-      expect(getSendFrom(mockState)).toStrictEqual(
-        '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb',
-      );
-    });
-  });
-
-  describe('getSendFromBalance()', () => {
-    it('should get the send.from balance if it exists', () => {
-      expect(getSendFromBalance(mockState)).toStrictEqual('0x37452b1315889f80');
-    });
-
-    it('should get the selected account balance if the send.from does not exist', () => {
-      const editedMockState = {
-        ...mockState,
-        send: {
-          ...mockState.send,
-          from: null,
-        },
-      };
-      expect(getSendFromBalance(editedMockState)).toStrictEqual('0x0');
-    });
-  });
-
-  describe('getSendFromObject()', () => {
-    it('should return send.from if it exists', () => {
-      expect(getSendFromObject(mockState)).toStrictEqual({
-        address: '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb',
-        balance: '0x37452b1315889f80',
-        code: '0x',
-        nonce: '0xa',
-      });
-    });
-
-    it('should return the current account if send.from does not exist', () => {
-      const editedMockState = {
-        ...mockState,
-        send: {
-          from: null,
-        },
-      };
-      expect(getSendFromObject(editedMockState)).toStrictEqual({
-        code: '0x',
-        balance: '0x0',
-        nonce: '0x0',
-        address: '0xd85a4b6a394794842887b8284293d69163007bbb',
-      });
-    });
-  });
-
-  describe('getSendMaxModeState()', () => {
-    it('should return send.maxModeOn', () => {
-      expect(getSendMaxModeState(mockState)).toStrictEqual(false);
-    });
-  });
-
-  describe('getSendTo()', () => {
-    it('should return send.to', () => {
-      expect(getSendTo(mockState)).toStrictEqual('0x987fedabc');
-    });
-  });
-
-  describe('getTokenBalance()', () => {
-    it('should', () => {
-      expect(getTokenBalance(mockState)).toStrictEqual(3434);
-    });
-  });
-
-  describe('send-amount-row selectors', () => {
-    describe('sendAmountIsInError()', () => {
-      it('should return true if send.errors.amount is truthy', () => {
-        const state = {
-          send: {
-            errors: {
-              amount: 'abc',
-            },
-          },
-        };
-
-        expect(sendAmountIsInError(state)).toStrictEqual(true);
-      });
-
-      it('should return false if send.errors.amount is falsy', () => {
-        const state = {
-          send: {
-            errors: {
-              amount: null,
-            },
-          },
-        };
-
-        expect(sendAmountIsInError(state)).toStrictEqual(false);
-      });
-    });
-  });
-
-  describe('send-gas-row selectors', () => {
-    describe('getGasLoadingError()', () => {
-      it('should return send.errors.gasLoading', () => {
-        const state = {
-          send: {
-            errors: {
-              gasLoading: 'abc',
-            },
-          },
-        };
-
-        expect(getGasLoadingError(state)).toStrictEqual('abc');
-      });
-    });
-
-    describe('gasFeeIsInError()', () => {
-      it('should return true if send.errors.gasFee is truthy', () => {
-        const state = {
-          send: {
-            errors: {
-              gasFee: 'def',
-            },
-          },
-        };
-
-        expect(gasFeeIsInError(state)).toStrictEqual(true);
-      });
-
-      it('should return false send.errors.gasFee is falsely', () => {
-        const state = {
-          send: {
-            errors: {
-              gasFee: null,
-            },
-          },
-        };
-
-        expect(gasFeeIsInError(state)).toStrictEqual(false);
-      });
-    });
-
-    describe('getGasButtonGroupShown()', () => {
-      it('should return send.gasButtonGroupShown', () => {
-        const state = {
-          send: {
-            gasButtonGroupShown: 'foobar',
-          },
-        };
-
-        expect(getGasButtonGroupShown(state)).toStrictEqual('foobar');
-      });
-    });
-  });
-
-  describe('send-header selectors', () => {
-    const getMetamaskSendMockState = (send) => {
-      return {
-        send: { ...send },
-      };
-    };
-
-    describe('getTitleKey()', () => {
-      it('should return the correct key when "to" is empty', () => {
-        expect(getTitleKey(getMetamaskSendMockState({}))).toStrictEqual(
-          'addRecipient',
-        );
-      });
-
-      it('should return the correct key when getSendEditingTransactionId is truthy', () => {
-        expect(
-          getTitleKey(
-            getMetamaskSendMockState({
-              to: true,
-              editingTransactionId: true,
-              token: {},
-            }),
-          ),
-        ).toStrictEqual('edit');
-      });
-
-      it('should return the correct key when getSendEditingTransactionId is falsy and getSendToken is truthy', () => {
-        expect(
-          getTitleKey(
-            getMetamaskSendMockState({
-              to: true,
-              editingTransactionId: false,
-              token: {},
-            }),
-          ),
-        ).toStrictEqual('sendTokens');
-      });
-
-      it('should return the correct key when getSendEditingTransactionId is falsy and getSendToken is falsy', () => {
-        expect(
-          getTitleKey(
-            getMetamaskSendMockState({
-              to: true,
-              editingTransactionId: false,
-              token: null,
-            }),
-          ),
-        ).toStrictEqual('send');
-      });
-    });
-  });
-
-  describe('send-footer selectors', () => {
-    const getSendMockState = (send) => {
-      return {
-        send: { ...send },
-      };
-    };
-
-    describe('isSendFormInError()', () => {
-      it('should return true if any of the values of the object returned by getSendErrors are truthy', () => {
-        expect(
-          isSendFormInError(
-            getSendMockState({
-              errors: [true],
-            }),
-          ),
-        ).toStrictEqual(true);
-      });
-
-      it('should return false if all of the values of the object returned by getSendErrors are falsy', () => {
-        expect(
-          isSendFormInError(
-            getSendMockState({
-              errors: [],
-            }),
-          ),
-        ).toStrictEqual(false);
-        expect(
-          isSendFormInError(
-            getSendMockState({
-              errors: [false],
-            }),
-          ),
-        ).toStrictEqual(false);
-      });
-    });
-  });
-});
diff --git a/ui/store/actionConstants.js b/ui/store/actionConstants.js
index d16caa61f..977c6dee2 100644
--- a/ui/store/actionConstants.js
+++ b/ui/store/actionConstants.js
@@ -15,6 +15,10 @@ export const NETWORK_DROPDOWN_CLOSE = 'UI_NETWORK_DROPDOWN_CLOSE';
 // remote state
 export const UPDATE_METAMASK_STATE = 'UPDATE_METAMASK_STATE';
 export const SELECTED_ADDRESS_CHANGED = 'SELECTED_ADDRESS_CHANGED';
+export const SELECTED_ACCOUNT_CHANGED = 'SELECTED_ACCOUNT_CHANGED';
+export const ACCOUNT_CHANGED = 'ACCOUNT_CHANGED';
+export const CHAIN_CHANGED = 'CHAIN_CHANGED';
+export const ADDRESS_BOOK_UPDATED = 'ADDRESS_BOOK_UPDATED';
 export const FORGOT_PASSWORD = 'FORGOT_PASSWORD';
 export const CLOSE_WELCOME_SCREEN = 'CLOSE_WELCOME_SCREEN';
 // unlock screen
diff --git a/ui/store/actionConstants.test.js b/ui/store/actionConstants.test.js
index 7cfef827f..eba555a51 100644
--- a/ui/store/actionConstants.test.js
+++ b/ui/store/actionConstants.test.js
@@ -63,9 +63,7 @@ describe('Redux actionConstants', () => {
   describe('SHOW_ACCOUNT_DETAIL', () => {
     it('updates metamask state', () => {
       const initialState = {
-        metamask: {
-          selectedAddress: 'foo',
-        },
+        metamask: {},
       };
       freeze(initialState);
 
@@ -76,9 +74,8 @@ describe('Redux actionConstants', () => {
       freeze(action);
 
       const resultingState = reducers(initialState, action);
-      expect(resultingState.metamask.selectedAddress).toStrictEqual(
-        action.value,
-      );
+      expect(resultingState.metamask.isUnlocked).toStrictEqual(true);
+      expect(resultingState.metamask.isInitialized).toStrictEqual(true);
     });
   });
 });
diff --git a/ui/store/actions.js b/ui/store/actions.js
index 57f11fe04..967fb3ca2 100644
--- a/ui/store/actions.js
+++ b/ui/store/actions.js
@@ -1,7 +1,6 @@
-import abi from 'human-standard-token-abi';
 import pify from 'pify';
 import log from 'loglevel';
-import { capitalize } from 'lodash';
+import { capitalize, isEqual } from 'lodash';
 import getBuyEthUrl from '../../app/scripts/lib/buy-eth-url';
 import {
   fetchLocale,
@@ -15,14 +14,15 @@ import { hasUnconfirmedTransactions } from '../helpers/utils/confirm-tx.util';
 import txHelper from '../helpers/utils/tx-helper';
 import { getEnvironmentType, addHexPrefix } from '../../app/scripts/lib/util';
 import {
+  getMetaMaskAccounts,
   getPermittedAccountsForCurrentTab,
   getSelectedAddress,
 } from '../selectors';
+import { computeEstimatedGasLimit, resetSendState } from '../ducks/send';
 import { switchedToUnconnectedAccount } from '../ducks/alerts/unconnected-account';
 import { getUnconnectedAccountAlertEnabledness } from '../ducks/metamask/metamask';
 import { LISTED_CONTRACT_ADDRESSES } from '../../shared/constants/tokens';
 import { toChecksumHexAddress } from '../../shared/modules/hexstring-utils';
-import { clearSend } from '../ducks/send/send.duck';
 import * as actionConstants from './actionConstants';
 
 let background = null;
@@ -621,19 +621,6 @@ export function signTypedMsg(msgData) {
   };
 }
 
-export function signTx(txData) {
-  return async (dispatch) => {
-    dispatch(showLoadingIndication());
-    global.ethQuery.sendTransaction(txData, (err) => {
-      if (err) {
-        dispatch(displayWarning(err.message));
-      }
-    });
-    dispatch(hideLoadingIndication());
-    dispatch(showConfTxPage());
-  };
-}
-
 export function updateCustomNonce(value) {
   return {
     type: actionConstants.UPDATE_CUSTOM_NONCE,
@@ -641,22 +628,6 @@ export function updateCustomNonce(value) {
   };
 }
 
-export function signTokenTx(tokenAddress, toAddress, amount, txData) {
-  return async (dispatch) => {
-    dispatch(showLoadingIndication());
-
-    try {
-      const token = global.eth.contract(abi).at(tokenAddress);
-      token.transfer(toAddress, addHexPrefix(amount), txData);
-      dispatch(showConfTxPage());
-      dispatch(hideLoadingIndication());
-    } catch (error) {
-      dispatch(hideLoadingIndication());
-      dispatch(displayWarning(error.message));
-    }
-  };
-}
-
 const updateMetamaskStateFromBackground = () => {
   log.debug(`background.getState`);
 
@@ -721,7 +692,7 @@ export function updateAndApproveTx(txData, dontShowLoadingIndicator) {
     return new Promise((resolve, reject) => {
       background.updateAndApproveTransaction(txData, (err) => {
         dispatch(updateTransactionParams(txData.id, txData.txParams));
-        dispatch(clearSend());
+        dispatch(resetSendState());
 
         if (err) {
           dispatch(txError(err));
@@ -737,7 +708,7 @@ export function updateAndApproveTx(txData, dontShowLoadingIndicator) {
       .then(() => updateMetamaskStateFromBackground())
       .then((newState) => dispatch(updateMetamaskState(newState)))
       .then(() => {
-        dispatch(clearSend());
+        dispatch(resetSendState());
         dispatch(completedTx(txData.id));
         dispatch(hideLoadingIndication());
         dispatch(updateCustomNonce(''));
@@ -907,7 +878,7 @@ export function cancelTx(txData, _showLoadingIndication = true) {
       .then(() => updateMetamaskStateFromBackground())
       .then((newState) => dispatch(updateMetamaskState(newState)))
       .then(() => {
-        dispatch(clearSend());
+        dispatch(resetSendState());
         dispatch(completedTx(txData.id));
         dispatch(hideLoadingIndication());
         dispatch(closeCurrentNotificationWindow());
@@ -950,7 +921,7 @@ export function cancelTxs(txDataList) {
 
       const newState = await updateMetamaskStateFromBackground();
       dispatch(updateMetamaskState(newState));
-      dispatch(clearSend());
+      dispatch(resetSendState());
 
       txIds.forEach((id) => {
         dispatch(completedTx(id));
@@ -1038,19 +1009,59 @@ export function updateMetamaskState(newState) {
   return (dispatch, getState) => {
     const { metamask: currentState } = getState();
 
-    const { currentLocale, selectedAddress } = currentState;
+    const { currentLocale, selectedAddress, provider } = currentState;
     const {
       currentLocale: newLocale,
       selectedAddress: newSelectedAddress,
+      provider: newProvider,
     } = newState;
 
     if (currentLocale && newLocale && currentLocale !== newLocale) {
       dispatch(updateCurrentLocale(newLocale));
     }
+
     if (selectedAddress !== newSelectedAddress) {
       dispatch({ type: actionConstants.SELECTED_ADDRESS_CHANGED });
     }
 
+    const newAddressBook = newState.addressBook?.[newProvider?.chainId] ?? {};
+    const oldAddressBook = currentState.addressBook?.[provider?.chainId] ?? {};
+    const newAccounts = getMetaMaskAccounts({ metamask: newState });
+    const oldAccounts = getMetaMaskAccounts({ metamask: currentState });
+    const newSelectedAccount = newAccounts[newSelectedAddress];
+    const oldSelectedAccount = newAccounts[selectedAddress];
+    // dispatch an ACCOUNT_CHANGED for any account whose balance or other
+    // properties changed in this update
+    Object.entries(oldAccounts).forEach(([address, oldAccount]) => {
+      if (!isEqual(oldAccount, newAccounts[address])) {
+        dispatch({
+          type: actionConstants.ACCOUNT_CHANGED,
+          payload: { account: newAccounts[address] },
+        });
+      }
+    });
+    // Also emit an event for the selected account changing, either due to a
+    // property update or if the entire account changes.
+    if (isEqual(oldSelectedAccount, newSelectedAccount) === false) {
+      dispatch({
+        type: actionConstants.SELECTED_ACCOUNT_CHANGED,
+        payload: { account: newSelectedAccount },
+      });
+    }
+    // We need to keep track of changing address book entries
+    if (isEqual(oldAddressBook, newAddressBook) === false) {
+      dispatch({
+        type: actionConstants.ADDRESS_BOOK_UPDATED,
+        payload: { addressBook: newAddressBook },
+      });
+    }
+
+    if (provider.chainId !== newProvider.chainId) {
+      dispatch({
+        type: actionConstants.CHAIN_CHANGED,
+        payload: newProvider.chainId,
+      });
+    }
     dispatch({
       type: actionConstants.UPDATE_METAMASK_STATE,
       value: newState,
@@ -1141,6 +1152,7 @@ export function showAccountDetail(address) {
 
     try {
       await _setSelectedAddress(dispatch, address);
+      await forceUpdateMetamaskState(dispatch);
     } catch (error) {
       dispatch(displayWarning(error.message));
       return;
@@ -1234,21 +1246,6 @@ export function addToken(
   };
 }
 
-export function updateTokenType(tokenAddress) {
-  return async (dispatch) => {
-    let token = {};
-    dispatch(showLoadingIndication());
-    try {
-      token = await promisifiedBackground.updateTokenType(tokenAddress);
-    } catch (error) {
-      log.error(error);
-    } finally {
-      dispatch(hideLoadingIndication());
-    }
-    return token;
-  };
-}
-
 export function removeToken(address) {
   return (dispatch) => {
     dispatch(showLoadingIndication());
@@ -1672,9 +1669,16 @@ export function hideAlert() {
  * or null (used to clear the previous value)
  */
 export function qrCodeDetected(qrCodeData) {
-  return {
-    type: actionConstants.QR_CODE_DETECTED,
-    value: qrCodeData,
+  return async (dispatch) => {
+    await dispatch({
+      type: actionConstants.QR_CODE_DETECTED,
+      value: qrCodeData,
+    });
+
+    // If on the send page, the send slice will listen for the QR_CODE_DETECTED
+    // action and update its state. Address changes need to recompute gasLimit
+    // so we fire this method so that the send page gasLimit can be recomputed
+    dispatch(computeEstimatedGasLimit());
   };
 }
 
@@ -2719,6 +2723,16 @@ export function estimateGas(params) {
   return promisifiedBackground.estimateGas(params);
 }
 
+export async function updateTokenType(tokenAddress) {
+  let token = {};
+  try {
+    token = await promisifiedBackground.updateTokenType(tokenAddress);
+  } catch (error) {
+    log.error(error);
+  }
+  return token;
+}
+
 // MetaMetrics
 /**
  * @typedef {import('../../shared/constants/metametrics').MetaMetricsEventPayload} MetaMetricsEventPayload
diff --git a/ui/store/actions.test.js b/ui/store/actions.test.js
index d28defb8c..847141fd5 100644
--- a/ui/store/actions.test.js
+++ b/ui/store/actions.test.js
@@ -1,7 +1,6 @@
 import sinon from 'sinon';
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-import EthQuery from 'eth-query';
 import enLocale from '../../app/_locales/en/messages.json';
 import MetaMaskController from '../../app/scripts/metamask-controller';
 import { TRANSACTION_STATUSES } from '../../shared/constants/transaction';
@@ -14,10 +13,22 @@ const defaultState = {
     currentLocale: 'test',
     selectedAddress: '0xFirstAddress',
     provider: { chainId: '0x1' },
+    accounts: {
+      '0xFirstAddress': {
+        balance: '0x0',
+      },
+    },
+    cachedBalances: {
+      '0x1': {
+        '0xFirstAddress': '0x0',
+      },
+    },
   },
 };
 const mockStore = (state = defaultState) => configureStore(middleware)(state);
 
+const baseMockState = defaultState.metamask;
+
 describe('Actions', () => {
   let background;
 
@@ -25,12 +36,7 @@ describe('Actions', () => {
 
   beforeEach(async () => {
     background = sinon.createStubInstance(MetaMaskController, {
-      getState: sinon.stub().callsFake((cb) =>
-        cb(null, {
-          currentLocale: 'test',
-          selectedAddress: '0xFirstAddress',
-        }),
-      ),
+      getState: sinon.stub().callsFake((cb) => cb(null, baseMockState)),
     });
   });
 
@@ -58,10 +64,7 @@ describe('Actions', () => {
         { type: 'UNLOCK_SUCCEEDED', value: undefined },
         {
           type: 'UPDATE_METAMASK_STATE',
-          value: {
-            currentLocale: 'test',
-            selectedAddress: '0xFirstAddress',
-          },
+          value: baseMockState,
         },
         { type: 'HIDE_LOADING_INDICATION' },
       ];
@@ -111,7 +114,7 @@ describe('Actions', () => {
         { type: 'UNLOCK_SUCCEEDED', value: undefined },
         {
           type: 'UPDATE_METAMASK_STATE',
-          value: { currentLocale: 'test', selectedAddress: '0xFirstAddress' },
+          value: baseMockState,
         },
         { type: 'DISPLAY_WARNING', value: 'error' },
         { type: 'UNLOCK_FAILED', value: 'error' },
@@ -159,10 +162,7 @@ describe('Actions', () => {
         { type: 'FORGOT_PASSWORD', value: false },
         {
           type: 'UPDATE_METAMASK_STATE',
-          value: {
-            currentLocale: 'test',
-            selectedAddress: '0xFirstAddress',
-          },
+          value: baseMockState,
         },
         { type: 'SHOW_ACCOUNTS_PAGE' },
         { type: 'HIDE_LOADING_INDICATION' },
@@ -254,6 +254,19 @@ describe('Actions', () => {
         cb(null, {
           currentLocale: 'test',
           selectedAddress: '0xAnotherAddress',
+          provider: {
+            chainId: '0x1',
+          },
+          accounts: {
+            '0xAnotherAddress': {
+              balance: '0x0',
+            },
+          },
+          cachedBalances: {
+            '0x1': {
+              '0xAnotherAddress': '0x0',
+            },
+          },
         }),
       );
 
@@ -264,6 +277,8 @@ describe('Actions', () => {
       const expectedActions = [
         'SHOW_LOADING_INDICATION',
         'SELECTED_ADDRESS_CHANGED',
+        'ACCOUNT_CHANGED',
+        'SELECTED_ACCOUNT_CHANGED',
         'UPDATE_METAMASK_STATE',
         'HIDE_LOADING_INDICATION',
         'SHOW_ACCOUNTS_PAGE',
@@ -400,7 +415,9 @@ describe('Actions', () => {
 
   describe('#addNewAccount', () => {
     it('adds a new account', async () => {
-      const store = mockStore({ metamask: { identities: {} } });
+      const store = mockStore({
+        metamask: { identities: {}, ...defaultState.metamask },
+      });
 
       const addNewAccount = background.addNewAccount.callsFake((cb) =>
         cb(null, {
@@ -660,7 +677,7 @@ describe('Actions', () => {
       const store = mockStore();
 
       const signMessage = background.signMessage.callsFake((_, cb) =>
-        cb(null, defaultState),
+        cb(null, defaultState.metamask),
       );
 
       actions._setBackgroundConnection(background);
@@ -705,7 +722,7 @@ describe('Actions', () => {
       const store = mockStore();
 
       const signPersonalMessage = background.signPersonalMessage.callsFake(
-        (_, cb) => cb(null, defaultState),
+        (_, cb) => cb(null, defaultState.metamask),
       );
 
       actions._setBackgroundConnection(background);
@@ -786,7 +803,7 @@ describe('Actions', () => {
       const store = mockStore();
 
       const signTypedMsg = background.signTypedMessage.callsFake((_, cb) =>
-        cb(null, defaultState),
+        cb(null, defaultState.metamask),
       );
 
       actions._setBackgroundConnection(background);
@@ -816,58 +833,6 @@ describe('Actions', () => {
     });
   });
 
-  describe('#signTx', () => {
-    beforeEach(() => {
-      global.ethQuery = sinon.createStubInstance(EthQuery);
-    });
-
-    afterEach(() => {
-      sinon.restore();
-    });
-
-    it('calls sendTransaction in global ethQuery', async () => {
-      const store = mockStore();
-
-      actions._setBackgroundConnection(background);
-
-      await store.dispatch(actions.signTx());
-
-      expect(global.ethQuery.sendTransaction.callCount).toStrictEqual(1);
-    });
-
-    it('errors in when sendTransaction throws', async () => {
-      const store = mockStore();
-      const expectedActions = [
-        { type: 'SHOW_LOADING_INDICATION', value: undefined },
-        { type: 'DISPLAY_WARNING', value: 'error' },
-        { type: 'HIDE_LOADING_INDICATION' },
-        { type: 'SHOW_CONF_TX_PAGE', id: undefined },
-      ];
-
-      global.ethQuery.sendTransaction.callsFake((_, callback) => {
-        callback(new Error('error'));
-      });
-
-      actions._setBackgroundConnection(background);
-
-      await store.dispatch(actions.signTx());
-      expect(store.getActions()).toStrictEqual(expectedActions);
-    });
-  });
-
-  describe('#signTokenTx', () => {
-    it('calls eth.contract', async () => {
-      global.eth = {
-        contract: sinon.stub(),
-      };
-
-      const store = mockStore();
-
-      await store.dispatch(actions.signTokenTx());
-      expect(global.eth.contract.callCount).toStrictEqual(1);
-    });
-  });
-
   describe('#updateTransaction', () => {
     const txParams = {
       from: '0x1',
@@ -895,12 +860,7 @@ describe('Actions', () => {
 
       background.getApi.returns({
         updateTransaction: updateTransactionStub,
-        getState: sinon.stub().callsFake((cb) =>
-          cb(null, {
-            currentLocale: 'test',
-            selectedAddress: '0xFirstAddress',
-          }),
-        ),
+        getState: sinon.stub().callsFake((cb) => cb(null, baseMockState)),
       });
 
       actions._setBackgroundConnection(background.getApi());
@@ -1699,10 +1659,7 @@ describe('Actions', () => {
         { type: 'FORGOT_PASSWORD', value: true },
         {
           type: 'UPDATE_METAMASK_STATE',
-          value: {
-            currentLocale: 'test',
-            selectedAddress: '0xFirstAddress',
-          },
+          value: baseMockState,
         },
       ];
 
@@ -1762,6 +1719,19 @@ describe('Actions', () => {
           cb(null, {
             currentLocale: 'test',
             selectedAddress: '0xFirstAddress',
+            provider: {
+              chainId: '0x1',
+            },
+            accounts: {
+              '0xFirstAddress': {
+                balance: '0x0',
+              },
+            },
+            cachedBalances: {
+              '0x1': {
+                '0xFirstAddress': '0x0',
+              },
+            },
           }),
         ),
       });

From a4a5580785bffa58c7242ecd97310507f59beb4e Mon Sep 17 00:00:00 2001
From: Alex Donesky <adonesky@gmail.com>
Date: Wed, 23 Jun 2021 18:28:49 -0500
Subject: [PATCH 038/141] Update controllers with conversionRate change with
 minimal required changes in extension (#11361)

* updating controllers with conversionRate change with minimal required changes in extension

* swapping showFiat selector in places where possible

* adding invalid conversion protection

* lint fixes

* adjusting list-item styling logic
---
 package.json                                  |  2 +-
 .../app/asset-list-item/asset-list-item.js    |  2 +-
 ui/components/app/asset-list/asset-list.js    | 18 ++---
 .../gas-modal-page-container.container.js     |  5 +-
 .../transaction-breakdown.container.js        |  6 +-
 .../currency-input.container.js               |  7 +-
 ui/components/ui/list-item/index.scss         |  9 +++
 .../ui/list-item/list-item.component.js       |  6 +-
 .../token-input/token-input.component.test.js |  2 +
 .../ui/token-input/token-input.container.js   | 10 +--
 ui/helpers/utils/conversion-util.js           |  8 ++-
 ui/hooks/useCurrencyDisplay.js                | 42 ++++++++----
 ui/hooks/useUserPreferencedCurrency.js        |  8 ++-
 ui/hooks/useUserPreferencedCurrency.test.js   | 11 +++-
 .../confirm-transaction-base.container.js     |  7 +-
 ui/selectors/custom-gas.js                    | 11 +---
 ui/selectors/selectors.js                     |  8 ++-
 yarn.lock                                     | 66 +++++++++----------
 18 files changed, 133 insertions(+), 95 deletions(-)

diff --git a/package.json b/package.json
index 0362be9eb..b3323b9e4 100644
--- a/package.json
+++ b/package.json
@@ -100,7 +100,7 @@
     "@lavamoat/preinstall-always-fail": "^1.0.0",
     "@material-ui/core": "^4.11.0",
     "@metamask/contract-metadata": "^1.26.0",
-    "@metamask/controllers": "^9.0.0",
+    "@metamask/controllers": "^10.0.0",
     "@metamask/eth-ledger-bridge-keyring": "^0.6.0",
     "@metamask/eth-token-tracker": "^3.0.1",
     "@metamask/etherscan-link": "^2.1.0",
diff --git a/ui/components/app/asset-list-item/asset-list-item.js b/ui/components/app/asset-list-item/asset-list-item.js
index 3c2325d48..801a8735b 100644
--- a/ui/components/app/asset-list-item/asset-list-item.js
+++ b/ui/components/app/asset-list-item/asset-list-item.js
@@ -112,7 +112,7 @@ const AssetListItem = ({
         </button>
       }
       titleIcon={titleIcon}
-      subtitle={<h3 title={secondary}>{secondary}</h3>}
+      subtitle={secondary ? <h3 title={secondary}>{secondary}</h3> : null}
       onClick={onClick}
       icon={
         <Identicon
diff --git a/ui/components/app/asset-list/asset-list.js b/ui/components/app/asset-list/asset-list.js
index 98ce9f042..213376df0 100644
--- a/ui/components/app/asset-list/asset-list.js
+++ b/ui/components/app/asset-list/asset-list.js
@@ -56,13 +56,13 @@ const AssetList = ({ onClickAsset }) => {
     },
   );
 
-  const [secondaryCurrencyDisplay] = useCurrencyDisplay(
-    selectedAccountBalance,
-    {
-      numberOfDecimals: secondaryNumberOfDecimals,
-      currency: secondaryCurrency,
-    },
-  );
+  const [
+    secondaryCurrencyDisplay,
+    secondaryCurrencyProperties,
+  ] = useCurrencyDisplay(selectedAccountBalance, {
+    numberOfDecimals: secondaryNumberOfDecimals,
+    currency: secondaryCurrency,
+  });
 
   const primaryTokenImage = useSelector(getNativeCurrencyImage);
 
@@ -71,7 +71,9 @@ const AssetList = ({ onClickAsset }) => {
       <AssetListItem
         onClick={() => onClickAsset(nativeCurrency)}
         data-testid="wallet-balance"
-        primary={primaryCurrencyProperties.value}
+        primary={
+          primaryCurrencyProperties.value ?? secondaryCurrencyProperties.value
+        }
         tokenSymbol={primaryCurrencyProperties.suffix}
         secondary={showFiat ? secondaryCurrencyDisplay : undefined}
         tokenImage={primaryTokenImage}
diff --git a/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js b/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
index 2c7d0aff4..513b4dc86 100644
--- a/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
+++ b/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
@@ -29,7 +29,6 @@ import {
   getCurrentCurrency,
   getCurrentEthBalance,
   getIsMainnet,
-  getPreferences,
   getBasicGasEstimateLoadingStatus,
   getCustomGasLimit,
   getCustomGasPrice,
@@ -39,6 +38,7 @@ import {
   getAveragePriceEstimateInHexWEI,
   isCustomPriceExcessive,
   getIsGasEstimatesFetched,
+  getShouldShowFiat,
 } from '../../../../selectors';
 
 import {
@@ -112,9 +112,8 @@ const mapStateToProps = (state, ownProps) => {
 
   const balance = getCurrentEthBalance(state);
 
-  const { showFiatInTestnets } = getPreferences(state);
   const isMainnet = getIsMainnet(state);
-  const showFiat = Boolean(isMainnet || showFiatInTestnets);
+  const showFiat = getShouldShowFiat(state);
 
   const newTotalEth =
     maxModeOn && asset.type === ASSET_TYPES.NATIVE
diff --git a/ui/components/app/transaction-breakdown/transaction-breakdown.container.js b/ui/components/app/transaction-breakdown/transaction-breakdown.container.js
index 01cdc036e..7650c6faa 100644
--- a/ui/components/app/transaction-breakdown/transaction-breakdown.container.js
+++ b/ui/components/app/transaction-breakdown/transaction-breakdown.container.js
@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { getIsMainnet, getPreferences } from '../../../selectors';
+import { getShouldShowFiat } from '../../../selectors';
 import { getNativeCurrency } from '../../../ducks/metamask/metamask';
 import { getHexGasTotal } from '../../../helpers/utils/confirm-tx.util';
 import { sumHexes } from '../../../helpers/utils/transactions.util';
@@ -11,8 +11,6 @@ const mapStateToProps = (state, ownProps) => {
     txParams: { gas, gasPrice, value } = {},
     txReceipt: { gasUsed } = {},
   } = transaction;
-  const { showFiatInTestnets } = getPreferences(state);
-  const isMainnet = getIsMainnet(state);
 
   const gasLimit = typeof gasUsed === 'string' ? gasUsed : gas;
 
@@ -22,7 +20,7 @@ const mapStateToProps = (state, ownProps) => {
 
   return {
     nativeCurrency: getNativeCurrency(state),
-    showFiat: isMainnet || Boolean(showFiatInTestnets),
+    showFiat: getShouldShowFiat(state),
     totalInHex,
     gas,
     gasPrice,
diff --git a/ui/components/ui/currency-input/currency-input.container.js b/ui/components/ui/currency-input/currency-input.container.js
index 23d792838..1d3c09620 100644
--- a/ui/components/ui/currency-input/currency-input.container.js
+++ b/ui/components/ui/currency-input/currency-input.container.js
@@ -1,20 +1,19 @@
 import { connect } from 'react-redux';
 import { ETH } from '../../../helpers/constants/common';
-import { getIsMainnet, getPreferences } from '../../../selectors';
+import { getShouldShowFiat } from '../../../selectors';
 import CurrencyInput from './currency-input.component';
 
 const mapStateToProps = (state) => {
   const {
     metamask: { nativeCurrency, currentCurrency, conversionRate },
   } = state;
-  const { showFiatInTestnets } = getPreferences(state);
-  const isMainnet = getIsMainnet(state);
+  const showFiat = getShouldShowFiat(state);
 
   return {
     nativeCurrency,
     currentCurrency,
     conversionRate,
-    hideFiat: !isMainnet && !showFiatInTestnets,
+    hideFiat: !showFiat,
   };
 };
 
diff --git a/ui/components/ui/list-item/index.scss b/ui/components/ui/list-item/index.scss
index 5470a692c..dc58b90b5 100644
--- a/ui/components/ui/list-item/index.scss
+++ b/ui/components/ui/list-item/index.scss
@@ -110,3 +110,12 @@
       '.    actions  actions  actions  actions  mid mid mid mid right right right';
   }
 }
+
+.list-item--single-content-row {
+  grid-template-areas: 'icon head     head     head     head     head     head     head     right right right right';
+  align-items: center;
+
+  @media (min-width: 576px) {
+    grid-template-areas: 'icon head     head     head     head     mid mid mid mid right right right';
+  }
+}
diff --git a/ui/components/ui/list-item/list-item.component.js b/ui/components/ui/list-item/list-item.component.js
index e6b3da462..61f4c8a58 100644
--- a/ui/components/ui/list-item/list-item.component.js
+++ b/ui/components/ui/list-item/list-item.component.js
@@ -14,7 +14,11 @@ export default function ListItem({
   className,
   'data-testid': dataTestId,
 }) {
-  const primaryClassName = classnames('list-item', className);
+  const primaryClassName = classnames(
+    'list-item',
+    className,
+    subtitle || children ? '' : 'list-item--single-content-row',
+  );
 
   return (
     <div
diff --git a/ui/components/ui/token-input/token-input.component.test.js b/ui/components/ui/token-input/token-input.component.test.js
index 33712be1d..febb08ba9 100644
--- a/ui/components/ui/token-input/token-input.component.test.js
+++ b/ui/components/ui/token-input/token-input.component.test.js
@@ -141,6 +141,7 @@ describe('TokenInput Component', () => {
             }}
             tokenExchangeRates={{ '0x1': 2 }}
             showFiat
+            currentCurrency="usd"
           />
         </Provider>,
       );
@@ -278,6 +279,7 @@ describe('TokenInput Component', () => {
             }}
             tokenExchangeRates={{ '0x1': 2 }}
             showFiat
+            currentCurrency="usd"
           />
         </Provider>,
       );
diff --git a/ui/components/ui/token-input/token-input.container.js b/ui/components/ui/token-input/token-input.container.js
index a34c2d247..9f964feec 100644
--- a/ui/components/ui/token-input/token-input.container.js
+++ b/ui/components/ui/token-input/token-input.container.js
@@ -1,23 +1,17 @@
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import {
-  getIsMainnet,
-  getTokenExchangeRates,
-  getPreferences,
-} from '../../../selectors';
+import { getTokenExchangeRates, getShouldShowFiat } from '../../../selectors';
 import TokenInput from './token-input.component';
 
 const mapStateToProps = (state) => {
   const {
     metamask: { currentCurrency },
   } = state;
-  const { showFiatInTestnets } = getPreferences(state);
-  const isMainnet = getIsMainnet(state);
 
   return {
     currentCurrency,
     tokenExchangeRates: getTokenExchangeRates(state),
-    hideConversion: !isMainnet && !showFiatInTestnets,
+    hideConversion: !getShouldShowFiat(state),
   };
 };
 
diff --git a/ui/helpers/utils/conversion-util.js b/ui/helpers/utils/conversion-util.js
index 3d61f4410..0b550e67b 100644
--- a/ui/helpers/utils/conversion-util.js
+++ b/ui/helpers/utils/conversion-util.js
@@ -150,8 +150,11 @@ const conversionUtil = (
     conversionRate,
     invertConversionRate,
   },
-) =>
-  converter({
+) => {
+  if (fromCurrency !== toCurrency && !conversionRate) {
+    return 0;
+  }
+  return converter({
     fromCurrency,
     toCurrency,
     fromNumericBase,
@@ -163,6 +166,7 @@ const conversionUtil = (
     invertConversionRate,
     value: value || '0',
   });
+};
 
 const getBigNumber = (value, base) => {
   if (!isValidBase(base)) {
diff --git a/ui/hooks/useCurrencyDisplay.js b/ui/hooks/useCurrencyDisplay.js
index 6b770e38e..a1b67213e 100644
--- a/ui/hooks/useCurrencyDisplay.js
+++ b/ui/hooks/useCurrencyDisplay.js
@@ -10,6 +10,8 @@ import {
   getNativeCurrency,
 } from '../ducks/metamask/metamask';
 
+import { conversionUtil } from '../helpers/utils/conversion-util';
+
 /**
  * Defines the shape of the options parameter for useCurrencyDisplay
  * @typedef {Object} UseCurrencyOptions
@@ -45,24 +47,37 @@ export function useCurrencyDisplay(
   const currentCurrency = useSelector(getCurrentCurrency);
   const nativeCurrency = useSelector(getNativeCurrency);
   const conversionRate = useSelector(getConversionRate);
-
-  const toCurrency = currency || currentCurrency;
+  const isUserPreferredCurrency = currency === currentCurrency;
 
   const value = useMemo(() => {
     if (displayValue) {
       return displayValue;
     }
-    return formatCurrency(
-      getValueFromWeiHex({
-        value: inputValue,
-        fromCurrency: nativeCurrency,
-        toCurrency,
-        conversionRate,
+    if (
+      currency === nativeCurrency ||
+      (!isUserPreferredCurrency && !nativeCurrency)
+    ) {
+      return conversionUtil(inputValue, {
+        fromNumericBase: 'hex',
+        toNumericBase: 'dec',
+        fromDenomination: 'WEI',
         numberOfDecimals: numberOfDecimals || 2,
         toDenomination: denomination,
-      }),
-      toCurrency,
-    );
+      });
+    } else if (isUserPreferredCurrency && conversionRate) {
+      return formatCurrency(
+        getValueFromWeiHex({
+          value: inputValue,
+          fromCurrency: nativeCurrency,
+          toCurrency: currency,
+          conversionRate,
+          numberOfDecimals: numberOfDecimals || 2,
+          toDenomination: denomination,
+        }),
+        currency,
+      );
+    }
+    return null;
   }, [
     inputValue,
     nativeCurrency,
@@ -70,13 +85,14 @@ export function useCurrencyDisplay(
     displayValue,
     numberOfDecimals,
     denomination,
-    toCurrency,
+    currency,
+    isUserPreferredCurrency,
   ]);
 
   let suffix;
 
   if (!opts.hideLabel) {
-    suffix = opts.suffix || toCurrency.toUpperCase();
+    suffix = opts.suffix || currency?.toUpperCase();
   }
 
   return [
diff --git a/ui/hooks/useUserPreferencedCurrency.js b/ui/hooks/useUserPreferencedCurrency.js
index 50b742abf..c41195345 100644
--- a/ui/hooks/useUserPreferencedCurrency.js
+++ b/ui/hooks/useUserPreferencedCurrency.js
@@ -1,5 +1,9 @@
 import { useSelector } from 'react-redux';
-import { getPreferences, getShouldShowFiat } from '../selectors';
+import {
+  getPreferences,
+  getShouldShowFiat,
+  getCurrentCurrency,
+} from '../selectors';
 import { getNativeCurrency } from '../ducks/metamask/metamask';
 
 import { PRIMARY, SECONDARY, ETH } from '../helpers/constants/common';
@@ -35,6 +39,7 @@ export function useUserPreferencedCurrency(type, opts = {}) {
   const nativeCurrency = useSelector(getNativeCurrency);
   const { useNativeCurrencyAsPrimaryCurrency } = useSelector(getPreferences);
   const showFiat = useSelector(getShouldShowFiat);
+  const currentCurrency = useSelector(getCurrentCurrency);
 
   let currency, numberOfDecimals;
   if (
@@ -50,6 +55,7 @@ export function useUserPreferencedCurrency(type, opts = {}) {
     (type === PRIMARY && !useNativeCurrencyAsPrimaryCurrency)
   ) {
     // Display Fiat
+    currency = currentCurrency;
     numberOfDecimals = opts.numberOfDecimals || opts.fiatNumberOfDecimals || 2;
   }
 
diff --git a/ui/hooks/useUserPreferencedCurrency.test.js b/ui/hooks/useUserPreferencedCurrency.test.js
index 5689dc11e..62030b7e3 100644
--- a/ui/hooks/useUserPreferencedCurrency.test.js
+++ b/ui/hooks/useUserPreferencedCurrency.test.js
@@ -1,7 +1,11 @@
 import { renderHook } from '@testing-library/react-hooks';
 import * as reactRedux from 'react-redux';
 import sinon from 'sinon';
-import { getPreferences, getShouldShowFiat } from '../selectors';
+import {
+  getCurrentCurrency,
+  getPreferences,
+  getShouldShowFiat,
+} from '../selectors';
 import { useUserPreferencedCurrency } from './useUserPreferencedCurrency';
 
 const tests = [
@@ -24,12 +28,13 @@ const tests = [
       useNativeCurrencyAsPrimaryCurrency: false,
       nativeCurrency: 'ETH',
       showFiat: true,
+      currentCurrency: 'usd',
     },
     params: {
       type: 'PRIMARY',
     },
     result: {
-      currency: undefined,
+      currency: 'usd',
       numberOfDecimals: 2,
     },
   },
@@ -116,6 +121,8 @@ function getFakeUseSelector(state) {
       return state;
     } else if (selector === getShouldShowFiat) {
       return state.showFiat;
+    } else if (selector === getCurrentCurrency) {
+      return state.currentCurrency;
     }
     return state.nativeCurrency;
   };
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 6af7e49a9..9266be18a 100644
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js
+++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js
@@ -32,10 +32,10 @@ import {
   getKnownMethodData,
   getMetaMaskAccounts,
   getUseNonceField,
-  getPreferences,
   transactionFeeSelector,
   getNoGasPriceFetched,
   getIsEthGasPriceFetched,
+  getShouldShowFiat,
 } from '../../selectors';
 import { getMostRecentOverviewPage } from '../../ducks/history/history';
 import { transactionMatchesNetwork } from '../../../shared/modules/transaction.utils';
@@ -65,7 +65,6 @@ const mapStateToProps = (state, ownProps) => {
     match: { params = {} },
   } = ownProps;
   const { id: paramsTransactionId } = params;
-  const { showFiatInTestnets } = getPreferences(state);
   const isMainnet = getIsMainnet(state);
   const { confirmTransaction, metamask } = state;
   const {
@@ -184,8 +183,8 @@ const mapStateToProps = (state, ownProps) => {
     useNonceField: getUseNonceField(state),
     customNonceValue,
     insufficientBalance,
-    hideSubtitle: !isMainnet && !showFiatInTestnets,
-    hideFiatConversion: !isMainnet && !showFiatInTestnets,
+    hideSubtitle: !getShouldShowFiat(state),
+    hideFiatConversion: !getShouldShowFiat(state),
     metaMetricsSendCount,
     type,
     nextNonce,
diff --git a/ui/selectors/custom-gas.js b/ui/selectors/custom-gas.js
index c53e37c36..0e275764f 100644
--- a/ui/selectors/custom-gas.js
+++ b/ui/selectors/custom-gas.js
@@ -12,7 +12,7 @@ import { GAS_ESTIMATE_TYPES } from '../helpers/constants/common';
 import { getGasPrice } from '../ducks/send';
 import { BASIC_ESTIMATE_STATES, GAS_SOURCE } from '../ducks/gas/gas.duck';
 import { GAS_LIMITS } from '../../shared/constants/gas';
-import { getCurrentCurrency, getIsMainnet, getPreferences } from '.';
+import { getCurrentCurrency, getIsMainnet, getShouldShowFiat } from '.';
 
 const NUMBER_OF_DECIMALS_SM_BTNS = 5;
 
@@ -262,9 +262,7 @@ export function getRenderableBasicEstimateData(state, gasLimit) {
     return [];
   }
 
-  const { showFiatInTestnets } = getPreferences(state);
-  const isMainnet = getIsMainnet(state);
-  const showFiat = isMainnet || Boolean(showFiatInTestnets);
+  const showFiat = getShouldShowFiat(state);
   const { conversionRate } = state.metamask;
   const currentCurrency = getCurrentCurrency(state);
 
@@ -287,10 +285,7 @@ export function getRenderableEstimateDataForSmallButtonsFromGWEI(state) {
   if (getBasicGasEstimateLoadingStatus(state)) {
     return [];
   }
-
-  const { showFiatInTestnets } = getPreferences(state);
-  const isMainnet = getIsMainnet(state);
-  const showFiat = isMainnet || Boolean(showFiatInTestnets);
+  const showFiat = getShouldShowFiat(state);
   const gasLimit =
     state.send.gas.gasLimit || getCustomGasLimit(state) || GAS_LIMITS.SIMPLE;
   const { conversionRate } = state.metamask;
diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js
index a41005a7e..615d7df51 100644
--- a/ui/selectors/selectors.js
+++ b/ui/selectors/selectors.js
@@ -24,7 +24,10 @@ import { TEMPLATED_CONFIRMATION_MESSAGE_TYPES } from '../pages/confirmation/temp
 
 import { toChecksumHexAddress } from '../../shared/modules/hexstring-utils';
 import { DAY } from '../../shared/constants/time';
-import { getNativeCurrency } from '../ducks/metamask/metamask';
+import {
+  getNativeCurrency,
+  getConversionRate,
+} from '../ducks/metamask/metamask';
 
 /**
  * One of the only remaining valid uses of selecting the network subkey of the
@@ -379,8 +382,9 @@ export function getPreferences({ metamask }) {
 
 export function getShouldShowFiat(state) {
   const isMainNet = getIsMainnet(state);
+  const conversionRate = getConversionRate(state);
   const { showFiatInTestnets } = getPreferences(state);
-  return Boolean(isMainNet || showFiatInTestnets);
+  return Boolean((isMainNet || showFiatInTestnets) && conversionRate);
 }
 
 export function getShouldHideZeroBalanceTokens(state) {
diff --git a/yarn.lock b/yarn.lock
index 4861bf74e..430a702bd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2656,6 +2656,39 @@
   resolved "https://registry.yarnpkg.com/@metamask/contract-metadata/-/contract-metadata-1.26.0.tgz#06be4f4dc645da69f6364f75cb2bd47afa642fe6"
   integrity sha512-58A8csapIPoc854n6AI+3jwJcQfh75BzVrl6SAySgJ9fWTa1XItm9Tx/ORaqYrwaR/9JqH4SnkbXtqyFwuUL6w==
 
+"@metamask/controllers@^10.0.0":
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/@metamask/controllers/-/controllers-10.1.0.tgz#ec0a3751fa658966e9818038784ab6b555c95382"
+  integrity sha512-Me0jzI5CIOdfXkpm3eBOEIxDGlgbKQaW1au0GQdVgbW93ZxDueTqLUg9xSGSfGSJ3i+Alfqi/tnGqT/nwa/5CQ==
+  dependencies:
+    "@metamask/contract-metadata" "^1.25.0"
+    "@types/uuid" "^8.3.0"
+    async-mutex "^0.2.6"
+    babel-runtime "^6.26.0"
+    eth-ens-namehash "^2.0.8"
+    eth-json-rpc-infura "^5.1.0"
+    eth-keyring-controller "^6.2.1"
+    eth-method-registry "1.1.0"
+    eth-phishing-detect "^1.1.14"
+    eth-query "^2.1.2"
+    eth-rpc-errors "^4.0.0"
+    eth-sig-util "^3.0.0"
+    ethereumjs-tx "^1.3.7"
+    ethereumjs-util "^7.0.10"
+    ethereumjs-wallet "^1.0.1"
+    ethjs-util "^0.1.6"
+    human-standard-collectible-abi "^1.0.2"
+    human-standard-token-abi "^2.0.0"
+    immer "^8.0.1"
+    isomorphic-fetch "^3.0.0"
+    jsonschema "^1.2.4"
+    nanoid "^3.1.12"
+    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.1"
+
 "@metamask/controllers@^5.0.0":
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@metamask/controllers/-/controllers-5.1.0.tgz#02c1957295bcb6db1655a716d165665d170e7f34"
@@ -2684,39 +2717,6 @@
     web3 "^0.20.7"
     web3-provider-engine "^16.0.1"
 
-"@metamask/controllers@^9.0.0":
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/@metamask/controllers/-/controllers-9.1.0.tgz#4434f22eba2522889224b35aa08bc7b67d7248b7"
-  integrity sha512-jn/F0BNbaPsgEevHaPqk0lGAONKom4re1a4yBC67h7Vu6yu26CRi30SJl4xIh3IW4+ySbPhVLaiXFiXr3fESRQ==
-  dependencies:
-    "@metamask/contract-metadata" "^1.25.0"
-    "@types/uuid" "^8.3.0"
-    async-mutex "^0.2.6"
-    babel-runtime "^6.26.0"
-    eth-ens-namehash "^2.0.8"
-    eth-json-rpc-infura "^5.1.0"
-    eth-keyring-controller "^6.2.1"
-    eth-method-registry "1.1.0"
-    eth-phishing-detect "^1.1.14"
-    eth-query "^2.1.2"
-    eth-rpc-errors "^4.0.0"
-    eth-sig-util "^3.0.0"
-    ethereumjs-tx "^1.3.7"
-    ethereumjs-util "^6.1.0"
-    ethereumjs-wallet "^1.0.1"
-    ethjs-util "^0.1.6"
-    human-standard-collectible-abi "^1.0.2"
-    human-standard-token-abi "^2.0.0"
-    immer "^8.0.1"
-    isomorphic-fetch "^3.0.0"
-    jsonschema "^1.2.4"
-    nanoid "^3.1.12"
-    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.1"
-
 "@metamask/eslint-config-jest@^6.0.0":
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/@metamask/eslint-config-jest/-/eslint-config-jest-6.0.0.tgz#9e10cfbca31236afd7be2058be70365084e540d6"

From 85de65f470c0a2904f08440641098a07f5245910 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Wed, 23 Jun 2021 18:39:06 -0500
Subject: [PATCH 039/141] Prevent propType errors in for TransactionIcon
 statuses (#11316)

---
 ui/components/app/transaction-icon/transaction-icon.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/ui/components/app/transaction-icon/transaction-icon.js b/ui/components/app/transaction-icon/transaction-icon.js
index 6980a89cd..adec0de16 100644
--- a/ui/components/app/transaction-icon/transaction-icon.js
+++ b/ui/components/app/transaction-icon/transaction-icon.js
@@ -34,6 +34,7 @@ const COLOR_MAP = {
   [TRANSACTION_STATUSES.REJECTED]: FAIL_COLOR,
   [TRANSACTION_GROUP_STATUSES.CANCELLED]: FAIL_COLOR,
   [TRANSACTION_STATUSES.DROPPED]: FAIL_COLOR,
+  [TRANSACTION_STATUSES.SUBMITTED]: PENDING_COLOR,
 };
 
 export default function TransactionIcon({ status, category }) {
@@ -63,6 +64,8 @@ TransactionIcon.propTypes = {
     TRANSACTION_STATUSES.REJECTED,
     TRANSACTION_GROUP_STATUSES.CANCELLED,
     TRANSACTION_STATUSES.DROPPED,
+    TRANSACTION_STATUSES.CONFIRMED,
+    TRANSACTION_STATUSES.SUBMITTED,
   ]).isRequired,
   category: PropTypes.oneOf([
     TRANSACTION_GROUP_CATEGORIES.APPROVAL,

From 6fa36cdf5109abb3d5bab217da22dfffcc94c1f6 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Wed, 23 Jun 2021 18:39:44 -0500
Subject: [PATCH 040/141] Provide New UI Components for EIP-1559 Designs
 (#11357)

---
 app/_locales/en/messages.json                 | 12 +++
 development/build/scripts.js                  |  1 +
 .../advanced-gas-controls-row.component.js    | 87 +++++++++++++++++++
 .../advanced-gas-controls.component.js        | 75 ++++++++++++++++
 .../advanced-gas-controls.stories.js          | 15 ++++
 .../app/advanced-gas-controls/index.js        |  1 +
 .../app/advanced-gas-controls/index.scss      | 34 ++++++++
 ui/components/app/app-components.scss         |  5 ++
 .../app/edit-gas-display/edit-gas-display.js  | 45 ++++++++++
 .../edit-gas-display.stories.js               | 36 ++++++++
 ui/components/app/edit-gas-display/index.js   |  1 +
 ui/components/app/edit-gas-display/index.scss | 17 ++++
 .../app/transaction-detail-item/index.js      |  1 +
 .../app/transaction-detail-item/index.scss    | 29 +++++++
 .../transaction-detail-item.component.js      | 71 +++++++++++++++
 .../transaction-detail-item.stories.js        | 32 +++++++
 ui/components/app/transaction-detail/index.js |  1 +
 .../app/transaction-detail/index.scss         | 11 +++
 .../transaction-detail.component.js           | 15 ++++
 .../transaction-detail.stories.js             | 50 +++++++++++
 .../app/transaction-total-banner/index.js     |  1 +
 .../app/transaction-total-banner/index.scss   |  7 ++
 .../transaction-total-banner.component.js     | 45 ++++++++++
 .../transaction-total-banner.stories.js       | 20 +++++
 ui/components/ui/numeric-input/index.js       |  1 +
 .../numeric-input/numeric-input.component.js  | 39 +++++++++
 .../ui/numeric-input/numeric-input.scss       | 28 ++++++
 .../ui/numeric-input/numeric-input.stories.js | 36 ++++++++
 ui/components/ui/radio-group/index.js         |  1 +
 ui/components/ui/radio-group/index.scss       | 49 +++++++++++
 .../ui/radio-group/radio-group.component.js   | 64 ++++++++++++++
 .../ui/radio-group/radio-group.stories.js     | 22 +++++
 ui/components/ui/typography/typography.js     |  6 +-
 ui/components/ui/ui-components.scss           |  2 +
 ui/css/design-system/attributes.scss          |  2 +-
 ui/helpers/constants/design-system.js         |  1 +
 36 files changed, 860 insertions(+), 3 deletions(-)
 create mode 100644 ui/components/app/advanced-gas-controls/advanced-gas-controls-row.component.js
 create mode 100644 ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js
 create mode 100644 ui/components/app/advanced-gas-controls/advanced-gas-controls.stories.js
 create mode 100644 ui/components/app/advanced-gas-controls/index.js
 create mode 100644 ui/components/app/advanced-gas-controls/index.scss
 create mode 100644 ui/components/app/edit-gas-display/edit-gas-display.js
 create mode 100644 ui/components/app/edit-gas-display/edit-gas-display.stories.js
 create mode 100644 ui/components/app/edit-gas-display/index.js
 create mode 100644 ui/components/app/edit-gas-display/index.scss
 create mode 100644 ui/components/app/transaction-detail-item/index.js
 create mode 100644 ui/components/app/transaction-detail-item/index.scss
 create mode 100644 ui/components/app/transaction-detail-item/transaction-detail-item.component.js
 create mode 100644 ui/components/app/transaction-detail-item/transaction-detail-item.stories.js
 create mode 100644 ui/components/app/transaction-detail/index.js
 create mode 100644 ui/components/app/transaction-detail/index.scss
 create mode 100644 ui/components/app/transaction-detail/transaction-detail.component.js
 create mode 100644 ui/components/app/transaction-detail/transaction-detail.stories.js
 create mode 100644 ui/components/app/transaction-total-banner/index.js
 create mode 100644 ui/components/app/transaction-total-banner/index.scss
 create mode 100644 ui/components/app/transaction-total-banner/transaction-total-banner.component.js
 create mode 100644 ui/components/app/transaction-total-banner/transaction-total-banner.stories.js
 create mode 100644 ui/components/ui/numeric-input/index.js
 create mode 100644 ui/components/ui/numeric-input/numeric-input.component.js
 create mode 100644 ui/components/ui/numeric-input/numeric-input.scss
 create mode 100644 ui/components/ui/numeric-input/numeric-input.stories.js
 create mode 100644 ui/components/ui/radio-group/index.js
 create mode 100644 ui/components/ui/radio-group/index.scss
 create mode 100644 ui/components/ui/radio-group/radio-group.component.js
 create mode 100644 ui/components/ui/radio-group/radio-group.stories.js

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 7feb91856..54ede46cd 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -798,6 +798,9 @@
   "gasFee": {
     "message": "Gas Fee"
   },
+  "gasFeeEstimate": {
+    "message": "Estimate"
+  },
   "gasLimit": {
     "message": "Gas Limit"
   },
@@ -1085,6 +1088,12 @@
   "max": {
     "message": "Max"
   },
+  "maxFee": {
+    "message": "Max fee"
+  },
+  "maxPriorityFee": {
+    "message": "Max priority fee"
+  },
   "memo": {
     "message": "memo"
   },
@@ -1478,6 +1487,9 @@
   "recipientAddressPlaceholder": {
     "message": "Search, public address (0x), or ENS"
   },
+  "recommendedGasLabel": {
+    "message": "Recommended"
+  },
   "recoveryPhraseReminderBackupStart": {
     "message": "Start here"
   },
diff --git a/development/build/scripts.js b/development/build/scripts.js
index f9683f57d..7fa0595e1 100644
--- a/development/build/scripts.js
+++ b/development/build/scripts.js
@@ -433,6 +433,7 @@ function getEnvironmentVariables({ devMode, testing }) {
     PUBNUB_SUB_KEY: process.env.PUBNUB_SUB_KEY || '',
     PUBNUB_PUB_KEY: process.env.PUBNUB_PUB_KEY || '',
     CONF: devMode ? metamaskrc : {},
+    SHOW_EIP_1559_UI: process.env.SHOW_EIP_1559_UI === '1',
     SENTRY_DSN: process.env.SENTRY_DSN,
     SENTRY_DSN_DEV: metamaskrc.SENTRY_DSN_DEV,
     INFURA_PROJECT_ID: testing
diff --git a/ui/components/app/advanced-gas-controls/advanced-gas-controls-row.component.js b/ui/components/app/advanced-gas-controls/advanced-gas-controls-row.component.js
new file mode 100644
index 000000000..1ae8919b1
--- /dev/null
+++ b/ui/components/app/advanced-gas-controls/advanced-gas-controls-row.component.js
@@ -0,0 +1,87 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import Typography from '../../ui/typography/typography';
+import {
+  COLORS,
+  TEXT_ALIGN,
+  DISPLAY,
+  TYPOGRAPHY,
+  FONT_WEIGHT,
+} from '../../../helpers/constants/design-system';
+
+import NumericInput from '../../ui/numeric-input/numeric-input.component';
+import InfoTooltip from '../../ui/info-tooltip/info-tooltip';
+
+export default function AdvancedGasControlsRow({
+  titleText,
+  tooltipText,
+  titleDetailText,
+  error,
+  onChange,
+  value,
+}) {
+  return (
+    <div
+      className={classNames('advanced-gas-controls__row', {
+        'advanced-gas-controls__row--error': error,
+      })}
+    >
+      <label>
+        <div className="advanced-gas-controls__row-heading">
+          <div className="advanced-gas-controls__row-heading-title">
+            <Typography
+              tag={TYPOGRAPHY.H6}
+              fontWeight={FONT_WEIGHT.BOLD}
+              variant={TYPOGRAPHY.H6}
+              boxProps={{ display: DISPLAY.INLINE_BLOCK }}
+            >
+              {titleText}
+            </Typography>
+
+            <InfoTooltip position="top" contentText={tooltipText} />
+          </div>
+          {titleDetailText && (
+            <Typography
+              className="advanced-gas-controls__row-heading-detail"
+              align={TEXT_ALIGN.END}
+              color={COLORS.UI4}
+              variant={TYPOGRAPHY.H8}
+            >
+              {titleDetailText}
+            </Typography>
+          )}
+        </div>
+        <NumericInput error={error} onChange={onChange} value={value} />
+        {error && (
+          <Typography
+            color={COLORS.ERROR1}
+            variant={TYPOGRAPHY.H7}
+            className="advanced-gas-controls__row-error"
+          >
+            {error}
+          </Typography>
+        )}
+      </label>
+    </div>
+  );
+}
+
+AdvancedGasControlsRow.propTypes = {
+  titleText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  tooltipText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  titleDetailText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  error: PropTypes.string,
+  onChange: PropTypes.func,
+  value: PropTypes.number,
+};
+
+AdvancedGasControlsRow.defaultProps = {
+  titleText: '',
+  tooltipText: '',
+  titleDetailText: '',
+  error: '',
+  onChange: undefined,
+  value: 0,
+};
diff --git a/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js b/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js
new file mode 100644
index 000000000..7231d67a0
--- /dev/null
+++ b/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js
@@ -0,0 +1,75 @@
+import React, { useContext, useState } from 'react';
+import { I18nContext } from '../../../contexts/i18n';
+import Typography from '../../ui/typography/typography';
+import {
+  FONT_WEIGHT,
+  TYPOGRAPHY,
+  COLORS,
+} from '../../../helpers/constants/design-system';
+import AdvancedGasControlsRow from './advanced-gas-controls-row.component';
+
+export default function AdvancedGasControls() {
+  const t = useContext(I18nContext);
+
+  const [gasLimit, setGasLimit] = useState(0);
+  const [maxPriorityFee, setMaxPriorityFee] = useState(0);
+  const [maxFee, setMaxFee] = useState(0);
+
+  return (
+    <div className="advanced-gas-controls">
+      <AdvancedGasControlsRow
+        titleText={t('gasLimit')}
+        onChange={setGasLimit}
+        tooltipText=""
+        titleDetailText=""
+        value={gasLimit}
+      />
+      <AdvancedGasControlsRow
+        titleText={t('maxPriorityFee')}
+        tooltipText=""
+        onChange={setMaxPriorityFee}
+        value={maxPriorityFee}
+        titleDetailText={
+          <>
+            <Typography
+              tag="span"
+              color={COLORS.UI4}
+              variant={TYPOGRAPHY.H8}
+              fontWeight={FONT_WEIGHT.BOLD}
+            >
+              {t('gasFeeEstimate')}:
+            </Typography>{' '}
+            <Typography
+              tag="span"
+              color={COLORS.UI4}
+              variant={TYPOGRAPHY.H8}
+            ></Typography>
+          </>
+        }
+      />
+      <AdvancedGasControlsRow
+        titleText={t('maxFee')}
+        tooltipText=""
+        onChange={setMaxFee}
+        value={maxFee}
+        titleDetailText={
+          <>
+            <Typography
+              tag="span"
+              color={COLORS.UI4}
+              variant={TYPOGRAPHY.H8}
+              fontWeight={FONT_WEIGHT.BOLD}
+            >
+              {t('gasFeeEstimate')}:
+            </Typography>{' '}
+            <Typography
+              tag="span"
+              color={COLORS.UI4}
+              variant={TYPOGRAPHY.H8}
+            ></Typography>
+          </>
+        }
+      />
+    </div>
+  );
+}
diff --git a/ui/components/app/advanced-gas-controls/advanced-gas-controls.stories.js b/ui/components/app/advanced-gas-controls/advanced-gas-controls.stories.js
new file mode 100644
index 000000000..150380b1a
--- /dev/null
+++ b/ui/components/app/advanced-gas-controls/advanced-gas-controls.stories.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import AdvancedGasControls from '.';
+
+export default {
+  title: 'Advanced Gas Controls',
+};
+
+export const simple = () => {
+  return (
+    <div style={{ width: '600px' }}>
+      <AdvancedGasControls />
+    </div>
+  );
+};
diff --git a/ui/components/app/advanced-gas-controls/index.js b/ui/components/app/advanced-gas-controls/index.js
new file mode 100644
index 000000000..ceedba1ec
--- /dev/null
+++ b/ui/components/app/advanced-gas-controls/index.js
@@ -0,0 +1 @@
+export { default } from './advanced-gas-controls.component';
diff --git a/ui/components/app/advanced-gas-controls/index.scss b/ui/components/app/advanced-gas-controls/index.scss
new file mode 100644
index 000000000..64888d83f
--- /dev/null
+++ b/ui/components/app/advanced-gas-controls/index.scss
@@ -0,0 +1,34 @@
+.advanced-gas-controls {
+  &__row {
+    margin-bottom: 20px;
+  }
+
+  &__row-heading {
+    display: flex;
+  }
+
+  .info-tooltip {
+    display: inline-block;
+  }
+
+  &__row-heading-detail {
+    flex-grow: 1;
+    align-self: center;
+  }
+
+  &__row-error,
+  &__row--error h6 {
+    color: $error-1 !important;
+    padding-top: 6px;
+  }
+
+  h6 {
+    padding-bottom: 6px;
+    margin-inline-end: 6px;
+  }
+
+  i {
+    color: #dadada;
+    font-size: $font-size-h7;
+  }
+}
diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss
index 89f2b9760..8f1e3926c 100644
--- a/ui/components/app/app-components.scss
+++ b/ui/components/app/app-components.scss
@@ -2,6 +2,7 @@
 @import 'account-list-item/index';
 @import 'account-menu/index';
 @import 'add-token-button/index';
+@import 'advanced-gas-controls/index';
 @import 'alerts/alerts';
 @import 'app-header/index';
 @import 'asset-list-item/asset-list-item';
@@ -10,6 +11,7 @@
 @import 'connected-accounts-permissions/index';
 @import 'connected-sites-list/index';
 @import 'connected-status-indicator/index';
+@import 'edit-gas-display/index';
 @import 'gas-customization/gas-modal-page-container/index';
 @import 'gas-customization/gas-price-button-group/index';
 @import 'gas-customization/index';
@@ -32,10 +34,13 @@
 @import 'token-cell/token-cell';
 @import 'transaction-activity-log/index';
 @import 'transaction-breakdown/index';
+@import 'transaction-detail/index';
+@import 'transaction-detail-item/index';
 @import 'transaction-icon/transaction-icon';
 @import 'transaction-list-item-details/index';
 @import 'transaction-list-item/index';
 @import 'transaction-list/index';
 @import 'transaction-status/index';
+@import 'transaction-total-banner/index';
 @import 'wallet-overview/index';
 @import 'whats-new-popup/index';
diff --git a/ui/components/app/edit-gas-display/edit-gas-display.js b/ui/components/app/edit-gas-display/edit-gas-display.js
new file mode 100644
index 000000000..4911633e2
--- /dev/null
+++ b/ui/components/app/edit-gas-display/edit-gas-display.js
@@ -0,0 +1,45 @@
+import React, { useState, useContext } from 'react';
+
+import TransactionTotalBanner from '../transaction-total-banner/transaction-total-banner.component';
+import RadioGroup from '../../ui/radio-group/radio-group.component';
+
+import AdvancedGasControls from '../advanced-gas-controls/advanced-gas-controls.component';
+
+import { I18nContext } from '../../../contexts/i18n';
+
+export default function EditGasDisplay() {
+  const t = useContext(I18nContext);
+  const [showAdvancedForm, setShowAdvancedForm] = useState(false);
+
+  return (
+    <div className="edit-gas-display">
+      <TransactionTotalBanner
+        total="9.99"
+        detail="Up to $17.79 (0.01234 ETH)"
+        timing="Likely in < 30 seconds
+"
+      />
+      <RadioGroup
+        name="gas-recommendation"
+        options={[
+          { value: 'low', label: 'Low', recommended: false },
+          { value: 'medium', label: 'Medium', recommended: false },
+          { value: 'high', label: 'High', recommended: true },
+        ]}
+        selectedValue="high"
+      />
+      <button
+        className="edit-gas-display__advanced-button"
+        onClick={() => setShowAdvancedForm(!showAdvancedForm)}
+      >
+        {t('advancedOptions')}{' '}
+        {showAdvancedForm ? (
+          <i className="fa fa-caret-up"></i>
+        ) : (
+          <i className="fa fa-caret-down"></i>
+        )}
+      </button>
+      {showAdvancedForm && <AdvancedGasControls />}
+    </div>
+  );
+}
diff --git a/ui/components/app/edit-gas-display/edit-gas-display.stories.js b/ui/components/app/edit-gas-display/edit-gas-display.stories.js
new file mode 100644
index 000000000..a3f85ba5a
--- /dev/null
+++ b/ui/components/app/edit-gas-display/edit-gas-display.stories.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import PopoverPortal from '../../ui/popover/popover.component';
+import Button from '../../ui/button';
+import EditGasDisplay from '.';
+
+export default {
+  title: 'Edit Gas Display',
+};
+
+export const basic = () => {
+  return (
+    <div style={{ width: '600px' }}>
+      <EditGasDisplay />
+    </div>
+  );
+};
+
+export const insidePopover = () => {
+  return (
+    <div style={{ width: '600px' }}>
+      <PopoverPortal
+        title="Edit gas fee"
+        onClose={() => console.log('Closing!')}
+        footer={
+          <>
+            <Button type="primary">Save</Button>
+          </>
+        }
+      >
+        <div style={{ padding: '20px' }}>
+          <EditGasDisplay />
+        </div>
+      </PopoverPortal>
+    </div>
+  );
+};
diff --git a/ui/components/app/edit-gas-display/index.js b/ui/components/app/edit-gas-display/index.js
new file mode 100644
index 000000000..05c4488a9
--- /dev/null
+++ b/ui/components/app/edit-gas-display/index.js
@@ -0,0 +1 @@
+export { default } from './edit-gas-display';
diff --git a/ui/components/app/edit-gas-display/index.scss b/ui/components/app/edit-gas-display/index.scss
new file mode 100644
index 000000000..f8422eee8
--- /dev/null
+++ b/ui/components/app/edit-gas-display/index.scss
@@ -0,0 +1,17 @@
+.edit-gas-display {
+  .radio-group {
+    margin: 20px auto;
+  }
+
+  &__advanced-button {
+    display: block;
+    margin: 0 auto;
+    background: transparent;
+    color: $primary-1;
+    font-weight: bold;
+  }
+
+  .advanced-gas-controls {
+    margin-top: 20px;
+  }
+}
diff --git a/ui/components/app/transaction-detail-item/index.js b/ui/components/app/transaction-detail-item/index.js
new file mode 100644
index 000000000..e37141eed
--- /dev/null
+++ b/ui/components/app/transaction-detail-item/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-detail-item.component';
diff --git a/ui/components/app/transaction-detail-item/index.scss b/ui/components/app/transaction-detail-item/index.scss
new file mode 100644
index 000000000..7359d694c
--- /dev/null
+++ b/ui/components/app/transaction-detail-item/index.scss
@@ -0,0 +1,29 @@
+.transaction-detail-item {
+  color: $ui-4;
+
+  &__row {
+    display: flex;
+  }
+
+  &__title {
+    flex-grow: 1;
+  }
+
+  .info-tooltip {
+    display: inline-block;
+    margin-inline-start: 4px;
+  }
+
+  &__detail-text {
+    margin-inline-end: 20px !important;
+  }
+
+  &__total {
+    font-weight: bold;
+    color: $ui-black;
+  }
+
+  &__subtitle {
+    flex-grow: 1;
+  }
+}
diff --git a/ui/components/app/transaction-detail-item/transaction-detail-item.component.js b/ui/components/app/transaction-detail-item/transaction-detail-item.component.js
new file mode 100644
index 000000000..e08a912ab
--- /dev/null
+++ b/ui/components/app/transaction-detail-item/transaction-detail-item.component.js
@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Typography from '../../ui/typography/typography';
+import {
+  COLORS,
+  FONT_WEIGHT,
+  TYPOGRAPHY,
+} from '../../../helpers/constants/design-system';
+
+export default function TransactionDetailItem({
+  detailTitle,
+  detailText,
+  detailTotal,
+  subTitle,
+  subText,
+}) {
+  return (
+    <div className="transaction-detail-item">
+      <div className="transaction-detail-item__row">
+        <Typography
+          color={COLORS.BLACK}
+          fontWeight={FONT_WEIGHT.BOLD}
+          variant={TYPOGRAPHY.H6}
+          className="transaction-detail-item__title"
+        >
+          {detailTitle}
+        </Typography>
+        {detailText && (
+          <Typography className="transaction-detail-item__detail-text">
+            {detailText}
+          </Typography>
+        )}
+        <Typography
+          color={COLORS.BLACK}
+          fontWeight={FONT_WEIGHT.BOLD}
+          className="transaction-detail-item__total"
+        >
+          {detailTotal}
+        </Typography>
+      </div>
+      <div className="transaction-detail-item__row">
+        {subTitle && (
+          <Typography
+            variant={TYPOGRAPHY.H7}
+            className="transaction-detail-item__subtitle"
+          >
+            {subTitle}
+          </Typography>
+        )}
+        <Typography variant={TYPOGRAPHY.H7}>{subText}</Typography>
+      </div>
+    </div>
+  );
+}
+
+TransactionDetailItem.propTypes = {
+  detailTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  detailText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  detailTotal: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  subTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  subText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+};
+
+TransactionDetailItem.defaultProps = {
+  detailTitle: '',
+  detailText: '',
+  detailTotal: '',
+  subTitle: '',
+  subText: '',
+};
diff --git a/ui/components/app/transaction-detail-item/transaction-detail-item.stories.js b/ui/components/app/transaction-detail-item/transaction-detail-item.stories.js
new file mode 100644
index 000000000..a7d81e70a
--- /dev/null
+++ b/ui/components/app/transaction-detail-item/transaction-detail-item.stories.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import InfoTooltip from '../../ui/info-tooltip/info-tooltip';
+import TransactionDetailItem from '.';
+
+export default {
+  title: 'Transaction Detail Item',
+};
+
+export const basic = () => {
+  return (
+    <div style={{ width: '400px' }}>
+      <TransactionDetailItem
+        detailTitle={
+          <>
+            <strong>Estimated gas fee</strong>
+            <InfoTooltip contentText="This is the tooltip text" position="top">
+              <i className="fa fa-info-circle" />
+            </InfoTooltip>
+          </>
+        }
+        detailText="16565.30"
+        detailTotal="0.0089 ETH"
+        subTitle="Very likely in < 15 seconds"
+        subText={
+          <>
+            From <strong>$16565 - $19000</strong>
+          </>
+        }
+      />
+    </div>
+  );
+};
diff --git a/ui/components/app/transaction-detail/index.js b/ui/components/app/transaction-detail/index.js
new file mode 100644
index 000000000..7ee797f13
--- /dev/null
+++ b/ui/components/app/transaction-detail/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-detail.component';
diff --git a/ui/components/app/transaction-detail/index.scss b/ui/components/app/transaction-detail/index.scss
new file mode 100644
index 000000000..61ddb3479
--- /dev/null
+++ b/ui/components/app/transaction-detail/index.scss
@@ -0,0 +1,11 @@
+.transaction-detail {
+  .transaction-detail-item {
+    padding: 20px 0;
+    border-bottom: 1px solid $ui-3;
+
+    &:last-child {
+      padding-bottom: 0;
+      border-bottom: 0;
+    }
+  }
+}
diff --git a/ui/components/app/transaction-detail/transaction-detail.component.js b/ui/components/app/transaction-detail/transaction-detail.component.js
new file mode 100644
index 000000000..6079f741c
--- /dev/null
+++ b/ui/components/app/transaction-detail/transaction-detail.component.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import TransactionDetailItem from '../transaction-detail-item/transaction-detail-item.component';
+
+export default function TransactionDetail({ rows }) {
+  return <div className="transaction-detail">{rows}</div>;
+}
+
+TransactionDetail.propTypes = {
+  rows: PropTypes.arrayOf(TransactionDetailItem),
+};
+
+TransactionDetail.defaultProps = {
+  rows: [],
+};
diff --git a/ui/components/app/transaction-detail/transaction-detail.stories.js b/ui/components/app/transaction-detail/transaction-detail.stories.js
new file mode 100644
index 000000000..1cfc6e8fe
--- /dev/null
+++ b/ui/components/app/transaction-detail/transaction-detail.stories.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import InfoTooltip from '../../ui/info-tooltip/info-tooltip';
+import TransactionDetailItem from '../transaction-detail-item/transaction-detail-item.component';
+import TransactionDetail from '.';
+
+export default {
+  title: 'Transaction Detail',
+};
+
+const rows = [
+  <TransactionDetailItem
+    key="line-1"
+    detailTitle={
+      <>
+        Estimated gas fee
+        <InfoTooltip contentText="This is the tooltip text" position="top">
+          <i className="fa fa-info-circle" />
+        </InfoTooltip>
+      </>
+    }
+    detailText="0.00896 ETH"
+    detailTotal="$15.73"
+    subTitle="Very likely in < 15 seconds"
+    subText={
+      <>
+        From <strong>$15.73 - $19.81</strong>
+      </>
+    }
+  />,
+  <TransactionDetailItem
+    key="line-2"
+    detailTitle="Total"
+    detailText=".0312 ETH"
+    detailTotal="$15.77"
+    subTitle="Amount + gas fee"
+    subText={
+      <>
+        Up to <strong>$19.85</strong>
+      </>
+    }
+  />,
+];
+
+export const basic = () => {
+  return (
+    <div style={{ width: '400px' }}>
+      <TransactionDetail rows={rows} />
+    </div>
+  );
+};
diff --git a/ui/components/app/transaction-total-banner/index.js b/ui/components/app/transaction-total-banner/index.js
new file mode 100644
index 000000000..42ccf75f4
--- /dev/null
+++ b/ui/components/app/transaction-total-banner/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-total-banner.component';
diff --git a/ui/components/app/transaction-total-banner/index.scss b/ui/components/app/transaction-total-banner/index.scss
new file mode 100644
index 000000000..42979624c
--- /dev/null
+++ b/ui/components/app/transaction-total-banner/index.scss
@@ -0,0 +1,7 @@
+.transaction-total-banner {
+  text-align: center;
+
+  &__detail {
+    padding-bottom: 4px;
+  }
+}
diff --git a/ui/components/app/transaction-total-banner/transaction-total-banner.component.js b/ui/components/app/transaction-total-banner/transaction-total-banner.component.js
new file mode 100644
index 000000000..40731186a
--- /dev/null
+++ b/ui/components/app/transaction-total-banner/transaction-total-banner.component.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Typography from '../../ui/typography/typography';
+import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system';
+
+export default function TransactionTotalBanner({ total, detail, timing }) {
+  return (
+    <div className="transaction-total-banner">
+      <Typography color={COLORS.BLACK} variant={TYPOGRAPHY.H1}>
+        {total}
+      </Typography>
+      {detail && (
+        <Typography
+          color={COLORS.BLACK}
+          variant={TYPOGRAPHY.H6}
+          className="transaction-total-banner__detail"
+        >
+          {detail}
+        </Typography>
+      )}
+      {timing && (
+        <Typography
+          color={COLORS.UI4}
+          variant={TYPOGRAPHY.H7}
+          className="transaction-total-banner__timing"
+        >
+          {timing}
+        </Typography>
+      )}
+    </div>
+  );
+}
+
+TransactionTotalBanner.propTypes = {
+  total: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  detail: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  timing: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+};
+
+TransactionTotalBanner.defaultProps = {
+  total: '',
+  detail: '',
+  timing: '',
+};
diff --git a/ui/components/app/transaction-total-banner/transaction-total-banner.stories.js b/ui/components/app/transaction-total-banner/transaction-total-banner.stories.js
new file mode 100644
index 000000000..46838ae37
--- /dev/null
+++ b/ui/components/app/transaction-total-banner/transaction-total-banner.stories.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import TransactionTotalBanner from '.';
+
+export default {
+  title: 'Transaction Total Banner',
+};
+
+export const basic = () => {
+  return (
+    <TransactionTotalBanner
+      total="~18.73"
+      detail={
+        <>
+          Up to <strong>$19.81</strong> (0.01234 ETH)
+        </>
+      }
+      timing="Very likely in < 15 seconds"
+    />
+  );
+};
diff --git a/ui/components/ui/numeric-input/index.js b/ui/components/ui/numeric-input/index.js
new file mode 100644
index 000000000..338640323
--- /dev/null
+++ b/ui/components/ui/numeric-input/index.js
@@ -0,0 +1 @@
+export { default } from './numeric-input.component';
diff --git a/ui/components/ui/numeric-input/numeric-input.component.js b/ui/components/ui/numeric-input/numeric-input.component.js
new file mode 100644
index 000000000..9b4d2026f
--- /dev/null
+++ b/ui/components/ui/numeric-input/numeric-input.component.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import Typography from '../typography/typography';
+import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system';
+
+export default function NumericInput({ detailText, value, onChange, error }) {
+  return (
+    <div
+      className={classNames('numeric-input', { 'numeric-input--error': error })}
+    >
+      <input
+        type="number"
+        value={value}
+        onChange={(e) => onChange?.(Number(e.target.value))}
+        min="0"
+      />
+      {detailText && (
+        <Typography color={COLORS.UI4} variant={TYPOGRAPHY.H7} tag="span">
+          {detailText}
+        </Typography>
+      )}
+    </div>
+  );
+}
+
+NumericInput.propTypes = {
+  value: PropTypes.number,
+  detailText: PropTypes.string,
+  onChange: PropTypes.func,
+  error: PropTypes.string,
+};
+
+NumericInput.defaultProps = {
+  value: 0,
+  detailText: '',
+  onChange: undefined,
+  error: '',
+};
diff --git a/ui/components/ui/numeric-input/numeric-input.scss b/ui/components/ui/numeric-input/numeric-input.scss
new file mode 100644
index 000000000..f3ac6877d
--- /dev/null
+++ b/ui/components/ui/numeric-input/numeric-input.scss
@@ -0,0 +1,28 @@
+.numeric-input {
+  border: 1px solid $ui-3;
+  position: relative;
+  border-radius: 6px;
+
+  &--error {
+    border-color: $error-1;
+  }
+
+  input {
+    width: 100%;
+    border: 0;
+    padding: 10px;
+    border-radius: 6px;
+
+    /* ensures the increment/decrement arrows always display */
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+      opacity: 1;
+    }
+  }
+
+  span {
+    position: absolute;
+    right: 40px;
+    top: 7px;
+  }
+}
diff --git a/ui/components/ui/numeric-input/numeric-input.stories.js b/ui/components/ui/numeric-input/numeric-input.stories.js
new file mode 100644
index 000000000..53576c2d6
--- /dev/null
+++ b/ui/components/ui/numeric-input/numeric-input.stories.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import NumericInput from '.';
+
+export default {
+  title: 'NumericInput',
+};
+
+const onChange = (e) => console.log('changed value: ', e.target.value);
+
+export const numericInput = () => {
+  return (
+    <div style={{ width: '600px' }}>
+      <NumericInput onChange={onChange} />
+    </div>
+  );
+};
+
+export const numericInputWithDetail = () => {
+  return (
+    <div style={{ width: '600px' }}>
+      <NumericInput detailText="= $0.06" onChange={onChange} />
+    </div>
+  );
+};
+
+export const numericInputWithError = () => {
+  return (
+    <div style={{ width: '600px' }}>
+      <NumericInput
+        detailText="= $0.06"
+        error="This number isn't great"
+        onChange={onChange}
+      />
+    </div>
+  );
+};
diff --git a/ui/components/ui/radio-group/index.js b/ui/components/ui/radio-group/index.js
new file mode 100644
index 000000000..64f0fbf15
--- /dev/null
+++ b/ui/components/ui/radio-group/index.js
@@ -0,0 +1 @@
+export { default } from './radio-group.component';
diff --git a/ui/components/ui/radio-group/index.scss b/ui/components/ui/radio-group/index.scss
new file mode 100644
index 000000000..7cc8e9534
--- /dev/null
+++ b/ui/components/ui/radio-group/index.scss
@@ -0,0 +1,49 @@
+.radio-group {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 100px;
+  width: 300px;
+
+  label {
+    cursor: pointer;
+  }
+
+  &__column-recommended {
+    height: 20px;
+  }
+
+  &__column-line {
+    width: 1px;
+    height: 5px;
+    background-color: $ui-2;
+    margin: 0 auto;
+  }
+
+  &__column-horizontal-line {
+    height: 1px;
+    background-color: $ui-2;
+    width: 100%;
+  }
+
+  &__column:first-child &__column-horizontal-line {
+    width: 50px;
+    margin-left: 50px;
+  }
+
+  &__column:last-child &__column-horizontal-line {
+    width: 51px;
+  }
+
+  &__column-radio {
+    margin-inline-end: 1px;
+  }
+
+  &__column-radio,
+  &__column-label {
+    text-align: center;
+  }
+
+  &__column-label {
+    padding-top: 6px;
+  }
+}
diff --git a/ui/components/ui/radio-group/radio-group.component.js b/ui/components/ui/radio-group/radio-group.component.js
new file mode 100644
index 000000000..8665c5803
--- /dev/null
+++ b/ui/components/ui/radio-group/radio-group.component.js
@@ -0,0 +1,64 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { I18nContext } from '../../../contexts/i18n';
+import Typography from '../typography/typography';
+import {
+  COLORS,
+  FONT_WEIGHT,
+  TYPOGRAPHY,
+} from '../../../helpers/constants/design-system';
+
+export default function RadioGroup({ options, name, selectedValue, onChange }) {
+  const t = useContext(I18nContext);
+
+  return (
+    <div className="radio-group">
+      {options.map((option) => {
+        return (
+          <div className="radio-group__column" key={`${name}-${option.value}`}>
+            <label>
+              <Typography
+                color={COLORS.SUCCESS3}
+                className="radio-group__column-recommended"
+                variant={TYPOGRAPHY.H7}
+              >
+                {option.recommended ? t('recommendedGasLabel') : ''}
+              </Typography>
+
+              <div className="radio-group__column-radio">
+                <input
+                  type="radio"
+                  name={name}
+                  defaultChecked={option.value === selectedValue}
+                  value={option.value}
+                  onChange={() => onChange?.(option.value)}
+                />
+              </div>
+              <div className="radio-group__column-line"></div>
+              <div className="radio-group__column-horizontal-line"></div>
+              <Typography
+                color={COLORS.UI4}
+                fontWeight={FONT_WEIGHT.BOLD}
+                variant={TYPOGRAPHY.H7}
+                className="radio-group__column-label"
+              >
+                {option.label}
+              </Typography>
+            </label>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+RadioGroup.propTypes = {
+  options: PropTypes.array,
+  selectedValue: PropTypes.string,
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+};
+
+RadioGroup.defaultProps = {
+  options: [],
+};
diff --git a/ui/components/ui/radio-group/radio-group.stories.js b/ui/components/ui/radio-group/radio-group.stories.js
new file mode 100644
index 000000000..1d0aef252
--- /dev/null
+++ b/ui/components/ui/radio-group/radio-group.stories.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import RadioGroup from '.';
+
+export default {
+  title: 'RadioGroup',
+};
+
+export const radioGroup = () => {
+  return (
+    <div className="radio-group" style={{ minWidth: '600px' }}>
+      <RadioGroup
+        name="gas-recommendation"
+        options={[
+          { value: 'low', label: 'Low', recommended: false },
+          { value: 'medium', label: 'Medium', recommended: false },
+          { value: 'high', label: 'High', recommended: true },
+        ]}
+        selectedValue="high"
+      />
+    </div>
+  );
+};
diff --git a/ui/components/ui/typography/typography.js b/ui/components/ui/typography/typography.js
index b18b53deb..ab3203ddd 100644
--- a/ui/components/ui/typography/typography.js
+++ b/ui/components/ui/typography/typography.js
@@ -25,9 +25,11 @@ export default function Typography({
     'typography',
     className,
     `typography--${variant}`,
-    `typography--align-${align}`,
-    `typography--color-${color}`,
     `typography--weight-${fontWeight}`,
+    {
+      [`typography--align-${align}`]: Boolean(align),
+      [`typography--color-${color}`]: Boolean(color),
+    },
   );
 
   let Tag = tag ?? variant;
diff --git a/ui/components/ui/ui-components.scss b/ui/components/ui/ui-components.scss
index 96d0c684a..9f4616726 100644
--- a/ui/components/ui/ui-components.scss
+++ b/ui/components/ui/ui-components.scss
@@ -33,10 +33,12 @@
 @import 'loading-indicator/loading-indicator';
 @import 'loading-screen/index';
 @import 'menu/menu';
+@import 'numeric-input/numeric-input';
 @import 'page-container/index';
 @import 'popover/index';
 @import 'pulse-loader/index';
 @import 'qr-code/index';
+@import 'radio-group/index';
 @import 'readonly-input/index';
 @import 'sender-to-recipient/index';
 @import 'snackbar/index';
diff --git a/ui/css/design-system/attributes.scss b/ui/css/design-system/attributes.scss
index 2176cddb9..72fdcb51f 100644
--- a/ui/css/design-system/attributes.scss
+++ b/ui/css/design-system/attributes.scss
@@ -68,5 +68,5 @@ $sizes-strings:
 $border-style: solid, double, none, dashed, dotted;
 $directions: top, right, bottom, left;
 $display: block, grid, flex, inline-block, inline-grid, inline-flex, list-item;
-$text-align: left, right, center, justify;
+$text-align: left, right, center, justify, end;
 $font-weight: bold, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900;
diff --git a/ui/helpers/constants/design-system.js b/ui/helpers/constants/design-system.js
index 070ea2748..38e85f779 100644
--- a/ui/helpers/constants/design-system.js
+++ b/ui/helpers/constants/design-system.js
@@ -139,6 +139,7 @@ export const TEXT_ALIGN = {
   CENTER: 'center',
   RIGHT: 'right',
   JUSTIFY: 'justify',
+  END: 'end',
 };
 
 export const FONT_WEIGHT = {

From a6e16f458eb68373402d9348f372701ee7a86741 Mon Sep 17 00:00:00 2001
From: Alex Donesky <adonesky@gmail.com>
Date: Wed, 23 Jun 2021 18:50:24 -0500
Subject: [PATCH 041/141] Adding edit navigation button flow back to send token
 flow (#11335)

---
 .../confirm-transaction.duck.js               | 31 +++++++++++++++++--
 .../confirm-transaction.duck.test.js          |  5 +--
 ...onfirm-token-transaction-base.component.js |  3 ++
 ui/selectors/confirm-transaction.js           |  2 +-
 ui/selectors/confirm-transaction.test.js      |  4 +--
 5 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/ui/ducks/confirm-transaction/confirm-transaction.duck.js b/ui/ducks/confirm-transaction/confirm-transaction.duck.js
index b0dfd5636..96baf311b 100644
--- a/ui/ducks/confirm-transaction/confirm-transaction.duck.js
+++ b/ui/ducks/confirm-transaction/confirm-transaction.duck.js
@@ -3,7 +3,7 @@ import {
   currentCurrencySelector,
   unconfirmedTransactionsHashSelector,
 } from '../../selectors';
-import { getNativeCurrency } from '../metamask/metamask';
+import { getNativeCurrency, getTokens } from '../metamask/metamask';
 
 import {
   getValueFromWeiHex,
@@ -25,6 +25,7 @@ const createActionType = (action) => `metamask/confirm-transaction/${action}`;
 
 const UPDATE_TX_DATA = createActionType('UPDATE_TX_DATA');
 const UPDATE_TOKEN_DATA = createActionType('UPDATE_TOKEN_DATA');
+const UPDATE_TOKEN_PROPS = createActionType('UPDATE_TOKEN_PROPS');
 const CLEAR_CONFIRM_TRANSACTION = createActionType('CLEAR_CONFIRM_TRANSACTION');
 const UPDATE_TRANSACTION_AMOUNTS = createActionType(
   'UPDATE_TRANSACTION_AMOUNTS',
@@ -37,6 +38,7 @@ const UPDATE_NONCE = createActionType('UPDATE_NONCE');
 const initState = {
   txData: {},
   tokenData: {},
+  tokenProps: {},
   fiatTransactionAmount: '',
   fiatTransactionFee: '',
   fiatTransactionTotal: '',
@@ -66,6 +68,13 @@ export default function reducer(state = initState, action = {}) {
           ...action.payload,
         },
       };
+    case UPDATE_TOKEN_PROPS:
+      return {
+        ...state,
+        tokenProps: {
+          ...action.payload,
+        },
+      };
     case UPDATE_TRANSACTION_AMOUNTS: {
       const {
         fiatTransactionAmount,
@@ -136,6 +145,13 @@ export function updateTokenData(tokenData) {
   };
 }
 
+export function updateTokenProps(tokenProps) {
+  return {
+    type: UPDATE_TOKEN_PROPS,
+    payload: tokenProps,
+  };
+}
+
 export function updateTransactionAmounts(amounts) {
   return {
     type: UPDATE_TRANSACTION_AMOUNTS,
@@ -296,9 +312,20 @@ export function setTransactionToConfirm(transactionId) {
       const { txParams } = transaction;
 
       if (txParams.data) {
-        const { data } = txParams;
+        const { to: tokenAddress, data } = txParams;
 
         const tokenData = getTokenData(data);
+        const tokens = getTokens(state);
+        const currentToken = tokens?.find(
+          ({ address }) => tokenAddress === address,
+        );
+
+        dispatch(
+          updateTokenProps({
+            decimals: currentToken?.decimals,
+            symbol: currentToken?.symbol,
+          }),
+        );
         dispatch(updateTokenData(tokenData));
       }
 
diff --git a/ui/ducks/confirm-transaction/confirm-transaction.duck.test.js b/ui/ducks/confirm-transaction/confirm-transaction.duck.test.js
index 8df65c35a..f4ef16303 100644
--- a/ui/ducks/confirm-transaction/confirm-transaction.duck.test.js
+++ b/ui/ducks/confirm-transaction/confirm-transaction.duck.test.js
@@ -12,6 +12,7 @@ import ConfirmTransactionReducer, * as actions from './confirm-transaction.duck'
 const initialState = {
   txData: {},
   tokenData: {},
+  tokenProps: {},
   fiatTransactionAmount: '',
   fiatTransactionFee: '',
   fiatTransactionTotal: '',
@@ -307,8 +308,8 @@ describe('Confirm Transaction Duck', () => {
           nonce: '',
           tokenData: {},
           tokenProps: {
-            tokenDecimals: '',
-            tokenSymbol: '',
+            decimals: '',
+            symbol: '',
           },
           txData: {
             ...txData,
diff --git a/ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js b/ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js
index b15a5f99e..557b6c237 100644
--- a/ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js
+++ b/ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js
@@ -23,6 +23,7 @@ export default function ConfirmTokenTransactionBase({
   contractExchangeRate,
   conversionRate,
   currentCurrency,
+  onEdit,
 }) {
   const t = useContext(I18nContext);
 
@@ -69,6 +70,7 @@ export default function ConfirmTokenTransactionBase({
   return (
     <ConfirmTransactionBase
       toAddress={toAddress}
+      onEdit={onEdit}
       identiconAddress={tokenAddress}
       title={tokensText}
       subtitleComponent={
@@ -105,4 +107,5 @@ ConfirmTokenTransactionBase.propTypes = {
   contractExchangeRate: PropTypes.number,
   conversionRate: PropTypes.number,
   currentCurrency: PropTypes.string,
+  onEdit: PropTypes.func,
 };
diff --git a/ui/selectors/confirm-transaction.js b/ui/selectors/confirm-transaction.js
index 80de94e0f..c721e12b1 100644
--- a/ui/selectors/confirm-transaction.js
+++ b/ui/selectors/confirm-transaction.js
@@ -159,7 +159,7 @@ const contractExchangeRatesSelector = (state) =>
 
 const tokenDecimalsSelector = createSelector(
   tokenPropsSelector,
-  (tokenProps) => tokenProps && tokenProps.tokenDecimals,
+  (tokenProps) => tokenProps && tokenProps.decimals,
 );
 
 const tokenDataArgsSelector = createSelector(
diff --git a/ui/selectors/confirm-transaction.test.js b/ui/selectors/confirm-transaction.test.js
index 9a899a523..8ea9b28dd 100644
--- a/ui/selectors/confirm-transaction.test.js
+++ b/ui/selectors/confirm-transaction.test.js
@@ -58,8 +58,8 @@ describe('Confirm Transaction Selector', () => {
           }),
         },
         tokenProps: {
-          tokenDecimals: '2',
-          tokenSymbol: 'META',
+          decimals: '2',
+          symbol: 'META',
         },
       },
     };

From 171320eaa97ca12575168d45b9bbcbb6e01f71ee Mon Sep 17 00:00:00 2001
From: PeterYinusa <53189696+PeterYinusa@users.noreply.github.com>
Date: Thu, 24 Jun 2021 15:19:31 +0100
Subject: [PATCH 042/141] account tests using fixtures (#11374)

---
 test/e2e/metamask-ui.spec.js        | 44 -----------------------------
 test/e2e/tests/add-account.spec.js  | 39 +++++++++++++++++++++++++
 test/e2e/tests/lock-account.spec.js | 42 +++++++++++++++++++++++++++
 3 files changed, 81 insertions(+), 44 deletions(-)
 create mode 100644 test/e2e/tests/add-account.spec.js
 create mode 100644 test/e2e/tests/lock-account.spec.js

diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js
index 63ae22bdd..63b4c8c02 100644
--- a/test/e2e/metamask-ui.spec.js
+++ b/test/e2e/metamask-ui.spec.js
@@ -206,50 +206,6 @@ describe('MetaMask', function () {
     });
   });
 
-  describe('Lock an unlock', function () {
-    it('logs out of the account', async function () {
-      await driver.clickElement('.account-menu__icon');
-      await driver.delay(regularDelayMs);
-
-      const lockButton = await driver.findClickableElement(
-        '.account-menu__lock-button',
-      );
-      assert.equal(await lockButton.getText(), 'Lock');
-      await lockButton.click();
-      await driver.delay(regularDelayMs);
-    });
-
-    it('accepts the account password after lock', async function () {
-      await driver.fill('#password', 'correct horse battery staple');
-      await driver.press('#password', driver.Key.ENTER);
-      await driver.delay(largeDelayMs * 4);
-    });
-  });
-
-  describe('Add account', function () {
-    it('choose Create Account from the account menu', async function () {
-      await driver.clickElement('.account-menu__icon');
-      await driver.delay(regularDelayMs);
-
-      await driver.clickElement({ text: 'Create Account', tag: 'div' });
-      await driver.delay(regularDelayMs);
-    });
-
-    it('set account name', async function () {
-      await driver.fill('.new-account-create-form input', '2nd account');
-      await driver.delay(regularDelayMs);
-
-      await driver.clickElement({ text: 'Create', tag: 'button' });
-      await driver.delay(largeDelayMs);
-    });
-
-    it('should display correct account name', async function () {
-      const accountName = await driver.findElement('.selected-account__name');
-      assert.equal(await accountName.getText(), '2nd account');
-      await driver.delay(regularDelayMs);
-    });
-  });
-
   describe('Import Secret Recovery Phrase', function () {
     it('logs out of the vault', async function () {
       await driver.clickElement('.account-menu__icon');
diff --git a/test/e2e/tests/add-account.spec.js b/test/e2e/tests/add-account.spec.js
new file mode 100644
index 000000000..910402e43
--- /dev/null
+++ b/test/e2e/tests/add-account.spec.js
@@ -0,0 +1,39 @@
+const { strict: assert } = require('assert');
+const { withFixtures } = require('../helpers');
+
+describe('Add account', function () {
+  const ganacheOptions = {
+    accounts: [
+      {
+        secretKey:
+          '0x7C9529A67102755B7E6102D6D950AC5D5863C98713805CEC576B945B15B71EAC',
+        balance: 25000000000000000000,
+      },
+    ],
+  };
+  it('should display correct new account name after create', async function () {
+    await withFixtures(
+      {
+        fixtures: 'imported-account',
+        ganacheOptions,
+        title: this.test.title,
+      },
+      async ({ driver }) => {
+        await driver.navigate();
+        await driver.fill('#password', 'correct horse battery staple');
+        await driver.press('#password', driver.Key.ENTER);
+
+        await driver.clickElement('.account-menu__icon');
+        await driver.clickElement({ text: 'Create Account', tag: 'div' });
+        await driver.fill('.new-account-create-form input', '2nd account');
+        await driver.clickElement({ text: 'Create', tag: 'button' });
+
+        const accountName = await driver.waitForSelector({
+          css: '.selected-account__name',
+          text: '2nd',
+        });
+        assert.equal(await accountName.getText(), '2nd account');
+      },
+    );
+  });
+});
diff --git a/test/e2e/tests/lock-account.spec.js b/test/e2e/tests/lock-account.spec.js
new file mode 100644
index 000000000..c8c949a42
--- /dev/null
+++ b/test/e2e/tests/lock-account.spec.js
@@ -0,0 +1,42 @@
+const { strict: assert } = require('assert');
+const { withFixtures } = require('../helpers');
+
+describe('Lock and unlock', function () {
+  const ganacheOptions = {
+    accounts: [
+      {
+        secretKey:
+          '0x7C9529A67102755B7E6102D6D950AC5D5863C98713805CEC576B945B15B71EAC',
+        balance: 25000000000000000000,
+      },
+    ],
+  };
+  it('successfully unlocks after lock', async function () {
+    await withFixtures(
+      {
+        fixtures: 'imported-account',
+        ganacheOptions,
+        title: this.test.title,
+      },
+      async ({ driver }) => {
+        await driver.navigate();
+        await driver.fill('#password', 'correct horse battery staple');
+        await driver.press('#password', driver.Key.ENTER);
+
+        await driver.clickElement('.account-menu__icon');
+        const lockButton = await driver.findClickableElement(
+          '.account-menu__lock-button',
+        );
+        assert.equal(await lockButton.getText(), 'Lock');
+        await lockButton.click();
+        await driver.fill('#password', 'correct horse battery staple');
+        await driver.press('#password', driver.Key.ENTER);
+
+        const walletBalance = await driver.findElement(
+          '[data-testid="wallet-balance"] .list-item__heading',
+        );
+        assert.equal(/^25\s*ETH$/u.test(await walletBalance.getText()), true);
+      },
+    );
+  });
+});

From 87166afb6b732d27e4471ffb7db2040fb8bd0c26 Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Thu, 24 Jun 2021 14:29:47 -0230
Subject: [PATCH 043/141] Use eth_gasPrice result for setting too low warning
 on custom networks (#11370)

* Use eth_gasPrice result for setting too low warning on custom networks

* Assume CustomPriceSafeForCustomNetwork when there is no custom price set (it will default to recommended)
---
 .../gas-modal-page-container.container.js     | 18 +++++++++++----
 ui/selectors/custom-gas.js                    | 22 +++++++++++++++++++
 2 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js b/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
index 513b4dc86..b2f619ac7 100644
--- a/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
+++ b/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
@@ -29,12 +29,14 @@ import {
   getCurrentCurrency,
   getCurrentEthBalance,
   getIsMainnet,
+  getIsTestnet,
   getBasicGasEstimateLoadingStatus,
   getCustomGasLimit,
   getCustomGasPrice,
   getDefaultActiveButtonIndex,
   getRenderableBasicEstimateData,
   isCustomPriceSafe,
+  isCustomPriceSafeForCustomNetwork,
   getAveragePriceEstimateInHexWEI,
   isCustomPriceExcessive,
   getIsGasEstimatesFetched,
@@ -113,6 +115,7 @@ const mapStateToProps = (state, ownProps) => {
   const balance = getCurrentEthBalance(state);
 
   const isMainnet = getIsMainnet(state);
+  const isTestnet = getIsTestnet(state);
   const showFiat = getShouldShowFiat(state);
 
   const newTotalEth =
@@ -134,6 +137,16 @@ const mapStateToProps = (state, ownProps) => {
         conversionRate,
       });
   const isGasEstimate = getIsGasEstimatesFetched(state);
+
+  let customPriceIsSafe;
+  if ((isMainnet || process.env.IN_TEST) && isGasEstimate) {
+    customPriceIsSafe = isCustomPriceSafe(state);
+  } else if (isTestnet) {
+    customPriceIsSafe = true;
+  } else {
+    customPriceIsSafe = isCustomPriceSafeForCustomNetwork(state);
+  }
+
   return {
     hideBasic,
     isConfirm: isConfirm(state),
@@ -143,10 +156,7 @@ const mapStateToProps = (state, ownProps) => {
     customGasLimit: calcCustomGasLimit(customModalGasLimitInHex),
     customGasTotal,
     newTotalFiat,
-    customPriceIsSafe:
-      (isMainnet || process.env.IN_TEST) && isGasEstimate
-        ? isCustomPriceSafe(state)
-        : true,
+    customPriceIsSafe,
     customPriceIsExcessive: isCustomPriceExcessive(state),
     maxModeOn,
     gasPriceButtonGroupProps: {
diff --git a/ui/selectors/custom-gas.js b/ui/selectors/custom-gas.js
index 0e275764f..a357bf758 100644
--- a/ui/selectors/custom-gas.js
+++ b/ui/selectors/custom-gas.js
@@ -96,6 +96,28 @@ export function isCustomPriceSafe(state) {
   return customPriceSafe;
 }
 
+export function isCustomPriceSafeForCustomNetwork(state) {
+  const estimatedPrice = state.gas.basicEstimates.average;
+
+  const customGasPrice = getCustomGasPrice(state);
+
+  if (!customGasPrice) {
+    return true;
+  }
+
+  const customPriceSafe = conversionGreaterThan(
+    {
+      value: customGasPrice,
+      fromNumericBase: 'hex',
+      fromDenomination: 'WEI',
+      toDenomination: 'GWEI',
+    },
+    { value: estimatedPrice, fromNumericBase: 'dec' },
+  );
+
+  return customPriceSafe;
+}
+
 export function isCustomPriceExcessive(state, checkSend = false) {
   const customPrice = checkSend ? getGasPrice(state) : getCustomGasPrice(state);
   const fastPrice = getFastPriceEstimate(state);

From d5ab1e15916fdd27f5ede3b6fbc44d3302ef0527 Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Thu, 24 Jun 2021 12:00:54 -0700
Subject: [PATCH 044/141] Adding metric events for Approved, Rejected, and
 Submitted to the TxController (#11358)

---
 app/scripts/controllers/transactions/index.js | 153 ++++++++---
 .../controllers/transactions/index.test.js    | 254 +++++++++++++-----
 2 files changed, 311 insertions(+), 96 deletions(-)

diff --git a/app/scripts/controllers/transactions/index.js b/app/scripts/controllers/transactions/index.js
index a544c222f..3f10c4ba3 100644
--- a/app/scripts/controllers/transactions/index.js
+++ b/app/scripts/controllers/transactions/index.js
@@ -40,6 +40,14 @@ const hstInterface = new ethers.utils.Interface(abi);
 
 const MAX_MEMSTORE_TX_LIST_SIZE = 100; // Number of transactions (by unique nonces) to keep in memory
 
+export const TRANSACTION_EVENTS = {
+  ADDED: 'Transaction Added',
+  APPROVED: 'Transaction Approved',
+  FINALIZED: 'Transaction Finalized',
+  REJECTED: 'Transaction Rejected',
+  SUBMITTED: 'Transaction Submitted',
+};
+
 /**
   Transaction Controller is an aggregate of sub-controllers and trackers
   composing them in a way to be exposed to the metamask controller
@@ -202,32 +210,9 @@ export default class TransactionController extends EventEmitter {
   @emits ${txMeta.id}:unapproved
   */
   addTransaction(txMeta) {
-    const {
-      type,
-      status,
-      chainId,
-      origin: referrer,
-      txParams: { gasPrice },
-      metamaskNetworkId: network,
-    } = txMeta;
-    const source = referrer === 'metamask' ? 'user' : 'dapp';
-
     this.txStateManager.addTransaction(txMeta);
     this.emit(`${txMeta.id}:unapproved`, txMeta);
-
-    this._trackMetaMetricsEvent({
-      event: 'Transaction Added',
-      category: 'Transactions',
-      sensitiveProperties: {
-        type,
-        status,
-        gasPrice,
-        referrer,
-        source,
-        network,
-        chain_id: chainId,
-      },
-    });
+    this._trackTransactionMetricsEvent(txMeta, TRANSACTION_EVENTS.ADDED);
   }
 
   /**
@@ -607,12 +592,13 @@ export default class TransactionController extends EventEmitter {
       // sign transaction
       const rawTx = await this.signTransaction(txId);
       await this.publishTransaction(txId, rawTx);
+      this._trackTransactionMetricsEvent(txMeta, TRANSACTION_EVENTS.APPROVED);
       // must set transaction to submitted/failed before releasing lock
       nonceLock.releaseLock();
     } catch (err) {
       // this is try-catch wrapped so that we can guarantee that the nonceLock is released
       try {
-        this.txStateManager.setTxStatusFailed(txId, err);
+        this._failTransaction(txId, err);
       } catch (err2) {
         log.error(err2);
       }
@@ -695,6 +681,11 @@ export default class TransactionController extends EventEmitter {
     this.setTxHash(txId, txHash);
 
     this.txStateManager.setTxStatusSubmitted(txId);
+
+    const { gas } = txMeta.txParams;
+    this._trackTransactionMetricsEvent(txMeta, TRANSACTION_EVENTS.SUBMITTED, {
+      gas_limit: gas,
+    });
   }
 
   /**
@@ -727,6 +718,29 @@ export default class TransactionController extends EventEmitter {
       this.txStateManager.setTxStatusConfirmed(txId);
       this._markNonceDuplicatesDropped(txId);
 
+      const { submittedTime } = txMeta;
+      const { blockNumber } = txReceipt;
+      const metricsParams = { gas_used: gasUsed };
+      const completionTime = await this._getTransactionCompletionTime(
+        blockNumber,
+        submittedTime,
+      );
+
+      if (completionTime) {
+        metricsParams.completion_time = completionTime;
+      }
+
+      if (txReceipt.status === '0x0') {
+        metricsParams.status = 'failed on-chain';
+        // metricsParams.error = TODO: figure out a way to get the on-chain failure reason
+      }
+
+      this._trackTransactionMetricsEvent(
+        txMeta,
+        TRANSACTION_EVENTS.FINALIZED,
+        metricsParams,
+      );
+
       this.txStateManager.updateTransaction(
         txMeta,
         'transactions#confirmTransaction - add txReceipt',
@@ -760,7 +774,9 @@ export default class TransactionController extends EventEmitter {
     @returns {Promise<void>}
   */
   async cancelTransaction(txId) {
+    const txMeta = this.txStateManager.getTransaction(txId);
     this.txStateManager.setTxStatusRejected(txId);
+    this._trackTransactionMetricsEvent(txMeta, TRANSACTION_EVENTS.REJECTED);
   }
 
   /**
@@ -843,7 +859,7 @@ export default class TransactionController extends EventEmitter {
               txMeta,
               'failed to estimate gas during boot cleanup.',
             );
-            this.txStateManager.setTxStatusFailed(txMeta.id, error);
+            this._failTransaction(txMeta.id, error);
           });
       });
 
@@ -857,7 +873,7 @@ export default class TransactionController extends EventEmitter {
         const txSignError = new Error(
           'Transaction found as "approved" during boot - possibly stuck during signing',
         );
-        this.txStateManager.setTxStatusFailed(txMeta.id, txSignError);
+        this._failTransaction(txMeta.id, txSignError);
       });
   }
 
@@ -877,17 +893,15 @@ export default class TransactionController extends EventEmitter {
         'transactions/pending-tx-tracker#event: tx:warning',
       );
     });
-    this.pendingTxTracker.on(
-      'tx:failed',
-      this.txStateManager.setTxStatusFailed.bind(this.txStateManager),
-    );
+    this.pendingTxTracker.on('tx:failed', (txId, error) => {
+      this._failTransaction(txId, error);
+    });
     this.pendingTxTracker.on('tx:confirmed', (txId, transactionReceipt) =>
       this.confirmTransaction(txId, transactionReceipt),
     );
-    this.pendingTxTracker.on(
-      'tx:dropped',
-      this.txStateManager.setTxStatusDropped.bind(this.txStateManager),
-    );
+    this.pendingTxTracker.on('tx:dropped', (txId) => {
+      this._dropTransaction(txId);
+    });
     this.pendingTxTracker.on('tx:block-update', (txMeta, latestBlockNumber) => {
       if (!txMeta.firstRetryBlockNumber) {
         txMeta.firstRetryBlockNumber = latestBlockNumber;
@@ -997,7 +1011,7 @@ export default class TransactionController extends EventEmitter {
         txMeta,
         'transactions/pending-tx-tracker#event: tx:confirmed reference to confirmed txHash with same nonce',
       );
-      this.txStateManager.setTxStatusDropped(otherTxMeta.id);
+      this._dropTransaction(otherTxMeta.id);
     });
   }
 
@@ -1090,4 +1104,71 @@ export default class TransactionController extends EventEmitter {
       }
     }
   }
+
+  /**
+   * Extracts relevant properties from a transaction meta
+   * object and uses them to create and send metrics for various transaction
+   * events.
+   * @param {Object} txMeta - the txMeta object
+   * @param {string} event - the name of the transaction event
+   * @param {Object} extraParams - optional props and values to include in sensitiveProperties
+   */
+  _trackTransactionMetricsEvent(txMeta, event, extraParams = {}) {
+    const {
+      type,
+      time,
+      status,
+      chainId,
+      origin: referrer,
+      txParams: { gasPrice },
+      metamaskNetworkId: network,
+    } = txMeta;
+    const source = referrer === 'metamask' ? 'user' : 'dapp';
+
+    this._trackMetaMetricsEvent({
+      event,
+      category: 'Transactions',
+      sensitiveProperties: {
+        type,
+        status,
+        referrer,
+        source,
+        network,
+        chain_id: chainId,
+        gas_price: gasPrice,
+        first_seen: time,
+        ...extraParams,
+      },
+    });
+  }
+
+  async _getTransactionCompletionTime(blockNumber, submittedTime) {
+    const transactionBlock = await this.query.getBlockByNumber(
+      blockNumber.toString(16),
+      false,
+    );
+
+    if (!transactionBlock) {
+      return '';
+    }
+
+    return new BigNumber(transactionBlock.timestamp, 10)
+      .minus(submittedTime / 1000)
+      .round()
+      .toString(10);
+  }
+
+  _failTransaction(txId, error) {
+    this.txStateManager.setTxStatusFailed(txId, error);
+    const txMeta = this.txStateManager.getTransaction(txId);
+    this._trackTransactionMetricsEvent(txMeta, TRANSACTION_EVENTS.FINALIZED, {
+      error: error.message,
+    });
+  }
+
+  _dropTransaction(txId) {
+    this.txStateManager.setTxStatusDropped(txId);
+    const txMeta = this.txStateManager.getTransaction(txId);
+    this._trackTransactionMetricsEvent(txMeta, TRANSACTION_EVENTS.FINALIZED);
+  }
 }
diff --git a/app/scripts/controllers/transactions/index.test.js b/app/scripts/controllers/transactions/index.test.js
index 54a1f7271..c60c5d6ea 100644
--- a/app/scripts/controllers/transactions/index.test.js
+++ b/app/scripts/controllers/transactions/index.test.js
@@ -15,7 +15,7 @@ import {
 } from '../../../../shared/constants/transaction';
 import { SECOND } from '../../../../shared/constants/time';
 import { METAMASK_CONTROLLER_EVENTS } from '../../metamask-controller';
-import TransactionController from '.';
+import TransactionController, { TRANSACTION_EVENTS } from '.';
 
 const noop = () => true;
 const currentNetworkId = '42';
@@ -419,17 +419,17 @@ describe('Transaction Controller', function () {
   });
 
   describe('#addTransaction', function () {
-    let trackMetaMetricsEventSpy;
+    let trackTransactionMetricsEventSpy;
 
     beforeEach(function () {
-      trackMetaMetricsEventSpy = sinon.spy(
+      trackTransactionMetricsEventSpy = sinon.spy(
         txController,
-        '_trackMetaMetricsEvent',
+        '_trackTransactionMetricsEvent',
       );
     });
 
     afterEach(function () {
-      trackMetaMetricsEventSpy.restore();
+      trackTransactionMetricsEventSpy.restore();
     });
 
     it('should emit updates', function (done) {
@@ -470,7 +470,7 @@ describe('Transaction Controller', function () {
       txController.addTransaction(txMeta);
     });
 
-    it('should call _trackMetaMetricsEvent with the correct payload (one)', function () {
+    it('should call _trackTransactionMetricsEvent with the correct params', function () {
       const txMeta = {
         id: 1,
         status: TRANSACTION_STATUSES.UNAPPROVED,
@@ -484,65 +484,20 @@ describe('Transaction Controller', function () {
         type: 'sentEther',
         origin: 'metamask',
         chainId: currentChainId,
+        time: 1624408066355,
         metamaskNetworkId: currentNetworkId,
       };
-      const expectedPayload = {
-        event: 'Transaction Added',
-        category: 'Transactions',
-        sensitiveProperties: {
-          chain_id: '0x2a',
-          gasPrice: '0x77359400',
-          network: '42',
-          referrer: 'metamask',
-          source: 'user',
-          status: 'unapproved',
-          type: 'sentEther',
-        },
-      };
 
       txController.addTransaction(txMeta);
-      assert.equal(trackMetaMetricsEventSpy.callCount, 1);
+
+      assert.equal(trackTransactionMetricsEventSpy.callCount, 1);
       assert.deepEqual(
-        trackMetaMetricsEventSpy.getCall(0).args[0],
-        expectedPayload,
+        trackTransactionMetricsEventSpy.getCall(0).args[0],
+        txMeta,
       );
-    });
-
-    it('should call _trackMetaMetricsEvent with the correct payload (two)', function () {
-      const txMeta = {
-        id: 1,
-        status: TRANSACTION_STATUSES.UNAPPROVED,
-        txParams: {
-          from: fromAccount.address,
-          to: '0x1678a085c290ebd122dc42cba69373b5953b831d',
-          gasPrice: '0x77359400',
-          gas: '0x7b0d',
-          nonce: '0x4b',
-        },
-        type: 'sentEther',
-        origin: 'other',
-        chainId: '0x3',
-        metamaskNetworkId: '3',
-      };
-      const expectedPayload = {
-        event: 'Transaction Added',
-        category: 'Transactions',
-        sensitiveProperties: {
-          chain_id: '0x3',
-          gasPrice: '0x77359400',
-          network: '3',
-          referrer: 'other',
-          source: 'dapp',
-          status: 'unapproved',
-          type: 'sentEther',
-        },
-      };
-
-      txController.addTransaction(txMeta);
-      assert.equal(trackMetaMetricsEventSpy.callCount, 1);
-      assert.deepEqual(
-        trackMetaMetricsEventSpy.getCall(0).args[0],
-        expectedPayload,
+      assert.equal(
+        trackTransactionMetricsEventSpy.getCall(0).args[1],
+        TRANSACTION_EVENTS.ADDED,
       );
     });
   });
@@ -817,7 +772,8 @@ describe('Transaction Controller', function () {
   });
 
   describe('#publishTransaction', function () {
-    let hash, txMeta;
+    let hash, txMeta, trackTransactionMetricsEventSpy;
+
     beforeEach(function () {
       hash =
         '0x2a5523c6fa98b47b7d9b6c8320179785150b42a16bcff36b398c5062b65657e8';
@@ -825,12 +781,21 @@ describe('Transaction Controller', function () {
         id: 1,
         status: TRANSACTION_STATUSES.UNAPPROVED,
         txParams: {
+          gas: '0x7b0d',
           to: VALID_ADDRESS,
           from: VALID_ADDRESS_TWO,
         },
         metamaskNetworkId: currentNetworkId,
       };
       providerResultStub.eth_sendRawTransaction = hash;
+      trackTransactionMetricsEventSpy = sinon.spy(
+        txController,
+        '_trackTransactionMetricsEvent',
+      );
+    });
+
+    afterEach(function () {
+      trackTransactionMetricsEventSpy.restore();
     });
 
     it('should publish a tx, updates the rawTx when provided a one', async function () {
@@ -858,6 +823,25 @@ describe('Transaction Controller', function () {
       );
       assert.equal(publishedTx.status, TRANSACTION_STATUSES.SUBMITTED);
     });
+
+    it('should call _trackTransactionMetricsEvent with the correct params', async function () {
+      const rawTx =
+        '0x477b2e6553c917af0db0388ae3da62965ff1a184558f61b749d1266b2e6d024c';
+      txController.txStateManager.addTransaction(txMeta);
+      await txController.publishTransaction(txMeta.id, rawTx);
+      assert.equal(trackTransactionMetricsEventSpy.callCount, 1);
+      assert.deepEqual(
+        trackTransactionMetricsEventSpy.getCall(0).args[0],
+        txMeta,
+      );
+      assert.equal(
+        trackTransactionMetricsEventSpy.getCall(0).args[1],
+        TRANSACTION_EVENTS.SUBMITTED,
+      );
+      assert.deepEqual(trackTransactionMetricsEventSpy.getCall(0).args[2], {
+        gas_limit: txMeta.txParams.gas,
+      });
+    });
   });
 
   describe('#_markNonceDuplicatesDropped', function () {
@@ -1199,4 +1183,154 @@ describe('Transaction Controller', function () {
       );
     });
   });
+
+  describe('#_trackTransactionMetricsEvent', function () {
+    let trackMetaMetricsEventSpy;
+
+    beforeEach(function () {
+      trackMetaMetricsEventSpy = sinon.spy(
+        txController,
+        '_trackMetaMetricsEvent',
+      );
+    });
+
+    afterEach(function () {
+      trackMetaMetricsEventSpy.restore();
+    });
+
+    it('should call _trackMetaMetricsEvent with the correct payload (user source)', function () {
+      const txMeta = {
+        id: 1,
+        status: TRANSACTION_STATUSES.UNAPPROVED,
+        txParams: {
+          from: fromAccount.address,
+          to: '0x1678a085c290ebd122dc42cba69373b5953b831d',
+          gasPrice: '0x77359400',
+          gas: '0x7b0d',
+          nonce: '0x4b',
+        },
+        type: 'sentEther',
+        origin: 'metamask',
+        chainId: currentChainId,
+        time: 1624408066355,
+        metamaskNetworkId: currentNetworkId,
+      };
+      const expectedPayload = {
+        event: 'Transaction Added',
+        category: 'Transactions',
+        sensitiveProperties: {
+          chain_id: '0x2a',
+          gas_price: '0x77359400',
+          first_seen: 1624408066355,
+          network: '42',
+          referrer: 'metamask',
+          source: 'user',
+          status: 'unapproved',
+          type: 'sentEther',
+        },
+      };
+
+      txController._trackTransactionMetricsEvent(
+        txMeta,
+        TRANSACTION_EVENTS.ADDED,
+      );
+      assert.equal(trackMetaMetricsEventSpy.callCount, 1);
+      assert.deepEqual(
+        trackMetaMetricsEventSpy.getCall(0).args[0],
+        expectedPayload,
+      );
+    });
+
+    it('should call _trackMetaMetricsEvent with the correct payload (dapp source)', function () {
+      const txMeta = {
+        id: 1,
+        status: TRANSACTION_STATUSES.UNAPPROVED,
+        txParams: {
+          from: fromAccount.address,
+          to: '0x1678a085c290ebd122dc42cba69373b5953b831d',
+          gasPrice: '0x77359400',
+          gas: '0x7b0d',
+          nonce: '0x4b',
+        },
+        type: 'sentEther',
+        origin: 'other',
+        chainId: currentChainId,
+        time: 1624408066355,
+        metamaskNetworkId: currentNetworkId,
+      };
+      const expectedPayload = {
+        event: 'Transaction Added',
+        category: 'Transactions',
+        sensitiveProperties: {
+          chain_id: '0x2a',
+          gas_price: '0x77359400',
+          first_seen: 1624408066355,
+          network: '42',
+          referrer: 'other',
+          source: 'dapp',
+          status: 'unapproved',
+          type: 'sentEther',
+        },
+      };
+
+      txController._trackTransactionMetricsEvent(
+        txMeta,
+        TRANSACTION_EVENTS.ADDED,
+      );
+      assert.equal(trackMetaMetricsEventSpy.callCount, 1);
+      assert.deepEqual(
+        trackMetaMetricsEventSpy.getCall(0).args[0],
+        expectedPayload,
+      );
+    });
+
+    it('should call _trackMetaMetricsEvent with the correct payload (extra params)', function () {
+      const txMeta = {
+        id: 1,
+        status: TRANSACTION_STATUSES.UNAPPROVED,
+        txParams: {
+          from: fromAccount.address,
+          to: '0x1678a085c290ebd122dc42cba69373b5953b831d',
+          gasPrice: '0x77359400',
+          gas: '0x7b0d',
+          nonce: '0x4b',
+        },
+        type: 'sentEther',
+        origin: 'other',
+        chainId: currentChainId,
+        time: 1624408066355,
+        metamaskNetworkId: currentNetworkId,
+      };
+      const expectedPayload = {
+        event: 'Transaction Added',
+        category: 'Transactions',
+        sensitiveProperties: {
+          baz: 3.0,
+          foo: 'bar',
+          chain_id: '0x2a',
+          gas_price: '0x77359400',
+          first_seen: 1624408066355,
+          network: '42',
+          referrer: 'other',
+          source: 'dapp',
+          status: 'unapproved',
+          type: 'sentEther',
+        },
+      };
+
+      txController._trackTransactionMetricsEvent(
+        txMeta,
+        TRANSACTION_EVENTS.ADDED,
+        {
+          baz: 3.0,
+          foo: 'bar',
+        },
+      );
+      assert.equal(trackMetaMetricsEventSpy.callCount, 1);
+      assert.deepEqual(
+        trackMetaMetricsEventSpy.getCall(0).args[0],
+        expectedPayload,
+      );
+    });
+  });
 });

From 393e79ce3e306abd7a1fc2c73405eb69ba748248 Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Thu, 24 Jun 2021 14:52:14 -0500
Subject: [PATCH 045/141] add maxPriorityFeePerGas and maxFeePerGas to incoming
 controller (#11367)

---
 .../controllers/incoming-transactions.js      |  34 +++--
 .../controllers/incoming-transactions.test.js | 120 ++++++++++++++++--
 2 files changed, 135 insertions(+), 19 deletions(-)

diff --git a/app/scripts/controllers/incoming-transactions.js b/app/scripts/controllers/incoming-transactions.js
index e5fc03543..4d13532fc 100644
--- a/app/scripts/controllers/incoming-transactions.js
+++ b/app/scripts/controllers/incoming-transactions.js
@@ -34,8 +34,10 @@ const fetchWithTimeout = getFetchWithTimeout(SECOND * 30);
  * @typedef {Object} EtherscanTransaction
  * @property {string} blockNumber - The number of the block this transaction was found in, in decimal
  * @property {string} from - The hex-prefixed address of the sender
- * @property {string} gas - The gas limit, in decimal WEI
- * @property {string} gasPrice - The gas price, in decimal WEI
+ * @property {string} gas - The gas limit, in decimal GWEI
+ * @property {string} [gasPrice] - The gas price, in decimal WEI
+ * @property {string} [maxFeePerGas] - The maximum fee per gas, inclusive of tip, in decimal WEI
+ * @property {string} [maxPriorityFeePerGas] - The maximum tip per gas in decimal WEI
  * @property {string} hash - The hex-prefixed transaction hash
  * @property {string} isError - Whether the transaction was confirmed or failed (0 for confirmed, 1 for failed)
  * @property {string} nonce - The transaction nonce, in decimal
@@ -267,6 +269,25 @@ export default class IncomingTransactionsController {
       etherscanTransaction.isError === '0'
         ? TRANSACTION_STATUSES.CONFIRMED
         : TRANSACTION_STATUSES.FAILED;
+    const txParams = {
+      from: etherscanTransaction.from,
+      gas: bnToHex(new BN(etherscanTransaction.gas)),
+      nonce: bnToHex(new BN(etherscanTransaction.nonce)),
+      to: etherscanTransaction.to,
+      value: bnToHex(new BN(etherscanTransaction.value)),
+    };
+
+    if (etherscanTransaction.gasPrice) {
+      txParams.gasPrice = bnToHex(new BN(etherscanTransaction.gasPrice));
+    } else if (etherscanTransaction.maxFeePerGas) {
+      txParams.maxFeePerGas = bnToHex(
+        new BN(etherscanTransaction.maxFeePerGas),
+      );
+      txParams.maxPriorityFeePerGas = bnToHex(
+        new BN(etherscanTransaction.maxPriorityFeePerGas),
+      );
+    }
+
     return {
       blockNumber: etherscanTransaction.blockNumber,
       id: createId(),
@@ -274,14 +295,7 @@ export default class IncomingTransactionsController {
       metamaskNetworkId: CHAIN_ID_TO_NETWORK_ID_MAP[chainId],
       status,
       time,
-      txParams: {
-        from: etherscanTransaction.from,
-        gas: bnToHex(new BN(etherscanTransaction.gas)),
-        gasPrice: bnToHex(new BN(etherscanTransaction.gasPrice)),
-        nonce: bnToHex(new BN(etherscanTransaction.nonce)),
-        to: etherscanTransaction.to,
-        value: bnToHex(new BN(etherscanTransaction.value)),
-      },
+      txParams,
       hash: etherscanTransaction.hash,
       type: TRANSACTION_TYPES.INCOMING,
     };
diff --git a/app/scripts/controllers/incoming-transactions.test.js b/app/scripts/controllers/incoming-transactions.test.js
index f4cac0309..70b511ace 100644
--- a/app/scripts/controllers/incoming-transactions.test.js
+++ b/app/scripts/controllers/incoming-transactions.test.js
@@ -103,15 +103,34 @@ function getMockBlockTracker() {
 /**
  * Returns a transaction object matching the expected format returned
  * by the Etherscan API
- *
- * @param {string} [toAddress] - The hex-prefixed address of the recipient
- * @param {number} [blockNumber] - The block number for the transaction
+ * @param {Object} [params] - options bag
+ * @param {string} [params.toAddress] - The hex-prefixed address of the recipient
+ * @param {number} [params.blockNumber] - The block number for the transaction
+ * @param {boolean} [params.useEIP1559] - Use EIP-1559 gas fields
+ * @param
  *  @returns {EtherscanTransaction}
  */
-const getFakeEtherscanTransaction = (
+const getFakeEtherscanTransaction = ({
   toAddress = MOCK_SELECTED_ADDRESS,
   blockNumber = 10,
-) => {
+  useEIP1559 = false,
+  hash = '0xfake',
+} = {}) => {
+  if (useEIP1559) {
+    return {
+      blockNumber: blockNumber.toString(),
+      from: '0xfake',
+      gas: '0',
+      maxFeePerGas: '10',
+      maxPriorityFeePerGas: '1',
+      hash,
+      isError: '0',
+      nonce: '100',
+      timeStamp: '16000000000000',
+      to: toAddress,
+      value: '0',
+    };
+  }
   return {
     blockNumber: blockNumber.toString(),
     from: '0xfake',
@@ -243,7 +262,13 @@ describe('IncomingTransactionsController', function () {
           200,
           JSON.stringify({
             status: '1',
-            result: [getFakeEtherscanTransaction()],
+            result: [
+              getFakeEtherscanTransaction(),
+              getFakeEtherscanTransaction({
+                hash: '0xfakeeip1559',
+                useEIP1559: true,
+              }),
+            ],
           }),
         );
       const updateStateStub = sinon.stub(
@@ -263,6 +288,9 @@ describe('IncomingTransactionsController', function () {
 
       const actualStateWithoutGenerated = cloneDeep(actualState);
       delete actualStateWithoutGenerated?.incomingTransactions?.['0xfake']?.id;
+      delete actualStateWithoutGenerated?.incomingTransactions?.[
+        '0xfakeeip1559'
+      ]?.id;
 
       assert.ok(
         typeof generatedTxId === 'number' && generatedTxId > 0,
@@ -290,6 +318,24 @@ describe('IncomingTransactionsController', function () {
                 value: '0x0',
               },
             },
+            '0xfakeeip1559': {
+              blockNumber: '10',
+              hash: '0xfakeeip1559',
+              metamaskNetworkId: ROPSTEN_NETWORK_ID,
+              chainId: ROPSTEN_CHAIN_ID,
+              status: TRANSACTION_STATUSES.CONFIRMED,
+              time: 16000000000000000,
+              type: TRANSACTION_TYPES.INCOMING,
+              txParams: {
+                from: '0xfake',
+                gas: '0x0',
+                maxFeePerGas: '0xa',
+                maxPriorityFeePerGas: '0x1',
+                nonce: '0x64',
+                to: '0x0101',
+                value: '0x0',
+              },
+            },
           },
           incomingTxLastFetchedBlockByChainId: {
             ...getNonEmptyInitState().incomingTxLastFetchedBlockByChainId,
@@ -509,7 +555,11 @@ describe('IncomingTransactionsController', function () {
           200,
           JSON.stringify({
             status: '1',
-            result: [getFakeEtherscanTransaction(NEW_MOCK_SELECTED_ADDRESS)],
+            result: [
+              getFakeEtherscanTransaction({
+                toAddress: NEW_MOCK_SELECTED_ADDRESS,
+              }),
+            ],
           }),
         );
       const updateStateStub = sinon.stub(
@@ -586,7 +636,9 @@ describe('IncomingTransactionsController', function () {
       // reply with a valid request for any supported network, so that this test has every opportunity to fail
       nockEtherscanApiForAllChains({
         status: '1',
-        result: [getFakeEtherscanTransaction(NEW_MOCK_SELECTED_ADDRESS)],
+        result: [
+          getFakeEtherscanTransaction({ toAddress: NEW_MOCK_SELECTED_ADDRESS }),
+        ],
       });
       const updateStateStub = sinon.stub(
         incomingTransactionsController.store,
@@ -954,7 +1006,9 @@ describe('IncomingTransactionsController', function () {
 
   describe('_getNewIncomingTransactions', function () {
     const ADDRESS_TO_FETCH_FOR = '0xfakeaddress';
-    const FETCHED_TX = getFakeEtherscanTransaction(ADDRESS_TO_FETCH_FOR);
+    const FETCHED_TX = getFakeEtherscanTransaction({
+      toAddress: ADDRESS_TO_FETCH_FOR,
+    });
     const mockFetch = sinon.stub().returns(
       Promise.resolve({
         json: () => Promise.resolve({ status: '1', result: [FETCHED_TX] }),
@@ -1212,5 +1266,53 @@ describe('IncomingTransactionsController', function () {
         type: TRANSACTION_TYPES.INCOMING,
       });
     });
+
+    it('should return the expected data when the tx uses EIP-1559 fields', function () {
+      const incomingTransactionsController = new IncomingTransactionsController(
+        {
+          blockTracker: getMockBlockTracker(),
+          ...getMockNetworkControllerMethods(ROPSTEN_CHAIN_ID),
+          preferencesController: getMockPreferencesController(),
+          initState: getNonEmptyInitState(),
+        },
+      );
+
+      const result = incomingTransactionsController._normalizeTxFromEtherscan(
+        {
+          timeStamp: '4444',
+          isError: '0',
+          blockNumber: 333,
+          from: '0xa',
+          gas: '11',
+          maxFeePerGas: '12',
+          maxPriorityFeePerGas: '1',
+          nonce: '13',
+          to: '0xe',
+          value: '15',
+          hash: '0xg',
+        },
+        ROPSTEN_CHAIN_ID,
+      );
+
+      assert.deepStrictEqual(result, {
+        blockNumber: 333,
+        id: 54321,
+        metamaskNetworkId: ROPSTEN_NETWORK_ID,
+        chainId: ROPSTEN_CHAIN_ID,
+        status: TRANSACTION_STATUSES.CONFIRMED,
+        time: 4444000,
+        txParams: {
+          from: '0xa',
+          gas: '0xb',
+          maxFeePerGas: '0xc',
+          maxPriorityFeePerGas: '0x1',
+          nonce: '0xd',
+          to: '0xe',
+          value: '0xf',
+        },
+        hash: '0xg',
+        type: TRANSACTION_TYPES.INCOMING,
+      });
+    });
   });
 });

From a396f5595354b054e594fb7bdf9492c72e7b467e Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Thu, 24 Jun 2021 14:52:29 -0500
Subject: [PATCH 046/141] use jest for testing shared (#11334)

---
 .eslintrc.js   | 8 ++++++--
 jest.config.js | 8 ++++++--
 package.json   | 6 +++---
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index fa67adaaf..56c2d4b86 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -108,7 +108,11 @@ module.exports = {
     },
     {
       files: ['**/*.test.js'],
-      excludedFiles: ['ui/**/*.test.js', 'ui/__mocks__/*.js'],
+      excludedFiles: [
+        'ui/**/*.test.js',
+        'ui/__mocks__/*.js',
+        'shared/**/*.test.js',
+      ],
       extends: ['@metamask/eslint-config-mocha'],
       rules: {
         'mocha/no-setup-in-describe': 'off',
@@ -125,7 +129,7 @@ module.exports = {
       },
     },
     {
-      files: ['ui/**/*.test.js', 'ui/__mocks__/*.js'],
+      files: ['ui/**/*.test.js', 'ui/__mocks__/*.js', 'shared/**/*.test.js'],
       extends: ['@metamask/eslint-config-jest'],
       rules: {
         'jest/no-restricted-matchers': 'off',
diff --git a/jest.config.js b/jest.config.js
index 6fce2ce4d..f236fbb90 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -2,7 +2,11 @@ module.exports = {
   restoreMocks: true,
   coverageDirectory: 'jest-coverage/',
   collectCoverageFrom: ['<rootDir>/ui/**/swaps/**'],
-  coveragePathIgnorePatterns: ['.stories.js', '.snap'],
+  coveragePathIgnorePatterns: [
+    '.stories.js',
+    '.snap',
+    '**/shared/**/?(*.)+(test).js',
+  ],
   coverageThreshold: {
     global: {
       branches: 32.75,
@@ -13,5 +17,5 @@ module.exports = {
   },
   setupFiles: ['./test/setup.js', './test/env.js'],
   setupFilesAfterEnv: ['./test/jest/setup.js'],
-  testMatch: ['**/ui/**/?(*.)+(test).js'],
+  testMatch: ['ui/**/?(*.)+(test).js', '**/shared/**/?(*.)+(test).js'],
 };
diff --git a/package.json b/package.json
index b3323b9e4..ae55ccc66 100644
--- a/package.json
+++ b/package.json
@@ -23,13 +23,13 @@
     "dapp-chain": "GANACHE_ARGS='-b 2' concurrently -k -n ganache,dapp -p '[{time}][{name}]' 'yarn ganache:start' 'sleep 5 && yarn dapp'",
     "forwarder": "node ./development/static-server.js ./node_modules/@metamask/forwarder/dist/ --port 9010",
     "dapp-forwarder": "concurrently -k -n forwarder,dapp -p '[{time}][{name}]' 'yarn forwarder' 'yarn dapp'",
-    "test:unit": "mocha --exit --require test/env.js --require test/setup.js --recursive './{app,shared}/**/*.test.js'",
+    "test:unit": "mocha --exit --require test/env.js --require test/setup.js --recursive './app/**/*.test.js'",
     "test:unit:global": "mocha --exit --require test/env.js --require test/setup.js --recursive test/unit-global/*.test.js",
     "test:unit:jest": "jest",
     "test:unit:jest:watch": "jest --watch",
     "test:unit:jest:watch:silent": "jest --watch --silent",
     "test:unit:jest:ci": "jest --maxWorkers=2",
-    "test:unit:lax": "mocha --exit --require test/env.js --require test/setup.js --ignore './app/scripts/controllers/permissions/*.test.js' --recursive './{app,shared}/**/*.test.js'",
+    "test:unit:lax": "mocha --exit --require test/env.js --require test/setup.js --ignore './app/scripts/controllers/permissions/*.test.js' --recursive './app/**/*.test.js'",
     "test:unit:strict": "mocha --exit --require test/env.js --require test/setup.js --recursive './app/scripts/controllers/permissions/*.test.js'",
     "test:unit:path": "mocha --exit --require test/env.js --require test/setup.js --recursive",
     "test:e2e:chrome": "SELENIUM_BROWSER=chrome node test/e2e/run-all.js",
@@ -54,7 +54,7 @@
     "verify-locales": "node ./development/verify-locale-strings.js",
     "verify-locales:fix": "node ./development/verify-locale-strings.js --fix",
     "mozilla-lint": "addons-linter dist/firefox",
-    "watch": "mocha --watch --require test/env.js --require test/setup.js --reporter min --recursive \"test/unit/**/*.js\" \"ui/**/*.test.js\" \"shared/**/*.test.js\"",
+    "watch": "mocha --watch --require test/env.js --require test/setup.js --reporter min --recursive \"test/unit/**/*.js\" \"ui/**/*.test.js\"",
     "devtools:react": "react-devtools",
     "devtools:redux": "remotedev --hostname=localhost --port=8000",
     "start:dev": "concurrently -k -n build,react,redux yarn:start yarn:devtools:react yarn:devtools:redux",

From a69ed05141af133853c0b2421884dc7e79206fdf Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Thu, 24 Jun 2021 15:37:44 -0700
Subject: [PATCH 047/141] Removing obsolete client-side transaction metrics
 events (#11329)

* Removing metametrics send count tracking

* Removing client side Transaction Completed and Canceled events
---
 .storybook/test-data.js                       |  1 -
 app/scripts/controllers/metametrics.js        | 38 +-------
 app/scripts/controllers/metametrics.test.js   | 65 -------------
 app/scripts/lib/setupSentry.js                |  1 -
 app/scripts/metamask-controller.js            | 13 ---
 app/scripts/migrations/062.js                 | 28 ++++++
 app/scripts/migrations/062.test.js            | 80 ++++++++++++++++
 app/scripts/migrations/index.js               |  1 +
 test/e2e/fixtures/address-entry/state.json    |  1 -
 test/e2e/fixtures/connected-state/state.json  |  1 -
 test/e2e/fixtures/custom-rpc/state.json       |  1 -
 test/e2e/fixtures/custom-token/state.json     |  1 -
 test/e2e/fixtures/import-ui/state.json        |  3 +-
 test/e2e/fixtures/imported-account/state.json |  1 -
 test/e2e/fixtures/localization/state.json     |  1 -
 test/e2e/fixtures/metrics-enabled/state.json  |  1 -
 test/e2e/fixtures/send-edit/state.json        |  1 -
 test/e2e/fixtures/threebox-enabled/state.json |  3 +-
 ui/ducks/metamask/metamask.js                 |  7 --
 .../confirm-transaction-base.component.js     | 93 ++++---------------
 .../confirm-transaction-base.container.js     |  4 -
 ui/store/actionConstants.js                   |  1 -
 ui/store/actions.js                           | 21 -----
 23 files changed, 131 insertions(+), 236 deletions(-)
 create mode 100644 app/scripts/migrations/062.js
 create mode 100644 app/scripts/migrations/062.test.js

diff --git a/.storybook/test-data.js b/.storybook/test-data.js
index 441e8405a..7d034d86c 100644
--- a/.storybook/test-data.js
+++ b/.storybook/test-data.js
@@ -140,7 +140,6 @@ const state = {
       }
     },
     "participateInMetaMetrics": true,
-    "metaMetricsSendCount": 2,
     "nextNonce": 71,
     "connectedStatusPopoverHasBeenShown": true,
     "swapsWelcomeMessageHasBeenShown": true,
diff --git a/app/scripts/controllers/metametrics.js b/app/scripts/controllers/metametrics.js
index c55a97c85..1539cbcba 100644
--- a/app/scripts/controllers/metametrics.js
+++ b/app/scripts/controllers/metametrics.js
@@ -7,30 +7,6 @@ import {
   METAMETRICS_BACKGROUND_PAGE_OBJECT,
 } from '../../../shared/constants/metametrics';
 
-/**
- * Used to determine whether or not to attach a user's metametrics id
- * to events that include on-chain data. This helps to prevent identifying
- * a user by being able to trace their activity on etherscan/block exploring
- */
-const trackableSendCounts = {
-  1: true,
-  10: true,
-  30: true,
-  50: true,
-  100: true,
-  250: true,
-  500: true,
-  1000: true,
-  2500: true,
-  5000: true,
-  10000: true,
-  25000: true,
-};
-
-export function sendCountIsTrackable(sendCount) {
-  return Boolean(trackableSendCounts[sendCount]);
-}
-
 /**
  * @typedef {import('../../../shared/constants/metametrics').MetaMetricsContext} MetaMetricsContext
  * @typedef {import('../../../shared/constants/metametrics').MetaMetricsEventPayload} MetaMetricsEventPayload
@@ -48,9 +24,6 @@ export function sendCountIsTrackable(sendCount) {
  * @property {?boolean} participateInMetaMetrics - The user's preference for
  *  participating in the MetaMetrics analytics program. This setting controls
  *  whether or not events are tracked
- * @property {number} metaMetricsSendCount - How many send transactions have
- *  been tracked through this controller. Used to prevent attaching sensitive
- *  data that can be traced through on chain data.
  */
 
 export default class MetaMetricsController {
@@ -89,7 +62,6 @@ export default class MetaMetricsController {
     this.store = new ObservableStore({
       participateInMetaMetrics: null,
       metaMetricsId: null,
-      metaMetricsSendCount: 0,
       ...initState,
     });
 
@@ -138,10 +110,6 @@ export default class MetaMetricsController {
     return this.store.getState();
   }
 
-  setMetaMetricsSendCount(val) {
-    this.store.updateState({ metaMetricsSendCount: val });
-  }
-
   /**
    * Build the context object to attach to page and track events.
    * @private
@@ -231,11 +199,7 @@ export default class MetaMetricsController {
     // to be updated to work with the new tracking plan. I think we should use
     // a config setting for this instead of trying to match the event name
     const isSendFlow = Boolean(payload.event.match(/^send|^confirm/iu));
-    if (
-      isSendFlow &&
-      this.state.metaMetricsSendCount &&
-      !sendCountIsTrackable(this.state.metaMetricsSendCount + 1)
-    ) {
+    if (isSendFlow) {
       excludeMetaMetricsId = true;
     }
     // If we are tracking sensitive data we will always use the anonymousId
diff --git a/app/scripts/controllers/metametrics.test.js b/app/scripts/controllers/metametrics.test.js
index e30b6ad5e..bb0d15bed 100644
--- a/app/scripts/controllers/metametrics.test.js
+++ b/app/scripts/controllers/metametrics.test.js
@@ -84,7 +84,6 @@ function getMockPreferencesStore({ currentLocale = LOCALE } = {}) {
 function getMetaMetricsController({
   participateInMetaMetrics = true,
   metaMetricsId = TEST_META_METRICS_ID,
-  metaMetricsSendCount = 0,
   preferencesStore = getMockPreferencesStore(),
   networkController = getMockNetworkController(),
 } = {}) {
@@ -106,7 +105,6 @@ function getMetaMetricsController({
     initState: {
       participateInMetaMetrics,
       metaMetricsId,
-      metaMetricsSendCount,
     },
   });
 }
@@ -198,14 +196,6 @@ describe('MetaMetricsController', function () {
     });
   });
 
-  describe('setMetaMetricsSendCount', function () {
-    it('should update the send count in state', function () {
-      const metaMetricsController = getMetaMetricsController();
-      metaMetricsController.setMetaMetricsSendCount(1);
-      assert.equal(metaMetricsController.state.metaMetricsSendCount, 1);
-    });
-  });
-
   describe('trackEvent', function () {
     it('should not track an event if user is not participating in metametrics', function () {
       const mock = sinon.mock(segment);
@@ -337,61 +327,6 @@ describe('MetaMetricsController', function () {
       mock.verify();
     });
 
-    it('should use anonymousId when metametrics send count is not trackable in send flow', function () {
-      const mock = sinon.mock(segment);
-      const metaMetricsController = getMetaMetricsController({
-        metaMetricsSendCount: 1,
-      });
-      mock
-        .expects('track')
-        .once()
-        .withArgs({
-          event: 'Send Fake Event',
-          anonymousId: METAMETRICS_ANONYMOUS_ID,
-          context: DEFAULT_TEST_CONTEXT,
-          properties: {
-            test: 1,
-            ...DEFAULT_EVENT_PROPERTIES,
-          },
-        });
-      metaMetricsController.trackEvent({
-        event: 'Send Fake Event',
-        category: 'Unit Test',
-        properties: {
-          test: 1,
-        },
-      });
-      mock.verify();
-    });
-
-    it('should use user metametrics id when metametrics send count is trackable in send flow', function () {
-      const mock = sinon.mock(segment);
-      const metaMetricsController = getMetaMetricsController();
-      mock
-        .expects('track')
-        .once()
-        .withArgs({
-          event: 'Send Fake Event',
-          userId: TEST_META_METRICS_ID,
-          context: DEFAULT_TEST_CONTEXT,
-          properties: {
-            test: 1,
-            ...DEFAULT_EVENT_PROPERTIES,
-          },
-        });
-      metaMetricsController.trackEvent(
-        {
-          event: 'Send Fake Event',
-          category: 'Unit Test',
-          properties: {
-            test: 1,
-          },
-        },
-        { metaMetricsSendCount: 0 },
-      );
-      mock.verify();
-    });
-
     it('should immediately flush queue if flushImmediately set to true', async function () {
       const metaMetricsController = getMetaMetricsController();
       const flushStub = sinon.stub(segment, 'flush');
diff --git a/app/scripts/lib/setupSentry.js b/app/scripts/lib/setupSentry.js
index 25bbd7a46..56625b220 100644
--- a/app/scripts/lib/setupSentry.js
+++ b/app/scripts/lib/setupSentry.js
@@ -36,7 +36,6 @@ export const SENTRY_STATE = {
     isInitialized: true,
     isUnlocked: true,
     metaMetricsId: true,
-    metaMetricsSendCount: true,
     nativeCurrency: true,
     network: true,
     nextNonce: true,
diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
index 5ed42f662..fa582507f 100644
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@@ -680,7 +680,6 @@ export default class MetamaskController extends EventEmitter {
       setUsePhishDetect: this.setUsePhishDetect.bind(this),
       setIpfsGateway: this.setIpfsGateway.bind(this),
       setParticipateInMetaMetrics: this.setParticipateInMetaMetrics.bind(this),
-      setMetaMetricsSendCount: this.setMetaMetricsSendCount.bind(this),
       setFirstTimeFlowType: this.setFirstTimeFlowType.bind(this),
       setCurrentLocale: this.setCurrentLocale.bind(this),
       markPasswordForgotten: this.markPasswordForgotten.bind(this),
@@ -2768,18 +2767,6 @@ export default class MetamaskController extends EventEmitter {
     }
   }
 
-  setMetaMetricsSendCount(val, cb) {
-    try {
-      this.metaMetricsController.setMetaMetricsSendCount(val);
-      cb(null);
-      return;
-    } catch (err) {
-      cb(err);
-      // eslint-disable-next-line no-useless-return
-      return;
-    }
-  }
-
   /**
    * Sets the type of first time flow the user wishes to follow: create or import
    * @param {string} type - Indicates the type of first time flow the user wishes to follow
diff --git a/app/scripts/migrations/062.js b/app/scripts/migrations/062.js
new file mode 100644
index 000000000..54b52b967
--- /dev/null
+++ b/app/scripts/migrations/062.js
@@ -0,0 +1,28 @@
+import { cloneDeep } from 'lodash';
+
+const version = 62;
+
+/**
+ * Removes metaMetricsSendCount from MetaMetrics controller
+ */
+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.MetaMetricsController) {
+    const { metaMetricsSendCount } = state.MetaMetricsController;
+    if (metaMetricsSendCount !== undefined) {
+      delete state.MetaMetricsController.metaMetricsSendCount;
+    }
+  }
+  return state;
+}
diff --git a/app/scripts/migrations/062.test.js b/app/scripts/migrations/062.test.js
new file mode 100644
index 000000000..44229ac1d
--- /dev/null
+++ b/app/scripts/migrations/062.test.js
@@ -0,0 +1,80 @@
+import { strict as assert } from 'assert';
+import migration62 from './062';
+
+describe('migration #62', function () {
+  it('should update the version metadata', async function () {
+    const oldStorage = {
+      meta: {
+        version: 61,
+      },
+      data: {},
+    };
+
+    const newStorage = await migration62.migrate(oldStorage);
+    assert.deepEqual(newStorage.meta, {
+      version: 62,
+    });
+  });
+
+  it('should remove metaMetricsSendCount from MetaMetricsController', async function () {
+    const oldStorage = {
+      meta: {},
+      data: {
+        MetaMetricsController: {
+          metaMetricsSendCount: 1,
+          bar: 'baz',
+        },
+        foo: 'bar',
+      },
+    };
+
+    const newStorage = await migration62.migrate(oldStorage);
+    assert.deepStrictEqual(newStorage.data, {
+      MetaMetricsController: {
+        bar: 'baz',
+      },
+      foo: 'bar',
+    });
+  });
+
+  it('should remove metaMetricsSendCount from MetaMetricsController (falsey but defined)', async function () {
+    const oldStorage = {
+      meta: {},
+      data: {
+        MetaMetricsController: {
+          metaMetricsSendCount: 0,
+          bar: 'baz',
+        },
+        foo: 'bar',
+      },
+    };
+
+    const newStorage = await migration62.migrate(oldStorage);
+    assert.deepStrictEqual(newStorage.data, {
+      MetaMetricsController: {
+        bar: 'baz',
+      },
+      foo: 'bar',
+    });
+  });
+
+  it('should not modify MetaMetricsController when metaMetricsSendCount is undefined', async function () {
+    const oldStorage = {
+      meta: {},
+      data: {
+        MetaMetricsController: {
+          bar: 'baz',
+        },
+        foo: 'bar',
+      },
+    };
+
+    const newStorage = await migration62.migrate(oldStorage);
+    assert.deepStrictEqual(newStorage.data, {
+      MetaMetricsController: {
+        bar: 'baz',
+      },
+      foo: 'bar',
+    });
+  });
+});
diff --git a/app/scripts/migrations/index.js b/app/scripts/migrations/index.js
index 175ee0044..389b4ef4a 100644
--- a/app/scripts/migrations/index.js
+++ b/app/scripts/migrations/index.js
@@ -66,6 +66,7 @@ const migrations = [
   require('./059').default,
   require('./060').default,
   require('./061').default,
+  require('./062').default,
 ];
 
 export default migrations;
diff --git a/test/e2e/fixtures/address-entry/state.json b/test/e2e/fixtures/address-entry/state.json
index 0bc9f3b9d..c17fd7e0c 100644
--- a/test/e2e/fixtures/address-entry/state.json
+++ b/test/e2e/fixtures/address-entry/state.json
@@ -128,7 +128,6 @@
       "knownMethodData": {},
       "lostIdentities": {},
       "metaMetricsId": null,
-      "metaMetricsSendCount": 0,
       "participateInMetaMetrics": false,
       "preferences": {
         "useNativeCurrencyAsPrimaryCurrency": true
diff --git a/test/e2e/fixtures/connected-state/state.json b/test/e2e/fixtures/connected-state/state.json
index baebea6b7..5d3d2f68e 100644
--- a/test/e2e/fixtures/connected-state/state.json
+++ b/test/e2e/fixtures/connected-state/state.json
@@ -138,7 +138,6 @@
       },
       "completedOnboarding": true,
       "metaMetricsId": null,
-      "metaMetricsSendCount": 0,
       "ipfsGateway": "dweb.link",
       "selectedAddress": "0x5cfe73b6021e818b776b421b1c4db2474086a7e1"
     },
diff --git a/test/e2e/fixtures/custom-rpc/state.json b/test/e2e/fixtures/custom-rpc/state.json
index aa93a938c..54d6bb4a8 100644
--- a/test/e2e/fixtures/custom-rpc/state.json
+++ b/test/e2e/fixtures/custom-rpc/state.json
@@ -129,7 +129,6 @@
       "knownMethodData": {},
       "lostIdentities": {},
       "metaMetricsId": null,
-      "metaMetricsSendCount": 0,
       "participateInMetaMetrics": false,
       "preferences": {
         "useNativeCurrencyAsPrimaryCurrency": true
diff --git a/test/e2e/fixtures/custom-token/state.json b/test/e2e/fixtures/custom-token/state.json
index 1d3a24437..bd85436ad 100644
--- a/test/e2e/fixtures/custom-token/state.json
+++ b/test/e2e/fixtures/custom-token/state.json
@@ -121,7 +121,6 @@
       "knownMethodData": {},
       "lostIdentities": {},
       "metaMetricsId": null,
-      "metaMetricsSendCount": 0,
       "participateInMetaMetrics": false,
       "preferences": {
         "useNativeCurrencyAsPrimaryCurrency": true
diff --git a/test/e2e/fixtures/import-ui/state.json b/test/e2e/fixtures/import-ui/state.json
index 1e6572574..758a85d66 100644
--- a/test/e2e/fixtures/import-ui/state.json
+++ b/test/e2e/fixtures/import-ui/state.json
@@ -125,8 +125,7 @@
     },
     "MetaMetricsController": {
       "participateInMetaMetrics": false,
-      "metaMetricsId": null,
-      "metaMetricsSendCount": 1
+      "metaMetricsId": null
     },
     "PermissionsController": {
       "permissionsRequests": [],
diff --git a/test/e2e/fixtures/imported-account/state.json b/test/e2e/fixtures/imported-account/state.json
index 7c4a2108a..407bbbd83 100644
--- a/test/e2e/fixtures/imported-account/state.json
+++ b/test/e2e/fixtures/imported-account/state.json
@@ -114,7 +114,6 @@
       "knownMethodData": {},
       "lostIdentities": {},
       "metaMetricsId": null,
-      "metaMetricsSendCount": 0,
       "participateInMetaMetrics": false,
       "preferences": {
         "useNativeCurrencyAsPrimaryCurrency": true
diff --git a/test/e2e/fixtures/localization/state.json b/test/e2e/fixtures/localization/state.json
index 009e8ac77..73a3b97b2 100644
--- a/test/e2e/fixtures/localization/state.json
+++ b/test/e2e/fixtures/localization/state.json
@@ -114,7 +114,6 @@
       "knownMethodData": {},
       "lostIdentities": {},
       "metaMetricsId": null,
-      "metaMetricsSendCount": 0,
       "participateInMetaMetrics": false,
       "preferences": {
         "showFiatInTestnets": true,
diff --git a/test/e2e/fixtures/metrics-enabled/state.json b/test/e2e/fixtures/metrics-enabled/state.json
index 8e0f082d5..67cbf9977 100644
--- a/test/e2e/fixtures/metrics-enabled/state.json
+++ b/test/e2e/fixtures/metrics-enabled/state.json
@@ -138,7 +138,6 @@
       },
       "completedOnboarding": true,
       "metaMetricsId": "fake-metrics-id",
-      "metaMetricsSendCount": 0,
       "ipfsGateway": "dweb.link",
       "selectedAddress": "0x5cfe73b6021e818b776b421b1c4db2474086a7e1"
     },
diff --git a/test/e2e/fixtures/send-edit/state.json b/test/e2e/fixtures/send-edit/state.json
index a5f3a8bab..6c9658c28 100644
--- a/test/e2e/fixtures/send-edit/state.json
+++ b/test/e2e/fixtures/send-edit/state.json
@@ -115,7 +115,6 @@
       "knownMethodData": {},
       "lostIdentities": {},
       "metaMetricsId": null,
-      "metaMetricsSendCount": 0,
       "participateInMetaMetrics": false,
       "preferences": {
         "useNativeCurrencyAsPrimaryCurrency": true
diff --git a/test/e2e/fixtures/threebox-enabled/state.json b/test/e2e/fixtures/threebox-enabled/state.json
index f182c5d47..abad9782b 100644
--- a/test/e2e/fixtures/threebox-enabled/state.json
+++ b/test/e2e/fixtures/threebox-enabled/state.json
@@ -120,8 +120,7 @@
     },
     "MetaMetricsController": {
       "metaMetricsId": null,
-      "participateInMetaMetrics": false,
-      "metaMetricsSendCount": 0
+      "participateInMetaMetrics": false
     },
     "ThreeBoxController": {
       "threeBoxSyncingAllowed": true,
diff --git a/ui/ducks/metamask/metamask.js b/ui/ducks/metamask/metamask.js
index 21a0476ea..0047b6904 100644
--- a/ui/ducks/metamask/metamask.js
+++ b/ui/ducks/metamask/metamask.js
@@ -33,7 +33,6 @@ export default function reduceMetamask(state = {}, action) {
     completedOnboarding: false,
     knownMethodData: {},
     participateInMetaMetrics: null,
-    metaMetricsSendCount: 0,
     nextNonce: null,
     conversionRate: null,
     nativeCurrency: 'ETH',
@@ -126,12 +125,6 @@ export default function reduceMetamask(state = {}, action) {
         participateInMetaMetrics: action.value,
       };
 
-    case actionConstants.SET_METAMETRICS_SEND_COUNT:
-      return {
-        ...metamaskState,
-        metaMetricsSendCount: action.value,
-      };
-
     case actionConstants.SET_USE_BLOCKIE:
       return {
         ...metamaskState,
diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
index 9f4904182..6c631b921 100644
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -86,8 +86,6 @@ export default class ConfirmTransactionBase extends Component {
     hideSubtitle: PropTypes.bool,
     identiconAddress: PropTypes.string,
     onEdit: PropTypes.func,
-    setMetaMetricsSendCount: PropTypes.func,
-    metaMetricsSendCount: PropTypes.number,
     subtitleComponent: PropTypes.node,
     title: PropTypes.string,
     advancedInlineGasShown: PropTypes.bool,
@@ -474,35 +472,16 @@ export default class ConfirmTransactionBase extends Component {
   }
 
   handleCancel() {
-    const { metricsEvent } = this.context;
     const {
       txData,
       cancelTransaction,
       history,
       mostRecentOverviewPage,
       clearConfirmTransaction,
-      actionKey,
-      txData: { origin },
-      methodData = {},
       updateCustomNonce,
     } = this.props;
 
     this._removeBeforeUnload();
-    metricsEvent({
-      eventOpts: {
-        category: 'Transactions',
-        action: 'Confirm Screen',
-        name: 'Cancel',
-      },
-      customVariables: {
-        recipientKnown: null,
-        functionType:
-          actionKey ||
-          getMethodName(methodData.name) ||
-          TRANSACTION_TYPES.CONTRACT_INTERACTION,
-        origin,
-      },
-    });
     updateCustomNonce('');
     cancelTransaction(txData).then(() => {
       clearConfirmTransaction();
@@ -511,18 +490,12 @@ export default class ConfirmTransactionBase extends Component {
   }
 
   handleSubmit() {
-    const { metricsEvent } = this.context;
     const {
-      txData: { origin },
       sendTransaction,
       clearConfirmTransaction,
       txData,
       history,
-      actionKey,
       mostRecentOverviewPage,
-      metaMetricsSendCount = 0,
-      setMetaMetricsSendCount,
-      methodData = {},
       updateCustomNonce,
     } = this.props;
     const { submitting } = this.state;
@@ -538,44 +511,27 @@ export default class ConfirmTransactionBase extends Component {
       },
       () => {
         this._removeBeforeUnload();
-        metricsEvent({
-          eventOpts: {
-            category: 'Transactions',
-            action: 'Confirm Screen',
-            name: 'Transaction Completed',
-          },
-          customVariables: {
-            recipientKnown: null,
-            functionType:
-              actionKey ||
-              getMethodName(methodData.name) ||
-              TRANSACTION_TYPES.CONTRACT_INTERACTION,
-            origin,
-          },
-        });
 
-        setMetaMetricsSendCount(metaMetricsSendCount + 1).then(() => {
-          sendTransaction(txData)
-            .then(() => {
-              clearConfirmTransaction();
-              this.setState(
-                {
-                  submitting: false,
-                },
-                () => {
-                  history.push(mostRecentOverviewPage);
-                  updateCustomNonce('');
-                },
-              );
-            })
-            .catch((error) => {
-              this.setState({
+        sendTransaction(txData)
+          .then(() => {
+            clearConfirmTransaction();
+            this.setState(
+              {
                 submitting: false,
-                submitError: error.message,
-              });
-              updateCustomNonce('');
+              },
+              () => {
+                history.push(mostRecentOverviewPage);
+                updateCustomNonce('');
+              },
+            );
+          })
+          .catch((error) => {
+            this.setState({
+              submitting: false,
+              submitError: error.message,
             });
-        });
+            updateCustomNonce('');
+          });
       },
     );
   }
@@ -642,18 +598,7 @@ export default class ConfirmTransactionBase extends Component {
   }
 
   _beforeUnload = () => {
-    const { txData: { origin, id } = {}, cancelTransaction } = this.props;
-    const { metricsEvent } = this.context;
-    metricsEvent({
-      eventOpts: {
-        category: 'Transactions',
-        action: 'Confirm Screen',
-        name: 'Cancel Tx Via Notification Close',
-      },
-      customVariables: {
-        origin,
-      },
-    });
+    const { txData: { id } = {}, cancelTransaction } = this.props;
     cancelTransaction({ id });
   };
 
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 9266be18a..09361ad93 100644
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js
+++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js
@@ -10,7 +10,6 @@ import {
   cancelTxs,
   updateAndApproveTx,
   showModal,
-  setMetaMetricsSendCount,
   updateTransaction,
   getNextNonce,
   tryReverseResolveAddress,
@@ -75,7 +74,6 @@ const mapStateToProps = (state, ownProps) => {
     assetImages,
     network,
     unapprovedTxs,
-    metaMetricsSendCount,
     nextNonce,
     provider: { chainId },
   } = metamask;
@@ -185,7 +183,6 @@ const mapStateToProps = (state, ownProps) => {
     insufficientBalance,
     hideSubtitle: !getShouldShowFiat(state),
     hideFiatConversion: !getShouldShowFiat(state),
-    metaMetricsSendCount,
     type,
     nextNonce,
     mostRecentOverviewPage: getMostRecentOverviewPage(state),
@@ -233,7 +230,6 @@ export const mapDispatchToProps = (dispatch) => {
     cancelAllTransactions: (txList) => dispatch(cancelTxs(txList)),
     sendTransaction: (txData) =>
       dispatch(updateAndApproveTx(customNonceMerge(txData))),
-    setMetaMetricsSendCount: (val) => dispatch(setMetaMetricsSendCount(val)),
     getNextNonce: () => dispatch(getNextNonce()),
     setDefaultHomeActiveTabName: (tabName) =>
       dispatch(setDefaultHomeActiveTabName(tabName)),
diff --git a/ui/store/actionConstants.js b/ui/store/actionConstants.js
index 977c6dee2..c96088f2f 100644
--- a/ui/store/actionConstants.js
+++ b/ui/store/actionConstants.js
@@ -64,7 +64,6 @@ export const UPDATE_CUSTOM_NONCE = 'UPDATE_CUSTOM_NONCE';
 export const SET_IPFS_GATEWAY = 'SET_IPFS_GATEWAY';
 
 export const SET_PARTICIPATE_IN_METAMETRICS = 'SET_PARTICIPATE_IN_METAMETRICS';
-export const SET_METAMETRICS_SEND_COUNT = 'SET_METAMETRICS_SEND_COUNT';
 
 // locale
 export const SET_CURRENT_LOCALE = 'SET_CURRENT_LOCALE';
diff --git a/ui/store/actions.js b/ui/store/actions.js
index 967fb3ca2..8945de10b 100644
--- a/ui/store/actions.js
+++ b/ui/store/actions.js
@@ -1987,27 +1987,6 @@ export function setParticipateInMetaMetrics(val) {
   };
 }
 
-export function setMetaMetricsSendCount(val) {
-  return (dispatch) => {
-    log.debug(`background.setMetaMetricsSendCount`);
-    return new Promise((resolve, reject) => {
-      background.setMetaMetricsSendCount(val, (err) => {
-        if (err) {
-          dispatch(displayWarning(err.message));
-          reject(err);
-          return;
-        }
-
-        dispatch({
-          type: actionConstants.SET_METAMETRICS_SEND_COUNT,
-          value: val,
-        });
-        resolve(val);
-      });
-    });
-  };
-}
-
 export function setUseBlockie(val) {
   return (dispatch) => {
     dispatch(showLoadingIndication());

From ba3f51d6ed812870b0bd3649ad3094a7994a087c Mon Sep 17 00:00:00 2001
From: Daniel <80175477+dan437@users.noreply.github.com>
Date: Fri, 25 Jun 2021 15:10:24 +0200
Subject: [PATCH 048/141] Add support for fiat on-ramp via Transak (#11376)

---
 app/_locales/en/messages.json                 |   9 ++
 app/images/transak.svg                        | 112 ++++++++++++++++++
 app/scripts/constants/on-ramp.js              |   1 +
 app/scripts/lib/buy-eth-url.js                |  19 +++
 app/scripts/lib/buy-eth-url.test.js           |  12 +-
 .../deposit-ether-modal.component.js          |  27 +++++
 .../deposit-ether-modal.container.js          |   3 +
 7 files changed, 182 insertions(+), 1 deletion(-)
 create mode 100644 app/images/transak.svg
 create mode 100644 app/scripts/constants/on-ramp.js

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 54ede46cd..521cebef2 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -268,6 +268,12 @@
   "buy": {
     "message": "Buy"
   },
+  "buyWithTransak": {
+    "message": "Buy ETH with Transak"
+  },
+  "buyWithTransakDescription": {
+    "message": "Transak supports debit card and bank transfers (depending on location) in 59+ countries. ETH deposits into your MetaMask account."
+  },
   "buyWithWyre": {
     "message": "Buy ETH with Wyre"
   },
@@ -420,6 +426,9 @@
   "continue": {
     "message": "Continue"
   },
+  "continueToTransak": {
+    "message": "Continue to Transak"
+  },
   "continueToWyre": {
     "message": "Continue to Wyre"
   },
diff --git a/app/images/transak.svg b/app/images/transak.svg
new file mode 100644
index 000000000..8f8d7790a
--- /dev/null
+++ b/app/images/transak.svg
@@ -0,0 +1,112 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 2066.8 800" style="enable-background:new 0 0 2066.8 800;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:#2970E2;}
+	.st2{fill:#D1D9E6;}
+	.st3{fill:#FFFFFF;}
+	.st4{fill:url(#SVGID_2_);}
+</style>
+<g id="transparent_1_">
+	<g id="logo_4_">
+		
+			<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="119.932" y1="155.9459" x2="624.022" y2="547.843" gradientTransform="matrix(1 0 0 1 0 50)">
+			<stop  offset="0.1304" style="stop-color:#3495F7"/>
+			<stop  offset="0.3063" style="stop-color:#2B87F2"/>
+			<stop  offset="0.6392" style="stop-color:#1461E5"/>
+			<stop  offset="0.7232" style="stop-color:#0E57E1"/>
+		</linearGradient>
+		<path class="st0" d="M566.4,640.4H175.3c-22,0-39.8-17.8-39.8-39.8V201.5c0-22,17.8-39.8,39.8-39.8h391.2
+			c22,0,39.8,17.8,39.8,39.8v399.1C606.3,622.5,588.5,640.4,566.4,640.4z"/>
+		<path class="st1" d="M606.3,451.6v148.9c0,22-17.8,39.8-39.8,39.8H417.6L606.3,451.6z"/>
+		<g>
+			<g>
+				<g>
+					<path class="st2" d="M293.4,449.7l138.9-144.4c10.6-10.6,27.2-9.8,38.3,1.2l80.3,77.4c8.5,8.2,8.3,24.4,0.4,33.1
+						c-10.3,10.3-21.9,11-37.5,0.4l-58.2-63L309.3,493.5c-9.8,7.6-19.8,14-35.2,4.1c-5.3-7.1,5.2-21,1.1-25.1L293.4,449.7z"/>
+				</g>
+				<g>
+					<path class="st2" d="M287.1,498.2c-11.9-0.4-21.2-8.1-21.2-17.3l0.7-165.1c0-9.1,8.5-20.2,20.4-20.6
+						c15.8,0,22.7,12.8,22.7,22.3v163.8C309.8,490.8,299.5,498.5,287.1,498.2z"/>
+				</g>
+				<g>
+					<path class="st2" d="M449.1,502.7c-14.7,0-20.9-10.9-20.9-19.5V331.8c0-8.5,9.1-18.9,20.9-19.3c12.3-0.4,22.5,10,22.5,18.9
+						v149.7C471.6,491.7,464.3,502.7,449.1,502.7z"/>
+				</g>
+			</g>
+			<g>
+				<g>
+					<path class="st3" d="M282.1,500c-9.1-0.4-16.2-8.1-16.2-17.3V317.6c0-9.1,7.1-20.2,16.2-20.6c9.5-0.4,17.5,10.6,17.5,20.2v166
+						C299.6,492.7,291.7,500.4,282.1,500z"/>
+				</g>
+				<g>
+					<path class="st3" d="M444.5,501.7c-9.3,0-16.9-10.8-16.9-20.2V318.9c0-9.3,7.6-16.9,16.9-16.9c9.3,0,16.9,7.6,16.9,16.9v162.7
+						C461.3,490.8,453.8,501.7,444.5,501.7z"/>
+				</g>
+				<g>
+					<path class="st3" d="M282.8,498.4c-5.5,0-11-2.1-15.1-6.3l-76.5-76.7c-8.3-8.4-8.3-21.9,0.1-30.3c8.4-8.3,21.9-8.3,30.3,0.1
+						l61.6,62l147.4-140.3c8.3-7.9,21.3-7.9,29.6,0.1l80.2,77.4c8.5,8.2,8.7,21.7,0.6,30.3c-8.1,8.5-21.7,8.7-30.3,0.6l-65.5-63.1
+						L297.5,492.5C293.4,496.4,288.1,498.4,282.8,498.4z"/>
+				</g>
+			</g>
+			<path class="st3" d="M429.7,378.8l-9.3,8.8c0,0,2.6-14.7-4.9-7.6c-7.6,7.2,11.6-18.2,11.6-18.2l3.9,4.9L429.7,378.8z"/>
+			<path class="st3" d="M461.3,376.6c0,0,0.5-9,10.3,6.4v-12.1l-10.6-5.5L461.3,376.6z"/>
+			<path class="st3" d="M299.7,419.2c0,0,1.4,10,10.2-2.9v12.1l-10.6,5.5L299.7,419.2z"/>
+		</g>
+	</g>
+	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="712.4824" y1="419.8029" x2="1947.4551" y2="419.8029">
+		<stop  offset="0" style="stop-color:#3495F7"/>
+		<stop  offset="0.4939" style="stop-color:#1461E5"/>
+		<stop  offset="1" style="stop-color:#0E57E1"/>
+	</linearGradient>
+	<path class="st4" d="M809.3,337.3l2.1,0.7c0.3,5.7,0.5,16.4,0.5,32.1c0,1-1.5,1.4-4.5,1.4h-20.7c-1.9,0-2.9,1.5-2.9,4.5v122.8
+		c0,0.2-0.4,0.5-1.2,1.1c-0.8,0.6-1.3,0.8-1.7,0.8h-37.4l-1.7-1.4c-0.5-0.5-0.7-37.8-0.7-111.9v-14.8c-19.2,0-28.8-1.2-28.8-3.6
+		v-30.5c0-0.2,0.6-0.6,1.9-1.4h42.8c2.2,0.3,3.6,0.6,4,0.7c0.5,0,0.7-0.2,0.7-0.7H809.3z M868.1,336.9h65.9
+		c15.1,0,28.4,5.5,39.9,16.5c11.5,11,17.3,24.2,17.3,39.4c0,11.9-3.4,22.2-10.1,30.9c-6.7,8.7-15.8,15.5-27.3,20.2
+		c-0.5,0-0.7,0.4-0.7,1.2v0.2c0.2,0.2,0.2,0.3,0.2,0.5l40.7,49.7c0.5,0.8,1,1.7,1.4,2.6s0.8,1.6,1.1,2c0.2,0.4,0.4,0.7,0.4,0.8
+		c0,0.5-2.6,0.9-7.9,1.3c-5.2,0.4-8.7,0.6-10.5,0.6c-1.3,0-2.1-0.2-2.6-0.7h-25.5c-1.6-0.2-2.9-1-4-2.6l-33.1-39
+		c-0.2-0.2-0.5-0.6-1-1.2c-0.5-0.6-1-1.1-1.4-1.4c-0.5-0.3-1-0.5-1.4-0.5c-0.3,0-0.7,1-1.2,3.1v38.6c0,1.3-0.5,1.9-1.4,1.9h-32.4
+		c-2.9,0-4.8-0.6-5.7-1.9c-1-1.3-1.6-3.4-1.9-6.4c0-14.1,0.1-32,0.4-53.7c0.2-21.7,0.4-38,0.4-48.9c0-1.7-0.1-8.1-0.2-19l-0.5-16.4
+		C867.4,343.1,867.8,337.2,868.1,336.9z M948.3,392.3c0-4.4-1-8.3-3.1-11.7c-4-6.2-12.2-9.3-24.8-9.3c-2.2,0-5.6,0.2-10,0.5
+		l-2.1,2.4c0,2.1-0.1,5.3-0.2,9.6c-0.2,4.4-0.3,8.1-0.4,11.1c-0.1,3-0.1,5.2-0.1,6.4c0,10.6,1,16.6,2.9,17.9h2.6
+		c13.2-0.3,22.3-2.1,27.5-5.5C945.8,410.4,948.3,403.3,948.3,392.3z M1102.8,335h28.3c0.8,0,3.1,4.4,6.8,13.1
+		c3.7,8.7,5.6,13.6,5.6,14.5c3.3,8.7,21.3,53.1,54,133c0,2.2-1,3.6-2.9,4.2c-1.9,0.6-5.4,0.8-10.5,0.8l-12.1-0.2
+		c-8.1-0.2-14.2-0.2-18.3-0.2c-0.3-1-1-2.6-1.9-5c-1-2.4-1.7-4.2-2.3-5.5c-0.6-1.3-1.4-2.9-2.5-4.8c-1.1-1.9-2.3-3.6-3.6-5.2
+		c-1.1,0-3.3-0.2-6.7-0.6c-3.3-0.4-6.3-0.6-9-0.6l-29.8,0.5c-0.5,0-1.9-0.1-4.3-0.2c-2.4-0.2-3.7-0.2-3.8-0.2
+		c-2.9,0-5.3,3.7-7.4,11.2c-2.1,7.5-3.8,11.7-5.2,12.6c-4.3,0.2-9.6,0-15.8-0.4c-6.3-0.4-11.5-0.6-15.8-0.6c-6.7,0-10-1-10-2.9
+		c0-0.3,0-0.7,0.1-1.2c0.1-0.5,0.1-0.8,0.1-1l13.8-40c2.1-4.1,4.6-10.3,7.5-18.6c2.9-8.2,4.8-13.3,5.6-15.2
+		c3.2-8.2,8.6-22,16.3-41.2c7.7-19.2,13.5-34,17.5-44.5C1096.8,335.6,1098.8,335,1102.8,335z M1105.2,446.1h6.2
+		c11.4-0.3,17.1-1,17.1-1.9c0-2.9-2.5-10.1-7.4-21.7c-1.9-4.6-3-7.1-3.3-7.6l-3.1-7.4c-0.8,0-3.5,5.5-8,16.4
+		c-4.5,10.9-6.8,17.4-6.8,19.3C1099.9,445.1,1101.7,446.1,1105.2,446.1z M1388.2,426.3c0,0.3-0.1,1-0.2,2.1
+		c-0.2,1.1-0.3,2.2-0.5,3.3l-0.2,1.4c0,6.8,0.2,17.1,0.5,30.7c0.3,13.6,0.5,23.8,0.5,30.5c0,4.6-1,6.9-2.9,6.9h-30.9
+		c-2.5,0-4.4-0.9-5.5-2.6l-29.3-43.8c-0.2-0.6-0.9-1.7-2.1-3.1c-1.3-1.4-1.9-2.2-1.9-2.4l-24-34.7l-2.9-3.1l-0.5,1
+		c0,58.9-0.7,88.3-2.1,88.3h-37.6l-1.4-0.7c0-12.2,0.2-33.2,0.5-63c0.3-29.8,0.5-51.8,0.5-66.3c0-10.9-0.2-19.2-0.5-24.8l1-6.9
+		l4.8-1l30,1c0.8,0,1.7,0.8,2.9,2.4c1.1,1.6,1.8,2.9,2.1,3.8l22.4,32.4c0.3,0.6,0.9,1.5,1.8,2.7c0.9,1.2,1.5,2.1,1.8,2.7l30.7,42.1
+		c0.5,1.1,1.1,1.7,1.9,1.7c0.5,0,0.7-0.2,0.7-0.7v-85.9l1.4-1.2c0.2-0.2,3.6-0.2,10.2-0.2c18.7,0,28.1,0.3,28.1,1l1,1.4V426.3z
+		 M1513.3,448.5c-2.4-2.4-5.4-4.8-9.2-7.3c-3.7-2.5-8-5.1-12.9-7.9c-4.8-2.8-7.8-4.6-8.9-5.4c-20.5-13-30.7-28.7-30.7-47.1
+		c0-15.4,5.4-26.9,16.2-34.5c10.8-7.6,24.8-11.4,41.9-11.4c9.4,0,18.8,1.9,28.3,5.7c1.7,0.6,4.6,1.9,8.4,3.8c3.9,1.9,5.8,3.3,5.8,4
+		l-0.2,1.2c0,0.2-0.2,0.4-0.5,0.8c-0.3,0.4-0.5,0.8-0.5,1.1c-4.9,10.2-9.7,18.4-14.3,24.8c-0.2,0.5-0.6,0.7-1.2,0.7
+		c-0.6,0-4.3-1.3-10.9-3.9c-6.7-2.6-11.8-3.9-15.5-3.9c-3.5,0-6.7,1-9.8,2.9c-3,1.9-4.5,4.5-4.5,7.9c0,4.3,2.4,8.3,7.1,12.1
+		c3.2,2.4,9.5,6.6,19,12.6c2.1,1.4,4.8,3.3,8.1,5.6c3.3,2.3,5.9,4.1,7.9,5.5c1.9,1.3,4,3,6.4,5c2.4,2,4.4,3.9,5.9,5.8
+		c3.8,4.9,6.4,9.4,7.7,13.3c1.3,4,2,8.8,2,14.5c0,14.9-5.6,27.2-16.9,36.8c-11.3,9.6-24.7,14.4-40.2,14.4c-17,0-32.9-4.1-47.8-12.4
+		c-6.7-4.1-10-6.6-10-7.4v-1c7-12.7,12.8-22.5,17.4-29.5c2.2,0,4.8,1.1,7.7,3.3c2.9,2.2,4.6,3.4,5.1,3.6c8.4,4.3,18,6.4,28.8,6.4
+		c9.4,0,14-3.5,14-10.5C1517.4,455.2,1516,452,1513.3,448.5z M1671.1,335h28.3c0.8,0,3.1,4.4,6.8,13.1c3.7,8.7,5.6,13.6,5.6,14.5
+		c3.3,8.7,21.3,53.1,54,133c0,2.2-1,3.6-2.9,4.2c-1.9,0.6-5.4,0.8-10.5,0.8l-12.1-0.2c-8.1-0.2-14.2-0.2-18.3-0.2
+		c-0.3-1-1-2.6-1.9-5c-1-2.4-1.7-4.2-2.3-5.5c-0.6-1.3-1.4-2.9-2.5-4.8c-1.1-1.9-2.3-3.6-3.6-5.2c-1.1,0-3.3-0.2-6.7-0.6
+		c-3.3-0.4-6.3-0.6-9-0.6l-29.8,0.5c-0.5,0-1.9-0.1-4.3-0.2c-2.4-0.2-3.7-0.2-3.8-0.2c-2.9,0-5.3,3.7-7.4,11.2
+		c-2.1,7.5-3.8,11.7-5.2,12.6c-4.3,0.2-9.6,0-15.8-0.4c-6.3-0.4-11.5-0.6-15.8-0.6c-6.7,0-10-1-10-2.9c0-0.3,0-0.7,0.1-1.2
+		c0.1-0.5,0.1-0.8,0.1-1l13.8-40c2.1-4.1,4.6-10.3,7.5-18.6c2.9-8.2,4.8-13.3,5.6-15.2c3.2-8.2,8.6-22,16.3-41.2
+		c7.7-19.2,13.5-34,17.5-44.5C1665.1,335.6,1667.2,335,1671.1,335z M1673.5,446.1h6.2c11.4-0.3,17.1-1,17.1-1.9
+		c0-2.9-2.5-10.1-7.4-21.7c-1.9-4.6-3-7.1-3.3-7.6l-3.1-7.4c-0.8,0-3.5,5.5-8,16.4s-6.8,17.4-6.8,19.3
+		C1668.3,445.1,1670,446.1,1673.5,446.1z M1851.1,334c4.9,0,7.4,0.9,7.4,2.6v48.6c0,1.6,0.2,2.4,0.5,2.4c1.1,0,2.5-1,4.2-3.1
+		c1.7-2.1,3.4-4.4,5.1-7c1.7-2.6,3.1-4.3,4-5.1l26.7-36.2c0.8-1,1.9-1.4,3.3-1.4h35.2l5.7,1c0.3,0,0.5,0.3,0.5,1
+		c0,1.1-0.2,1.8-0.5,2.1l-10.2,16.2l-1.4,1l-30.5,40.7c-0.5,0.5-0.7,1.1-0.7,1.9c0,1.1,0.2,2.1,0.7,2.9l46.2,95.4c0,0.2,0,0.4,0,0.7
+		l0.2,0.7c0,2.7-4.8,4-14.3,4c-5.6,0-12-0.2-19.4-0.7c-7.4-0.5-11.5-0.7-12.3-0.7l-1.7-1.2c-1-1-9.8-19.3-26.7-55
+		c-0.2-1.3-1.3-3.8-3.3-7.6c-0.5,0-2.3,2.2-5.6,6.7c-3.3,4.4-5,7.1-5.4,7.9c0,2.9,0,7.5,0.1,13.8c0.1,6.3,0.1,12.3,0.1,17.8
+		c0,11.3-1.3,17.1-3.8,17.6c-3.2,0-7.1,0.1-11.9,0.4c-4.8,0.2-8,0.4-9.8,0.4c-2.7,0-6.3-0.3-10.9-1c-4.6-0.6-6.9-1.2-6.9-1.7v-81.9
+		c1-7.6,1.4-12,1.4-13.1c0-7.1-0.3-17.8-1-32.1c-0.6-14.3-1-24.9-1-31.9c0-2.9,0.6-4.6,1.9-5.2C1825.4,334.2,1836.6,334,1851.1,334z
+		"/>
+</g>
+</svg>
diff --git a/app/scripts/constants/on-ramp.js b/app/scripts/constants/on-ramp.js
new file mode 100644
index 000000000..335d7a9ad
--- /dev/null
+++ b/app/scripts/constants/on-ramp.js
@@ -0,0 +1 @@
+export const TRANSAK_API_KEY = '25ac1309-a49b-4411-b20e-5e56c61a5b1c'; // It's a public key, which will be included in a URL for Transak.
diff --git a/app/scripts/lib/buy-eth-url.js b/app/scripts/lib/buy-eth-url.js
index 2cb1b0e81..f36bdb468 100644
--- a/app/scripts/lib/buy-eth-url.js
+++ b/app/scripts/lib/buy-eth-url.js
@@ -5,6 +5,23 @@ import {
   RINKEBY_CHAIN_ID,
   ROPSTEN_CHAIN_ID,
 } from '../../../shared/constants/network';
+import { TRANSAK_API_KEY } from '../constants/on-ramp';
+
+/**
+ * Create a Transak Checkout URL.
+ * API docs here: https://www.notion.so/Query-Parameters-9ec523df3b874ec58cef4fa3a906f238
+ * @param {String} address Ethereum destination address
+ * @returns String
+ */
+const createTransakUrl = (address) => {
+  const queryParams = new URLSearchParams({
+    apiKey: TRANSAK_API_KEY,
+    hostURL: 'https://metamask.io',
+    defaultCryptoCurrency: 'ETH',
+    walletAddress: address,
+  });
+  return `https://global.transak.com/?${queryParams}`;
+};
 
 /**
  * Gives the caller a url at which the user can acquire eth, depending on the network they are in
@@ -26,6 +43,8 @@ export default function getBuyEthUrl({ chainId, address, service }) {
   switch (service) {
     case 'wyre':
       return `https://pay.sendwyre.com/purchase?dest=ethereum:${address}&destCurrency=ETH&accountId=AC-7AG3W4XH4N2&paymentMethod=debit-card`;
+    case 'transak':
+      return createTransakUrl(address);
     case 'metamask-faucet':
       return 'https://faucet.metamask.io/';
     case 'rinkeby-faucet':
diff --git a/app/scripts/lib/buy-eth-url.test.js b/app/scripts/lib/buy-eth-url.test.js
index 01837c8ef..c8d7dca0c 100644
--- a/app/scripts/lib/buy-eth-url.test.js
+++ b/app/scripts/lib/buy-eth-url.test.js
@@ -5,6 +5,7 @@ import {
   RINKEBY_CHAIN_ID,
   ROPSTEN_CHAIN_ID,
 } from '../../../shared/constants/network';
+import { TRANSAK_API_KEY } from '../constants/on-ramp';
 import getBuyEthUrl from './buy-eth-url';
 
 describe('buy-eth-url', function () {
@@ -23,7 +24,7 @@ describe('buy-eth-url', function () {
     chainId: KOVAN_CHAIN_ID,
   };
 
-  it('returns wyre url with address for network 1', function () {
+  it('returns Wyre url with an ETH address for Ethereum mainnet', function () {
     const wyreUrl = getBuyEthUrl(mainnet);
 
     assert.equal(
@@ -32,6 +33,15 @@ describe('buy-eth-url', function () {
     );
   });
 
+  it('returns Transak url with an ETH address for Ethereum mainnet', function () {
+    const transakUrl = getBuyEthUrl({ ...mainnet, service: 'transak' });
+
+    assert.equal(
+      transakUrl,
+      `https://global.transak.com/?apiKey=${TRANSAK_API_KEY}&hostURL=https%3A%2F%2Fmetamask.io&defaultCryptoCurrency=ETH&walletAddress=0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc`,
+    );
+  });
+
   it('returns metamask ropsten faucet for network 3', function () {
     const ropstenUrl = getBuyEthUrl(ropsten);
     assert.equal(ropstenUrl, 'https://faucet.metamask.io/');
diff --git a/ui/components/app/modals/deposit-ether-modal/deposit-ether-modal.component.js b/ui/components/app/modals/deposit-ether-modal/deposit-ether-modal.component.js
index 3f1775a47..59fb89831 100644
--- a/ui/components/app/modals/deposit-ether-modal/deposit-ether-modal.component.js
+++ b/ui/components/app/modals/deposit-ether-modal/deposit-ether-modal.component.js
@@ -14,6 +14,7 @@ export default class DepositEtherModal extends Component {
     isTestnet: PropTypes.bool.isRequired,
     isMainnet: PropTypes.bool.isRequired,
     toWyre: PropTypes.func.isRequired,
+    toTransak: PropTypes.func.isRequired,
     address: PropTypes.string.isRequired,
     toFaucet: PropTypes.func.isRequired,
     hideWarning: PropTypes.func.isRequired,
@@ -87,6 +88,7 @@ export default class DepositEtherModal extends Component {
     const {
       chainId,
       toWyre,
+      toTransak,
       address,
       toFaucet,
       isTestnet,
@@ -138,6 +140,31 @@ export default class DepositEtherModal extends Component {
               },
               hide: !isMainnet,
             })}
+            {this.renderRow({
+              logo: (
+                <div
+                  className="deposit-ether-modal__logo"
+                  style={{
+                    backgroundImage: "url('./images/transak.svg')",
+                    height: '60px',
+                  }}
+                />
+              ),
+              title: this.context.t('buyWithTransak'),
+              text: this.context.t('buyWithTransakDescription'),
+              buttonLabel: this.context.t('continueToTransak'),
+              onButtonClick: () => {
+                this.context.metricsEvent({
+                  eventOpts: {
+                    category: 'Accounts',
+                    action: 'Deposit Ether',
+                    name: 'Click buy Ether via Transak',
+                  },
+                });
+                toTransak(address);
+              },
+              hide: !isMainnet,
+            })}
             {this.renderRow({
               logo: (
                 <img
diff --git a/ui/components/app/modals/deposit-ether-modal/deposit-ether-modal.container.js b/ui/components/app/modals/deposit-ether-modal/deposit-ether-modal.container.js
index b393f4497..908408ab3 100644
--- a/ui/components/app/modals/deposit-ether-modal/deposit-ether-modal.container.js
+++ b/ui/components/app/modals/deposit-ether-modal/deposit-ether-modal.container.js
@@ -27,6 +27,9 @@ function mapDispatchToProps(dispatch) {
     toWyre: (address) => {
       dispatch(buyEth({ service: 'wyre', address }));
     },
+    toTransak: (address) => {
+      dispatch(buyEth({ service: 'transak', address }));
+    },
     hideModal: () => {
       dispatch(hideModal());
     },

From cb652c0fae6b7ef103a4f3dff0214db66226dba9 Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Fri, 25 Jun 2021 09:52:18 -0500
Subject: [PATCH 049/141] remove unused sufficient balance method (#11381)

this method relied on gasPrice being present and is safe to remove
---
 app/scripts/lib/util.js      | 35 -------------------------------
 app/scripts/lib/util.test.js | 40 +-----------------------------------
 2 files changed, 1 insertion(+), 74 deletions(-)

diff --git a/app/scripts/lib/util.js b/app/scripts/lib/util.js
index 126e5c4f6..9c343ecf6 100644
--- a/app/scripts/lib/util.js
+++ b/app/scripts/lib/util.js
@@ -1,4 +1,3 @@
-import { strict as assert } from 'assert';
 import extension from 'extensionizer';
 import { stripHexPrefix } from 'ethereumjs-util';
 import BN from 'bn.js';
@@ -70,39 +69,6 @@ const getPlatform = (_) => {
   return PLATFORM_FIREFOX;
 };
 
-/**
- * Checks whether a given balance of ETH, represented as a hex string, is sufficient to pay a value plus a gas fee
- *
- * @param {Object} txParams - Contains data about a transaction
- * @param {string} txParams.gas - The gas for a transaction
- * @param {string} txParams.gasPrice - The price per gas for the transaction
- * @param {string} txParams.value - The value of ETH to send
- * @param {string} hexBalance - A balance of ETH represented as a hex string
- * @returns {boolean} Whether the balance is greater than or equal to the value plus the value of gas times gasPrice
- *
- */
-function sufficientBalance(txParams, hexBalance) {
-  // validate hexBalance is a hex string
-  assert.equal(
-    typeof hexBalance,
-    'string',
-    'sufficientBalance - hexBalance is not a hex string',
-  );
-  assert.equal(
-    hexBalance.slice(0, 2),
-    '0x',
-    'sufficientBalance - hexBalance is not a hex string',
-  );
-
-  const balance = hexToBn(hexBalance);
-  const value = hexToBn(txParams.value);
-  const gasLimit = hexToBn(txParams.gas);
-  const gasPrice = hexToBn(txParams.gasPrice);
-
-  const maxCost = value.add(gasLimit.mul(gasPrice));
-  return balance.gte(maxCost);
-}
-
 /**
  * Converts a hex string to a BN object
  *
@@ -183,7 +149,6 @@ function bnToHex(inputBn) {
 export {
   getPlatform,
   getEnvironmentType,
-  sufficientBalance,
   hexToBn,
   BnMultiplyByFraction,
   checkForError,
diff --git a/app/scripts/lib/util.test.js b/app/scripts/lib/util.test.js
index c2753df56..f21c10d5e 100644
--- a/app/scripts/lib/util.test.js
+++ b/app/scripts/lib/util.test.js
@@ -7,7 +7,7 @@ import {
   ENVIRONMENT_TYPE_FULLSCREEN,
   ENVIRONMENT_TYPE_BACKGROUND,
 } from '../../../shared/constants/app';
-import { getEnvironmentType, sufficientBalance } from './util';
+import { getEnvironmentType } from './util';
 
 describe('app utils', function () {
   describe('getEnvironmentType', function () {
@@ -68,44 +68,6 @@ describe('app utils', function () {
     });
   });
 
-  describe('SufficientBalance', function () {
-    it('returns true if max tx cost is equal to balance.', function () {
-      const tx = {
-        value: '0x1',
-        gas: '0x2',
-        gasPrice: '0x3',
-      };
-      const balance = '0x8';
-
-      const result = sufficientBalance(tx, balance);
-      assert.ok(result, 'sufficient balance found.');
-    });
-
-    it('returns true if max tx cost is less than balance.', function () {
-      const tx = {
-        value: '0x1',
-        gas: '0x2',
-        gasPrice: '0x3',
-      };
-      const balance = '0x9';
-
-      const result = sufficientBalance(tx, balance);
-      assert.ok(result, 'sufficient balance found.');
-    });
-
-    it('returns false if max tx cost is more than balance.', function () {
-      const tx = {
-        value: '0x1',
-        gas: '0x2',
-        gasPrice: '0x3',
-      };
-      const balance = '0x6';
-
-      const result = sufficientBalance(tx, balance);
-      assert.ok(!result, 'insufficient balance found.');
-    });
-  });
-
   describe('isPrefixedFormattedHexString', function () {
     it('should return true for valid hex strings', function () {
       assert.equal(

From a1d7271ed7f43d1f89eabfa04d83d903a75dae3d Mon Sep 17 00:00:00 2001
From: Daniel <80175477+dan437@users.noreply.github.com>
Date: Fri, 25 Jun 2021 16:52:29 +0200
Subject: [PATCH 050/141] =?UTF-8?q?Call=20Wyre=E2=80=99s=20API=20via=20our?=
 =?UTF-8?q?=20backend=20to=20generate=20Wyre=E2=80=99s=20Checkout=20URL=20?=
 =?UTF-8?q?(#11387)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Call Wyre’s API via our backend to generate Wyre’s Checkout URL

* Add back paymentMethod=debit-card, use a fallback URL if no url is returned from BE

* Fix a lint issue

* Refactor how to return Wyre’s Checkout URL

* Add 2 constants into a test file, refactoring
---
 app/scripts/lib/buy-eth-url.js      | 38 ++++++++++++++-
 app/scripts/lib/buy-eth-url.test.js | 71 ++++++++++++++++++-----------
 ui/store/actions.js                 |  4 +-
 3 files changed, 82 insertions(+), 31 deletions(-)

diff --git a/app/scripts/lib/buy-eth-url.js b/app/scripts/lib/buy-eth-url.js
index f36bdb468..f9f15e33b 100644
--- a/app/scripts/lib/buy-eth-url.js
+++ b/app/scripts/lib/buy-eth-url.js
@@ -1,3 +1,6 @@
+import log from 'loglevel';
+
+import { METASWAP_CHAINID_API_HOST_MAP } from '../../../shared/constants/swaps';
 import {
   GOERLI_CHAIN_ID,
   KOVAN_CHAIN_ID,
@@ -5,8 +8,39 @@ import {
   RINKEBY_CHAIN_ID,
   ROPSTEN_CHAIN_ID,
 } from '../../../shared/constants/network';
+import { SECOND } from '../../../shared/constants/time';
+import getFetchWithTimeout from '../../../shared/modules/fetch-with-timeout';
 import { TRANSAK_API_KEY } from '../constants/on-ramp';
 
+const fetchWithTimeout = getFetchWithTimeout(SECOND * 30);
+
+/**
+ * Create a Wyre purchase URL.
+ * @param {String} address Ethereum destination address
+ * @returns String
+ */
+const createWyrePurchaseUrl = async (address) => {
+  const fiatOnRampUrlApi = `${METASWAP_CHAINID_API_HOST_MAP[MAINNET_CHAIN_ID]}/fiatOnRampUrl?serviceName=wyre&destinationAddress=${address}`;
+  const wyrePurchaseUrlFallback = `https://pay.sendwyre.com/purchase?dest=ethereum:${address}&destCurrency=ETH&accountId=AC-7AG3W4XH4N2&paymentMethod=debit-card`;
+  try {
+    const response = await fetchWithTimeout(fiatOnRampUrlApi, {
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+      },
+    });
+    const parsedResponse = await response.json();
+    if (response.ok && parsedResponse.url) {
+      return parsedResponse.url;
+    }
+    log.warn('Failed to create a Wyre purchase URL', parsedResponse);
+  } catch (err) {
+    log.warn('Failed to create a Wyre purchase URL', err);
+  }
+  return wyrePurchaseUrlFallback; // In case the API call would fail, we return a fallback URL for Wyre's Checkout.
+};
+
 /**
  * Create a Transak Checkout URL.
  * API docs here: https://www.notion.so/Query-Parameters-9ec523df3b874ec58cef4fa3a906f238
@@ -33,7 +67,7 @@ const createTransakUrl = (address) => {
  * chainId does not match any of the specified cases, or if no chainId is given, returns undefined.
  *
  */
-export default function getBuyEthUrl({ chainId, address, service }) {
+export default async function getBuyEthUrl({ chainId, address, service }) {
   // default service by network if not specified
   if (!service) {
     // eslint-disable-next-line no-param-reassign
@@ -42,7 +76,7 @@ export default function getBuyEthUrl({ chainId, address, service }) {
 
   switch (service) {
     case 'wyre':
-      return `https://pay.sendwyre.com/purchase?dest=ethereum:${address}&destCurrency=ETH&accountId=AC-7AG3W4XH4N2&paymentMethod=debit-card`;
+      return await createWyrePurchaseUrl(address);
     case 'transak':
       return createTransakUrl(address);
     case 'metamask-faucet':
diff --git a/app/scripts/lib/buy-eth-url.test.js b/app/scripts/lib/buy-eth-url.test.js
index c8d7dca0c..d15af3e5d 100644
--- a/app/scripts/lib/buy-eth-url.test.js
+++ b/app/scripts/lib/buy-eth-url.test.js
@@ -1,4 +1,5 @@
 import { strict as assert } from 'assert';
+import nock from 'nock';
 import {
   KOVAN_CHAIN_ID,
   MAINNET_CHAIN_ID,
@@ -8,52 +9,68 @@ import {
 import { TRANSAK_API_KEY } from '../constants/on-ramp';
 import getBuyEthUrl from './buy-eth-url';
 
-describe('buy-eth-url', function () {
-  const mainnet = {
-    chainId: MAINNET_CHAIN_ID,
-    amount: 5,
-    address: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
-  };
-  const ropsten = {
-    chainId: ROPSTEN_CHAIN_ID,
-  };
-  const rinkeby = {
-    chainId: RINKEBY_CHAIN_ID,
-  };
-  const kovan = {
-    chainId: KOVAN_CHAIN_ID,
-  };
+const WYRE_ACCOUNT_ID = 'AC-7AG3W4XH4N2';
+const ETH_ADDRESS = '0x0dcd5d886577d5581b0c524242ef2ee70be3e7bc';
+const MAINNET = {
+  chainId: MAINNET_CHAIN_ID,
+  amount: 5,
+  address: ETH_ADDRESS,
+};
+const ROPSTEN = {
+  chainId: ROPSTEN_CHAIN_ID,
+};
+const RINKEBY = {
+  chainId: RINKEBY_CHAIN_ID,
+};
+const KOVAN = {
+  chainId: KOVAN_CHAIN_ID,
+};
 
-  it('returns Wyre url with an ETH address for Ethereum mainnet', function () {
-    const wyreUrl = getBuyEthUrl(mainnet);
+describe('buy-eth-url', function () {
+  it('returns Wyre url with an ETH address for Ethereum mainnet', async function () {
+    nock('https://api.metaswap.codefi.network')
+      .get(`/fiatOnRampUrl?serviceName=wyre&destinationAddress=${ETH_ADDRESS}`)
+      .reply(200, {
+        url: `https://pay.sendwyre.com/purchase?accountId=${WYRE_ACCOUNT_ID}&utm_campaign=${WYRE_ACCOUNT_ID}&destCurrency=ETH&utm_medium=widget&paymentMethod=debit-card&reservation=MLZVUF8FMXZUMARJC23B&dest=ethereum%3A${ETH_ADDRESS}&utm_source=checkout`,
+      });
+    const wyreUrl = await getBuyEthUrl(MAINNET);
+    assert.equal(
+      wyreUrl,
+      `https://pay.sendwyre.com/purchase?accountId=${WYRE_ACCOUNT_ID}&utm_campaign=${WYRE_ACCOUNT_ID}&destCurrency=ETH&utm_medium=widget&paymentMethod=debit-card&reservation=MLZVUF8FMXZUMARJC23B&dest=ethereum%3A${ETH_ADDRESS}&utm_source=checkout`,
+    );
+    nock.cleanAll();
+  });
+
+  it('returns a fallback Wyre url if /orders/reserve API call fails', async function () {
+    const wyreUrl = await getBuyEthUrl(MAINNET);
 
     assert.equal(
       wyreUrl,
-      'https://pay.sendwyre.com/purchase?dest=ethereum:0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc&destCurrency=ETH&accountId=AC-7AG3W4XH4N2&paymentMethod=debit-card',
+      `https://pay.sendwyre.com/purchase?dest=ethereum:${ETH_ADDRESS}&destCurrency=ETH&accountId=${WYRE_ACCOUNT_ID}&paymentMethod=debit-card`,
     );
   });
 
-  it('returns Transak url with an ETH address for Ethereum mainnet', function () {
-    const transakUrl = getBuyEthUrl({ ...mainnet, service: 'transak' });
+  it('returns Transak url with an ETH address for Ethereum mainnet', async function () {
+    const transakUrl = await getBuyEthUrl({ ...MAINNET, service: 'transak' });
 
     assert.equal(
       transakUrl,
-      `https://global.transak.com/?apiKey=${TRANSAK_API_KEY}&hostURL=https%3A%2F%2Fmetamask.io&defaultCryptoCurrency=ETH&walletAddress=0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc`,
+      `https://global.transak.com/?apiKey=${TRANSAK_API_KEY}&hostURL=https%3A%2F%2Fmetamask.io&defaultCryptoCurrency=ETH&walletAddress=${ETH_ADDRESS}`,
     );
   });
 
-  it('returns metamask ropsten faucet for network 3', function () {
-    const ropstenUrl = getBuyEthUrl(ropsten);
+  it('returns metamask ropsten faucet for network 3', async function () {
+    const ropstenUrl = await getBuyEthUrl(ROPSTEN);
     assert.equal(ropstenUrl, 'https://faucet.metamask.io/');
   });
 
-  it('returns rinkeby dapp for network 4', function () {
-    const rinkebyUrl = getBuyEthUrl(rinkeby);
+  it('returns rinkeby dapp for network 4', async function () {
+    const rinkebyUrl = await getBuyEthUrl(RINKEBY);
     assert.equal(rinkebyUrl, 'https://www.rinkeby.io/');
   });
 
-  it('returns kovan github test faucet for network 42', function () {
-    const kovanUrl = getBuyEthUrl(kovan);
+  it('returns kovan github test faucet for network 42', async function () {
+    const kovanUrl = await getBuyEthUrl(KOVAN);
     assert.equal(kovanUrl, 'https://github.com/kovan-testnet/faucet');
   });
 });
diff --git a/ui/store/actions.js b/ui/store/actions.js
index 8945de10b..e8f97eedd 100644
--- a/ui/store/actions.js
+++ b/ui/store/actions.js
@@ -1826,8 +1826,8 @@ export function showSendTokenPage() {
 }
 
 export function buyEth(opts) {
-  return (dispatch) => {
-    const url = getBuyEthUrl(opts);
+  return async (dispatch) => {
+    const url = await getBuyEthUrl(opts);
     global.platform.openTab({ url });
     dispatch({
       type: actionConstants.BUY_ETH,

From 23a859826f126fdfa01f2337fa93d40da77fb5ba Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Fri, 25 Jun 2021 11:24:00 -0500
Subject: [PATCH 051/141] add method to detect EIP 1559 support (#11369)

---
 app/scripts/controllers/detect-tokens.test.js |  3 +
 .../network/network-controller.test.js        | 71 +++++++++++++++-
 app/scripts/controllers/network/network.js    | 83 +++++++++++++++++++
 app/scripts/controllers/preferences.test.js   |  3 +
 app/scripts/metamask-controller.test.js       |  5 ++
 ui/ducks/metamask/metamask.js                 |  4 +
 6 files changed, 168 insertions(+), 1 deletion(-)

diff --git a/app/scripts/controllers/detect-tokens.test.js b/app/scripts/controllers/detect-tokens.test.js
index 4d4578124..7bd788271 100644
--- a/app/scripts/controllers/detect-tokens.test.js
+++ b/app/scripts/controllers/detect-tokens.test.js
@@ -30,6 +30,9 @@ describe('DetectTokensController', function () {
       '0x7e57e2',
       '0xbc86727e770de68b1060c91f6bb6945c73e10388',
     ]);
+    sandbox
+      .stub(network, 'getLatestBlock')
+      .callsFake(() => Promise.resolve({}));
     sandbox
       .stub(preferences, '_detectIsERC721')
       .returns(Promise.resolve(false));
diff --git a/app/scripts/controllers/network/network-controller.test.js b/app/scripts/controllers/network/network-controller.test.js
index 3417241f6..6c234e852 100644
--- a/app/scripts/controllers/network/network-controller.test.js
+++ b/app/scripts/controllers/network/network-controller.test.js
@@ -1,11 +1,13 @@
 import { strict as assert } from 'assert';
 import sinon from 'sinon';
 import { getNetworkDisplayName } from './util';
-import NetworkController from './network';
+import NetworkController, { NETWORK_EVENTS } from './network';
 
 describe('NetworkController', function () {
   describe('controller', function () {
     let networkController;
+    let getLatestBlockStub;
+    let setProviderTypeAndWait;
     const noop = () => undefined;
     const networkControllerProviderConfig = {
       getAccounts: noop,
@@ -13,7 +15,21 @@ describe('NetworkController', function () {
 
     beforeEach(function () {
       networkController = new NetworkController();
+      getLatestBlockStub = sinon
+        .stub(networkController, 'getLatestBlock')
+        .callsFake(() => Promise.resolve({}));
       networkController.setInfuraProjectId('foo');
+      setProviderTypeAndWait = () =>
+        new Promise((resolve) => {
+          networkController.on(NETWORK_EVENTS.NETWORK_DID_CHANGE, () => {
+            resolve();
+          });
+          networkController.setProviderType('mainnet');
+        });
+    });
+
+    afterEach(function () {
+      getLatestBlockStub.reset();
     });
 
     describe('#provider', function () {
@@ -67,6 +83,59 @@ describe('NetworkController', function () {
         );
       });
     });
+
+    describe('#getEIP1559Compatibility', function () {
+      it('should return false when baseFeePerGas is not in the block header', async function () {
+        networkController.initializeProvider(networkControllerProviderConfig);
+        const supportsEIP1559 = await networkController.getEIP1559Compatibility();
+        assert.equal(supportsEIP1559, false);
+      });
+
+      it('should return true when baseFeePerGas is in block header', async function () {
+        networkController.initializeProvider(networkControllerProviderConfig);
+        getLatestBlockStub.callsFake(() =>
+          Promise.resolve({ baseFeePerGas: '0xa ' }),
+        );
+        const supportsEIP1559 = await networkController.getEIP1559Compatibility();
+        assert.equal(supportsEIP1559, true);
+      });
+
+      it('should store EIP1559 support in state to reduce calls to getLatestBlock', async function () {
+        networkController.initializeProvider(networkControllerProviderConfig);
+        getLatestBlockStub.callsFake(() =>
+          Promise.resolve({ baseFeePerGas: '0xa ' }),
+        );
+        await networkController.getEIP1559Compatibility();
+        const supportsEIP1559 = await networkController.getEIP1559Compatibility();
+        assert.equal(getLatestBlockStub.calledOnce, true);
+        assert.equal(supportsEIP1559, true);
+      });
+
+      it('should clear stored EIP1559 support when changing networks', async function () {
+        networkController.initializeProvider(networkControllerProviderConfig);
+        networkController.consoleThis = true;
+        getLatestBlockStub.callsFake(() =>
+          Promise.resolve({ baseFeePerGas: '0xa ' }),
+        );
+        await networkController.getEIP1559Compatibility();
+        assert.equal(
+          networkController.networkDetails.getState().EIPS[1559],
+          true,
+        );
+        getLatestBlockStub.callsFake(() => Promise.resolve({}));
+        await setProviderTypeAndWait('mainnet');
+        assert.equal(
+          networkController.networkDetails.getState().EIPS[1559],
+          undefined,
+        );
+        await networkController.getEIP1559Compatibility();
+        assert.equal(
+          networkController.networkDetails.getState().EIPS[1559],
+          false,
+        );
+        assert.equal(getLatestBlockStub.calledTwice, true);
+      });
+    });
   });
 
   describe('utils', function () {
diff --git a/app/scripts/controllers/network/network.js b/app/scripts/controllers/network/network.js
index 1799f658f..2056cc154 100644
--- a/app/scripts/controllers/network/network.js
+++ b/app/scripts/controllers/network/network.js
@@ -51,6 +51,10 @@ const defaultProviderConfig = {
   ...defaultProviderConfigOpts,
 };
 
+const defaultNetworkDetailsState = {
+  EIPS: { 1559: undefined },
+};
+
 export const NETWORK_EVENTS = {
   // Fired after the actively selected network is changed
   NETWORK_DID_CHANGE: 'networkDidChange',
@@ -74,10 +78,21 @@ export default class NetworkController extends EventEmitter {
       this.providerStore.getState(),
     );
     this.networkStore = new ObservableStore('loading');
+    // We need to keep track of a few details about the current network
+    // Ideally we'd merge this.networkStore with this new store, but doing so
+    // will require a decent sized refactor of how we're accessing network
+    // state. Currently this is only used for detecting EIP 1559 support but
+    // can be extended to track other network details.
+    this.networkDetails = new ObservableStore(
+      opts.networkDetails || {
+        ...defaultNetworkDetailsState,
+      },
+    );
     this.store = new ComposedStore({
       provider: this.providerStore,
       previousProviderStore: this.previousProviderStore,
       network: this.networkStore,
+      networkDetails: this.networkDetails,
     });
 
     // provider and block tracker
@@ -120,6 +135,42 @@ export default class NetworkController extends EventEmitter {
     return { provider, blockTracker };
   }
 
+  /**
+   * Method to return the latest block for the current network
+   * @returns {Object} Block header
+   */
+  getLatestBlock() {
+    return new Promise((resolve, reject) => {
+      const { provider } = this.getProviderAndBlockTracker();
+      const ethQuery = new EthQuery(provider);
+      ethQuery.sendAsync(
+        { method: 'eth_getBlockByNumber', params: ['latest', false] },
+        (err, block) => {
+          if (err) {
+            return reject(err);
+          }
+          return resolve(block);
+        },
+      );
+    });
+  }
+
+  /**
+   * Method to check if the block header contains fields that indicate EIP 1559
+   * support (baseFeePerGas).
+   * @returns {Promise<boolean>} true if current network supports EIP 1559
+   */
+  async getEIP1559Compatibility() {
+    const { EIPS } = this.networkDetails.getState();
+    if (EIPS[1559] !== undefined) {
+      return EIPS[1559];
+    }
+    const latestBlock = await this.getLatestBlock();
+    const supportsEIP1559 = latestBlock.baseFeePerGas !== undefined;
+    this.setNetworkEIPSupport(1559, supportsEIP1559);
+    return supportsEIP1559;
+  }
+
   verifyNetwork() {
     // Check network when restoring connectivity:
     if (this.isNetworkLoading()) {
@@ -135,6 +186,26 @@ export default class NetworkController extends EventEmitter {
     this.networkStore.putState(network);
   }
 
+  /**
+   * Set EIP support indication in the networkDetails store
+   * @param {number} EIPNumber - The number of the EIP to mark support for
+   * @param {boolean} isSupported - True if the EIP is supported
+   */
+  setNetworkEIPSupport(EIPNumber, isSupported) {
+    this.networkDetails.updateState({
+      EIPS: {
+        [EIPNumber]: isSupported,
+      },
+    });
+  }
+
+  /**
+   * Reset EIP support to default (no support)
+   */
+  clearNetworkDetails() {
+    this.networkDetails.putState({ ...defaultNetworkDetailsState });
+  }
+
   isNetworkLoading() {
     return this.getNetworkState() === 'loading';
   }
@@ -154,6 +225,8 @@ export default class NetworkController extends EventEmitter {
         'NetworkController - lookupNetwork aborted due to missing chainId',
       );
       this.setNetworkState('loading');
+      // keep network details in sync with network state
+      this.clearNetworkDetails();
       return;
     }
 
@@ -174,10 +247,14 @@ export default class NetworkController extends EventEmitter {
       if (initialNetwork === currentNetwork) {
         if (err) {
           this.setNetworkState('loading');
+          // keep network details in sync with network state
+          this.clearNetworkDetails();
           return;
         }
 
         this.setNetworkState(networkVersion);
+        // look up EIP-1559 support
+        this.getEIP1559Compatibility();
       }
     });
   }
@@ -298,9 +375,15 @@ export default class NetworkController extends EventEmitter {
   }
 
   _switchNetwork(opts) {
+    // Indicate to subscribers that network is about to change
     this.emit(NETWORK_EVENTS.NETWORK_WILL_CHANGE);
+    // Set loading state
     this.setNetworkState('loading');
+    // Reset network details
+    this.clearNetworkDetails();
+    // Configure the provider appropriately
     this._configureProvider(opts);
+    // Notify subscribers that network has changed
     this.emit(NETWORK_EVENTS.NETWORK_DID_CHANGE, opts.type);
   }
 
diff --git a/app/scripts/controllers/preferences.test.js b/app/scripts/controllers/preferences.test.js
index d5b993c8e..5e454d55a 100644
--- a/app/scripts/controllers/preferences.test.js
+++ b/app/scripts/controllers/preferences.test.js
@@ -30,6 +30,9 @@ describe('preferences controller', function () {
     network.initializeProvider(networkControllerProviderConfig);
     provider = network.getProviderAndBlockTracker().provider;
 
+    sandbox
+      .stub(network, 'getLatestBlock')
+      .callsFake(() => Promise.resolve({}));
     sandbox.stub(network, 'getCurrentChainId').callsFake(() => currentChainId);
     sandbox
       .stub(network, 'getProviderConfig')
diff --git a/app/scripts/metamask-controller.test.js b/app/scripts/metamask-controller.test.js
index 87fed2aef..f75bf7b50 100644
--- a/app/scripts/metamask-controller.test.js
+++ b/app/scripts/metamask-controller.test.js
@@ -21,6 +21,11 @@ const firstTimeState = {
       rpcUrl: 'http://localhost:8545',
       chainId: '0x539',
     },
+    networkDetails: {
+      EIPS: {
+        1559: false,
+      },
+    },
   },
 };
 
diff --git a/ui/ducks/metamask/metamask.js b/ui/ducks/metamask/metamask.js
index 0047b6904..e72fb8ec7 100644
--- a/ui/ducks/metamask/metamask.js
+++ b/ui/ducks/metamask/metamask.js
@@ -238,3 +238,7 @@ export function getSendToAccounts(state) {
 export function getUnapprovedTxs(state) {
   return state.metamask.unapprovedTxs;
 }
+
+export function isEIP1559Network(state) {
+  return state.metamask.networkDetails.EIPS[1559] === true;
+}

From 70dc762c84a5fea5f225e44ffb549c893511188d Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Fri, 25 Jun 2021 10:01:40 -0700
Subject: [PATCH 052/141] cleanup conflicts

---
 CHANGELOG.md                                  | 1615 +++++++++--------
 lavamoat/node/policy.json                     |  214 +++
 .../gas-modal-page-container.container.js     |    1 -
 3 files changed, 1024 insertions(+), 806 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ce028e641..c6c2a5731 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -62,6 +62,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [#11031](https://github.com/MetaMask/metamask-extension/pull/11031): Fixes error behavior of addEthereumChain
 
 ## [9.5.9]
+### Added
+- Re-added "Add Ledger Live Support" ([#10293](https://github.com/MetaMask/metamask-extension/pull/10293)), which was reverted in the previous version
+
 ### Fixed
 - [#11225](https://github.com/MetaMask/metamask-extension/pull/11225) - Fix persistent display of chrome ledger What's New popup message 
 
@@ -90,234 +93,235 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [9.5.3]
 ### Fixed
-- [#11103](https://github.com/MetaMask/metamask-extension/pull/11103): Fixes bug that made MetaMask unusable and displayed 'Minified React error #130' on certain networks and accounts
-- [#11015](https://github.com/MetaMask/metamask-extension/pull/11015): Prevent big number error when attempting to view transaction list
+- Fixes bug that made MetaMask unusable and displayed 'Minified React error #130' on certain networks and accounts ([#11103](https://github.com/MetaMask/metamask-extension/pull/11103))
+- Prevent big number error when attempting to view transaction list ([#11015](https://github.com/MetaMask/metamask-extension/pull/11015))
 
 ## [9.5.2]
 ### Fixed
-- [#11071](https://github.com/MetaMask/metamask-extension/pull/11071): Fixing address entry error when sending a transaction on a custom network
+- Fixing address entry error when sending a transaction on a custom network ([#11071](https://github.com/MetaMask/metamask-extension/pull/11071))
 
 ## [9.5.1]
 ### Fixed
-- [#11048](https://github.com/MetaMask/metamask-extension/pull/11048): Fixed icon on approval screen
-- [#11036](https://github.com/MetaMask/metamask-extension/pull/11036): Fixed broken app state for some users with Chinese, Portugese or Spanish browser language settings.
+- Fixed icon on approval screen ([#11048](https://github.com/MetaMask/metamask-extension/pull/11048))
+- Fixed broken app state for some users with Chinese, Portugese or Spanish browser language settings. ([#11036](https://github.com/MetaMask/metamask-extension/pull/11036))
 
 ## [9.5.0] - 2021-04-28
 ### Added
-- [#10583](https://github.com/MetaMask/metamask-extension/pull/10583): Adding popup display to show new MetaMask notifications
-- [#10938](https://github.com/MetaMask/metamask-extension/pull/10938): Add menu with "View on Etherscan" and "Account details" links to ETH asset page
-- [#10932](https://github.com/MetaMask/metamask-extension/pull/10932): Add view account details menu item to token page menu
-- [#10895](https://github.com/MetaMask/metamask-extension/pull/10895): Adding new links to contact MetaMask support
-- [#10595](https://github.com/MetaMask/metamask-extension/pull/10595): Adding option to set Custom Nonce to Confirm Approve Page
-- [#10616](https://github.com/MetaMask/metamask-extension/pull/10616): add trezor HD path for ledger wallets
+- Adding popup display to show new MetaMask notifications ([#10583](https://github.com/MetaMask/metamask-extension/pull/10583))
+- Add menu with "View on Etherscan" and "Account details" links to ETH asset page ([#10938](https://github.com/MetaMask/metamask-extension/pull/10938))
+- Add view account details menu item to token page menu ([#10932](https://github.com/MetaMask/metamask-extension/pull/10932))
+- Adding new links to contact MetaMask support ([#10895](https://github.com/MetaMask/metamask-extension/pull/10895))
+- Adding option to set Custom Nonce to Confirm Approve Page ([#10595](https://github.com/MetaMask/metamask-extension/pull/10595))
+- Adding recovery phrase video to onboarding process ([#10717](https://github.com/MetaMask/metamask-extension/pull/10717))
+- add trezor HD path for ledger wallets ([#10616](https://github.com/MetaMask/metamask-extension/pull/10616))
 
 ### Changed
-- [#10939](https://github.com/MetaMask/metamask-extension/pull/10939): Use custom token icons in the send flow token dropdown
-- [#10680](https://github.com/MetaMask/metamask-extension/pull/10680): Remove "My Wallet Account" section in Settings > Contact
-- [#10912](https://github.com/MetaMask/metamask-extension/pull/10912): Harden contract address validation for token swaps
-- [#10882](https://github.com/MetaMask/metamask-extension/pull/10882): Show the custom network name in swaps network fee tooltip
-- [#10859](https://github.com/MetaMask/metamask-extension/pull/10859): Only check whether the swaps feature is live after entering the feature
-- [#10871](https://github.com/MetaMask/metamask-extension/pull/10871): Update swaps metadata every 5 minutes as opposed to an hour
-- [#10842](https://github.com/MetaMask/metamask-extension/pull/10842): Increase default slippage from 2% to 3% in swaps and show Advanced Options by default
-- [#10593](https://github.com/MetaMask/metamask-extension/pull/10593): Prevent tokens without addresses from being added to token list
-- [#10746](https://github.com/MetaMask/metamask-extension/pull/10746): Add New Zealand Dollar to currency options
-- [#10670](https://github.com/MetaMask/metamask-extension/pull/10670): Allow 11 characters in symbol for custom RPCs
-- [#10702](https://github.com/MetaMask/metamask-extension/pull/10702): Hide the suggested token pane when not on Mainnet or test network
-- [#10700](https://github.com/MetaMask/metamask-extension/pull/10700): Prevents autocomplete text from displaying in the Add Token input
-- [#10704](https://github.com/MetaMask/metamask-extension/pull/10704): Removing hard references to 12 word seed phrases in copy
-- [#10703](https://github.com/MetaMask/metamask-extension/pull/10703): Add MetaMask to list of BIP44 HD path examples
-- [#10651](https://github.com/MetaMask/metamask-extension/pull/10651): Change 'Send ETH' title to 'Send' in the send flow
-- [#10674](https://github.com/MetaMask/metamask-extension/pull/10674): Don't render faucet row in deposit modal for custom chains
+- Use custom token icons in the send flow token dropdown ([#10939](https://github.com/MetaMask/metamask-extension/pull/10939))
+- Remove "My Wallet Account" section in Settings > Contact ([#10680](https://github.com/MetaMask/metamask-extension/pull/10680))
+- Harden contract address validation for token swaps ([#10912](https://github.com/MetaMask/metamask-extension/pull/10912))
+- Show the custom network name in swaps network fee tooltip ([#10882](https://github.com/MetaMask/metamask-extension/pull/10882))
+- Only check whether the swaps feature is live after entering the feature ([#10859](https://github.com/MetaMask/metamask-extension/pull/10859))
+- Update swaps metadata every 5 minutes as opposed to an hour ([#10871](https://github.com/MetaMask/metamask-extension/pull/10871))
+- Increase default slippage from 2% to 3% in swaps and show Advanced Options by default ([#10842](https://github.com/MetaMask/metamask-extension/pull/10842))
+- Prevent tokens without addresses from being added to token list ([#10593](https://github.com/MetaMask/metamask-extension/pull/10593))
+- Add New Zealand Dollar to currency options ([#10746](https://github.com/MetaMask/metamask-extension/pull/10746))
+- Allow 11 characters in symbol for custom RPCs ([#10670](https://github.com/MetaMask/metamask-extension/pull/10670))
+- Hide the suggested token pane when not on Mainnet or test network ([#10702](https://github.com/MetaMask/metamask-extension/pull/10702))
+- Prevents autocomplete text from displaying in the Add Token input ([#10700](https://github.com/MetaMask/metamask-extension/pull/10700))
+- Removing hard references to 12 word seed phrases in copy ([#10704](https://github.com/MetaMask/metamask-extension/pull/10704))
+- Add MetaMask to list of BIP44 HD path examples ([#10703](https://github.com/MetaMask/metamask-extension/pull/10703))
+- Change 'Send ETH' title to 'Send' in the send flow ([#10651](https://github.com/MetaMask/metamask-extension/pull/10651))
+- Don't render faucet row in deposit modal for custom chains ([#10674](https://github.com/MetaMask/metamask-extension/pull/10674))
 
 ### Fixed
-- [#10935](https://github.com/MetaMask/metamask-extension/pull/10935): Prevent overflow of hostname on confirmation page
-- [#10923](https://github.com/MetaMask/metamask-extension/pull/10923): Fixing ENS input entry in send flow
-- [#10723](https://github.com/MetaMask/metamask-extension/pull/10723): Fix mismatchedChain typo in custom network approval screen
-- [#10695](https://github.com/MetaMask/metamask-extension/pull/10695): Excluding sourcemaps comment in production builds
-- [#10643](https://github.com/MetaMask/metamask-extension/pull/10643): Prevent network dropdown label highlighting
-- [#10644](https://github.com/MetaMask/metamask-extension/pull/10644): Ensure swaps detail height doesn't create jump in vertical height
-- [#10642](https://github.com/MetaMask/metamask-extension/pull/10642): Position the 3dot menu in the same spot on asset screen and home screen
-- [#10594](https://github.com/MetaMask/metamask-extension/pull/10594): Ensure MetaMask works correctly when on a custom network that shares a chain id with a default Infura network
-- [#10579](https://github.com/MetaMask/metamask-extension/pull/10579): Fixed bug that prevented speeding up cancelled transactions
-- [#10630](https://github.com/MetaMask/metamask-extension/pull/10630): Fixes hidden token bug when zero balance preference is on
-- [#10628](https://github.com/MetaMask/metamask-extension/pull/10628): Removing double click bug from delete custom network modal
+- Prevent overflow of hostname on confirmation page ([#10935](https://github.com/MetaMask/metamask-extension/pull/10935))
+- Fixing ENS input entry in send flow ([#10923](https://github.com/MetaMask/metamask-extension/pull/10923))
+- Fix mismatchedChain typo in custom network approval screen ([#10723](https://github.com/MetaMask/metamask-extension/pull/10723))
+- Excluding sourcemaps comment in production builds ([#10695](https://github.com/MetaMask/metamask-extension/pull/10695))
+- Prevent network dropdown label highlighting ([#10643](https://github.com/MetaMask/metamask-extension/pull/10643))
+- Ensure swaps detail height doesn't create jump in vertical height ([#10644](https://github.com/MetaMask/metamask-extension/pull/10644))
+- Position the 3dot menu in the same spot on asset screen and home screen ([#10642](https://github.com/MetaMask/metamask-extension/pull/10642))
+- Ensure MetaMask works correctly when on a custom network that shares a chain id with a default Infura network ([#10594](https://github.com/MetaMask/metamask-extension/pull/10594))
+- Fixed bug that prevented speeding up cancelled transactions ([#10579](https://github.com/MetaMask/metamask-extension/pull/10579))
+- Fixes hidden token bug when zero balance preference is on ([#10630](https://github.com/MetaMask/metamask-extension/pull/10630))
+- Removing double click bug from delete custom network modal ([#10628](https://github.com/MetaMask/metamask-extension/pull/10628))
 
 ## [9.4.0] - 2021-04-15
 ### Added
-- [#10883](https://github.com/MetaMask/metamask-extension/pull/10883): Notify users when MetaMask is unable to connect to the blockchain host
+- Notify users when MetaMask is unable to connect to the blockchain host ([#10883](https://github.com/MetaMask/metamask-extension/pull/10883))
 
 ## [9.3.0] - 2021-04-02
 ### Added
-- [#10721](https://github.com/MetaMask/metamask-extension/pull/10721): Swaps support for the Binance network
-- [#10658](https://github.com/MetaMask/metamask-extension/pull/10658): Swaps support for forked Mainnet on localhost
+- Swaps support for the Binance network ([#10721](https://github.com/MetaMask/metamask-extension/pull/10721))
+- Swaps support for forked Mainnet on localhost ([#10658](https://github.com/MetaMask/metamask-extension/pull/10658))
 
 ### Fixed
-- [#10777](https://github.com/MetaMask/metamask-extension/pull/10777): Display BNB token image for default currency on BSC network home screen
-- [#10650](https://github.com/MetaMask/metamask-extension/pull/10650): Fix: ETH now only appears once in the swaps "to" and "from" dropdowns.
+- Display BNB token image for default currency on BSC network home screen ([#10777](https://github.com/MetaMask/metamask-extension/pull/10777))
+- Fix: ETH now only appears once in the swaps "to" and "from" dropdowns. ([#10650](https://github.com/MetaMask/metamask-extension/pull/10650))
 
 ## [9.2.1] - 2021-03-26
 ### Fixed
-- [#10692](https://github.com/MetaMask/metamask-extension/pull/10692): Prevent UI crash when a 'wallet_requestPermissions" confirmation is queued behind a "wallet_addEthereumChain" confirmation
-- [#10712](https://github.com/MetaMask/metamask-extension/pull/10712): Fix infinite spinner when request for token symbol fails while attempting an approve transaction
+- Prevent UI crash when a 'wallet_requestPermissions" confirmation is queued behind a "wallet_addEthereumChain" confirmation ([#10692](https://github.com/MetaMask/metamask-extension/pull/10692))
+- Fix infinite spinner when request for token symbol fails while attempting an approve transaction ([#10712](https://github.com/MetaMask/metamask-extension/pull/10712))
 
 ## [9.2.0] - 2021-03-15
 ### Added
-- [#10546](https://github.com/MetaMask/metamask-extension/pull/10546): Add a warning when sending a token to its own contract address
-- [#10582](https://github.com/MetaMask/metamask-extension/pull/10582): Adding warnings for excessive custom gas input
-- [#10505](https://github.com/MetaMask/metamask-extension/pull/10505): Add support for multiple Ledger & Trezor hardware accounts
-- [#10486](https://github.com/MetaMask/metamask-extension/pull/10486): Add setting to hide zero balance tokens
+- Add a warning when sending a token to its own contract address ([#10546](https://github.com/MetaMask/metamask-extension/pull/10546))
+- Adding warnings for excessive custom gas input ([#10582](https://github.com/MetaMask/metamask-extension/pull/10582))
+- Add support for multiple Ledger & Trezor hardware accounts ([#10505](https://github.com/MetaMask/metamask-extension/pull/10505))
+- Add setting to hide zero balance tokens ([#10486](https://github.com/MetaMask/metamask-extension/pull/10486))
 
 ### Changed
-- [#10563](https://github.com/MetaMask/metamask-extension/pull/10563): Update references to MetaMask support
-- [#10126](https://github.com/MetaMask/metamask-extension/pull/10126): Update Italian translation
+- Update references to MetaMask support ([#10563](https://github.com/MetaMask/metamask-extension/pull/10563))
+- Update Italian translation ([#10126](https://github.com/MetaMask/metamask-extension/pull/10126))
 
 ### Fixed
-- [#10591](https://github.com/MetaMask/metamask-extension/pull/10591): Fix mobile sync of ERC20 tokens
-- [#10601](https://github.com/MetaMask/metamask-extension/pull/10601): Fix activity title text truncation
-- [#10598](https://github.com/MetaMask/metamask-extension/pull/10598): Remove 'Ethereum' from custom RPC endpoint warning
-- [#10606](https://github.com/MetaMask/metamask-extension/pull/10606): Show loading screen while fetching token data for approve screen
-- [#10587](https://github.com/MetaMask/metamask-extension/pull/10587): Show correct block explorer for custom RPC endpoints for built-in networks
+- Fix mobile sync of ERC20 tokens ([#10591](https://github.com/MetaMask/metamask-extension/pull/10591))
+- Fix activity title text truncation ([#10601](https://github.com/MetaMask/metamask-extension/pull/10601))
+- Remove 'Ethereum' from custom RPC endpoint warning ([#10598](https://github.com/MetaMask/metamask-extension/pull/10598))
+- Show loading screen while fetching token data for approve screen ([#10606](https://github.com/MetaMask/metamask-extension/pull/10606))
+- Show correct block explorer for custom RPC endpoints for built-in networks ([#10587](https://github.com/MetaMask/metamask-extension/pull/10587))
 
 ## [9.1.1] - 2021-03-03
 ### Fixed
-- [#10560](https://github.com/MetaMask/metamask-extension/pull/10560): Fix ENS resolution related crashes when switching networks on send screen
-- [#10561](https://github.com/MetaMask/metamask-extension/pull/10561): Fix crash when speeding up an attempt to cancel a transaction on custom networks
+- Fix ENS resolution related crashes when switching networks on send screen ([#10560](https://github.com/MetaMask/metamask-extension/pull/10560))
+- Fix crash when speeding up an attempt to cancel a transaction on custom networks ([#10561](https://github.com/MetaMask/metamask-extension/pull/10561))
 
 ## [9.1.0] - 2021-02-01
 ### Uncategorized
-- [#10265](https://github.com/MetaMask/metamask-extension/pull/10265): Update Japanese translations.
-- [#9388](https://github.com/MetaMask/metamask-extension/pull/9388): Update Chinese(Simplified) translations.
-- [#10270](https://github.com/MetaMask/metamask-extension/pull/10270): Update Vietnamese translations.
-- [#10258](https://github.com/MetaMask/metamask-extension/pull/10258): Update Spanish and Spanish(Latin American and Carribean) translations.
-- [#10268](https://github.com/MetaMask/metamask-extension/pull/10268): Update Russian translations.
-- [#10269](https://github.com/MetaMask/metamask-extension/pull/10269): Update Tagalog localized messages.
-- [#10448](https://github.com/MetaMask/metamask-extension/pull/10448): Fix 'imported' translation use case for Dutch.
-- [#10391](https://github.com/MetaMask/metamask-extension/pull/10391): Use translated transaction category for confirmations.
-- [#10357](https://github.com/MetaMask/metamask-extension/pull/10357): Cancel unapproved confirmations on network change
-- [#10413](https://github.com/MetaMask/metamask-extension/pull/10413): Use native currency in asset row.
-- [#10421](https://github.com/MetaMask/metamask-extension/pull/10421): Fix color indicator size on connected site indicator.
-- [#10423](https://github.com/MetaMask/metamask-extension/pull/10423): Fix multiple notification window prompts.
-- [#10424](https://github.com/MetaMask/metamask-extension/pull/10424): Fix icons on token options menu.
-- [#10414](https://github.com/MetaMask/metamask-extension/pull/10414): Fix token fiat conversion rates when switching from certain custom networks.
-- [#10453](https://github.com/MetaMask/metamask-extension/pull/10453): Disable BUY button from home screen when not on Ethereum Mainnet.
-- [#10465](https://github.com/MetaMask/metamask-extension/pull/10465): Fixes gas selection check mark on the notification view.
-- [#10467](https://github.com/MetaMask/metamask-extension/pull/10467): Fix confirm page header with from/to addresses in fullscreen for tx confirmations.
-- [#10455](https://github.com/MetaMask/metamask-extension/pull/10455): Hide links to etherscan when no block explorer is specified for a custom network for notifications.
-- [#10456](https://github.com/MetaMask/metamask-extension/pull/10456): Fix swap insufficient balance error message.
-- [#10350](https://github.com/MetaMask/metamask-extension/pull/10350): Fix encypt/decrypt tx queueing.
-- [#10473](https://github.com/MetaMask/metamask-extension/pull/10473): Improve autofocus in the add network form.
-- [#10444](https://github.com/MetaMask/metamask-extension/pull/10444): Use eth_gasprice for tx gas price estimation on non-Mainnet networks.
-- [#10477](https://github.com/MetaMask/metamask-extension/pull/10477): Fix accountsChanged event not triggering when manually connecting.
-- [#10471](https://github.com/MetaMask/metamask-extension/pull/10471): Fix navigation from jumping vertically when clicking into token.
-- [#9724](https://github.com/MetaMask/metamask-extension/pull/9724): Add custom network RPC method.
-- [#10496](https://github.com/MetaMask/metamask-extension/pull/10496): Eliminate artificial delay in swaps loading screen after request loading is complete.
-- [#10501](https://github.com/MetaMask/metamask-extension/pull/10501): Ensure that swap approve tx and swap tx always have the same gas price.
-- [#10485](https://github.com/MetaMask/metamask-extension/pull/10485): Fixes signTypedData message overflow.
-- [#10525](https://github.com/MetaMask/metamask-extension/pull/10525): Update swaps failure message to include a support link.
-- [#10521](https://github.com/MetaMask/metamask-extension/pull/10521): Accommodate for 0 sources verifying swap token
-- [#10530](https://github.com/MetaMask/metamask-extension/pull/10530): Show warnings on Add Recipient page of Send flow
-- [#9187](https://github.com/MetaMask/metamask-extension/pull/9187): Warn users when an ENS name contains 'confusable' characters
-- [#10507](https://github.com/MetaMask/metamask-extension/pull/10507): Fixes ENS IPFS resolution on custom networks with the chainID of 1.
+- Update Japanese translations. ([#10265](https://github.com/MetaMask/metamask-extension/pull/10265))
+- Update Chinese(Simplified) translations. ([#9388](https://github.com/MetaMask/metamask-extension/pull/9388))
+- Update Vietnamese translations. ([#10270](https://github.com/MetaMask/metamask-extension/pull/10270))
+- Update Spanish and Spanish(Latin American and Carribean) translations. ([#10258](https://github.com/MetaMask/metamask-extension/pull/10258))
+- Update Russian translations. ([#10268](https://github.com/MetaMask/metamask-extension/pull/10268))
+- Update Tagalog localized messages. ([#10269](https://github.com/MetaMask/metamask-extension/pull/10269))
+- Fix 'imported' translation use case for Dutch. ([#10448](https://github.com/MetaMask/metamask-extension/pull/10448))
+- Use translated transaction category for confirmations. ([#10391](https://github.com/MetaMask/metamask-extension/pull/10391))
+- Cancel unapproved confirmations on network change ([#10357](https://github.com/MetaMask/metamask-extension/pull/10357))
+- Use native currency in asset row. ([#10413](https://github.com/MetaMask/metamask-extension/pull/10413))
+- Fix color indicator size on connected site indicator. ([#10421](https://github.com/MetaMask/metamask-extension/pull/10421))
+- Fix multiple notification window prompts. ([#10423](https://github.com/MetaMask/metamask-extension/pull/10423))
+- Fix icons on token options menu. ([#10424](https://github.com/MetaMask/metamask-extension/pull/10424))
+- Fix token fiat conversion rates when switching from certain custom networks. ([#10414](https://github.com/MetaMask/metamask-extension/pull/10414))
+- Disable BUY button from home screen when not on Ethereum Mainnet. ([#10453](https://github.com/MetaMask/metamask-extension/pull/10453))
+- Fixes gas selection check mark on the notification view. ([#10465](https://github.com/MetaMask/metamask-extension/pull/10465))
+- Fix confirm page header with from/to addresses in fullscreen for tx confirmations. ([#10467](https://github.com/MetaMask/metamask-extension/pull/10467))
+- Hide links to etherscan when no block explorer is specified for a custom network for notifications. ([#10455](https://github.com/MetaMask/metamask-extension/pull/10455))
+- Fix swap insufficient balance error message. ([#10456](https://github.com/MetaMask/metamask-extension/pull/10456))
+- Fix encypt/decrypt tx queueing. ([#10350](https://github.com/MetaMask/metamask-extension/pull/10350))
+- Improve autofocus in the add network form. ([#10473](https://github.com/MetaMask/metamask-extension/pull/10473))
+- Use eth_gasprice for tx gas price estimation on non-Mainnet networks. ([#10444](https://github.com/MetaMask/metamask-extension/pull/10444))
+- Fix accountsChanged event not triggering when manually connecting. ([#10477](https://github.com/MetaMask/metamask-extension/pull/10477))
+- Fix navigation from jumping vertically when clicking into token. ([#10471](https://github.com/MetaMask/metamask-extension/pull/10471))
+- Add custom network RPC method. ([#9724](https://github.com/MetaMask/metamask-extension/pull/9724))
+- Eliminate artificial delay in swaps loading screen after request loading is complete. ([#10496](https://github.com/MetaMask/metamask-extension/pull/10496))
+- Ensure that swap approve tx and swap tx always have the same gas price. ([#10501](https://github.com/MetaMask/metamask-extension/pull/10501))
+- Fixes signTypedData message overflow. ([#10485](https://github.com/MetaMask/metamask-extension/pull/10485))
+- Update swaps failure message to include a support link. ([#10525](https://github.com/MetaMask/metamask-extension/pull/10525))
+- Accommodate for 0 sources verifying swap token ([#10521](https://github.com/MetaMask/metamask-extension/pull/10521))
+- Show warnings on Add Recipient page of Send flow ([#10530](https://github.com/MetaMask/metamask-extension/pull/10530))
+- Warn users when an ENS name contains 'confusable' characters ([#9187](https://github.com/MetaMask/metamask-extension/pull/9187))
+- Fixes ENS IPFS resolution on custom networks with the chainID of 1. ([#10507](https://github.com/MetaMask/metamask-extension/pull/10507))
 
 ## [9.0.5] - 2021-02-09
 ### Uncategorized
-- [#10278](https://github.com/MetaMask/metamask-extension/pull/10278): Allow editing transaction amount after clicking max
-- [#10214](https://github.com/MetaMask/metamask-extension/pull/10214): Standardize size, shape and color of network color indicators
-- [#10298](https://github.com/MetaMask/metamask-extension/pull/10298): Use network primary currency instead of always defaulting to ETH in the confirm approve screen
-- [#10300](https://github.com/MetaMask/metamask-extension/pull/10300): Add origin to signature request confirmation page
-- [#10296](https://github.com/MetaMask/metamask-extension/pull/10296): Add origin to transaction confirmation
-- [#10266](https://github.com/MetaMask/metamask-extension/pull/10266): Update `ko` localized messages
-- [#10263](https://github.com/MetaMask/metamask-extension/pull/10263): Update `id` localized messages
-- [#10347](https://github.com/MetaMask/metamask-extension/pull/10347): Require click of "Continue" button to interact with swap screen if there is a price impact warning for present swap
-- [#10373](https://github.com/MetaMask/metamask-extension/pull/10373): Change copy of submit button on swaps screen
-- [#10346](https://github.com/MetaMask/metamask-extension/pull/10346): Swaps token sources/verification messaging update
-- [#10378](https://github.com/MetaMask/metamask-extension/pull/10378): Stop showing the window.web3 in-app popup if the dapp is just using web3.currentProvider
-- [#10326](https://github.com/MetaMask/metamask-extension/pull/10326): Throw error when attempting to get an encryption key via eth_getEncryptionPublicKey when connected to Ledger HW
-- [#10386](https://github.com/MetaMask/metamask-extension/pull/10386): Make action buttons on message components in swaps flow accessible
+- Allow editing transaction amount after clicking max ([#10278](https://github.com/MetaMask/metamask-extension/pull/10278))
+- Standardize size, shape and color of network color indicators ([#10214](https://github.com/MetaMask/metamask-extension/pull/10214))
+- Use network primary currency instead of always defaulting to ETH in the confirm approve screen ([#10298](https://github.com/MetaMask/metamask-extension/pull/10298))
+- Add origin to signature request confirmation page ([#10300](https://github.com/MetaMask/metamask-extension/pull/10300))
+- Add origin to transaction confirmation ([#10296](https://github.com/MetaMask/metamask-extension/pull/10296))
+- Update `ko` localized messages ([#10266](https://github.com/MetaMask/metamask-extension/pull/10266))
+- Update `id` localized messages ([#10263](https://github.com/MetaMask/metamask-extension/pull/10263))
+- Require click of "Continue" button to interact with swap screen if there is a price impact warning for present swap ([#10347](https://github.com/MetaMask/metamask-extension/pull/10347))
+- Change copy of submit button on swaps screen ([#10373](https://github.com/MetaMask/metamask-extension/pull/10373))
+- Swaps token sources/verification messaging update ([#10346](https://github.com/MetaMask/metamask-extension/pull/10346))
+- Stop showing the window.web3 in-app popup if the dapp is just using web3.currentProvider ([#10378](https://github.com/MetaMask/metamask-extension/pull/10378))
+- Throw error when attempting to get an encryption key via eth_getEncryptionPublicKey when connected to Ledger HW ([#10326](https://github.com/MetaMask/metamask-extension/pull/10326))
+- Make action buttons on message components in swaps flow accessible ([#10386](https://github.com/MetaMask/metamask-extension/pull/10386))
 
 ## [9.0.4] - 2021-01-27
 ### Uncategorized
-- [#10285](https://github.com/MetaMask/metamask-extension/pull/10285): Update @metamask/contract-metadata from v1.21.0 to 1.22.0
-- [#10264](https://github.com/MetaMask/metamask-extension/pull/10264): Update `hi` localized messages
-- [#10174](https://github.com/MetaMask/metamask-extension/pull/10174): Move fox to bottom of 'About' page
-- [#10198](https://github.com/MetaMask/metamask-extension/pull/10198): Fix hardware account selection
-- [#10101](https://github.com/MetaMask/metamask-extension/pull/10101): Add a timeout to all network requests
-- [#10212](https://github.com/MetaMask/metamask-extension/pull/10212): Fix displayed balance of tokens with 0 decimals in swaps flow
-- [#10162](https://github.com/MetaMask/metamask-extension/pull/10162): Prevent accidentally submitting a swap twice
-- [#10224](https://github.com/MetaMask/metamask-extension/pull/10224): Improve chain ID validation
-- [#10195](https://github.com/MetaMask/metamask-extension/pull/10195): Increase minimum Firefox version to v68
-- [#10192](https://github.com/MetaMask/metamask-extension/pull/10192): Update TrezorConnect to v8
-- [#10166](https://github.com/MetaMask/metamask-extension/pull/10166): Fix back button on swaps loading page
-- [#9947](https://github.com/MetaMask/metamask-extension/pull/9947): Do not publish swaps transaction if the estimateGas call made when adding the transaction fails.
+- Update @metamask/contract-metadata from v1.21.0 to 1.22.0 ([#10285](https://github.com/MetaMask/metamask-extension/pull/10285))
+- Update `hi` localized messages ([#10264](https://github.com/MetaMask/metamask-extension/pull/10264))
+- Move fox to bottom of 'About' page ([#10174](https://github.com/MetaMask/metamask-extension/pull/10174))
+- Fix hardware account selection ([#10198](https://github.com/MetaMask/metamask-extension/pull/10198))
+- Add a timeout to all network requests ([#10101](https://github.com/MetaMask/metamask-extension/pull/10101))
+- Fix displayed balance of tokens with 0 decimals in swaps flow ([#10212](https://github.com/MetaMask/metamask-extension/pull/10212))
+- Prevent accidentally submitting a swap twice ([#10162](https://github.com/MetaMask/metamask-extension/pull/10162))
+- Improve chain ID validation ([#10224](https://github.com/MetaMask/metamask-extension/pull/10224))
+- Increase minimum Firefox version to v68 ([#10195](https://github.com/MetaMask/metamask-extension/pull/10195))
+- Update TrezorConnect to v8 ([#10192](https://github.com/MetaMask/metamask-extension/pull/10192))
+- Fix back button on swaps loading page ([#10166](https://github.com/MetaMask/metamask-extension/pull/10166))
+- Do not publish swaps transaction if the estimateGas call made when adding the transaction fails. ([#9947](https://github.com/MetaMask/metamask-extension/pull/9947))
 
 ## [9.0.3] - 2021-01-22
 ### Uncategorized
-- [#10243](https://github.com/MetaMask/metamask-extension/pull/10243): Fix site metadata handling
-- [#10252](https://github.com/MetaMask/metamask-extension/pull/10252): Fix decrypt message confirmation UI crash
+- Fix site metadata handling ([#10243](https://github.com/MetaMask/metamask-extension/pull/10243))
+- Fix decrypt message confirmation UI crash ([#10252](https://github.com/MetaMask/metamask-extension/pull/10252))
 
 ## [9.0.2] - 2021-01-20
 ### Uncategorized
-- [#10191](https://github.com/MetaMask/metamask-extension/pull/10191): zh_TW: 乙太 -> 以太 (#10191)
-- [#10207](https://github.com/MetaMask/metamask-extension/pull/10207): zh_TW: Translate buy, assets, activity (#10207)
-- [#10219](https://github.com/MetaMask/metamask-extension/pull/10219): Restore provider 'data' event (#10219)
+- zh_TW: 乙太 -> 以太 ([#10191](https://github.com/MetaMask/metamask-extension/pull/10191))
+- zh_TW: Translate buy, assets, activity ([#10207](https://github.com/MetaMask/metamask-extension/pull/10207))
+- Restore provider 'data' event ([#10219](https://github.com/MetaMask/metamask-extension/pull/10219))
 
 ## [9.0.1] - 2021-01-13
 ### Uncategorized
-- [#10169](https://github.com/MetaMask/metamask-extension/pull/10169): Improved detection of contract methods with array parameters
-- [#10178](https://github.com/MetaMask/metamask-extension/pull/10178): Only warn of injected web3 usage once per page
-- [#10179](https://github.com/MetaMask/metamask-extension/pull/10179): Restore support for @metamask/inpage provider@"< 8.0.0"
-- [#10180](https://github.com/MetaMask/metamask-extension/pull/10180): Fix UI crash when domain metadata is missing on public encryption key confirmation page
+- Improved detection of contract methods with array parameters ([#10169](https://github.com/MetaMask/metamask-extension/pull/10169))
+- Only warn of injected web3 usage once per page ([#10178](https://github.com/MetaMask/metamask-extension/pull/10178))
+- Restore support for @metamask/inpage provider@"< 8.0.0" ([#10179](https://github.com/MetaMask/metamask-extension/pull/10179))
+- Fix UI crash when domain metadata is missing on public encryption key confirmation page ([#10180](https://github.com/MetaMask/metamask-extension/pull/10180))
 
 ## [9.0.0] - 2021-01-12
 ### Uncategorized
-- [#9156](https://github.com/MetaMask/metamask-extension/pull/9156): Remove window.web3 injection
-- [#10039](https://github.com/MetaMask/metamask-extension/pull/10039): Add web3 shim usage notification
-- [#8640](https://github.com/MetaMask/metamask-extension/pull/8640): Implement breaking window.ethereum API changes
-- [#8629](https://github.com/MetaMask/metamask-extension/pull/8629): Fix `eth_chainId` return values for Infura networks
-- [#10019](https://github.com/MetaMask/metamask-extension/pull/10019): Increase Chrome minimum version to v63
-- [#10135](https://github.com/MetaMask/metamask-extension/pull/10135): Fix error where a swap only completed the token approval transaction
-- [#10100](https://github.com/MetaMask/metamask-extension/pull/10100): Remove unnecessary swaps footer space when in dropdown mode
-- [#9905](https://github.com/MetaMask/metamask-extension/pull/9905): Redesign view quote screens
-- [#9320](https://github.com/MetaMask/metamask-extension/pull/9320): Prevent hidden tokens from reappearing
-- [#10000](https://github.com/MetaMask/metamask-extension/pull/10000): Use consistent font size for modal top right Close links
-- [#10046](https://github.com/MetaMask/metamask-extension/pull/10046): Improve home screen notification appearance
-- [#10093](https://github.com/MetaMask/metamask-extension/pull/10093): Always roll back to the previously selected network when unable to connect to a newly selected network
-- [#10117](https://github.com/MetaMask/metamask-extension/pull/10117): Fix network settings Kovan block explorer link
-- [#10143](https://github.com/MetaMask/metamask-extension/pull/10143): Prevent malformed next nonce warning
-- [#10142](https://github.com/MetaMask/metamask-extension/pull/10142): Update @metamask/contract-metadata from v1.20.0 to 1.21.0
-- [#10160](https://github.com/MetaMask/metamask-extension/pull/10160): Fix French "Block Explorer URL" translations
-- [#10157](https://github.com/MetaMask/metamask-extension/pull/10157): Automatically detect tokens on custom Mainnet RPC endpoints
-- [#9772](https://github.com/MetaMask/metamask-extension/pull/9772): Improve zh_CN translation
-- [#10170](https://github.com/MetaMask/metamask-extension/pull/10170): Fix bug where swaps button was disabled on Mainnet if the user hadn't switched networks in a long time
+- Remove window.web3 injection ([#9156](https://github.com/MetaMask/metamask-extension/pull/9156))
+- Add web3 shim usage notification ([#10039](https://github.com/MetaMask/metamask-extension/pull/10039))
+- Implement breaking window.ethereum API changes ([#8640](https://github.com/MetaMask/metamask-extension/pull/8640))
+- Fix `eth_chainId` return values for Infura networks ([#8629](https://github.com/MetaMask/metamask-extension/pull/8629))
+- Increase Chrome minimum version to v63 ([#10019](https://github.com/MetaMask/metamask-extension/pull/10019))
+- Fix error where a swap only completed the token approval transaction ([#10135](https://github.com/MetaMask/metamask-extension/pull/10135))
+- Remove unnecessary swaps footer space when in dropdown mode ([#10100](https://github.com/MetaMask/metamask-extension/pull/10100))
+- Redesign view quote screens ([#9905](https://github.com/MetaMask/metamask-extension/pull/9905))
+- Prevent hidden tokens from reappearing ([#9320](https://github.com/MetaMask/metamask-extension/pull/9320))
+- Use consistent font size for modal top right Close links ([#10000](https://github.com/MetaMask/metamask-extension/pull/10000))
+- Improve home screen notification appearance ([#10046](https://github.com/MetaMask/metamask-extension/pull/10046))
+- Always roll back to the previously selected network when unable to connect to a newly selected network ([#10093](https://github.com/MetaMask/metamask-extension/pull/10093))
+- Fix network settings Kovan block explorer link ([#10117](https://github.com/MetaMask/metamask-extension/pull/10117))
+- Prevent malformed next nonce warning ([#10143](https://github.com/MetaMask/metamask-extension/pull/10143))
+- Update @metamask/contract-metadata from v1.20.0 to 1.21.0 ([#10142](https://github.com/MetaMask/metamask-extension/pull/10142))
+- Fix French "Block Explorer URL" translations ([#10160](https://github.com/MetaMask/metamask-extension/pull/10160))
+- Automatically detect tokens on custom Mainnet RPC endpoints ([#10157](https://github.com/MetaMask/metamask-extension/pull/10157))
+- Improve zh_CN translation ([#9772](https://github.com/MetaMask/metamask-extension/pull/9772))
+- Fix bug where swaps button was disabled on Mainnet if the user hadn't switched networks in a long time ([#10170](https://github.com/MetaMask/metamask-extension/pull/10170))
 
 ## [8.1.11] - 2021-01-07
 ### Uncategorized
-- [#10155](https://github.com/MetaMask/metamask-extension/pull/10155): Disable swaps when the current network's chainId does not match the mainnet chain ID, instead of disabling based on network ID
+- Disable swaps when the current network's chainId does not match the mainnet chain ID, instead of disabling based on network ID ([#10155](https://github.com/MetaMask/metamask-extension/pull/10155))
 
 ## [8.1.10] - 2021-01-04
 ### Uncategorized
-- [#10084](https://github.com/MetaMask/metamask-extension/pull/10084): Set last provider when switching to a customRPC
-- [#10096](https://github.com/MetaMask/metamask-extension/pull/10096): Update `@metamask/controllers` to v5.1.0
-- [#10103](https://github.com/MetaMask/metamask-extension/pull/10103): Prevent stuck loading screen in some situations
-- [#10104](https://github.com/MetaMask/metamask-extension/pull/10104): Bump @metamask/contract-metadata from 1.19.0 to 1.20.0
-- [#10110](https://github.com/MetaMask/metamask-extension/pull/10110): Fix frozen loading screen on Firefox when strict Enhanced Tracking Protection is enabled
+- Set last provider when switching to a customRPC ([#10084](https://github.com/MetaMask/metamask-extension/pull/10084))
+- Update `@metamask/controllers` to v5.1.0 ([#10096](https://github.com/MetaMask/metamask-extension/pull/10096))
+- Prevent stuck loading screen in some situations ([#10103](https://github.com/MetaMask/metamask-extension/pull/10103))
+- Bump @metamask/contract-metadata from 1.19.0 to 1.20.0 ([#10104](https://github.com/MetaMask/metamask-extension/pull/10104))
+- Fix frozen loading screen on Firefox when strict Enhanced Tracking Protection is enabled ([#10110](https://github.com/MetaMask/metamask-extension/pull/10110))
 
 ## [8.1.9] - 2020-12-15
 ### Uncategorized
-- [#10034](https://github.com/MetaMask/metamask-extension/pull/10034): Fix contentscript injection failure on Firefox 56
-- [#10045](https://github.com/MetaMask/metamask-extension/pull/10045): Fix token validation in Send flow
-- [#10048](https://github.com/MetaMask/metamask-extension/pull/10048): Display boolean values when signing typed data
-- [#10070](https://github.com/MetaMask/metamask-extension/pull/10070): Add eth_getProof
-- [#10043](https://github.com/MetaMask/metamask-extension/pull/10043): Improve swaps maximum gas estimation
-- [#10069](https://github.com/MetaMask/metamask-extension/pull/10069): Fetch swap quote refresh time from API
-- [#10040](https://github.com/MetaMask/metamask-extension/pull/10040): Disable console in contentscript to reduce noise
+- Fix contentscript injection failure on Firefox 56 ([#10034](https://github.com/MetaMask/metamask-extension/pull/10034))
+- Fix token validation in Send flow ([#10045](https://github.com/MetaMask/metamask-extension/pull/10045))
+- Display boolean values when signing typed data ([#10048](https://github.com/MetaMask/metamask-extension/pull/10048))
+- Add eth_getProof ([#10070](https://github.com/MetaMask/metamask-extension/pull/10070))
+- Improve swaps maximum gas estimation ([#10043](https://github.com/MetaMask/metamask-extension/pull/10043))
+- Fetch swap quote refresh time from API ([#10069](https://github.com/MetaMask/metamask-extension/pull/10069))
+- Disable console in contentscript to reduce noise ([#10040](https://github.com/MetaMask/metamask-extension/pull/10040))
 
 ## [8.1.8] - 2020-12-09
 ### Uncategorized
-- [#9992](https://github.com/MetaMask/metamask-extension/pull/9992): Improve transaction params validation
-- [#9991](https://github.com/MetaMask/metamask-extension/pull/9991): Don't allow more than 15% slippage
-- [#9994](https://github.com/MetaMask/metamask-extension/pull/9994): Prevent unwanted 'no quotes available' message when going back to build quote screen while having insufficient funds
-- [#9999](https://github.com/MetaMask/metamask-extension/pull/9999): Fix missing contacts upon restart
+- Improve transaction params validation ([#9992](https://github.com/MetaMask/metamask-extension/pull/9992))
+- Don't allow more than 15% slippage ([#9991](https://github.com/MetaMask/metamask-extension/pull/9991))
+- Prevent unwanted 'no quotes available' message when going back to build quote screen while having insufficient funds ([#9994](https://github.com/MetaMask/metamask-extension/pull/9994))
+- Fix missing contacts upon restart ([#9999](https://github.com/MetaMask/metamask-extension/pull/9999))
 
 ## [8.1.7] - 2020-12-09
 ### Uncategorized
@@ -325,840 +329,841 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [8.1.6] - 2020-12-04
 ### Uncategorized
-- [#9916](https://github.com/MetaMask/metamask-extension/pull/9916): Fix QR code scans interpretting payment requests as token addresses
-- [#9847](https://github.com/MetaMask/metamask-extension/pull/9847): Add alt text for images in list items
-- [#9960](https://github.com/MetaMask/metamask-extension/pull/9960): Ensure watchAsset returns errors for invalid token symbols
-- [#9968](https://github.com/MetaMask/metamask-extension/pull/9968): Adds tokens from v1.19.0 of metamask/contract-metadata to add token lists
-- [#9970](https://github.com/MetaMask/metamask-extension/pull/9970): Etherscan links support Goerli network
-- [#9899](https://github.com/MetaMask/metamask-extension/pull/9899): Show price impact warnings on swaps quote screen
-- [#9867](https://github.com/MetaMask/metamask-extension/pull/9867): Replace use of ethgasstation
-- [#9984](https://github.com/MetaMask/metamask-extension/pull/9984): Show correct gas estimates when users don't have sufficient balance for contract transaction
-- [#9993](https://github.com/MetaMask/metamask-extension/pull/9993): Add 48x48 MetaMask icon for use by browsers
+- Fix QR code scans interpretting payment requests as token addresses ([#9916](https://github.com/MetaMask/metamask-extension/pull/9916))
+- Add alt text for images in list items ([#9847](https://github.com/MetaMask/metamask-extension/pull/9847))
+- Ensure watchAsset returns errors for invalid token symbols ([#9960](https://github.com/MetaMask/metamask-extension/pull/9960))
+- Adds tokens from v1.19.0 of metamask/contract-metadata to add token lists ([#9968](https://github.com/MetaMask/metamask-extension/pull/9968))
+- Etherscan links support Goerli network ([#9970](https://github.com/MetaMask/metamask-extension/pull/9970))
+- Show price impact warnings on swaps quote screen ([#9899](https://github.com/MetaMask/metamask-extension/pull/9899))
+- Replace use of ethgasstation ([#9867](https://github.com/MetaMask/metamask-extension/pull/9867))
+- Show correct gas estimates when users don't have sufficient balance for contract transaction ([#9984](https://github.com/MetaMask/metamask-extension/pull/9984))
+- Add 48x48 MetaMask icon for use by browsers ([#9993](https://github.com/MetaMask/metamask-extension/pull/9993))
 
 ## [8.1.5] - 2020-11-19
 ### Uncategorized
-- [#9871](https://github.com/MetaMask/metamask-extension/pull/9871): Show send text upon hover in main asset list
-- [#9855](https://github.com/MetaMask/metamask-extension/pull/9855): Make edit icon and account name in account details modal focusable
-- [#9853](https://github.com/MetaMask/metamask-extension/pull/9853): Provide alternative text for images where appropriate
-- [#9869](https://github.com/MetaMask/metamask-extension/pull/9869): Remove CoinSwitch from the Deposit modal
-- [#9883](https://github.com/MetaMask/metamask-extension/pull/9883): Move add contact button in fullscreen/expanded view of settings lower to expose the close button.
-- [#9891](https://github.com/MetaMask/metamask-extension/pull/9891): Add token verification message to swaps build quote screen
-- [#9896](https://github.com/MetaMask/metamask-extension/pull/9896): Show failed token balance updates
-- [#9909](https://github.com/MetaMask/metamask-extension/pull/9909): Update asset page etherscan link to the address-filtered token page on Etherscan
-- [#9910](https://github.com/MetaMask/metamask-extension/pull/9910): Revert "Show a 'send eth' button on home screen in full screen mode"
-- [#9907](https://github.com/MetaMask/metamask-extension/pull/9907): Ensure "Known contract address" warning is shown on send screen even when changing asset
-- [#9911](https://github.com/MetaMask/metamask-extension/pull/9911): Fix display of Ledger connection error
-- [#9918](https://github.com/MetaMask/metamask-extension/pull/9918): Fix missing icon in asset page dropdown and in advanced gas modal button group
+- Show send text upon hover in main asset list ([#9871](https://github.com/MetaMask/metamask-extension/pull/9871))
+- Make edit icon and account name in account details modal focusable ([#9855](https://github.com/MetaMask/metamask-extension/pull/9855))
+- Provide alternative text for images where appropriate ([#9853](https://github.com/MetaMask/metamask-extension/pull/9853))
+- Remove CoinSwitch from the Deposit modal ([#9869](https://github.com/MetaMask/metamask-extension/pull/9869))
+- Move add contact button in fullscreen/expanded view of settings lower to expose the close button. ([#9883](https://github.com/MetaMask/metamask-extension/pull/9883))
+- Add token verification message to swaps build quote screen ([#9891](https://github.com/MetaMask/metamask-extension/pull/9891))
+- Show failed token balance updates ([#9896](https://github.com/MetaMask/metamask-extension/pull/9896))
+- Update asset page etherscan link to the address-filtered token page on Etherscan ([#9909](https://github.com/MetaMask/metamask-extension/pull/9909))
+- Revert "Show a 'send eth' button on home screen in full screen mode" ([#9910](https://github.com/MetaMask/metamask-extension/pull/9910))
+- Ensure "Known contract address" warning is shown on send screen even when changing asset ([#9907](https://github.com/MetaMask/metamask-extension/pull/9907))
+- Fix display of Ledger connection error ([#9911](https://github.com/MetaMask/metamask-extension/pull/9911))
+- Fix missing icon in asset page dropdown and in advanced gas modal button group ([#9918](https://github.com/MetaMask/metamask-extension/pull/9918))
 
 ## [8.1.4] - 2020-11-16
 ### Uncategorized
-- [#9687](https://github.com/MetaMask/metamask-extension/pull/9687): Allow speeding up of underpriced transactions
-- [#9694](https://github.com/MetaMask/metamask-extension/pull/9694): normalize UI component font styles
-- [#9695](https://github.com/MetaMask/metamask-extension/pull/9695): normalize app component font styles
-- [#9696](https://github.com/MetaMask/metamask-extension/pull/9696): normalize deprecated itcss font styles
-- [#9697](https://github.com/MetaMask/metamask-extension/pull/9697): normalize page font styles
-- [#9740](https://github.com/MetaMask/metamask-extension/pull/9740): Standardize network settings page
-- [#9750](https://github.com/MetaMask/metamask-extension/pull/9750): Make swap arrows accessible, make swaps advanced options accessible
-- [#9766](https://github.com/MetaMask/metamask-extension/pull/9766): Use 1px borders on inputs and buttons
-- [#9767](https://github.com/MetaMask/metamask-extension/pull/9767): Remove border radius from transfer button
-- [#9764](https://github.com/MetaMask/metamask-extension/pull/9764): Update custom RPC network dropdown icons
-- [#9763](https://github.com/MetaMask/metamask-extension/pull/9763): Add confirmation for network dropdown delete action
-- [#9583](https://github.com/MetaMask/metamask-extension/pull/9583): Use `chainId` for incoming transactions controller
-- [#9748](https://github.com/MetaMask/metamask-extension/pull/9748): Autofocus input, improve accessibility of restore page
-- [#9778](https://github.com/MetaMask/metamask-extension/pull/9778): Shorten unit input width and use ellipses for overflow
-- [#9746](https://github.com/MetaMask/metamask-extension/pull/9746): Make the login screen's Restore and Import links accessible
-- [#9780](https://github.com/MetaMask/metamask-extension/pull/9780): Display decimal chain ID in network form
-- [#9599](https://github.com/MetaMask/metamask-extension/pull/9599): Use MetaSwap API for gas price estimation in swaps
-- [#9518](https://github.com/MetaMask/metamask-extension/pull/9518): Make all UI tabs accessible via keyboard
-- [#9808](https://github.com/MetaMask/metamask-extension/pull/9808): Always allow overwriting invalid custom RPC chain ID
-- [#9812](https://github.com/MetaMask/metamask-extension/pull/9812): Fix send header cancel button alignment
-- [#9271](https://github.com/MetaMask/metamask-extension/pull/9271): Do not check popupIsOpen on Vivaldi
-- [#9306](https://github.com/MetaMask/metamask-extension/pull/9306): Fix UI crash when dapp submits negative gas price
-- [#9257](https://github.com/MetaMask/metamask-extension/pull/9257): Add sort and search to AddRecipient accounts list
-- [#9824](https://github.com/MetaMask/metamask-extension/pull/9824): Move `externally_connectable` from base to Chrome manifest
-- [#9815](https://github.com/MetaMask/metamask-extension/pull/9815): Add support for custom network RPC URL with basic auth
-- [#9822](https://github.com/MetaMask/metamask-extension/pull/9822): Make QR code button focusable
-- [#9832](https://github.com/MetaMask/metamask-extension/pull/9832): Warn instead of throw on duplicate web3
-- [#9838](https://github.com/MetaMask/metamask-extension/pull/9838): @metamask/controllers@4.0.0
-- [#9856](https://github.com/MetaMask/metamask-extension/pull/9856): Prevent user from getting stuck on opt in page
-- [#9845](https://github.com/MetaMask/metamask-extension/pull/9845): Show a 'send eth' button on home screen in full screen mode
-- [#9871](https://github.com/MetaMask/metamask-extension/pull/9871): Show send text upon hover in main asset list
-- [#9880](https://github.com/MetaMask/metamask-extension/pull/9880): Properly detect U2F errors in hardware wallet
+- Allow speeding up of underpriced transactions ([#9687](https://github.com/MetaMask/metamask-extension/pull/9687))
+- normalize UI component font styles ([#9694](https://github.com/MetaMask/metamask-extension/pull/9694))
+- normalize app component font styles ([#9695](https://github.com/MetaMask/metamask-extension/pull/9695))
+- normalize deprecated itcss font styles ([#9696](https://github.com/MetaMask/metamask-extension/pull/9696))
+- normalize page font styles ([#9697](https://github.com/MetaMask/metamask-extension/pull/9697))
+- Standardize network settings page ([#9740](https://github.com/MetaMask/metamask-extension/pull/9740))
+- Make swap arrows accessible, make swaps advanced options accessible ([#9750](https://github.com/MetaMask/metamask-extension/pull/9750))
+- Use 1px borders on inputs and buttons ([#9766](https://github.com/MetaMask/metamask-extension/pull/9766))
+- Remove border radius from transfer button ([#9767](https://github.com/MetaMask/metamask-extension/pull/9767))
+- Update custom RPC network dropdown icons ([#9764](https://github.com/MetaMask/metamask-extension/pull/9764))
+- Add confirmation for network dropdown delete action ([#9763](https://github.com/MetaMask/metamask-extension/pull/9763))
+- Use `chainId` for incoming transactions controller ([#9583](https://github.com/MetaMask/metamask-extension/pull/9583))
+- Autofocus input, improve accessibility of restore page ([#9748](https://github.com/MetaMask/metamask-extension/pull/9748))
+- Shorten unit input width and use ellipses for overflow ([#9778](https://github.com/MetaMask/metamask-extension/pull/9778))
+- Make the login screen's Restore and Import links accessible ([#9746](https://github.com/MetaMask/metamask-extension/pull/9746))
+- Display decimal chain ID in network form ([#9780](https://github.com/MetaMask/metamask-extension/pull/9780))
+- Use MetaSwap API for gas price estimation in swaps ([#9599](https://github.com/MetaMask/metamask-extension/pull/9599))
+- Make all UI tabs accessible via keyboard ([#9518](https://github.com/MetaMask/metamask-extension/pull/9518))
+- Always allow overwriting invalid custom RPC chain ID ([#9808](https://github.com/MetaMask/metamask-extension/pull/9808))
+- Fix send header cancel button alignment ([#9812](https://github.com/MetaMask/metamask-extension/pull/9812))
+- Do not check popupIsOpen on Vivaldi ([#9271](https://github.com/MetaMask/metamask-extension/pull/9271))
+- Fix UI crash when dapp submits negative gas price ([#9306](https://github.com/MetaMask/metamask-extension/pull/9306))
+- Add sort and search to AddRecipient accounts list ([#9257](https://github.com/MetaMask/metamask-extension/pull/9257))
+- Move `externally_connectable` from base to Chrome manifest ([#9824](https://github.com/MetaMask/metamask-extension/pull/9824))
+- Add support for custom network RPC URL with basic auth ([#9815](https://github.com/MetaMask/metamask-extension/pull/9815))
+- Make QR code button focusable ([#9822](https://github.com/MetaMask/metamask-extension/pull/9822))
+- Warn instead of throw on duplicate web3 ([#9832](https://github.com/MetaMask/metamask-extension/pull/9832))
+- @metamask/controllers@4.0.0 ([#9838](https://github.com/MetaMask/metamask-extension/pull/9838))
+- Prevent user from getting stuck on opt in page ([#9856](https://github.com/MetaMask/metamask-extension/pull/9856))
+- Show a 'send eth' button on home screen in full screen mode ([#9845](https://github.com/MetaMask/metamask-extension/pull/9845))
+- Show send text upon hover in main asset list ([#9871](https://github.com/MetaMask/metamask-extension/pull/9871))
+- Properly detect U2F errors in hardware wallet ([#9880](https://github.com/MetaMask/metamask-extension/pull/9880))
 
 ## [8.1.3] - 2020-10-29
 ### Uncategorized
-- [#9642](https://github.com/MetaMask/metamask-extension/pull/9642) Prevent excessive overflow from swap dropdowns
-- [#9658](https://github.com/MetaMask/metamask-extension/pull/9658): Fix sorting Quote Source column of quote sort list
-- [#9667](https://github.com/MetaMask/metamask-extension/pull/9667): Fix adding contact with QR code
-- [#9674](https://github.com/MetaMask/metamask-extension/pull/9674): Fix ENS resolution of `.eth` URLs with query strings
-- [#9691](https://github.com/MetaMask/metamask-extension/pull/9691): Bump @metamask/inpage-provider from 6.1.0 to 6.3.0
-- [#9700](https://github.com/MetaMask/metamask-extension/pull/9700): Provide image sizing so there's no jump when opening the swaps token search
-- [#9568](https://github.com/MetaMask/metamask-extension/pull/9568): Add ses lockdown to build system
-- [#9705](https://github.com/MetaMask/metamask-extension/pull/9705): Prevent memory leak from selected account copy tooltip
-- [#9671](https://github.com/MetaMask/metamask-extension/pull/9671): Prevent old fetches from polluting the swap state
-- [#9702](https://github.com/MetaMask/metamask-extension/pull/9702): Keyboard navigation for swaps dropdowns
-- [#9646](https://github.com/MetaMask/metamask-extension/pull/9646): Switch from Matomo to Segment
-- [#9745](https://github.com/MetaMask/metamask-extension/pull/9745): Fix fetching swaps when initial network not Mainnet
-- [#9621](https://github.com/MetaMask/metamask-extension/pull/9621): Include aggregator fee as part of displayed network fees
-- [#9736](https://github.com/MetaMask/metamask-extension/pull/9736): Bump eth-contract-metadata from 1.16.0 to 1.17.0
-- [#9743](https://github.com/MetaMask/metamask-extension/pull/9743): Fix "+-" prefix on swap token amount
-- [#9715](https://github.com/MetaMask/metamask-extension/pull/9715): Focus on wallet address in buy workflow
+- Prevent excessive overflow from swap dropdowns ([#9642](https://github.com/MetaMask/metamask-extension/pull/9642))
+- Fix sorting Quote Source column of quote sort list ([#9658](https://github.com/MetaMask/metamask-extension/pull/9658))
+- Fix adding contact with QR code ([#9667](https://github.com/MetaMask/metamask-extension/pull/9667))
+- Fix ENS resolution of `.eth` URLs with query strings ([#9674](https://github.com/MetaMask/metamask-extension/pull/9674))
+- Bump @metamask/inpage-provider from 6.1.0 to 6.3.0 ([#9691](https://github.com/MetaMask/metamask-extension/pull/9691))
+- Provide image sizing so there's no jump when opening the swaps token search ([#9700](https://github.com/MetaMask/metamask-extension/pull/9700))
+- Add ses lockdown to build system ([#9568](https://github.com/MetaMask/metamask-extension/pull/9568))
+- Prevent memory leak from selected account copy tooltip ([#9705](https://github.com/MetaMask/metamask-extension/pull/9705))
+- Prevent old fetches from polluting the swap state ([#9671](https://github.com/MetaMask/metamask-extension/pull/9671))
+- Keyboard navigation for swaps dropdowns ([#9702](https://github.com/MetaMask/metamask-extension/pull/9702))
+- Switch from Matomo to Segment ([#9646](https://github.com/MetaMask/metamask-extension/pull/9646))
+- Fix fetching swaps when initial network not Mainnet ([#9745](https://github.com/MetaMask/metamask-extension/pull/9745))
+- Include aggregator fee as part of displayed network fees ([#9621](https://github.com/MetaMask/metamask-extension/pull/9621))
+- Bump eth-contract-metadata from 1.16.0 to 1.17.0 ([#9736](https://github.com/MetaMask/metamask-extension/pull/9736))
+- Fix "+-" prefix on swap token amount ([#9743](https://github.com/MetaMask/metamask-extension/pull/9743))
+- Focus on wallet address in buy workflow ([#9715](https://github.com/MetaMask/metamask-extension/pull/9715))
 
 ## [8.1.2] - 2020-10-20
 ### Uncategorized
-- [#9608](https://github.com/MetaMask/metamask-extension/pull/9608): Ensure QR code scanner works
-- [#9624](https://github.com/MetaMask/metamask-extension/pull/9624): Help users avoid insufficient gas prices in swaps
-- [#9614](https://github.com/MetaMask/metamask-extension/pull/9614): Update swaps network fee tooltip
-- [#9623](https://github.com/MetaMask/metamask-extension/pull/9623): Prevent reducing the gas limit for swaps
-- [#9630](https://github.com/MetaMask/metamask-extension/pull/9630): Fix UI crash when trying to render estimated time remaining of non-submitted transaction
-- [#9633](https://github.com/MetaMask/metamask-extension/pull/9633): Update View Quote page to better represent the MetaMask fee
+- Ensure QR code scanner works ([#9608](https://github.com/MetaMask/metamask-extension/pull/9608))
+- Help users avoid insufficient gas prices in swaps ([#9624](https://github.com/MetaMask/metamask-extension/pull/9624))
+- Update swaps network fee tooltip ([#9614](https://github.com/MetaMask/metamask-extension/pull/9614))
+- Prevent reducing the gas limit for swaps ([#9623](https://github.com/MetaMask/metamask-extension/pull/9623))
+- Fix UI crash when trying to render estimated time remaining of non-submitted transaction ([#9630](https://github.com/MetaMask/metamask-extension/pull/9630))
+- Update View Quote page to better represent the MetaMask fee ([#9633](https://github.com/MetaMask/metamask-extension/pull/9633))
 
 ## [8.1.1] - 2020-10-15
 ### Uncategorized
-- [#9586](https://github.com/MetaMask/metamask-extension/pull/9586): Prevent build quote crash when swapping from non-tracked token with balance (#9586)
-- [#9592](https://github.com/MetaMask/metamask-extension/pull/9592): Remove commitment to maintain a public metrics dashboard (#9592)
-- [#9596](https://github.com/MetaMask/metamask-extension/pull/9596): Fix TypeError when `signTypedData` throws (#9596)
-- [#9591](https://github.com/MetaMask/metamask-extension/pull/9591): Fix Firefox overflow on transaction items with long amounts (#9591)
-- [#9601](https://github.com/MetaMask/metamask-extension/pull/9601): Update text content of invalid custom network alert (#9601)
-- [#9575](https://github.com/MetaMask/metamask-extension/pull/9575): Ensure proper hover display for accounts in main menu (#9575)
-- [#9576](https://github.com/MetaMask/metamask-extension/pull/9576): Autofocus the appropriate text fields in the Create/Import/Hardware screen (#9576)
-- [#9581](https://github.com/MetaMask/metamask-extension/pull/9581): AutoFocus the from input on swaps screen (#9581)
-- [#9602](https://github.com/MetaMask/metamask-extension/pull/9602): Prevent swap button from being focused when disabled (#9602)
-- [#9609](https://github.com/MetaMask/metamask-extension/pull/9609): Ensure swaps customize gas modal values are set correctly (#9609)
+- Prevent build quote crash when swapping from non-tracked token with balance ([#9586](https://github.com/MetaMask/metamask-extension/pull/9586))
+- Remove commitment to maintain a public metrics dashboard ([#9592](https://github.com/MetaMask/metamask-extension/pull/9592))
+- Fix TypeError when `signTypedData` throws ([#9596](https://github.com/MetaMask/metamask-extension/pull/9596))
+- Fix Firefox overflow on transaction items with long amounts ([#9591](https://github.com/MetaMask/metamask-extension/pull/9591))
+- Update text content of invalid custom network alert ([#9601](https://github.com/MetaMask/metamask-extension/pull/9601))
+- Ensure proper hover display for accounts in main menu ([#9575](https://github.com/MetaMask/metamask-extension/pull/9575))
+- Autofocus the appropriate text fields in the Create/Import/Hardware screen ([#9576](https://github.com/MetaMask/metamask-extension/pull/9576))
+- AutoFocus the from input on swaps screen ([#9581](https://github.com/MetaMask/metamask-extension/pull/9581))
+- Prevent swap button from being focused when disabled ([#9602](https://github.com/MetaMask/metamask-extension/pull/9602))
+- Ensure swaps customize gas modal values are set correctly ([#9609](https://github.com/MetaMask/metamask-extension/pull/9609))
 
 ## [8.1.0] - 2020-10-13
 ### Uncategorized
-- [#9565](https://github.com/MetaMask/metamask-extension/pull/9565): Ensure address book entries are shared between networks with the same chain ID
-- [#9552](https://github.com/MetaMask/metamask-extension/pull/9552): Fix `eth_signTypedData_v4` chain ID validation for non-default networks
-- [#9551](https://github.com/MetaMask/metamask-extension/pull/9551): Allow the "Localhost 8545" network to be edited, and require a chain ID to be specified for it
-- [#9491](https://github.com/MetaMask/metamask-extension/pull/9491): Validate custom network chain IDs against endpoint `eth_chainId` return values
-- [#9487](https://github.com/MetaMask/metamask-extension/pull/9487): Require chain IDs to be specified for custom networks
-- [#9482](https://github.com/MetaMask/metamask-extension/pull/9482): Add MetaMask Swaps 🌻
-- [#9422](https://github.com/MetaMask/metamask-extension/pull/9422): Fix data backup feature (i.e. syncing with 3box)
-- [#9434](https://github.com/MetaMask/metamask-extension/pull/9434): Improve gas input UI by using tooltip instead of a modal to communicate gas data
-- [#9433](https://github.com/MetaMask/metamask-extension/pull/9433): Improve visual style and layout of the basic tab of the customize gas modal
-- [#9415](https://github.com/MetaMask/metamask-extension/pull/9415): Fix UI bug in token approval confirmation notifications
-- [#9414](https://github.com/MetaMask/metamask-extension/pull/9414): Update Wyre purchase URL
-- [#9411](https://github.com/MetaMask/metamask-extension/pull/9411): Rename 'Ethereum Main Network' in network selector to 'Etherum Mainnet'
-- [#9409](https://github.com/MetaMask/metamask-extension/pull/9409): Fix info tooltip on the alert settings screen when used in firefox
-- [#9406](https://github.com/MetaMask/metamask-extension/pull/9406): Fix UI bug in customize gas modal: shwo left border when the first button is selected
-- [#9395](https://github.com/MetaMask/metamask-extension/pull/9395): Correctly save new Contact Book addressed after editing them in 'Settings > Contact'
-- [#9293](https://github.com/MetaMask/metamask-extension/pull/9293): Improve Italian translations
-- [#9295](https://github.com/MetaMask/metamask-extension/pull/9295): Ensure the extension can be unlocked without network/internet access
-- [#9344](https://github.com/MetaMask/metamask-extension/pull/9344): Add messages to Ledger connection process
-- [#9329](https://github.com/MetaMask/metamask-extension/pull/9329): Hide seedphrase by default when restoring vault, and provide option for it to be shown
-- [#9333](https://github.com/MetaMask/metamask-extension/pull/9333): Ensure names of token symbols are shown when token amounts in the token list are long
-- [#9321](https://github.com/MetaMask/metamask-extension/pull/9321): Warn users when sending tokens to the token address
-- [#9288](https://github.com/MetaMask/metamask-extension/pull/9288): Fix bug that caused the accounts list to be empty after entering an incorrect password when attempting to export private key
-- [#9314](https://github.com/MetaMask/metamask-extension/pull/9314): Improve/fix error text for when ENS names are not found, on mainnet
-- [#9307](https://github.com/MetaMask/metamask-extension/pull/9307): Improve 'Contact Us' copy in settings
-- [#9283](https://github.com/MetaMask/metamask-extension/pull/9283): Fix capitalization of copy on MetaMetrics opt-in page
-- [#9269](https://github.com/MetaMask/metamask-extension/pull/9269): Add lock icon to default networks in the Settings network page, to indicate they are not editable
-- [#9189](https://github.com/MetaMask/metamask-extension/pull/9189): Hide gas price/speed estimate button, and link to advanced gas modal, in send flow on non-main network
-- [#9184](https://github.com/MetaMask/metamask-extension/pull/9184): Improve visual styling of back button in account modal
-- [#9152](https://github.com/MetaMask/metamask-extension/pull/9152): Fix vertical align of the network name in network dropdown button
-- [#9073](https://github.com/MetaMask/metamask-extension/pull/9073): Use new Euclid font throughout MetaMask
+- Ensure address book entries are shared between networks with the same chain ID ([#9565](https://github.com/MetaMask/metamask-extension/pull/9565))
+- Fix `eth_signTypedData_v4` chain ID validation for non-default networks ([#9552](https://github.com/MetaMask/metamask-extension/pull/9552))
+- Allow the "Localhost 8545" network to be edited, and require a chain ID to be specified for it ([#9551](https://github.com/MetaMask/metamask-extension/pull/9551))
+- Validate custom network chain IDs against endpoint `eth_chainId` return values ([#9491](https://github.com/MetaMask/metamask-extension/pull/9491))
+- Require chain IDs to be specified for custom networks ([#9487](https://github.com/MetaMask/metamask-extension/pull/9487))
+- Add MetaMask Swaps 🌻 ([#9482](https://github.com/MetaMask/metamask-extension/pull/9482))
+- Fix data backup feature ([#9422](https://github.com/MetaMask/metamask-extension/pull/9422))
+- Improve gas input UI by using tooltip instead of a modal to communicate gas data ([#9434](https://github.com/MetaMask/metamask-extension/pull/9434))
+- Improve visual style and layout of the basic tab of the customize gas modal ([#9433](https://github.com/MetaMask/metamask-extension/pull/9433))
+- Fix UI bug in token approval confirmation notifications ([#9415](https://github.com/MetaMask/metamask-extension/pull/9415))
+- Update Wyre purchase URL ([#9414](https://github.com/MetaMask/metamask-extension/pull/9414))
+- Rename 'Ethereum Main Network' in network selector to 'Etherum Mainnet' ([#9411](https://github.com/MetaMask/metamask-extension/pull/9411))
+- Fix info tooltip on the alert settings screen when used in firefox ([#9409](https://github.com/MetaMask/metamask-extension/pull/9409))
+- Fix UI bug in customize gas modal: shwo left border when the first button is selected ([#9406](https://github.com/MetaMask/metamask-extension/pull/9406))
+- Correctly save new Contact Book addressed after editing them in 'Settings > Contact' ([#9395](https://github.com/MetaMask/metamask-extension/pull/9395))
+- Improve Italian translations ([#9293](https://github.com/MetaMask/metamask-extension/pull/9293))
+- Ensure the extension can be unlocked without network/internet access ([#9295](https://github.com/MetaMask/metamask-extension/pull/9295))
+- Add messages to Ledger connection process ([#9344](https://github.com/MetaMask/metamask-extension/pull/9344))
+- Hide seedphrase by default when restoring vault, and provide option for it to be shown ([#9329](https://github.com/MetaMask/metamask-extension/pull/9329))
+- Ensure names of token symbols are shown when token amounts in the token list are long ([#9333](https://github.com/MetaMask/metamask-extension/pull/9333))
+- Warn users when sending tokens to the token address ([#9321](https://github.com/MetaMask/metamask-extension/pull/9321))
+- Fix bug that caused the accounts list to be empty after entering an incorrect password when attempting to export private key ([#9288](https://github.com/MetaMask/metamask-extension/pull/9288))
+- Improve/fix error text for when ENS names are not found, on mainnet ([#9314](https://github.com/MetaMask/metamask-extension/pull/9314))
+- Improve 'Contact Us' copy in settings ([#9307](https://github.com/MetaMask/metamask-extension/pull/9307))
+- Fix capitalization of copy on MetaMetrics opt-in page ([#9283](https://github.com/MetaMask/metamask-extension/pull/9283))
+- Add lock icon to default networks in the Settings network page, to indicate they are not editable ([#9269](https://github.com/MetaMask/metamask-extension/pull/9269))
+- Hide gas price/speed estimate button, and link to advanced gas modal, in send flow on non-main network ([#9189](https://github.com/MetaMask/metamask-extension/pull/9189))
+- Improve visual styling of back button in account modal ([#9184](https://github.com/MetaMask/metamask-extension/pull/9184))
+- Fix vertical align of the network name in network dropdown button ([#9152](https://github.com/MetaMask/metamask-extension/pull/9152))
+- Use new Euclid font throughout MetaMask ([#9073](https://github.com/MetaMask/metamask-extension/pull/9073))
 
 ## [8.0.10] - 2020-09-16
 ### Uncategorized
-- [#9423](https://github.com/MetaMask/metamask-extension/pull/9423): Update default phishing list
-- [#9416](https://github.com/MetaMask/metamask-extension/pull/9416): Fix fetching a new phishing list on Firefox
+- Update default phishing list ([#9423](https://github.com/MetaMask/metamask-extension/pull/9423))
+- Fix fetching a new phishing list on Firefox ([#9416](https://github.com/MetaMask/metamask-extension/pull/9416))
 
 ## [8.0.9] - 2020-08-19
 ### Uncategorized
-- [#9228](https://github.com/MetaMask/metamask-extension/pull/9228): Move transaction confirmation footer buttons to scrollable area
-- [#9256](https://github.com/MetaMask/metamask-extension/pull/9256): Handle non-String web3 property access
-- [#9266](https://github.com/MetaMask/metamask-extension/pull/9266): Use @metamask/controllers@2.0.5
-- [#9189](https://github.com/MetaMask/metamask-extension/pull/9189): Hide ETH Gas Station estimates on non-main network
+- Move transaction confirmation footer buttons to scrollable area ([#9228](https://github.com/MetaMask/metamask-extension/pull/9228))
+- Handle non-String web3 property access ([#9256](https://github.com/MetaMask/metamask-extension/pull/9256))
+- Use @metamask/controllers@2.0.5 ([#9266](https://github.com/MetaMask/metamask-extension/pull/9266))
+- Hide ETH Gas Station estimates on non-main network ([#9189](https://github.com/MetaMask/metamask-extension/pull/9189))
 
 ## [8.0.8] - 2020-08-14
 ### Uncategorized
-- [#9211](https://github.com/MetaMask/metamask-extension/pull/9211): Fix Etherscan redirect on notification click
-- [#9237](https://github.com/MetaMask/metamask-extension/pull/9237): Reduce volume of web3 usage metrics
-- [#9227](https://github.com/MetaMask/metamask-extension/pull/9227): Permit all-caps addresses
+- Fix Etherscan redirect on notification click ([#9211](https://github.com/MetaMask/metamask-extension/pull/9211))
+- Reduce volume of web3 usage metrics ([#9237](https://github.com/MetaMask/metamask-extension/pull/9237))
+- Permit all-caps addresses ([#9227](https://github.com/MetaMask/metamask-extension/pull/9227))
 
 ## [8.0.7] - 2020-08-10
 ### Uncategorized
-- [#9065](https://github.com/MetaMask/metamask-extension/pull/9065): Change title of "Reveal Seed Words" page to "Reveal Seed Phrase"
-- [#8974](https://github.com/MetaMask/metamask-extension/pull/8974): Add tooltip to copy button for contacts and seed phrase
-- [#9063](https://github.com/MetaMask/metamask-extension/pull/9063): Fix broken UI upon failed password validation
-- [#9075](https://github.com/MetaMask/metamask-extension/pull/9075): Fix shifted popup notification when browser is in fullscreen on macOS
-- [#9085](https://github.com/MetaMask/metamask-extension/pull/9085): Support longer text in network dropdown
-- [#8873](https://github.com/MetaMask/metamask-extension/pull/8873): Fix onboarding bug where user can be asked to verify seed phrase twice
-- [#9104](https://github.com/MetaMask/metamask-extension/pull/9104): Replace "Email us" button with "Contact us" button
-- [#9137](https://github.com/MetaMask/metamask-extension/pull/9137): Fix bug where `accountsChanged` events stop after a dapp connection is closed.
-- [#9152](https://github.com/MetaMask/metamask-extension/pull/9152): Fix network name alignment
-- [#9144](https://github.com/MetaMask/metamask-extension/pull/9144): Add web3 usage metrics and prepare for web3 removal
+- Change title of "Reveal Seed Words" page to "Reveal Seed Phrase" ([#9065](https://github.com/MetaMask/metamask-extension/pull/9065))
+- Add tooltip to copy button for contacts and seed phrase ([#8974](https://github.com/MetaMask/metamask-extension/pull/8974))
+- Fix broken UI upon failed password validation ([#9063](https://github.com/MetaMask/metamask-extension/pull/9063))
+- Fix shifted popup notification when browser is in fullscreen on macOS ([#9075](https://github.com/MetaMask/metamask-extension/pull/9075))
+- Support longer text in network dropdown ([#9085](https://github.com/MetaMask/metamask-extension/pull/9085))
+- Fix onboarding bug where user can be asked to verify seed phrase twice ([#8873](https://github.com/MetaMask/metamask-extension/pull/8873))
+- Replace "Email us" button with "Contact us" button ([#9104](https://github.com/MetaMask/metamask-extension/pull/9104))
+- Fix bug where `accountsChanged` events stop after a dapp connection is closed. ([#9137](https://github.com/MetaMask/metamask-extension/pull/9137))
+- Fix network name alignment ([#9152](https://github.com/MetaMask/metamask-extension/pull/9152))
+- Add web3 usage metrics and prepare for web3 removal ([#9144](https://github.com/MetaMask/metamask-extension/pull/9144))
 
 ## [8.0.6] - 2020-07-23
 ### Uncategorized
-- [#9030](https://github.com/MetaMask/metamask-extension/pull/9030): Hide "delete" button when editing contact of wallet account
-- [#9031](https://github.com/MetaMask/metamask-extension/pull/9031): Fix crash upon removing contact
-- [#9032](https://github.com/MetaMask/metamask-extension/pull/9032): Do not show spend limit for approvals
-- [#9046](https://github.com/MetaMask/metamask-extension/pull/9046): Update @metamask/inpage-provider@6.1.0
-- [#9048](https://github.com/MetaMask/metamask-extension/pull/9048): Skip attempts to resolve 0x contract prefix
-- [#9051](https://github.com/MetaMask/metamask-extension/pull/9051): Use content-hash@2.5.2
-- [#9056](https://github.com/MetaMask/metamask-extension/pull/9056): Display at least one significant digit of small non-zero token balances
+- Hide "delete" button when editing contact of wallet account ([#9030](https://github.com/MetaMask/metamask-extension/pull/9030))
+- Fix crash upon removing contact ([#9031](https://github.com/MetaMask/metamask-extension/pull/9031))
+- Do not show spend limit for approvals ([#9032](https://github.com/MetaMask/metamask-extension/pull/9032))
+- Update @metamask/inpage-provider@6.1.0 ([#9046](https://github.com/MetaMask/metamask-extension/pull/9046))
+- Skip attempts to resolve 0x contract prefix ([#9048](https://github.com/MetaMask/metamask-extension/pull/9048))
+- Use content-hash@2.5.2 ([#9051](https://github.com/MetaMask/metamask-extension/pull/9051))
+- Display at least one significant digit of small non-zero token balances ([#9056](https://github.com/MetaMask/metamask-extension/pull/9056))
 
 ## [8.0.5] - 2020-07-17
 ### Uncategorized
-- [#8942](https://github.com/MetaMask/metamask-extension/pull/8942): Fix display of incoming transactions (#8942)
-- [#8998](https://github.com/MetaMask/metamask-extension/pull/8998): Fix `web3_clientVersion` method (#8998)
-- [#9003](https://github.com/MetaMask/metamask-extension/pull/9003): @metamask/inpage-provider@6.0.1 (#9003)
-- [#9006](https://github.com/MetaMask/metamask-extension/pull/9006): Hide loading indication after `personal_sign` (#9006)
-- [#9011](https://github.com/MetaMask/metamask-extension/pull/9011): Display pending notifications after connect flow (#9011)
-- [#9012](https://github.com/MetaMask/metamask-extension/pull/9012): Skip render when home page is closing or redirecting (#9012)
-- [#9010](https://github.com/MetaMask/metamask-extension/pull/9010): Limit number of transactions passed outside of TransactionController (#9010)
-- [#9023](https://github.com/MetaMask/metamask-extension/pull/9023): Clear AccountTracker accounts and CachedBalances on createNewVaultAndRestore (#9023)
-- [#9025](https://github.com/MetaMask/metamask-extension/pull/9025): Catch gas estimate errors (#9025)
-- [#9026](https://github.com/MetaMask/metamask-extension/pull/9026): Clear transactions on createNewVaultAndRestore (#9026)
+- Fix display of incoming transactions ([#8942](https://github.com/MetaMask/metamask-extension/pull/8942))
+- Fix `web3_clientVersion` method ([#8998](https://github.com/MetaMask/metamask-extension/pull/8998))
+- @metamask/inpage-provider@6.0.1 ([#9003](https://github.com/MetaMask/metamask-extension/pull/9003))
+- Hide loading indication after `personal_sign` ([#9006](https://github.com/MetaMask/metamask-extension/pull/9006))
+- Display pending notifications after connect flow ([#9011](https://github.com/MetaMask/metamask-extension/pull/9011))
+- Skip render when home page is closing or redirecting ([#9012](https://github.com/MetaMask/metamask-extension/pull/9012))
+- Limit number of transactions passed outside of TransactionController ([#9010](https://github.com/MetaMask/metamask-extension/pull/9010))
+- Clear AccountTracker accounts and CachedBalances on createNewVaultAndRestore ([#9023](https://github.com/MetaMask/metamask-extension/pull/9023))
+- Catch gas estimate errors ([#9025](https://github.com/MetaMask/metamask-extension/pull/9025))
+- Clear transactions on createNewVaultAndRestore ([#9026](https://github.com/MetaMask/metamask-extension/pull/9026))
 
 ## [8.0.4] - 2020-07-08
 ### Uncategorized
-- [#8934](https://github.com/MetaMask/metamask-extension/pull/8934): Fix transaction activity on custom networks
-- [#8936](https://github.com/MetaMask/metamask-extension/pull/8936): Fix account tracker optimization
+- Fix transaction activity on custom networks ([#8934](https://github.com/MetaMask/metamask-extension/pull/8934))
+- Fix account tracker optimization ([#8936](https://github.com/MetaMask/metamask-extension/pull/8936))
 
 ## [8.0.3] - 2020-07-06
 ### Uncategorized
-- [#8921](https://github.com/MetaMask/metamask-extension/pull/8921): Restore missing 'data' provider event, and fix 'notification' event
-- [#8923](https://github.com/MetaMask/metamask-extension/pull/8923): Normalize the 'from' parameter for `eth_sendTransaction`
-- [#8924](https://github.com/MetaMask/metamask-extension/pull/8924): Fix handling of multiple `eth_requestAccount` messages from the same domain
-- [#8917](https://github.com/MetaMask/metamask-extension/pull/8917): Update Italian translations
+- Restore missing 'data' provider event, and fix 'notification' event ([#8921](https://github.com/MetaMask/metamask-extension/pull/8921))
+- Normalize the 'from' parameter for `eth_sendTransaction` ([#8923](https://github.com/MetaMask/metamask-extension/pull/8923))
+- Fix handling of multiple `eth_requestAccount` messages from the same domain ([#8924](https://github.com/MetaMask/metamask-extension/pull/8924))
+- Update Italian translations ([#8917](https://github.com/MetaMask/metamask-extension/pull/8917))
 
 ## [8.0.2] - 2020-07-03
 ### Uncategorized
-- [#8907](https://github.com/MetaMask/metamask-extension/pull/8907): Tolerate missing or falsey substitutions
-- [#8908](https://github.com/MetaMask/metamask-extension/pull/8908): Fix activity log inline buttons
-- [#8909](https://github.com/MetaMask/metamask-extension/pull/8909): Prevent confirming blank suggested token
-- [#8910](https://github.com/MetaMask/metamask-extension/pull/8910): Handle suggested token resolved elsewhere
-- [#8913](https://github.com/MetaMask/metamask-extension/pull/8913): Fix Kovan chain ID constant
+- Tolerate missing or falsey substitutions ([#8907](https://github.com/MetaMask/metamask-extension/pull/8907))
+- Fix activity log inline buttons ([#8908](https://github.com/MetaMask/metamask-extension/pull/8908))
+- Prevent confirming blank suggested token ([#8909](https://github.com/MetaMask/metamask-extension/pull/8909))
+- Handle suggested token resolved elsewhere ([#8910](https://github.com/MetaMask/metamask-extension/pull/8910))
+- Fix Kovan chain ID constant ([#8913](https://github.com/MetaMask/metamask-extension/pull/8913))
 
 ## [8.0.1] - 2020-07-02
 ### Uncategorized
-- [#8874](https://github.com/MetaMask/metamask-extension/pull/8874): Fx overflow behaviour of add token list
-- [#8885](https://github.com/MetaMask/metamask-extension/pull/8885): Show `origin` in connect flow rather than site name
-- [#8883](https://github.com/MetaMask/metamask-extension/pull/8883): Allow setting a custom nonce of zero
-- [#8889](https://github.com/MetaMask/metamask-extension/pull/8889): Fix language code format mismatch
-- [#8891](https://github.com/MetaMask/metamask-extension/pull/8891): Prevent showing connected accounts without origin
-- [#8893](https://github.com/MetaMask/metamask-extension/pull/8893): Prevent manually connecting to extension UI
-- [#8895](https://github.com/MetaMask/metamask-extension/pull/8895): Allow localized messages to not use substitutions
-- [#8897](https://github.com/MetaMask/metamask-extension/pull/8897): Update eth-keyring-controller to fix erasure of imported/hardware account names
-- [#8896](https://github.com/MetaMask/metamask-extension/pull/8896): Include relative time polyfill locale data
-- [#8898](https://github.com/MetaMask/metamask-extension/pull/8898): Replace percentage opacity value
+- Fx overflow behaviour of add token list ([#8874](https://github.com/MetaMask/metamask-extension/pull/8874))
+- Show `origin` in connect flow rather than site name ([#8885](https://github.com/MetaMask/metamask-extension/pull/8885))
+- Allow setting a custom nonce of zero ([#8883](https://github.com/MetaMask/metamask-extension/pull/8883))
+- Fix language code format mismatch ([#8889](https://github.com/MetaMask/metamask-extension/pull/8889))
+- Prevent showing connected accounts without origin ([#8891](https://github.com/MetaMask/metamask-extension/pull/8891))
+- Prevent manually connecting to extension UI ([#8893](https://github.com/MetaMask/metamask-extension/pull/8893))
+- Allow localized messages to not use substitutions ([#8895](https://github.com/MetaMask/metamask-extension/pull/8895))
+- Update eth-keyring-controller to fix erasure of imported/hardware account names ([#8897](https://github.com/MetaMask/metamask-extension/pull/8897))
+- Include relative time polyfill locale data ([#8896](https://github.com/MetaMask/metamask-extension/pull/8896))
+- Replace percentage opacity value ([#8898](https://github.com/MetaMask/metamask-extension/pull/8898))
 
 ## [8.0.0] - 2020-07-01
 ### Uncategorized
-- [#7004](https://github.com/MetaMask/metamask-extension/pull/7004): Add permission system
-- [#7261](https://github.com/MetaMask/metamask-extension/pull/7261): Search accounts by name
-- [#7483](https://github.com/MetaMask/metamask-extension/pull/7483): Buffer 3 blocks before dropping a transaction
-- [#7620](https://github.com/MetaMask/metamask-extension/pull/7620): Handle one specific permissions request per tab
-- [#7686](https://github.com/MetaMask/metamask-extension/pull/7686): Add description to Reset Account in settings
-- [#7362](https://github.com/MetaMask/metamask-extension/pull/7362): Allow custom IPFS gateway and use more secure default gateway
-- [#7696](https://github.com/MetaMask/metamask-extension/pull/7696): Adjust colour of Reset Account button to reflect danger
-- [#7602](https://github.com/MetaMask/metamask-extension/pull/7602): Support new onboarding library
-- [#7672](https://github.com/MetaMask/metamask-extension/pull/7672): Update custom token symbol length restriction message
-- [#7747](https://github.com/MetaMask/metamask-extension/pull/7747): Handle 'Enter' keypress on restore from seed screen
-- [#7810](https://github.com/MetaMask/metamask-extension/pull/7810): Remove padding around advanced gas info icon
-- [#7840](https://github.com/MetaMask/metamask-extension/pull/7840): Force background state update after removing an account
-- [#7853](https://github.com/MetaMask/metamask-extension/pull/7853): Change "Log In/Out" terminology to "Unlock/Lock"
-- [#7863](https://github.com/MetaMask/metamask-extension/pull/7863): Add mechanism to randomize seed phrase filename
-- [#7933](https://github.com/MetaMask/metamask-extension/pull/7933): Sort seed phrase confirmation buttons alphabetically
-- [#7987](https://github.com/MetaMask/metamask-extension/pull/7987): Add support for 24 word seed phrases
-- [#7971](https://github.com/MetaMask/metamask-extension/pull/7971): Use contact name instead of address during send flow
-- [#8050](https://github.com/MetaMask/metamask-extension/pull/8050): Add title attribute to transaction title
-- [#7831](https://github.com/MetaMask/metamask-extension/pull/7831): Implement encrypt/decrypt feature
-- [#8125](https://github.com/MetaMask/metamask-extension/pull/8125): Add setting for disabling Eth Phishing Detection
-- [#8148](https://github.com/MetaMask/metamask-extension/pull/8148): Prevent external domains from submitting more than one perm request at a time
-- [#8149](https://github.com/MetaMask/metamask-extension/pull/8149): Wait for extension unlock before processing eth_requestAccounts
-- [#8201](https://github.com/MetaMask/metamask-extension/pull/8201): Add Idle Timeout for Sync with mobile
-- [#8247](https://github.com/MetaMask/metamask-extension/pull/8247): Update Italian translation
-- [#8246](https://github.com/MetaMask/metamask-extension/pull/8246): Make seed phrase import case-insensitive
-- [#8254](https://github.com/MetaMask/metamask-extension/pull/8254): Convert Connected Sites page to modal
-- [#8259](https://github.com/MetaMask/metamask-extension/pull/8259): Update token cell to show inline stale balance warning
-- [#8264](https://github.com/MetaMask/metamask-extension/pull/8264): Move asset list to home tab on small screens
-- [#8270](https://github.com/MetaMask/metamask-extension/pull/8270): Connected status indicator
-- [#8078](https://github.com/MetaMask/metamask-extension/pull/8078): Allow selecting multiple accounts during connect flow
-- [#8318](https://github.com/MetaMask/metamask-extension/pull/8318): Focus the notification popup if it's already open
-- [#8356](https://github.com/MetaMask/metamask-extension/pull/8356): Position notification relative to last focused window
-- [#8358](https://github.com/MetaMask/metamask-extension/pull/8358): Close notification UI if no unapproved confirmations
-- [#8293](https://github.com/MetaMask/metamask-extension/pull/8293): Add popup explaining connection indicator to existing users
-- [#8435](https://github.com/MetaMask/metamask-extension/pull/8435): Correctly detect changes to background state
-- [#7912](https://github.com/MetaMask/metamask-extension/pull/7912): Disable import button for empty string/file
-- [#8246](https://github.com/MetaMask/metamask-extension/pull/8246): Make seed phrase import case-insensitive
-- [#8312](https://github.com/MetaMask/metamask-extension/pull/8312): Alert user upon switching to unconnected account
-- [#8445](https://github.com/MetaMask/metamask-extension/pull/8445): Only updating pending transactions upon block update
-- [#8467](https://github.com/MetaMask/metamask-extension/pull/8467): Fix firefox popup location
-- [#8486](https://github.com/MetaMask/metamask-extension/pull/8486): Prevent race condition where transaction value set in UI is overwritten
-- [#8490](https://github.com/MetaMask/metamask-extension/pull/8490): Fix default gas race condition
-- [#8491](https://github.com/MetaMask/metamask-extension/pull/8491): Update tokens after importing account
-- [#8496](https://github.com/MetaMask/metamask-extension/pull/8496): Enable disconnecting a single account or all accounts
-- [#8502](https://github.com/MetaMask/metamask-extension/pull/8502): Add support for IPFS address resolution
-- [#8419](https://github.com/MetaMask/metamask-extension/pull/8419): Add version dimension to metrics event
-- [#8508](https://github.com/MetaMask/metamask-extension/pull/8508): Open notification UI when eth_requestAccounts waits for unlock
-- [#8533](https://github.com/MetaMask/metamask-extension/pull/8533): Prevent negative values on gas inputs
-- [#8550](https://github.com/MetaMask/metamask-extension/pull/8550): Allow disabling alerts
-- [#8563](https://github.com/MetaMask/metamask-extension/pull/8563): Synchronously update transaction status
-- [#8567](https://github.com/MetaMask/metamask-extension/pull/8567): Improve Spanish localized message
-- [#8532](https://github.com/MetaMask/metamask-extension/pull/8532): Add switch to connected account alert
-- [#8575](https://github.com/MetaMask/metamask-extension/pull/8575): Stop polling for recent blocks on custom networks when UI is closed
-- [#8579](https://github.com/MetaMask/metamask-extension/pull/8579): Fix Matomo dimension IDs
-- [#8592](https://github.com/MetaMask/metamask-extension/pull/8592): Handle trailing / in block explorer URLs
-- [#8313](https://github.com/MetaMask/metamask-extension/pull/8313): Add Connected Accounts modal
-- [#8609](https://github.com/MetaMask/metamask-extension/pull/8609): Sticky position the tabs at the top
-- [#8634](https://github.com/MetaMask/metamask-extension/pull/8634): Define global `web3` as non-enumerable
-- [#8601](https://github.com/MetaMask/metamask-extension/pull/8601): warn user when sending from different account
-- [#8612](https://github.com/MetaMask/metamask-extension/pull/8612): Persist home tab state
-- [#8564](https://github.com/MetaMask/metamask-extension/pull/8564): Implement new transaction list design
-- [#8596](https://github.com/MetaMask/metamask-extension/pull/8596): Restrict the size of the permissions metadata store
-- [#8654](https://github.com/MetaMask/metamask-extension/pull/8654): Update account options menu design
-- [#8657](https://github.com/MetaMask/metamask-extension/pull/8657): Implement new fullscreen design
-- [#8663](https://github.com/MetaMask/metamask-extension/pull/8663): Show hostname in the disconnect confirmation
-- [#8665](https://github.com/MetaMask/metamask-extension/pull/8665): Make address display wider in Account Details
-- [#8670](https://github.com/MetaMask/metamask-extension/pull/8670): Fix token `decimal` type
-- [#8653](https://github.com/MetaMask/metamask-extension/pull/8653): Limit Dapp permissions to primary account
-- [#8666](https://github.com/MetaMask/metamask-extension/pull/8666): Manually connect via the full connect flow
-- [#8677](https://github.com/MetaMask/metamask-extension/pull/8677): Add metrics events for Wyre and CoinSwitch
-- [#8680](https://github.com/MetaMask/metamask-extension/pull/8680): Fix connect hardware styling
-- [#8689](https://github.com/MetaMask/metamask-extension/pull/8689): Fix create account form styling
-- [#8702](https://github.com/MetaMask/metamask-extension/pull/8702): Fix tab content disappearing during scrolling on macOS Firefox
-- [#8696](https://github.com/MetaMask/metamask-extension/pull/8696): Implement asset page
-- [#8716](https://github.com/MetaMask/metamask-extension/pull/8716): Add nonce to transaction details
-- [#8717](https://github.com/MetaMask/metamask-extension/pull/8717): Use URL origin instead of hostname for permission domains
-- [#8747](https://github.com/MetaMask/metamask-extension/pull/8747): Fix account menu entry for imported accounts
-- [#8768](https://github.com/MetaMask/metamask-extension/pull/8768): Permissions: Do not display HTTP/HTTPS URL schemes for unique hosts
-- [#8730](https://github.com/MetaMask/metamask-extension/pull/8730): Hide seed phrase during Account Import
-- [#8785](https://github.com/MetaMask/metamask-extension/pull/8785): Rename 'History' tab to 'Activity'
-- [#8781](https://github.com/MetaMask/metamask-extension/pull/8781): use UI button for add token functionality
-- [#8786](https://github.com/MetaMask/metamask-extension/pull/8786): Show fiat amounts inline on token transfers
-- [#8789](https://github.com/MetaMask/metamask-extension/pull/8789): Warn users to only add custom networks that they trust
-- [#8802](https://github.com/MetaMask/metamask-extension/pull/8802): Consolidate connected account alerts
-- [#8810](https://github.com/MetaMask/metamask-extension/pull/8810): Remove all user- and translator-facing instances of 'dapp'
-- [#8836](https://github.com/MetaMask/metamask-extension/pull/8836): Update method data when cached method data is empty
-- [#8833](https://github.com/MetaMask/metamask-extension/pull/8833): Improve error handling when signature requested without a keyholder address
-- [#8850](https://github.com/MetaMask/metamask-extension/pull/8850): Stop upper-casing exported private key
-- [#8631](https://github.com/MetaMask/metamask-extension/pull/8631): Include imported accounts in mobile sync
+- Add permission system ([#7004](https://github.com/MetaMask/metamask-extension/pull/7004))
+- Search accounts by name ([#7261](https://github.com/MetaMask/metamask-extension/pull/7261))
+- Buffer 3 blocks before dropping a transaction ([#7483](https://github.com/MetaMask/metamask-extension/pull/7483))
+- Handle one specific permissions request per tab ([#7620](https://github.com/MetaMask/metamask-extension/pull/7620))
+- Add description to Reset Account in settings ([#7686](https://github.com/MetaMask/metamask-extension/pull/7686))
+- Allow custom IPFS gateway and use more secure default gateway ([#7362](https://github.com/MetaMask/metamask-extension/pull/7362))
+- Adjust colour of Reset Account button to reflect danger ([#7696](https://github.com/MetaMask/metamask-extension/pull/7696))
+- Support new onboarding library ([#7602](https://github.com/MetaMask/metamask-extension/pull/7602))
+- Update custom token symbol length restriction message ([#7672](https://github.com/MetaMask/metamask-extension/pull/7672))
+- Handle 'Enter' keypress on restore from seed screen ([#7747](https://github.com/MetaMask/metamask-extension/pull/7747))
+- Remove padding around advanced gas info icon ([#7810](https://github.com/MetaMask/metamask-extension/pull/7810))
+- Force background state update after removing an account ([#7840](https://github.com/MetaMask/metamask-extension/pull/7840))
+- Change "Log In/Out" terminology to "Unlock/Lock" ([#7853](https://github.com/MetaMask/metamask-extension/pull/7853))
+- Add mechanism to randomize seed phrase filename ([#7863](https://github.com/MetaMask/metamask-extension/pull/7863))
+- Sort seed phrase confirmation buttons alphabetically ([#7933](https://github.com/MetaMask/metamask-extension/pull/7933))
+- Add support for 24 word seed phrases ([#7987](https://github.com/MetaMask/metamask-extension/pull/7987))
+- Use contact name instead of address during send flow ([#7971](https://github.com/MetaMask/metamask-extension/pull/7971))
+- Add title attribute to transaction title ([#8050](https://github.com/MetaMask/metamask-extension/pull/8050))
+- Implement encrypt/decrypt feature ([#7831](https://github.com/MetaMask/metamask-extension/pull/7831))
+- Add setting for disabling Eth Phishing Detection ([#8125](https://github.com/MetaMask/metamask-extension/pull/8125))
+- Prevent external domains from submitting more than one perm request at a time ([#8148](https://github.com/MetaMask/metamask-extension/pull/8148))
+- Wait for extension unlock before processing eth_requestAccounts ([#8149](https://github.com/MetaMask/metamask-extension/pull/8149))
+- Add Idle Timeout for Sync with mobile ([#8201](https://github.com/MetaMask/metamask-extension/pull/8201))
+- Update Italian translation ([#8247](https://github.com/MetaMask/metamask-extension/pull/8247))
+- Make seed phrase import case-insensitive ([#8246](https://github.com/MetaMask/metamask-extension/pull/8246))
+- Convert Connected Sites page to modal ([#8254](https://github.com/MetaMask/metamask-extension/pull/8254))
+- Update token cell to show inline stale balance warning ([#8259](https://github.com/MetaMask/metamask-extension/pull/8259))
+- Move asset list to home tab on small screens ([#8264](https://github.com/MetaMask/metamask-extension/pull/8264))
+- Connected status indicator ([#8270](https://github.com/MetaMask/metamask-extension/pull/8270))
+- Allow selecting multiple accounts during connect flow ([#8078](https://github.com/MetaMask/metamask-extension/pull/8078))
+- Focus the notification popup if it's already open ([#8318](https://github.com/MetaMask/metamask-extension/pull/8318))
+- Position notification relative to last focused window ([#8356](https://github.com/MetaMask/metamask-extension/pull/8356))
+- Close notification UI if no unapproved confirmations ([#8358](https://github.com/MetaMask/metamask-extension/pull/8358))
+- Add popup explaining connection indicator to existing users ([#8293](https://github.com/MetaMask/metamask-extension/pull/8293))
+- Correctly detect changes to background state ([#8435](https://github.com/MetaMask/metamask-extension/pull/8435))
+- Disable import button for empty string/file ([#7912](https://github.com/MetaMask/metamask-extension/pull/7912))
+- Make seed phrase import case-insensitive ([#8246](https://github.com/MetaMask/metamask-extension/pull/8246))
+- Alert user upon switching to unconnected account ([#8312](https://github.com/MetaMask/metamask-extension/pull/8312))
+- Only updating pending transactions upon block update ([#8445](https://github.com/MetaMask/metamask-extension/pull/8445))
+- Fix firefox popup location ([#8467](https://github.com/MetaMask/metamask-extension/pull/8467))
+- Prevent race condition where transaction value set in UI is overwritten ([#8486](https://github.com/MetaMask/metamask-extension/pull/8486))
+- Fix default gas race condition ([#8490](https://github.com/MetaMask/metamask-extension/pull/8490))
+- Update tokens after importing account ([#8491](https://github.com/MetaMask/metamask-extension/pull/8491))
+- Enable disconnecting a single account or all accounts ([#8496](https://github.com/MetaMask/metamask-extension/pull/8496))
+- Add support for IPFS address resolution ([#8502](https://github.com/MetaMask/metamask-extension/pull/8502))
+- Add version dimension to metrics event ([#8419](https://github.com/MetaMask/metamask-extension/pull/8419))
+- Open notification UI when eth_requestAccounts waits for unlock ([#8508](https://github.com/MetaMask/metamask-extension/pull/8508))
+- Prevent negative values on gas inputs ([#8533](https://github.com/MetaMask/metamask-extension/pull/8533))
+- Allow disabling alerts ([#8550](https://github.com/MetaMask/metamask-extension/pull/8550))
+- Synchronously update transaction status ([#8563](https://github.com/MetaMask/metamask-extension/pull/8563))
+- Improve Spanish localized message ([#8567](https://github.com/MetaMask/metamask-extension/pull/8567))
+- Add switch to connected account alert ([#8532](https://github.com/MetaMask/metamask-extension/pull/8532))
+- Stop polling for recent blocks on custom networks when UI is closed ([#8575](https://github.com/MetaMask/metamask-extension/pull/8575))
+- Fix Matomo dimension IDs ([#8579](https://github.com/MetaMask/metamask-extension/pull/8579))
+- Handle trailing / in block explorer URLs ([#8592](https://github.com/MetaMask/metamask-extension/pull/8592))
+- Add Connected Accounts modal ([#8313](https://github.com/MetaMask/metamask-extension/pull/8313))
+- Sticky position the tabs at the top ([#8609](https://github.com/MetaMask/metamask-extension/pull/8609))
+- Define global `web3` as non-enumerable ([#8634](https://github.com/MetaMask/metamask-extension/pull/8634))
+- warn user when sending from different account ([#8601](https://github.com/MetaMask/metamask-extension/pull/8601))
+- Persist home tab state ([#8612](https://github.com/MetaMask/metamask-extension/pull/8612))
+- Implement new transaction list design ([#8564](https://github.com/MetaMask/metamask-extension/pull/8564))
+- Restrict the size of the permissions metadata store ([#8596](https://github.com/MetaMask/metamask-extension/pull/8596))
+- Update account options menu design ([#8654](https://github.com/MetaMask/metamask-extension/pull/8654))
+- Implement new fullscreen design ([#8657](https://github.com/MetaMask/metamask-extension/pull/8657))
+- Show hostname in the disconnect confirmation ([#8663](https://github.com/MetaMask/metamask-extension/pull/8663))
+- Make address display wider in Account Details ([#8665](https://github.com/MetaMask/metamask-extension/pull/8665))
+- Fix token `decimal` type ([#8670](https://github.com/MetaMask/metamask-extension/pull/8670))
+- Limit Dapp permissions to primary account ([#8653](https://github.com/MetaMask/metamask-extension/pull/8653))
+- Manually connect via the full connect flow ([#8666](https://github.com/MetaMask/metamask-extension/pull/8666))
+- Add metrics events for Wyre and CoinSwitch ([#8677](https://github.com/MetaMask/metamask-extension/pull/8677))
+- Fix connect hardware styling ([#8680](https://github.com/MetaMask/metamask-extension/pull/8680))
+- Fix create account form styling ([#8689](https://github.com/MetaMask/metamask-extension/pull/8689))
+- Fix tab content disappearing during scrolling on macOS Firefox ([#8702](https://github.com/MetaMask/metamask-extension/pull/8702))
+- Implement asset page ([#8696](https://github.com/MetaMask/metamask-extension/pull/8696))
+- Add nonce to transaction details ([#8716](https://github.com/MetaMask/metamask-extension/pull/8716))
+- Use URL origin instead of hostname for permission domains ([#8717](https://github.com/MetaMask/metamask-extension/pull/8717))
+- Fix account menu entry for imported accounts ([#8747](https://github.com/MetaMask/metamask-extension/pull/8747))
+- Permissions: Do not display HTTP/HTTPS URL schemes for unique hosts ([#8768](https://github.com/MetaMask/metamask-extension/pull/8768))
+- Hide seed phrase during Account Import ([#8730](https://github.com/MetaMask/metamask-extension/pull/8730))
+- Rename 'History' tab to 'Activity' ([#8785](https://github.com/MetaMask/metamask-extension/pull/8785))
+- use UI button for add token functionality ([#8781](https://github.com/MetaMask/metamask-extension/pull/8781))
+- Show fiat amounts inline on token transfers ([#8786](https://github.com/MetaMask/metamask-extension/pull/8786))
+- Warn users to only add custom networks that they trust ([#8789](https://github.com/MetaMask/metamask-extension/pull/8789))
+- Consolidate connected account alerts ([#8802](https://github.com/MetaMask/metamask-extension/pull/8802))
+- Remove all user- and translator-facing instances of 'dapp' ([#8810](https://github.com/MetaMask/metamask-extension/pull/8810))
+- Update method data when cached method data is empty ([#8836](https://github.com/MetaMask/metamask-extension/pull/8836))
+- Improve error handling when signature requested without a keyholder address ([#8833](https://github.com/MetaMask/metamask-extension/pull/8833))
+- Stop upper-casing exported private key ([#8850](https://github.com/MetaMask/metamask-extension/pull/8850))
+- Include imported accounts in mobile sync ([#8631](https://github.com/MetaMask/metamask-extension/pull/8631))
 
 ## [7.7.9] - 2020-05-04
 ### Uncategorized
-- [#8446](https://github.com/MetaMask/metamask-extension/pull/8446): Fix popup not opening
-- [#8449](https://github.com/MetaMask/metamask-extension/pull/8449): Skip adding history entry for empty txMeta diffs
-- [#8447](https://github.com/MetaMask/metamask-extension/pull/8447): Delete Dai/Sai migration notification
-- [#8460](https://github.com/MetaMask/metamask-extension/pull/8460): Update deposit copy for Wyre
-- [#8458](https://github.com/MetaMask/metamask-extension/pull/8458): Snapshot txMeta without cloning history
-- [#8459](https://github.com/MetaMask/metamask-extension/pull/8459): Fix method registry initialization
-- [#8455](https://github.com/MetaMask/metamask-extension/pull/8455): Add Dai/Sai to currency display
-- [#8461](https://github.com/MetaMask/metamask-extension/pull/8461): Prevent network switch upon close of network timeout overlay
-- [#8457](https://github.com/MetaMask/metamask-extension/pull/8457): Add INR currency option
-- [#8462](https://github.com/MetaMask/metamask-extension/pull/8462): Fix display of Kovan and Rinkeby chain IDs
-- [#8465](https://github.com/MetaMask/metamask-extension/pull/8465): Use ethereum-ens-network-map for network support
-- [#8463](https://github.com/MetaMask/metamask-extension/pull/8463): Update deprecated Etherscam link
-- [#8474](https://github.com/MetaMask/metamask-extension/pull/8474): Only update pending transactions upon block update
-- [#8476](https://github.com/MetaMask/metamask-extension/pull/8476): Update eth-contract-metadata
-- [#8509](https://github.com/MetaMask/metamask-extension/pull/8509): Fix Tohen Typo
+- Fix popup not opening ([#8446](https://github.com/MetaMask/metamask-extension/pull/8446))
+- Skip adding history entry for empty txMeta diffs ([#8449](https://github.com/MetaMask/metamask-extension/pull/8449))
+- Delete Dai/Sai migration notification ([#8447](https://github.com/MetaMask/metamask-extension/pull/8447))
+- Update deposit copy for Wyre ([#8460](https://github.com/MetaMask/metamask-extension/pull/8460))
+- Snapshot txMeta without cloning history ([#8458](https://github.com/MetaMask/metamask-extension/pull/8458))
+- Fix method registry initialization ([#8459](https://github.com/MetaMask/metamask-extension/pull/8459))
+- Add Dai/Sai to currency display ([#8455](https://github.com/MetaMask/metamask-extension/pull/8455))
+- Prevent network switch upon close of network timeout overlay ([#8461](https://github.com/MetaMask/metamask-extension/pull/8461))
+- Add INR currency option ([#8457](https://github.com/MetaMask/metamask-extension/pull/8457))
+- Fix display of Kovan and Rinkeby chain IDs ([#8462](https://github.com/MetaMask/metamask-extension/pull/8462))
+- Use ethereum-ens-network-map for network support ([#8465](https://github.com/MetaMask/metamask-extension/pull/8465))
+- Update deprecated Etherscam link ([#8463](https://github.com/MetaMask/metamask-extension/pull/8463))
+- Only update pending transactions upon block update ([#8474](https://github.com/MetaMask/metamask-extension/pull/8474))
+- Update eth-contract-metadata ([#8476](https://github.com/MetaMask/metamask-extension/pull/8476))
+- Fix Tohen Typo ([#8509](https://github.com/MetaMask/metamask-extension/pull/8509))
 
 ## [7.7.8] - 2020-03-13
 ### Uncategorized
-- [#8176](https://github.com/MetaMask/metamask-extension/pull/8176): Handle and set gas estimation when max mode is clicked
-- [#8178](https://github.com/MetaMask/metamask-extension/pull/8178): Use specified gas limit when speeding up a transaction
+- Handle and set gas estimation when max mode is clicked ([#8176](https://github.com/MetaMask/metamask-extension/pull/8176))
+- Use specified gas limit when speeding up a transaction ([#8178](https://github.com/MetaMask/metamask-extension/pull/8178))
 
 ## [7.7.7] - 2020-03-04
 ### Uncategorized
-- [#8162](https://github.com/MetaMask/metamask-extension/pull/8162): Remove invalid Ledger accounts
-- [#8163](https://github.com/MetaMask/metamask-extension/pull/8163): Fix account index check
+- Remove invalid Ledger accounts ([#8162](https://github.com/MetaMask/metamask-extension/pull/8162))
+- Fix account index check ([#8163](https://github.com/MetaMask/metamask-extension/pull/8163))
 
 ## [7.7.6] - 2020-03-03
 ### Uncategorized
-- [#8154](https://github.com/MetaMask/metamask-extension/pull/8154): Prevent signing from incorrect Ledger account
+- Prevent signing from incorrect Ledger account ([#8154](https://github.com/MetaMask/metamask-extension/pull/8154))
 
 ## [7.7.5] - 2020-02-18
 ### Uncategorized
-- [#8053](https://github.com/MetaMask/metamask-extension/pull/8053): Inline the source text not the binary encoding for inpage script
-- [#8049](https://github.com/MetaMask/metamask-extension/pull/8049): Add warning to watchAsset API when editing a known token
-- [#8051](https://github.com/MetaMask/metamask-extension/pull/8051): Update Wyre ETH purchase url
-- [#8059](https://github.com/MetaMask/metamask-extension/pull/8059): Attempt ENS resolution on any valid domain name
+- Inline the source text not the binary encoding for inpage script ([#8053](https://github.com/MetaMask/metamask-extension/pull/8053))
+- Add warning to watchAsset API when editing a known token ([#8049](https://github.com/MetaMask/metamask-extension/pull/8049))
+- Update Wyre ETH purchase url ([#8051](https://github.com/MetaMask/metamask-extension/pull/8051))
+- Attempt ENS resolution on any valid domain name ([#8059](https://github.com/MetaMask/metamask-extension/pull/8059))
 
 ## [7.7.4] - 2020-01-31
 ### Uncategorized
-- [#7918](https://github.com/MetaMask/metamask-extension/pull/7918): Update data on Approve screen after updating custom spend limit
-- [#7919](https://github.com/MetaMask/metamask-extension/pull/7919): Allow editing max spend limit
-- [#7920](https://github.com/MetaMask/metamask-extension/pull/7920): Validate custom spend limit
-- [#7944](https://github.com/MetaMask/metamask-extension/pull/7944): Only resolve ENS on mainnet
-- [#7954](https://github.com/MetaMask/metamask-extension/pull/7954): Update ENS registry addresses
+- Update data on Approve screen after updating custom spend limit ([#7918](https://github.com/MetaMask/metamask-extension/pull/7918))
+- Allow editing max spend limit ([#7919](https://github.com/MetaMask/metamask-extension/pull/7919))
+- Validate custom spend limit ([#7920](https://github.com/MetaMask/metamask-extension/pull/7920))
+- Only resolve ENS on mainnet ([#7944](https://github.com/MetaMask/metamask-extension/pull/7944))
+- Update ENS registry addresses ([#7954](https://github.com/MetaMask/metamask-extension/pull/7954))
 
 ## [7.7.3] - 2020-01-27
 ### Uncategorized
-- [#7894](https://github.com/MetaMask/metamask-extension/pull/7894): Update GABA dependency version
-- [#7901](https://github.com/MetaMask/metamask-extension/pull/7901): Use eth-contract-metadata@1.12.1
-- [#7910](https://github.com/MetaMask/metamask-extension/pull/7910): Fixing broken JSON import help link
+- Update GABA dependency version ([#7894](https://github.com/MetaMask/metamask-extension/pull/7894))
+- Use eth-contract-metadata@1.12.1 ([#7901](https://github.com/MetaMask/metamask-extension/pull/7901))
+- Fixing broken JSON import help link ([#7910](https://github.com/MetaMask/metamask-extension/pull/7910))
 
 ## [7.7.2] - 2020-01-13
 ### Uncategorized
-- [#7753](https://github.com/MetaMask/metamask-extension/pull/7753): Fix gas estimate for tokens
-- [#7473](https://github.com/MetaMask/metamask-extension/pull/7473): Fix transaction order on transaction confirmation screen
+- Fix gas estimate for tokens ([#7753](https://github.com/MetaMask/metamask-extension/pull/7753))
+- Fix transaction order on transaction confirmation screen ([#7473](https://github.com/MetaMask/metamask-extension/pull/7473))
 
 ## [7.7.1] - 2019-12-09
 ### Uncategorized
-- [#7488](https://github.com/MetaMask/metamask-extension/pull/7488): Fix text overlap when expanding transaction
-- [#7491](https://github.com/MetaMask/metamask-extension/pull/7491): Update gas when asset is changed on send screen
-- [#7500](https://github.com/MetaMask/metamask-extension/pull/7500): Remove unused onClick prop from Dropdown component
-- [#7502](https://github.com/MetaMask/metamask-extension/pull/7502): Fix chainId for non standard networks
-- [#7519](https://github.com/MetaMask/metamask-extension/pull/7519): Fixing hardware connect error display
-- [#7501](https://github.com/MetaMask/metamask-extension/pull/7501): Fix accessibility of first-time-flow terms checkboxes
-- [#7579](https://github.com/MetaMask/metamask-extension/pull/7579): Prevent Maker migration dismissal timeout state from being overwritten
-- [#7581](https://github.com/MetaMask/metamask-extension/pull/7581): Persist Maker migration dismissal timeout
-- [#7484](https://github.com/MetaMask/metamask-extension/pull/7484): Ensure transactions are shown in the order they are received
-- [#7604](https://github.com/MetaMask/metamask-extension/pull/7604): Process URL fragment for ens-ipfs redirects
-- [#7628](https://github.com/MetaMask/metamask-extension/pull/7628): Fix typo that resulted in degrated account menu performance
-- [#7558](https://github.com/MetaMask/metamask-extension/pull/7558): Use localized messages for NotificationModal buttons
+- Fix text overlap when expanding transaction ([#7488](https://github.com/MetaMask/metamask-extension/pull/7488))
+- Update gas when asset is changed on send screen ([#7491](https://github.com/MetaMask/metamask-extension/pull/7491))
+- Remove unused onClick prop from Dropdown component ([#7500](https://github.com/MetaMask/metamask-extension/pull/7500))
+- Fix chainId for non standard networks ([#7502](https://github.com/MetaMask/metamask-extension/pull/7502))
+- Fixing hardware connect error display ([#7519](https://github.com/MetaMask/metamask-extension/pull/7519))
+- Fix accessibility of first-time-flow terms checkboxes ([#7501](https://github.com/MetaMask/metamask-extension/pull/7501))
+- Prevent Maker migration dismissal timeout state from being overwritten ([#7579](https://github.com/MetaMask/metamask-extension/pull/7579))
+- Persist Maker migration dismissal timeout ([#7581](https://github.com/MetaMask/metamask-extension/pull/7581))
+- Ensure transactions are shown in the order they are received ([#7484](https://github.com/MetaMask/metamask-extension/pull/7484))
+- Process URL fragment for ens-ipfs redirects ([#7604](https://github.com/MetaMask/metamask-extension/pull/7604))
+- Fix typo that resulted in degrated account menu performance ([#7628](https://github.com/MetaMask/metamask-extension/pull/7628))
+- Use localized messages for NotificationModal buttons ([#7558](https://github.com/MetaMask/metamask-extension/pull/7558))
 
 ## [7.7.0] - 2019-12-03 [WITHDRAWN]
 ### Uncategorized
-- [#7004](https://github.com/MetaMask/metamask-extension/pull/7004): Connect distinct accounts per site
-- [#7480](https://github.com/MetaMask/metamask-extension/pull/7480): Fixed link on root README.md
-- [#7482](https://github.com/MetaMask/metamask-extension/pull/7482): Update Wyre ETH purchase url
-- [#7484](https://github.com/MetaMask/metamask-extension/pull/7484): Ensure transactions are shown in the order they are received
-- [#7491](https://github.com/MetaMask/metamask-extension/pull/7491): Update gas when token is changed on the send screen
-- [#7501](https://github.com/MetaMask/metamask-extension/pull/7501): Fix accessibility of first-time-flow terms checkboxes
-- [#7502](https://github.com/MetaMask/metamask-extension/pull/7502): Fix chainId for non standard networks
-- [#7579](https://github.com/MetaMask/metamask-extension/pull/7579): Fix timing of DAI migration notifications after dismissal
-- [#7519](https://github.com/MetaMask/metamask-extension/pull/7519): Fixing hardware connect error display
-- [#7558](https://github.com/MetaMask/metamask-extension/pull/7558): Use localized messages for NotificationModal buttons
-- [#7488](https://github.com/MetaMask/metamask-extension/pull/7488): Fix text overlap when expanding transaction
+- Connect distinct accounts per site ([#7004](https://github.com/MetaMask/metamask-extension/pull/7004))
+- Fixed link on root README.md ([#7480](https://github.com/MetaMask/metamask-extension/pull/7480))
+- Update Wyre ETH purchase url ([#7482](https://github.com/MetaMask/metamask-extension/pull/7482))
+- Ensure transactions are shown in the order they are received ([#7484](https://github.com/MetaMask/metamask-extension/pull/7484))
+- Update gas when token is changed on the send screen ([#7491](https://github.com/MetaMask/metamask-extension/pull/7491))
+- Fix accessibility of first-time-flow terms checkboxes ([#7501](https://github.com/MetaMask/metamask-extension/pull/7501))
+- Fix chainId for non standard networks ([#7502](https://github.com/MetaMask/metamask-extension/pull/7502))
+- Fix timing of DAI migration notifications after dismissal ([#7579](https://github.com/MetaMask/metamask-extension/pull/7579))
+- Fixing hardware connect error display ([#7519](https://github.com/MetaMask/metamask-extension/pull/7519))
+- Use localized messages for NotificationModal buttons ([#7558](https://github.com/MetaMask/metamask-extension/pull/7558))
+- Fix text overlap when expanding transaction ([#7488](https://github.com/MetaMask/metamask-extension/pull/7488))
 
 ## [7.6.1] - 2019-11-19
 ### Uncategorized
-- [#7475](https://github.com/MetaMask/metamask-extension/pull/7475): Add 'Remind Me Later' to the Maker notification
-- [#7436](https://github.com/MetaMask/metamask-extension/pull/7436): Add additional rpcUrl verification
-- [#7468](https://github.com/MetaMask/metamask-extension/pull/7468): Show transaction fee units on approve screen
+- Add 'Remind Me Later' to the Maker notification ([#7475](https://github.com/MetaMask/metamask-extension/pull/7475))
+- Add additional rpcUrl verification ([#7436](https://github.com/MetaMask/metamask-extension/pull/7436))
+- Show transaction fee units on approve screen ([#7468](https://github.com/MetaMask/metamask-extension/pull/7468))
 
 ## [7.6.0] - 2019-11-18
 ### Uncategorized
-- [#7450](https://github.com/MetaMask/metamask-extension/pull/7450): Add migration notification for users with non-zero Sai
-- [#7461](https://github.com/MetaMask/metamask-extension/pull/7461): Import styles for showing multiple notifications
-- [#7451](https://github.com/MetaMask/metamask-extension/pull/7451): Add button disabled when password is empty
+- Add migration notification for users with non-zero Sai ([#7450](https://github.com/MetaMask/metamask-extension/pull/7450))
+- Import styles for showing multiple notifications ([#7461](https://github.com/MetaMask/metamask-extension/pull/7461))
+- Add button disabled when password is empty ([#7451](https://github.com/MetaMask/metamask-extension/pull/7451))
 
 ## [7.5.3] - 2019-11-15
 ### Uncategorized
-- [#7412](https://github.com/MetaMask/metamask-extension/pull/7412): lock eth-contract-metadata (#7412)
-- [#7416](https://github.com/MetaMask/metamask-extension/pull/7416): Add eslint import plugin to help detect unresolved paths
-- [#7414](https://github.com/MetaMask/metamask-extension/pull/7414): Ensure SignatureRequestOriginal 'beforeunload' handler is bound (#7414)
-- [#7430](https://github.com/MetaMask/metamask-extension/pull/7430): Update badge colour
-- [#7408](https://github.com/MetaMask/metamask-extension/pull/7408): Utilize the full size of icon space (#7408)
-- [#7431](https://github.com/MetaMask/metamask-extension/pull/7431): Add all icons to manifest (#7431)
-- [#7426](https://github.com/MetaMask/metamask-extension/pull/7426): Ensure Etherscan result is valid before reading it (#7426)
-- [#7434](https://github.com/MetaMask/metamask-extension/pull/7434): Update 512px icon (#7434)
-- [#7410](https://github.com/MetaMask/metamask-extension/pull/7410): Fix sourcemaps for Sentry
-- [#7420](https://github.com/MetaMask/metamask-extension/pull/7420): Adds and end to end test for typed signature requests
-- [#7439](https://github.com/MetaMask/metamask-extension/pull/7439): Add metricsEvent to contextTypes (#7439)
-- [#7419](https://github.com/MetaMask/metamask-extension/pull/7419): Added webRequest.RequestFilter to filter main_frame .eth requests (#7419)
+- lock eth-contract-metadata ([#7412](https://github.com/MetaMask/metamask-extension/pull/7412))
+- Add eslint import plugin to help detect unresolved paths ([#7416](https://github.com/MetaMask/metamask-extension/pull/7416))
+- Ensure SignatureRequestOriginal 'beforeunload' handler is bound ([#7414](https://github.com/MetaMask/metamask-extension/pull/7414))
+- Update badge colour ([#7430](https://github.com/MetaMask/metamask-extension/pull/7430))
+- Utilize the full size of icon space ([#7408](https://github.com/MetaMask/metamask-extension/pull/7408))
+- Add all icons to manifest ([#7431](https://github.com/MetaMask/metamask-extension/pull/7431))
+- Ensure Etherscan result is valid before reading it ([#7426](https://github.com/MetaMask/metamask-extension/pull/7426))
+- Update 512px icon ([#7434](https://github.com/MetaMask/metamask-extension/pull/7434))
+- Fix sourcemaps for Sentry ([#7410](https://github.com/MetaMask/metamask-extension/pull/7410))
+- Adds and end to end test for typed signature requests ([#7420](https://github.com/MetaMask/metamask-extension/pull/7420))
+- Add metricsEvent to contextTypes ([#7439](https://github.com/MetaMask/metamask-extension/pull/7439))
+- Added webRequest.RequestFilter to filter main_frame .eth requests ([#7419](https://github.com/MetaMask/metamask-extension/pull/7419))
 
 ## [7.5.2] - 2019-11-14
 ### Uncategorized
-- [#7414](https://github.com/MetaMask/metamask-extension/pull/7414): Ensure SignatureRequestOriginal 'beforeunload' handler is bound
+- Ensure SignatureRequestOriginal 'beforeunload' handler is bound ([#7414](https://github.com/MetaMask/metamask-extension/pull/7414))
 
 ## [7.5.1] - 2019-11-13
 ### Uncategorized
-- [#7402](https://github.com/MetaMask/metamask-extension/pull/7402): Fix regression for signed types data screens
-- [#7390](https://github.com/MetaMask/metamask-extension/pull/7390): Update json-rpc-engine
-- [#7401](https://github.com/MetaMask/metamask-extension/pull/7401): Reject connection request on window close
+- Fix regression for signed types data screens ([#7402](https://github.com/MetaMask/metamask-extension/pull/7402))
+- Update json-rpc-engine ([#7390](https://github.com/MetaMask/metamask-extension/pull/7390))
+- Reject connection request on window close ([#7401](https://github.com/MetaMask/metamask-extension/pull/7401))
 
 ## [7.5.0] - 2019-11-12
 ### Uncategorized
-- [#7328](https://github.com/MetaMask/metamask-extension/pull/7328): ignore known transactions on first broadcast and continue with normal flow
-- [#7327](https://github.com/MetaMask/metamask-extension/pull/7327): eth_getTransactionByHash will now check metamask's local history for pending transactions
-- [#7333](https://github.com/MetaMask/metamask-extension/pull/7333): Cleanup beforeunload handler after transaction is resolved
-- [#7038](https://github.com/MetaMask/metamask-extension/pull/7038): Add support for ZeroNet
-- [#7334](https://github.com/MetaMask/metamask-extension/pull/7334): Add web3 deprecation warning
-- [#6924](https://github.com/MetaMask/metamask-extension/pull/6924): Add Estimated time to pending tx
-- [#7177](https://github.com/MetaMask/metamask-extension/pull/7177): ENS Reverse Resolution support
-- [#6891](https://github.com/MetaMask/metamask-extension/pull/6891): New signature request v3 UI
-- [#7348](https://github.com/MetaMask/metamask-extension/pull/7348): fix width in first time flow button
-- [#7271](https://github.com/MetaMask/metamask-extension/pull/7271): Redesign approve screen
-- [#7354](https://github.com/MetaMask/metamask-extension/pull/7354): fix account menu width
-- [#7379](https://github.com/MetaMask/metamask-extension/pull/7379): Set default advanced tab gas limit
-- [#7380](https://github.com/MetaMask/metamask-extension/pull/7380): Fix advanced tab gas chart
-- [#7374](https://github.com/MetaMask/metamask-extension/pull/7374): Hide accounts dropdown scrollbars on Firefox
-- [#7357](https://github.com/MetaMask/metamask-extension/pull/7357): Update to gaba@1.8.0
-- [#7335](https://github.com/MetaMask/metamask-extension/pull/7335): Add onbeforeunload and have it call onCancel
+- ignore known transactions on first broadcast and continue with normal flow ([#7328](https://github.com/MetaMask/metamask-extension/pull/7328))
+- eth_getTransactionByHash will now check metamask's local history for pending transactions ([#7327](https://github.com/MetaMask/metamask-extension/pull/7327))
+- Cleanup beforeunload handler after transaction is resolved ([#7333](https://github.com/MetaMask/metamask-extension/pull/7333))
+- Add support for ZeroNet ([#7038](https://github.com/MetaMask/metamask-extension/pull/7038))
+- Add web3 deprecation warning ([#7334](https://github.com/MetaMask/metamask-extension/pull/7334))
+- Add Estimated time to pending tx ([#6924](https://github.com/MetaMask/metamask-extension/pull/6924))
+- ENS Reverse Resolution support ([#7177](https://github.com/MetaMask/metamask-extension/pull/7177))
+- New signature request v3 UI ([#6891](https://github.com/MetaMask/metamask-extension/pull/6891))
+- fix width in first time flow button ([#7348](https://github.com/MetaMask/metamask-extension/pull/7348))
+- Redesign approve screen ([#7271](https://github.com/MetaMask/metamask-extension/pull/7271))
+- fix account menu width ([#7354](https://github.com/MetaMask/metamask-extension/pull/7354))
+- Set default advanced tab gas limit ([#7379](https://github.com/MetaMask/metamask-extension/pull/7379))
+- Fix advanced tab gas chart ([#7380](https://github.com/MetaMask/metamask-extension/pull/7380))
+- Hide accounts dropdown scrollbars on Firefox ([#7374](https://github.com/MetaMask/metamask-extension/pull/7374))
+- Update to gaba@1.8.0 ([#7357](https://github.com/MetaMask/metamask-extension/pull/7357))
+- Add onbeforeunload and have it call onCancel ([#7335](https://github.com/MetaMask/metamask-extension/pull/7335))
 
 ## [7.4.0] - 2019-11-04
 ### Uncategorized
-- [#7186](https://github.com/MetaMask/metamask-extension/pull/7186): Use `AdvancedGasInputs` in `AdvancedTabContent`
-- [#7304](https://github.com/MetaMask/metamask-extension/pull/7304): Move signTypedData signing out to keyrings
-- [#7306](https://github.com/MetaMask/metamask-extension/pull/7306): correct the zh-TW translation
-- [#7309](https://github.com/MetaMask/metamask-extension/pull/7309): Freeze Promise global on boot
-- [#7296](https://github.com/MetaMask/metamask-extension/pull/7296): Add "Retry" option for failed transactions
-- [#7319](https://github.com/MetaMask/metamask-extension/pull/7319): Fix transaction list item status spacing issue
-- [#7218](https://github.com/MetaMask/metamask-extension/pull/7218): Add hostname and extensionId to site metadata
-- [#7324](https://github.com/MetaMask/metamask-extension/pull/7324): Fix contact deletion
-- [#7326](https://github.com/MetaMask/metamask-extension/pull/7326): Fix edit contact details
-- [#7325](https://github.com/MetaMask/metamask-extension/pull/7325): Update eth-json-rpc-filters to fix memory leak
-- [#7334](https://github.com/MetaMask/metamask-extension/pull/7334): Add web3 deprecation warning
+- Use `AdvancedGasInputs` in `AdvancedTabContent` ([#7186](https://github.com/MetaMask/metamask-extension/pull/7186))
+- Move signTypedData signing out to keyrings ([#7304](https://github.com/MetaMask/metamask-extension/pull/7304))
+- correct the zh-TW translation ([#7306](https://github.com/MetaMask/metamask-extension/pull/7306))
+- Freeze Promise global on boot ([#7309](https://github.com/MetaMask/metamask-extension/pull/7309))
+- Add "Retry" option for failed transactions ([#7296](https://github.com/MetaMask/metamask-extension/pull/7296))
+- Fix transaction list item status spacing issue ([#7319](https://github.com/MetaMask/metamask-extension/pull/7319))
+- Add hostname and extensionId to site metadata ([#7218](https://github.com/MetaMask/metamask-extension/pull/7218))
+- Fix contact deletion ([#7324](https://github.com/MetaMask/metamask-extension/pull/7324))
+- Fix edit contact details ([#7326](https://github.com/MetaMask/metamask-extension/pull/7326))
+- Update eth-json-rpc-filters to fix memory leak ([#7325](https://github.com/MetaMask/metamask-extension/pull/7325))
+- Add web3 deprecation warning ([#7334](https://github.com/MetaMask/metamask-extension/pull/7334))
 
 ## [7.3.1] - 2019-10-22
 ### Uncategorized
-- [#7298](https://github.com/MetaMask/metamask-extension/pull/7298): Turn off full screen vs popup a/b test
+- Turn off full screen vs popup a/b test ([#7298](https://github.com/MetaMask/metamask-extension/pull/7298))
 
 ## [7.3.0] - 2019-10-21
 ### Uncategorized
-- [#6972](https://github.com/MetaMask/metamask-extension/pull/6972): 3box integration
-- [#7168](https://github.com/MetaMask/metamask-extension/pull/7168): Add fixes for German translations
-- [#7170](https://github.com/MetaMask/metamask-extension/pull/7170): Remove the disk store
-- [#7176](https://github.com/MetaMask/metamask-extension/pull/7176): Performance: Delivery optimized images
-- [#7189](https://github.com/MetaMask/metamask-extension/pull/7189): add goerli to incoming tx
-- [#7190](https://github.com/MetaMask/metamask-extension/pull/7190): Remove unused locale messages
-- [#7173](https://github.com/MetaMask/metamask-extension/pull/7173): Fix RPC error messages
-- [#7205](https://github.com/MetaMask/metamask-extension/pull/7205): address book entries by chainId
-- [#7207](https://github.com/MetaMask/metamask-extension/pull/7207): obs-store/local-store should upgrade webextension error to real error
-- [#7162](https://github.com/MetaMask/metamask-extension/pull/7162): Add a/b test for full screen transaction confirmations
-- [#7089](https://github.com/MetaMask/metamask-extension/pull/7089): Add advanced setting to enable editing nonce on confirmation screens
-- [#7239](https://github.com/MetaMask/metamask-extension/pull/7239): Update ETH logo, update deposit Ether logo height and width
-- [#7255](https://github.com/MetaMask/metamask-extension/pull/7255): Use translated string for state log
-- [#7266](https://github.com/MetaMask/metamask-extension/pull/7266): fix issue of xyz ens not resolving
-- [#7253](https://github.com/MetaMask/metamask-extension/pull/7253): Prevent Logout Timer that's longer than a week.
-- [#7285](https://github.com/MetaMask/metamask-extension/pull/7285): Lessen the length of ENS validation to 3
-- [#7287](https://github.com/MetaMask/metamask-extension/pull/7287): Fix phishing detect script
+- 3box integration ([#6972](https://github.com/MetaMask/metamask-extension/pull/6972))
+- Add fixes for German translations ([#7168](https://github.com/MetaMask/metamask-extension/pull/7168))
+- Remove the disk store ([#7170](https://github.com/MetaMask/metamask-extension/pull/7170))
+- Performance: Delivery optimized images ([#7176](https://github.com/MetaMask/metamask-extension/pull/7176))
+- add goerli to incoming tx ([#7189](https://github.com/MetaMask/metamask-extension/pull/7189))
+- Remove unused locale messages ([#7190](https://github.com/MetaMask/metamask-extension/pull/7190))
+- Fix RPC error messages ([#7173](https://github.com/MetaMask/metamask-extension/pull/7173))
+- address book entries by chainId ([#7205](https://github.com/MetaMask/metamask-extension/pull/7205))
+- obs-store/local-store should upgrade webextension error to real error ([#7207](https://github.com/MetaMask/metamask-extension/pull/7207))
+- Add a/b test for full screen transaction confirmations ([#7162](https://github.com/MetaMask/metamask-extension/pull/7162))
+- Add advanced setting to enable editing nonce on confirmation screens ([#7089](https://github.com/MetaMask/metamask-extension/pull/7089))
+- Update ETH logo, update deposit Ether logo height and width ([#7239](https://github.com/MetaMask/metamask-extension/pull/7239))
+- Use translated string for state log ([#7255](https://github.com/MetaMask/metamask-extension/pull/7255))
+- fix issue of xyz ens not resolving ([#7266](https://github.com/MetaMask/metamask-extension/pull/7266))
+- Prevent Logout Timer that's longer than a week. ([#7253](https://github.com/MetaMask/metamask-extension/pull/7253))
+- Lessen the length of ENS validation to 3 ([#7285](https://github.com/MetaMask/metamask-extension/pull/7285))
+- Fix phishing detect script ([#7287](https://github.com/MetaMask/metamask-extension/pull/7287))
 
 ## [7.2.3] - 2019-10-08
 ### Uncategorized
-- [#7252](https://github.com/MetaMask/metamask-extension/pull/7252): Fix gas limit when sending tx without data to a contract
-- [#7260](https://github.com/MetaMask/metamask-extension/pull/7260): Do not transate on seed phrases
-- [#7252](https://github.com/MetaMask/metamask-extension/pull/7252): Ensure correct tx category when sending to contracts without tx data
+- Fix gas limit when sending tx without data to a contract ([#7252](https://github.com/MetaMask/metamask-extension/pull/7252))
+- Do not transate on seed phrases ([#7260](https://github.com/MetaMask/metamask-extension/pull/7260))
+- Ensure correct tx category when sending to contracts without tx data ([#7252](https://github.com/MetaMask/metamask-extension/pull/7252))
 
 ## [7.2.2] - 2019-09-25
 ### Uncategorized
-- [#7213](https://github.com/MetaMask/metamask-extension/pull/7213): Update minimum Firefox verison to 56.0
+- Update minimum Firefox verison to 56.0 ([#7213](https://github.com/MetaMask/metamask-extension/pull/7213))
 
 ## [7.2.1] - 2019-09-17
 ### Uncategorized
-- [#7180](https://github.com/MetaMask/metamask-extension/pull/7180): Add `appName` message to each locale
+- Add `appName` message to each locale ([#7180](https://github.com/MetaMask/metamask-extension/pull/7180))
 
 ## [7.2.0] - 2019-09-17
 ### Uncategorized
-- [#7099](https://github.com/MetaMask/metamask-extension/pull/7099): Update localization from Transifex Brave
-- [#7137](https://github.com/MetaMask/metamask-extension/pull/7137): Fix validation of empty block explorer url's in custom network form
-- [#7128](https://github.com/MetaMask/metamask-extension/pull/7128): Support for eth_signTypedData_v4
-- [#7110](https://github.com/MetaMask/metamask-extension/pull/7110): Adds `chaindIdChanged` event to the ethereum provider
-- [#7091](https://github.com/MetaMask/metamask-extension/pull/7091): Improve browser performance issues caused by missing locale errors
-- [#7085](https://github.com/MetaMask/metamask-extension/pull/7085): Prevent ineffectual speed ups of pending transactions that don't have the lowest nonce
-- [#7156](https://github.com/MetaMask/metamask-extension/pull/7156): Set minimum Firefox version to v56.2 to support Waterfox
-- [#7157](https://github.com/MetaMask/metamask-extension/pull/7157): Add polyfill for AbortController
-- [#7161](https://github.com/MetaMask/metamask-extension/pull/7161): Replace `undefined` selectedAddress with `null`
-- [#7171](https://github.com/MetaMask/metamask-extension/pull/7171): Fix recipient field of approve screen
+- Update localization from Transifex Brave ([#7099](https://github.com/MetaMask/metamask-extension/pull/7099))
+- Fix validation of empty block explorer url's in custom network form ([#7137](https://github.com/MetaMask/metamask-extension/pull/7137))
+- Support for eth_signTypedData_v4 ([#7128](https://github.com/MetaMask/metamask-extension/pull/7128))
+- Adds `chaindIdChanged` event to the ethereum provider ([#7110](https://github.com/MetaMask/metamask-extension/pull/7110))
+- Improve browser performance issues caused by missing locale errors ([#7091](https://github.com/MetaMask/metamask-extension/pull/7091))
+- Prevent ineffectual speed ups of pending transactions that don't have the lowest nonce ([#7085](https://github.com/MetaMask/metamask-extension/pull/7085))
+- Set minimum Firefox version to v56.2 to support Waterfox ([#7156](https://github.com/MetaMask/metamask-extension/pull/7156))
+- Add polyfill for AbortController ([#7157](https://github.com/MetaMask/metamask-extension/pull/7157))
+- Replace `undefined` selectedAddress with `null` ([#7161](https://github.com/MetaMask/metamask-extension/pull/7161))
+- Fix recipient field of approve screen ([#7171](https://github.com/MetaMask/metamask-extension/pull/7171))
 
 ## [7.1.1] - 2019-09-03
 ### Uncategorized
-- [#7059](https://github.com/MetaMask/metamask-extension/pull/7059): Remove blockscale, replace with ethgasstation
-- [#7037](https://github.com/MetaMask/metamask-extension/pull/7037): Remove Babel 6 from internal dependencies
-- [#7093](https://github.com/MetaMask/metamask-extension/pull/7093): Allow dismissing privacy mode notification from popup
-- [#7087](https://github.com/MetaMask/metamask-extension/pull/7087): Add breadcrumb spacing on Contacts page
-- [#7081](https://github.com/MetaMask/metamask-extension/pull/7081): Fix confirm token transaction amount display
-- [#7088](https://github.com/MetaMask/metamask-extension/pull/7088): Fix BigNumber conversion error
-- [#7072](https://github.com/MetaMask/metamask-extension/pull/7072): Right-to-left CSS (using module for conversion)
-- [#6878](https://github.com/MetaMask/metamask-extension/pull/6878): Persian translation
-- [#7012](https://github.com/MetaMask/metamask-extension/pull/7012): Added missed phrases to RU locale
+- Remove blockscale, replace with ethgasstation ([#7059](https://github.com/MetaMask/metamask-extension/pull/7059))
+- Remove Babel 6 from internal dependencies ([#7037](https://github.com/MetaMask/metamask-extension/pull/7037))
+- Allow dismissing privacy mode notification from popup ([#7093](https://github.com/MetaMask/metamask-extension/pull/7093))
+- Add breadcrumb spacing on Contacts page ([#7087](https://github.com/MetaMask/metamask-extension/pull/7087))
+- Fix confirm token transaction amount display ([#7081](https://github.com/MetaMask/metamask-extension/pull/7081))
+- Fix BigNumber conversion error ([#7088](https://github.com/MetaMask/metamask-extension/pull/7088))
+- Right-to-left CSS ([#7072](https://github.com/MetaMask/metamask-extension/pull/7072))
+- Persian translation ([#6878](https://github.com/MetaMask/metamask-extension/pull/6878))
+- Added missed phrases to RU locale ([#7012](https://github.com/MetaMask/metamask-extension/pull/7012))
 
 ## [7.1.0] - 2019-08-26
 ### Uncategorized
-- [#7035](https://github.com/MetaMask/metamask-extension/pull/7035): Filter non-ERC-20 assets during mobile sync (#7035)
-- [#7021](https://github.com/MetaMask/metamask-extension/pull/7021): Using translated string for end of flow messaging (#7021)
-- [#7018](https://github.com/MetaMask/metamask-extension/pull/7018): Rename Contacts List settings tab to Contacts (#7018)
-- [#7013](https://github.com/MetaMask/metamask-extension/pull/7013): Connections settings tab (#7013)
-- [#6996](https://github.com/MetaMask/metamask-extension/pull/6996): Fetch & display received transactions (#6996)
-- [#6991](https://github.com/MetaMask/metamask-extension/pull/6991): Remove reload from Share Address button (#6991)
-- [#6978](https://github.com/MetaMask/metamask-extension/pull/6978): Address book fixes (#6978)
-- [#6944](https://github.com/MetaMask/metamask-extension/pull/6944): Show recipient alias in confirm header if exists (#6944)
-- [#6930](https://github.com/MetaMask/metamask-extension/pull/6930): Add support for eth_signTypedData_v4 (#6930)
-- [#7046](https://github.com/MetaMask/metamask-extension/pull/7046): Update Italian translation (#7046)
-- [#7047](https://github.com/MetaMask/metamask-extension/pull/7047): Add warning about reload on network change
+- Filter non-ERC-20 assets during mobile sync ([#7035](https://github.com/MetaMask/metamask-extension/pull/7035))
+- Using translated string for end of flow messaging ([#7021](https://github.com/MetaMask/metamask-extension/pull/7021))
+- Rename Contacts List settings tab to Contacts ([#7018](https://github.com/MetaMask/metamask-extension/pull/7018))
+- Connections settings tab ([#7013](https://github.com/MetaMask/metamask-extension/pull/7013))
+- Fetch & display received transactions ([#6996](https://github.com/MetaMask/metamask-extension/pull/6996))
+- Remove reload from Share Address button ([#6991](https://github.com/MetaMask/metamask-extension/pull/6991))
+- Address book fixes ([#6978](https://github.com/MetaMask/metamask-extension/pull/6978))
+- Show recipient alias in confirm header if exists ([#6944](https://github.com/MetaMask/metamask-extension/pull/6944))
+- Add support for eth_signTypedData_v4 ([#6930](https://github.com/MetaMask/metamask-extension/pull/6930))
+- Update Italian translation ([#7046](https://github.com/MetaMask/metamask-extension/pull/7046))
+- Add warning about reload on network change ([#7047](https://github.com/MetaMask/metamask-extension/pull/7047))
 
 ## [7.0.1] - 2019-08-08
 ### Uncategorized
-- [#6975](https://github.com/MetaMask/metamask-extension/pull/6975): Ensure seed phrase backup notification only shows up for new users
+- Ensure seed phrase backup notification only shows up for new users ([#6975](https://github.com/MetaMask/metamask-extension/pull/6975))
 
 ## [7.0.0] - 2019-08-07
 ### Uncategorized
-- [#6828](https://github.com/MetaMask/metamask-extension/pull/6828): Capitalized speed up label to match rest of UI
-- [#6874](https://github.com/MetaMask/metamask-extension/pull/6928): Allows skipping of seed phrase challenge during onboarding, and completing it at a later time
-- [#6900](https://github.com/MetaMask/metamask-extension/pull/6900): Prevent opening of asset dropdown if no tokens in account
-- [#6904](https://github.com/MetaMask/metamask-extension/pull/6904): Set privacy mode as default
-- [#6914](https://github.com/MetaMask/metamask-extension/pull/6914): Adds Address Book feature
-- [#6928](https://github.com/MetaMask/metamask-extension/pull/6928): Disable Copy Tx ID and block explorer link for transactions without hash
-- [#6967](https://github.com/MetaMask/metamask-extension/pull/6967): Fix mobile sync
+- Capitalized speed up label to match rest of UI ([#6828](https://github.com/MetaMask/metamask-extension/pull/6828))
+- Allows skipping of seed phrase challenge during onboarding, and completing it at a later time ([#6874](https://github.com/MetaMask/metamask-extension/pull/6928))
+- Prevent opening of asset dropdown if no tokens in account ([#6900](https://github.com/MetaMask/metamask-extension/pull/6900))
+- Set privacy mode as default ([#6904](https://github.com/MetaMask/metamask-extension/pull/6904))
+- Adds Address Book feature ([#6914](https://github.com/MetaMask/metamask-extension/pull/6914))
+- Disable Copy Tx ID and block explorer link for transactions without hash ([#6928](https://github.com/MetaMask/metamask-extension/pull/6928))
+- Fix mobile sync ([#6967](https://github.com/MetaMask/metamask-extension/pull/6967))
 
 ## [6.7.3] - 2019-07-19
 ### Uncategorized
-- [#6888](https://github.com/MetaMask/metamask-extension/pull/6888): Fix bug with resubmitting unsigned transactions.
+- Fix bug with resubmitting unsigned transactions. ([#6888](https://github.com/MetaMask/metamask-extension/pull/6888))
 
 ## [6.7.2] - 2019-07-03
 ### Uncategorized
-- [#6713](https://github.com/MetaMask/metamask-extension/pull/6713): \* Normalize and Validate txParams in TransactionStateManager.addTx too
-- [#6759](https://github.com/MetaMask/metamask-extension/pull/6759): Update to Node.js v10
-- [#6694](https://github.com/MetaMask/metamask-extension/pull/6694): Fixes #6694
-- [#6743](https://github.com/MetaMask/metamask-extension/pull/6743): \* Add tests for ImportWithSeedPhrase#parseSeedPhrase
-- [#6740](https://github.com/MetaMask/metamask-extension/pull/6740): Fixes #6740
-- [#6741](https://github.com/MetaMask/metamask-extension/pull/6741): Fixes #6741
-- [#6761](https://github.com/MetaMask/metamask-extension/pull/6761): Fixes #6760, correct PropTypes for nextRoute
-- [#6754](https://github.com/MetaMask/metamask-extension/pull/6754): Use inline source maps in development
-- [#6589](https://github.com/MetaMask/metamask-extension/pull/6589): Document hotfix protocol
-- [#6738](https://github.com/MetaMask/metamask-extension/pull/6738): Add codeowner for package-lock-old.json package-lock.json package.json packagelock-old.json files
-- [#6648](https://github.com/MetaMask/metamask-extension/pull/6648): Add loading view to notification.html
-- [#6731](https://github.com/MetaMask/metamask-extension/pull/6731): Add brave as a platform type for MetaMask
+- Normalize and Validate txParams in TransactionStateManager.addTx too ([#6713](https://github.com/MetaMask/metamask-extension/pull/6713))
+- Update to Node.js v10 ([#6759](https://github.com/MetaMask/metamask-extension/pull/6759))
+- Fixes #6694 ([#6694](https://github.com/MetaMask/metamask-extension/pull/6694))
+- Add tests for ImportWithSeedPhrase#parseSeedPhrase ([#6743](https://github.com/MetaMask/metamask-extension/pull/6743))
+- Fixes #6740 ([#6740](https://github.com/MetaMask/metamask-extension/pull/6740))
+- Fixes #6741 ([#6741](https://github.com/MetaMask/metamask-extension/pull/6741))
+- Fixes #6760, correct PropTypes for nextRoute ([#6761](https://github.com/MetaMask/metamask-extension/pull/6761))
+- Use inline source maps in development ([#6754](https://github.com/MetaMask/metamask-extension/pull/6754))
+- Document hotfix protocol ([#6589](https://github.com/MetaMask/metamask-extension/pull/6589))
+- Add codeowner for package-lock-old.json package-lock.json package.json packagelock-old.json files ([#6738](https://github.com/MetaMask/metamask-extension/pull/6738))
+- Add loading view to notification.html ([#6648](https://github.com/MetaMask/metamask-extension/pull/6648))
+- Add brave as a platform type for MetaMask ([#6731](https://github.com/MetaMask/metamask-extension/pull/6731))
 
 ## [6.7.1] - 2019-07-28
 ### Uncategorized
-- [#6764](https://github.com/MetaMask/metamask-extension/pull/6764): Fix display of token amount on confirm transaction screen
+- Fix display of token amount on confirm transaction screen ([#6764](https://github.com/MetaMask/metamask-extension/pull/6764))
 
 ## [6.7.0] - 2019-07-26
 ### Uncategorized
-- [#6623](https://github.com/MetaMask/metamask-extension/pull/6623): Improve contract method data fetching (#6623)
-- [#6551](https://github.com/MetaMask/metamask-extension/pull/6551): Adds 4byte registry fallback to getMethodData() (#6435)
-- [#6718](https://github.com/MetaMask/metamask-extension/pull/6718): Add delete to custom RPC form
-- [#6700](https://github.com/MetaMask/metamask-extension/pull/6700): Fix styles on 'import account' page, update help link
-- [#6714](https://github.com/MetaMask/metamask-extension/pull/6714): Wrap smaller custom block explorer url text
-- [#6706](https://github.com/MetaMask/metamask-extension/pull/6706): Pin ethereumjs-tx
-- [#6700](https://github.com/MetaMask/metamask-extension/pull/6700): Fix styles on 'import account' page, update help link
-- [#6775](https://github.com/MetaMask/metamask-extension/pull/6775): Started adding visual documentation of MetaMask plugin components with the account menu component first
+- Improve contract method data fetching ([#6623](https://github.com/MetaMask/metamask-extension/pull/6623))
+- Adds 4byte registry fallback to getMethodData() ([#6551](https://github.com/MetaMask/metamask-extension/pull/6551))
+- Add delete to custom RPC form ([#6718](https://github.com/MetaMask/metamask-extension/pull/6718))
+- Fix styles on 'import account' page, update help link ([#6700](https://github.com/MetaMask/metamask-extension/pull/6700))
+- Wrap smaller custom block explorer url text ([#6714](https://github.com/MetaMask/metamask-extension/pull/6714))
+- Pin ethereumjs-tx ([#6706](https://github.com/MetaMask/metamask-extension/pull/6706))
+- Fix styles on 'import account' page, update help link ([#6700](https://github.com/MetaMask/metamask-extension/pull/6700))
+- Started adding visual documentation of MetaMask plugin components with the account menu component first ([#6775](https://github.com/MetaMask/metamask-extension/pull/6775))
 
 ## [6.6.2] - 2019-07-17
 ### Uncategorized
-- [#6690](https://github.com/MetaMask/metamask-extension/pull/6690): Update dependencies, re-enable npm audit CI job
-- [#6700](https://github.com/MetaMask/metamask-extension/pull/6700): Fix styles on 'import account' page, update help link
+- Update dependencies, re-enable npm audit CI job ([#6690](https://github.com/MetaMask/metamask-extension/pull/6690))
+- Fix styles on 'import account' page, update help link ([#6700](https://github.com/MetaMask/metamask-extension/pull/6700))
 
 ## [6.6.1] - 2019-06-06
 ### Uncategorized
-- [#6691](https://github.com/MetaMask/metamask-extension/pull/6691): Revert "Improve ENS Address Input" to fix bugs on input field on non-main networks.
+- Revert "Improve ENS Address Input" to fix bugs on input field on non-main networks. ([#6691](https://github.com/MetaMask/metamask-extension/pull/6691))
 
 ## [6.6.0] - 2019-06-04
 ### Uncategorized
-- [#6659](https://github.com/MetaMask/metamask-extension/pull/6659): Enable Ledger hardware wallet support on Firefox
-- [#6671](https://github.com/MetaMask/metamask-extension/pull/6671): bugfix: reject enable promise on user rejection
-- [#6625](https://github.com/MetaMask/metamask-extension/pull/6625): Ensures that transactions cannot be confirmed if gas limit is below 21000.
-- [#6633](https://github.com/MetaMask/metamask-extension/pull/6633): Fix grammatical error in i18n endOfFlowMessage6
+- Enable Ledger hardware wallet support on Firefox ([#6659](https://github.com/MetaMask/metamask-extension/pull/6659))
+- bugfix: reject enable promise on user rejection ([#6671](https://github.com/MetaMask/metamask-extension/pull/6671))
+- Ensures that transactions cannot be confirmed if gas limit is below 21000. ([#6625](https://github.com/MetaMask/metamask-extension/pull/6625))
+- Fix grammatical error in i18n endOfFlowMessage6 ([#6633](https://github.com/MetaMask/metamask-extension/pull/6633))
 
 ## [6.5.3] - 2019-05-16
 ### Uncategorized
-- [#6619](https://github.com/MetaMask/metamask-extension/pull/6619): bugfix: show extension window if locked regardless of approval
-- [#6388](https://github.com/MetaMask/metamask-extension/pull/6388): Transactions/pending - check nonce against the network and mark as dropped if not included in a block
-- [#6606](https://github.com/MetaMask/metamask-extension/pull/6606): Improve ENS Address Input
-- [#6615](https://github.com/MetaMask/metamask-extension/pull/6615): Adds e2e test for removing imported accounts.
+- bugfix: show extension window if locked regardless of approval ([#6619](https://github.com/MetaMask/metamask-extension/pull/6619))
+- Transactions/pending - check nonce against the network and mark as dropped if not included in a block ([#6388](https://github.com/MetaMask/metamask-extension/pull/6388))
+- Improve ENS Address Input ([#6606](https://github.com/MetaMask/metamask-extension/pull/6606))
+- Adds e2e test for removing imported accounts. ([#6615](https://github.com/MetaMask/metamask-extension/pull/6615))
 
 ## [6.5.2] - 2019-05-15
 ### Uncategorized
-- [#6613](https://github.com/MetaMask/metamask-extension/pull/6613): Hardware Wallet Fix
+- Hardware Wallet Fix ([#6613](https://github.com/MetaMask/metamask-extension/pull/6613))
 
 ## [6.5.1] - 2019-05-14
 ### Uncategorized
 - Fix bug where approve method would show a warning. #6602
-- [#6593](https://github.com/MetaMask/metamask-extension/pull/6593): Fix wording of autoLogoutTimeLimitDescription
+- Fix wording of autoLogoutTimeLimitDescription ([#6593](https://github.com/MetaMask/metamask-extension/pull/6593))
 
 ## [6.5.0] - 2019-05-13
 ### Uncategorized
-- [#6568](https://github.com/MetaMask/metamask-extension/pull/6568): feature: integrate gaba/PhishingController
-- [#6490](https://github.com/MetaMask/metamask-extension/pull/6490): Redesign custom RPC form
-- [#6558](https://github.com/MetaMask/metamask-extension/pull/6558): Adds auto logout with customizable time frame
-- [#6578](https://github.com/MetaMask/metamask-extension/pull/6578): Fixes ability to send to token contract addresses
-- [#6557](https://github.com/MetaMask/metamask-extension/pull/6557): Adds drag and drop functionality to seed phrase entry.
-- [#6526](https://github.com/MetaMask/metamask-extension/pull/6526): Include token checksum address in prices lookup for token rates
-- [#6502](https://github.com/MetaMask/metamask-extension/pull/6502): Add subheader to all settings subviews
-- [#6501](https://github.com/MetaMask/metamask-extension/pull/6501): Improve confirm screen loading performance by fixing home screen rendering bug
+- feature: integrate gaba/PhishingController ([#6568](https://github.com/MetaMask/metamask-extension/pull/6568))
+- Redesign custom RPC form ([#6490](https://github.com/MetaMask/metamask-extension/pull/6490))
+- Adds auto logout with customizable time frame ([#6558](https://github.com/MetaMask/metamask-extension/pull/6558))
+- Fixes ability to send to token contract addresses ([#6578](https://github.com/MetaMask/metamask-extension/pull/6578))
+- Adds drag and drop functionality to seed phrase entry. ([#6557](https://github.com/MetaMask/metamask-extension/pull/6557))
+- Include token checksum address in prices lookup for token rates ([#6526](https://github.com/MetaMask/metamask-extension/pull/6526))
+- Add subheader to all settings subviews ([#6502](https://github.com/MetaMask/metamask-extension/pull/6502))
+- Improve confirm screen loading performance by fixing home screen rendering bug ([#6501](https://github.com/MetaMask/metamask-extension/pull/6501))
 
 ## [6.4.1] - 2019-04-26
 ### Uncategorized
-- [#6521](https://github.com/MetaMask/metamask-extension/pull/6521): Revert "Adds 4byte registry fallback to getMethodData()" to fix stalling bug.
+- Revert "Adds 4byte registry fallback to getMethodData()" to fix stalling bug. ([#6521](https://github.com/MetaMask/metamask-extension/pull/6521))
 
 ## [6.4.0] - 2019-04-18
 ### Uncategorized
-- [#6445](https://github.com/MetaMask/metamask-extension/pull/6445): \* Move send to pages/
-- [#6470](https://github.com/MetaMask/metamask-extension/pull/6470): update publishing.md with dev diagram
-- [#6403](https://github.com/MetaMask/metamask-extension/pull/6403): Update to eth-method-registry@1.2.0
-- [#6468](https://github.com/MetaMask/metamask-extension/pull/6468): Fix switcher height when Custom RPC is selected or loading
-- [#6459](https://github.com/MetaMask/metamask-extension/pull/6459): feature: add Goerli support
-- [#6444](https://github.com/MetaMask/metamask-extension/pull/6444): Fixes #6321 & #6421 - Add Localhost 8545 for network dropdown names
-- [#6454](https://github.com/MetaMask/metamask-extension/pull/6454): Bump eth-contract-metadata
-- [#6448](https://github.com/MetaMask/metamask-extension/pull/6448): Remove unneeded array cloning in getSendToAccounts selector
-- [#6056](https://github.com/MetaMask/metamask-extension/pull/6056): repeated getSelectedAddress() func send.selectors.js removed
-- [#6422](https://github.com/MetaMask/metamask-extension/pull/6422): Added Chrome limited site access solution doc
-- [#6424](https://github.com/MetaMask/metamask-extension/pull/6424): feature: switch token pricing to CoinGecko API
-- [#6428](https://github.com/MetaMask/metamask-extension/pull/6428): Don't inject web3 on sharefile.com
-- [#6417](https://github.com/MetaMask/metamask-extension/pull/6417): Metrics updates
-- [#6420](https://github.com/MetaMask/metamask-extension/pull/6420): Fix links to MetamaskInpageProvider in porting_to_new_environment.md
-- [#6362](https://github.com/MetaMask/metamask-extension/pull/6362): Remove broken image walkthrough from metamaskbot comment
-- [#6401](https://github.com/MetaMask/metamask-extension/pull/6401): metamask-controller - use improved provider-as-middleware utility
-- [#6406](https://github.com/MetaMask/metamask-extension/pull/6406): remove user actions controller
-- [#6399](https://github.com/MetaMask/metamask-extension/pull/6399): doc - publishing - typo fix
-- [#6396](https://github.com/MetaMask/metamask-extension/pull/6396): pin eth-contract-metadata to last commit hash
-- [#6397](https://github.com/MetaMask/metamask-extension/pull/6397): Change coinbase to wyre
-- [#6395](https://github.com/MetaMask/metamask-extension/pull/6395): bump ledger and trezor keyring
-- [#6389](https://github.com/MetaMask/metamask-extension/pull/6389): Fix display of gas chart on Ethereum networks
-- [#6382](https://github.com/MetaMask/metamask-extension/pull/6382): Remove NoticeController
+- Move send to pages/ ([#6445](https://github.com/MetaMask/metamask-extension/pull/6445))
+- update publishing.md with dev diagram ([#6470](https://github.com/MetaMask/metamask-extension/pull/6470))
+- Update to eth-method-registry@1.2.0 ([#6403](https://github.com/MetaMask/metamask-extension/pull/6403))
+- Fix switcher height when Custom RPC is selected or loading ([#6468](https://github.com/MetaMask/metamask-extension/pull/6468))
+- feature: add Goerli support ([#6459](https://github.com/MetaMask/metamask-extension/pull/6459))
+- Fixes #6321 & #6421 - Add Localhost 8545 for network dropdown names ([#6444](https://github.com/MetaMask/metamask-extension/pull/6444))
+- Bump eth-contract-metadata ([#6454](https://github.com/MetaMask/metamask-extension/pull/6454))
+- Remove unneeded array cloning in getSendToAccounts selector ([#6448](https://github.com/MetaMask/metamask-extension/pull/6448))
+- repeated getSelectedAddress() func send.selectors.js removed ([#6056](https://github.com/MetaMask/metamask-extension/pull/6056))
+- Added Chrome limited site access solution doc ([#6422](https://github.com/MetaMask/metamask-extension/pull/6422))
+- feature: switch token pricing to CoinGecko API ([#6424](https://github.com/MetaMask/metamask-extension/pull/6424))
+- Don't inject web3 on sharefile.com ([#6428](https://github.com/MetaMask/metamask-extension/pull/6428))
+- Metrics updates ([#6417](https://github.com/MetaMask/metamask-extension/pull/6417))
+- Fix links to MetamaskInpageProvider in porting_to_new_environment.md ([#6420](https://github.com/MetaMask/metamask-extension/pull/6420))
+- Remove broken image walkthrough from metamaskbot comment ([#6362](https://github.com/MetaMask/metamask-extension/pull/6362))
+- metamask-controller - use improved provider-as-middleware utility ([#6401](https://github.com/MetaMask/metamask-extension/pull/6401))
+- remove user actions controller ([#6406](https://github.com/MetaMask/metamask-extension/pull/6406))
+- doc - publishing - typo fix ([#6399](https://github.com/MetaMask/metamask-extension/pull/6399))
+- pin eth-contract-metadata to last commit hash ([#6396](https://github.com/MetaMask/metamask-extension/pull/6396))
+- Change coinbase to wyre ([#6397](https://github.com/MetaMask/metamask-extension/pull/6397))
+- bump ledger and trezor keyring ([#6395](https://github.com/MetaMask/metamask-extension/pull/6395))
+- Fix display of gas chart on Ethereum networks ([#6389](https://github.com/MetaMask/metamask-extension/pull/6389))
+- Remove NoticeController ([#6382](https://github.com/MetaMask/metamask-extension/pull/6382))
 
 ## [6.3.2] - 2019-04-08
 ### Uncategorized
-- [#6389](https://github.com/MetaMask/metamask-extension/pull/6389): Fix display of gas chart on ethereum networks
-- [#6395](https://github.com/MetaMask/metamask-extension/pull/6395): Fixes for signing methods for ledger and trezor devices
-- [#6397](https://github.com/MetaMask/metamask-extension/pull/6397): Fix Wyre link
+- Fix display of gas chart on ethereum networks ([#6389](https://github.com/MetaMask/metamask-extension/pull/6389))
+- Fixes for signing methods for ledger and trezor devices ([#6395](https://github.com/MetaMask/metamask-extension/pull/6395))
+- Fix Wyre link ([#6397](https://github.com/MetaMask/metamask-extension/pull/6397))
 
 ## [6.3.1] - 2019-03-29
 ### Uncategorized
-- [#6353](https://github.com/MetaMask/metamask-extension/pull/6353): Open restore vault in full screen when clicked from popup
-- [#6372](https://github.com/MetaMask/metamask-extension/pull/6372): Prevents duplicates of account addresses from showing in send screen "To" dropdown
-- [#6374](https://github.com/MetaMask/metamask-extension/pull/6374): Ensures users are placed on correct confirm screens even when registry service fails
+- Open restore vault in full screen when clicked from popup ([#6353](https://github.com/MetaMask/metamask-extension/pull/6353))
+- Prevents duplicates of account addresses from showing in send screen "To" dropdown ([#6372](https://github.com/MetaMask/metamask-extension/pull/6372))
+- Ensures users are placed on correct confirm screens even when registry service fails ([#6374](https://github.com/MetaMask/metamask-extension/pull/6374))
 
 ## [6.3.0] - 2019-03-26
 ### Uncategorized
-- [#6300](https://github.com/MetaMask/metamask-extension/pull/6300): Gas chart hidden on custom networks
-- [#6301](https://github.com/MetaMask/metamask-extension/pull/6301): Fix gas fee in the submitted step of the transaction details activity log
-- [#6302](https://github.com/MetaMask/metamask-extension/pull/6302): Replaces the coinbase link in the deposit modal with one for wyre
-- [#6307](https://github.com/MetaMask/metamask-extension/pull/6307): Centre the notification in the current window
-- [#6312](https://github.com/MetaMask/metamask-extension/pull/6312): Fixes popups not showing when screen size is odd
-- [#6326](https://github.com/MetaMask/metamask-extension/pull/6326): Fix oversized loading overlay on gas customization modal.
-- [#6330](https://github.com/MetaMask/metamask-extension/pull/6330): Stop reloading dapps on network change allowing dapps to decide if it should refresh or not
-- [#6332](https://github.com/MetaMask/metamask-extension/pull/6332): Enable mobile sync
-- [#6333](https://github.com/MetaMask/metamask-extension/pull/6333): Redesign of the settings screen
-- [#6340](https://github.com/MetaMask/metamask-extension/pull/6340): Cancel transactions and signature requests on the closing of notification windows
-- [#6341](https://github.com/MetaMask/metamask-extension/pull/6341): Disable transaction "Cancel" button when balance is insufficient
-- [#6347](https://github.com/MetaMask/metamask-extension/pull/6347): Enable privacy mode by default for first time users
+- Gas chart hidden on custom networks ([#6300](https://github.com/MetaMask/metamask-extension/pull/6300))
+- Fix gas fee in the submitted step of the transaction details activity log ([#6301](https://github.com/MetaMask/metamask-extension/pull/6301))
+- Replaces the coinbase link in the deposit modal with one for wyre ([#6302](https://github.com/MetaMask/metamask-extension/pull/6302))
+- Centre the notification in the current window ([#6307](https://github.com/MetaMask/metamask-extension/pull/6307))
+- Fixes popups not showing when screen size is odd ([#6312](https://github.com/MetaMask/metamask-extension/pull/6312))
+- Fix oversized loading overlay on gas customization modal. ([#6326](https://github.com/MetaMask/metamask-extension/pull/6326))
+- Stop reloading dapps on network change allowing dapps to decide if it should refresh or not ([#6330](https://github.com/MetaMask/metamask-extension/pull/6330))
+- Enable mobile sync ([#6332](https://github.com/MetaMask/metamask-extension/pull/6332))
+- Redesign of the settings screen ([#6333](https://github.com/MetaMask/metamask-extension/pull/6333))
+- Cancel transactions and signature requests on the closing of notification windows ([#6340](https://github.com/MetaMask/metamask-extension/pull/6340))
+- Disable transaction "Cancel" button when balance is insufficient ([#6341](https://github.com/MetaMask/metamask-extension/pull/6341))
+- Enable privacy mode by default for first time users ([#6347](https://github.com/MetaMask/metamask-extension/pull/6347))
 
 ## [6.2.2] - 2019-03-12
 ### Uncategorized
-- [#6271](https://github.com/MetaMask/metamask-extension/pull/6271): Centre all notification popups
-- [#6268](https://github.com/MetaMask/metamask-extension/pull/6268): Improve Korean translations
-- [#6279](https://github.com/MetaMask/metamask-extension/pull/6279): Nonmultiple notifications for batch txs
-- [#6280](https://github.com/MetaMask/metamask-extension/pull/6280): No longer check network when validating checksum addresses
+- Centre all notification popups ([#6271](https://github.com/MetaMask/metamask-extension/pull/6271))
+- Improve Korean translations ([#6268](https://github.com/MetaMask/metamask-extension/pull/6268))
+- Nonmultiple notifications for batch txs ([#6279](https://github.com/MetaMask/metamask-extension/pull/6279))
+- No longer check network when validating checksum addresses ([#6280](https://github.com/MetaMask/metamask-extension/pull/6280))
 
 ## [6.2.1] - 2019-03-11
 
 ## [6.2.0] - 2019-03-05
 ### Uncategorized
-- [#6192](https://github.com/MetaMask/metamask-extension/pull/6192): Improves design and UX of onboarding flow
-- [#6195](https://github.com/MetaMask/metamask-extension/pull/6195): Fixes gas estimation when sending to contracts
-- [#6223](https://github.com/MetaMask/metamask-extension/pull/6223): Fixes display of notification windows when metamask is active in a tab
-- [#6171](https://github.com/MetaMask/metamask-extension/pull/6171): Adds MetaMetrics usage analytics system
+- Improves design and UX of onboarding flow ([#6192](https://github.com/MetaMask/metamask-extension/pull/6192))
+- Fixes gas estimation when sending to contracts ([#6195](https://github.com/MetaMask/metamask-extension/pull/6195))
+- Fixes display of notification windows when metamask is active in a tab ([#6223](https://github.com/MetaMask/metamask-extension/pull/6223))
+- Adds MetaMetrics usage analytics system ([#6171](https://github.com/MetaMask/metamask-extension/pull/6171))
 
 ## [6.1.0] - 2019-02-20
 ### Uncategorized
-- [#6182](https://github.com/MetaMask/metamask-extension/pull/6182): Change "Token Address" to "Token Contract Address"
-- [#6177](https://github.com/MetaMask/metamask-extension/pull/6177): Fixes #6176
-- [#6146](https://github.com/MetaMask/metamask-extension/pull/6146): \* Add Copy Tx ID button to transaction-list-item-details
-- [#6133](https://github.com/MetaMask/metamask-extension/pull/6133): Checksum address before slicing it for the confirm screen
-- [#6147](https://github.com/MetaMask/metamask-extension/pull/6147): Add button to force edit token symbol when adding custom token
-- [#6124](https://github.com/MetaMask/metamask-extension/pull/6124): recent-blocks - dont listen for block when on infura providers -[#5973] (https://github.com/MetaMask/metamask-extension/pull/5973): Fix incorrectly showing checksums on non-ETH blockchains (issue 5838)
+- Change "Token Address" to "Token Contract Address" ([#6182](https://github.com/MetaMask/metamask-extension/pull/6182))
+- Fixes #6176 ([#6177](https://github.com/MetaMask/metamask-extension/pull/6177))
+- Add Copy Tx ID button to transaction-list-item-details ([#6146](https://github.com/MetaMask/metamask-extension/pull/6146))
+- Checksum address before slicing it for the confirm screen ([#6133](https://github.com/MetaMask/metamask-extension/pull/6133))
+- Add button to force edit token symbol when adding custom token ([#6147](https://github.com/MetaMask/metamask-extension/pull/6147))
+- Fix incorrectly showing checksums on non-ETH blockchains ([#6124](https://github.com/MetaMask/metamask-extension/pull/6124): recent-blocks - dont listen for block when on infura providers -[#5973] (https://github.com/MetaMask/metamask-extension/pull/5973))
 
 ## [6.0.1] - 2019-02-12
 ### Uncategorized
-- [#6139](https://github.com/MetaMask/metamask-extension/pull/6139) Fix advanced gas controls on the confirm screen
-- [#6134](https://github.com/MetaMask/metamask-extension/pull/6134) Trim whitespace from seed phrase during import
-- [#6119](https://github.com/MetaMask/metamask-extension/pull/6119) Update Italian translation
-- [#6125](https://github.com/MetaMask/metamask-extension/pull/6125) Improved Traditional Chinese translation
+- Fix advanced gas controls on the confirm screen ([#6139](https://github.com/MetaMask/metamask-extension/pull/6139))
+- Trim whitespace from seed phrase during import ([#6134](https://github.com/MetaMask/metamask-extension/pull/6134))
+- Update Italian translation ([#6119](https://github.com/MetaMask/metamask-extension/pull/6119))
+- Improved Traditional Chinese translation ([#6125](https://github.com/MetaMask/metamask-extension/pull/6125))
 
 ## [6.0.0] - 2019-02-11
 ### Uncategorized
-- [#6082](https://github.com/MetaMask/metamask-extension/pull/6082): Migrate all users to the new UI
-- [#6114](https://github.com/MetaMask/metamask-extension/pull/6114): Add setting for inputting gas price with a text field for advanced users.
-- [#6091](https://github.com/MetaMask/metamask-extension/pull/6091): Add Swap feature to CurrencyInput
-- [#6090](https://github.com/MetaMask/metamask-extension/pull/6090): Change gas labels to Slow/Average/Fast
-- [#6112](https://github.com/MetaMask/metamask-extension/pull/6112): Extract advanced gas input controls to their own component
-- [#5929](https://github.com/MetaMask/metamask-extension/pull/5929): Update design of phishing warning screen
-- [#6120](https://github.com/MetaMask/metamask-extension/pull/6120): Add class to sign footer button
-- [#6116](https://github.com/MetaMask/metamask-extension/pull/6116): Fix locale codes contains underscore never being preferred
+- Migrate all users to the new UI ([#6082](https://github.com/MetaMask/metamask-extension/pull/6082))
+- Add setting for inputting gas price with a text field for advanced users. ([#6114](https://github.com/MetaMask/metamask-extension/pull/6114))
+- Add Swap feature to CurrencyInput ([#6091](https://github.com/MetaMask/metamask-extension/pull/6091))
+- Change gas labels to Slow/Average/Fast ([#6090](https://github.com/MetaMask/metamask-extension/pull/6090))
+- Extract advanced gas input controls to their own component ([#6112](https://github.com/MetaMask/metamask-extension/pull/6112))
+- Update design of phishing warning screen ([#5929](https://github.com/MetaMask/metamask-extension/pull/5929))
+- Add class to sign footer button ([#6120](https://github.com/MetaMask/metamask-extension/pull/6120))
+- Fix locale codes contains underscore never being preferred ([#6116](https://github.com/MetaMask/metamask-extension/pull/6116))
 
 ## [5.3.5] - 2019-02-04
 ### Uncategorized
-- [#6084](https://github.com/MetaMask/metamask-extension/pull/6087): Privacy mode fixes
+- Privacy mode fixes ([#6084](https://github.com/MetaMask/metamask-extension/pull/6087))
 
 ## [5.3.4] - 2019-01-31
 ### Uncategorized
-- [#6079](https://github.com/MetaMask/metamask-extension/pull/6079): fix - migration 30
+- fix - migration 30 ([#6079](https://github.com/MetaMask/metamask-extension/pull/6079))
 
 ## [5.3.3] - 2019-01-30
 ### Uncategorized
-- [#6006](https://github.com/MetaMask/metamask-extension/pull/6006): Update privacy notice
-- [#6072](https://github.com/MetaMask/metamask-extension/pull/6072): Improved Spanish translations
-- [#5854](https://github.com/MetaMask/metamask-extension/pull/5854): Add visual indicator when displaying a cached balance.
-- [#6044](https://github.com/MetaMask/metamask-extension/pull/6044): Fix bug that interferred with using multiple custom networks.
+- Update privacy notice ([#6006](https://github.com/MetaMask/metamask-extension/pull/6006))
+- Improved Spanish translations ([#6072](https://github.com/MetaMask/metamask-extension/pull/6072))
+- Add visual indicator when displaying a cached balance. ([#5854](https://github.com/MetaMask/metamask-extension/pull/5854))
+- Fix bug that interferred with using multiple custom networks. ([#6044](https://github.com/MetaMask/metamask-extension/pull/6044))
 
 ## [5.3.2] - 2019-01-28
 ### Uncategorized
-- [#6021](https://github.com/MetaMask/metamask-extension/pull/6021): Order shapeshift transactions by time within the transactions list
-- [#6052](https://github.com/MetaMask/metamask-extension/pull/6052): Add and use cached method signatures to reduce provider requests
-- [#6048](https://github.com/MetaMask/metamask-extension/pull/6048): Refactor BalanceComponent to jsx
-- [#6026](https://github.com/MetaMask/metamask-extension/pull/6026): Prevent invalid chainIds when adding custom rpcs
-- [#6029](https://github.com/MetaMask/metamask-extension/pull/6029): Fix grammar error in Current Conversion
-- [#6024](https://github.com/MetaMask/metamask-extension/pull/6024): Disable account dropdown on signing screens
+- Order shapeshift transactions by time within the transactions list ([#6021](https://github.com/MetaMask/metamask-extension/pull/6021))
+- Add and use cached method signatures to reduce provider requests ([#6052](https://github.com/MetaMask/metamask-extension/pull/6052))
+- Refactor BalanceComponent to jsx ([#6048](https://github.com/MetaMask/metamask-extension/pull/6048))
+- Prevent invalid chainIds when adding custom rpcs ([#6026](https://github.com/MetaMask/metamask-extension/pull/6026))
+- Fix grammar error in Current Conversion ([#6029](https://github.com/MetaMask/metamask-extension/pull/6029))
+- Disable account dropdown on signing screens ([#6024](https://github.com/MetaMask/metamask-extension/pull/6024))
 
 ## [5.3.1] - 2019-01-16
 ### Uncategorized
-- [#5966](https://github.com/MetaMask/metamask-extension/pull/5966): Update Slovenian translation
-- [#6005](https://github.com/MetaMask/metamask-extension/pull/6005): Set auto conversion off for token/eth conversion
-- [#6008](https://github.com/MetaMask/metamask-extension/pull/6008): Fix confirm screen for sending ether tx with hex data
-- [#5999](https://github.com/MetaMask/metamask-extension/pull/5999): Refine app description
-- [#5997](https://github.com/MetaMask/metamask-extension/pull/5997): Harden Drizzle test runner script
-- [#5995](https://github.com/MetaMask/metamask-extension/pull/5995): Fix bug where MetaMask user calls non-standard ERC20 methods such as `mint`, `tokenData` will be `undefined` and an uncaught error will break the UI
-- [#5970](https://github.com/MetaMask/metamask-extension/pull/5970): Fixed a word in french translation (several occurrences of connection instead of connexion)
-- [#5977](https://github.com/MetaMask/metamask-extension/pull/5977): Fix Component#componentDidUpdate usage
-- [#5992](https://github.com/MetaMask/metamask-extension/pull/5992): Add scrolling button to account list
-- [#5989](https://github.com/MetaMask/metamask-extension/pull/5989): fix typo in phishing.html title
+- Update Slovenian translation ([#5966](https://github.com/MetaMask/metamask-extension/pull/5966))
+- Set auto conversion off for token/eth conversion ([#6005](https://github.com/MetaMask/metamask-extension/pull/6005))
+- Fix confirm screen for sending ether tx with hex data ([#6008](https://github.com/MetaMask/metamask-extension/pull/6008))
+- Refine app description ([#5999](https://github.com/MetaMask/metamask-extension/pull/5999))
+- Harden Drizzle test runner script ([#5997](https://github.com/MetaMask/metamask-extension/pull/5997))
+- Fix bug where MetaMask user calls non-standard ERC20 methods such as `mint`, `tokenData` will be `undefined` and an uncaught error will break the UI ([#5995](https://github.com/MetaMask/metamask-extension/pull/5995))
+- Fixed a word in french translation ([#5970](https://github.com/MetaMask/metamask-extension/pull/5970))
+- Fix Component#componentDidUpdate usage ([#5977](https://github.com/MetaMask/metamask-extension/pull/5977))
+- Add scrolling button to account list ([#5992](https://github.com/MetaMask/metamask-extension/pull/5992))
+- fix typo in phishing.html title ([#5989](https://github.com/MetaMask/metamask-extension/pull/5989))
 
 ## [5.3.0] - 2019-01-02
 ### Uncategorized
-- [#5978](https://github.com/MetaMask/metamask-extension/pull/5978): Fix etherscan links on notifications
-- [#5980](https://github.com/MetaMask/metamask-extension/pull/5980): Fix drizzle tests
-- [#5922](https://github.com/MetaMask/metamask-extension/pull/5922): Prevent users from changing the From field in the send screen
-- [#5932](https://github.com/MetaMask/metamask-extension/pull/5932): Fix displayed time and date in the activity log. Remove vreme library, add luxon library.
-- [#5924](https://github.com/MetaMask/metamask-extension/pull/5924): transactions - throw an error if a transaction is generated while the network is loading
-- [#5893](https://github.com/MetaMask/metamask-extension/pull/5893): Add loading network screen
+- Fix etherscan links on notifications ([#5978](https://github.com/MetaMask/metamask-extension/pull/5978))
+- Fix drizzle tests ([#5980](https://github.com/MetaMask/metamask-extension/pull/5980))
+- Prevent users from changing the From field in the send screen ([#5922](https://github.com/MetaMask/metamask-extension/pull/5922))
+- Fix displayed time and date in the activity log. Remove vreme library, add luxon library. ([#5932](https://github.com/MetaMask/metamask-extension/pull/5932))
+- transactions - throw an error if a transaction is generated while the network is loading ([#5924](https://github.com/MetaMask/metamask-extension/pull/5924))
+- Add loading network screen ([#5893](https://github.com/MetaMask/metamask-extension/pull/5893))
 
 ## [5.2.2] - 2018-12-13
 ### Uncategorized
-- [#5925](https://github.com/MetaMask/metamask-extension/pull/5925): Fix speed up button not showing for transactions with the lowest nonce
-- [#5923](https://github.com/MetaMask/metamask-extension/pull/5923): Update the Phishing Warning notice text to not use inline URLs
-- [#5919](https://github.com/MetaMask/metamask-extension/pull/5919): Fix some styling and translations in the gas customization modal
+- Fix speed up button not showing for transactions with the lowest nonce ([#5925](https://github.com/MetaMask/metamask-extension/pull/5925))
+- Update the Phishing Warning notice text to not use inline URLs ([#5923](https://github.com/MetaMask/metamask-extension/pull/5923))
+- Fix some styling and translations in the gas customization modal ([#5919](https://github.com/MetaMask/metamask-extension/pull/5919))
 
 ## [5.2.1] - 2018-12-12
 ### Uncategorized
-- [#5917] bugfix: Ensures that advanced tab gas limit reflects tx gas limit
+- bugfix: Ensures that advanced tab gas limit reflects tx gas limit ([#5917](https://github.com/MetaMask/metamask-extension/pull/5917))
 
 ## [5.2.0] - 2018-12-11
 ### Uncategorized
-- [#5704] Implements new gas customization features for sending, confirming and speeding up transactions
-- [#5886] Groups transactions - speed up, cancel and original - by nonce in the transaction history list
-- [#5892] bugfix: eliminates infinite spinner issues caused by switching quickly from a loading network that ultimately fails to resolve
-- [$5902] bugfix: provider crashes caused caching issues in `json-rpc-engine`. Fixed in (https://github.com/MetaMask/json-rpc-engine/commit/6de511afbd03ccef4550ea43ff4010b7d7a84039)
+- Implements new gas customization features for sending, confirming and speeding up transactions ([#5704](https://github.com/MetaMask/metamask-extension/pull/5704))
+- Groups transactions - speed up, cancel and original - by nonce in the transaction history list ([#5886](https://github.com/MetaMask/metamask-extension/pull/5886))
+- bugfix: eliminates infinite spinner issues caused by switching quickly from a loading network that ultimately fails to resolve ([#5892](https://github.com/MetaMask/metamask-extension/pull/5892))
+- bugfix: provider crashes caused caching issues in `json-rpc-engine`. ([#5902](https://github.com/MetaMask/metamask-extension/pull/5902))
+  - Fixed in (https://github.com/MetaMask/json-rpc-engine/commit/6de511afbd03ccef4550ea43ff4010b7d7a84039)
 
 ## [5.1.0] - 2018-12-03
 ### Uncategorized
-- [#5860](https://github.com/MetaMask/metamask-extension/pull/5860): Fixed an infinite spinner bug.
-- [#5875](https://github.com/MetaMask/metamask-extension/pull/5875): Update phishing warning copy
-- [#5863](https://github.com/MetaMask/metamask-extension/pull/5863): bugfix: normalize contract addresss when fetching exchange rates
-- [#5843](https://github.com/MetaMask/metamask-extension/pull/5843): Use selector for state.metamask.accounts in all cases.
+- Fixed an infinite spinner bug. ([#5860](https://github.com/MetaMask/metamask-extension/pull/5860))
+- Update phishing warning copy ([#5875](https://github.com/MetaMask/metamask-extension/pull/5875))
+- bugfix: normalize contract addresss when fetching exchange rates ([#5863](https://github.com/MetaMask/metamask-extension/pull/5863))
+- Use selector for state.metamask.accounts in all cases. ([#5843](https://github.com/MetaMask/metamask-extension/pull/5843))
 
 ## [5.0.4] - 2018-11-29
 ### Uncategorized
-- [#5878](https://github.com/MetaMask/metamask-extension/pull/5878): Formats 32-length byte strings passed to personal_sign as hex, rather than UTF8.
-- [#5840](https://github.com/MetaMask/metamask-extension/pull/5840): transactions/tx-gas-utils - add the acctual response for eth_getCode for NO_CONTRACT_ERROR's && add a debug object to simulationFailed
-- [#5848](https://github.com/MetaMask/metamask-extension/pull/5848): Soften accusatory language on phishing warning
-- [#5835](https://github.com/MetaMask/metamask-extension/pull/5835): Open full-screen UI on install
+- Formats 32-length byte strings passed to personal_sign as hex, rather than UTF8. ([#5878](https://github.com/MetaMask/metamask-extension/pull/5878))
+- transactions/tx-gas-utils - add the acctual response for eth_getCode for NO_CONTRACT_ERROR's && add a debug object to simulationFailed ([#5840](https://github.com/MetaMask/metamask-extension/pull/5840))
+- Soften accusatory language on phishing warning ([#5848](https://github.com/MetaMask/metamask-extension/pull/5848))
+- Open full-screen UI on install ([#5835](https://github.com/MetaMask/metamask-extension/pull/5835))
 - Locked versions for some dependencies to avoid possible issues from event-stream hack.
-- [#5831](https://github.com/MetaMask/metamask-extension/pull/5831): Hide app-header when provider request pending
-- [#5786](https://github.com/MetaMask/metamask-extension/pull/5786): \* transactions - autofill gasPrice for retry attempts with either the recomened gasprice or a %10 bump
-- [#5801](https://github.com/MetaMask/metamask-extension/pull/5801): transactions - ensure err is defined when setting tx failed
-- [#5792](https://github.com/MetaMask/metamask-extension/pull/5792): Consider HW Wallets for signTypedMessage
-- [#5829](https://github.com/MetaMask/metamask-extension/pull/5829): Show disabled cursor in .network-disabled state
-- [#5827](https://github.com/MetaMask/metamask-extension/pull/5827): Trim whitespace from seed phrase during import
-- [#5832](https://github.com/MetaMask/metamask-extension/pull/5832): Show Connect Requests count in extension badge
-- [#5816](https://github.com/MetaMask/metamask-extension/pull/5816): Increase Token Symbol length to twelve
-- [#5819](https://github.com/MetaMask/metamask-extension/pull/5819): With the EIP 1102 updates, MetaMask _does_ now open itself when visiting some websites. Changed the wording here to clarify that MetaMask will not open itself to ask you for your seed phrase.
-- [#5810](https://github.com/MetaMask/metamask-extension/pull/5810): Bump Node version to 8.13
-- [#5797](https://github.com/MetaMask/metamask-extension/pull/5797): Add Firefox and Brave support for Trezor
-- [#5799](https://github.com/MetaMask/metamask-extension/pull/5799): Fix usage of setState in ConfirmTransactionBase#handleSubmit
-- [#5798](https://github.com/MetaMask/metamask-extension/pull/5798): Show byte count for hex data on confirm screen
-- [#5334](https://github.com/MetaMask/metamask-extension/pull/5334): Default to the new UI for first time users
-- [#5791](https://github.com/MetaMask/metamask-extension/pull/5791): Bump eth-ledger-bridge-keyring
+- Hide app-header when provider request pending ([#5831](https://github.com/MetaMask/metamask-extension/pull/5831))
+- transactions - autofill gasPrice for retry attempts with either the recomened gasprice or a %10 bump ([#5786](https://github.com/MetaMask/metamask-extension/pull/5786))
+- transactions - ensure err is defined when setting tx failed ([#5801](https://github.com/MetaMask/metamask-extension/pull/5801))
+- Consider HW Wallets for signTypedMessage ([#5792](https://github.com/MetaMask/metamask-extension/pull/5792))
+- Show disabled cursor in .network-disabled state ([#5829](https://github.com/MetaMask/metamask-extension/pull/5829))
+- Trim whitespace from seed phrase during import ([#5827](https://github.com/MetaMask/metamask-extension/pull/5827))
+- Show Connect Requests count in extension badge ([#5832](https://github.com/MetaMask/metamask-extension/pull/5832))
+- Increase Token Symbol length to twelve ([#5816](https://github.com/MetaMask/metamask-extension/pull/5816))
+- With the EIP 1102 updates, MetaMask _does_ now open itself when visiting some websites. Changed the wording here to clarify that MetaMask will not open itself to ask you for your seed phrase. ([#5819](https://github.com/MetaMask/metamask-extension/pull/5819))
+- Bump Node version to 8.13 ([#5810](https://github.com/MetaMask/metamask-extension/pull/5810))
+- Add Firefox and Brave support for Trezor ([#5797](https://github.com/MetaMask/metamask-extension/pull/5797))
+- Fix usage of setState in ConfirmTransactionBase#handleSubmit ([#5799](https://github.com/MetaMask/metamask-extension/pull/5799))
+- Show byte count for hex data on confirm screen ([#5798](https://github.com/MetaMask/metamask-extension/pull/5798))
+- Default to the new UI for first time users ([#5334](https://github.com/MetaMask/metamask-extension/pull/5334))
+- Bump eth-ledger-bridge-keyring ([#5791](https://github.com/MetaMask/metamask-extension/pull/5791))
 
 ## [5.0.3] - 2018-11-20
 ### Uncategorized
-- [#5547](https://github.com/MetaMask/metamask-extension/pull/5547): Bundle some ui dependencies separately to limit the build size of ui.js
+- Bundle some ui dependencies separately to limit the build size of ui.js ([#5547](https://github.com/MetaMask/metamask-extension/pull/5547))
 - Resubmit approved transactions on new block, to fix bug where an error can stick transactions in this state.
 - Fixed a bug that could cause an error when sending the max number of tokens.
 
@@ -1183,9 +1188,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Uncategorized
 - Fix bug where data lookups like balances would get stale data (stopped block-tracker bug)
 - Transaction Details now show entry for onchain failure
-- [#5559](https://github.com/MetaMask/metamask-extension/pull/5559) Localize language names in translation select list
-- [#5283](https://github.com/MetaMask/metamask-extension/pull/5283): Fix bug when eth.getCode() called with no contract
-- [#5563](https://github.com/MetaMask/metamask-extension/pull/5563#pullrequestreview-166769174) Feature: improve Hatian Creole translations
+- Localize language names in translation select list ([#5559](https://github.com/MetaMask/metamask-extension/pull/5559))
+- Fix bug when eth.getCode() called with no contract ([#5283](https://github.com/MetaMask/metamask-extension/pull/5283))
+- Feature: improve Hatian Creole translations ([#5563](https://github.com/MetaMask/metamask-extension/pull/5563#pullrequestreview-166769174))
 - Feature: improve Slovenian translations
 - Add support for alternate `wallet_watchAsset` rpc method name
 - Attempt chain ID lookup via `eth_chainId` before `net_version`
@@ -1210,9 +1215,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [4.14.0] - 2018-10-11
 ### Uncategorized
 - Update transaction statuses when switching networks.
-- [#5470](https://github.com/MetaMask/metamask-extension/pull/5470) 100% coverage in French locale, fixed the procedure to verify proposed locale.
+- 100% coverage in French locale, fixed the procedure to verify proposed locale. ([#5470](https://github.com/MetaMask/metamask-extension/pull/5470))
 - Added rudimentary support for the subscription API to support web3 1.0 and Truffle's Drizzle.
-- [#5502](https://github.com/MetaMask/metamask-extension/pull/5502) Update Italian translation.
+- Update Italian translation. ([#5502](https://github.com/MetaMask/metamask-extension/pull/5502))
 
 ## [4.13.0] - 2018-10-04
 ### Uncategorized
@@ -1232,61 +1237,61 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [4.10.0] - 2018-09-18
 ### Uncategorized
-- [#4803](https://github.com/MetaMask/metamask-extension/pull/4803): Implement EIP-712: Sign typed data, but continue to support v1.
-- [#4898](https://github.com/MetaMask/metamask-extension/pull/4898): Restore multiple consecutive accounts with balances.
-- [#4279](https://github.com/MetaMask/metamask-extension/pull/4279): New BlockTracker and Json-Rpc-Engine based Provider.
-- [#5050](https://github.com/MetaMask/metamask-extension/pull/5050): Add Ledger hardware wallet support.
-- [#4919](https://github.com/MetaMask/metamask-extension/pull/4919): Refactor and Redesign Transaction List.
-- [#5182](https://github.com/MetaMask/metamask-extension/pull/5182): Add Transaction Details to the Transaction List view.
-- [#5229](https://github.com/MetaMask/metamask-extension/pull/5229): Clear old seed words when importing new seed words.
-- [#5264](https://github.com/MetaMask/metamask-extension/pull/5264): Improve click area for adjustment arrows buttons.
-- [#4606](https://github.com/MetaMask/metamask-extension/pull/4606): Add new metamask_watchAsset method.
-- [#5189](https://github.com/MetaMask/metamask-extension/pull/5189): Fix bug where Ropsten loading message is shown when connecting to Kovan.
-- [#5256](https://github.com/MetaMask/metamask-extension/pull/5256): Add mock EIP-1102 support
+- Implement EIP-712: Sign typed data, but continue to support v1. ([#4803](https://github.com/MetaMask/metamask-extension/pull/4803))
+- Restore multiple consecutive accounts with balances. ([#4898](https://github.com/MetaMask/metamask-extension/pull/4898))
+- New BlockTracker and Json-Rpc-Engine based Provider. ([#4279](https://github.com/MetaMask/metamask-extension/pull/4279))
+- Add Ledger hardware wallet support. ([#5050](https://github.com/MetaMask/metamask-extension/pull/5050))
+- Refactor and Redesign Transaction List. ([#4919](https://github.com/MetaMask/metamask-extension/pull/4919))
+- Add Transaction Details to the Transaction List view. ([#5182](https://github.com/MetaMask/metamask-extension/pull/5182))
+- Clear old seed words when importing new seed words. ([#5229](https://github.com/MetaMask/metamask-extension/pull/5229))
+- Improve click area for adjustment arrows buttons. ([#5264](https://github.com/MetaMask/metamask-extension/pull/5264))
+- Add new metamask_watchAsset method. ([#4606](https://github.com/MetaMask/metamask-extension/pull/4606))
+- Fix bug where Ropsten loading message is shown when connecting to Kovan. ([#5189](https://github.com/MetaMask/metamask-extension/pull/5189))
+- Add mock EIP-1102 support ([#5256](https://github.com/MetaMask/metamask-extension/pull/5256))
 
 ## [4.9.3] - 2018-08-16
 ### Uncategorized
-- [#4897](https://github.com/MetaMask/metamask-extension/pull/4897): QR code scan for recipient addresses.
-- [#4961](https://github.com/MetaMask/metamask-extension/pull/4961): Add a download seed phrase link.
-- [#5060](https://github.com/MetaMask/metamask-extension/pull/5060): Fix bug where gas was not updating properly.
+- QR code scan for recipient addresses. ([#4897](https://github.com/MetaMask/metamask-extension/pull/4897))
+- Add a download seed phrase link. ([#4961](https://github.com/MetaMask/metamask-extension/pull/4961))
+- Fix bug where gas was not updating properly. ([#5060](https://github.com/MetaMask/metamask-extension/pull/5060))
 
 ## [4.9.2] - 2018-08-10
 ### Uncategorized
-- [#5020](https://github.com/MetaMask/metamask-extension/pull/5020): Fix bug in migration #28 ( moving tokens to specific accounts )
+- Fix bug in migration #28 ([#5020](https://github.com/MetaMask/metamask-extension/pull/5020))
 
 ## [4.9.1] - 2018-08-09
 ### Uncategorized
-- [#4884](https://github.com/MetaMask/metamask-extension/pull/4884): Allow to have tokens per account and network.
-- [#4989](https://github.com/MetaMask/metamask-extension/pull/4989): Continue to use original signedTypedData.
-- [#5010](https://github.com/MetaMask/metamask-extension/pull/5010): Fix ENS resolution issues.
-- [#5000](https://github.com/MetaMask/metamask-extension/pull/5000): Show error while allowing confirmation of tx where simulation fails.
-- [#4995](https://github.com/MetaMask/metamask-extension/pull/4995): Shows retry button on dApp initialized transactions.
+- Allow to have tokens per account and network. ([#4884](https://github.com/MetaMask/metamask-extension/pull/4884))
+- Continue to use original signedTypedData. ([#4989](https://github.com/MetaMask/metamask-extension/pull/4989))
+- Fix ENS resolution issues. ([#5010](https://github.com/MetaMask/metamask-extension/pull/5010))
+- Show error while allowing confirmation of tx where simulation fails. ([#5000](https://github.com/MetaMask/metamask-extension/pull/5000))
+- Shows retry button on dApp initialized transactions. ([#4995](https://github.com/MetaMask/metamask-extension/pull/4995))
 
 ## [4.9.0] - 2018-08-07
 ### Uncategorized
-- [#4926](https://github.com/MetaMask/metamask-extension/pull/4926): Show retry button on the latest tx of the earliest nonce.
-- [#4888](https://github.com/MetaMask/metamask-extension/pull/4888): Suggest using the new user interface.
-- [#4947](https://github.com/MetaMask/metamask-extension/pull/4947): Prevent sending multiple transasctions on multiple confirm clicks.
-- [#4844](https://github.com/MetaMask/metamask-extension/pull/4844): Add new tokens auto detection.
-- [#4667](https://github.com/MetaMask/metamask-extension/pull/4667): Remove rejected transactions from transaction history.
-- [#4625](https://github.com/MetaMask/metamask-extension/pull/4625): Add Trezor Support.
-- [#4625](https://github.com/MetaMask/metamask-extension/pull/4625/commits/523cf9ad33d88719520ae5e7293329d133b64d4d): Allow to remove accounts (Imported and Hardware Wallets)
-- [#4814](https://github.com/MetaMask/metamask-extension/pull/4814): Add hex data input to send screen.
-- [#4691](https://github.com/MetaMask/metamask-extension/pull/4691): Redesign of the Confirm Transaction Screen.
-- [#4840](https://github.com/MetaMask/metamask-extension/pull/4840): Now shows notifications when transactions are completed.
-- [#4855](https://github.com/MetaMask/metamask-extension/pull/4855): Allow the use of HTTP prefix for custom rpc urls.
-- [#4855](https://github.com/MetaMask/metamask-extension/pull/4855): network.js: convert rpc protocol to lower case.
-- [#4898](https://github.com/MetaMask/metamask-extension/pull/4898): Restore multiple consecutive accounts with balances.
+- Show retry button on the latest tx of the earliest nonce. ([#4926](https://github.com/MetaMask/metamask-extension/pull/4926))
+- Suggest using the new user interface. ([#4888](https://github.com/MetaMask/metamask-extension/pull/4888))
+- Prevent sending multiple transasctions on multiple confirm clicks. ([#4947](https://github.com/MetaMask/metamask-extension/pull/4947))
+- Add new tokens auto detection. ([#4844](https://github.com/MetaMask/metamask-extension/pull/4844))
+- Remove rejected transactions from transaction history. ([#4667](https://github.com/MetaMask/metamask-extension/pull/4667))
+- Add Trezor Support. ([#4625](https://github.com/MetaMask/metamask-extension/pull/4625))
+- Allow to remove accounts ([#4625](https://github.com/MetaMask/metamask-extension/pull/4625/commits/523cf9ad33d88719520ae5e7293329d133b64d4d))
+- Add hex data input to send screen. ([#4814](https://github.com/MetaMask/metamask-extension/pull/4814))
+- Redesign of the Confirm Transaction Screen. ([#4691](https://github.com/MetaMask/metamask-extension/pull/4691))
+- Now shows notifications when transactions are completed. ([#4840](https://github.com/MetaMask/metamask-extension/pull/4840))
+- Allow the use of HTTP prefix for custom rpc urls. ([#4855](https://github.com/MetaMask/metamask-extension/pull/4855))
+- network.js: convert rpc protocol to lower case. ([#4855](https://github.com/MetaMask/metamask-extension/pull/4855))
+- Restore multiple consecutive accounts with balances. ([#4898](https://github.com/MetaMask/metamask-extension/pull/4898))
 
 ## [4.8.0] - 2018-06-18
 ### Uncategorized
-- [#4513](https://github.com/MetaMask/metamask-extension/pull/4513): Attempting to import an empty private key will now show a clear error.
-- [#4570](https://github.com/MetaMask/metamask-extension/pull/4570): Fix bug where metamask data would stop being written to disk after prolonged use.
-- [#4523](https://github.com/MetaMask/metamask-extension/pull/4523): Fix bug where account reset did not work with custom RPC providers.
-- [#4524](https://github.com/MetaMask/metamask-extension/pull/4524): Fix for Brave i18n getAcceptLanguages.
-- [#4557](https://github.com/MetaMask/metamask-extension/pull/4557): Fix bug where nonce mutex was never released.
-- [#4566](https://github.com/MetaMask/metamask-extension/pull/4566): Add phishing notice.
-- [#4591](https://github.com/MetaMask/metamask-extension/pull/4591): Allow Copying Token Addresses and link to Token on Etherscan.
+- Attempting to import an empty private key will now show a clear error. ([#4513](https://github.com/MetaMask/metamask-extension/pull/4513))
+- Fix bug where metamask data would stop being written to disk after prolonged use. ([#4570](https://github.com/MetaMask/metamask-extension/pull/4570))
+- Fix bug where account reset did not work with custom RPC providers. ([#4523](https://github.com/MetaMask/metamask-extension/pull/4523))
+- Fix for Brave i18n getAcceptLanguages. ([#4524](https://github.com/MetaMask/metamask-extension/pull/4524))
+- Fix bug where nonce mutex was never released. ([#4557](https://github.com/MetaMask/metamask-extension/pull/4557))
+- Add phishing notice. ([#4566](https://github.com/MetaMask/metamask-extension/pull/4566))
+- Allow Copying Token Addresses and link to Token on Etherscan. ([#4591](https://github.com/MetaMask/metamask-extension/pull/4591))
 
 ## [4.7.4] - 2018-06-05
 ### Uncategorized
diff --git a/lavamoat/node/policy.json b/lavamoat/node/policy.json
index 56892f1bf..e744f1175 100644
--- a/lavamoat/node/policy.json
+++ b/lavamoat/node/policy.json
@@ -223,6 +223,11 @@
         "js-tokens": true
       }
     },
+    "@babel/parser": {
+      "globals": {
+        "BigInt": true
+      }
+    },
     "@babel/plugin-proposal-async-generator-functions": {
       "packages": {
         "@babel/core": true,
@@ -869,6 +874,7 @@
     },
     "acorn": {
       "globals": {
+        "BigInt": true,
         "define": true
       }
     },
@@ -878,6 +884,9 @@
       }
     },
     "acorn-node": {
+      "globals": {
+        "BigInt": true
+      },
       "packages": {
         "acorn": true,
         "acorn-dynamic-import": true,
@@ -950,6 +959,16 @@
         "buffer-equal": true
       }
     },
+    "are-we-there-yet": {
+      "builtin": {
+        "events.EventEmitter": true,
+        "util.inherits": true
+      },
+      "packages": {
+        "delegates": true,
+        "readable-stream": true
+      }
+    },
     "arr-diff": {
       "packages": {
         "arr-flatten": true,
@@ -1302,6 +1321,7 @@
         "anymatch": true,
         "async-each": true,
         "braces": true,
+        "fsevents": true,
         "glob-parent": true,
         "inherits": true,
         "is-binary-path": true,
@@ -1553,6 +1573,16 @@
         "through2": true
       }
     },
+    "detect-libc": {
+      "builtin": {
+        "child_process.spawnSync": true,
+        "fs.readdirSync": true,
+        "os.platform": true
+      },
+      "globals": {
+        "process.env": true
+      }
+    },
     "detective": {
       "packages": {
         "acorn-node": true,
@@ -1640,7 +1670,10 @@
     "es-abstract": {
       "globals": {
         "AggregateError": true,
+        "Atomics": true,
+        "BigInt": true,
         "FinalizationRegistry": true,
+        "SharedArrayBuffer": true,
         "WeakRef": true
       },
       "packages": {
@@ -1993,6 +2026,45 @@
         "process.version": true
       }
     },
+    "fsevents": {
+      "builtin": {
+        "events.EventEmitter": true,
+        "fs.stat": true,
+        "path.join": true,
+        "util.inherits": true
+      },
+      "globals": {
+        "__dirname": true,
+        "process.nextTick": true,
+        "process.platform": true,
+        "setImmediate": true
+      },
+      "native": true,
+      "packages": {
+        "node-pre-gyp": true
+      }
+    },
+    "gauge": {
+      "builtin": {
+        "util.format": true
+      },
+      "globals": {
+        "clearInterval": true,
+        "process": true,
+        "setImmediate": true,
+        "setInterval": true
+      },
+      "packages": {
+        "aproba": true,
+        "console-control-strings": true,
+        "has-unicode": true,
+        "object-assign": true,
+        "signal-exit": true,
+        "string-width": true,
+        "strip-ansi": true,
+        "wide-align": true
+      }
+    },
     "get-assigned-identifiers": {
       "builtin": {
         "assert.equal": true
@@ -2373,6 +2445,16 @@
         "process.argv": true
       }
     },
+    "has-unicode": {
+      "builtin": {
+        "os.type": true
+      },
+      "globals": {
+        "process.env.LANG": true,
+        "process.env.LC_ALL": true,
+        "process.env.LC_CTYPE": true
+      }
+    },
     "has-value": {
       "packages": {
         "get-value": true,
@@ -2526,6 +2608,11 @@
         "is-plain-object": true
       }
     },
+    "is-fullwidth-code-point": {
+      "packages": {
+        "number-is-nan": true
+      }
+    },
     "is-glob": {
       "packages": {
         "is-extglob": true
@@ -2910,6 +2997,56 @@
         "setTimeout": true
       }
     },
+    "node-pre-gyp": {
+      "builtin": {
+        "events.EventEmitter": true,
+        "fs.existsSync": true,
+        "fs.readFileSync": true,
+        "fs.renameSync": true,
+        "path.dirname": true,
+        "path.existsSync": true,
+        "path.join": true,
+        "path.resolve": true,
+        "url.parse": true,
+        "url.resolve": true,
+        "util.inherits": true
+      },
+      "globals": {
+        "__dirname": true,
+        "console.log": true,
+        "process.arch": true,
+        "process.cwd": true,
+        "process.env": true,
+        "process.platform": true,
+        "process.version.substr": true,
+        "process.versions": true
+      },
+      "packages": {
+        "detect-libc": true,
+        "nopt": true,
+        "npmlog": true,
+        "rimraf": true,
+        "semver": true
+      }
+    },
+    "nopt": {
+      "builtin": {
+        "path": true,
+        "stream.Stream": true,
+        "url": true
+      },
+      "globals": {
+        "console": true,
+        "process.argv": true,
+        "process.env.DEBUG_NOPT": true,
+        "process.env.NOPT_DEBUG": true,
+        "process.platform": true
+      },
+      "packages": {
+        "abbrev": true,
+        "osenv": true
+      }
+    },
     "normalize-path": {
       "packages": {
         "remove-trailing-separator": true
@@ -2925,6 +3062,22 @@
         "once": true
       }
     },
+    "npmlog": {
+      "builtin": {
+        "events.EventEmitter": true,
+        "util": true
+      },
+      "globals": {
+        "process.nextTick": true,
+        "process.stderr": true
+      },
+      "packages": {
+        "are-we-there-yet": true,
+        "console-control-strings": true,
+        "gauge": true,
+        "set-blocking": true
+      }
+    },
     "object-copy": {
       "packages": {
         "copy-descriptor": true,
@@ -2937,6 +3090,7 @@
         "util.inspect": true
       },
       "globals": {
+        "BigInt": true,
         "HTMLElement": true
       }
     },
@@ -2991,6 +3145,54 @@
         "readable-stream": true
       }
     },
+    "os-homedir": {
+      "builtin": {
+        "os.homedir": true
+      },
+      "globals": {
+        "process.env": true,
+        "process.getuid": true,
+        "process.platform": true
+      }
+    },
+    "os-tmpdir": {
+      "globals": {
+        "process.env.SystemRoot": true,
+        "process.env.TEMP": true,
+        "process.env.TMP": true,
+        "process.env.TMPDIR": true,
+        "process.env.windir": true,
+        "process.platform": true
+      }
+    },
+    "osenv": {
+      "builtin": {
+        "child_process.exec": true,
+        "path": true
+      },
+      "globals": {
+        "process.env.COMPUTERNAME": true,
+        "process.env.ComSpec": true,
+        "process.env.EDITOR": true,
+        "process.env.HOSTNAME": true,
+        "process.env.PATH": true,
+        "process.env.PROMPT": true,
+        "process.env.PS1": true,
+        "process.env.Path": true,
+        "process.env.SHELL": true,
+        "process.env.USER": true,
+        "process.env.USERDOMAIN": true,
+        "process.env.USERNAME": true,
+        "process.env.VISUAL": true,
+        "process.env.path": true,
+        "process.nextTick": true,
+        "process.platform": true
+      },
+      "packages": {
+        "os-homedir": true,
+        "os-tmpdir": true
+      }
+    },
     "parent-module": {
       "packages": {
         "callsites": true
@@ -3573,6 +3775,12 @@
         "process": true
       }
     },
+    "set-blocking": {
+      "globals": {
+        "process.stderr": true,
+        "process.stdout": true
+      }
+    },
     "set-value": {
       "packages": {
         "extend-shallow": true,
@@ -3766,6 +3974,7 @@
     },
     "string-width": {
       "packages": {
+        "code-point-at": true,
         "emoji-regex": true,
         "is-fullwidth-code-point": true,
         "strip-ansi": true
@@ -4322,6 +4531,11 @@
         "isexe": true
       }
     },
+    "wide-align": {
+      "packages": {
+        "string-width": true
+      }
+    },
     "write": {
       "builtin": {
         "fs.createWriteStream": true,
diff --git a/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js b/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
index cb867c98b..b2f619ac7 100644
--- a/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
+++ b/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
@@ -118,7 +118,6 @@ const mapStateToProps = (state, ownProps) => {
   const isTestnet = getIsTestnet(state);
   const showFiat = getShouldShowFiat(state);
 
-
   const newTotalEth =
     maxModeOn && asset.type === ASSET_TYPES.NATIVE
       ? sumHexWEIsToRenderableEth([balance, '0x0'])

From e488f61a21636550b0247bb70bf0aef5b6e89cad Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Fri, 25 Jun 2021 16:31:01 -0500
Subject: [PATCH 053/141] fix jest tests to run ui tests (#11390)

---
 jest.config.js | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/jest.config.js b/jest.config.js
index f236fbb90..8e215b994 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -2,11 +2,7 @@ module.exports = {
   restoreMocks: true,
   coverageDirectory: 'jest-coverage/',
   collectCoverageFrom: ['<rootDir>/ui/**/swaps/**'],
-  coveragePathIgnorePatterns: [
-    '.stories.js',
-    '.snap',
-    '**/shared/**/?(*.)+(test).js',
-  ],
+  coveragePathIgnorePatterns: ['.stories.js', '.snap'],
   coverageThreshold: {
     global: {
       branches: 32.75,
@@ -17,5 +13,8 @@ module.exports = {
   },
   setupFiles: ['./test/setup.js', './test/env.js'],
   setupFilesAfterEnv: ['./test/jest/setup.js'],
-  testMatch: ['ui/**/?(*.)+(test).js', '**/shared/**/?(*.)+(test).js'],
+  testMatch: [
+    '<rootDir>/ui/**/?(*.)+(test).js',
+    '<rootDir>/shared/**/?(*.)+(test).js',
+  ],
 };

From d68f8f27c6c2c363ce29b3acc5ffd7412928396e Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Mon, 28 Jun 2021 09:45:08 -0500
Subject: [PATCH 054/141] Implements the new EIP1559 UI components (#11384)

---
 app/_locales/en/messages.json                 |  42 +++++++
 development/build/scripts.js                  |   4 +-
 .../advanced-gas-controls.component.js        | 110 ++++++++++--------
 ui/components/app/app-components.scss         |   1 +
 .../edit-gas-display-education.component.js   |  69 +++++++++++
 .../edit-gas-display-education.stories.js     |  14 +++
 .../app/edit-gas-display-education/index.js   |   1 +
 .../app/edit-gas-display-education/index.scss |   5 +
 .../edit-gas-display.component.js             | 104 +++++++++++++++++
 .../app/edit-gas-display/edit-gas-display.js  |  45 -------
 .../edit-gas-display.stories.js               |  18 +--
 ui/components/app/edit-gas-display/index.js   |   2 +-
 ui/components/app/edit-gas-display/index.scss |  28 +++++
 .../edit-gas-popover.component.js             |  83 +++++++++++++
 .../edit-gas-popover.stories.js               |  30 +++++
 ui/components/app/edit-gas-popover/index.js   |   1 +
 ui/components/app/modals/modal.js             |   7 +-
 .../app/sidebars/sidebar.component.js         |  30 ++++-
 .../confirm-transaction-base.component.js     |  39 ++++---
 19 files changed, 502 insertions(+), 131 deletions(-)
 create mode 100644 ui/components/app/edit-gas-display-education/edit-gas-display-education.component.js
 create mode 100644 ui/components/app/edit-gas-display-education/edit-gas-display-education.stories.js
 create mode 100644 ui/components/app/edit-gas-display-education/index.js
 create mode 100644 ui/components/app/edit-gas-display-education/index.scss
 create mode 100644 ui/components/app/edit-gas-display/edit-gas-display.component.js
 delete mode 100644 ui/components/app/edit-gas-display/edit-gas-display.js
 create mode 100644 ui/components/app/edit-gas-popover/edit-gas-popover.component.js
 create mode 100644 ui/components/app/edit-gas-popover/edit-gas-popover.stories.js
 create mode 100644 ui/components/app/edit-gas-popover/index.js

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 521cebef2..14dd7ba9f 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -617,6 +617,39 @@
   "editContact": {
     "message": "Edit Contact"
   },
+  "editGasEducationButtonText": {
+    "message": "How should I choose?"
+  },
+  "editGasEducationHighExplanation": {
+    "message": "This is best for swaps or other time sensitive transactions. If a swap takes too long to process it will often fail and you may lose funds."
+  },
+  "editGasEducationLearnMoreLinkText": {
+    "message": "Learn more about customizing gas."
+  },
+  "editGasEducationLowExplanation": {
+    "message": "Low A lower gas fee should only be selected for transactions where processing time is less important. With a lower fee, it can be be hard to predict when (or if) your transaction with be successful."
+  },
+  "editGasEducationMediumExplanation": {
+    "message": "A medium gas fee is good for sending, withdrawing or other non-time sensitive but important transactions."
+  },
+  "editGasEducationModalIntro": {
+    "message": "The right gas amount to select depends on the type of transaction and how important it is."
+  },
+  "editGasEducationModalTitle": {
+    "message": "How to choose?"
+  },
+  "editGasHigh": {
+    "message": "High"
+  },
+  "editGasLow": {
+    "message": "Low"
+  },
+  "editGasMedium": {
+    "message": "Medium"
+  },
+  "editGasTitle": {
+    "message": "Edit gas fee"
+  },
   "editNonceField": {
     "message": "Edit Nonce"
   },
@@ -1817,6 +1850,15 @@
   "speedUpCancellation": {
     "message": "Speed up this cancellation"
   },
+  "speedUpExplanation": {
+    "message": "We’ve restimated the gas fee based on current network conditions and have increased it by at least 10% (required by the network)."
+  },
+  "speedUpPopoverTitle": {
+    "message": "Speed up transaction"
+  },
+  "speedUpTooltipText": {
+    "message": "New gas fee"
+  },
   "speedUpTransaction": {
     "message": "Speed up this transaction"
   },
diff --git a/development/build/scripts.js b/development/build/scripts.js
index 7fa0595e1..50fa4f8db 100644
--- a/development/build/scripts.js
+++ b/development/build/scripts.js
@@ -433,7 +433,9 @@ function getEnvironmentVariables({ devMode, testing }) {
     PUBNUB_SUB_KEY: process.env.PUBNUB_SUB_KEY || '',
     PUBNUB_PUB_KEY: process.env.PUBNUB_PUB_KEY || '',
     CONF: devMode ? metamaskrc : {},
-    SHOW_EIP_1559_UI: process.env.SHOW_EIP_1559_UI === '1',
+    SHOW_EIP_1559_UI:
+      process.env.SHOW_EIP_1559_UI === '1' ||
+      metamaskrc.SHOW_EIP_1559_UI === '1',
     SENTRY_DSN: process.env.SENTRY_DSN,
     SENTRY_DSN_DEV: metamaskrc.SENTRY_DSN_DEV,
     INFURA_PROJECT_ID: testing
diff --git a/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js b/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js
index 7231d67a0..5ba93e06c 100644
--- a/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js
+++ b/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js
@@ -1,4 +1,5 @@
 import React, { useContext, useState } from 'react';
+
 import { I18nContext } from '../../../contexts/i18n';
 import Typography from '../../ui/typography/typography';
 import {
@@ -15,6 +16,9 @@ export default function AdvancedGasControls() {
   const [maxPriorityFee, setMaxPriorityFee] = useState(0);
   const [maxFee, setMaxFee] = useState(0);
 
+  // Used in legacy version
+  const [gasPrice, setGasPrice] = useState(0);
+
   return (
     <div className="advanced-gas-controls">
       <AdvancedGasControlsRow
@@ -24,52 +28,66 @@ export default function AdvancedGasControls() {
         titleDetailText=""
         value={gasLimit}
       />
-      <AdvancedGasControlsRow
-        titleText={t('maxPriorityFee')}
-        tooltipText=""
-        onChange={setMaxPriorityFee}
-        value={maxPriorityFee}
-        titleDetailText={
-          <>
-            <Typography
-              tag="span"
-              color={COLORS.UI4}
-              variant={TYPOGRAPHY.H8}
-              fontWeight={FONT_WEIGHT.BOLD}
-            >
-              {t('gasFeeEstimate')}:
-            </Typography>{' '}
-            <Typography
-              tag="span"
-              color={COLORS.UI4}
-              variant={TYPOGRAPHY.H8}
-            ></Typography>
-          </>
-        }
-      />
-      <AdvancedGasControlsRow
-        titleText={t('maxFee')}
-        tooltipText=""
-        onChange={setMaxFee}
-        value={maxFee}
-        titleDetailText={
-          <>
-            <Typography
-              tag="span"
-              color={COLORS.UI4}
-              variant={TYPOGRAPHY.H8}
-              fontWeight={FONT_WEIGHT.BOLD}
-            >
-              {t('gasFeeEstimate')}:
-            </Typography>{' '}
-            <Typography
-              tag="span"
-              color={COLORS.UI4}
-              variant={TYPOGRAPHY.H8}
-            ></Typography>
-          </>
-        }
-      />
+      {process.env.SHOW_EIP_1559_UI ? (
+        <>
+          <AdvancedGasControlsRow
+            titleText={t('maxPriorityFee')}
+            tooltipText=""
+            onChange={setMaxPriorityFee}
+            value={maxPriorityFee}
+            titleDetailText={
+              <>
+                <Typography
+                  tag="span"
+                  color={COLORS.UI4}
+                  variant={TYPOGRAPHY.H8}
+                  fontWeight={FONT_WEIGHT.BOLD}
+                >
+                  {t('gasFeeEstimate')}:
+                </Typography>{' '}
+                <Typography
+                  tag="span"
+                  color={COLORS.UI4}
+                  variant={TYPOGRAPHY.H8}
+                ></Typography>
+              </>
+            }
+          />
+          <AdvancedGasControlsRow
+            titleText={t('maxFee')}
+            tooltipText=""
+            onChange={setMaxFee}
+            value={maxFee}
+            titleDetailText={
+              <>
+                <Typography
+                  tag="span"
+                  color={COLORS.UI4}
+                  variant={TYPOGRAPHY.H8}
+                  fontWeight={FONT_WEIGHT.BOLD}
+                >
+                  {t('gasFeeEstimate')}:
+                </Typography>{' '}
+                <Typography
+                  tag="span"
+                  color={COLORS.UI4}
+                  variant={TYPOGRAPHY.H8}
+                ></Typography>
+              </>
+            }
+          />
+        </>
+      ) : (
+        <>
+          <AdvancedGasControlsRow
+            titleText={t('gasPrice')}
+            onChange={setGasPrice}
+            tooltipText=""
+            titleDetailText=""
+            value={gasPrice}
+          />
+        </>
+      )}
     </div>
   );
 }
diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss
index 8f1e3926c..ab36b4b96 100644
--- a/ui/components/app/app-components.scss
+++ b/ui/components/app/app-components.scss
@@ -12,6 +12,7 @@
 @import 'connected-sites-list/index';
 @import 'connected-status-indicator/index';
 @import 'edit-gas-display/index';
+@import 'edit-gas-display-education/index';
 @import 'gas-customization/gas-modal-page-container/index';
 @import 'gas-customization/gas-price-button-group/index';
 @import 'gas-customization/index';
diff --git a/ui/components/app/edit-gas-display-education/edit-gas-display-education.component.js b/ui/components/app/edit-gas-display-education/edit-gas-display-education.component.js
new file mode 100644
index 000000000..3b0ce0c17
--- /dev/null
+++ b/ui/components/app/edit-gas-display-education/edit-gas-display-education.component.js
@@ -0,0 +1,69 @@
+import React, { useContext } from 'react';
+
+import Typography from '../../ui/typography/typography';
+import {
+  COLORS,
+  TYPOGRAPHY,
+  FONT_WEIGHT,
+} from '../../../helpers/constants/design-system';
+
+import { I18nContext } from '../../../contexts/i18n';
+
+export default function EditGasDisplayEducation() {
+  const t = useContext(I18nContext);
+
+  return (
+    <div className="edit-gas-display-education">
+      <Typography
+        color={COLORS.BLACK}
+        variant={TYPOGRAPHY.H4}
+        fontWeight={FONT_WEIGHT.BOLD}
+      >
+        {t('editGasEducationModalTitle')}
+      </Typography>
+      <Typography tag="p" color={COLORS.UI4} variant={TYPOGRAPHY.H6}>
+        {t('editGasEducationModalIntro')}
+      </Typography>
+      <Typography
+        color={COLORS.BLACK}
+        variant={TYPOGRAPHY.h6}
+        fontWeight={FONT_WEIGHT.BOLD}
+      >
+        {t('editGasHigh')}
+      </Typography>
+      <Typography tag="p" color={COLORS.UI4} variant={TYPOGRAPHY.H6}>
+        {t('editGasEducationHighExplanation')}
+      </Typography>
+      <Typography
+        color={COLORS.BLACK}
+        variant={TYPOGRAPHY.h6}
+        fontWeight={FONT_WEIGHT.BOLD}
+      >
+        {t('editGasMedium')}
+      </Typography>
+      <Typography tag="p" color={COLORS.UI4} variant={TYPOGRAPHY.H6}>
+        {t('editGasEducationMediumExplanation')}
+      </Typography>
+      <Typography
+        color={COLORS.BLACK}
+        variant={TYPOGRAPHY.h6}
+        fontWeight={FONT_WEIGHT.BOLD}
+      >
+        {t('editGasLow')}
+      </Typography>
+      <Typography tag="p" color={COLORS.UI4} variant={TYPOGRAPHY.H6}>
+        {t('editGasEducationLowExplanation')}
+      </Typography>
+      <Typography tag="p" variant={TYPOGRAPHY.H6}>
+        <a
+          style={{ color: COLORS.PRIMARY1 }}
+          href=""
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {t('editGasEducationLearnMoreLinkText')}
+        </a>
+      </Typography>
+    </div>
+  );
+}
diff --git a/ui/components/app/edit-gas-display-education/edit-gas-display-education.stories.js b/ui/components/app/edit-gas-display-education/edit-gas-display-education.stories.js
new file mode 100644
index 000000000..aed0fa9c8
--- /dev/null
+++ b/ui/components/app/edit-gas-display-education/edit-gas-display-education.stories.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import EditGasDisplayEducation from '.';
+
+export default {
+  title: 'Edit Gas Display',
+};
+
+export const basic = () => {
+  return (
+    <div style={{ width: '600px' }}>
+      <EditGasDisplayEducation />
+    </div>
+  );
+};
diff --git a/ui/components/app/edit-gas-display-education/index.js b/ui/components/app/edit-gas-display-education/index.js
new file mode 100644
index 000000000..dec57af8b
--- /dev/null
+++ b/ui/components/app/edit-gas-display-education/index.js
@@ -0,0 +1 @@
+export { default } from './edit-gas-display-education.component';
diff --git a/ui/components/app/edit-gas-display-education/index.scss b/ui/components/app/edit-gas-display-education/index.scss
new file mode 100644
index 000000000..dc8d39fd8
--- /dev/null
+++ b/ui/components/app/edit-gas-display-education/index.scss
@@ -0,0 +1,5 @@
+.edit-gas-display-education {
+  a {
+    color: $primary-1;
+  }
+}
diff --git a/ui/components/app/edit-gas-display/edit-gas-display.component.js b/ui/components/app/edit-gas-display/edit-gas-display.component.js
new file mode 100644
index 000000000..710bc1323
--- /dev/null
+++ b/ui/components/app/edit-gas-display/edit-gas-display.component.js
@@ -0,0 +1,104 @@
+import React, { useState, useContext } from 'react';
+import PropTypes from 'prop-types';
+
+import Typography from '../../ui/typography/typography';
+import {
+  COLORS,
+  TYPOGRAPHY,
+  FONT_WEIGHT,
+} from '../../../helpers/constants/design-system';
+
+import InfoTooltip from '../../ui/info-tooltip';
+import TransactionTotalBanner from '../transaction-total-banner/transaction-total-banner.component';
+import RadioGroup from '../../ui/radio-group/radio-group.component';
+import AdvancedGasControls from '../advanced-gas-controls/advanced-gas-controls.component';
+
+import { I18nContext } from '../../../contexts/i18n';
+import ActionableMessage from '../../../pages/swaps/actionable-message';
+
+export default function EditGasDisplay({
+  alwaysShowForm,
+  type,
+  showEducationButton,
+  onEducationClick,
+}) {
+  const t = useContext(I18nContext);
+
+  const [warning] = useState(null);
+  const [showAdvancedForm, setShowAdvancedForm] = useState(false);
+
+  return (
+    <div className="edit-gas-display">
+      <div className="edit-gas-display__content">
+        {warning && (
+          <div className="edit-gas-display__warning">
+            <ActionableMessage
+              className="actionable-message--warning"
+              message="Swaps are time sensitive. “Medium” is not reccomended."
+            />
+          </div>
+        )}
+        {type === 'speed-up' && (
+          <div className="edit-gas-display__top-tooltip">
+            <Typography
+              color={COLORS.BLACK}
+              variant={TYPOGRAPHY.H8}
+              fontWeight={FONT_WEIGHT.BOLD}
+            >
+              {t('speedUpTooltipText')}{' '}
+              <InfoTooltip
+                position="top"
+                contentText={t('speedUpExplanation')}
+              />
+            </Typography>
+          </div>
+        )}
+        <TransactionTotalBanner total="" detail="" timing="" />
+        <RadioGroup
+          name="gas-recommendation"
+          options={[
+            { value: 'low', label: t('editGasLow'), recommended: false },
+            { value: 'medium', label: t('editGasMedium'), recommended: false },
+            { value: 'high', label: t('editGasHigh'), recommended: true },
+          ]}
+          selectedValue="high"
+        />
+        {!alwaysShowForm && (
+          <button
+            className="edit-gas-display__advanced-button"
+            onClick={() => setShowAdvancedForm(!showAdvancedForm)}
+          >
+            {t('advancedOptions')}{' '}
+            {showAdvancedForm ? (
+              <i className="fa fa-caret-up"></i>
+            ) : (
+              <i className="fa fa-caret-down"></i>
+            )}
+          </button>
+        )}
+        {(alwaysShowForm || showAdvancedForm) && <AdvancedGasControls />}
+      </div>
+      {showEducationButton && (
+        <div className="edit-gas-display__education">
+          <button onClick={onEducationClick}>
+            {t('editGasEducationButtonText')}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+EditGasDisplay.propTypes = {
+  alwaysShowForm: PropTypes.bool,
+  type: PropTypes.oneOf(['customize-gas', 'speed-up']),
+  showEducationButton: PropTypes.bool,
+  onEducationClick: PropTypes.func,
+};
+
+EditGasDisplay.defaultProps = {
+  alwaysShowForm: false,
+  type: 'customize-gas',
+  showEducationButton: false,
+  onEducationClick: undefined,
+};
diff --git a/ui/components/app/edit-gas-display/edit-gas-display.js b/ui/components/app/edit-gas-display/edit-gas-display.js
deleted file mode 100644
index 4911633e2..000000000
--- a/ui/components/app/edit-gas-display/edit-gas-display.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { useState, useContext } from 'react';
-
-import TransactionTotalBanner from '../transaction-total-banner/transaction-total-banner.component';
-import RadioGroup from '../../ui/radio-group/radio-group.component';
-
-import AdvancedGasControls from '../advanced-gas-controls/advanced-gas-controls.component';
-
-import { I18nContext } from '../../../contexts/i18n';
-
-export default function EditGasDisplay() {
-  const t = useContext(I18nContext);
-  const [showAdvancedForm, setShowAdvancedForm] = useState(false);
-
-  return (
-    <div className="edit-gas-display">
-      <TransactionTotalBanner
-        total="9.99"
-        detail="Up to $17.79 (0.01234 ETH)"
-        timing="Likely in < 30 seconds
-"
-      />
-      <RadioGroup
-        name="gas-recommendation"
-        options={[
-          { value: 'low', label: 'Low', recommended: false },
-          { value: 'medium', label: 'Medium', recommended: false },
-          { value: 'high', label: 'High', recommended: true },
-        ]}
-        selectedValue="high"
-      />
-      <button
-        className="edit-gas-display__advanced-button"
-        onClick={() => setShowAdvancedForm(!showAdvancedForm)}
-      >
-        {t('advancedOptions')}{' '}
-        {showAdvancedForm ? (
-          <i className="fa fa-caret-up"></i>
-        ) : (
-          <i className="fa fa-caret-down"></i>
-        )}
-      </button>
-      {showAdvancedForm && <AdvancedGasControls />}
-    </div>
-  );
-}
diff --git a/ui/components/app/edit-gas-display/edit-gas-display.stories.js b/ui/components/app/edit-gas-display/edit-gas-display.stories.js
index a3f85ba5a..35947b93d 100644
--- a/ui/components/app/edit-gas-display/edit-gas-display.stories.js
+++ b/ui/components/app/edit-gas-display/edit-gas-display.stories.js
@@ -1,6 +1,4 @@
 import React from 'react';
-import PopoverPortal from '../../ui/popover/popover.component';
-import Button from '../../ui/button';
 import EditGasDisplay from '.';
 
 export default {
@@ -15,22 +13,10 @@ export const basic = () => {
   );
 };
 
-export const insidePopover = () => {
+export const withEducation = () => {
   return (
     <div style={{ width: '600px' }}>
-      <PopoverPortal
-        title="Edit gas fee"
-        onClose={() => console.log('Closing!')}
-        footer={
-          <>
-            <Button type="primary">Save</Button>
-          </>
-        }
-      >
-        <div style={{ padding: '20px' }}>
-          <EditGasDisplay />
-        </div>
-      </PopoverPortal>
+      <EditGasDisplay showEducationButton />
     </div>
   );
 };
diff --git a/ui/components/app/edit-gas-display/index.js b/ui/components/app/edit-gas-display/index.js
index 05c4488a9..d2f752891 100644
--- a/ui/components/app/edit-gas-display/index.js
+++ b/ui/components/app/edit-gas-display/index.js
@@ -1 +1 @@
-export { default } from './edit-gas-display';
+export { default } from './edit-gas-display.component';
diff --git a/ui/components/app/edit-gas-display/index.scss b/ui/components/app/edit-gas-display/index.scss
index f8422eee8..95326868c 100644
--- a/ui/components/app/edit-gas-display/index.scss
+++ b/ui/components/app/edit-gas-display/index.scss
@@ -1,4 +1,21 @@
 .edit-gas-display {
+  & .actionable-message--warning {
+    margin-top: 0;
+  }
+
+  &__top-tooltip {
+    text-align: center;
+
+    .info-tooltip {
+      display: inline-block;
+
+      img {
+        height: 10px;
+        width: 10px;
+      }
+    }
+  }
+
   .radio-group {
     margin: 20px auto;
   }
@@ -14,4 +31,15 @@
   .advanced-gas-controls {
     margin-top: 20px;
   }
+
+  &__education {
+    margin-top: 20px;
+
+    button {
+      display: block;
+      margin: 0 auto;
+      background: transparent;
+      color: $primary-1;
+    }
+  }
 }
diff --git a/ui/components/app/edit-gas-popover/edit-gas-popover.component.js b/ui/components/app/edit-gas-popover/edit-gas-popover.component.js
new file mode 100644
index 000000000..76810dcfc
--- /dev/null
+++ b/ui/components/app/edit-gas-popover/edit-gas-popover.component.js
@@ -0,0 +1,83 @@
+import React, { useCallback, useContext, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { useDispatch, useSelector } from 'react-redux';
+import Popover from '../../ui/popover';
+import Button from '../../ui/button';
+import EditGasDisplay from '../edit-gas-display';
+import EditGasDisplayEducation from '../edit-gas-display-education';
+
+import { I18nContext } from '../../../contexts/i18n';
+import { hideModal, hideSidebar } from '../../../store/actions';
+
+export default function EditGasPopover({
+  popoverTitle,
+  confirmButtonText,
+  editGasDisplayProps,
+}) {
+  const t = useContext(I18nContext);
+  const dispatch = useDispatch();
+  const showSidebar = useSelector((state) => state.appState.sidebar.isOpen);
+  const [showEducationContent, setShowEducationContent] = useState(false);
+
+  /**
+   * Temporary placeholder, this should be managed by the parent component but
+   * we will be extracting this component from the hard to maintain modal/
+   * sidebar component. For now this is just to be able to appropriately close
+   * the modal in testing
+   */
+  const closePopover = useCallback(() => {
+    if (showSidebar) {
+      dispatch(hideSidebar());
+    } else {
+      dispatch(hideModal());
+    }
+  }, [showSidebar, dispatch]);
+
+  const title = showEducationContent
+    ? t('editGasEducationModalTitle')
+    : popoverTitle || t('editGasTitle');
+  const footerButtonText = confirmButtonText || t('save');
+
+  return (
+    <Popover
+      title={title}
+      onClose={closePopover}
+      onBack={
+        showEducationContent ? () => setShowEducationContent(false) : undefined
+      }
+      footer={
+        <>
+          <Button type="primary" onClick={closePopover}>
+            {footerButtonText}
+          </Button>
+        </>
+      }
+    >
+      <div style={{ padding: '0 20px 20px 20px' }}>
+        {showEducationContent ? (
+          <EditGasDisplayEducation />
+        ) : (
+          <EditGasDisplay
+            {...editGasDisplayProps}
+            onEducationClick={() => setShowEducationContent(true)}
+          />
+        )}
+      </div>
+    </Popover>
+  );
+}
+
+EditGasPopover.propTypes = {
+  popoverTitle: PropTypes.string,
+  editGasDisplayProps: PropTypes.object,
+  confirmButtonText: PropTypes.string,
+  showEducationButton: PropTypes.bool,
+};
+
+EditGasPopover.defaultProps = {
+  popoverTitle: '',
+  editGasDisplayProps: {},
+  confirmButtonText: '',
+  showEducationButton: false,
+};
diff --git a/ui/components/app/edit-gas-popover/edit-gas-popover.stories.js b/ui/components/app/edit-gas-popover/edit-gas-popover.stories.js
new file mode 100644
index 000000000..76c7dafae
--- /dev/null
+++ b/ui/components/app/edit-gas-popover/edit-gas-popover.stories.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import EditGasPopover from '.';
+
+export default {
+  title: 'Edit Gas Display Popover',
+};
+
+export const basic = () => {
+  return (
+    <div style={{ width: '600px' }}>
+      <EditGasPopover />
+    </div>
+  );
+};
+
+export const basicWithDifferentButtonText = () => {
+  return (
+    <div style={{ width: '600px' }}>
+      <EditGasPopover confirmButtonText="Custom Value" />
+    </div>
+  );
+};
+
+export const educationalContentFlow = () => {
+  return (
+    <div style={{ width: '600px' }}>
+      <EditGasPopover editGasDisplayProps={{ showEducationButton: true }} />
+    </div>
+  );
+};
diff --git a/ui/components/app/edit-gas-popover/index.js b/ui/components/app/edit-gas-popover/index.js
new file mode 100644
index 000000000..98a908824
--- /dev/null
+++ b/ui/components/app/edit-gas-popover/index.js
@@ -0,0 +1 @@
+export { default } from './edit-gas-popover.component';
diff --git a/ui/components/app/modals/modal.js b/ui/components/app/modals/modal.js
index ce4282df3..96352bc19 100644
--- a/ui/components/app/modals/modal.js
+++ b/ui/components/app/modals/modal.js
@@ -11,6 +11,7 @@ import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app';
 // Modal Components
 import ConfirmCustomizeGasModal from '../gas-customization/gas-modal-page-container';
 import SwapsGasCustomizationModal from '../../../pages/swaps/swaps-gas-customization-modal';
+import EditGasPopover from '../edit-gas-popover/edit-gas-popover.component';
 import DepositEtherModal from './deposit-ether-modal';
 import AccountDetailsModal from './account-details-modal';
 import ExportPrivateKeyModal from './export-private-key-modal';
@@ -246,7 +247,11 @@ const MODALS = {
   },
 
   CUSTOMIZE_GAS: {
-    contents: <ConfirmCustomizeGasModal />,
+    contents: process.env.SHOW_EIP_1559_UI ? (
+      <EditGasPopover />
+    ) : (
+      <ConfirmCustomizeGasModal />
+    ),
     mobileModalStyle: {
       width: '100vw',
       height: '100vh',
diff --git a/ui/components/app/sidebars/sidebar.component.js b/ui/components/app/sidebars/sidebar.component.js
index 45be23b50..1efd03c41 100644
--- a/ui/components/app/sidebars/sidebar.component.js
+++ b/ui/components/app/sidebars/sidebar.component.js
@@ -4,6 +4,8 @@ import ReactCSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
 import CustomizeGas from '../gas-customization/gas-modal-page-container';
 import { MILLISECOND } from '../../../../shared/constants/time';
 
+import EditGasPopover from '../edit-gas-popover/edit-gas-popover.component';
+
 export default class Sidebar extends Component {
   static propTypes = {
     sidebarOpen: PropTypes.bool,
@@ -15,6 +17,10 @@ export default class Sidebar extends Component {
     onOverlayClose: PropTypes.func,
   };
 
+  static contextTypes = {
+    t: PropTypes.func,
+  };
+
   renderOverlay() {
     const { onOverlayClose } = this.props;
 
@@ -48,6 +54,18 @@ export default class Sidebar extends Component {
     }
   }
 
+  renderGasPopover() {
+    const { t } = this.context;
+
+    return (
+      <EditGasPopover
+        popoverTitle={t('speedUpPopoverTitle')}
+        editGasDisplayProps={{ alwaysShowForm: true, type: 'speed-up' }}
+        confirmButtonText={t('submit')}
+      />
+    );
+  }
+
   componentDidUpdate(prevProps) {
     if (!prevProps.sidebarShouldClose && this.props.sidebarShouldClose) {
       this.props.hideSidebar();
@@ -57,6 +75,12 @@ export default class Sidebar extends Component {
   render() {
     const { transitionName, sidebarOpen, sidebarShouldClose } = this.props;
 
+    const showSidebar = sidebarOpen && !sidebarShouldClose;
+
+    if (showSidebar && process.env.SHOW_EIP_1559_UI) {
+      return this.renderGasPopover();
+    }
+
     return (
       <div>
         <ReactCSSTransitionGroup
@@ -64,11 +88,9 @@ export default class Sidebar extends Component {
           transitionEnterTimeout={MILLISECOND * 300}
           transitionLeaveTimeout={MILLISECOND * 200}
         >
-          {sidebarOpen && !sidebarShouldClose
-            ? this.renderSidebarContent()
-            : null}
+          {showSidebar ? this.renderSidebarContent() : null}
         </ReactCSSTransitionGroup>
-        {sidebarOpen && !sidebarShouldClose ? this.renderOverlay() : null}
+        {showSidebar ? this.renderOverlay() : null}
       </div>
     );
   }
diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
index 6c631b921..cb820a874 100644
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -22,6 +22,7 @@ import { PRIMARY, SECONDARY } from '../../helpers/constants/common';
 import { hexToDecimal } from '../../helpers/utils/conversions.util';
 import AdvancedGasInputs from '../../components/app/gas-customization/advanced-gas-inputs';
 import TextField from '../../components/ui/text-field';
+import AdvancedGasControls from '../../components/app/advanced-gas-controls';
 import {
   TRANSACTION_TYPES,
   TRANSACTION_STATUSES,
@@ -283,6 +284,24 @@ export default class ConfirmTransactionBase extends Component {
     const notMainnetOrTest = !(isMainnet || process.env.IN_TEST);
     const gasPriceFetchFailure = isEthGasPrice || noGasPrice;
 
+    const inlineGasControls = process.env.SHOW_EIP_1559_UI ? (
+      <AdvancedGasControls />
+    ) : (
+      <AdvancedGasInputs
+        updateCustomGasPrice={(newGasPrice) =>
+          updateGasAndCalculate({ ...customGas, gasPrice: newGasPrice })
+        }
+        updateCustomGasLimit={(newGasLimit) =>
+          updateGasAndCalculate({ ...customGas, gasLimit: newGasLimit })
+        }
+        customGasPrice={customGas.gasPrice}
+        customGasLimit={customGas.gasLimit}
+        insufficientBalance={insufficientBalance}
+        customPriceIsSafe
+        isSpeedUp={false}
+      />
+    );
+
     return (
       <div className="confirm-page-container-content__details">
         <div className="confirm-page-container-content__gas-fee">
@@ -304,23 +323,9 @@ export default class ConfirmTransactionBase extends Component {
               hideFiatConversion ? t('noConversionRateAvailable') : ''
             }
           />
-          {advancedInlineGasShown ||
-          notMainnetOrTest ||
-          gasPriceFetchFailure ? (
-            <AdvancedGasInputs
-              updateCustomGasPrice={(newGasPrice) =>
-                updateGasAndCalculate({ ...customGas, gasPrice: newGasPrice })
-              }
-              updateCustomGasLimit={(newGasLimit) =>
-                updateGasAndCalculate({ ...customGas, gasLimit: newGasLimit })
-              }
-              customGasPrice={customGas.gasPrice}
-              customGasLimit={customGas.gasLimit}
-              insufficientBalance={insufficientBalance}
-              customPriceIsSafe
-              isSpeedUp={false}
-            />
-          ) : null}
+          {advancedInlineGasShown || notMainnetOrTest || gasPriceFetchFailure
+            ? inlineGasControls
+            : null}
           {noGasPrice ? (
             <div className="confirm-page-container-content__error-container">
               <ErrorMessage errorKey={GAS_PRICE_FETCH_FAILURE_ERROR_KEY} />

From dd1330c7074e319efa7344a5389f45c5dd992837 Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Mon, 28 Jun 2021 10:22:59 -0500
Subject: [PATCH 055/141] Remove gasPrice defaults for eip-1559 txs (#11391)

---
 app/scripts/controllers/transactions/index.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/scripts/controllers/transactions/index.js b/app/scripts/controllers/transactions/index.js
index 3f10c4ba3..18d625f3e 100644
--- a/app/scripts/controllers/transactions/index.js
+++ b/app/scripts/controllers/transactions/index.js
@@ -376,7 +376,12 @@ export default class TransactionController extends EventEmitter {
     if (simulationFails) {
       txMeta.simulationFails = simulationFails;
     }
-    if (defaultGasPrice && !txMeta.txParams.gasPrice) {
+    if (
+      defaultGasPrice &&
+      !txMeta.txParams.gasPrice &&
+      !txMeta.txParams.maxPriorityFeePerGas &&
+      !txMeta.txParams.maxFeePerGas
+    ) {
       txMeta.txParams.gasPrice = defaultGasPrice;
     }
     if (defaultGasLimit && !txMeta.txParams.gas) {
@@ -391,7 +396,10 @@ export default class TransactionController extends EventEmitter {
    * @returns {Promise<string|undefined>} The default gas price
    */
   async _getDefaultGasPrice(txMeta) {
-    if (txMeta.txParams.gasPrice) {
+    if (
+      txMeta.txParams.gasPrice ||
+      (txMeta.txParams.maxFeePerGas && txMeta.txParams.maxPriorityFeePerGas)
+    ) {
       return undefined;
     }
     const gasPrice = await this.query.gasPrice();

From 80e755afcbbbe537f0976cdd7a2bf4d74433a5f0 Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Mon, 28 Jun 2021 10:23:17 -0500
Subject: [PATCH 056/141] Add methods to easily detect transaction type based
 on gas fields (#11382)

---
 shared/modules/transaction.utils.js      | 34 ++++++++++
 shared/modules/transaction.utils.test.js | 83 ++++++++++++++++++++++++
 2 files changed, 117 insertions(+)
 create mode 100644 shared/modules/transaction.utils.test.js

diff --git a/shared/modules/transaction.utils.js b/shared/modules/transaction.utils.js
index 9e89679f8..092f8e465 100644
--- a/shared/modules/transaction.utils.js
+++ b/shared/modules/transaction.utils.js
@@ -1,6 +1,40 @@
+import { isHexString } from 'ethereumjs-util';
+
 export function transactionMatchesNetwork(transaction, chainId, networkId) {
   if (typeof transaction.chainId !== 'undefined') {
     return transaction.chainId === chainId;
   }
   return transaction.metamaskNetworkId === networkId;
 }
+
+/**
+ * Determines if the maxFeePerGas and maxPriorityFeePerGas fields are supplied
+ * and valid inputs. This will return false for non hex string inputs.
+ * @param {import("../constants/transaction").TransactionMeta} transaction -
+ *  the transaction to check
+ * @returns {boolean} true if transaction uses valid EIP1559 fields
+ */
+export function isEIP1559Transaction(transaction) {
+  return (
+    isHexString(transaction.txParams.maxFeePerGas) &&
+    isHexString(transaction.txParams.maxPriorityFeePerGas)
+  );
+}
+
+/**
+ * Determine if the maxFeePerGas and maxPriorityFeePerGas fields are not
+ * supplied and that the gasPrice field is valid if it is provided. This will
+ * return false if gasPrice is a non hex string.
+ * @param {import("../constants/transaction").TransactionMeta} transaction -
+ *  the transaction to check
+ * @returns {boolean} true if transaction uses valid Legacy fields OR lacks
+ *  EIP1559 fields
+ */
+export function isLegacyTransaction(transaction) {
+  return (
+    typeof transaction.txParams.maxFeePerGas === 'undefined' &&
+    typeof transaction.txParams.maxPriorityFeePerGas === 'undefined' &&
+    (typeof transaction.txParams.gasPrice === 'undefined' ||
+      isHexString(transaction.txParams.gasPrice))
+  );
+}
diff --git a/shared/modules/transaction.utils.test.js b/shared/modules/transaction.utils.test.js
new file mode 100644
index 000000000..3a333caa7
--- /dev/null
+++ b/shared/modules/transaction.utils.test.js
@@ -0,0 +1,83 @@
+import { isEIP1559Transaction, isLegacyTransaction } from './transaction.utils';
+
+describe('Transaction.utils', function () {
+  describe('isEIP1559Transaction', function () {
+    it('should return true if both maxFeePerGas and maxPriorityFeePerGas are hex strings', () => {
+      expect(
+        isEIP1559Transaction({
+          txParams: { maxFeePerGas: '0x1', maxPriorityFeePerGas: '0x1' },
+        }),
+      ).toBe(true);
+    });
+
+    it('should return false if either maxFeePerGas and maxPriorityFeePerGas are non-hex strings', () => {
+      expect(
+        isEIP1559Transaction({
+          txParams: { maxFeePerGas: 0, maxPriorityFeePerGas: '0x1' },
+        }),
+      ).toBe(false);
+      expect(
+        isEIP1559Transaction({
+          txParams: { maxFeePerGas: '0x1', maxPriorityFeePerGas: 'fail' },
+        }),
+      ).toBe(false);
+    });
+
+    it('should return false if either maxFeePerGas or maxPriorityFeePerGas are not supplied', () => {
+      expect(
+        isEIP1559Transaction({
+          txParams: { maxPriorityFeePerGas: '0x1' },
+        }),
+      ).toBe(false);
+      expect(
+        isEIP1559Transaction({
+          txParams: { maxFeePerGas: '0x1' },
+        }),
+      ).toBe(false);
+    });
+  });
+
+  describe('isLegacyTransaction', function () {
+    it('should return true if no gas related fields are supplied', () => {
+      expect(
+        isLegacyTransaction({
+          txParams: {},
+        }),
+      ).toBe(true);
+    });
+
+    it('should return true if gasPrice is solely provided', () => {
+      expect(
+        isLegacyTransaction({
+          txParams: { gasPrice: '0x1' },
+        }),
+      ).toBe(true);
+    });
+
+    it('should return false if gasPrice is not a hex string', () => {
+      expect(
+        isLegacyTransaction({
+          txParams: { gasPrice: 100 },
+        }),
+      ).toBe(false);
+    });
+
+    it('should return false if either maxFeePerGas or maxPriorityFeePerGas are supplied', () => {
+      expect(
+        isLegacyTransaction({
+          txParams: {
+            maxFeePerGas: '0x1',
+          },
+        }),
+      ).toBe(false);
+
+      expect(
+        isLegacyTransaction({
+          txParams: {
+            maxPriorityFeePerGas: 'any data',
+          },
+        }),
+      ).toBe(false);
+    });
+  });
+});

From b6f514e29308078b0bc2b4ffd0178b962d030620 Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Mon, 28 Jun 2021 10:33:19 -0500
Subject: [PATCH 057/141] remove EIP-1559 fields from txParams before calling
 estimateGas (#11368)

---
 app/scripts/controllers/transactions/tx-gas-utils.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/scripts/controllers/transactions/tx-gas-utils.js b/app/scripts/controllers/transactions/tx-gas-utils.js
index 1b84577b1..4d274a299 100644
--- a/app/scripts/controllers/transactions/tx-gas-utils.js
+++ b/app/scripts/controllers/transactions/tx-gas-utils.js
@@ -62,8 +62,11 @@ export default class TxGasUtil {
     // `eth_estimateGas` can fail if the user has insufficient balance for the
     // value being sent, or for the gas cost. We don't want to check their
     // balance here, we just want the gas estimate. The gas price is removed
-    // to skip those balance checks. We check balance elsewhere.
+    // to skip those balance checks. We check balance elsewhere. We also delete
+    // maxFeePerGas and maxPriorityFeePerGas to support EIP-1559 txs.
     delete txParams.gasPrice;
+    delete txParams.maxFeePerGas;
+    delete txParams.maxPriorityFeePerGas;
 
     // estimate tx gas requirements
     return await this.query.estimateGas(txParams);

From bc4a9b16d0bc4384c4e5d2d4fe9f0eb272e4a723 Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Mon, 28 Jun 2021 12:29:08 -0500
Subject: [PATCH 058/141] add account eip1559 detection support (#11380)

* add account eip1559 detection support

* add constants for keyring types
---
 app/scripts/metamask-controller.js | 32 ++++++++++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
index fa582507f..abe6d6c7a 100644
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@@ -73,6 +73,16 @@ export const METAMASK_CONTROLLER_EVENTS = {
   UPDATE_BADGE: 'updateBadge',
 };
 
+/**
+ * Accounts can be instantiated from simple, HD or the two hardware wallet
+ * keyring types. Both simple and HD are treated as default but we do special
+ * case accounts managed by a hardware wallet.
+ */
+const KEYRING_TYPES = {
+  LEDGER: 'Ledger Hardware',
+  TREZOR: 'Trezor Hardware',
+};
+
 export default class MetamaskController extends EventEmitter {
   /**
    * @constructor
@@ -1786,7 +1796,7 @@ export default class MetamaskController extends EventEmitter {
     const keyring = await this.keyringController.getKeyringForAccount(address);
 
     switch (keyring.type) {
-      case 'Ledger Hardware': {
+      case KEYRING_TYPES.LEDGER: {
         return new Promise((_, reject) => {
           reject(
             new Error('Ledger does not support eth_getEncryptionPublicKey.'),
@@ -1794,7 +1804,7 @@ export default class MetamaskController extends EventEmitter {
         });
       }
 
-      case 'Trezor Hardware': {
+      case KEYRING_TYPES.TREZOR: {
         return new Promise((_, reject) => {
           reject(
             new Error('Trezor does not support eth_getEncryptionPublicKey.'),
@@ -1933,6 +1943,24 @@ export default class MetamaskController extends EventEmitter {
     cb(null, this.getState());
   }
 
+  /**
+   * Method to return a boolean if the keyring for the currently selected
+   * account is a ledger or trezor keyring.
+   * TODO: remove this method when Ledger and Trezor release their supported
+   * client utilities for EIP-1559
+   * @returns {boolean} true if the keyring type supports EIP-1559
+   */
+  getCurrentAccountEIP1559Compatibility() {
+    const selectedAddress = this.preferencesController.getSelectedAddress();
+    const keyring = this.keyringController.getKeyringForAccount(
+      selectedAddress,
+    );
+    return (
+      keyring.type !== KEYRING_TYPES.LEDGER &&
+      keyring.type !== KEYRING_TYPES.TREZOR
+    );
+  }
+
   //=============================================================================
   // END (VAULT / KEYRING RELATED METHODS)
   //=============================================================================

From 352102438f265cacc2b7c4a5083061222018cbc4 Mon Sep 17 00:00:00 2001
From: Alex Donesky <adonesky@gmail.com>
Date: Mon, 28 Jun 2021 16:09:48 -0500
Subject: [PATCH 059/141] add ChipWithInput component (#11392)

---
 ui/components/ui/chip/chip-with-input.js | 37 ++++++++++++++++++++++++
 ui/components/ui/chip/chip.js            |  2 ++
 ui/components/ui/chip/chip.scss          | 13 +++++++++
 ui/components/ui/chip/chip.stories.js    | 13 ++++++++-
 4 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 ui/components/ui/chip/chip-with-input.js

diff --git a/ui/components/ui/chip/chip-with-input.js b/ui/components/ui/chip/chip-with-input.js
new file mode 100644
index 000000000..c6fad92d9
--- /dev/null
+++ b/ui/components/ui/chip/chip-with-input.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { COLORS } from '../../../helpers/constants/design-system';
+import Chip from '.';
+
+export function ChipWithInput({
+  className,
+  borderColor = COLORS.UI1,
+  inputValue,
+  setInputValue,
+}) {
+  return (
+    <Chip
+      className={classnames(className, 'chip--with-input')}
+      borderColor={borderColor}
+    >
+      {setInputValue && (
+        <input
+          type="text"
+          className="chip__input"
+          onChange={(e) => {
+            setInputValue(e.target.value);
+          }}
+          value={inputValue}
+        />
+      )}
+    </Chip>
+  );
+}
+
+ChipWithInput.propTypes = {
+  borderColor: PropTypes.oneOf(Object.values(COLORS)),
+  className: PropTypes.string,
+  inputValue: PropTypes.string,
+  setInputValue: PropTypes.func,
+};
diff --git a/ui/components/ui/chip/chip.js b/ui/components/ui/chip/chip.js
index 65a13b657..232195f6e 100644
--- a/ui/components/ui/chip/chip.js
+++ b/ui/components/ui/chip/chip.js
@@ -63,4 +63,6 @@ Chip.propTypes = {
   rightIcon: PropTypes.node,
   className: PropTypes.string,
   onClick: PropTypes.func,
+  inputValue: PropTypes.string,
+  setInputValue: PropTypes.func,
 };
diff --git a/ui/components/ui/chip/chip.scss b/ui/components/ui/chip/chip.scss
index 911f5a8ce..51a176138 100644
--- a/ui/components/ui/chip/chip.scss
+++ b/ui/components/ui/chip/chip.scss
@@ -37,7 +37,20 @@
     }
   }
 
+  &--with-input &__input {
+    direction: ltr;
+    border: none;
+    background: transparent;
+    text-align: center;
 
+    &:focus {
+      text-align: left;
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
 
   &--with-right-icon {
     padding-right: 4px;
diff --git a/ui/components/ui/chip/chip.stories.js b/ui/components/ui/chip/chip.stories.js
index 690d97172..c05cf7bbd 100644
--- a/ui/components/ui/chip/chip.stories.js
+++ b/ui/components/ui/chip/chip.stories.js
@@ -1,10 +1,11 @@
 /* eslint-disable react/prop-types */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { select, text } from '@storybook/addon-knobs';
 import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system';
 import ApproveIcon from '../icon/approve-icon.component';
 import Identicon from '../identicon/identicon.component';
+import { ChipWithInput } from './chip-with-input';
 import Chip from '.';
 
 export default {
@@ -80,3 +81,13 @@ export const WithBothIcons = () => (
     }
   />
 );
+export const WithInput = () => {
+  const [inputValue, setInputValue] = useState('');
+  return (
+    <ChipWithInput
+      inputValue={inputValue}
+      setInputValue={setInputValue}
+      borderColor={select('borderColor', COLORS, COLORS.UI3)}
+    />
+  );
+};

From 3aae36754f9b6576c41a949216a9d61f5688616b Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Mon, 28 Jun 2021 15:38:20 -0700
Subject: [PATCH 060/141] Updating address error (#11389)

---
 app/scripts/controllers/preferences.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/scripts/controllers/preferences.js b/app/scripts/controllers/preferences.js
index 1c34a46b2..298272968 100644
--- a/app/scripts/controllers/preferences.js
+++ b/app/scripts/controllers/preferences.js
@@ -299,7 +299,7 @@ export default class PreferencesController {
    */
   syncAddresses(addresses) {
     if (!Array.isArray(addresses) || addresses.length === 0) {
-      throw new Error('Expected non-empty array of addresses.');
+      throw new Error('Expected non-empty array of addresses. Error #11201');
     }
 
     const { identities, lostIdentities } = this.store.getState();

From 844a021fcdc958f4a1b89756f1a2c8fcad3468a2 Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Tue, 29 Jun 2021 11:02:00 -0500
Subject: [PATCH 061/141] remove ui lookup of lastGasPrice field (#11411)

---
 .../confirm-transaction.duck.js               | 35 +------------------
 .../confirm-transaction-base.component.js     |  4 +--
 .../confirm-transaction-base.container.js     |  4 +--
 3 files changed, 3 insertions(+), 40 deletions(-)

diff --git a/ui/ducks/confirm-transaction/confirm-transaction.duck.js b/ui/ducks/confirm-transaction/confirm-transaction.duck.js
index 96baf311b..b73911e0b 100644
--- a/ui/ducks/confirm-transaction/confirm-transaction.duck.js
+++ b/ui/ducks/confirm-transaction/confirm-transaction.duck.js
@@ -11,8 +11,6 @@ import {
   getHexGasTotal,
   addFiat,
   addEth,
-  increaseLastGasPrice,
-  hexGreaterThan,
 } from '../../helpers/utils/confirm-tx.util';
 
 import { getTokenData, sumHexes } from '../../helpers/utils/transactions.util';
@@ -180,32 +178,6 @@ export function updateNonce(nonce) {
   };
 }
 
-function increaseFromLastGasPrice(txData) {
-  const {
-    lastGasPrice,
-    txParams: { gasPrice: previousGasPrice } = {},
-  } = txData;
-
-  // Set the minimum to a 10% increase from the lastGasPrice.
-  const minimumGasPrice = increaseLastGasPrice(lastGasPrice);
-  const gasPriceBelowMinimum = hexGreaterThan(
-    minimumGasPrice,
-    previousGasPrice,
-  );
-  const gasPrice =
-    !previousGasPrice || gasPriceBelowMinimum
-      ? minimumGasPrice
-      : previousGasPrice;
-
-  return {
-    ...txData,
-    txParams: {
-      ...txData.txParams,
-      gasPrice,
-    },
-  };
-}
-
 export function updateTxDataAndCalculate(txData) {
   return (dispatch, getState) => {
     const state = getState();
@@ -303,12 +275,7 @@ export function setTransactionToConfirm(transactionId) {
     }
 
     if (transaction.txParams) {
-      const { lastGasPrice } = transaction;
-      const txData = lastGasPrice
-        ? increaseFromLastGasPrice(transaction)
-        : transaction;
-      dispatch(updateTxDataAndCalculate(txData));
-
+      dispatch(updateTxDataAndCalculate(transaction));
       const { txParams } = transaction;
 
       if (txParams.data) {
diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
index cb820a874..242060eb3 100644
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -51,7 +51,6 @@ export default class ConfirmTransactionBase extends Component {
     hexTransactionAmount: PropTypes.string,
     hexTransactionFee: PropTypes.string,
     hexTransactionTotal: PropTypes.string,
-    isTxReprice: PropTypes.bool,
     methodData: PropTypes.object,
     nonce: PropTypes.string,
     useNonceField: PropTypes.bool,
@@ -649,7 +648,6 @@ export default class ConfirmTransactionBase extends Component {
   render() {
     const { t } = this.context;
     const {
-      isTxReprice,
       fromName,
       fromAddress,
       toName,
@@ -709,7 +707,7 @@ export default class ConfirmTransactionBase extends Component {
         toAddress={toAddress}
         toEns={toEns}
         toNickname={toNickname}
-        showEdit={onEdit && !isTxReprice}
+        showEdit={onEdit}
         action={functionType}
         title={title}
         titleComponent={this.renderTitleComponent()}
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 09361ad93..126937570 100644
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js
+++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js
@@ -78,7 +78,7 @@ const mapStateToProps = (state, ownProps) => {
     provider: { chainId },
   } = metamask;
   const { tokenData, txData, tokenProps, nonce } = confirmTransaction;
-  const { txParams = {}, lastGasPrice, id: transactionId, type } = txData;
+  const { txParams = {}, id: transactionId, type } = txData;
   const transaction =
     Object.values(unapprovedTxs).find(
       ({ id }) => id === (transactionId || Number(paramsTransactionId)),
@@ -107,7 +107,6 @@ const mapStateToProps = (state, ownProps) => {
   const addressBookObject = addressBook[checksummedAddress];
   const toEns = ensResolutionsByAddress[checksummedAddress] || '';
   const toNickname = addressBookObject ? addressBookObject.name : '';
-  const isTxReprice = Boolean(lastGasPrice);
   const transactionStatus = transaction ? transaction.status : '';
 
   const {
@@ -165,7 +164,6 @@ const mapStateToProps = (state, ownProps) => {
     tokenData,
     methodData,
     tokenProps,
-    isTxReprice,
     conversionRate,
     transactionStatus,
     nonce,

From e2882792b84e66910ff032c3b18cd459b59d70ae Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Tue, 29 Jun 2021 10:50:18 -0700
Subject: [PATCH 062/141] Using expect in jest unit tests under /shared
 (#11413)

---
 shared/modules/buffer-utils.test.js       | 25 +++++++-------
 shared/modules/fetch-with-timeout.test.js | 40 +++++++++++++----------
 shared/modules/hexstring-utils.test.js    | 19 +++++------
 3 files changed, 44 insertions(+), 40 deletions(-)

diff --git a/shared/modules/buffer-utils.test.js b/shared/modules/buffer-utils.test.js
index 2f5290cca..f3daa9e17 100644
--- a/shared/modules/buffer-utils.test.js
+++ b/shared/modules/buffer-utils.test.js
@@ -1,4 +1,3 @@
-import { strict as assert } from 'assert';
 import BN from 'bn.js';
 import { toBuffer } from './buffer-utils';
 
@@ -6,64 +5,64 @@ describe('buffer utils', function () {
   describe('toBuffer', function () {
     it('should work with prefixed hex strings', function () {
       const result = toBuffer('0xe');
-      assert.equal(result.length, 1);
+      expect(result).toHaveLength(1);
     });
 
     it('should work with non prefixed hex strings', function () {
       const result = toBuffer('e');
-      assert.equal(result.length, 1);
+      expect(result).toHaveLength(1);
     });
 
     it('should work with weirdly 0x prefixed non-hex strings', function () {
       const result = toBuffer('0xtest');
-      assert.equal(result.length, 6);
+      expect(result).toHaveLength(6);
     });
 
     it('should work with regular strings', function () {
       const result = toBuffer('test');
-      assert.equal(result.length, 4);
+      expect(result).toHaveLength(4);
     });
 
     it('should work with BN', function () {
       const result = toBuffer(new BN(100));
-      assert.equal(result.length, 1);
+      expect(result).toHaveLength(1);
     });
 
     it('should work with Buffer', function () {
       const result = toBuffer(Buffer.from('test'));
-      assert.equal(result.length, 4);
+      expect(result).toHaveLength(4);
     });
 
     it('should work with a number', function () {
       const result = toBuffer(100);
-      assert.equal(result.length, 1);
+      expect(result).toHaveLength(1);
     });
 
     it('should work with null or undefined', function () {
       const result = toBuffer(null);
       const result2 = toBuffer(undefined);
-      assert.equal(result.length, 0);
-      assert.equal(result2.length, 0);
+      expect(result).toHaveLength(0);
+      expect(result2).toHaveLength(0);
     });
 
     it('should work with UInt8Array', function () {
       const uint8 = new Uint8Array(2);
       const result = toBuffer(uint8);
-      assert.equal(result.length, 2);
+      expect(result).toHaveLength(2);
     });
 
     it('should work with objects that have a toBuffer property', function () {
       const result = toBuffer({
         toBuffer: () => Buffer.from('hi'),
       });
-      assert.equal(result.length, 2);
+      expect(result).toHaveLength(2);
     });
 
     it('should work with objects that have a toArray property', function () {
       const result = toBuffer({
         toArray: () => ['hi'],
       });
-      assert.equal(result.length, 1);
+      expect(result).toHaveLength(1);
     });
   });
 });
diff --git a/shared/modules/fetch-with-timeout.test.js b/shared/modules/fetch-with-timeout.test.js
index 2061c2b92..a7400e617 100644
--- a/shared/modules/fetch-with-timeout.test.js
+++ b/shared/modules/fetch-with-timeout.test.js
@@ -1,6 +1,4 @@
-import { strict as assert } from 'assert';
 import nock from 'nock';
-
 import { MILLISECOND, SECOND } from '../constants/time';
 import getFetchWithTimeout from './fetch-with-timeout';
 
@@ -12,7 +10,7 @@ describe('getFetchWithTimeout', function () {
     const response = await (
       await fetchWithTimeout('https://api.infura.io/money')
     ).json();
-    assert.deepEqual(response, {
+    expect(response).toStrictEqual({
       hodl: false,
     });
   });
@@ -25,14 +23,14 @@ describe('getFetchWithTimeout', function () {
 
     const fetchWithTimeout = getFetchWithTimeout(MILLISECOND * 123);
 
-    try {
+    const fetchWithTimeoutThrowsError = async () => {
       await fetchWithTimeout('https://api.infura.io/moon').then((r) =>
         r.json(),
       );
-      assert.fail('Request should throw');
-    } catch (e) {
-      assert.ok(e);
-    }
+      throw new Error('Request should throw');
+    };
+
+    await expect(fetchWithTimeoutThrowsError()).rejects.toThrow('Aborted');
   });
 
   it('should abort the request when the custom timeout is hit', async function () {
@@ -43,20 +41,28 @@ describe('getFetchWithTimeout', function () {
 
     const fetchWithTimeout = getFetchWithTimeout(MILLISECOND * 123);
 
-    try {
+    const fetchWithTimeoutThrowsError = async () => {
       await fetchWithTimeout('https://api.infura.io/moon').then((r) =>
         r.json(),
       );
-      assert.fail('Request should be aborted');
-    } catch (e) {
-      assert.deepEqual(e.message, 'Aborted');
-    }
+      throw new Error('Request should be aborted');
+    };
+
+    await expect(fetchWithTimeoutThrowsError()).rejects.toThrow('Aborted');
   });
 
   it('throws on invalid timeout', async function () {
-    assert.throws(() => getFetchWithTimeout(), 'should throw');
-    assert.throws(() => getFetchWithTimeout(-1), 'should throw');
-    assert.throws(() => getFetchWithTimeout({}), 'should throw');
-    assert.throws(() => getFetchWithTimeout(true), 'should throw');
+    expect(() => getFetchWithTimeout()).toThrow(
+      'Must specify positive integer timeout.',
+    );
+    expect(() => getFetchWithTimeout(-1)).toThrow(
+      'Must specify positive integer timeout.',
+    );
+    expect(() => getFetchWithTimeout({})).toThrow(
+      'Must specify positive integer timeout.',
+    );
+    expect(() => getFetchWithTimeout(true)).toThrow(
+      'Must specify positive integer timeout.',
+    );
   });
 });
diff --git a/shared/modules/hexstring-utils.test.js b/shared/modules/hexstring-utils.test.js
index 3d292451e..bf2d80116 100644
--- a/shared/modules/hexstring-utils.test.js
+++ b/shared/modules/hexstring-utils.test.js
@@ -1,4 +1,3 @@
-import { strict as assert } from 'assert';
 import { toChecksumAddress } from 'ethereumjs-util';
 import { isValidHexAddress } from './hexstring-utils';
 
@@ -7,51 +6,51 @@ describe('hexstring utils', function () {
     it('should allow 40-char non-prefixed hex', function () {
       const address = 'fdea65c8e26263f6d9a1b5de9555d2931a33b825';
       const result = isValidHexAddress(address);
-      assert.equal(result, true);
+      expect(result).toBe(true);
     });
 
     it('should allow 42-char prefixed hex', function () {
       const address = '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825';
       const result = isValidHexAddress(address);
-      assert.equal(result, true);
+      expect(result).toBe(true);
     });
 
     it('should NOT allow 40-char non-prefixed hex when allowNonPrefixed is false', function () {
       const address = 'fdea65c8e26263f6d9a1b5de9555d2931a33b825';
       const result = isValidHexAddress(address, { allowNonPrefixed: false });
-      assert.equal(result, false);
+      expect(result).toBe(false);
     });
 
     it('should NOT allow any length of non hex-prefixed string', function () {
       const address = 'fdea65c8e26263f6d9a1b5de9555d2931a33b85';
       const result = isValidHexAddress(address);
-      assert.equal(result, false);
+      expect(result).toBe(false);
     });
 
     it('should NOT allow less than 42 character hex-prefixed string', function () {
       const address = '0xfdea65ce26263f6d9a1b5de9555d2931a33b85';
       const result = isValidHexAddress(address);
-      assert.equal(result, false);
+      expect(result).toBe(false);
     });
 
     it('should recognize correct capitalized checksum', function () {
       const address = '0xFDEa65C8e26263F6d9A1B5de9555D2931A33b825';
       const result = isValidHexAddress(address, { mixedCaseUseChecksum: true });
-      assert.equal(result, true);
+      expect(result).toBe(true);
     });
 
     it('should recognize incorrect capitalized checksum', function () {
       const address = '0xFDea65C8e26263F6d9A1B5de9555D2931A33b825';
       const result = isValidHexAddress(address, { mixedCaseUseChecksum: true });
-      assert.equal(result, false);
+      expect(result).toBe(false);
     });
 
     it('should recognize this sample hashed address', function () {
       const address = '0x5Fda30Bb72B8Dfe20e48A00dFc108d0915BE9Bb0';
       const result = isValidHexAddress(address, { mixedCaseUseChecksum: true });
       const hashed = toChecksumAddress(address.toLowerCase());
-      assert.equal(hashed, address);
-      assert.equal(result, true);
+      expect(hashed).toBe(address);
+      expect(result).toBe(true);
     });
   });
 });

From 55502f212d7b40361bf8e6f4868d8ebec131917b Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Tue, 29 Jun 2021 14:25:56 -0500
Subject: [PATCH 063/141] update txParams normalization and validation.
 (#11406)

---
 .../controllers/transactions/lib/util.js      | 139 ++++++++--
 .../controllers/transactions/lib/util.test.js | 261 ++++++++++++++++++
 shared/constants/transaction.js               |  27 ++
 3 files changed, 410 insertions(+), 17 deletions(-)

diff --git a/app/scripts/controllers/transactions/lib/util.js b/app/scripts/controllers/transactions/lib/util.js
index 804f43ec2..a31cac3a1 100644
--- a/app/scripts/controllers/transactions/lib/util.js
+++ b/app/scripts/controllers/transactions/lib/util.js
@@ -1,17 +1,23 @@
 import { ethErrors } from 'eth-rpc-errors';
 import { addHexPrefix } from '../../../lib/util';
-import { TRANSACTION_STATUSES } from '../../../../../shared/constants/transaction';
+import {
+  TRANSACTION_ENVELOPE_TYPES,
+  TRANSACTION_STATUSES,
+} from '../../../../../shared/constants/transaction';
 import { isValidHexAddress } from '../../../../../shared/modules/hexstring-utils';
 
 const normalizers = {
-  from: (from) => addHexPrefix(from),
+  from: addHexPrefix,
   to: (to, lowerCase) =>
     lowerCase ? addHexPrefix(to).toLowerCase() : addHexPrefix(to),
-  nonce: (nonce) => addHexPrefix(nonce),
-  value: (value) => addHexPrefix(value),
-  data: (data) => addHexPrefix(data),
-  gas: (gas) => addHexPrefix(gas),
-  gasPrice: (gasPrice) => addHexPrefix(gasPrice),
+  nonce: addHexPrefix,
+  value: addHexPrefix,
+  data: addHexPrefix,
+  gas: addHexPrefix,
+  gasPrice: addHexPrefix,
+  maxFeePerGas: addHexPrefix,
+  maxPriorityFeePerGas: addHexPrefix,
+  type: addHexPrefix,
 };
 
 export function normalizeAndValidateTxParams(txParams, lowerCase = true) {
@@ -38,6 +44,78 @@ export function normalizeTxParams(txParams, lowerCase = true) {
   return normalizedTxParams;
 }
 
+/**
+ * Given two fields, ensure that the second field is not included in txParams,
+ * and if it is throw an invalidParams error.
+ * @param {Object} txParams - the transaction parameters object
+ * @param {string} fieldBeingValidated - the current field being validated
+ * @param {string} mutuallyExclusiveField - the field to ensure is not provided
+ * @throws {ethErrors.rpc.invalidParams} - throws if mutuallyExclusiveField is
+ *  present in txParams.
+ */
+function ensureMutuallyExclusiveFieldsNotProvided(
+  txParams,
+  fieldBeingValidated,
+  mutuallyExclusiveField,
+) {
+  if (typeof txParams[mutuallyExclusiveField] !== 'undefined') {
+    throw ethErrors.rpc.invalidParams(
+      `Invalid transaction params: specified ${fieldBeingValidated} but also included ${mutuallyExclusiveField}, these cannot be mixed`,
+    );
+  }
+}
+
+/**
+ * Ensures that the provided value for field is a string, throws an
+ * invalidParams error if field is not a string.
+ * @param {Object} txParams - the transaction parameters object
+ * @param {string} field - the current field being validated
+ * @throws {ethErrors.rpc.invalidParams} - throws if field is not a string
+ */
+function ensureFieldIsString(txParams, field) {
+  if (typeof txParams[field] !== 'string') {
+    throw ethErrors.rpc.invalidParams(
+      `Invalid transaction params: ${field} is not a string. got: (${txParams[field]})`,
+    );
+  }
+}
+
+/**
+ * Ensures that the provided txParams has the proper 'type' specified for the
+ * given field, if it is provided. If types do not match throws an
+ * invalidParams error.
+ * @param {Object} txParams - the transaction parameters object
+ * @param {'gasPrice' | 'maxFeePerGas' | 'maxPriorityFeePerGas'} field - the
+ *  current field being validated
+ * @throws {ethErrors.rpc.invalidParams} - throws if type does not match the
+ *  expectations for provided field.
+ */
+function ensureProperTransactionEnvelopeTypeProvided(txParams, field) {
+  switch (field) {
+    case 'maxFeePerGas':
+    case 'maxPriorityFeePerGas':
+      if (
+        txParams.type &&
+        txParams.type !== TRANSACTION_ENVELOPE_TYPES.FEE_MARKET
+      ) {
+        throw ethErrors.rpc.invalidParams(
+          `Invalid transaction envelope type: specified type "${txParams.type}" but including maxFeePerGas and maxPriorityFeePerGas requires type: "${TRANSACTION_ENVELOPE_TYPES.FEE_MARKET}"`,
+        );
+      }
+      break;
+    case 'gasPrice':
+    default:
+      if (
+        txParams.type &&
+        txParams.type === TRANSACTION_ENVELOPE_TYPES.FEE_MARKET
+      ) {
+        throw ethErrors.rpc.invalidParams(
+          `Invalid transaction envelope type: specified type "${txParams.type}" but included a gasPrice instead of maxFeePerGas and maxPriorityFeePerGas`,
+        );
+      }
+  }
+}
+
 /**
  * Validates the given tx parameters
  * @param {Object} txParams - the tx params
@@ -64,12 +142,43 @@ export function validateTxParams(txParams) {
       case 'to':
         validateRecipient(txParams);
         break;
+      case 'gasPrice':
+        ensureProperTransactionEnvelopeTypeProvided(txParams, 'gasPrice');
+        ensureMutuallyExclusiveFieldsNotProvided(
+          txParams,
+          'gasPrice',
+          'maxFeePerGas',
+        );
+        ensureMutuallyExclusiveFieldsNotProvided(
+          txParams,
+          'gasPrice',
+          'maxPriorityFeePerGas',
+        );
+        ensureFieldIsString(txParams, 'gasPrice');
+        break;
+      case 'maxFeePerGas':
+        ensureProperTransactionEnvelopeTypeProvided(txParams, 'maxFeePerGas');
+        ensureMutuallyExclusiveFieldsNotProvided(
+          txParams,
+          'maxFeePerGas',
+          'gasPrice',
+        );
+        ensureFieldIsString(txParams, 'maxFeePerGas');
+        break;
+      case 'maxPriorityFeePerGas':
+        ensureProperTransactionEnvelopeTypeProvided(
+          txParams,
+          'maxPriorityFeePerGas',
+        );
+        ensureMutuallyExclusiveFieldsNotProvided(
+          txParams,
+          'maxPriorityFeePerGas',
+          'gasPrice',
+        );
+        ensureFieldIsString(txParams, 'maxPriorityFeePerGas');
+        break;
       case 'value':
-        if (typeof value !== 'string') {
-          throw ethErrors.rpc.invalidParams(
-            `Invalid transaction params: ${key} is not a string. got: (${value})`,
-          );
-        }
+        ensureFieldIsString(txParams, 'value');
         if (value.toString().includes('-')) {
           throw ethErrors.rpc.invalidParams(
             `Invalid transaction value "${value}": not a positive number.`,
@@ -90,11 +199,7 @@ export function validateTxParams(txParams) {
         }
         break;
       default:
-        if (typeof value !== 'string') {
-          throw ethErrors.rpc.invalidParams(
-            `Invalid transaction params: ${key} is not a string. got: (${value})`,
-          );
-        }
+        ensureFieldIsString(txParams, key);
     }
   });
 }
diff --git a/app/scripts/controllers/transactions/lib/util.test.js b/app/scripts/controllers/transactions/lib/util.test.js
index f6dd83e4a..ad90faf54 100644
--- a/app/scripts/controllers/transactions/lib/util.test.js
+++ b/app/scripts/controllers/transactions/lib/util.test.js
@@ -1,4 +1,6 @@
 import { strict as assert } from 'assert';
+import { TRANSACTION_ENVELOPE_TYPES } from '../../../../../shared/constants/transaction';
+import { BURN_ADDRESS } from '../../../../../shared/modules/hexstring-utils';
 import * as txUtils from './util';
 
 describe('txUtils', function () {
@@ -48,6 +50,239 @@ describe('txUtils', function () {
         message: 'Invalid transaction value "-0x01": not a positive number.',
       });
     });
+
+    describe('when validating gasPrice', function () {
+      it('should error when specifying incorrect type', function () {
+        const txParams = {
+          gasPrice: '0x1',
+          type: TRANSACTION_ENVELOPE_TYPES.FEE_MARKET,
+          to: BURN_ADDRESS,
+        };
+
+        assert.throws(
+          () => {
+            txUtils.validateTxParams(txParams);
+          },
+          {
+            message: `Invalid transaction envelope type: specified type "0x2" but included a gasPrice instead of maxFeePerGas and maxPriorityFeePerGas`,
+          },
+        );
+      });
+
+      it('should error when gasPrice is not a string', function () {
+        const txParams = {
+          gasPrice: 1,
+          to: BURN_ADDRESS,
+        };
+
+        assert.throws(
+          () => {
+            txUtils.validateTxParams(txParams);
+          },
+          {
+            message:
+              'Invalid transaction params: gasPrice is not a string. got: (1)',
+          },
+        );
+      });
+
+      it('should error when specifying maxFeePerGas', function () {
+        const txParams = {
+          gasPrice: '0x1',
+          maxFeePerGas: '0x1',
+          to: BURN_ADDRESS,
+        };
+
+        assert.throws(
+          () => {
+            txUtils.validateTxParams(txParams);
+          },
+          {
+            message:
+              'Invalid transaction params: specified gasPrice but also included maxFeePerGas, these cannot be mixed',
+          },
+        );
+      });
+
+      it('should error when specifying maxPriorityFeePerGas', function () {
+        const txParams = {
+          gasPrice: '0x1',
+          maxPriorityFeePerGas: '0x1',
+          to: BURN_ADDRESS,
+        };
+
+        assert.throws(
+          () => {
+            txUtils.validateTxParams(txParams);
+          },
+          {
+            message:
+              'Invalid transaction params: specified gasPrice but also included maxPriorityFeePerGas, these cannot be mixed',
+          },
+        );
+      });
+
+      it('should validate if gasPrice is set with no type or EIP-1559 gas fields', function () {
+        const txParams = {
+          gasPrice: '0x1',
+          to: BURN_ADDRESS,
+        };
+        assert.doesNotThrow(() => txUtils.validateTxParams(txParams));
+      });
+
+      it('should validate if gasPrice is set with a type of "0x0"', function () {
+        const txParams = {
+          gasPrice: '0x1',
+          type: TRANSACTION_ENVELOPE_TYPES.LEGACY,
+          to: BURN_ADDRESS,
+        };
+        assert.doesNotThrow(() => txUtils.validateTxParams(txParams));
+      });
+    });
+
+    describe('when validating maxFeePerGas', function () {
+      it('should error when specifying incorrect type', function () {
+        const txParams = {
+          maxFeePerGas: '0x1',
+          type: TRANSACTION_ENVELOPE_TYPES.LEGACY,
+          to: BURN_ADDRESS,
+        };
+
+        assert.throws(
+          () => {
+            txUtils.validateTxParams(txParams);
+          },
+          {
+            message:
+              'Invalid transaction envelope type: specified type "0x0" but including maxFeePerGas and maxPriorityFeePerGas requires type: "0x2"',
+          },
+        );
+      });
+
+      it('should error when maxFeePerGas is not a string', function () {
+        const txParams = {
+          maxFeePerGas: 1,
+          to: BURN_ADDRESS,
+        };
+
+        assert.throws(
+          () => {
+            txUtils.validateTxParams(txParams);
+          },
+          {
+            message:
+              'Invalid transaction params: maxFeePerGas is not a string. got: (1)',
+          },
+        );
+      });
+
+      it('should error when specifying gasPrice', function () {
+        const txParams = {
+          gasPrice: '0x1',
+          maxFeePerGas: '0x1',
+          to: BURN_ADDRESS,
+        };
+
+        assert.throws(
+          () => {
+            txUtils.validateTxParams(txParams);
+          },
+          {
+            message:
+              'Invalid transaction params: specified gasPrice but also included maxFeePerGas, these cannot be mixed',
+          },
+        );
+      });
+
+      it('should validate if maxFeePerGas is set with no type or gasPrice field', function () {
+        const txParams = {
+          maxFeePerGas: '0x1',
+          to: BURN_ADDRESS,
+        };
+        assert.doesNotThrow(() => txUtils.validateTxParams(txParams));
+      });
+
+      it('should validate if maxFeePerGas is set with a type of "0x2"', function () {
+        const txParams = {
+          maxFeePerGas: '0x1',
+          type: TRANSACTION_ENVELOPE_TYPES.FEE_MARKET,
+          to: BURN_ADDRESS,
+        };
+        assert.doesNotThrow(() => txUtils.validateTxParams(txParams));
+      });
+    });
+
+    describe('when validating maxPriorityFeePerGas', function () {
+      it('should error when specifying incorrect type', function () {
+        const txParams = {
+          maxPriorityFeePerGas: '0x1',
+          type: TRANSACTION_ENVELOPE_TYPES.LEGACY,
+          to: BURN_ADDRESS,
+        };
+
+        assert.throws(
+          () => {
+            txUtils.validateTxParams(txParams);
+          },
+          {
+            message:
+              'Invalid transaction envelope type: specified type "0x0" but including maxFeePerGas and maxPriorityFeePerGas requires type: "0x2"',
+          },
+        );
+      });
+
+      it('should error when maxFeePerGas is not a string', function () {
+        const txParams = {
+          maxPriorityFeePerGas: 1,
+          to: BURN_ADDRESS,
+        };
+
+        assert.throws(
+          () => {
+            txUtils.validateTxParams(txParams);
+          },
+          {
+            message:
+              'Invalid transaction params: maxPriorityFeePerGas is not a string. got: (1)',
+          },
+        );
+      });
+
+      it('should error when specifying gasPrice', function () {
+        const txParams = {
+          gasPrice: '0x1',
+          maxPriorityFeePerGas: '0x1',
+          to: BURN_ADDRESS,
+        };
+
+        assert.throws(
+          () => {
+            txUtils.validateTxParams(txParams);
+          },
+          {
+            message:
+              'Invalid transaction params: specified gasPrice but also included maxPriorityFeePerGas, these cannot be mixed',
+          },
+        );
+      });
+
+      it('should validate if maxPriorityFeePerGas is set with no type or gasPrice field', function () {
+        const txParams = {
+          maxPriorityFeePerGas: '0x1',
+          to: BURN_ADDRESS,
+        };
+        assert.doesNotThrow(() => txUtils.validateTxParams(txParams));
+      });
+
+      it('should validate if maxPriorityFeePerGas is set with a type of "0x2"', function () {
+        const txParams = {
+          maxPriorityFeePerGas: '0x1',
+          type: TRANSACTION_ENVELOPE_TYPES.FEE_MARKET,
+          to: BURN_ADDRESS,
+        };
+        assert.doesNotThrow(() => txUtils.validateTxParams(txParams));
+      });
+    });
   });
 
   describe('#normalizeTxParams', function () {
@@ -58,6 +293,10 @@ describe('txUtils', function () {
         to: null,
         data: '68656c6c6f20776f726c64',
         random: 'hello world',
+        gasPrice: '1',
+        maxFeePerGas: '1',
+        maxPriorityFeePerGas: '1',
+        type: '1',
       };
 
       let normalizedTxParams = txUtils.normalizeTxParams(txParams);
@@ -89,6 +328,28 @@ describe('txUtils', function () {
         '0x',
         'to should be hex-prefixed',
       );
+
+      assert.equal(
+        normalizedTxParams.gasPrice,
+        '0x1',
+        'gasPrice should be hex-prefixed',
+      );
+
+      assert.equal(
+        normalizedTxParams.maxFeePerGas,
+        '0x1',
+        'maxFeePerGas should be hex-prefixed',
+      );
+      assert.equal(
+        normalizedTxParams.maxPriorityFeePerGas,
+        '0x1',
+        'maxPriorityFeePerGas should be hex-prefixed',
+      );
+      assert.equal(
+        normalizedTxParams.type,
+        '0x1',
+        'type should be hex-prefixed',
+      );
     });
   });
 
diff --git a/shared/constants/transaction.js b/shared/constants/transaction.js
index 5eedd6086..09d780677 100644
--- a/shared/constants/transaction.js
+++ b/shared/constants/transaction.js
@@ -60,6 +60,33 @@ export const TRANSACTION_TYPES = {
   ETH_GET_ENCRYPTION_PUBLIC_KEY: MESSAGE_TYPE.ETH_GET_ENCRYPTION_PUBLIC_KEY,
 };
 
+/**
+ * In EIP-2718 typed transaction envelopes were specified, with the very first
+ * typed envelope being 'legacy' and describing the shape of the base
+ * transaction params that were hitherto the only transaction type sent on
+ * Ethereum.
+ * @typedef {Object} TransactionEnvelopeTypes
+ * @property {'0x0'} LEGACY - A legacy transaction, the very first type.
+ * @property {'0x1'} ACCESS_LIST - EIP-2930 defined the access list transaction
+ *  type that allowed for specifying the state that a transaction would act
+ *  upon in advance and theoretically save on gas fees.
+ * @property {'0x2'} FEE_MARKET - The type introduced comes from EIP-1559,
+ *  Fee Market describes the addition of a baseFee to blocks that will be
+ *  burned instead of distributed to miners. Transactions of this type have
+ *  both a maxFeePerGas (maximum total amount in gwei per gas to spend on the
+ *  transaction) which is inclusive of the maxPriorityFeePerGas (maximum amount
+ *  of gwei per gas from the transaction fee to distribute to miner).
+ */
+
+/**
+ * @type {TransactionEnvelopeTypes}
+ */
+export const TRANSACTION_ENVELOPE_TYPES = {
+  LEGACY: '0x0',
+  ACCESS_LIST: '0x1',
+  FEE_MARKET: '0x2',
+};
+
 /**
  * Transaction Status is a mix of Ethereum and MetaMask terminology, used internally
  * for transaction processing.

From 4ba565e7196635caf63d803cab830e03bab85684 Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Tue, 29 Jun 2021 15:08:16 -0500
Subject: [PATCH 064/141] track dapp suggested gas fees (#11410)

---
 app/scripts/controllers/transactions/index.js |   3 +-
 .../transactions/tx-state-manager.js          |  36 ++++-
 .../transactions/tx-state-manager.test.js     | 131 ++++++++++++++++++
 3 files changed, 167 insertions(+), 3 deletions(-)

diff --git a/app/scripts/controllers/transactions/index.js b/app/scripts/controllers/transactions/index.js
index 18d625f3e..60ad40f91 100644
--- a/app/scripts/controllers/transactions/index.js
+++ b/app/scripts/controllers/transactions/index.js
@@ -298,6 +298,7 @@ export default class TransactionController extends EventEmitter {
     */
     let txMeta = this.txStateManager.generateTxMeta({
       txParams: normalizedTxParams,
+      origin,
     });
 
     if (origin === 'metamask') {
@@ -321,8 +322,6 @@ export default class TransactionController extends EventEmitter {
       }
     }
 
-    txMeta.origin = origin;
-
     const { type, getCodeResponse } = await this._determineTransactionType(
       txParams,
     );
diff --git a/app/scripts/controllers/transactions/tx-state-manager.js b/app/scripts/controllers/transactions/tx-state-manager.js
index eed1f6d79..19155d1a2 100644
--- a/app/scripts/controllers/transactions/tx-state-manager.js
+++ b/app/scripts/controllers/transactions/tx-state-manager.js
@@ -72,12 +72,45 @@ export default class TransactionStateManager extends EventEmitter {
    *  overwriting default keys of the TransactionMeta
    * @returns {TransactionMeta} the default txMeta object
    */
-  generateTxMeta(opts) {
+  generateTxMeta(opts = {}) {
     const netId = this.getNetwork();
     const chainId = this.getCurrentChainId();
     if (netId === 'loading') {
       throw new Error('MetaMask is having trouble connecting to the network');
     }
+
+    let dappSuggestedGasFees = null;
+
+    // If we are dealing with a transaction suggested by a dapp and not
+    // an internally created metamask transaction, we need to keep record of
+    // the originally submitted gasParams.
+    if (
+      opts.txParams &&
+      typeof opts.origin === 'string' &&
+      opts.origin !== 'metamask'
+    ) {
+      if (typeof opts.txParams.gasPrice !== 'undefined') {
+        dappSuggestedGasFees = {
+          gasPrice: opts.txParams.gasPrice,
+        };
+      } else if (
+        typeof opts.txParams.maxFeePerGas !== 'undefined' ||
+        typeof opts.txParams.maxPriorityFeePerGas !== 'undefined'
+      ) {
+        dappSuggestedGasFees = {
+          maxPriorityFeePerGas: opts.txParams.maxPriorityFeePerGas,
+          maxFeePerGas: opts.txParams.maxFeePerGas,
+        };
+      }
+
+      if (typeof opts.txParams.gas !== 'undefined') {
+        dappSuggestedGasFees = {
+          ...dappSuggestedGasFees,
+          gas: opts.txParams.gas,
+        };
+      }
+    }
+
     return {
       id: createId(),
       time: new Date().getTime(),
@@ -85,6 +118,7 @@ export default class TransactionStateManager extends EventEmitter {
       metamaskNetworkId: netId,
       chainId,
       loadingDefaults: true,
+      dappSuggestedGasFees,
       ...opts,
     };
   }
diff --git a/app/scripts/controllers/transactions/tx-state-manager.test.js b/app/scripts/controllers/transactions/tx-state-manager.test.js
index 895fb3626..e8a391faf 100644
--- a/app/scripts/controllers/transactions/tx-state-manager.test.js
+++ b/app/scripts/controllers/transactions/tx-state-manager.test.js
@@ -10,6 +10,7 @@ import {
   RINKEBY_CHAIN_ID,
   KOVAN_NETWORK_ID,
 } from '../../../../shared/constants/network';
+import { GAS_LIMITS } from '../../../../shared/constants/gas';
 import TxStateManager from './tx-state-manager';
 import { snapshotFromTxMeta } from './lib/tx-state-history-helpers';
 
@@ -1074,6 +1075,136 @@ describe('TransactionStateManager', function () {
     });
   });
 
+  describe('#generateTxMeta', function () {
+    it('generates a txMeta object when supplied no parameters', function () {
+      // There are currently not safety checks for missing 'opts' but we should
+      // at least enforce txParams. This is done in the transaction controller
+      // before *calling* this method, but we should perhaps ensure that
+      // txParams is provided and validated in this method.
+      // TODO: this test should fail.
+      const generatedTransaction = txStateManager.generateTxMeta();
+      assert.ok(generatedTransaction);
+    });
+
+    it('generates a txMeta object with txParams specified', function () {
+      const txParams = {
+        gas: GAS_LIMITS.SIMPLE,
+        from: '0x0000',
+        to: '0x000',
+        value: '0x0',
+        gasPrice: '0x0',
+      };
+      const generatedTransaction = txStateManager.generateTxMeta({
+        txParams,
+      });
+      assert.ok(generatedTransaction);
+      assert.strictEqual(generatedTransaction.txParams, txParams);
+    });
+
+    it('generates a txMeta object with txParams specified using EIP-1559 fields', function () {
+      const txParams = {
+        gas: GAS_LIMITS.SIMPLE,
+        from: '0x0000',
+        to: '0x000',
+        value: '0x0',
+        maxFeePerGas: '0x0',
+        maxPriorityFeePerGas: '0x0',
+      };
+      const generatedTransaction = txStateManager.generateTxMeta({
+        txParams,
+      });
+      assert.ok(generatedTransaction);
+      assert.strictEqual(generatedTransaction.txParams, txParams);
+    });
+
+    it('records dappSuggestedGasFees when origin is provided and is not "metamask"', function () {
+      const eip1559GasFeeFields = {
+        maxFeePerGas: '0x0',
+        maxPriorityFeePerGas: '0x0',
+        gas: GAS_LIMITS.SIMPLE,
+      };
+
+      const legacyGasFeeFields = {
+        gasPrice: '0x0',
+        gas: GAS_LIMITS.SIMPLE,
+      };
+
+      const eip1559TxParams = {
+        from: '0x0000',
+        to: '0x000',
+        value: '0x0',
+        ...eip1559GasFeeFields,
+      };
+
+      const legacyTxParams = {
+        from: '0x0000',
+        to: '0x000',
+        value: '0x0',
+        ...legacyGasFeeFields,
+      };
+      const eip1559GeneratedTransaction = txStateManager.generateTxMeta({
+        txParams: eip1559TxParams,
+        origin: 'adappt.com',
+      });
+      const legacyGeneratedTransaction = txStateManager.generateTxMeta({
+        txParams: legacyTxParams,
+        origin: 'adappt.com',
+      });
+      assert.ok(
+        eip1559GeneratedTransaction,
+        'generated EIP1559 transaction should be truthy',
+      );
+      assert.deepStrictEqual(
+        eip1559GeneratedTransaction.dappSuggestedGasFees,
+        eip1559GasFeeFields,
+        'generated EIP1559 transaction should have appropriate dappSuggestedGasFees',
+      );
+
+      assert.ok(
+        legacyGeneratedTransaction,
+        'generated legacy transaction should be truthy',
+      );
+      assert.deepStrictEqual(
+        legacyGeneratedTransaction.dappSuggestedGasFees,
+        legacyGasFeeFields,
+        'generated legacy transaction should have appropriate dappSuggestedGasFees',
+      );
+    });
+
+    it('does not record dappSuggestedGasFees when transaction origin is "metamask"', function () {
+      const txParams = {
+        gas: GAS_LIMITS.SIMPLE,
+        from: '0x0000',
+        to: '0x000',
+        value: '0x0',
+        maxFeePerGas: '0x0',
+        maxPriorityFeePerGas: '0x0',
+      };
+      const generatedTransaction = txStateManager.generateTxMeta({
+        txParams,
+        origin: 'metamask',
+      });
+      assert.ok(generatedTransaction);
+      assert.strictEqual(generatedTransaction.dappSuggestedGasFees, null);
+    });
+
+    it('does not record dappSuggestedGasFees when transaction origin is not provided', function () {
+      const txParams = {
+        gas: GAS_LIMITS.SIMPLE,
+        from: '0x0000',
+        to: '0x000',
+        value: '0x0',
+        maxFeePerGas: '0x0',
+        maxPriorityFeePerGas: '0x0',
+      };
+      const generatedTransaction = txStateManager.generateTxMeta({
+        txParams,
+      });
+      assert.ok(generatedTransaction);
+      assert.strictEqual(generatedTransaction.dappSuggestedGasFees, null);
+    });
+  });
+
   describe('#clearUnapprovedTxs', function () {
     it('removes unapproved transactions', function () {
       const txMetas = [

From 9e86a03afa58cd728a05e150c1cd617fbdc2c657 Mon Sep 17 00:00:00 2001
From: sooyoung <hyunsy822@gmail.com>
Date: Wed, 30 Jun 2021 05:08:31 +0900
Subject: [PATCH 065/141] add scroll function to jump to the top of screen
 (#11386)

* add scroll function to jump to the top of screen

* moved the scroll function from transaction-list.js to asset.js
---
 ui/pages/asset/asset.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/ui/pages/asset/asset.js b/ui/pages/asset/asset.js
index cafdb2285..f10743a76 100644
--- a/ui/pages/asset/asset.js
+++ b/ui/pages/asset/asset.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { Redirect, useParams } from 'react-router-dom';
 import { getTokens } from '../../ducks/metamask/metamask';
@@ -14,6 +14,11 @@ const Asset = () => {
 
   const token = tokens.find(({ address }) => address === asset);
 
+  useEffect(() => {
+    const el = document.querySelector('.app');
+    el.scroll(0, 0);
+  }, []);
+
   let content;
   if (token) {
     content = <TokenAsset token={token} />;

From 8f371e4f87df81227c4b22ff55c51e4889a60c2b Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Tue, 29 Jun 2021 16:54:42 -0500
Subject: [PATCH 066/141] add eip-1559 fields to event schema (#11408)

* add eip-1559 fields to event schema

* add gas_limit to all
---
 app/scripts/controllers/transactions/index.js | 23 +++++--
 .../controllers/transactions/index.test.js    | 63 ++++++++++++++++++-
 2 files changed, 77 insertions(+), 9 deletions(-)

diff --git a/app/scripts/controllers/transactions/index.js b/app/scripts/controllers/transactions/index.js
index 60ad40f91..01c6a4727 100644
--- a/app/scripts/controllers/transactions/index.js
+++ b/app/scripts/controllers/transactions/index.js
@@ -29,6 +29,7 @@ import {
   MAINNET,
   NETWORK_TYPE_RPC,
 } from '../../../../shared/constants/network';
+import { isEIP1559Transaction } from '../../../../shared/modules/transaction.utils';
 import TransactionStateManager from './tx-state-manager';
 import TxGasUtil from './tx-gas-utils';
 import PendingTransactionTracker from './pending-tx-tracker';
@@ -689,10 +690,7 @@ export default class TransactionController extends EventEmitter {
 
     this.txStateManager.setTxStatusSubmitted(txId);
 
-    const { gas } = txMeta.txParams;
-    this._trackTransactionMetricsEvent(txMeta, TRANSACTION_EVENTS.SUBMITTED, {
-      gas_limit: gas,
-    });
+    this._trackTransactionMetricsEvent(txMeta, TRANSACTION_EVENTS.SUBMITTED);
   }
 
   /**
@@ -1127,11 +1125,20 @@ export default class TransactionController extends EventEmitter {
       status,
       chainId,
       origin: referrer,
-      txParams: { gasPrice },
+      txParams: { gasPrice, gas: gasLimit, maxFeePerGas, maxPriorityFeePerGas },
       metamaskNetworkId: network,
     } = txMeta;
     const source = referrer === 'metamask' ? 'user' : 'dapp';
 
+    const gasParams = {};
+
+    if (isEIP1559Transaction(txMeta)) {
+      gasParams.max_fee_per_gas = maxFeePerGas;
+      gasParams.max_priority_fee_per_gas = maxPriorityFeePerGas;
+    } else {
+      gasParams.gas_price = gasPrice;
+    }
+
     this._trackMetaMetricsEvent({
       event,
       category: 'Transactions',
@@ -1142,8 +1149,12 @@ export default class TransactionController extends EventEmitter {
         source,
         network,
         chain_id: chainId,
-        gas_price: gasPrice,
+        transaction_envelope_type: isEIP1559Transaction(txMeta)
+          ? 'fee-market'
+          : 'legacy',
         first_seen: time,
+        gas_limit: gasLimit,
+        ...gasParams,
         ...extraParams,
       },
     });
diff --git a/app/scripts/controllers/transactions/index.test.js b/app/scripts/controllers/transactions/index.test.js
index c60c5d6ea..1b8172394 100644
--- a/app/scripts/controllers/transactions/index.test.js
+++ b/app/scripts/controllers/transactions/index.test.js
@@ -482,6 +482,7 @@ describe('Transaction Controller', function () {
           nonce: '0x4b',
         },
         type: 'sentEther',
+        transaction_envelope_type: 'legacy',
         origin: 'metamask',
         chainId: currentChainId,
         time: 1624408066355,
@@ -838,9 +839,6 @@ describe('Transaction Controller', function () {
         trackTransactionMetricsEventSpy.getCall(0).args[1],
         TRANSACTION_EVENTS.SUBMITTED,
       );
-      assert.deepEqual(trackTransactionMetricsEventSpy.getCall(0).args[2], {
-        gas_limit: txMeta.txParams.gas,
-      });
     });
   });
 
@@ -1221,7 +1219,9 @@ describe('Transaction Controller', function () {
         sensitiveProperties: {
           chain_id: '0x2a',
           gas_price: '0x77359400',
+          gas_limit: '0x7b0d',
           first_seen: 1624408066355,
+          transaction_envelope_type: 'legacy',
           network: '42',
           referrer: 'metamask',
           source: 'user',
@@ -1264,7 +1264,9 @@ describe('Transaction Controller', function () {
         sensitiveProperties: {
           chain_id: '0x2a',
           gas_price: '0x77359400',
+          gas_limit: '0x7b0d',
           first_seen: 1624408066355,
+          transaction_envelope_type: 'legacy',
           network: '42',
           referrer: 'other',
           source: 'dapp',
@@ -1309,7 +1311,62 @@ describe('Transaction Controller', function () {
           foo: 'bar',
           chain_id: '0x2a',
           gas_price: '0x77359400',
+          gas_limit: '0x7b0d',
           first_seen: 1624408066355,
+          transaction_envelope_type: 'legacy',
+          network: '42',
+          referrer: 'other',
+          source: 'dapp',
+          status: 'unapproved',
+          type: 'sentEther',
+        },
+      };
+
+      txController._trackTransactionMetricsEvent(
+        txMeta,
+        TRANSACTION_EVENTS.ADDED,
+        {
+          baz: 3.0,
+          foo: 'bar',
+        },
+      );
+      assert.equal(trackMetaMetricsEventSpy.callCount, 1);
+      assert.deepEqual(
+        trackMetaMetricsEventSpy.getCall(0).args[0],
+        expectedPayload,
+      );
+    });
+
+    it('should call _trackMetaMetricsEvent with the correct payload (EIP-1559)', function () {
+      const txMeta = {
+        id: 1,
+        status: TRANSACTION_STATUSES.UNAPPROVED,
+        txParams: {
+          from: fromAccount.address,
+          to: '0x1678a085c290ebd122dc42cba69373b5953b831d',
+          maxFeePerGas: '0x77359400',
+          maxPriorityFeePerGas: '0x77359400',
+          gas: '0x7b0d',
+          nonce: '0x4b',
+        },
+        type: 'sentEther',
+        origin: 'other',
+        chainId: currentChainId,
+        time: 1624408066355,
+        metamaskNetworkId: currentNetworkId,
+      };
+      const expectedPayload = {
+        event: 'Transaction Added',
+        category: 'Transactions',
+        sensitiveProperties: {
+          baz: 3.0,
+          foo: 'bar',
+          chain_id: '0x2a',
+          max_fee_per_gas: '0x77359400',
+          max_priority_fee_per_gas: '0x77359400',
+          gas_limit: '0x7b0d',
+          first_seen: 1624408066355,
+          transaction_envelope_type: 'fee-market',
           network: '42',
           referrer: 'other',
           source: 'dapp',

From b9cf309404e54d7778afb6a039703a62627ddf64 Mon Sep 17 00:00:00 2001
From: Etienne Dusseault <etienne.dusseault@gmail.com>
Date: Wed, 30 Jun 2021 12:37:03 +0800
Subject: [PATCH 067/141] don't run subprocesses in lavamoat if main process
 not run in lavamoat (#11417)

---
 development/build/task.js | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/development/build/task.js b/development/build/task.js
index bc6f92005..b6e0f554b 100644
--- a/development/build/task.js
+++ b/development/build/task.js
@@ -68,9 +68,20 @@ function runInChildProcess(task) {
     );
   }
   return instrumentForTaskStats(taskName, async () => {
-    const childProcess = spawn('yarn', ['build', taskName, '--skip-stats'], {
-      env: process.env,
-    });
+    let childProcess;
+    // don't run subprocesses in lavamoat for dev mode if main process not run in lavamoat
+    if (
+      taskName.includes('scripts:core:dev') &&
+      !process.argv[0].includes('lavamoat')
+    ) {
+      childProcess = spawn('yarn', ['build:dev', taskName, '--skip-stats'], {
+        env: process.env,
+      });
+    } else {
+      childProcess = spawn('yarn', ['build', taskName, '--skip-stats'], {
+        env: process.env,
+      });
+    }
     // forward logs to main process
     // skip the first stdout event (announcing the process command)
     childProcess.stdout.once('data', () => {

From 27c140355e9561d08e94f658044227867e6bd1c4 Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Wed, 30 Jun 2021 09:39:00 -0500
Subject: [PATCH 068/141] Switch hardfork in getCommonConfiguration when
 EIP-1559 support is detected (#11385)

---
 app/scripts/controllers/transactions/index.js | 21 +++++++++++++------
 .../controllers/transactions/index.test.js    |  1 +
 app/scripts/metamask-controller.js            |  3 +++
 shared/constants/network.js                   | 21 +++++++++++++++++++
 4 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/app/scripts/controllers/transactions/index.js b/app/scripts/controllers/transactions/index.js
index 01c6a4727..a921ad52b 100644
--- a/app/scripts/controllers/transactions/index.js
+++ b/app/scripts/controllers/transactions/index.js
@@ -26,6 +26,7 @@ import {
 import { METAMASK_CONTROLLER_EVENTS } from '../../metamask-controller';
 import { GAS_LIMITS } from '../../../../shared/constants/gas';
 import {
+  HARDFORKS,
   MAINNET,
   NETWORK_TYPE_RPC,
 } from '../../../../shared/constants/network';
@@ -35,8 +36,6 @@ import TxGasUtil from './tx-gas-utils';
 import PendingTransactionTracker from './pending-tx-tracker';
 import * as txUtils from './lib/util';
 
-const HARDFORK = 'berlin';
-
 const hstInterface = new ethers.utils.Interface(abi);
 
 const MAX_MEMSTORE_TX_LIST_SIZE = 100; // Number of transactions (by unique nonces) to keep in memory
@@ -82,6 +81,7 @@ export default class TransactionController extends EventEmitter {
     this.networkStore = opts.networkStore || new ObservableStore({});
     this._getCurrentChainId = opts.getCurrentChainId;
     this.getProviderConfig = opts.getProviderConfig;
+    this.getEIP1559Compatibility = opts.getEIP1559Compatibility;
     this.preferencesStore = opts.preferencesStore || new ObservableStore({});
     this.provider = opts.provider;
     this.getPermittedAccounts = opts.getPermittedAccounts;
@@ -171,14 +171,23 @@ export default class TransactionController extends EventEmitter {
    * transaction type to use.
    * @returns {Common} common configuration object
    */
-  getCommonConfiguration() {
+  async getCommonConfiguration() {
     const { type, nickname: name } = this.getProviderConfig();
+    const supportsEIP1559 = await this.getEIP1559Compatibility();
+
+    // This logic below will have to be updated each time a hardfork happens
+    // that carries with it a new Transaction type. It is inconsequential for
+    // hardforks that do not include new types.
+    const hardfork = supportsEIP1559 ? HARDFORKS.LONDON : HARDFORKS.BERLIN;
 
     // type will be one of our default network names or 'rpc'. the default
     // network names are sufficient configuration, simply pass the name as the
     // chain argument in the constructor.
     if (type !== NETWORK_TYPE_RPC) {
-      return new Common({ chain: type, hardfork: HARDFORK });
+      return new Common({
+        chain: type,
+        hardfork,
+      });
     }
 
     // For 'rpc' we need to use the same basic configuration as mainnet,
@@ -203,7 +212,7 @@ export default class TransactionController extends EventEmitter {
       networkId: networkId === 'loading' ? 0 : parseInt(networkId, 10),
     };
 
-    return Common.forCustomChain(MAINNET, customChainParams, HARDFORK);
+    return Common.forCustomChain(MAINNET, customChainParams, hardfork);
   }
 
   /**
@@ -637,7 +646,7 @@ export default class TransactionController extends EventEmitter {
     };
     // sign tx
     const fromAddress = txParams.from;
-    const common = this.getCommonConfiguration();
+    const common = await this.getCommonConfiguration();
     const unsignedEthTx = TransactionFactory.fromTxData(txParams, { common });
     const signedEthTx = await this.signEthTx(unsignedEthTx, fromAddress);
 
diff --git a/app/scripts/controllers/transactions/index.test.js b/app/scripts/controllers/transactions/index.test.js
index 1b8172394..26f15ccfb 100644
--- a/app/scripts/controllers/transactions/index.test.js
+++ b/app/scripts/controllers/transactions/index.test.js
@@ -50,6 +50,7 @@ describe('Transaction Controller', function () {
         return '0xee6b2800';
       },
       networkStore: new ObservableStore(currentNetworkId),
+      getEIP1559Compatibility: () => Promise.resolve(true),
       txHistoryLimit: 10,
       blockTracker: blockTrackerStub,
       signTransaction: (ethTx) =>
diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
index abe6d6c7a..20cb8655e 100644
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@@ -336,6 +336,9 @@ export default class MetamaskController extends EventEmitter {
       getProviderConfig: this.networkController.getProviderConfig.bind(
         this.networkController,
       ),
+      getEIP1559Compatibility: this.networkController.getEIP1559Compatibility.bind(
+        this.networkController,
+      ),
       networkStore: this.networkController.networkStore,
       getCurrentChainId: this.networkController.getCurrentChainId.bind(
         this.networkController,
diff --git a/shared/constants/network.js b/shared/constants/network.js
index 01891d57c..5e3d2b959 100644
--- a/shared/constants/network.js
+++ b/shared/constants/network.js
@@ -120,3 +120,24 @@ export const NATIVE_CURRENCY_TOKEN_IMAGE_MAP = {
 };
 
 export const INFURA_BLOCKED_KEY = 'countryBlocked';
+
+/**
+ * Hardforks are points in the chain where logic is changed significantly
+ * enough where there is a fork and the new fork becomes the active chain.
+ * These constants are presented in chronological order starting with BERLIN
+ * because when we first needed to track the hardfork we had launched support
+ * for EIP-2718 (where transactions can have types and different shapes) and
+ * EIP-2930 (optional access lists), which were included in BERLIN.
+ *
+ * BERLIN - forked at block number 12,244,000, included typed transactions and
+ *  optional access lists
+ * LONDON - future, upcoming fork that introduces the baseFeePerGas, an amount
+ *  of the ETH transaction fees that will be burned instead of given to the
+ *  miner. This change necessitated the third type of transaction envelope to
+ *  specify maxFeePerGas and maxPriorityFeePerGas moving the fee bidding system
+ *  to a second price auction model.
+ */
+export const HARDFORKS = {
+  BERLIN: 'berlin',
+  LONDON: 'london',
+};

From 5b08a6b94a877a34d7b3088e219dd341008dd260 Mon Sep 17 00:00:00 2001
From: Etienne Dusseault <etienne.dusseault@gmail.com>
Date: Wed, 30 Jun 2021 22:56:19 +0800
Subject: [PATCH 069/141] yarn build:dev for running build subprocess not in
 lavamoat (#11427)

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index c8fa7d063..34fd3bac6 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "start:lavamoat": "yarn build dev",
     "dist": "yarn build prod",
     "build": "lavamoat development/build/index.js",
+    "build:dev": "node development/build/index.js",
     "start:test": "yarn build testDev",
     "benchmark:chrome": "SELENIUM_BROWSER=chrome node test/e2e/benchmark.js",
     "benchmark:firefox": "SELENIUM_BROWSER=firefox node test/e2e/benchmark.js",

From 36d3770b4220be790e1707c801e3c92a40b4c4ec Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Wed, 30 Jun 2021 11:58:18 -0500
Subject: [PATCH 070/141] EIP-1559 - Implement TransactionDetail for
 confirmations (#11404)

---
 app/_locales/en/messages.json                 |   6 +
 .../transaction-detail-item.component.js      |   6 +-
 .../confirm-transaction-base.component.js     | 119 +++++++++++++-----
 3 files changed, 101 insertions(+), 30 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 14dd7ba9f..316e8ec2d 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -2367,6 +2367,12 @@
   "transactionCreated": {
     "message": "Transaction created with a value of $1 at $2."
   },
+  "transactionDetailGasHeading": {
+    "message": "Estimated gas fee"
+  },
+  "transactionDetailGasTotalSubtitle": {
+    "message": "Amount + gas fee"
+  },
   "transactionDropped": {
     "message": "Transaction dropped at $2."
   },
diff --git a/ui/components/app/transaction-detail-item/transaction-detail-item.component.js b/ui/components/app/transaction-detail-item/transaction-detail-item.component.js
index e08a912ab..c9bc72b32 100644
--- a/ui/components/app/transaction-detail-item/transaction-detail-item.component.js
+++ b/ui/components/app/transaction-detail-item/transaction-detail-item.component.js
@@ -27,13 +27,17 @@ export default function TransactionDetailItem({
           {detailTitle}
         </Typography>
         {detailText && (
-          <Typography className="transaction-detail-item__detail-text">
+          <Typography
+            variant={TYPOGRAPHY.H6}
+            className="transaction-detail-item__detail-text"
+          >
             {detailText}
           </Typography>
         )}
         <Typography
           color={COLORS.BLACK}
           fontWeight={FONT_WEIGHT.BOLD}
+          variant={TYPOGRAPHY.H6}
           className="transaction-detail-item__total"
         >
           {detailTotal}
diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
index 242060eb3..e58b30c2e 100644
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -31,6 +31,10 @@ import { getTransactionTypeTitle } from '../../helpers/utils/transactions.util';
 import ErrorMessage from '../../components/ui/error-message';
 import { toBuffer } from '../../../shared/modules/buffer-utils';
 
+import TransactionDetail from '../../components/app/transaction-detail/transaction-detail.component';
+import TransactionDetailItem from '../../components/app/transaction-detail-item/transaction-detail-item.component';
+import InfoTooltip from '../../components/ui/info-tooltip/info-tooltip';
+
 export default class ConfirmTransactionBase extends Component {
   static contextTypes = {
     t: PropTypes.func,
@@ -301,6 +305,91 @@ export default class ConfirmTransactionBase extends Component {
       />
     );
 
+    const nonceField = useNonceField ? (
+      <div>
+        <div className="confirm-detail-row">
+          <div className="confirm-detail-row__label">
+            {t('nonceFieldHeading')}
+          </div>
+          <div className="custom-nonce-input">
+            <TextField
+              type="number"
+              min="0"
+              placeholder={
+                typeof nextNonce === 'number' ? nextNonce.toString() : null
+              }
+              onChange={({ target: { value } }) => {
+                if (!value.length || Number(value) < 0) {
+                  updateCustomNonce('');
+                } else {
+                  updateCustomNonce(String(Math.floor(value)));
+                }
+                getNextNonce();
+              }}
+              fullWidth
+              margin="dense"
+              value={customNonceValue || ''}
+            />
+          </div>
+        </div>
+      </div>
+    ) : null;
+
+    if (process.env.SHOW_EIP_1559_UI) {
+      return (
+        <div className="confirm-page-container-content__details">
+          <TransactionDetail
+            rows={[
+              <TransactionDetailItem
+                key="gas-item"
+                detailTitle={
+                  <>
+                    {t('transactionDetailGasHeading')}
+                    <InfoTooltip contentText="" position="top">
+                      <i className="fa fa-info-circle" />
+                    </InfoTooltip>
+                  </>
+                }
+                detailText={
+                  <UserPreferencedCurrencyDisplay
+                    type={PRIMARY}
+                    value={hexTransactionFee}
+                    hideLabel={false}
+                  />
+                }
+                detailTotal={
+                  <UserPreferencedCurrencyDisplay
+                    type={SECONDARY}
+                    value={hexTransactionFee}
+                    hideLabel
+                  />
+                }
+              />,
+              <TransactionDetailItem
+                key="total-item"
+                detailTitle={t('total')}
+                detailText={
+                  <UserPreferencedCurrencyDisplay
+                    type={PRIMARY}
+                    value={hexTransactionTotal}
+                    hideLabel={false}
+                  />
+                }
+                detailTotal={
+                  <UserPreferencedCurrencyDisplay
+                    type={SECONDARY}
+                    value={hexTransactionTotal}
+                    hideLabel
+                  />
+                }
+                subTitle={t('transactionDetailGasTotalSubtitle')}
+              />,
+            ]}
+          />
+        </div>
+      );
+    }
+
     return (
       <div className="confirm-page-container-content__details">
         <div className="confirm-page-container-content__gas-fee">
@@ -350,35 +439,7 @@ export default class ConfirmTransactionBase extends Component {
             primaryValueTextColor="#2f9ae0"
           />
         </div>
-        {useNonceField ? (
-          <div>
-            <div className="confirm-detail-row">
-              <div className="confirm-detail-row__label">
-                {t('nonceFieldHeading')}
-              </div>
-              <div className="custom-nonce-input">
-                <TextField
-                  type="number"
-                  min="0"
-                  placeholder={
-                    typeof nextNonce === 'number' ? nextNonce.toString() : null
-                  }
-                  onChange={({ target: { value } }) => {
-                    if (!value.length || Number(value) < 0) {
-                      updateCustomNonce('');
-                    } else {
-                      updateCustomNonce(String(Math.floor(value)));
-                    }
-                    getNextNonce();
-                  }}
-                  fullWidth
-                  margin="dense"
-                  value={customNonceValue || ''}
-                />
-              </div>
-            </div>
-          </div>
-        ) : null}
+        {nonceField}
       </div>
     );
   }

From 433cf6339d9d3bea873c96a5961fa31bc8ce4bb7 Mon Sep 17 00:00:00 2001
From: Alex Donesky <adonesky@gmail.com>
Date: Wed, 30 Jun 2021 13:20:13 -0500
Subject: [PATCH 071/141] refix the instance of unsafe destructuring I had
 introduced and fixed and then reintroduced (#11428)

---
 ui/selectors/confirm-transaction.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/ui/selectors/confirm-transaction.js b/ui/selectors/confirm-transaction.js
index c721e12b1..08c40cda8 100644
--- a/ui/selectors/confirm-transaction.js
+++ b/ui/selectors/confirm-transaction.js
@@ -223,9 +223,7 @@ export const transactionFeeSelector = function (state, txData) {
 
   // if the gas price from our infura endpoint is null or undefined
   // use the metaswap average price estimation as a fallback
-  let {
-    txParams: { gasPrice },
-  } = txData;
+  let { txParams: { gasPrice } = {} } = txData;
 
   if (!gasPrice) {
     gasPrice = getAveragePriceEstimateInHexWEI(state) || '0x0';

From ad6715511e7d9241ceaaf4a20ec55029940cca90 Mon Sep 17 00:00:00 2001
From: Alex Donesky <adonesky@gmail.com>
Date: Wed, 30 Jun 2021 13:21:48 -0500
Subject: [PATCH 072/141] make network-display component only clickable when
 passed a function for onClick (#11379)

---
 ui/components/app/network-display/index.scss         | 6 ++++--
 ui/components/app/network-display/network-display.js | 1 +
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/ui/components/app/network-display/index.scss b/ui/components/app/network-display/index.scss
index fdfdc3302..78fe71f56 100644
--- a/ui/components/app/network-display/index.scss
+++ b/ui/components/app/network-display/index.scss
@@ -5,7 +5,6 @@
   padding: 0 10px;
   border-radius: 4px;
   min-height: 25px;
-  cursor: pointer;
   user-select: none;
 
   &--disabled {
@@ -36,7 +35,6 @@
     background-color: lighten($dodger-blue, 35%);
   }
 
-
   & .chip__label {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -56,4 +54,8 @@
     width: 12px;
     display: block;
   }
+
+  &--clickable {
+    cursor: pointer;
+  }
 }
diff --git a/ui/components/app/network-display/network-display.js b/ui/components/app/network-display/network-display.js
index 87b851535..935f36c53 100644
--- a/ui/components/app/network-display/network-display.js
+++ b/ui/components/app/network-display/network-display.js
@@ -74,6 +74,7 @@ export default function NetworkDisplay({
         'network-display--colored': colored,
         'network-display--disabled': disabled,
         [`network-display--${networkType}`]: colored && networkType,
+        'network-display--clickable': typeof onClick === 'function',
       })}
       labelProps={{
         variant: TYPOGRAPHY.H7,

From 18464793f50f9388894b706c686720de8f02cee9 Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Wed, 30 Jun 2021 15:56:34 -0230
Subject: [PATCH 073/141] Fix gas-modal-page-container.container check for
 custom gas price safety (#11426)

* Fix gas-modal-page-container.container check for custom gas price safety

* Ensure gas price has been fetch before checking for price safety on testnets
---
 .../gas-modal-page-container.container.js           | 13 +++++++++----
 ui/selectors/custom-gas.js                          | 13 +++++++++++++
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js b/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
index b2f619ac7..a0e399dc6 100644
--- a/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
+++ b/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
@@ -41,6 +41,7 @@ import {
   isCustomPriceExcessive,
   getIsGasEstimatesFetched,
   getShouldShowFiat,
+  getIsCustomNetworkGasPriceFetched,
 } from '../../../../selectors';
 
 import {
@@ -137,13 +138,17 @@ const mapStateToProps = (state, ownProps) => {
         conversionRate,
       });
   const isGasEstimate = getIsGasEstimatesFetched(state);
+  const customNetworkEstimateWasFetched = getIsCustomNetworkGasPriceFetched(
+    state,
+  );
 
-  let customPriceIsSafe;
+  let customPriceIsSafe = true;
   if ((isMainnet || process.env.IN_TEST) && isGasEstimate) {
     customPriceIsSafe = isCustomPriceSafe(state);
-  } else if (isTestnet) {
-    customPriceIsSafe = true;
-  } else {
+  } else if (
+    !(isMainnet || process.env.IN_TEST || isTestnet) &&
+    customNetworkEstimateWasFetched
+  ) {
     customPriceIsSafe = isCustomPriceSafeForCustomNetwork(state);
   }
 
diff --git a/ui/selectors/custom-gas.js b/ui/selectors/custom-gas.js
index a357bf758..c36742204 100644
--- a/ui/selectors/custom-gas.js
+++ b/ui/selectors/custom-gas.js
@@ -105,6 +105,10 @@ export function isCustomPriceSafeForCustomNetwork(state) {
     return true;
   }
 
+  if (!estimatedPrice) {
+    return false;
+  }
+
   const customPriceSafe = conversionGreaterThan(
     {
       value: customGasPrice,
@@ -382,6 +386,15 @@ export function getIsEthGasPriceFetched(state) {
   );
 }
 
+export function getIsCustomNetworkGasPriceFetched(state) {
+  const gasState = state.gas;
+  return Boolean(
+    gasState.estimateSource === GAS_SOURCE.ETHGASPRICE &&
+      gasState.basicEstimateStatus === BASIC_ESTIMATE_STATES.READY &&
+      !getIsMainnet(state),
+  );
+}
+
 export function getNoGasPriceFetched(state) {
   const gasState = state.gas;
   return Boolean(gasState.basicEstimateStatus === BASIC_ESTIMATE_STATES.FAILED);

From 0037416251d378696d13f1a5cf4fe5983350deae Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 30 Jun 2021 16:51:54 -0230
Subject: [PATCH 074/141] Bump @metamask/auto-changelog from 2.3.0 to 2.4.0
 (#11422)

Bumps [@metamask/auto-changelog](https://github.com/MetaMask/auto-changelog) from 2.3.0 to 2.4.0.
- [Release notes](https://github.com/MetaMask/auto-changelog/releases)
- [Changelog](https://github.com/MetaMask/auto-changelog/blob/main/CHANGELOG.md)
- [Commits](https://github.com/MetaMask/auto-changelog/compare/v2.3.0...v2.4.0)

---
updated-dependencies:
- dependency-name: "@metamask/auto-changelog"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 yarn.lock | 47 ++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 42 insertions(+), 5 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 430a702bd..89c71a15f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2637,12 +2637,12 @@
     react-is "^16.8.0"
 
 "@metamask/auto-changelog@^2.1.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@metamask/auto-changelog/-/auto-changelog-2.3.0.tgz#e8edf9210753b495d799b64af07de24ed0839004"
-  integrity sha512-l5Tk9Dx1+wF3L1ZvN+HObS7R077BDErRmElq5LckJTtAbAhEhg/MMD/6u2yZBmVIlPrint29BVt3tsqRp1GjIA==
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@metamask/auto-changelog/-/auto-changelog-2.4.0.tgz#d249034a5010060e4db2addfc27863787fe4546c"
+  integrity sha512-6kIeKT4vy18dKUQEIsfIwVGBHDcLO3jBZB0klRDD+CayAqjh3Rcpi/AXr6NPI+c0rF802vAbqMX+/KFaU3scVg==
   dependencies:
-    cross-spawn "^7.0.3"
     diff "^5.0.0"
+    execa "^5.1.1"
     semver "^7.3.5"
     yargs "^17.0.1"
 
@@ -11407,6 +11407,21 @@ execa@^4.0.0:
     signal-exit "^3.0.2"
     strip-final-newline "^2.0.0"
 
+execa@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
+  integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==
+  dependencies:
+    cross-spawn "^7.0.3"
+    get-stream "^6.0.0"
+    human-signals "^2.1.0"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.1"
+    onetime "^5.1.2"
+    signal-exit "^3.0.3"
+    strip-final-newline "^2.0.0"
+
 execall@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/execall/-/execall-2.0.0.tgz#16a06b5fe5099df7d00be5d9c06eecded1663b45"
@@ -12625,6 +12640,11 @@ get-stream@^5.0.0, get-stream@^5.1.0:
   dependencies:
     pump "^3.0.0"
 
+get-stream@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
+  integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
+
 get-uri@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/get-uri/-/get-uri-2.0.2.tgz#5c795e71326f6ca1286f2fc82575cd2bab2af578"
@@ -13759,6 +13779,11 @@ human-signals@^1.1.1:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
   integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
 
+human-signals@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
+  integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
+
 human-standard-collectible-abi@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/human-standard-collectible-abi/-/human-standard-collectible-abi-1.0.2.tgz#077bae9ed1b0b0b82bc46932104b4b499c941aa0"
@@ -19244,7 +19269,7 @@ npm-run-path@^2.0.0:
   dependencies:
     path-key "^2.0.0"
 
-npm-run-path@^4.0.0:
+npm-run-path@^4.0.0, npm-run-path@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
   integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
@@ -19603,6 +19628,13 @@ onetime@^5.1.0:
   dependencies:
     mimic-fn "^2.1.0"
 
+onetime@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
+  integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
+  dependencies:
+    mimic-fn "^2.1.0"
+
 only@~0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/only/-/only-0.0.2.tgz#2afde84d03e50b9a8edc444e30610a70295edfb4"
@@ -23838,6 +23870,11 @@ signal-exit@^3.0.0, signal-exit@^3.0.2:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
   integrity sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=
 
+signal-exit@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
+  integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
+
 signed-varint@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/signed-varint/-/signed-varint-2.0.1.tgz#50a9989da7c98c2c61dad119bc97470ef8528129"

From 9889d070cd03541ec2deb5121f27df5e5f26b6fd Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 30 Jun 2021 14:14:35 -0700
Subject: [PATCH 075/141] Bump @metamask/contract-metadata from 1.26.0 to
 1.27.0 (#11430)

Bumps [@metamask/contract-metadata](https://github.com/MetaMask/contract-metadata) from 1.26.0 to 1.27.0.
- [Release notes](https://github.com/MetaMask/contract-metadata/releases)
- [Commits](https://github.com/MetaMask/contract-metadata/compare/v1.26.0...v1.27.0)

---
updated-dependencies:
- dependency-name: "@metamask/contract-metadata"
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 yarn.lock | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 89c71a15f..1a573d5c7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2646,15 +2646,10 @@
     semver "^7.3.5"
     yargs "^17.0.1"
 
-"@metamask/contract-metadata@^1.19.0", "@metamask/contract-metadata@^1.25.0":
-  version "1.25.0"
-  resolved "https://registry.yarnpkg.com/@metamask/contract-metadata/-/contract-metadata-1.25.0.tgz#442ace91fb40165310764b68d8096d0017bb0492"
-  integrity sha512-yhmYB9CQPv0dckNcPoWDcgtrdUp0OgK0uvkRE5QIBv4b3qENI1/03BztvK2ijbTuMlORUpjPq7/1MQDUPoRPVw==
-
-"@metamask/contract-metadata@^1.26.0":
-  version "1.26.0"
-  resolved "https://registry.yarnpkg.com/@metamask/contract-metadata/-/contract-metadata-1.26.0.tgz#06be4f4dc645da69f6364f75cb2bd47afa642fe6"
-  integrity sha512-58A8csapIPoc854n6AI+3jwJcQfh75BzVrl6SAySgJ9fWTa1XItm9Tx/ORaqYrwaR/9JqH4SnkbXtqyFwuUL6w==
+"@metamask/contract-metadata@^1.19.0", "@metamask/contract-metadata@^1.25.0", "@metamask/contract-metadata@^1.26.0":
+  version "1.27.0"
+  resolved "https://registry.yarnpkg.com/@metamask/contract-metadata/-/contract-metadata-1.27.0.tgz#1e65b821bad6f7d8313dd881116e4366b0662f75"
+  integrity sha512-ZAvuROiHjSksy40buCL4M6m16bAmXQl6vjllK/XQxt9+UElhwJSp7PJ1ZULuZXmznBBY64WXlCPjm94JhW4l3g==
 
 "@metamask/controllers@^10.0.0":
   version "10.1.0"

From a60301686c5bc1593713eb91a0afef4b5df235ac Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Wed, 30 Jun 2021 23:24:47 -0230
Subject: [PATCH 076/141] Ensure that eth_estimateGas is called to estimate gas
 limit for simple sends on custom networks (#11418)

* Ensure that eth_estimateGas is called to estimate gas limit for simple sends on custom networks

* getIsNonStandardEthChain returns false when in test

* Add comment explaining gas limit buffer multipliers in estimateGasLimitForSend
---
 ui/ducks/send/send.js      | 53 ++++++++++++++++++++++++++++----------
 ui/ducks/send/send.test.js |  9 +++++++
 ui/selectors/selectors.js  |  4 +++
 3 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/ui/ducks/send/send.js b/ui/ducks/send/send.js
index 3ed41512b..c8e926296 100644
--- a/ui/ducks/send/send.js
+++ b/ui/ducks/send/send.js
@@ -37,6 +37,7 @@ import {
   getIsMainnet,
   getSelectedAddress,
   getTargetAccount,
+  getIsNonStandardEthChain,
 } from '../../selectors';
 import {
   displayWarning,
@@ -174,8 +175,11 @@ async function estimateGasLimitForSend({
   sendToken,
   to,
   data,
+  isNonStandardEthChain,
   ...options
 }) {
+  let isSimpleSendOnNonStandardNetwork = false;
+
   // blockGasLimit may be a falsy, but defined, value when we receive it from
   // state, so we use logical or to fall back to MIN_GAS_LIMIT_HEX.
   const blockGasLimit = options.blockGasLimit || MIN_GAS_LIMIT_HEX;
@@ -211,8 +215,10 @@ async function estimateGasLimitForSend({
       // Geth will return '0x', and ganache-core v2.2.1 will return '0x0'
       const contractCodeIsEmpty =
         !contractCode || contractCode === '0x' || contractCode === '0x0';
-      if (contractCodeIsEmpty) {
+      if (contractCodeIsEmpty && !isNonStandardEthChain) {
         return GAS_LIMITS.SIMPLE;
+      } else if (contractCodeIsEmpty && isNonStandardEthChain) {
+        isSimpleSendOnNonStandardNetwork = true;
       }
     }
 
@@ -231,17 +237,33 @@ async function estimateGasLimitForSend({
     }
   }
 
-  // If we do not yet have a gasLimit, we must call into our background
-  // process to get an estimate for gasLimit based on known parameters.
+  if (!isSimpleSendOnNonStandardNetwork) {
+    // If we do not yet have a gasLimit, we must call into our background
+    // process to get an estimate for gasLimit based on known parameters.
+
+    paramsForGasEstimate.gas = addHexPrefix(
+      multiplyCurrencies(blockGasLimit, 0.95, {
+        multiplicandBase: 16,
+        multiplierBase: 10,
+        roundDown: '0',
+        toNumericBase: 'hex',
+      }),
+    );
+  }
+
+  // The buffer multipler reduces transaction failures by ensuring that the
+  // estimated gas is always sufficient. Without the multiplier, estimates
+  // for contract interactions can become inaccurate over time. This is because
+  // gas estimation is non-deterministic. The gas required for the exact same
+  // transaction call can change based on state of a contract or changes in the
+  // contracts environment (blockchain data or contracts it interacts with).
+  // Applying the 1.5 buffer has proven to be a useful guard against this non-
+  // deterministic behaviour.
+  //
+  // Gas estimation of simple sends should, however, be deterministic. As such
+  // no buffer is needed in those cases.
+  const bufferMultiplier = isSimpleSendOnNonStandardNetwork ? 1 : 1.5;
 
-  paramsForGasEstimate.gas = addHexPrefix(
-    multiplyCurrencies(blockGasLimit, 0.95, {
-      multiplicandBase: 16,
-      multiplierBase: 10,
-      roundDown: '0',
-      toNumericBase: 'hex',
-    }),
-  );
   try {
     // call into the background process that will simulate transaction
     // execution on the node and return an estimate of gasLimit
@@ -249,7 +271,7 @@ async function estimateGasLimitForSend({
     const estimateWithBuffer = addGasBuffer(
       estimatedGasLimit,
       blockGasLimit,
-      1.5,
+      bufferMultiplier,
     );
     return addHexPrefix(estimateWithBuffer);
   } catch (error) {
@@ -303,7 +325,9 @@ export async function getERC20Balance(token, accountAddress) {
 export const computeEstimatedGasLimit = createAsyncThunk(
   'send/computeEstimatedGasLimit',
   async (_, thunkApi) => {
-    const { send, metamask } = thunkApi.getState();
+    const state = thunkApi.getState();
+    const { send, metamask } = state;
+    const isNonStandardEthChain = getIsNonStandardEthChain(state);
     if (send.stage !== SEND_STAGES.EDIT) {
       const gasLimit = await estimateGasLimitForSend({
         gasPrice: send.gas.gasPrice,
@@ -313,6 +337,7 @@ export const computeEstimatedGasLimit = createAsyncThunk(
         to: send.recipient.address?.toLowerCase(),
         value: send.amount.value,
         data: send.draftTransaction.userInputHexData,
+        isNonStandardEthChain,
       });
       await thunkApi.dispatch(setCustomGasLimit(gasLimit));
       return {
@@ -337,6 +362,7 @@ export const initializeSendState = createAsyncThunk(
   'send/initializeSendState',
   async (_, thunkApi) => {
     const state = thunkApi.getState();
+    const isNonStandardEthChain = getIsNonStandardEthChain(state);
     const {
       send: { asset, stage, recipient, amount, draftTransaction },
       metamask,
@@ -383,6 +409,7 @@ export const initializeSendState = createAsyncThunk(
         to: recipient.address.toLowerCase(),
         value: amount.value,
         data: draftTransaction.userInputHexData,
+        isNonStandardEthChain,
       });
       gasLimit = estimatedGasLimit || gasLimit;
     }
diff --git a/ui/ducks/send/send.test.js b/ui/ducks/send/send.test.js
index b4918d01d..57f84071f 100644
--- a/ui/ducks/send/send.test.js
+++ b/ui/ducks/send/send.test.js
@@ -1113,6 +1113,9 @@ describe('Send Slice', () => {
           metamask: {
             blockGasLimit: '',
             selectedAddress: '',
+            provider: {
+              chainId: '0x1',
+            },
           },
           ...defaultSendAmountState.send,
           send: {
@@ -1160,6 +1163,9 @@ describe('Send Slice', () => {
         metamask: {
           blockGasLimit: '',
           selectedAddress: '',
+          provider: {
+            chainId: '0x1',
+          },
         },
         send: {
           account: {
@@ -1372,6 +1378,9 @@ describe('Send Slice', () => {
           metamask: {
             blockGasLimit: '',
             selectedAddress: '',
+            provider: {
+              chainId: '0x1',
+            },
           },
           send: {
             account: {
diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js
index 615d7df51..e3d090c85 100644
--- a/ui/selectors/selectors.js
+++ b/ui/selectors/selectors.js
@@ -376,6 +376,10 @@ export function getIsTestnet(state) {
   return TEST_CHAINS.includes(chainId);
 }
 
+export function getIsNonStandardEthChain(state) {
+  return !(getIsMainnet(state) || getIsTestnet(state) || process.env.IN_TEST);
+}
+
 export function getPreferences({ metamask }) {
   return metamask.preferences;
 }

From 43b7eab46a207c43afe0f4d1eb49e528a8f9fa80 Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Wed, 30 Jun 2021 23:41:39 -0700
Subject: [PATCH 077/141] Fixing invalid minimumGasLimit prop
 (AdvancedGasInputs) (#11412)

---
 .../advanced-gas-inputs/advanced-gas-inputs.component.js   | 2 --
 .../advanced-gas-inputs/advanced-gas-inputs.container.js   | 7 +++++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/ui/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js b/ui/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js
index a775cec65..21a76c41a 100644
--- a/ui/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js
+++ b/ui/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { debounce } from 'lodash';
 import Tooltip from '../../../ui/tooltip';
-import { MIN_GAS_LIMIT_DEC } from '../../../../pages/send/send.constants';
 
 export default class AdvancedGasInputs extends Component {
   static contextTypes = {
@@ -24,7 +23,6 @@ export default class AdvancedGasInputs extends Component {
   };
 
   static defaultProps = {
-    minimumGasLimit: Number(MIN_GAS_LIMIT_DEC),
     customPriceIsExcessive: false,
   };
 
diff --git a/ui/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.container.js b/ui/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.container.js
index 45cdaaa38..09eb26fdd 100644
--- a/ui/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.container.js
+++ b/ui/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.container.js
@@ -4,6 +4,7 @@ import {
   decimalToHex,
   hexWEIToDecGWEI,
 } from '../../../../helpers/utils/conversions.util';
+import { MIN_GAS_LIMIT_DEC } from '../../../../pages/send/send.constants';
 import AdvancedGasInputs from './advanced-gas-inputs.component';
 
 function convertGasPriceForInputs(gasPriceInHexWEI) {
@@ -14,12 +15,17 @@ function convertGasLimitForInputs(gasLimitInHexWEI) {
   return parseInt(gasLimitInHexWEI, 16) || 0;
 }
 
+function convertMinimumGasLimitForInputs(minimumGasLimit = MIN_GAS_LIMIT_DEC) {
+  return parseInt(minimumGasLimit, 10);
+}
+
 const mergeProps = (stateProps, dispatchProps, ownProps) => {
   const {
     customGasPrice,
     customGasLimit,
     updateCustomGasPrice,
     updateCustomGasLimit,
+    minimumGasLimit,
   } = ownProps;
   return {
     ...ownProps,
@@ -27,6 +33,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     ...dispatchProps,
     customGasPrice: convertGasPriceForInputs(customGasPrice),
     customGasLimit: convertGasLimitForInputs(customGasLimit),
+    minimumGasLimit: convertMinimumGasLimitForInputs(minimumGasLimit),
     updateCustomGasPrice: (price) =>
       updateCustomGasPrice(decGWEIToHexWEI(price)),
     updateCustomGasLimit: (limit) => updateCustomGasLimit(decimalToHex(limit)),

From 64644ad3804c2217634147658eeea15ef710a283 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Thu, 1 Jul 2021 09:36:48 -0500
Subject: [PATCH 078/141] Implement Dapp Acknowledgement screen for editing gas
 (#11424)

---
 app/_locales/en/messages.json                 |  7 ++
 .../edit-gas-display.component.js             | 65 +++++++++++++++----
 .../edit-gas-display.stories.js               | 11 ++++
 ui/components/app/edit-gas-display/index.scss | 14 ++++
 4 files changed, 85 insertions(+), 12 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 316e8ec2d..b7d9c9469 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -837,6 +837,13 @@
   "functionType": {
     "message": "Function Type"
   },
+  "gasDisplayAcknowledgeDappButtonText": {
+    "message": "Edit app suggestion"
+  },
+  "gasDisplayDappWarning": {
+    "message": "This gas fee has been suggested by the app $1. It’s using legacy gas estimation which may be inaccurate. However, editing this gas fee may cause unintended consequences. Please reach out to the app team if you have questions.",
+    "description": "$1 represents the Dapp's origin"
+  },
   "gasFee": {
     "message": "Gas Fee"
   },
diff --git a/ui/components/app/edit-gas-display/edit-gas-display.component.js b/ui/components/app/edit-gas-display/edit-gas-display.component.js
index 710bc1323..4699ea0e6 100644
--- a/ui/components/app/edit-gas-display/edit-gas-display.component.js
+++ b/ui/components/app/edit-gas-display/edit-gas-display.component.js
@@ -1,6 +1,7 @@
 import React, { useState, useContext } from 'react';
 import PropTypes from 'prop-types';
 
+import Button from '../../ui/button';
 import Typography from '../../ui/typography/typography';
 import {
   COLORS,
@@ -21,11 +22,20 @@ export default function EditGasDisplay({
   type,
   showEducationButton,
   onEducationClick,
+  dappSuggestedGasFee,
+  dappOrigin,
 }) {
   const t = useContext(I18nContext);
 
   const [warning] = useState(null);
   const [showAdvancedForm, setShowAdvancedForm] = useState(false);
+  const [
+    dappSuggestedGasFeeAcknowledged,
+    setDappSuggestedGasFeeAcknowledged,
+  ] = useState(false);
+
+  const requireDappAcknowledgement =
+    dappSuggestedGasFee && !dappSuggestedGasFeeAcknowledged;
 
   return (
     <div className="edit-gas-display">
@@ -38,6 +48,15 @@ export default function EditGasDisplay({
             />
           </div>
         )}
+        {requireDappAcknowledgement && (
+          <div className="edit-gas-display__dapp-acknowledgement-warning">
+            <ActionableMessage
+              className="actionable-message--warning"
+              message={t('gasDisplayDappWarning', [dappOrigin])}
+              useIcon
+            />
+          </div>
+        )}
         {type === 'speed-up' && (
           <div className="edit-gas-display__top-tooltip">
             <Typography
@@ -53,17 +72,34 @@ export default function EditGasDisplay({
             </Typography>
           </div>
         )}
+
         <TransactionTotalBanner total="" detail="" timing="" />
-        <RadioGroup
-          name="gas-recommendation"
-          options={[
-            { value: 'low', label: t('editGasLow'), recommended: false },
-            { value: 'medium', label: t('editGasMedium'), recommended: false },
-            { value: 'high', label: t('editGasHigh'), recommended: true },
-          ]}
-          selectedValue="high"
-        />
-        {!alwaysShowForm && (
+
+        {requireDappAcknowledgement && (
+          <Button
+            className="edit-gas-display__dapp-acknowledgement-button"
+            onClick={() => setDappSuggestedGasFeeAcknowledged(true)}
+          >
+            {t('gasDisplayAcknowledgeDappButtonText')}
+          </Button>
+        )}
+
+        {!requireDappAcknowledgement && (
+          <RadioGroup
+            name="gas-recommendation"
+            options={[
+              { value: 'low', label: t('editGasLow'), recommended: false },
+              {
+                value: 'medium',
+                label: t('editGasMedium'),
+                recommended: false,
+              },
+              { value: 'high', label: t('editGasHigh'), recommended: true },
+            ]}
+            selectedValue="high"
+          />
+        )}
+        {!requireDappAcknowledgement && !alwaysShowForm && (
           <button
             className="edit-gas-display__advanced-button"
             onClick={() => setShowAdvancedForm(!showAdvancedForm)}
@@ -76,9 +112,10 @@ export default function EditGasDisplay({
             )}
           </button>
         )}
-        {(alwaysShowForm || showAdvancedForm) && <AdvancedGasControls />}
+        {((!requireDappAcknowledgement && alwaysShowForm) ||
+          showAdvancedForm) && <AdvancedGasControls />}
       </div>
-      {showEducationButton && (
+      {!requireDappAcknowledgement && showEducationButton && (
         <div className="edit-gas-display__education">
           <button onClick={onEducationClick}>
             {t('editGasEducationButtonText')}
@@ -94,6 +131,8 @@ EditGasDisplay.propTypes = {
   type: PropTypes.oneOf(['customize-gas', 'speed-up']),
   showEducationButton: PropTypes.bool,
   onEducationClick: PropTypes.func,
+  dappSuggestedGasFee: PropTypes.number,
+  dappOrigin: PropTypes.string,
 };
 
 EditGasDisplay.defaultProps = {
@@ -101,4 +140,6 @@ EditGasDisplay.defaultProps = {
   type: 'customize-gas',
   showEducationButton: false,
   onEducationClick: undefined,
+  dappSuggestedGasFee: 0,
+  dappOrigin: '',
 };
diff --git a/ui/components/app/edit-gas-display/edit-gas-display.stories.js b/ui/components/app/edit-gas-display/edit-gas-display.stories.js
index 35947b93d..6dd89f931 100644
--- a/ui/components/app/edit-gas-display/edit-gas-display.stories.js
+++ b/ui/components/app/edit-gas-display/edit-gas-display.stories.js
@@ -20,3 +20,14 @@ export const withEducation = () => {
     </div>
   );
 };
+
+export const withDappSuggestedGas = () => {
+  return (
+    <div style={{ width: '600px' }}>
+      <EditGasDisplay
+        dappSuggestedGasFee="100000"
+        dappOrigin="davidwalsh.name"
+      />
+    </div>
+  );
+};
diff --git a/ui/components/app/edit-gas-display/index.scss b/ui/components/app/edit-gas-display/index.scss
index 95326868c..6c822a401 100644
--- a/ui/components/app/edit-gas-display/index.scss
+++ b/ui/components/app/edit-gas-display/index.scss
@@ -16,6 +16,20 @@
     }
   }
 
+  &__dapp-acknowledgement-warning {
+    margin-bottom: 20px;
+  }
+
+  button.edit-gas-display__dapp-acknowledgement-button {
+    margin: 0 auto;
+    display: block;
+    color: $secondary-1;
+    border: 1px solid $secondary-1;
+    text-transform: unset;
+    width: auto;
+    background: transparent;
+  }
+
   .radio-group {
     margin: 20px auto;
   }

From 310531eeb6c5954c68493b46f8b9b22fd4792ef4 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Thu, 1 Jul 2021 09:37:00 -0500
Subject: [PATCH 079/141] EIP 1559 - Provide a GWEI label for advanced gas
 control fields (#11419)

---
 .../advanced-gas-controls-row.component.js           | 12 +++++++++++-
 .../advanced-gas-controls.component.js               |  3 +++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/ui/components/app/advanced-gas-controls/advanced-gas-controls-row.component.js b/ui/components/app/advanced-gas-controls/advanced-gas-controls-row.component.js
index 1ae8919b1..cb0bd2c0d 100644
--- a/ui/components/app/advanced-gas-controls/advanced-gas-controls-row.component.js
+++ b/ui/components/app/advanced-gas-controls/advanced-gas-controls-row.component.js
@@ -16,6 +16,7 @@ import InfoTooltip from '../../ui/info-tooltip/info-tooltip';
 
 export default function AdvancedGasControlsRow({
   titleText,
+  titleUnit,
   tooltipText,
   titleDetailText,
   error,
@@ -39,7 +40,14 @@ export default function AdvancedGasControlsRow({
             >
               {titleText}
             </Typography>
-
+            <Typography
+              tag={TYPOGRAPHY.H6}
+              variant={TYPOGRAPHY.H6}
+              color={COLORS.UI4}
+              boxProps={{ display: DISPLAY.INLINE_BLOCK }}
+            >
+              {titleUnit}
+            </Typography>
             <InfoTooltip position="top" contentText={tooltipText} />
           </div>
           {titleDetailText && (
@@ -70,6 +78,7 @@ export default function AdvancedGasControlsRow({
 
 AdvancedGasControlsRow.propTypes = {
   titleText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  titleUnit: PropTypes.string,
   tooltipText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   titleDetailText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   error: PropTypes.string,
@@ -79,6 +88,7 @@ AdvancedGasControlsRow.propTypes = {
 
 AdvancedGasControlsRow.defaultProps = {
   titleText: '',
+  titleUnit: '',
   tooltipText: '',
   titleDetailText: '',
   error: '',
diff --git a/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js b/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js
index 5ba93e06c..ffd45cc2c 100644
--- a/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js
+++ b/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js
@@ -32,6 +32,7 @@ export default function AdvancedGasControls() {
         <>
           <AdvancedGasControlsRow
             titleText={t('maxPriorityFee')}
+            titleUnit="(GWEI)"
             tooltipText=""
             onChange={setMaxPriorityFee}
             value={maxPriorityFee}
@@ -55,6 +56,7 @@ export default function AdvancedGasControls() {
           />
           <AdvancedGasControlsRow
             titleText={t('maxFee')}
+            titleUnit="(GWEI)"
             tooltipText=""
             onChange={setMaxFee}
             value={maxFee}
@@ -81,6 +83,7 @@ export default function AdvancedGasControls() {
         <>
           <AdvancedGasControlsRow
             titleText={t('gasPrice')}
+            titleUnit="(GWEI)"
             onChange={setGasPrice}
             tooltipText=""
             titleDetailText=""

From 7170d183e93efaa9fc192d91df5e47df2cc815c8 Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Thu, 1 Jul 2021 13:01:33 -0700
Subject: [PATCH 080/141] Fix

---
 .../send/send-content/send-gas-row/send-gas-row.component.js  | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/ui/pages/send/send-content/send-gas-row/send-gas-row.component.js b/ui/pages/send/send-content/send-gas-row/send-gas-row.component.js
index 4128380d7..b662261bb 100644
--- a/ui/pages/send/send-content/send-gas-row/send-gas-row.component.js
+++ b/ui/pages/send/send-content/send-gas-row/send-gas-row.component.js
@@ -64,10 +64,6 @@ export default class SendGasRow extends Component {
       minimumGasLimit,
     } = this.props;
     const { trackEvent } = this.context;
-<<<<<<< HEAD
-    const gasPriceFetchFailure = isEthGasPrice || noGasPrice;
-=======
->>>>>>> origin/develop
 
     const gasPriceButtonGroup = (
       <div>

From bda4d0cbca51e4ab4ef3e8237167f0d08bdd81ec Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Thu, 1 Jul 2021 19:18:30 -0230
Subject: [PATCH 081/141] Add list of custom networks with special gas limit
 buffers (#11435)

---
 shared/constants/network.js |  7 +++++++
 ui/ducks/send/send.js       | 13 ++++++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/shared/constants/network.js b/shared/constants/network.js
index 5e3d2b959..db4fe9a2e 100644
--- a/shared/constants/network.js
+++ b/shared/constants/network.js
@@ -19,6 +19,8 @@ export const GOERLI_CHAIN_ID = '0x5';
 export const KOVAN_CHAIN_ID = '0x2a';
 export const LOCALHOST_CHAIN_ID = '0x539';
 export const BSC_CHAIN_ID = '0x38';
+export const OPTIMISM_CHAIN_ID = '0xa';
+export const OPTIMISM_TESTNET_CHAIN_ID = '0x45';
 
 /**
  * The largest possible chain ID we can handle.
@@ -141,3 +143,8 @@ export const HARDFORKS = {
   BERLIN: 'berlin',
   LONDON: 'london',
 };
+
+export const CHAIN_ID_TO_GAS_LIMIT_BUFFER_MAP = {
+  [OPTIMISM_CHAIN_ID]: 1,
+  [OPTIMISM_TESTNET_CHAIN_ID]: 1,
+};
diff --git a/ui/ducks/send/send.js b/ui/ducks/send/send.js
index c8e926296..037f56cdf 100644
--- a/ui/ducks/send/send.js
+++ b/ui/ducks/send/send.js
@@ -80,6 +80,7 @@ import {
   isBurnAddress,
   isValidHexAddress,
 } from '../../../shared/modules/hexstring-utils';
+import { CHAIN_ID_TO_GAS_LIMIT_BUFFER_MAP } from '../../../shared/constants/network';
 
 // typedefs
 /**
@@ -176,6 +177,7 @@ async function estimateGasLimitForSend({
   to,
   data,
   isNonStandardEthChain,
+  chainId,
   ...options
 }) {
   let isSimpleSendOnNonStandardNetwork = false;
@@ -262,7 +264,12 @@ async function estimateGasLimitForSend({
   //
   // Gas estimation of simple sends should, however, be deterministic. As such
   // no buffer is needed in those cases.
-  const bufferMultiplier = isSimpleSendOnNonStandardNetwork ? 1 : 1.5;
+  let bufferMultiplier = 1.5;
+  if (isSimpleSendOnNonStandardNetwork) {
+    bufferMultiplier = 1;
+  } else if (CHAIN_ID_TO_GAS_LIMIT_BUFFER_MAP[chainId]) {
+    bufferMultiplier = CHAIN_ID_TO_GAS_LIMIT_BUFFER_MAP[chainId];
+  }
 
   try {
     // call into the background process that will simulate transaction
@@ -328,6 +335,7 @@ export const computeEstimatedGasLimit = createAsyncThunk(
     const state = thunkApi.getState();
     const { send, metamask } = state;
     const isNonStandardEthChain = getIsNonStandardEthChain(state);
+    const chainId = getCurrentChainId(state);
     if (send.stage !== SEND_STAGES.EDIT) {
       const gasLimit = await estimateGasLimitForSend({
         gasPrice: send.gas.gasPrice,
@@ -338,6 +346,7 @@ export const computeEstimatedGasLimit = createAsyncThunk(
         value: send.amount.value,
         data: send.draftTransaction.userInputHexData,
         isNonStandardEthChain,
+        chainId,
       });
       await thunkApi.dispatch(setCustomGasLimit(gasLimit));
       return {
@@ -363,6 +372,7 @@ export const initializeSendState = createAsyncThunk(
   async (_, thunkApi) => {
     const state = thunkApi.getState();
     const isNonStandardEthChain = getIsNonStandardEthChain(state);
+    const chainId = getCurrentChainId(state);
     const {
       send: { asset, stage, recipient, amount, draftTransaction },
       metamask,
@@ -410,6 +420,7 @@ export const initializeSendState = createAsyncThunk(
         value: amount.value,
         data: draftTransaction.userInputHexData,
         isNonStandardEthChain,
+        chainId,
       });
       gasLimit = estimatedGasLimit || gasLimit;
     }

From 8ca0d24f8251ecc6ab915ebaae6929b060d07b5f Mon Sep 17 00:00:00 2001
From: Daniel <80175477+dan437@users.noreply.github.com>
Date: Fri, 2 Jul 2021 15:48:34 +0200
Subject: [PATCH 082/141] Increase Jest unit test coverage for the Swaps
 feature to ~60% (#11343)

---
 jest.config.js                                |   8 +-
 test/jest/mock-store.js                       | 132 ++++++++++++++-
 ui/__mocks__/react-router-dom.js              |   4 +-
 .../ui/button-group/button-group.component.js |   1 +
 .../page-container-header.component.js        |   1 +
 .../awaiting-signatures.test.js.snap          |  26 ---
 .../awaiting-signatures.test.js               |   2 +-
 .../__snapshots__/awaiting-swap.test.js.snap  |  26 ---
 ui/pages/swaps/awaiting-swap/awaiting-swap.js |   5 +-
 .../swaps/awaiting-swap/awaiting-swap.test.js |   2 +-
 .../__snapshots__/build-quote.test.js.snap    |  34 +---
 .../swaps/build-quote/build-quote.test.js     |   1 -
 .../__snapshots__/fee-card.test.js.snap       |   1 +
 ui/pages/swaps/fee-card/fee-card.js           |  10 +-
 .../loading-swaps-quotes.test.js              |  41 +++++
 .../main-quote-summary.test.js.snap           |   2 +
 .../main-quote-summary/main-quote-summary.js  |  10 +-
 .../slippage-buttons.test.js.snap             |   3 +
 ...customization-modal.component.test.js.snap | 136 ++++++++++++++++
 ...customization-modal.container.test.js.snap |  98 ++++++++++++
 ...swaps-gas-customization-modal.component.js |  15 +-
 ...-gas-customization-modal.component.test.js |  81 ++++++++++
 ...-gas-customization-modal.container.test.js |  34 ++++
 .../__snapshots__/view-quote.test.js.snap     | 150 ++++++++++++++++++
 ui/pages/swaps/view-quote/view-quote.test.js  |  52 ++++++
 25 files changed, 772 insertions(+), 103 deletions(-)
 delete mode 100644 ui/pages/swaps/awaiting-signatures/__snapshots__/awaiting-signatures.test.js.snap
 create mode 100644 ui/pages/swaps/loading-swaps-quotes/loading-swaps-quotes.test.js
 create mode 100644 ui/pages/swaps/swaps-gas-customization-modal/__snapshots__/swaps-gas-customization-modal.component.test.js.snap
 create mode 100644 ui/pages/swaps/swaps-gas-customization-modal/__snapshots__/swaps-gas-customization-modal.container.test.js.snap
 create mode 100644 ui/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.component.test.js
 create mode 100644 ui/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.container.test.js
 create mode 100644 ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap
 create mode 100644 ui/pages/swaps/view-quote/view-quote.test.js

diff --git a/jest.config.js b/jest.config.js
index 8e215b994..3219d5eba 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -5,10 +5,10 @@ module.exports = {
   coveragePathIgnorePatterns: ['.stories.js', '.snap'],
   coverageThreshold: {
     global: {
-      branches: 32.75,
-      functions: 42.9,
-      lines: 43.12,
-      statements: 43.67,
+      branches: 45.45,
+      functions: 55.29,
+      lines: 60.22,
+      statements: 60.43,
     },
   },
   setupFiles: ['./test/setup.js', './test/env.js'],
diff --git a/test/jest/mock-store.js b/test/jest/mock-store.js
index f09999f10..35e52682f 100644
--- a/test/jest/mock-store.js
+++ b/test/jest/mock-store.js
@@ -4,7 +4,19 @@ export const createSwapsMockStore = () => {
   return {
     swaps: {
       customGas: {
+        limit: '0x0',
         fallBackPrice: 5,
+        priceEstimates: {
+          blockTime: 14.1,
+          safeLow: 2.5,
+          safeLowWait: 6.6,
+          average: 4,
+          avgWait: 5.3,
+          fast: 5,
+          fastWait: 3.3,
+          fastest: 10,
+          fastestWait: 0.5,
+        },
       },
       fromToken: 'ETH',
     },
@@ -84,7 +96,108 @@ export const createSwapsMockStore = () => {
         },
       ],
       swapsState: {
-        quotes: {},
+        quotes: {
+          TEST_AGG_1: {
+            trade: {
+              from: '0xe18035bf8712672935fdb4e5e431b1a0183d2dfc',
+              value: '0x0',
+              gas: '0x61a80', // 4e5
+              to: '0x881D40237659C251811CEC9c364ef91dC08D300C',
+            },
+            sourceAmount: '10000000000000000000', // 10e18
+            destinationAmount: '20000000000000000000', // 20e18
+            error: null,
+            sourceToken: '0x6b175474e89094c44da98b954eedeac495271d0f',
+            destinationToken: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+            approvalNeeded: null,
+            maxGas: 600000,
+            averageGas: 120000,
+            estimatedRefund: 80000,
+            fetchTime: 607,
+            aggregator: 'TEST_AGG_1',
+            aggType: 'AGG',
+            slippage: 2,
+            sourceTokenInfo: {
+              address: '0x6b175474e89094c44da98b954eedeac495271d0f',
+              symbol: 'DAI',
+              decimals: 18,
+              iconUrl: 'https://foo.bar/logo.png',
+            },
+            destinationTokenInfo: {
+              address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+              symbol: 'USDC',
+              decimals: 18,
+            },
+            fee: 1,
+          },
+
+          TEST_AGG_BEST: {
+            trade: {
+              from: '0xe18035bf8712672935fdb4e5e431b1a0183d2dfc',
+              value: '0x0',
+              gas: '0x61a80',
+              to: '0x881D40237659C251811CEC9c364ef91dC08D300C',
+            },
+            sourceAmount: '10000000000000000000',
+            destinationAmount: '25000000000000000000', // 25e18
+            error: null,
+            sourceToken: '0x6b175474e89094c44da98b954eedeac495271d0f',
+            destinationToken: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+            approvalNeeded: null,
+            maxGas: 1100000,
+            averageGas: 411000,
+            estimatedRefund: 343090,
+            fetchTime: 1003,
+            aggregator: 'TEST_AGG_BEST',
+            aggType: 'AGG',
+            slippage: 2,
+            sourceTokenInfo: {
+              address: '0x6b175474e89094c44da98b954eedeac495271d0f',
+              symbol: 'DAI',
+              decimals: 18,
+              iconUrl: 'https://foo.bar/logo.png',
+            },
+            destinationTokenInfo: {
+              address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+              symbol: 'USDC',
+              decimals: 18,
+            },
+            fee: 1,
+          },
+          TEST_AGG_2: {
+            trade: {
+              from: '0xe18035bf8712672935fdb4e5e431b1a0183d2dfc',
+              value: '0x0',
+              gas: '0x61a80',
+              to: '0x881D40237659C251811CEC9c364ef91dC08D300C',
+            },
+            sourceAmount: '10000000000000000000',
+            destinationAmount: '22000000000000000000', // 22e18
+            error: null,
+            sourceToken: '0x6b175474e89094c44da98b954eedeac495271d0f',
+            destinationToken: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+            approvalNeeded: null,
+            maxGas: 368000,
+            averageGas: 197000,
+            estimatedRefund: 18205,
+            fetchTime: 1354,
+            aggregator: 'TEST_AGG_2',
+            aggType: 'AGG',
+            slippage: 2,
+            sourceTokenInfo: {
+              address: '0x6b175474e89094c44da98b954eedeac495271d0f',
+              symbol: 'DAI',
+              decimals: 18,
+              iconUrl: 'https://foo.bar/logo.png',
+            },
+            destinationTokenInfo: {
+              address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+              symbol: 'USDC',
+              decimals: 18,
+            },
+            fee: 1,
+          },
+        },
         fetchParams: {
           metaData: {
             sourceTokenInfo: {
@@ -97,10 +210,11 @@ export const createSwapsMockStore = () => {
         },
         tradeTxId: null,
         approveTxId: null,
-        quotesLastFetched: null,
+        quotesLastFetched: 1519211809934,
+        swapsQuoteRefreshTime: 60000,
         customMaxGas: '',
         customGasPrice: null,
-        selectedAggId: null,
+        selectedAggId: 'TEST_AGG_2',
         customApproveTxData: '',
         errorKey: '',
         topAggId: null,
@@ -108,5 +222,17 @@ export const createSwapsMockStore = () => {
         swapsFeatureIsLive: false,
       },
     },
+    appState: {
+      modal: {
+        open: true,
+        modalState: {
+          name: 'test',
+          props: {
+            initialGasLimit: 100,
+            minimumGasLimit: 5,
+          },
+        },
+      },
+    },
   };
 };
diff --git a/ui/__mocks__/react-router-dom.js b/ui/__mocks__/react-router-dom.js
index dd15434a1..1f65e3395 100644
--- a/ui/__mocks__/react-router-dom.js
+++ b/ui/__mocks__/react-router-dom.js
@@ -2,7 +2,9 @@ const originalModule = jest.requireActual('react-router-dom');
 
 module.exports = {
   ...originalModule,
-  useHistory: jest.fn(),
+  useHistory: jest.fn(() => {
+    return [];
+  }),
   useLocation: jest.fn(() => {
     return {
       pathname: '/swaps/build-quote',
diff --git a/ui/components/ui/button-group/button-group.component.js b/ui/components/ui/button-group/button-group.component.js
index d1f20e961..9cd5d9896 100644
--- a/ui/components/ui/button-group/button-group.component.js
+++ b/ui/components/ui/button-group/button-group.component.js
@@ -61,6 +61,7 @@ export default class ButtonGroup extends PureComponent {
                   index === this.state.activeButtonIndex,
               },
             )}
+            data-testid={`button-group__button${index}`}
             onClick={() => {
               this.handleButtonClick(index);
               child.props.onClick?.();
diff --git a/ui/components/ui/page-container/page-container-header/page-container-header.component.js b/ui/components/ui/page-container/page-container-header/page-container-header.component.js
index 3717b7450..0c3995c10 100644
--- a/ui/components/ui/page-container/page-container-header/page-container-header.component.js
+++ b/ui/components/ui/page-container/page-container-header/page-container-header.component.js
@@ -61,6 +61,7 @@ export default class PageContainerHeader extends Component {
         className={classnames('page-container__header', className, {
           'page-container__header--no-padding-bottom': Boolean(tabs),
         })}
+        data-testid="page-container__header"
       >
         {this.renderHeaderRow()}
 
diff --git a/ui/pages/swaps/awaiting-signatures/__snapshots__/awaiting-signatures.test.js.snap b/ui/pages/swaps/awaiting-signatures/__snapshots__/awaiting-signatures.test.js.snap
deleted file mode 100644
index a7b8b3546..000000000
--- a/ui/pages/swaps/awaiting-signatures/__snapshots__/awaiting-signatures.test.js.snap
+++ /dev/null
@@ -1,26 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AwaitingSignatures renders the component with initial props for 1 confirmation 1`] = `
-<div
-  class="swaps-footer"
->
-  <div
-    class="swaps-footer__buttons"
-  >
-    <div
-      class="page-container__footer swaps-footer__custom-page-container-footer-class"
-    >
-      <footer>
-        <button
-          class="button btn-primary page-container__footer-button swaps-footer__custom-page-container-footer-button-class swaps-footer__custom-page-container-footer-button-class--single"
-          data-testid="page-container-footer-next"
-          role="button"
-          tabindex="0"
-        >
-          Cancel
-        </button>
-      </footer>
-    </div>
-  </div>
-</div>
-`;
diff --git a/ui/pages/swaps/awaiting-signatures/awaiting-signatures.test.js b/ui/pages/swaps/awaiting-signatures/awaiting-signatures.test.js
index c8e466ec2..bcf1d37ad 100644
--- a/ui/pages/swaps/awaiting-signatures/awaiting-signatures.test.js
+++ b/ui/pages/swaps/awaiting-signatures/awaiting-signatures.test.js
@@ -12,6 +12,6 @@ describe('AwaitingSignatures', () => {
     const store = configureMockStore()(createSwapsMockStore());
     const { getByText } = renderWithProvider(<AwaitingSignatures />, store);
     expect(getByText('Confirm with your hardware wallet')).toBeInTheDocument();
-    expect(document.querySelector('.swaps-footer')).toMatchSnapshot();
+    expect(getByText('Cancel')).toBeInTheDocument();
   });
 });
diff --git a/ui/pages/swaps/awaiting-swap/__snapshots__/awaiting-swap.test.js.snap b/ui/pages/swaps/awaiting-swap/__snapshots__/awaiting-swap.test.js.snap
index 588a27dd9..c0c43246c 100644
--- a/ui/pages/swaps/awaiting-swap/__snapshots__/awaiting-swap.test.js.snap
+++ b/ui/pages/swaps/awaiting-swap/__snapshots__/awaiting-swap.test.js.snap
@@ -17,29 +17,3 @@ exports[`AwaitingSwap renders the component with initial props 1`] = `
   </span>
 </div>
 `;
-
-exports[`AwaitingSwap renders the component with initial props 2`] = `
-<div
-  class="swaps-footer"
->
-  <div
-    class="swaps-footer__buttons"
-  >
-    <div
-      class="page-container__footer swaps-footer__custom-page-container-footer-class"
-    >
-      <footer>
-        <button
-          class="button btn-primary page-container__footer-button swaps-footer__custom-page-container-footer-button-class swaps-footer__custom-page-container-footer-button-class--single"
-          data-testid="page-container-footer-next"
-          disabled=""
-          role="button"
-          tabindex="0"
-        >
-          View in activity
-        </button>
-      </footer>
-    </div>
-  </div>
-</div>
-`;
diff --git a/ui/pages/swaps/awaiting-swap/awaiting-swap.js b/ui/pages/swaps/awaiting-swap/awaiting-swap.js
index 75f7a07b5..e1a9e934d 100644
--- a/ui/pages/swaps/awaiting-swap/awaiting-swap.js
+++ b/ui/pages/swaps/awaiting-swap/awaiting-swap.js
@@ -130,9 +130,10 @@ export default function AwaitingSwap({
     { blockExplorerUrl: baseNetworkUrl },
   );
 
-  const isCustomBlockExplorerUrl =
+  const isCustomBlockExplorerUrl = Boolean(
     SWAPS_CHAINID_DEFAULT_BLOCK_EXPLORER_URL_MAP[chainId] ||
-    rpcPrefs.blockExplorerUrl;
+      rpcPrefs.blockExplorerUrl,
+  );
 
   let headerText;
   let statusImage;
diff --git a/ui/pages/swaps/awaiting-swap/awaiting-swap.test.js b/ui/pages/swaps/awaiting-swap/awaiting-swap.test.js
index bdd91c871..4f4286995 100644
--- a/ui/pages/swaps/awaiting-swap/awaiting-swap.test.js
+++ b/ui/pages/swaps/awaiting-swap/awaiting-swap.test.js
@@ -32,6 +32,6 @@ describe('AwaitingSwap', () => {
     expect(
       document.querySelector('.awaiting-swap__main-descrption'),
     ).toMatchSnapshot();
-    expect(document.querySelector('.swaps-footer')).toMatchSnapshot();
+    expect(getByText('View in activity')).toBeInTheDocument();
   });
 });
diff --git a/ui/pages/swaps/build-quote/__snapshots__/build-quote.test.js.snap b/ui/pages/swaps/build-quote/__snapshots__/build-quote.test.js.snap
index c6f8bda5e..844710b12 100644
--- a/ui/pages/swaps/build-quote/__snapshots__/build-quote.test.js.snap
+++ b/ui/pages/swaps/build-quote/__snapshots__/build-quote.test.js.snap
@@ -8,6 +8,7 @@ exports[`BuildQuote renders the component with initial props 1`] = `
   <button
     aria-checked="false"
     class="button-group__button radio-button"
+    data-testid="button-group__button0"
     role="radio"
   >
     2%
@@ -15,6 +16,7 @@ exports[`BuildQuote renders the component with initial props 1`] = `
   <button
     aria-checked="false"
     class="button-group__button radio-button"
+    data-testid="button-group__button1"
     role="radio"
   >
     3%
@@ -22,6 +24,7 @@ exports[`BuildQuote renders the component with initial props 1`] = `
   <button
     aria-checked="true"
     class="button-group__button slippage-buttons__button-group-custom-button radio-button--danger radio-button button-group__button--active radio-button--active"
+    data-testid="button-group__button2"
     role="radio"
   >
     15
@@ -33,34 +36,3 @@ exports[`BuildQuote renders the component with initial props 1`] = `
   </button>
 </div>
 `;
-
-exports[`BuildQuote renders the component with initial props 2`] = `
-<div
-  class="swaps-footer"
->
-  <div
-    class="swaps-footer__buttons"
-  >
-    <div
-      class="page-container__footer swaps-footer__custom-page-container-footer-class"
-    >
-      <footer>
-        <button
-          class="button btn-primary page-container__footer-button swaps-footer__custom-page-container-footer-button-class swaps-footer__custom-page-container-footer-button-class--single"
-          data-testid="page-container-footer-next"
-          disabled=""
-          role="button"
-          tabindex="0"
-        >
-          Review Swap
-        </button>
-      </footer>
-    </div>
-  </div>
-  <div
-    class="swaps-footer__bottom-text"
-  >
-    Terms of Service
-  </div>
-</div>
-`;
diff --git a/ui/pages/swaps/build-quote/build-quote.test.js b/ui/pages/swaps/build-quote/build-quote.test.js
index 960489281..c1a1d8042 100644
--- a/ui/pages/swaps/build-quote/build-quote.test.js
+++ b/ui/pages/swaps/build-quote/build-quote.test.js
@@ -42,6 +42,5 @@ describe('BuildQuote', () => {
     expect(
       document.querySelector('.slippage-buttons__button-group'),
     ).toMatchSnapshot();
-    expect(document.querySelector('.swaps-footer')).toMatchSnapshot();
   });
 });
diff --git a/ui/pages/swaps/fee-card/__snapshots__/fee-card.test.js.snap b/ui/pages/swaps/fee-card/__snapshots__/fee-card.test.js.snap
index 784a1f4f9..8152957ad 100644
--- a/ui/pages/swaps/fee-card/__snapshots__/fee-card.test.js.snap
+++ b/ui/pages/swaps/fee-card/__snapshots__/fee-card.test.js.snap
@@ -3,6 +3,7 @@
 exports[`FeeCard renders the component with initial props 1`] = `
 <div
   class="fee-card__savings-and-quotes-header"
+  data-testid="fee-card__savings-and-quotes-header"
 >
   <div
     class="fee-card__savings-and-quotes-row"
diff --git a/ui/pages/swaps/fee-card/fee-card.js b/ui/pages/swaps/fee-card/fee-card.js
index 68ee4faec..5e7269f18 100644
--- a/ui/pages/swaps/fee-card/fee-card.js
+++ b/ui/pages/swaps/fee-card/fee-card.js
@@ -47,7 +47,10 @@ export default function FeeCard({
 
   return (
     <div className="fee-card">
-      <div className="fee-card__savings-and-quotes-header">
+      <div
+        className="fee-card__savings-and-quotes-header"
+        data-testid="fee-card__savings-and-quotes-header"
+      >
         <div className="fee-card__savings-and-quotes-row">
           {bestQuoteText && (
             <p className="fee-card__savings-text">{bestQuoteText}</p>
@@ -66,7 +69,10 @@ export default function FeeCard({
         </div>
       </div>
       <div className="fee-card__main">
-        <div className="fee-card__row-header">
+        <div
+          className="fee-card__row-header"
+          data-testid="fee-card__row-header"
+        >
           <div>
             <div className="fee-card__row-header-text--bold">
               {t('swapEstimatedNetworkFee')}
diff --git a/ui/pages/swaps/loading-swaps-quotes/loading-swaps-quotes.test.js b/ui/pages/swaps/loading-swaps-quotes/loading-swaps-quotes.test.js
new file mode 100644
index 000000000..bff5291fe
--- /dev/null
+++ b/ui/pages/swaps/loading-swaps-quotes/loading-swaps-quotes.test.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+
+import {
+  renderWithProvider,
+  createSwapsMockStore,
+} from '../../../../test/jest';
+import LoadingSwapsQuotes from '.';
+
+const createProps = (customProps = {}) => {
+  return {
+    loadingComplete: true,
+    onDone: jest.fn(),
+    aggregatorMetadata: {
+      agg1: {
+        color: '#283B4C',
+        title: 'agg1',
+        icon: 'data:image/png;base64,iVBORw0KGgoAAA',
+      },
+      agg2: {
+        color: '#283B4C',
+        title: 'agg2',
+        icon: 'data:image/png;base64,iVBORw0KGgoAAA',
+      },
+    },
+    ...customProps,
+  };
+};
+
+describe('LoadingSwapsQuotes', () => {
+  it('renders the component with initial props', () => {
+    const store = configureMockStore()(createSwapsMockStore());
+    const { getByText } = renderWithProvider(
+      <LoadingSwapsQuotes {...createProps()} />,
+      store,
+    );
+    expect(getByText('Quote 1 of 2')).toBeInTheDocument();
+    expect(getByText('Checking agg', { exact: false })).toBeInTheDocument();
+    expect(getByText('Back')).toBeInTheDocument();
+  });
+});
diff --git a/ui/pages/swaps/main-quote-summary/__snapshots__/main-quote-summary.test.js.snap b/ui/pages/swaps/main-quote-summary/__snapshots__/main-quote-summary.test.js.snap
index 36a520f6f..034f7ee0e 100644
--- a/ui/pages/swaps/main-quote-summary/__snapshots__/main-quote-summary.test.js.snap
+++ b/ui/pages/swaps/main-quote-summary/__snapshots__/main-quote-summary.test.js.snap
@@ -3,6 +3,7 @@
 exports[`MainQuoteSummary renders the component with initial props 1`] = `
 <div
   class="main-quote-summary__source-row"
+  data-testid="main-quote-summary__source-row"
 >
   <span
     class="main-quote-summary__source-row-value"
@@ -65,6 +66,7 @@ exports[`MainQuoteSummary renders the component with initial props 3`] = `
 exports[`MainQuoteSummary renders the component with initial props 4`] = `
 <div
   class="main-quote-summary__exchange-rate-container"
+  data-testid="main-quote-summary__exchange-rate-container"
 >
   <div
     class="exchange-rate-display main-quote-summary__exchange-rate-display"
diff --git a/ui/pages/swaps/main-quote-summary/main-quote-summary.js b/ui/pages/swaps/main-quote-summary/main-quote-summary.js
index 9257c53e3..c54f78b7b 100644
--- a/ui/pages/swaps/main-quote-summary/main-quote-summary.js
+++ b/ui/pages/swaps/main-quote-summary/main-quote-summary.js
@@ -52,7 +52,10 @@ export default function MainQuoteSummary({
     <div className="main-quote-summary">
       <div className="main-quote-summary__details">
         <div className="main-quote-summary__quote-details-top">
-          <div className="main-quote-summary__source-row">
+          <div
+            className="main-quote-summary__source-row"
+            data-testid="main-quote-summary__source-row"
+          >
             <span
               className="main-quote-summary__source-row-value"
               title={formatSwapsValueForDisplay(sourceAmount)}
@@ -107,7 +110,10 @@ export default function MainQuoteSummary({
             </Tooltip>
           </div>
         </div>
-        <div className="main-quote-summary__exchange-rate-container">
+        <div
+          className="main-quote-summary__exchange-rate-container"
+          data-testid="main-quote-summary__exchange-rate-container"
+        >
           <ExchangeRateDisplay
             primaryTokenValue={sourceValue}
             primaryTokenDecimals={sourceDecimals}
diff --git a/ui/pages/swaps/slippage-buttons/__snapshots__/slippage-buttons.test.js.snap b/ui/pages/swaps/slippage-buttons/__snapshots__/slippage-buttons.test.js.snap
index 7dd4d9bab..37312b0a6 100644
--- a/ui/pages/swaps/slippage-buttons/__snapshots__/slippage-buttons.test.js.snap
+++ b/ui/pages/swaps/slippage-buttons/__snapshots__/slippage-buttons.test.js.snap
@@ -20,6 +20,7 @@ exports[`SlippageButtons renders the component with initial props 2`] = `
   <button
     aria-checked="false"
     class="button-group__button radio-button"
+    data-testid="button-group__button0"
     role="radio"
   >
     2%
@@ -27,6 +28,7 @@ exports[`SlippageButtons renders the component with initial props 2`] = `
   <button
     aria-checked="true"
     class="button-group__button radio-button button-group__button--active radio-button--active"
+    data-testid="button-group__button1"
     role="radio"
   >
     3%
@@ -34,6 +36,7 @@ exports[`SlippageButtons renders the component with initial props 2`] = `
   <button
     aria-checked="false"
     class="button-group__button slippage-buttons__button-group-custom-button radio-button"
+    data-testid="button-group__button2"
     role="radio"
   >
     custom
diff --git a/ui/pages/swaps/swaps-gas-customization-modal/__snapshots__/swaps-gas-customization-modal.component.test.js.snap b/ui/pages/swaps/swaps-gas-customization-modal/__snapshots__/swaps-gas-customization-modal.component.test.js.snap
new file mode 100644
index 000000000..203c3c916
--- /dev/null
+++ b/ui/pages/swaps/swaps-gas-customization-modal/__snapshots__/swaps-gas-customization-modal.component.test.js.snap
@@ -0,0 +1,136 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GasCustomizationModalComponent renders the component with initial props 1`] = `
+<div
+  class="page-container__header page-container__header--no-padding-bottom"
+  data-testid="page-container__header"
+>
+  <div
+    class="page-container__title"
+  >
+    Customize Gas
+  </div>
+  <div
+    class="page-container__subtitle"
+  >
+    Increasing fee may decrease processing times, but it is not guaranteed.
+  </div>
+  <a
+    class="button btn-link page-container__header-close-text"
+    role="button"
+    tabindex="0"
+  >
+    Close
+  </a>
+  <ul
+    class="page-container__tabs"
+  >
+    <li
+      class="tab page-container__tab tab--active"
+    >
+      <button>
+        Basic
+      </button>
+    </li>
+    <li
+      class="tab page-container__tab"
+    >
+      <button>
+        Advanced
+      </button>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`GasCustomizationModalComponent renders the component with initial props 2`] = `
+<button
+  aria-checked="false"
+  class="button-group__button"
+  data-testid="button-group__button0"
+>
+  <div>
+    <div
+      class="gas-price-button-group__label"
+    >
+      Fast
+    </div>
+    <div
+      class="gas-price-button-group__time-estimate"
+    >
+      ~ 1 min 0 sec
+    </div>
+    <div
+      class="gas-price-button-group__primary-currency"
+    >
+      $0.52
+    </div>
+    <div
+      class="gas-price-button-group__secondary-currency"
+    >
+      0.0048 ETH
+    </div>
+    <div
+      class="button-check-wrapper"
+    >
+      <i
+        class="fa fa-check fa-sm"
+      />
+    </div>
+  </div>
+</button>
+`;
+
+exports[`GasCustomizationModalComponent renders the component with initial props 3`] = `
+<div
+  class="gas-modal-content__info-row__send-info"
+  data-testid="gas-modal-content__info-row__send-info"
+>
+  <span
+    class="gas-modal-content__info-row__send-info__label"
+  >
+    Send Amount
+  </span>
+  <span
+    class="gas-modal-content__info-row__send-info__value"
+  >
+    mockSendAmount
+  </span>
+</div>
+`;
+
+exports[`GasCustomizationModalComponent renders the component with initial props 4`] = `
+<div
+  class="gas-modal-content__info-row__transaction-info"
+  data-testid="gas-modal-content__info-row__transaction-info"
+>
+  <span
+    class="gas-modal-content__info-row__transaction-info__label"
+  >
+    Transaction Fee
+  </span>
+  <span
+    class="gas-modal-content__info-row__transaction-info__value"
+  >
+    mockTransactionFee
+  </span>
+</div>
+`;
+
+exports[`GasCustomizationModalComponent renders the component with initial props 5`] = `
+<div
+  class="gas-modal-content__info-row__total-info"
+  data-testid="gas-modal-content__info-row__total-info"
+>
+  <span
+    class="gas-modal-content__info-row__total-info__label"
+  >
+    New Total
+  </span>
+  <span
+    class="gas-modal-content__info-row__total-info__value"
+  >
+    mockNewTotalEth
+  </span>
+</div>
+`;
diff --git a/ui/pages/swaps/swaps-gas-customization-modal/__snapshots__/swaps-gas-customization-modal.container.test.js.snap b/ui/pages/swaps/swaps-gas-customization-modal/__snapshots__/swaps-gas-customization-modal.container.test.js.snap
new file mode 100644
index 000000000..245acbf40
--- /dev/null
+++ b/ui/pages/swaps/swaps-gas-customization-modal/__snapshots__/swaps-gas-customization-modal.container.test.js.snap
@@ -0,0 +1,98 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GasCustomizationModalContainer renders the component with initial props 1`] = `
+<div
+  class="page-container__header page-container__header--no-padding-bottom"
+  data-testid="page-container__header"
+>
+  <div
+    class="page-container__title"
+  >
+    Customize Gas
+  </div>
+  <div
+    class="page-container__subtitle"
+  >
+    Increasing fee may decrease processing times, but it is not guaranteed.
+  </div>
+  <a
+    class="button btn-link page-container__header-close-text"
+    role="button"
+    tabindex="0"
+  >
+    Close
+  </a>
+  <ul
+    class="page-container__tabs"
+  >
+    <li
+      class="tab page-container__tab tab--active"
+    >
+      <button>
+        Basic
+      </button>
+    </li>
+    <li
+      class="tab page-container__tab"
+    >
+      <button>
+        Advanced
+      </button>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`GasCustomizationModalContainer renders the component with initial props 2`] = `
+<div
+  class="gas-modal-content__info-row__send-info"
+  data-testid="gas-modal-content__info-row__send-info"
+>
+  <span
+    class="gas-modal-content__info-row__send-info__label"
+  >
+    Send Amount
+  </span>
+  <span
+    class="gas-modal-content__info-row__send-info__value"
+  >
+    0 ETH
+  </span>
+</div>
+`;
+
+exports[`GasCustomizationModalContainer renders the component with initial props 3`] = `
+<div
+  class="gas-modal-content__info-row__transaction-info"
+  data-testid="gas-modal-content__info-row__transaction-info"
+>
+  <span
+    class="gas-modal-content__info-row__transaction-info__label"
+  >
+    Transaction Fee
+  </span>
+  <span
+    class="gas-modal-content__info-row__transaction-info__value"
+  >
+    0 ETH
+  </span>
+</div>
+`;
+
+exports[`GasCustomizationModalContainer renders the component with initial props 4`] = `
+<div
+  class="gas-modal-content__info-row__total-info"
+  data-testid="gas-modal-content__info-row__total-info"
+>
+  <span
+    class="gas-modal-content__info-row__total-info__label"
+  >
+    New Total
+  </span>
+  <span
+    class="gas-modal-content__info-row__total-info__value"
+  >
+    0 ETH
+  </span>
+</div>
+`;
diff --git a/ui/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.component.js b/ui/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.component.js
index 5a0a2dfe9..dc3c32285 100644
--- a/ui/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.component.js
+++ b/ui/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.component.js
@@ -129,7 +129,10 @@ export default class GasModalPageContainer extends Component {
     return (
       <div className="gas-modal-content__info-row-wrapper">
         <div className="gas-modal-content__info-row">
-          <div className="gas-modal-content__info-row__send-info">
+          <div
+            className="gas-modal-content__info-row__send-info"
+            data-testid="gas-modal-content__info-row__send-info"
+          >
             <span className="gas-modal-content__info-row__send-info__label">
               {this.context.t('sendAmount')}
             </span>
@@ -137,7 +140,10 @@ export default class GasModalPageContainer extends Component {
               {sendAmount}
             </span>
           </div>
-          <div className="gas-modal-content__info-row__transaction-info">
+          <div
+            className="gas-modal-content__info-row__transaction-info"
+            data-testid="gas-modal-content__info-row__transaction-info"
+          >
             <span className="gas-modal-content__info-row__transaction-info__label">
               {this.context.t('transactionFee')}
             </span>
@@ -155,7 +161,10 @@ export default class GasModalPageContainer extends Component {
               </span>
             </div>
           )}
-          <div className="gas-modal-content__info-row__total-info">
+          <div
+            className="gas-modal-content__info-row__total-info"
+            data-testid="gas-modal-content__info-row__total-info"
+          >
             <span className="gas-modal-content__info-row__total-info__label">
               {this.context.t('newTotal')}
             </span>
diff --git a/ui/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.component.test.js b/ui/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.component.test.js
new file mode 100644
index 000000000..5e8660608
--- /dev/null
+++ b/ui/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.component.test.js
@@ -0,0 +1,81 @@
+import React from 'react';
+
+import { renderWithProvider } from '../../../../test/jest';
+import GasCustomizationModalComponent from './swaps-gas-customization-modal.component';
+
+const createProps = (customProps = {}) => {
+  return {
+    insufficientBalance: false,
+    onSubmit: jest.fn(),
+    cancelAndClose: jest.fn(),
+    minimumGasLimit: 100,
+    gasPriceButtonGroupProps: {
+      buttonDataLoading: false,
+      className: 'gas-price-button-group',
+      gasButtonInfo: [
+        {
+          feeInPrimaryCurrency: '$0.52',
+          feeInSecondaryCurrency: '0.0048 ETH',
+          timeEstimate: '~ 1 min 0 sec',
+          priceInHexWei: '0xa1b2c3f',
+          gasEstimateType: 'FAST',
+        },
+        {
+          feeInPrimaryCurrency: '$0.39',
+          feeInSecondaryCurrency: '0.004 ETH',
+          timeEstimate: '~ 1 min 30 sec',
+          priceInHexWei: '0xa1b2c39',
+          gasEstimateType: 'FAST',
+        },
+        {
+          feeInPrimaryCurrency: '$0.30',
+          feeInSecondaryCurrency: '0.00354 ETH',
+          timeEstimate: '~ 2 min 1 sec',
+          priceInHexWei: '0xa1b2c30',
+          gasEstimateType: 'FAST',
+        },
+      ],
+      handleGasPriceSelection: 'mockSelectionFunction',
+      noButtonActiveByDefault: true,
+      showCheck: true,
+      newTotalFiat: 'mockNewTotalFiat',
+      newTotalEth: 'mockNewTotalEth',
+    },
+    infoRowProps: {
+      originalTotalFiat: 'mockOriginalTotalFiat',
+      originalTotalEth: 'mockOriginalTotalEth',
+      newTotalFiat: 'mockNewTotalFiat',
+      newTotalEth: 'mockNewTotalEth',
+      sendAmount: 'mockSendAmount',
+      transactionFee: 'mockTransactionFee',
+      extraInfoRow: { label: 'mockLabel', value: 'mockValue' },
+    },
+    ...customProps,
+  };
+};
+
+describe('GasCustomizationModalComponent', () => {
+  it('renders the component with initial props', () => {
+    const props = createProps();
+    const { getByText, getByTestId } = renderWithProvider(
+      <GasCustomizationModalComponent {...props} />,
+    );
+    expect(getByTestId('page-container__header')).toMatchSnapshot();
+    expect(getByText('$0.52')).toBeInTheDocument();
+    expect(getByText('0.0048 ETH')).toBeInTheDocument();
+    expect(getByTestId('button-group__button0')).toMatchSnapshot();
+    expect(getByText('~ 1 min 30 sec')).toBeInTheDocument();
+    expect(getByText('$0.39')).toBeInTheDocument();
+    expect(getByText('0.004 ETH')).toBeInTheDocument();
+    expect(
+      getByTestId('gas-modal-content__info-row__send-info'),
+    ).toMatchSnapshot();
+    expect(
+      getByTestId('gas-modal-content__info-row__transaction-info'),
+    ).toMatchSnapshot();
+    expect(
+      getByTestId('gas-modal-content__info-row__total-info'),
+    ).toMatchSnapshot();
+    expect(getByText('Save')).toBeInTheDocument();
+  });
+});
diff --git a/ui/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.container.test.js b/ui/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.container.test.js
new file mode 100644
index 000000000..18bac9511
--- /dev/null
+++ b/ui/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.container.test.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+
+import {
+  renderWithProvider,
+  createSwapsMockStore,
+} from '../../../../test/jest';
+import GasCustomizationModalContainer from '.';
+
+describe('GasCustomizationModalContainer', () => {
+  it('renders the component with initial props', () => {
+    const store = configureMockStore()(createSwapsMockStore());
+    const { getByText, getByTestId } = renderWithProvider(
+      <GasCustomizationModalContainer />,
+      store,
+    );
+    expect(getByTestId('page-container__header')).toMatchSnapshot();
+    expect(getByText('Basic')).toBeInTheDocument();
+    expect(getByText('Advanced')).toBeInTheDocument();
+    expect(getByText('Estimated Processing Times')).toBeInTheDocument();
+    expect(getByText('Send Amount')).toBeInTheDocument();
+    expect(getByText('Transaction Fee')).toBeInTheDocument();
+    expect(
+      getByTestId('gas-modal-content__info-row__send-info'),
+    ).toMatchSnapshot();
+    expect(
+      getByTestId('gas-modal-content__info-row__transaction-info'),
+    ).toMatchSnapshot();
+    expect(
+      getByTestId('gas-modal-content__info-row__total-info'),
+    ).toMatchSnapshot();
+    expect(getByText('Save')).toBeInTheDocument();
+  });
+});
diff --git a/ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap b/ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap
new file mode 100644
index 000000000..49d491b37
--- /dev/null
+++ b/ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap
@@ -0,0 +1,150 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ViewQuote renders the component with initial props 1`] = `
+<div
+  class="main-quote-summary__source-row"
+  data-testid="main-quote-summary__source-row"
+>
+  <span
+    class="main-quote-summary__source-row-value"
+    title="10"
+  >
+    10
+  </span>
+  <img
+    alt=""
+    class="url-icon main-quote-summary__icon"
+    src="https://foo.bar/logo.png"
+  />
+  <span
+    class="main-quote-summary__source-row-symbol"
+    title="DAI"
+  >
+    DAI
+  </span>
+</div>
+`;
+
+exports[`ViewQuote renders the component with initial props 2`] = `
+<div
+  class="main-quote-summary__exchange-rate-container"
+  data-testid="main-quote-summary__exchange-rate-container"
+>
+  <div
+    class="exchange-rate-display main-quote-summary__exchange-rate-display"
+  >
+    <span>
+      1
+    </span>
+    <span
+      class=""
+    >
+      DAI
+    </span>
+    <span>
+      =
+    </span>
+    <span>
+      2.2
+    </span>
+    <span
+      class=""
+    >
+      USDC
+    </span>
+    <div
+      class="exchange-rate-display__switch-arrows"
+    >
+      <svg
+        fill="none"
+        height="13"
+        viewBox="0 0 13 13"
+        width="13"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M4.15294 4.38514H9.99223L8.50853 5.86884C8.30421 6.07297 8.30421 6.40418 8.50853 6.60869C8.61069 6.71085 8.74443 6.76203 8.87836 6.76203C9.01229 6.76203 9.14603 6.71085 9.24819 6.60869L11.6249 4.23219C11.649 4.20803 11.6707 4.1814 11.6899 4.15305C11.6947 4.14563 11.6981 4.13726 11.7025 4.12965C11.7154 4.10815 11.7282 4.08646 11.7381 4.06325C11.7426 4.05222 11.7447 4.04043 11.7487 4.0292C11.7558 4.00827 11.7636 3.98754 11.7681 3.96547C11.775 3.93161 11.7786 3.89717 11.7786 3.86198C11.7786 3.82678 11.775 3.79235 11.7681 3.75849C11.7638 3.73642 11.756 3.71568 11.7487 3.69476C11.7447 3.68353 11.7428 3.67174 11.7381 3.6607C11.7282 3.63749 11.7156 3.616 11.7025 3.59431C11.6981 3.5867 11.6947 3.57833 11.6899 3.57091C11.6707 3.54256 11.649 3.51593 11.6249 3.49177L9.24876 1.11564C9.04444 0.911322 8.71342 0.911322 8.50891 1.11564C8.30459 1.31977 8.30459 1.65098 8.50891 1.85549L9.99223 3.339H4.15294C2.22978 3.339 0.665039 4.90374 0.665039 6.8269C0.665039 7.11588 0.899227 7.35007 1.1882 7.35007C1.47718 7.35007 1.71137 7.11588 1.71137 6.8269C1.71137 5.48037 2.80659 4.38514 4.15294 4.38514ZM12.2066 6.57445C11.9177 6.57445 11.6835 6.80864 11.6835 7.09762C11.6835 8.44396 10.5883 9.53919 9.24191 9.53919H3.40262L4.88632 8.05549C5.09064 7.85136 5.09064 7.52014 4.88632 7.31563C4.682 7.11112 4.35098 7.11131 4.14647 7.31563L1.76977 9.69233C1.74561 9.71649 1.72393 9.74312 1.70471 9.77147C1.70015 9.7787 1.69691 9.78669 1.69273 9.79392C1.6796 9.81561 1.66647 9.83748 1.65677 9.86126C1.6524 9.87211 1.6503 9.88371 1.64631 9.89475C1.63927 9.91586 1.63128 9.93679 1.62671 9.95905C1.61986 9.99291 1.61625 10.0273 1.61625 10.0625C1.61625 10.0977 1.61986 10.1322 1.62671 10.166C1.63109 10.1883 1.63908 10.2092 1.64631 10.2303C1.6503 10.2414 1.65221 10.253 1.65677 10.2638C1.66666 10.2874 1.6796 10.3093 1.69273 10.3312C1.69691 10.3384 1.70015 10.3464 1.70471 10.3536C1.72393 10.382 1.74561 10.4086 1.76977 10.4328L4.14609 12.8091C4.24825 12.9112 4.38199 12.9624 4.51592 12.9624C4.64985 12.9624 4.78359 12.9112 4.88575 12.8091C5.09007 12.6049 5.09007 12.2737 4.88575 12.0692L3.40243 10.5857H9.24172C11.1649 10.5857 12.7296 9.02097 12.7296 7.09781C12.7298 6.80864 12.4956 6.57445 12.2066 6.57445Z"
+          fill="#037DD6"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ViewQuote renders the component with initial props 3`] = `
+<div
+  class="fee-card__savings-and-quotes-header"
+  data-testid="fee-card__savings-and-quotes-header"
+>
+  <div
+    class="fee-card__savings-and-quotes-row"
+  >
+    
+    <div
+      class="fee-card__quote-link-container"
+    >
+      <p
+        class="fee-card__quote-link-text"
+      >
+        3 quotes
+      </p>
+      <div
+        class="fee-card__caret-right"
+      >
+        <i
+          class="fa fa-angle-up"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ViewQuote renders the component with initial props 4`] = `
+<div
+  class="fee-card__row-header"
+  data-testid="fee-card__row-header"
+>
+  <div>
+    <div
+      class="fee-card__row-header-text--bold"
+    >
+      Estimated network fee
+    </div>
+    <div
+      class="info-tooltip"
+    >
+      <div
+        class="fee-card__row-label fee-card__info-tooltip-container"
+      >
+        <div
+          aria-describedby="tippy-tooltip-2"
+          class="info-tooltip__tooltip-container fee-card__info-tooltip-content-container"
+          data-original-title="null"
+          data-tooltipped=""
+          style="display: inline;"
+          tabindex="0"
+        >
+          <img
+            alt=""
+            src="images/mm-info-icon.svg"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div
+      class="fee-card__row-header-secondary--bold"
+    >
+      0 ETH
+    </div>
+    <div
+      class="fee-card__row-header-primary--bold"
+    >
+      0
+    </div>
+  </div>
+</div>
+`;
diff --git a/ui/pages/swaps/view-quote/view-quote.test.js b/ui/pages/swaps/view-quote/view-quote.test.js
new file mode 100644
index 000000000..51dae8a3e
--- /dev/null
+++ b/ui/pages/swaps/view-quote/view-quote.test.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+
+import {
+  renderWithProvider,
+  createSwapsMockStore,
+  setBackgroundConnection,
+} from '../../../../test/jest';
+import ViewQuote from '.';
+
+const middleware = [thunk];
+const createProps = (customProps = {}) => {
+  return {
+    inputValue: '5',
+    onInputChange: jest.fn(),
+    ethBalance: '6 ETH',
+    setMaxSlippage: jest.fn(),
+    maxSlippage: 15,
+    selectedAccountAddress: 'selectedAccountAddress',
+    isFeatureFlagLoaded: false,
+    ...customProps,
+  };
+};
+
+setBackgroundConnection({
+  resetPostFetchState: jest.fn(),
+  safeRefetchQuotes: jest.fn(),
+  setSwapsErrorKey: jest.fn(),
+});
+
+describe('ViewQuote', () => {
+  it('renders the component with initial props', () => {
+    const store = configureMockStore(middleware)(createSwapsMockStore());
+    const props = createProps();
+    const { getByText, getByTestId } = renderWithProvider(
+      <ViewQuote {...props} />,
+      store,
+    );
+    expect(getByText('New quotes in')).toBeInTheDocument();
+    expect(getByTestId('main-quote-summary__source-row')).toMatchSnapshot();
+    expect(
+      getByTestId('main-quote-summary__exchange-rate-container'),
+    ).toMatchSnapshot();
+    expect(
+      getByTestId('fee-card__savings-and-quotes-header'),
+    ).toMatchSnapshot();
+    expect(getByTestId('fee-card__row-header')).toMatchSnapshot();
+    expect(getByText('Back')).toBeInTheDocument();
+    expect(getByText('Swap')).toBeInTheDocument();
+  });
+});

From 932444c35514246014cd6cd60bd683d3006043bc Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Fri, 2 Jul 2021 13:01:27 -0230
Subject: [PATCH 083/141] Ensure transaction controller correctly estimates gas
 for special custom networks (#11441)

---
 app/scripts/controllers/transactions/index.js | 10 +++++++++-
 app/scripts/lib/util.js                       | 14 ++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/app/scripts/controllers/transactions/index.js b/app/scripts/controllers/transactions/index.js
index a921ad52b..66a36df40 100644
--- a/app/scripts/controllers/transactions/index.js
+++ b/app/scripts/controllers/transactions/index.js
@@ -16,6 +16,7 @@ import {
   bnToHex,
   BnMultiplyByFraction,
   addHexPrefix,
+  getChainType,
 } from '../../lib/util';
 import { TRANSACTION_NO_CONTRACT_ERROR_KEY } from '../../../../ui/helpers/constants/error-keys';
 import { getSwapsTokensReceivedFromTxMeta } from '../../../../ui/pages/swaps/swaps.util';
@@ -29,6 +30,7 @@ import {
   HARDFORKS,
   MAINNET,
   NETWORK_TYPE_RPC,
+  CHAIN_ID_TO_GAS_LIMIT_BUFFER_MAP,
 } from '../../../../shared/constants/network';
 import { isEIP1559Transaction } from '../../../../shared/modules/transaction.utils';
 import TransactionStateManager from './tx-state-manager';
@@ -423,11 +425,16 @@ export default class TransactionController extends EventEmitter {
    * @returns {Promise<Object>} Object containing the default gas limit, or the simulation failure object
    */
   async _getDefaultGasLimit(txMeta, getCodeResponse) {
+    const chainId = this._getCurrentChainId();
+    const customNetworkGasBuffer = CHAIN_ID_TO_GAS_LIMIT_BUFFER_MAP[chainId];
+    const chainType = getChainType(chainId);
+
     if (txMeta.txParams.gas) {
       return {};
     } else if (
       txMeta.txParams.to &&
-      txMeta.type === TRANSACTION_TYPES.SENT_ETHER
+      txMeta.type === TRANSACTION_TYPES.SENT_ETHER &&
+      chainType !== 'custom'
     ) {
       // if there's data in the params, but there's no contract code, it's not a valid transaction
       if (txMeta.txParams.data) {
@@ -456,6 +463,7 @@ export default class TransactionController extends EventEmitter {
     const gasLimit = this.txGasUtil.addGasBuffer(
       addHexPrefix(estimatedGasHex),
       blockGasLimit,
+      customNetworkGasBuffer,
     );
     return { gasLimit, simulationFails };
   }
diff --git a/app/scripts/lib/util.js b/app/scripts/lib/util.js
index 9c343ecf6..9467218ca 100644
--- a/app/scripts/lib/util.js
+++ b/app/scripts/lib/util.js
@@ -2,6 +2,10 @@ import extension from 'extensionizer';
 import { stripHexPrefix } from 'ethereumjs-util';
 import BN from 'bn.js';
 import { memoize } from 'lodash';
+import {
+  MAINNET_CHAIN_ID,
+  TEST_CHAINS,
+} from '../../../shared/constants/network';
 
 import {
   ENVIRONMENT_TYPE_POPUP,
@@ -146,6 +150,15 @@ function bnToHex(inputBn) {
   return addHexPrefix(inputBn.toString(16));
 }
 
+function getChainType(chainId) {
+  if (chainId === MAINNET_CHAIN_ID) {
+    return 'mainnet';
+  } else if (TEST_CHAINS.includes(chainId)) {
+    return 'testnet';
+  }
+  return 'custom';
+}
+
 export {
   getPlatform,
   getEnvironmentType,
@@ -154,4 +167,5 @@ export {
   checkForError,
   addHexPrefix,
   bnToHex,
+  getChainType,
 };

From e097a02607015d09a24323f97110f05ac807de89 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Fri, 2 Jul 2021 14:07:34 -0500
Subject: [PATCH 084/141] Provide tooltip for 1559 Gas Price field (#11436)

---
 app/_locales/en/messages.json                                  | 3 +++
 .../advanced-gas-controls/advanced-gas-controls.component.js   | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index b7d9c9469..26e4472c2 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -647,6 +647,9 @@
   "editGasMedium": {
     "message": "Medium"
   },
+  "editGasPriceTooltip": {
+    "message": "This network uses an older version of gas pricing which requires a “Gas price” field. Gas price is the maximum amount you are willing to pay per unit of gas."
+  },
   "editGasTitle": {
     "message": "Edit gas fee"
   },
diff --git a/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js b/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js
index ffd45cc2c..efd5da258 100644
--- a/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js
+++ b/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js
@@ -85,7 +85,7 @@ export default function AdvancedGasControls() {
             titleText={t('gasPrice')}
             titleUnit="(GWEI)"
             onChange={setGasPrice}
-            tooltipText=""
+            tooltipText={t('editGasPriceTooltip')}
             titleDetailText=""
             value={gasPrice}
           />

From afe06adb7aa874d57e91e655e732c91ca4731012 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Fri, 2 Jul 2021 14:07:56 -0500
Subject: [PATCH 085/141] Add icon to actionable message component (#11409)

---
 .../edit-gas-display.component.js             |  2 +-
 .../actionable-message.test.js.snap           |  0
 .../actionable-message/actionable-message.js  | 19 ++++++++++++++++++-
 .../actionable-message.stories.js             | 14 ++++++++++++++
 .../actionable-message.test.js                |  0
 .../ui}/actionable-message/index.js           |  0
 .../ui}/actionable-message/index.scss         | 16 ++++++++++++++++
 ui/components/ui/ui-components.scss           |  1 +
 ui/pages/add-token/add-token.component.js     |  2 +-
 ui/pages/swaps/build-quote/build-quote.js     |  2 +-
 .../dropdown-search-list.js                   |  2 +-
 ui/pages/swaps/import-token/import-token.js   |  2 +-
 ui/pages/swaps/index.scss                     |  1 -
 .../item-list/item-list.component.js          |  2 +-
 .../view-quote/view-quote-price-difference.js |  2 +-
 ui/pages/swaps/view-quote/view-quote.js       |  2 +-
 16 files changed, 57 insertions(+), 10 deletions(-)
 rename ui/{pages/swaps => components/ui}/actionable-message/__snapshots__/actionable-message.test.js.snap (100%)
 rename ui/{pages/swaps => components/ui}/actionable-message/actionable-message.js (79%)
 rename ui/{pages/swaps => components/ui}/actionable-message/actionable-message.stories.js (83%)
 rename ui/{pages/swaps => components/ui}/actionable-message/actionable-message.test.js (100%)
 rename ui/{pages/swaps => components/ui}/actionable-message/index.js (100%)
 rename ui/{pages/swaps => components/ui}/actionable-message/index.scss (88%)

diff --git a/ui/components/app/edit-gas-display/edit-gas-display.component.js b/ui/components/app/edit-gas-display/edit-gas-display.component.js
index 4699ea0e6..9bb7ec113 100644
--- a/ui/components/app/edit-gas-display/edit-gas-display.component.js
+++ b/ui/components/app/edit-gas-display/edit-gas-display.component.js
@@ -15,7 +15,7 @@ import RadioGroup from '../../ui/radio-group/radio-group.component';
 import AdvancedGasControls from '../advanced-gas-controls/advanced-gas-controls.component';
 
 import { I18nContext } from '../../../contexts/i18n';
-import ActionableMessage from '../../../pages/swaps/actionable-message';
+import ActionableMessage from '../../ui/actionable-message/actionable-message';
 
 export default function EditGasDisplay({
   alwaysShowForm,
diff --git a/ui/pages/swaps/actionable-message/__snapshots__/actionable-message.test.js.snap b/ui/components/ui/actionable-message/__snapshots__/actionable-message.test.js.snap
similarity index 100%
rename from ui/pages/swaps/actionable-message/__snapshots__/actionable-message.test.js.snap
rename to ui/components/ui/actionable-message/__snapshots__/actionable-message.test.js.snap
diff --git a/ui/pages/swaps/actionable-message/actionable-message.js b/ui/components/ui/actionable-message/actionable-message.js
similarity index 79%
rename from ui/pages/swaps/actionable-message/actionable-message.js
rename to ui/components/ui/actionable-message/actionable-message.js
index 2d4c9da5c..39826ea04 100644
--- a/ui/pages/swaps/actionable-message/actionable-message.js
+++ b/ui/components/ui/actionable-message/actionable-message.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import InfoTooltip from '../../../components/ui/info-tooltip';
+import InfoTooltip from '../info-tooltip';
 
 const CLASSNAME_WARNING = 'actionable-message--warning';
 const CLASSNAME_DANGER = 'actionable-message--danger';
@@ -20,16 +20,31 @@ export default function ActionableMessage({
   infoTooltipText = '',
   withRightButton = false,
   type = false,
+  useIcon = false,
+  iconFill = '#b8b8b8',
 }) {
   const actionableMessageClassName = classnames(
     'actionable-message',
     typeHash[type],
     withRightButton ? CLASSNAME_WITH_RIGHT_BUTTON : null,
     className,
+    { 'actionable-message--with-icon': useIcon },
   );
 
   return (
     <div className={actionableMessageClassName}>
+      {useIcon && (
+        <svg
+          viewBox="0 0 10 10"
+          xmlns="http://www.w3.org/2000/svg"
+          className="actionable-message__icon"
+        >
+          <path
+            d="M5 0C2.2 0 0 2.2 0 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 2c.4 0 .7.3.7.7s-.3.7-.7.7-.7-.2-.7-.6.3-.8.7-.8zm.7 6H4.3V4.3h1.5V8z"
+            fill={iconFill}
+          />
+        </svg>
+      )}
       {infoTooltipText && (
         <InfoTooltip
           position="left"
@@ -82,4 +97,6 @@ ActionableMessage.propTypes = {
   type: PropTypes.string,
   withRightButton: PropTypes.bool,
   infoTooltipText: PropTypes.string,
+  useIcon: PropTypes.bool,
+  iconFill: PropTypes.string,
 };
diff --git a/ui/pages/swaps/actionable-message/actionable-message.stories.js b/ui/components/ui/actionable-message/actionable-message.stories.js
similarity index 83%
rename from ui/pages/swaps/actionable-message/actionable-message.stories.js
rename to ui/components/ui/actionable-message/actionable-message.stories.js
index b56b79e56..877c66e98 100644
--- a/ui/pages/swaps/actionable-message/actionable-message.stories.js
+++ b/ui/components/ui/actionable-message/actionable-message.stories.js
@@ -68,3 +68,17 @@ export const LeftAligned = () => (
     />
   </div>
 );
+
+export const withIcon = () => (
+  <div style={{ height: '200px', width: '300px' }}>
+    <ActionableMessage
+      message={text(
+        'Message',
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      )}
+      className="actionable-message--left-aligned actionable-message--warning"
+      useIcon
+      iconFill="#f8c000"
+    />
+  </div>
+);
diff --git a/ui/pages/swaps/actionable-message/actionable-message.test.js b/ui/components/ui/actionable-message/actionable-message.test.js
similarity index 100%
rename from ui/pages/swaps/actionable-message/actionable-message.test.js
rename to ui/components/ui/actionable-message/actionable-message.test.js
diff --git a/ui/pages/swaps/actionable-message/index.js b/ui/components/ui/actionable-message/index.js
similarity index 100%
rename from ui/pages/swaps/actionable-message/index.js
rename to ui/components/ui/actionable-message/index.js
diff --git a/ui/pages/swaps/actionable-message/index.scss b/ui/components/ui/actionable-message/index.scss
similarity index 88%
rename from ui/pages/swaps/actionable-message/index.scss
rename to ui/components/ui/actionable-message/index.scss
index 4838489d4..abcf3ee0b 100644
--- a/ui/pages/swaps/actionable-message/index.scss
+++ b/ui/components/ui/actionable-message/index.scss
@@ -9,6 +9,21 @@
   align-items: center;
   position: relative;
 
+  &--with-icon {
+    padding-inline-start: 32px;
+  }
+
+  &--with-icon.actionable-message--warning {
+    justify-content: normal;
+  }
+
+  &__icon {
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    left: 8px;
+  }
+
   @include H7;
 
   &__message {
@@ -69,6 +84,7 @@
   &--left-aligned {
     .actionable-message__message,
     .actionable-message__actions {
+      text-align: left;
     }
   }
 
diff --git a/ui/components/ui/ui-components.scss b/ui/components/ui/ui-components.scss
index 9f4616726..0dd1ad72e 100644
--- a/ui/components/ui/ui-components.scss
+++ b/ui/components/ui/ui-components.scss
@@ -1,5 +1,6 @@
 /** Please import your files in alphabetical order **/
 @import 'account-mismatch-warning/index';
+@import 'actionable-message/index';
 @import 'alert-circle-icon/index';
 @import 'alert/index';
 @import 'box/box';
diff --git a/ui/pages/add-token/add-token.component.js b/ui/pages/add-token/add-token.component.js
index 36c215e2a..57852de20 100644
--- a/ui/pages/add-token/add-token.component.js
+++ b/ui/pages/add-token/add-token.component.js
@@ -9,7 +9,7 @@ import PageContainer from '../../components/ui/page-container';
 import { Tabs, Tab } from '../../components/ui/tabs';
 import { addHexPrefix } from '../../../app/scripts/lib/util';
 import { isValidHexAddress } from '../../../shared/modules/hexstring-utils';
-import ActionableMessage from '../swaps/actionable-message';
+import ActionableMessage from '../../components/ui/actionable-message/actionable-message';
 import Typography from '../../components/ui/typography';
 import { TYPOGRAPHY, FONT_WEIGHT } from '../../helpers/constants/design-system';
 import Button from '../../components/ui/button';
diff --git a/ui/pages/swaps/build-quote/build-quote.js b/ui/pages/swaps/build-quote/build-quote.js
index 0ac479977..1d5220258 100644
--- a/ui/pages/swaps/build-quote/build-quote.js
+++ b/ui/pages/swaps/build-quote/build-quote.js
@@ -18,7 +18,7 @@ import DropdownSearchList from '../dropdown-search-list';
 import SlippageButtons from '../slippage-buttons';
 import { getTokens, getConversionRate } from '../../../ducks/metamask/metamask';
 import InfoTooltip from '../../../components/ui/info-tooltip';
-import ActionableMessage from '../actionable-message';
+import ActionableMessage from '../../../components/ui/actionable-message/actionable-message';
 
 import {
   fetchQuotesAndSetQuoteState,
diff --git a/ui/pages/swaps/dropdown-search-list/dropdown-search-list.js b/ui/pages/swaps/dropdown-search-list/dropdown-search-list.js
index 3f236ef2d..cbc9de4aa 100644
--- a/ui/pages/swaps/dropdown-search-list/dropdown-search-list.js
+++ b/ui/pages/swaps/dropdown-search-list/dropdown-search-list.js
@@ -13,7 +13,7 @@ import { I18nContext } from '../../../contexts/i18n';
 import SearchableItemList from '../searchable-item-list';
 import PulseLoader from '../../../components/ui/pulse-loader';
 import UrlIcon from '../../../components/ui/url-icon';
-import ActionableMessage from '../actionable-message';
+import ActionableMessage from '../../../components/ui/actionable-message/actionable-message';
 import ImportToken from '../import-token';
 import { useNewMetricEvent } from '../../../hooks/useMetricEvent';
 import {
diff --git a/ui/pages/swaps/import-token/import-token.js b/ui/pages/swaps/import-token/import-token.js
index c0a967a9c..9be183878 100644
--- a/ui/pages/swaps/import-token/import-token.js
+++ b/ui/pages/swaps/import-token/import-token.js
@@ -6,7 +6,7 @@ import Popover from '../../../components/ui/popover';
 import Button from '../../../components/ui/button';
 import Box from '../../../components/ui/box';
 import Typography from '../../../components/ui/typography';
-import ActionableMessage from '../actionable-message';
+import ActionableMessage from '../../../components/ui/actionable-message/actionable-message';
 import {
   TYPOGRAPHY,
   FONT_WEIGHT,
diff --git a/ui/pages/swaps/index.scss b/ui/pages/swaps/index.scss
index 358f0d7a5..406f885d3 100644
--- a/ui/pages/swaps/index.scss
+++ b/ui/pages/swaps/index.scss
@@ -1,4 +1,3 @@
-@import 'actionable-message/index';
 @import 'awaiting-swap/index';
 @import 'awaiting-signatures/index';
 @import 'build-quote/index';
diff --git a/ui/pages/swaps/searchable-item-list/item-list/item-list.component.js b/ui/pages/swaps/searchable-item-list/item-list/item-list.component.js
index 4c7442448..484e4ed65 100644
--- a/ui/pages/swaps/searchable-item-list/item-list/item-list.component.js
+++ b/ui/pages/swaps/searchable-item-list/item-list/item-list.component.js
@@ -5,7 +5,7 @@ import classnames from 'classnames';
 import Identicon from '../../../../components/ui/identicon';
 import UrlIcon from '../../../../components/ui/url-icon';
 import Button from '../../../../components/ui/button';
-import ActionableMessage from '../../actionable-message';
+import ActionableMessage from '../../../../components/ui/actionable-message/actionable-message';
 import { I18nContext } from '../../../../contexts/i18n';
 import {
   getCurrentChainId,
diff --git a/ui/pages/swaps/view-quote/view-quote-price-difference.js b/ui/pages/swaps/view-quote/view-quote-price-difference.js
index 327aaaf49..af73963e1 100644
--- a/ui/pages/swaps/view-quote/view-quote-price-difference.js
+++ b/ui/pages/swaps/view-quote/view-quote-price-difference.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { I18nContext } from '../../../contexts/i18n';
 
-import ActionableMessage from '../actionable-message';
+import ActionableMessage from '../../../components/ui/actionable-message/actionable-message';
 import Tooltip from '../../../components/ui/tooltip';
 import Box from '../../../components/ui/box';
 import {
diff --git a/ui/pages/swaps/view-quote/view-quote.js b/ui/pages/swaps/view-quote/view-quote.js
index 217de73de..6e2ac4cf5 100644
--- a/ui/pages/swaps/view-quote/view-quote.js
+++ b/ui/pages/swaps/view-quote/view-quote.js
@@ -72,7 +72,7 @@ import {
 import MainQuoteSummary from '../main-quote-summary';
 import { calcGasTotal } from '../../send/send.utils';
 import { getCustomTxParamsData } from '../../confirm-approve/confirm-approve.util';
-import ActionableMessage from '../actionable-message';
+import ActionableMessage from '../../../components/ui/actionable-message/actionable-message';
 import {
   quotesToRenderableData,
   getRenderableNetworkFeesForQuote,

From 6fa3cce7abe6d20609d923f425fb1e7585d3b559 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Fri, 2 Jul 2021 14:12:13 -0500
Subject: [PATCH 086/141] Create Gas Timing component for EIP-1559 (#11405)

---
 ui/components/app/app-components.scss         |  1 +
 .../app/gas-timing/gas-timing.component.js    | 32 ++++++++++++
 .../app/gas-timing/gas-timing.stories.js      | 49 +++++++++++++++++++
 ui/components/app/gas-timing/index.js         |  1 +
 ui/components/app/gas-timing/index.scss       | 20 ++++++++
 .../transaction-detail-item.component.js      |  6 ++-
 .../transaction-detail-item.stories.js        |  3 +-
 .../transaction-detail.stories.js             |  3 +-
 .../transaction-total-banner.component.js     | 12 ++---
 9 files changed, 115 insertions(+), 12 deletions(-)
 create mode 100644 ui/components/app/gas-timing/gas-timing.component.js
 create mode 100644 ui/components/app/gas-timing/gas-timing.stories.js
 create mode 100644 ui/components/app/gas-timing/index.js
 create mode 100644 ui/components/app/gas-timing/index.scss

diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss
index ab36b4b96..b579de073 100644
--- a/ui/components/app/app-components.scss
+++ b/ui/components/app/app-components.scss
@@ -16,6 +16,7 @@
 @import 'gas-customization/gas-modal-page-container/index';
 @import 'gas-customization/gas-price-button-group/index';
 @import 'gas-customization/index';
+@import 'gas-timing/index';
 @import 'home-notification/index';
 @import 'info-box/index';
 @import 'menu-bar/index';
diff --git a/ui/components/app/gas-timing/gas-timing.component.js b/ui/components/app/gas-timing/gas-timing.component.js
new file mode 100644
index 000000000..3b34be488
--- /dev/null
+++ b/ui/components/app/gas-timing/gas-timing.component.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import Typography from '../../ui/typography/typography';
+import { TYPOGRAPHY } from '../../../helpers/constants/design-system';
+import InfoTooltip from '../../ui/info-tooltip';
+
+export default function GasTiming({ text, tooltipText, attitude }) {
+  return (
+    <Typography
+      variant={TYPOGRAPHY.H7}
+      className={classNames('gas-timing', {
+        [`gas-timing--${attitude}`]: attitude,
+      })}
+    >
+      {text}
+      {tooltipText && <InfoTooltip position="top" contentText={tooltipText} />}
+    </Typography>
+  );
+}
+
+GasTiming.propTypes = {
+  text: PropTypes.string.isRequired,
+  tooltipText: PropTypes.string,
+  attitude: PropTypes.oneOf(['positive', 'negative', 'warning', '']),
+};
+
+GasTiming.defaultProps = {
+  tooltipText: '',
+  attitude: '',
+};
diff --git a/ui/components/app/gas-timing/gas-timing.stories.js b/ui/components/app/gas-timing/gas-timing.stories.js
new file mode 100644
index 000000000..639cd9718
--- /dev/null
+++ b/ui/components/app/gas-timing/gas-timing.stories.js
@@ -0,0 +1,49 @@
+import React from 'react';
+
+import GasTiming from '.';
+
+export default {
+  title: 'Gas Timing',
+};
+
+export const simple = () => {
+  return (
+    <div style={{ width: '600px' }}>
+      <GasTiming text="Likely within 30 seconds" />
+    </div>
+  );
+};
+
+export const withTooltip = () => {
+  return (
+    <div style={{ width: '600px' }}>
+      <GasTiming
+        text="Likely within 30 seconds"
+        tooltipText="This is the tooltip text"
+      />
+    </div>
+  );
+};
+
+export const withAttitudes = () => {
+  return (
+    <div style={{ width: '600px' }}>
+      <GasTiming text="Likely within 30 seconds" />
+      <GasTiming
+        text="Likely within 30 seconds"
+        tooltipText="This is the tooltip text"
+        attitude="negative"
+      />
+      <GasTiming
+        text="Likely within 30 seconds"
+        tooltipText="This is the tooltip text"
+        attitude="positive"
+      />
+      <GasTiming
+        text="Likely within 30 seconds"
+        tooltipText="This is the tooltip text"
+        attitude="warning"
+      />
+    </div>
+  );
+};
diff --git a/ui/components/app/gas-timing/index.js b/ui/components/app/gas-timing/index.js
new file mode 100644
index 000000000..35e38614a
--- /dev/null
+++ b/ui/components/app/gas-timing/index.js
@@ -0,0 +1 @@
+export { default } from './gas-timing.component';
diff --git a/ui/components/app/gas-timing/index.scss b/ui/components/app/gas-timing/index.scss
new file mode 100644
index 000000000..b8174b982
--- /dev/null
+++ b/ui/components/app/gas-timing/index.scss
@@ -0,0 +1,20 @@
+.typography.gas-timing {
+  color: $ui-4;
+
+  &--positive {
+    color: $success-3;
+  }
+
+  &--warning {
+    color: $alert-3;
+  }
+
+  &--negative {
+    color: $error-1;
+  }
+
+  .info-tooltip {
+    display: inline-block;
+    margin-inline-start: 4px;
+  }
+}
diff --git a/ui/components/app/transaction-detail-item/transaction-detail-item.component.js b/ui/components/app/transaction-detail-item/transaction-detail-item.component.js
index c9bc72b32..0e3039987 100644
--- a/ui/components/app/transaction-detail-item/transaction-detail-item.component.js
+++ b/ui/components/app/transaction-detail-item/transaction-detail-item.component.js
@@ -30,6 +30,7 @@ export default function TransactionDetailItem({
           <Typography
             variant={TYPOGRAPHY.H6}
             className="transaction-detail-item__detail-text"
+            color={COLORS.UI4}
           >
             {detailText}
           </Typography>
@@ -48,11 +49,14 @@ export default function TransactionDetailItem({
           <Typography
             variant={TYPOGRAPHY.H7}
             className="transaction-detail-item__subtitle"
+            color={COLORS.UI4}
           >
             {subTitle}
           </Typography>
         )}
-        <Typography variant={TYPOGRAPHY.H7}>{subText}</Typography>
+        <Typography variant={TYPOGRAPHY.H7} color={COLORS.UI4}>
+          {subText}
+        </Typography>
       </div>
     </div>
   );
diff --git a/ui/components/app/transaction-detail-item/transaction-detail-item.stories.js b/ui/components/app/transaction-detail-item/transaction-detail-item.stories.js
index a7d81e70a..6565eea5a 100644
--- a/ui/components/app/transaction-detail-item/transaction-detail-item.stories.js
+++ b/ui/components/app/transaction-detail-item/transaction-detail-item.stories.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import InfoTooltip from '../../ui/info-tooltip/info-tooltip';
+import GasTiming from '../gas-timing/gas-timing.component';
 import TransactionDetailItem from '.';
 
 export default {
@@ -20,7 +21,7 @@ export const basic = () => {
         }
         detailText="16565.30"
         detailTotal="0.0089 ETH"
-        subTitle="Very likely in < 15 seconds"
+        subTitle={<GasTiming text="Very likely in < 15 seconds" />}
         subText={
           <>
             From <strong>$16565 - $19000</strong>
diff --git a/ui/components/app/transaction-detail/transaction-detail.stories.js b/ui/components/app/transaction-detail/transaction-detail.stories.js
index 1cfc6e8fe..e20fbd64a 100644
--- a/ui/components/app/transaction-detail/transaction-detail.stories.js
+++ b/ui/components/app/transaction-detail/transaction-detail.stories.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import InfoTooltip from '../../ui/info-tooltip/info-tooltip';
 import TransactionDetailItem from '../transaction-detail-item/transaction-detail-item.component';
+import GasTiming from '../gas-timing/gas-timing.component';
 import TransactionDetail from '.';
 
 export default {
@@ -20,7 +21,7 @@ const rows = [
     }
     detailText="0.00896 ETH"
     detailTotal="$15.73"
-    subTitle="Very likely in < 15 seconds"
+    subTitle={<GasTiming text="Very likely in < 15 seconds" />}
     subText={
       <>
         From <strong>$15.73 - $19.81</strong>
diff --git a/ui/components/app/transaction-total-banner/transaction-total-banner.component.js b/ui/components/app/transaction-total-banner/transaction-total-banner.component.js
index 40731186a..f267155ca 100644
--- a/ui/components/app/transaction-total-banner/transaction-total-banner.component.js
+++ b/ui/components/app/transaction-total-banner/transaction-total-banner.component.js
@@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
 import Typography from '../../ui/typography/typography';
 import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system';
 
+import GasTiming from '../gas-timing/gas-timing.component';
+
 export default function TransactionTotalBanner({ total, detail, timing }) {
   return (
     <div className="transaction-total-banner">
@@ -19,15 +21,7 @@ export default function TransactionTotalBanner({ total, detail, timing }) {
           {detail}
         </Typography>
       )}
-      {timing && (
-        <Typography
-          color={COLORS.UI4}
-          variant={TYPOGRAPHY.H7}
-          className="transaction-total-banner__timing"
-        >
-          {timing}
-        </Typography>
-      )}
+      {timing && <GasTiming text={timing} />}
     </div>
   );
 }

From 7163c56f3ed3530e104f1a7bdac8f5df6961ba3d Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Fri, 2 Jul 2021 17:00:40 -0230
Subject: [PATCH 087/141] Add some metrics events to the 3box controller
 (#11447)

---
 app/scripts/controllers/threebox.js | 43 +++++++++++++++++++++++++++++
 app/scripts/metamask-controller.js  |  3 ++
 2 files changed, 46 insertions(+)

diff --git a/app/scripts/controllers/threebox.js b/app/scripts/controllers/threebox.js
index 8355fb4fe..10b231b38 100644
--- a/app/scripts/controllers/threebox.js
+++ b/app/scripts/controllers/threebox.js
@@ -25,6 +25,7 @@ export default class ThreeBoxController {
       addressBookController,
       version,
       getKeyringControllerState,
+      trackMetaMetricsEvent,
     } = opts;
 
     this.preferencesController = preferencesController;
@@ -59,6 +60,7 @@ export default class ThreeBoxController {
         );
       },
     });
+    this._trackMetaMetricsEvent = trackMetaMetricsEvent;
 
     const initState = {
       threeBoxSyncingAllowed: false,
@@ -83,6 +85,12 @@ export default class ThreeBoxController {
   async init() {
     const accounts = await this.keyringController.getAccounts();
     this.address = accounts[0];
+
+    this._trackMetaMetricsEvent({
+      event: '3Box Initiated',
+      category: '3Box',
+    });
+
     if (this.address && !(this.box && this.store.getState().threeBoxSynced)) {
       await this.new3Box();
     }
@@ -140,8 +148,18 @@ export default class ThreeBoxController {
       backupExists = threeBoxConfig.spaces && threeBoxConfig.spaces.metamask;
     } catch (e) {
       if (e.message.match(/^Error: Invalid response \(404\)/u)) {
+        this._trackMetaMetricsEvent({
+          event: '3Box Backup does not exist',
+          category: '3Box',
+        });
+
         backupExists = false;
       } else {
+        this._trackMetaMetricsEvent({
+          event: '3Box Config Error',
+          category: '3Box',
+        });
+
         throw e;
       }
     }
@@ -175,9 +193,19 @@ export default class ThreeBoxController {
             this.store.updateState(stateUpdate);
 
             log.debug('3Box space sync done');
+
+            this._trackMetaMetricsEvent({
+              event: '3Box Synced',
+              category: '3Box',
+            });
           },
         });
       } catch (e) {
+        this._trackMetaMetricsEvent({
+          event: '3Box Initiation Error',
+          category: '3Box',
+        });
+
         console.error(e);
         throw e;
       }
@@ -216,13 +244,28 @@ export default class ThreeBoxController {
     preferences && this.preferencesController.store.updateState(preferences);
     addressBook && this.addressBookController.update(addressBook, true);
     this.setShowRestorePromptToFalse();
+
+    this._trackMetaMetricsEvent({
+      event: '3Box Restored Data',
+      category: '3Box',
+    });
   }
 
   turnThreeBoxSyncingOn() {
+    this._trackMetaMetricsEvent({
+      event: '3Box Sync Turned On',
+      category: '3Box',
+    });
+
     this._registerUpdates();
   }
 
   turnThreeBoxSyncingOff() {
+    this._trackMetaMetricsEvent({
+      event: '3Box Sync Turned Off',
+      category: '3Box',
+    });
+
     this.box.logout();
   }
 
diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
index 20cb8655e..cb6936dfc 100644
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@@ -325,6 +325,9 @@ export default class MetamaskController extends EventEmitter {
         this.keyringController.memStore,
       ),
       version,
+      trackMetaMetricsEvent: this.metaMetricsController.trackEvent.bind(
+        this.metaMetricsController,
+      ),
     });
 
     this.txController = new TransactionController({

From 22973704e895a7e3e857ee0c9b759760fb2190dc Mon Sep 17 00:00:00 2001
From: PeterYinusa <53189696+PeterYinusa@users.noreply.github.com>
Date: Mon, 5 Jul 2021 12:56:37 +0100
Subject: [PATCH 088/141] Use fixtures for dapp interaction tests (#11444)

* move send eth from dapp test

* move contract interactions test

* fix lint issues
---
 test/e2e/metamask-ui.spec.js                 | 315 +------------------
 test/e2e/tests/contract-interactions.spec.js | 139 ++++++++
 test/e2e/tests/send-eth.spec.js              | 117 +++++++
 3 files changed, 259 insertions(+), 312 deletions(-)
 create mode 100644 test/e2e/tests/contract-interactions.spec.js

diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js
index 63b4c8c02..0544fb5e2 100644
--- a/test/e2e/metamask-ui.spec.js
+++ b/test/e2e/metamask-ui.spec.js
@@ -253,45 +253,11 @@ describe('MetaMask', function () {
     });
   });
 
-  describe('Send ETH from dapp using advanced gas controls', function () {
+  describe('Navigate transactions', function () {
     let windowHandles;
     let extension;
     let popup;
     let dapp;
-
-    it('goes to the settings screen', async function () {
-      await driver.clickElement('.account-menu__icon');
-      await driver.delay(regularDelayMs);
-
-      await driver.clickElement({ text: 'Settings', tag: 'div' });
-
-      // await driver.findElement('.tab-bar')
-
-      await driver.clickElement({ text: 'Advanced', tag: 'div' });
-      await driver.delay(regularDelayMs);
-
-      await driver.clickElement(
-        '[data-testid="advanced-setting-show-testnet-conversion"] .settings-page__content-item-col > div > 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 > div > div',
-      );
-      windowHandles = await driver.getAllWindowHandles();
-      extension = windowHandles[0];
-      await driver.closeAllWindowHandlesExcept([extension]);
-
-      await driver.clickElement('.app-header__logo-container');
-
-      await driver.delay(largeDelayMs);
-    });
-
     it('connects the dapp', async function () {
       await driver.openNewPage('http://127.0.0.1:8080/');
       await driver.delay(regularDelayMs);
@@ -324,87 +290,7 @@ describe('MetaMask', function () {
       await driver.delay(regularDelayMs);
     });
 
-    it('initiates a send from the dapp', async function () {
-      await driver.clickElement({ text: 'Send', tag: 'button' }, 10000);
-      await driver.delay(2000);
-
-      windowHandles = await driver.getAllWindowHandles();
-      await driver.switchToWindowWithTitle(
-        'MetaMask Notification',
-        windowHandles,
-      );
-      await driver.delay(regularDelayMs);
-
-      await driver.assertElementNotPresent({ text: 'Data', tag: 'li' });
-
-      const [gasPriceInput, gasLimitInput] = await driver.findElements(
-        '.advanced-gas-inputs__gas-edit-row__input',
-      );
-
-      await gasPriceInput.clear();
-      await driver.delay(50);
-      await gasPriceInput.fill('10');
-      await driver.delay(50);
-      await driver.delay(tinyDelayMs);
-      await driver.delay(50);
-
-      await gasLimitInput.fill('');
-      await driver.delay(50);
-      await gasLimitInput.fill('25000');
-
-      await driver.delay(1000);
-
-      await driver.clickElement({ text: 'Confirm', tag: 'button' }, 10000);
-      await driver.delay(regularDelayMs);
-
-      await driver.waitUntilXWindowHandles(2);
-      await driver.switchToWindow(extension);
-      await driver.delay(regularDelayMs);
-    });
-
-    it('finds the transaction in the transactions list', async function () {
-      await driver.clickElement('[data-testid="home__activity-tab"]');
-      await driver.wait(async () => {
-        const confirmedTxes = await driver.findElements(
-          '.transaction-list__completed-transactions .transaction-list-item',
-        );
-        return confirmedTxes.length === 1;
-      }, 10000);
-
-      await driver.waitForSelector({
-        css: '.transaction-list-item__primary-currency',
-        text: '-3 ETH',
-      });
-    });
-
-    it('the transaction has the expected gas price', async function () {
-      const txValue = await driver.findClickableElement(
-        '.transaction-list-item__primary-currency',
-      );
-      await txValue.click();
-      const popoverCloseButton = await driver.findClickableElement(
-        '.popover-header__button',
-      );
-      await driver.waitForSelector({
-        css: '[data-testid="transaction-breakdown__gas-price"]',
-        text: '10',
-      });
-      await popoverCloseButton.click();
-    });
-  });
-
-  describe('Navigate transactions', function () {
     it('adds multiple transactions', async function () {
-      await driver.delay(regularDelayMs);
-
-      await driver.waitUntilXWindowHandles(2);
-      const windowHandles = await driver.getAllWindowHandles();
-      const extension = windowHandles[0];
-      const dapp = windowHandles[1];
-
-      await driver.switchToWindow(dapp);
-      await driver.delay(largeDelayMs);
-
       const send3eth = await driver.findClickableElement({
         text: 'Send',
         tag: 'button',
@@ -427,6 +313,7 @@ describe('MetaMask', function () {
       await driver.switchToWindow(extension);
       await driver.delay(regularDelayMs);
 
+      await driver.clickElement('[data-testid="home__activity-tab"]');
       await driver.clickElement('.transaction-list-item');
       await driver.delay(largeDelayMs);
     });
@@ -521,10 +408,6 @@ describe('MetaMask', function () {
         'second transaction in focus',
       );
 
-      const windowHandles = await driver.getAllWindowHandles();
-      const extension = windowHandles[0];
-      const dapp = windowHandles[1];
-
       await driver.switchToWindow(dapp);
       await driver.delay(regularDelayMs);
 
@@ -583,203 +466,11 @@ describe('MetaMask', function () {
         const confirmedTxes = await driver.findElements(
           '.transaction-list__completed-transactions .transaction-list-item',
         );
-        return confirmedTxes.length === 2;
+        return confirmedTxes.length === 1;
       }, 10000);
     });
   });
 
-  describe('Deploy contract and call contract methods', function () {
-    let extension;
-    let dapp;
-    it('creates a deploy contract transaction', async function () {
-      const windowHandles = await driver.getAllWindowHandles();
-      extension = windowHandles[0];
-      dapp = windowHandles[1];
-      await driver.delay(tinyDelayMs);
-
-      await driver.switchToWindow(dapp);
-      await driver.delay(regularDelayMs);
-
-      await driver.clickElement('#deployButton');
-      await driver.delay(regularDelayMs);
-
-      await driver.switchToWindow(extension);
-      await driver.delay(regularDelayMs);
-
-      await driver.clickElement({ text: 'Contract Deployment', tag: 'h2' });
-      await driver.delay(largeDelayMs);
-    });
-
-    it('displays the contract creation data', async function () {
-      await driver.clickElement({ text: 'Data', tag: 'button' });
-      await driver.delay(regularDelayMs);
-
-      await driver.findElement({ text: '127.0.0.1', tag: 'div' });
-
-      const confirmDataDiv = await driver.findElement(
-        '.confirm-page-container-content__data-box',
-      );
-      const confirmDataText = await confirmDataDiv.getText();
-      assert.ok(confirmDataText.includes('Origin:'));
-      assert.ok(confirmDataText.includes('127.0.0.1'));
-      assert.ok(confirmDataText.includes('Bytes:'));
-      assert.ok(confirmDataText.includes('675'));
-
-      await driver.clickElement({ text: 'Details', tag: 'button' });
-      await driver.delay(regularDelayMs);
-    });
-
-    it('confirms a deploy contract transaction', async function () {
-      await driver.clickElement({ text: 'Confirm', tag: 'button' });
-      await driver.delay(largeDelayMs);
-
-      await driver.waitForSelector(
-        '.transaction-list__completed-transactions .transaction-list-item:nth-of-type(3)',
-      );
-
-      await driver.waitForSelector(
-        {
-          css: '.list-item__title',
-          text: 'Contract Deployment',
-        },
-        { timeout: 10000 },
-      );
-      await driver.delay(regularDelayMs);
-    });
-
-    it('calls and confirms a contract method where ETH is sent', async function () {
-      await driver.switchToWindow(dapp);
-      await driver.delay(regularDelayMs);
-
-      await driver.waitForSelector(
-        {
-          css: '#contractStatus',
-          text: 'Deployed',
-        },
-        { timeout: 15000 },
-      );
-
-      await driver.clickElement('#depositButton');
-      await driver.delay(largeDelayMs);
-
-      await driver.waitForSelector(
-        {
-          css: '#contractStatus',
-          text: 'Deposit initiated',
-        },
-        { timeout: 10000 },
-      );
-
-      await driver.switchToWindow(extension);
-      await driver.delay(largeDelayMs * 2);
-
-      await driver.findElements('.transaction-list-item--unconfirmed');
-      const txListValue = await driver.findClickableElement(
-        '.transaction-list-item__primary-currency',
-      );
-      await driver.waitForSelector(
-        {
-          css: '.transaction-list-item__primary-currency',
-          text: '-4 ETH',
-        },
-        { timeout: 10000 },
-      );
-      await txListValue.click();
-      await driver.delay(regularDelayMs);
-
-      // Set the gas limit
-      await driver.clickElement('.confirm-detail-row__header-text--edit');
-      // wait for gas modal to be visible.
-      const gasModal = await driver.findVisibleElement('span .modal');
-      await driver.clickElement('.page-container__tab:nth-of-type(2)');
-      await driver.delay(regularDelayMs);
-
-      const [gasPriceInput, gasLimitInput] = await driver.findElements(
-        '.advanced-gas-inputs__gas-edit-row__input',
-      );
-      const gasLimitValue = await gasLimitInput.getAttribute('value');
-      assert(Number(gasLimitValue) < 100000, 'Gas Limit too high');
-
-      await gasPriceInput.fill('10');
-      await driver.delay(50);
-
-      await gasLimitInput.fill('60001');
-
-      await driver.delay(1000);
-
-      await driver.clickElement({ text: 'Save', tag: 'button' });
-
-      // wait for gas modal to be detached from DOM
-      await gasModal.waitForElementState('hidden');
-
-      await driver.clickElement({ text: 'Confirm', tag: 'button' });
-      await driver.delay(regularDelayMs);
-
-      await driver.waitForSelector(
-        '.transaction-list__completed-transactions .transaction-list-item:nth-of-type(4)',
-        { timeout: 10000 },
-      );
-      await driver.waitForSelector(
-        {
-          css:
-            '.transaction-list__completed-transactions .transaction-list-item__primary-currency',
-          text: '-4 ETH',
-        },
-        { timeout: 10000 },
-      );
-    });
-
-    it('calls and confirms a contract method where ETH is received', async function () {
-      await driver.switchToWindow(dapp);
-      await driver.delay(regularDelayMs);
-
-      await driver.clickElement('#withdrawButton');
-      await driver.delay(regularDelayMs);
-
-      await driver.switchToWindow(extension);
-      await driver.delay(largeDelayMs * 2);
-
-      await driver.clickElement(
-        '.transaction-list__pending-transactions  .transaction-list-item',
-      );
-      await driver.delay(regularDelayMs);
-
-      await driver.clickElement({ text: 'Confirm', tag: 'button' });
-      await driver.delay(regularDelayMs);
-
-      await driver.wait(async () => {
-        const confirmedTxes = await driver.findElements(
-          '.transaction-list__completed-transactions .transaction-list-item',
-        );
-        return confirmedTxes.length === 5;
-      }, 10000);
-
-      await driver.waitForSelector(
-        {
-          css: '.transaction-list-item__primary-currency',
-          text: '-0 ETH',
-        },
-        { timeout: 10000 },
-      );
-
-      await driver.closeAllWindowHandlesExcept([extension, dapp]);
-      await driver.switchToWindow(extension);
-    });
-
-    it('renders the correct ETH balance', async function () {
-      const balance = await driver.waitForSelector(
-        {
-          css: '[data-testid="eth-overview__primary-currency"]',
-          text: '90.',
-        },
-        { timeout: 10000 },
-      );
-      const tokenAmount = await balance.getText();
-      assert.ok(/^90.*\s*ETH.*$/u.test(tokenAmount));
-      await driver.delay(regularDelayMs);
-    });
-  });
-
   describe('Add a custom token from a dapp', function () {
     it('creates a new token', async function () {
       let windowHandles = await driver.getAllWindowHandles();
diff --git a/test/e2e/tests/contract-interactions.spec.js b/test/e2e/tests/contract-interactions.spec.js
new file mode 100644
index 000000000..a88a12032
--- /dev/null
+++ b/test/e2e/tests/contract-interactions.spec.js
@@ -0,0 +1,139 @@
+const { strict: assert } = require('assert');
+const { withFixtures } = require('../helpers');
+
+describe('Deploy contract and call contract methods', function () {
+  let windowHandles;
+  let extension;
+  let popup;
+  let dapp;
+  const ganacheOptions = {
+    accounts: [
+      {
+        secretKey:
+          '0x7C9529A67102755B7E6102D6D950AC5D5863C98713805CEC576B945B15B71EAC',
+        balance: 25000000000000000000,
+      },
+    ],
+  };
+  it('should display the correct account balance after contract interactions', async function () {
+    await withFixtures(
+      {
+        dapp: true,
+        fixtures: 'imported-account',
+        ganacheOptions,
+        title: this.test.title,
+      },
+      async ({ driver }) => {
+        await driver.navigate();
+        await driver.fill('#password', 'correct horse battery staple');
+        await driver.press('#password', driver.Key.ENTER);
+
+        // connects the dapp
+        await driver.openNewPage('http://127.0.0.1:8080/');
+        await driver.clickElement({ text: 'Connect', tag: 'button' });
+        await driver.waitUntilXWindowHandles(3);
+        windowHandles = await driver.getAllWindowHandles();
+        extension = windowHandles[0];
+        dapp = await driver.switchToWindowWithTitle(
+          'E2E Test Dapp',
+          windowHandles,
+        );
+        popup = windowHandles.find(
+          (handle) => handle !== extension && handle !== dapp,
+        );
+        await driver.switchToWindow(popup);
+        await driver.clickElement({ text: 'Next', tag: 'button' });
+        await driver.clickElement({ text: 'Connect', tag: 'button' });
+        await driver.waitUntilXWindowHandles(2);
+
+        // creates a deploy contract transaction
+        await driver.switchToWindow(dapp);
+        await driver.clickElement('#deployButton');
+
+        // displays the contract creation data
+        await driver.switchToWindow(extension);
+        await driver.clickElement('[data-testid="home__activity-tab"]');
+        await driver.clickElement({ text: 'Contract Deployment', tag: 'h2' });
+        await driver.clickElement({ text: 'Data', tag: 'button' });
+        await driver.findElement({ text: '127.0.0.1', tag: 'div' });
+        const confirmDataDiv = await driver.findElement(
+          '.confirm-page-container-content__data-box',
+        );
+        const confirmDataText = await confirmDataDiv.getText();
+        assert.ok(confirmDataText.includes('Origin:'));
+        assert.ok(confirmDataText.includes('127.0.0.1'));
+        assert.ok(confirmDataText.includes('Bytes:'));
+        assert.ok(confirmDataText.includes('675'));
+
+        // confirms a deploy contract transaction
+        await driver.clickElement({ text: 'Details', tag: 'button' });
+        await driver.clickElement({ text: 'Confirm', tag: 'button' });
+        await driver.waitForSelector(
+          '.transaction-list__completed-transactions .transaction-list-item:nth-of-type(1)',
+          { timeout: 10000 },
+        );
+        const completedTx = await driver.findElement('.list-item__title');
+        const completedTxText = await completedTx.getText();
+        assert.equal(completedTxText, 'Contract Deployment');
+
+        // calls and confirms a contract method where ETH is sent
+        await driver.switchToWindow(dapp);
+        await driver.clickElement('#depositButton');
+        await driver.waitUntilXWindowHandles(3);
+        windowHandles = await driver.getAllWindowHandles();
+        await driver.switchToWindowWithTitle(
+          'MetaMask Notification',
+          windowHandles,
+        );
+        await driver.clickElement({ text: 'Confirm', tag: 'button' });
+        await driver.switchToWindow(extension);
+        await driver.waitForSelector(
+          '.transaction-list__completed-transactions .transaction-list-item:nth-of-type(2)',
+          { timeout: 10000 },
+        );
+        await driver.waitForSelector(
+          {
+            css: '.transaction-list-item__primary-currency',
+            text: '-4 ETH',
+          },
+          { timeout: 10000 },
+        );
+
+        // calls and confirms a contract method where ETH is received
+        await driver.switchToWindow(dapp);
+        await driver.clickElement('#withdrawButton');
+        await driver.waitUntilXWindowHandles(3);
+        windowHandles = await driver.getAllWindowHandles();
+        await driver.switchToWindowWithTitle(
+          'MetaMask Notification',
+          windowHandles,
+        );
+        await driver.clickElement({ text: 'Confirm', tag: 'button' });
+        await driver.switchToWindow(extension);
+        await driver.waitForSelector(
+          '.transaction-list__completed-transactions .transaction-list-item:nth-of-type(3)',
+          { timeout: 10000 },
+        );
+        await driver.waitForSelector(
+          {
+            css: '.transaction-list-item__primary-currency',
+            text: '-0 ETH',
+          },
+          { timeout: 10000 },
+        );
+
+        // renders the correct ETH balance
+        await driver.switchToWindow(extension);
+        const balance = await driver.waitForSelector(
+          {
+            css: '[data-testid="eth-overview__primary-currency"]',
+            text: '21.',
+          },
+          { timeout: 10000 },
+        );
+        const tokenAmount = await balance.getText();
+        assert.ok(/^21.*\s*ETH.*$/u.test(tokenAmount));
+      },
+    );
+  });
+});
diff --git a/test/e2e/tests/send-eth.spec.js b/test/e2e/tests/send-eth.spec.js
index 2c1c1c97e..bd66612ba 100644
--- a/test/e2e/tests/send-eth.spec.js
+++ b/test/e2e/tests/send-eth.spec.js
@@ -217,3 +217,120 @@ describe('Send ETH from inside MetaMask using advanced gas modal', function () {
     );
   });
 });
+
+describe('Send ETH from dapp using advanced gas controls', function () {
+  let windowHandles;
+  let extension;
+  let popup;
+  let dapp;
+  const ganacheOptions = {
+    accounts: [
+      {
+        secretKey:
+          '0x7C9529A67102755B7E6102D6D950AC5D5863C98713805CEC576B945B15B71EAC',
+        balance: 25000000000000000000,
+      },
+    ],
+  };
+  it('should display the correct gas price on the transaction', async function () {
+    await withFixtures(
+      {
+        dapp: true,
+        fixtures: 'imported-account',
+        ganacheOptions,
+        title: this.test.title,
+      },
+      async ({ driver }) => {
+        await driver.navigate();
+        await driver.fill('#password', 'correct horse battery staple');
+        await driver.press('#password', driver.Key.ENTER);
+
+        // 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 > div > 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 > div > div',
+        );
+        windowHandles = await driver.getAllWindowHandles();
+        extension = windowHandles[0];
+        await driver.closeAllWindowHandlesExcept([extension]);
+        await driver.clickElement('.app-header__logo-container');
+
+        // connects the dapp
+        await driver.openNewPage('http://127.0.0.1:8080/');
+        await driver.clickElement({ text: 'Connect', tag: 'button' });
+        await driver.waitUntilXWindowHandles(3);
+        windowHandles = await driver.getAllWindowHandles();
+        extension = windowHandles[0];
+        dapp = await driver.switchToWindowWithTitle(
+          'E2E Test Dapp',
+          windowHandles,
+        );
+        popup = windowHandles.find(
+          (handle) => handle !== extension && handle !== dapp,
+        );
+        await driver.switchToWindow(popup);
+        await driver.clickElement({ text: 'Next', tag: 'button' });
+        await driver.clickElement({ text: 'Connect', tag: 'button' });
+        await driver.waitUntilXWindowHandles(2);
+        await driver.switchToWindow(dapp);
+
+        // initiates a send from the dapp
+        await driver.clickElement({ text: 'Send', tag: 'button' }, 10000);
+        await driver.delay(2000);
+        windowHandles = await driver.getAllWindowHandles();
+        await driver.switchToWindowWithTitle(
+          'MetaMask Notification',
+          windowHandles,
+        );
+        await driver.assertElementNotPresent({ text: 'Data', tag: 'li' });
+        const [gasPriceInput, gasLimitInput] = await driver.findElements(
+          '.advanced-gas-inputs__gas-edit-row__input',
+        );
+        await gasPriceInput.clear();
+        await driver.delay(50);
+        await gasPriceInput.fill('10');
+        await driver.delay(50);
+        await driver.delay(50);
+        await gasLimitInput.fill('');
+        await driver.delay(50);
+        await gasLimitInput.fill('25000');
+        await driver.delay(1000);
+        await driver.clickElement({ text: 'Confirm', tag: 'button' }, 10000);
+        await driver.waitUntilXWindowHandles(2);
+        await driver.switchToWindow(extension);
+
+        // finds the transaction in the transactions list
+        await driver.clickElement('[data-testid="home__activity-tab"]');
+        await driver.waitForSelector(
+          '.transaction-list__completed-transactions .transaction-list-item:nth-of-type(1)',
+          { timeout: 10000 },
+        );
+        await driver.waitForSelector({
+          css: '.transaction-list-item__primary-currency',
+          text: '-3 ETH',
+        });
+
+        // the transaction has the expected gas price
+        const txValue = await driver.findClickableElement(
+          '.transaction-list-item__primary-currency',
+        );
+        await txValue.click();
+        const gasPrice = await driver.waitForSelector({
+          css: '[data-testid="transaction-breakdown__gas-price"]',
+          text: '10',
+        });
+        assert.equal(await gasPrice.getText(), '10');
+      },
+    );
+  });
+});

From 9e86d417f9027cdb9250d2783a81b3ffa70fc31d Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Tue, 6 Jul 2021 10:44:34 -0700
Subject: [PATCH 089/141] Bumping contract-metadata -> 1.27.0 in package.json
 (#11458)

---
 package.json | 2 +-
 yarn.lock    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 5f245a942..8099f0356 100644
--- a/package.json
+++ b/package.json
@@ -100,7 +100,7 @@
     "@fortawesome/fontawesome-free": "^5.13.0",
     "@lavamoat/preinstall-always-fail": "^1.0.0",
     "@material-ui/core": "^4.11.0",
-    "@metamask/contract-metadata": "^1.26.0",
+    "@metamask/contract-metadata": "^1.27.0",
     "@metamask/controllers": "^10.0.0",
     "@metamask/eth-ledger-bridge-keyring": "^0.6.0",
     "@metamask/eth-token-tracker": "^3.0.1",
diff --git a/yarn.lock b/yarn.lock
index 1a573d5c7..df90ec976 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2646,7 +2646,7 @@
     semver "^7.3.5"
     yargs "^17.0.1"
 
-"@metamask/contract-metadata@^1.19.0", "@metamask/contract-metadata@^1.25.0", "@metamask/contract-metadata@^1.26.0":
+"@metamask/contract-metadata@^1.19.0", "@metamask/contract-metadata@^1.25.0", "@metamask/contract-metadata@^1.27.0":
   version "1.27.0"
   resolved "https://registry.yarnpkg.com/@metamask/contract-metadata/-/contract-metadata-1.27.0.tgz#1e65b821bad6f7d8313dd881116e4366b0662f75"
   integrity sha512-ZAvuROiHjSksy40buCL4M6m16bAmXQl6vjllK/XQxt9+UElhwJSp7PJ1ZULuZXmznBBY64WXlCPjm94JhW4l3g==

From a835f00ba6708838939e9ae8cb72b21cef2f6f24 Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Tue, 6 Jul 2021 10:44:46 -0700
Subject: [PATCH 090/141] Fixing leading zero when amount input is focused
 (#11459)

Fixes MetaMask/metamask-extension#11146
---
 .../ui/unit-input/unit-input.component.js          | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/ui/components/ui/unit-input/unit-input.component.js b/ui/components/ui/unit-input/unit-input.component.js
index 78458cab6..8ea172ea7 100644
--- a/ui/components/ui/unit-input/unit-input.component.js
+++ b/ui/components/ui/unit-input/unit-input.component.js
@@ -45,6 +45,18 @@ export default class UnitInput extends PureComponent {
     this.unitInput.focus();
   };
 
+  handleInputFocus = ({ target: { value } }) => {
+    if (value === '0') {
+      this.setState({ value: '' });
+    }
+  };
+
+  handleInputBlur = ({ target: { value } }) => {
+    if (value === '') {
+      this.setState({ value: '0' });
+    }
+  };
+
   handleChange = (event) => {
     const { value: userInput } = event.target;
     let value = userInput;
@@ -88,6 +100,8 @@ export default class UnitInput extends PureComponent {
               value={value}
               placeholder={placeholder}
               onChange={this.handleChange}
+              onBlur={this.handleInputBlur}
+              onFocus={this.handleInputFocus}
               style={{ width: this.getInputWidth(value) }}
               ref={(ref) => {
                 this.unitInput = ref;

From da9fb4636bbbeec4df36ae6dfa05050b1ffcb6e7 Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Tue, 6 Jul 2021 12:48:49 -0500
Subject: [PATCH 091/141] move conversion utils to shared folder (#11451)

---
 app/scripts/controllers/swaps.js                             | 2 +-
 .../conversion-util.js => shared/modules/conversion.utils.js | 0
 .../modules/conversion.utils.test.js                         | 2 +-
 .../signature-request-original.component.js                  | 2 +-
 ui/components/ui/token-input/token-input.component.js        | 2 +-
 ui/ducks/confirm-transaction/confirm-transaction.duck.js     | 2 +-
 ui/ducks/send/send.js                                        | 2 +-
 ui/ducks/swaps/swaps.js                                      | 2 +-
 ui/helpers/utils/confirm-tx.util.js                          | 2 +-
 ui/helpers/utils/conversions.util.js                         | 2 +-
 ui/helpers/utils/token-util.js                               | 5 ++++-
 ui/helpers/utils/transactions.util.js                        | 3 +--
 ui/hooks/useCancelTransaction.js                             | 2 +-
 ui/hooks/useCurrencyDisplay.js                               | 2 +-
 .../confirm-decrypt-message.component.js                     | 2 +-
 .../confirm-encryption-public-key.component.js               | 2 +-
 .../confirm-transaction-base.container.js                    | 2 +-
 ui/pages/send/send.constants.js                              | 2 +-
 ui/pages/send/send.utils.js                                  | 2 +-
 ui/pages/send/send.utils.test.js                             | 4 ++--
 ui/pages/swaps/swaps.util.js                                 | 2 +-
 ui/selectors/custom-gas.js                                   | 2 +-
 22 files changed, 25 insertions(+), 23 deletions(-)
 rename ui/helpers/utils/conversion-util.js => shared/modules/conversion.utils.js (100%)
 rename ui/helpers/utils/conversion-util.test.js => shared/modules/conversion.utils.test.js (98%)

diff --git a/app/scripts/controllers/swaps.js b/app/scripts/controllers/swaps.js
index 9af3be87c..9b2c21204 100644
--- a/app/scripts/controllers/swaps.js
+++ b/app/scripts/controllers/swaps.js
@@ -6,7 +6,7 @@ import { mapValues, cloneDeep } from 'lodash';
 import abi from 'human-standard-token-abi';
 import { calcTokenAmount } from '../../../ui/helpers/utils/token-util';
 import { calcGasTotal } from '../../../ui/pages/send/send.utils';
-import { conversionUtil } from '../../../ui/helpers/utils/conversion-util';
+import { conversionUtil } from '../../../shared/modules/conversion.utils';
 import {
   DEFAULT_ERC20_APPROVE_GAS,
   QUOTES_EXPIRED_ERROR,
diff --git a/ui/helpers/utils/conversion-util.js b/shared/modules/conversion.utils.js
similarity index 100%
rename from ui/helpers/utils/conversion-util.js
rename to shared/modules/conversion.utils.js
diff --git a/ui/helpers/utils/conversion-util.test.js b/shared/modules/conversion.utils.test.js
similarity index 98%
rename from ui/helpers/utils/conversion-util.test.js
rename to shared/modules/conversion.utils.test.js
index f97640691..d483a9a78 100644
--- a/ui/helpers/utils/conversion-util.test.js
+++ b/shared/modules/conversion.utils.test.js
@@ -1,5 +1,5 @@
 import BigNumber from 'bignumber.js';
-import { addCurrencies, conversionUtil } from './conversion-util';
+import { addCurrencies, conversionUtil } from './conversion.utils';
 
 describe('conversion utils', () => {
   describe('addCurrencies()', () => {
diff --git a/ui/components/app/signature-request-original/signature-request-original.component.js b/ui/components/app/signature-request-original/signature-request-original.component.js
index 091916cc5..c999cf282 100644
--- a/ui/components/app/signature-request-original/signature-request-original.component.js
+++ b/ui/components/app/signature-request-original/signature-request-original.component.js
@@ -11,7 +11,7 @@ import {
 import { getEnvironmentType } from '../../../../app/scripts/lib/util';
 import Identicon from '../../ui/identicon';
 import AccountListItem from '../account-list-item';
-import { conversionUtil } from '../../../helpers/utils/conversion-util';
+import { conversionUtil } from '../../../../shared/modules/conversion.utils';
 import Button from '../../ui/button';
 import SiteIcon from '../../ui/site-icon';
 
diff --git a/ui/components/ui/token-input/token-input.component.js b/ui/components/ui/token-input/token-input.component.js
index af11d86b5..5a879cb22 100644
--- a/ui/components/ui/token-input/token-input.component.js
+++ b/ui/components/ui/token-input/token-input.component.js
@@ -6,7 +6,7 @@ import { getWeiHexFromDecimalValue } from '../../../helpers/utils/conversions.ut
 import {
   conversionUtil,
   multiplyCurrencies,
-} from '../../../helpers/utils/conversion-util';
+} from '../../../../shared/modules/conversion.utils';
 import { ETH } from '../../../helpers/constants/common';
 import { addHexPrefix } from '../../../../app/scripts/lib/util';
 
diff --git a/ui/ducks/confirm-transaction/confirm-transaction.duck.js b/ui/ducks/confirm-transaction/confirm-transaction.duck.js
index b73911e0b..d19d1111b 100644
--- a/ui/ducks/confirm-transaction/confirm-transaction.duck.js
+++ b/ui/ducks/confirm-transaction/confirm-transaction.duck.js
@@ -15,7 +15,7 @@ import {
 
 import { getTokenData, sumHexes } from '../../helpers/utils/transactions.util';
 
-import { conversionUtil } from '../../helpers/utils/conversion-util';
+import { conversionUtil } from '../../../shared/modules/conversion.utils';
 import { getAveragePriceEstimateInHexWEI } from '../../selectors/custom-gas';
 
 // Actions
diff --git a/ui/ducks/send/send.js b/ui/ducks/send/send.js
index 037f56cdf..70bb7e7b1 100644
--- a/ui/ducks/send/send.js
+++ b/ui/ducks/send/send.js
@@ -9,7 +9,7 @@ import {
   conversionUtil,
   multiplyCurrencies,
   subtractCurrencies,
-} from '../../helpers/utils/conversion-util';
+} from '../../../shared/modules/conversion.utils';
 import { GAS_LIMITS } from '../../../shared/constants/gas';
 import {
   CONTRACT_ADDRESS_ERROR,
diff --git a/ui/ducks/swaps/swaps.js b/ui/ducks/swaps/swaps.js
index 34f7a84fe..3fbd63676 100644
--- a/ui/ducks/swaps/swaps.js
+++ b/ui/ducks/swaps/swaps.js
@@ -45,7 +45,7 @@ import {
   decGWEIToHexWEI,
   hexWEIToDecGWEI,
 } from '../../helpers/utils/conversions.util';
-import { conversionLessThan } from '../../helpers/utils/conversion-util';
+import { conversionLessThan } from '../../../shared/modules/conversion.utils';
 import { calcTokenAmount } from '../../helpers/utils/token-util';
 import {
   getSelectedAccount,
diff --git a/ui/helpers/utils/confirm-tx.util.js b/ui/helpers/utils/confirm-tx.util.js
index 5ae5d13c3..42f417c1e 100644
--- a/ui/helpers/utils/confirm-tx.util.js
+++ b/ui/helpers/utils/confirm-tx.util.js
@@ -9,7 +9,7 @@ import {
   addCurrencies,
   multiplyCurrencies,
   conversionGreaterThan,
-} from './conversion-util';
+} from '../../../shared/modules/conversion.utils';
 
 export function increaseLastGasPrice(lastGasPrice) {
   return addHexPrefix(
diff --git a/ui/helpers/utils/conversions.util.js b/ui/helpers/utils/conversions.util.js
index b7c901d97..7f191f9fe 100644
--- a/ui/helpers/utils/conversions.util.js
+++ b/ui/helpers/utils/conversions.util.js
@@ -4,7 +4,7 @@ import {
   conversionUtil,
   addCurrencies,
   subtractCurrencies,
-} from './conversion-util';
+} from '../../../shared/modules/conversion.utils';
 import { formatCurrency } from './confirm-tx.util';
 
 export function bnToHex(inputBn) {
diff --git a/ui/helpers/utils/token-util.js b/ui/helpers/utils/token-util.js
index 4b6d5dd08..b8ee4bbd0 100644
--- a/ui/helpers/utils/token-util.js
+++ b/ui/helpers/utils/token-util.js
@@ -1,8 +1,11 @@
 import log from 'loglevel';
 import BigNumber from 'bignumber.js';
 import contractMap from '@metamask/contract-metadata';
+import {
+  conversionUtil,
+  multiplyCurrencies,
+} from '../../../shared/modules/conversion.utils';
 import * as util from './util';
-import { conversionUtil, multiplyCurrencies } from './conversion-util';
 import { formatCurrency } from './confirm-tx.util';
 
 const casedContractMap = Object.keys(contractMap).reduce((acc, base) => {
diff --git a/ui/helpers/utils/transactions.util.js b/ui/helpers/utils/transactions.util.js
index 21a33112a..307e3dffc 100644
--- a/ui/helpers/utils/transactions.util.js
+++ b/ui/helpers/utils/transactions.util.js
@@ -9,10 +9,9 @@ import {
   TRANSACTION_GROUP_STATUSES,
   TRANSACTION_STATUSES,
 } from '../../../shared/constants/transaction';
+import { addCurrencies } from '../../../shared/modules/conversion.utils';
 import fetchWithCache from './fetch-with-cache';
 
-import { addCurrencies } from './conversion-util';
-
 const hstInterface = new ethers.utils.Interface(abi);
 
 /**
diff --git a/ui/hooks/useCancelTransaction.js b/ui/hooks/useCancelTransaction.js
index 62cf65d72..da1e08b0b 100644
--- a/ui/hooks/useCancelTransaction.js
+++ b/ui/hooks/useCancelTransaction.js
@@ -14,7 +14,7 @@ import {
   setCustomGasLimit,
   setCustomGasPriceForRetry,
 } from '../ducks/gas/gas.duck';
-import { multiplyCurrencies } from '../helpers/utils/conversion-util';
+import { multiplyCurrencies } from '../../shared/modules/conversion.utils';
 import { GAS_LIMITS } from '../../shared/constants/gas';
 
 /**
diff --git a/ui/hooks/useCurrencyDisplay.js b/ui/hooks/useCurrencyDisplay.js
index a1b67213e..465cadf9e 100644
--- a/ui/hooks/useCurrencyDisplay.js
+++ b/ui/hooks/useCurrencyDisplay.js
@@ -10,7 +10,7 @@ import {
   getNativeCurrency,
 } from '../ducks/metamask/metamask';
 
-import { conversionUtil } from '../helpers/utils/conversion-util';
+import { conversionUtil } from '../../shared/modules/conversion.utils';
 
 /**
  * Defines the shape of the options parameter for useCurrencyDisplay
diff --git a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js
index 378c2cfd2..7f4d5e0ff 100644
--- a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js
+++ b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js
@@ -12,7 +12,7 @@ import Copy from '../../components/ui/icon/copy-icon.component';
 import { ENVIRONMENT_TYPE_NOTIFICATION } from '../../../shared/constants/app';
 import { SECOND } from '../../../shared/constants/time';
 import { getEnvironmentType } from '../../../app/scripts/lib/util';
-import { conversionUtil } from '../../helpers/utils/conversion-util';
+import { conversionUtil } from '../../../shared/modules/conversion.utils';
 
 export default class ConfirmDecryptMessage extends Component {
   static contextTypes = {
diff --git a/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js b/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js
index 358c71f3c..8e4a9df9b 100644
--- a/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js
+++ b/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js
@@ -7,7 +7,7 @@ import Identicon from '../../components/ui/identicon';
 
 import { ENVIRONMENT_TYPE_NOTIFICATION } from '../../../shared/constants/app';
 import { getEnvironmentType } from '../../../app/scripts/lib/util';
-import { conversionUtil } from '../../helpers/utils/conversion-util';
+import { conversionUtil } from '../../../shared/modules/conversion.utils';
 
 export default class ConfirmEncryptionPublicKey extends Component {
   static contextTypes = {
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 126937570..9cc4e7741 100644
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js
+++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js
@@ -21,7 +21,7 @@ import {
 } from '../../helpers/constants/error-keys';
 import { getHexGasTotal } from '../../helpers/utils/confirm-tx.util';
 import { isBalanceSufficient, calcGasTotal } from '../send/send.utils';
-import { conversionGreaterThan } from '../../helpers/utils/conversion-util';
+import { conversionGreaterThan } from '../../../shared/modules/conversion.utils';
 import { MIN_GAS_LIMIT_DEC } from '../send/send.constants';
 import { shortenAddress, valuesFor } from '../../helpers/utils/util';
 import {
diff --git a/ui/pages/send/send.constants.js b/ui/pages/send/send.constants.js
index 48e96ef95..699775c96 100644
--- a/ui/pages/send/send.constants.js
+++ b/ui/pages/send/send.constants.js
@@ -1,7 +1,7 @@
 import {
   conversionUtil,
   multiplyCurrencies,
-} from '../../helpers/utils/conversion-util';
+} from '../../../shared/modules/conversion.utils';
 import { addHexPrefix } from '../../../app/scripts/lib/util';
 
 const MIN_GAS_PRICE_DEC = '0';
diff --git a/ui/pages/send/send.utils.js b/ui/pages/send/send.utils.js
index d4d4e7670..a23769706 100644
--- a/ui/pages/send/send.utils.js
+++ b/ui/pages/send/send.utils.js
@@ -6,7 +6,7 @@ import {
   multiplyCurrencies,
   conversionGreaterThan,
   conversionLessThan,
-} from '../../helpers/utils/conversion-util';
+} from '../../../shared/modules/conversion.utils';
 
 import { calcTokenAmount } from '../../helpers/utils/token-util';
 import { addHexPrefix } from '../../../app/scripts/lib/util';
diff --git a/ui/pages/send/send.utils.test.js b/ui/pages/send/send.utils.test.js
index 7960b4aca..4ad7ad4db 100644
--- a/ui/pages/send/send.utils.test.js
+++ b/ui/pages/send/send.utils.test.js
@@ -5,7 +5,7 @@ import {
   addCurrencies,
   conversionGTE,
   conversionUtil,
-} from '../../helpers/utils/conversion-util';
+} from '../../../shared/modules/conversion.utils';
 
 import {
   calcGasTotal,
@@ -14,7 +14,7 @@ import {
   isTokenBalanceSufficient,
 } from './send.utils';
 
-jest.mock('../../helpers/utils/conversion-util', () => ({
+jest.mock('../../../shared/modules/conversion.utils', () => ({
   addCurrencies: jest.fn((a, b) => {
     let [a1, b1] = [a, b];
     if (String(a).match(/^0x.+/u)) {
diff --git a/ui/pages/swaps/swaps.util.js b/ui/pages/swaps/swaps.util.js
index 58ef33f63..11907c8c1 100644
--- a/ui/pages/swaps/swaps.util.js
+++ b/ui/pages/swaps/swaps.util.js
@@ -30,7 +30,7 @@ import {
   getValueFromWeiHex,
 } from '../../helpers/utils/conversions.util';
 
-import { subtractCurrencies } from '../../helpers/utils/conversion-util';
+import { subtractCurrencies } from '../../../shared/modules/conversion.utils';
 import { formatCurrency } from '../../helpers/utils/confirm-tx.util';
 import fetchWithCache from '../../helpers/utils/fetch-with-cache';
 
diff --git a/ui/selectors/custom-gas.js b/ui/selectors/custom-gas.js
index c36742204..5b0647ffe 100644
--- a/ui/selectors/custom-gas.js
+++ b/ui/selectors/custom-gas.js
@@ -2,7 +2,7 @@ import { addHexPrefix } from '../../app/scripts/lib/util';
 import {
   conversionUtil,
   conversionGreaterThan,
-} from '../helpers/utils/conversion-util';
+} from '../../shared/modules/conversion.utils';
 import { formatCurrency } from '../helpers/utils/confirm-tx.util';
 import { decEthToConvertedCurrency as ethTotalToConvertedCurrency } from '../helpers/utils/conversions.util';
 import { formatETHFee } from '../helpers/utils/formatters';

From cbe1d09396e51e630a4f80d376a2dbb2893b5c6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=91=A8=E5=AE=87=E7=9B=9B=20Yusheng=20Zhou?=
 <jasonzhouu@outlook.com>
Date: Wed, 7 Jul 2021 01:53:35 +0800
Subject: [PATCH 092/141] =?UTF-8?q?=E2=9C=8F=EF=B8=8F=20fix=20typo=20of=20?=
 =?UTF-8?q?middleware=20imported=20from=20eth-json-rpc-middleware=20(#1145?=
 =?UTF-8?q?5)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/scripts/controllers/network/createInfuraClient.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/scripts/controllers/network/createInfuraClient.js b/app/scripts/controllers/network/createInfuraClient.js
index eb298f37d..772a9ebde 100644
--- a/app/scripts/controllers/network/createInfuraClient.js
+++ b/app/scripts/controllers/network/createInfuraClient.js
@@ -1,8 +1,8 @@
 import { createScaffoldMiddleware, mergeMiddleware } from 'json-rpc-engine';
-import createBlockReRefMiddleware from 'eth-json-rpc-middleware/block-ref';
+import createBlockRefMiddleware from 'eth-json-rpc-middleware/block-ref';
 import createRetryOnEmptyMiddleware from 'eth-json-rpc-middleware/retryOnEmpty';
 import createBlockCacheMiddleware from 'eth-json-rpc-middleware/block-cache';
-import createInflightMiddleware from 'eth-json-rpc-middleware/inflight-cache';
+import createInflightCacheMiddleware from 'eth-json-rpc-middleware/inflight-cache';
 import createBlockTrackerInspectorMiddleware from 'eth-json-rpc-middleware/block-tracker-inspector';
 import providerFromMiddleware from 'eth-json-rpc-middleware/providerFromMiddleware';
 import createInfuraMiddleware from 'eth-json-rpc-infura';
@@ -23,8 +23,8 @@ export default function createInfuraClient({ network, projectId }) {
   const networkMiddleware = mergeMiddleware([
     createNetworkAndChainIdMiddleware({ network }),
     createBlockCacheMiddleware({ blockTracker }),
-    createInflightMiddleware(),
-    createBlockReRefMiddleware({ blockTracker, provider: infuraProvider }),
+    createInflightCacheMiddleware(),
+    createBlockRefMiddleware({ blockTracker, provider: infuraProvider }),
     createRetryOnEmptyMiddleware({ blockTracker, provider: infuraProvider }),
     createBlockTrackerInspectorMiddleware({ blockTracker }),
     infuraMiddleware,

From 68ad9c619f3e11400e61952e180ccce3a4aa45dc Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Tue, 6 Jul 2021 11:17:13 -0700
Subject: [PATCH 093/141] Adding copy icon to home screen account address
 (#11460)

* Adding copy icon to home screen account address

Fixes MetaMask/metamask-extension#10145

* Using margin-inline-start
---
 ui/components/app/selected-account/index.scss             | 8 ++++++++
 .../app/selected-account/selected-account.component.js    | 4 ++++
 2 files changed, 12 insertions(+)

diff --git a/ui/components/app/selected-account/index.scss b/ui/components/app/selected-account/index.scss
index 05757b73e..acb95b0df 100644
--- a/ui/components/app/selected-account/index.scss
+++ b/ui/components/app/selected-account/index.scss
@@ -26,6 +26,8 @@
     @include H7;
 
     color: #989a9b;
+    display: flex;
+    align-items: center;
   }
 
   &__clickable {
@@ -48,4 +50,10 @@
       background-color: #d9d7da;
     }
   }
+
+  &__copy {
+    height: 13px;
+    display: inline-block;
+    margin-inline-start: 3px;
+  }
 }
diff --git a/ui/components/app/selected-account/selected-account.component.js b/ui/components/app/selected-account/selected-account.component.js
index 2c4df0ce0..3e505d560 100644
--- a/ui/components/app/selected-account/selected-account.component.js
+++ b/ui/components/app/selected-account/selected-account.component.js
@@ -4,6 +4,7 @@ import copyToClipboard from 'copy-to-clipboard';
 import { shortenAddress } from '../../../helpers/utils/util';
 
 import Tooltip from '../../ui/tooltip';
+import CopyIcon from '../../ui/icon/copy-icon.component';
 import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
 import { SECOND } from '../../../../shared/constants/time';
 
@@ -61,6 +62,9 @@ class SelectedAccount extends Component {
             </div>
             <div className="selected-account__address">
               {shortenAddress(checksummedAddress)}
+              <div className="selected-account__copy">
+                <CopyIcon size={11} color="#989a9b" />
+              </div>
             </div>
           </button>
         </Tooltip>

From b1e2005a735a35395a7fc274b810dc48ad742c03 Mon Sep 17 00:00:00 2001
From: Alex Donesky <adonesky@gmail.com>
Date: Tue, 6 Jul 2021 17:19:11 -0500
Subject: [PATCH 094/141] Add form-field component and new account view
 (#11450)

* add generic form-field component

* swap in new form-field component for advanced-gas-controls-row

* add new create password view for redesigned onboarding flow

* make text additions translatable
---
 app/_locales/en/messages.json                 |  12 ++
 .../advanced-gas-controls-row.component.js    |  97 ---------
 .../advanced-gas-controls.component.js        |  20 +-
 ui/components/ui/form-field/form-field.js     | 134 +++++++++++++
 .../ui/form-field/form-field.stories.js       |  55 ++++++
 ui/components/ui/form-field/index.js          |   1 +
 ui/components/ui/form-field/index.scss        |  48 +++++
 ui/components/ui/ui-components.scss           |   1 +
 .../onboarding-flow/new-account/index.scss    |  34 ++++
 .../new-account/new-account.js                | 184 ++++++++++++++++++
 10 files changed, 480 insertions(+), 106 deletions(-)
 delete mode 100644 ui/components/app/advanced-gas-controls/advanced-gas-controls-row.component.js
 create mode 100644 ui/components/ui/form-field/form-field.js
 create mode 100644 ui/components/ui/form-field/form-field.stories.js
 create mode 100644 ui/components/ui/form-field/index.js
 create mode 100644 ui/components/ui/form-field/index.scss
 create mode 100644 ui/pages/onboarding-flow/new-account/index.scss
 create mode 100644 ui/pages/onboarding-flow/new-account/new-account.js

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 26e4472c2..554cbc1a6 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -471,6 +471,9 @@
   "createAccount": {
     "message": "Create Account"
   },
+  "createNewWallet": {
+    "message": "Create a new wallet"
+  },
   "createPassword": {
     "message": "Create Password"
   },
@@ -1464,6 +1467,12 @@
   "passwordNotLongEnough": {
     "message": "Password not long enough"
   },
+  "passwordSetupDetails": {
+    "message": "This password will unlock your MetaMask wallet only on this device. MetaMask can not recover this password."
+  },
+  "passwordTermsWarning": {
+    "message": "I understand that MetaMask cannot recover this password for me. $1"
+  },
   "passwordsDontMatch": {
     "message": "Passwords Don't Match"
   },
@@ -1797,6 +1806,9 @@
   "settings": {
     "message": "Settings"
   },
+  "show": {
+    "message": "Show"
+  },
   "showAdvancedGasInline": {
     "message": "Advanced gas controls"
   },
diff --git a/ui/components/app/advanced-gas-controls/advanced-gas-controls-row.component.js b/ui/components/app/advanced-gas-controls/advanced-gas-controls-row.component.js
deleted file mode 100644
index cb0bd2c0d..000000000
--- a/ui/components/app/advanced-gas-controls/advanced-gas-controls-row.component.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import Typography from '../../ui/typography/typography';
-import {
-  COLORS,
-  TEXT_ALIGN,
-  DISPLAY,
-  TYPOGRAPHY,
-  FONT_WEIGHT,
-} from '../../../helpers/constants/design-system';
-
-import NumericInput from '../../ui/numeric-input/numeric-input.component';
-import InfoTooltip from '../../ui/info-tooltip/info-tooltip';
-
-export default function AdvancedGasControlsRow({
-  titleText,
-  titleUnit,
-  tooltipText,
-  titleDetailText,
-  error,
-  onChange,
-  value,
-}) {
-  return (
-    <div
-      className={classNames('advanced-gas-controls__row', {
-        'advanced-gas-controls__row--error': error,
-      })}
-    >
-      <label>
-        <div className="advanced-gas-controls__row-heading">
-          <div className="advanced-gas-controls__row-heading-title">
-            <Typography
-              tag={TYPOGRAPHY.H6}
-              fontWeight={FONT_WEIGHT.BOLD}
-              variant={TYPOGRAPHY.H6}
-              boxProps={{ display: DISPLAY.INLINE_BLOCK }}
-            >
-              {titleText}
-            </Typography>
-            <Typography
-              tag={TYPOGRAPHY.H6}
-              variant={TYPOGRAPHY.H6}
-              color={COLORS.UI4}
-              boxProps={{ display: DISPLAY.INLINE_BLOCK }}
-            >
-              {titleUnit}
-            </Typography>
-            <InfoTooltip position="top" contentText={tooltipText} />
-          </div>
-          {titleDetailText && (
-            <Typography
-              className="advanced-gas-controls__row-heading-detail"
-              align={TEXT_ALIGN.END}
-              color={COLORS.UI4}
-              variant={TYPOGRAPHY.H8}
-            >
-              {titleDetailText}
-            </Typography>
-          )}
-        </div>
-        <NumericInput error={error} onChange={onChange} value={value} />
-        {error && (
-          <Typography
-            color={COLORS.ERROR1}
-            variant={TYPOGRAPHY.H7}
-            className="advanced-gas-controls__row-error"
-          >
-            {error}
-          </Typography>
-        )}
-      </label>
-    </div>
-  );
-}
-
-AdvancedGasControlsRow.propTypes = {
-  titleText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  titleUnit: PropTypes.string,
-  tooltipText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  titleDetailText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  error: PropTypes.string,
-  onChange: PropTypes.func,
-  value: PropTypes.number,
-};
-
-AdvancedGasControlsRow.defaultProps = {
-  titleText: '',
-  titleUnit: '',
-  tooltipText: '',
-  titleDetailText: '',
-  error: '',
-  onChange: undefined,
-  value: 0,
-};
diff --git a/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js b/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js
index efd5da258..78403469f 100644
--- a/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js
+++ b/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js
@@ -7,7 +7,7 @@ import {
   TYPOGRAPHY,
   COLORS,
 } from '../../../helpers/constants/design-system';
-import AdvancedGasControlsRow from './advanced-gas-controls-row.component';
+import FormField from '../../ui/form-field';
 
 export default function AdvancedGasControls() {
   const t = useContext(I18nContext);
@@ -21,22 +21,23 @@ export default function AdvancedGasControls() {
 
   return (
     <div className="advanced-gas-controls">
-      <AdvancedGasControlsRow
+      <FormField
         titleText={t('gasLimit')}
         onChange={setGasLimit}
         tooltipText=""
-        titleDetailText=""
         value={gasLimit}
+        numeric
       />
       {process.env.SHOW_EIP_1559_UI ? (
         <>
-          <AdvancedGasControlsRow
+          <FormField
             titleText={t('maxPriorityFee')}
             titleUnit="(GWEI)"
             tooltipText=""
             onChange={setMaxPriorityFee}
             value={maxPriorityFee}
-            titleDetailText={
+            numeric
+            titleDetail={
               <>
                 <Typography
                   tag="span"
@@ -54,13 +55,14 @@ export default function AdvancedGasControls() {
               </>
             }
           />
-          <AdvancedGasControlsRow
+          <FormField
             titleText={t('maxFee')}
             titleUnit="(GWEI)"
             tooltipText=""
             onChange={setMaxFee}
             value={maxFee}
-            titleDetailText={
+            numeric
+            titleDetail={
               <>
                 <Typography
                   tag="span"
@@ -81,13 +83,13 @@ export default function AdvancedGasControls() {
         </>
       ) : (
         <>
-          <AdvancedGasControlsRow
+          <FormField
             titleText={t('gasPrice')}
             titleUnit="(GWEI)"
             onChange={setGasPrice}
             tooltipText={t('editGasPriceTooltip')}
-            titleDetailText=""
             value={gasPrice}
+            numeric
           />
         </>
       )}
diff --git a/ui/components/ui/form-field/form-field.js b/ui/components/ui/form-field/form-field.js
new file mode 100644
index 000000000..5a4f97ab2
--- /dev/null
+++ b/ui/components/ui/form-field/form-field.js
@@ -0,0 +1,134 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import Typography from '../typography/typography';
+import Box from '../box/box';
+import {
+  COLORS,
+  TEXT_ALIGN,
+  DISPLAY,
+  TYPOGRAPHY,
+  FONT_WEIGHT,
+} from '../../../helpers/constants/design-system';
+
+import NumericInput from '../numeric-input/numeric-input.component';
+import InfoTooltip from '../info-tooltip/info-tooltip';
+
+export default function FormField({
+  titleText,
+  titleUnit,
+  tooltipText,
+  titleDetail,
+  error,
+  onChange,
+  value,
+  numeric,
+  detailText,
+  autoFocus,
+  password,
+}) {
+  return (
+    <div
+      className={classNames('form-field', {
+        'form-field__row--error': error,
+      })}
+    >
+      <label>
+        <div className="form-field__heading">
+          <div className="form-field__heading-title">
+            {titleText && (
+              <Typography
+                tag={TYPOGRAPHY.H6}
+                fontWeight={FONT_WEIGHT.BOLD}
+                variant={TYPOGRAPHY.H6}
+                boxProps={{ display: DISPLAY.INLINE_BLOCK }}
+              >
+                {titleText}
+              </Typography>
+            )}
+            {titleUnit && (
+              <Typography
+                tag={TYPOGRAPHY.H6}
+                variant={TYPOGRAPHY.H6}
+                color={COLORS.UI4}
+                boxProps={{ display: DISPLAY.INLINE_BLOCK }}
+              >
+                {titleUnit}
+              </Typography>
+            )}
+            {tooltipText && (
+              <InfoTooltip position="top" contentText={tooltipText} />
+            )}
+          </div>
+          {titleDetail && (
+            <Box
+              className="form-field__heading-detail"
+              textAlign={TEXT_ALIGN.END}
+              marginBottom={3}
+              marginRight={2}
+            >
+              {titleDetail}
+            </Box>
+          )}
+        </div>
+        {numeric ? (
+          <NumericInput
+            error={error}
+            onChange={onChange}
+            value={value}
+            detailText={detailText}
+            autoFocus={autoFocus}
+          />
+        ) : (
+          <input
+            className={classNames('form-field__input', {
+              'form-field__input--error': error,
+            })}
+            onChange={(e) => onChange(e.target.value)}
+            value={value}
+            type={password ? 'password' : 'text'}
+            autoFocus={autoFocus}
+          />
+        )}
+        {error && (
+          <Typography
+            color={COLORS.ERROR1}
+            variant={TYPOGRAPHY.H7}
+            className="form-field__error"
+          >
+            {error}
+          </Typography>
+        )}
+      </label>
+    </div>
+  );
+}
+
+FormField.propTypes = {
+  titleText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  titleUnit: PropTypes.string,
+  tooltipText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  titleDetail: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  error: PropTypes.string,
+  onChange: PropTypes.func,
+  value: PropTypes.number,
+  detailText: PropTypes.string,
+  autoFocus: PropTypes.bool,
+  numeric: PropTypes.bool,
+  password: PropTypes.bool,
+};
+
+FormField.defaultProps = {
+  titleText: '',
+  titleUnit: '',
+  tooltipText: '',
+  titleDetail: '',
+  error: '',
+  onChange: undefined,
+  value: 0,
+  detailText: '',
+  autoFocus: false,
+  numeric: false,
+  password: false,
+};
diff --git a/ui/components/ui/form-field/form-field.stories.js b/ui/components/ui/form-field/form-field.stories.js
new file mode 100644
index 000000000..b78c908fe
--- /dev/null
+++ b/ui/components/ui/form-field/form-field.stories.js
@@ -0,0 +1,55 @@
+/* eslint-disable react/prop-types */
+
+import React, { useState } from 'react';
+import { select } from '@storybook/addon-knobs';
+import FormField from '.';
+
+export default {
+  title: 'FormField',
+};
+
+export const Plain = ({ ...props }) => {
+  const options = { text: false, numeric: true };
+  const [value, setValue] = useState('');
+  return (
+    <div style={{ width: '600px' }}>
+      <FormField
+        onChange={setValue}
+        titleText="Title"
+        value={value}
+        numeric={select('text or numeric', options, options.text)}
+        {...props}
+      />
+    </div>
+  );
+};
+
+export const FormFieldWithTitleDetail = () => {
+  const [clicked, setClicked] = useState(false);
+  const detailOptions = {
+    text: <div style={{ fontSize: '12px' }}>Detail</div>,
+    button: (
+      <button
+        style={{ backgroundColor: clicked ? 'orange' : 'rgb(239, 239, 239)' }}
+        onClick={() => setClicked(!clicked)}
+      >
+        Click Me
+      </button>
+    ),
+    checkmark: <i className="fas fa-check" />,
+  };
+  return (
+    <Plain
+      titleText="Title"
+      titleDetail={
+        detailOptions[
+          select('detailType', ['text', 'button', 'checkmark'], 'text')
+        ]
+      }
+    />
+  );
+};
+
+export const FormFieldWithError = () => {
+  return <Plain titleText="Title" error="Incorrect Format" />;
+};
diff --git a/ui/components/ui/form-field/index.js b/ui/components/ui/form-field/index.js
new file mode 100644
index 000000000..0bcf42e6e
--- /dev/null
+++ b/ui/components/ui/form-field/index.js
@@ -0,0 +1 @@
+export { default } from './form-field';
diff --git a/ui/components/ui/form-field/index.scss b/ui/components/ui/form-field/index.scss
new file mode 100644
index 000000000..d7d4cb0b7
--- /dev/null
+++ b/ui/components/ui/form-field/index.scss
@@ -0,0 +1,48 @@
+.form-field {
+  margin-bottom: 20px;
+
+  &__heading {
+    display: flex;
+    margin-top: 4px;
+  }
+
+  .info-tooltip {
+    display: inline-block;
+  }
+
+  &__heading-detail {
+    flex-grow: 1;
+    align-self: center;
+  }
+
+  &__error,
+  &__error h6 {
+    color: $error-1 !important;
+    padding-top: 6px;
+  }
+
+  h6 {
+    padding-bottom: 6px;
+    margin-inline-end: 6px;
+  }
+
+  i {
+    color: #dadada;
+    font-size: $font-size-h7;
+  }
+
+  &__input {
+    width: 100%;
+    border: solid 1px $ui-3;
+    padding: 10px;
+    border-radius: 6px;
+
+    &:focus {
+      border: solid 2px $primary-1;
+    }
+
+    &--error {
+      border-color: $error-1;
+    }
+  }
+}
diff --git a/ui/components/ui/ui-components.scss b/ui/components/ui/ui-components.scss
index 0dd1ad72e..0f95c6af8 100644
--- a/ui/components/ui/ui-components.scss
+++ b/ui/components/ui/ui-components.scss
@@ -35,6 +35,7 @@
 @import 'loading-screen/index';
 @import 'menu/menu';
 @import 'numeric-input/numeric-input';
+@import 'form-field/index';
 @import 'page-container/index';
 @import 'popover/index';
 @import 'pulse-loader/index';
diff --git a/ui/pages/onboarding-flow/new-account/index.scss b/ui/pages/onboarding-flow/new-account/index.scss
new file mode 100644
index 000000000..4c8e69bf2
--- /dev/null
+++ b/ui/pages/onboarding-flow/new-account/index.scss
@@ -0,0 +1,34 @@
+.new-account {
+  &__wrapper {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &__link-text {
+    color: $primary-1;
+  }
+
+  &__form {
+    padding: 0 24px;
+
+    &--password-button {
+      background-color: transparent;
+    }
+
+    &--submit-button {
+      padding: 20px;
+    }
+
+    &--checkmark {
+      i {
+        color: $success-1;
+      }
+    }
+
+    .form-field__input {
+      height: 50px;
+    }
+  }
+}
diff --git a/ui/pages/onboarding-flow/new-account/new-account.js b/ui/pages/onboarding-flow/new-account/new-account.js
new file mode 100644
index 000000000..2eb351ff8
--- /dev/null
+++ b/ui/pages/onboarding-flow/new-account/new-account.js
@@ -0,0 +1,184 @@
+import React, { useState, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useHistory } from 'react-router-dom';
+import { useNewMetricEvent } from '../../../hooks/useMetricEvent';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import Button from '../../../components/ui/button';
+import Typography from '../../../components/ui/typography';
+import {
+  TEXT_ALIGN,
+  TYPOGRAPHY,
+  JUSTIFY_CONTENT,
+  FONT_WEIGHT,
+  ALIGN_ITEMS,
+} from '../../../helpers/constants/design-system';
+import { INITIALIZE_SEED_PHRASE_INTRO_ROUTE } from '../../../helpers/constants/routes';
+import FormField from '../../../components/ui/form-field';
+import Box from '../../../components/ui/box';
+import CheckBox from '../../../components/ui/check-box';
+
+export default function NewAccount({ onSubmit }) {
+  const t = useI18nContext();
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [password, setPassword] = useState('');
+  const [passwordError, setPasswordError] = useState('');
+  const [confirmPasswordError, setConfirmPasswordError] = useState('');
+  const [termsChecked, setTermsChecked] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const history = useHistory();
+
+  const submitPasswordEvent = useNewMetricEvent({
+    event: 'Submit Password',
+    category: 'Onboarding',
+  });
+
+  const isValid = useMemo(() => {
+    if (!password || !confirmPassword || password !== confirmPassword) {
+      return false;
+    }
+
+    if (password.length < 8) {
+      return false;
+    }
+
+    return !passwordError && !confirmPasswordError;
+  }, [password, confirmPassword, passwordError, confirmPasswordError]);
+
+  const handlePasswordChange = (passwordInput) => {
+    let error = '';
+    let confirmError = '';
+    if (passwordInput && passwordInput.length < 8) {
+      error = t('passwordNotLongEnough');
+    }
+
+    if (confirmPassword && passwordInput !== confirmPassword) {
+      confirmError = t('passwordsDontMatch');
+    }
+
+    setPassword(passwordInput);
+    setPasswordError(error);
+    setConfirmPasswordError(confirmError);
+  };
+
+  const handleConfirmPasswordChange = (confirmPasswordInput) => {
+    let error = '';
+    if (password !== confirmPasswordInput) {
+      error = t('passwordsDontMatch');
+    }
+
+    setConfirmPassword(confirmPasswordInput);
+    setConfirmPasswordError(error);
+  };
+
+  const handleCreate = async (event) => {
+    event.preventDefault();
+
+    if (!isValid) {
+      return;
+    }
+    try {
+      if (onSubmit) {
+        await onSubmit(password);
+      }
+      submitPasswordEvent();
+      history.push(INITIALIZE_SEED_PHRASE_INTRO_ROUTE);
+    } catch (error) {
+      setPasswordError(error.message);
+    }
+  };
+
+  return (
+    <div className="new-account__wrapper">
+      <Typography variant={TYPOGRAPHY.H2} fontWeight={FONT_WEIGHT.BOLD}>
+        {t('createPassword')}
+      </Typography>
+      <Typography
+        variant={TYPOGRAPHY.H4}
+        align={TEXT_ALIGN.CENTER}
+        boxProps={{ margin: 5 }}
+      >
+        {t('passwordSetupDetails')}
+      </Typography>
+      <Box
+        justifyContent={JUSTIFY_CONTENT.CENTER}
+        marginTop={3}
+        padding={[0, 12]}
+      >
+        <form className="new-account__form" onSubmit={handleCreate}>
+          <FormField
+            autoFocus
+            error={passwordError}
+            onChange={handlePasswordChange}
+            password={!showPassword}
+            titleText={t('newPassword')}
+            value={password}
+            titleDetail={
+              <button
+                className="new-account__form--password-button"
+                type="button"
+                onClick={(e) => {
+                  e.preventDefault();
+                  setShowPassword(!showPassword);
+                }}
+              >
+                {showPassword ? t('hide') : t('show')}
+              </button>
+            }
+          />
+          <FormField
+            onChange={handleConfirmPasswordChange}
+            password={!showPassword}
+            error={confirmPasswordError}
+            titleText={t('confirmPassword')}
+            value={confirmPassword}
+            titleDetail={
+              isValid && (
+                <div className="new-account__form--checkmark">
+                  <i className="fas fa-check" />
+                </div>
+              )
+            }
+          />
+          <Box
+            alignItems={ALIGN_ITEMS.CENTER}
+            justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
+            marginBottom={4}
+          >
+            <CheckBox
+              onClick={() => setTermsChecked(!termsChecked)}
+              checked={termsChecked}
+            />
+            <Typography variant={TYPOGRAPHY.H5} boxProps={{ marginLeft: 3 }}>
+              {t('passwordTermsWarning', [
+                <a
+                  onClick={(e) => e.stopPropagation()}
+                  key="new-account__link-text"
+                  href="https://metamask.io/terms.html"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <span className="new-account__link-text">
+                    {t('learnMore')}
+                  </span>
+                </a>,
+              ])}
+            </Typography>
+          </Box>
+          <Button
+            type="primary"
+            className="new-account__form--submit-button"
+            disabled={!isValid || !termsChecked}
+            onClick={handleCreate}
+            rounded
+          >
+            {t('createNewWallet')}
+          </Button>
+        </form>
+      </Box>
+    </div>
+  );
+}
+
+NewAccount.propTypes = {
+  onSubmit: PropTypes.func,
+};

From 9a6c22263298f02120e47fa6347cf872408e4659 Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Wed, 7 Jul 2021 11:13:40 -0500
Subject: [PATCH 095/141] Add gas utils shared module (#11452)

---
 shared/modules/gas.utils.js      | 129 ++++++++++++++++++++++++++++++
 shared/modules/gas.utils.test.js | 131 +++++++++++++++++++++++++++++++
 2 files changed, 260 insertions(+)
 create mode 100644 shared/modules/gas.utils.js
 create mode 100644 shared/modules/gas.utils.test.js

diff --git a/shared/modules/gas.utils.js b/shared/modules/gas.utils.js
new file mode 100644
index 000000000..ab8c44b36
--- /dev/null
+++ b/shared/modules/gas.utils.js
@@ -0,0 +1,129 @@
+import { addHexPrefix } from 'ethereumjs-util';
+import {
+  addCurrencies,
+  conversionGreaterThan,
+  multiplyCurrencies,
+} from './conversion.utils';
+
+/**
+ * Accepts an options bag containing gas fee parameters in hex format and
+ * returns a gasTotal parameter representing the maximum amount of wei the
+ * transaction will cost.
+ *
+ * @param {object} options - gas fee parameters object
+ * @param {string} [options.gasLimit] - the maximum amount of gas to allow this
+ *  transaction to consume. Value is a hex string
+ * @param {string} [options.gasPrice] - The fee in wei to pay per gas used.
+ *  gasPrice is only set on Legacy type transactions. Value is hex string
+ * @param {string} [options.maxFeePerGas] - The maximum fee in wei to pay per
+ *  gas used. maxFeePerGas is introduced in EIP 1559 and represents the max
+ *  total a user will pay per gas. Actual cost is determined by baseFeePerGas
+ *  on the block + maxPriorityFeePerGas. Value is hex string
+ * @returns {string} - The maximum total cost of transaction in hex wei string
+ */
+export function getMaximumGasTotalInHexWei({
+  gasLimit = '0x0',
+  gasPrice,
+  maxFeePerGas,
+} = {}) {
+  if (maxFeePerGas) {
+    return addHexPrefix(
+      multiplyCurrencies(gasLimit, maxFeePerGas, {
+        toNumericBase: 'hex',
+        multiplicandBase: 16,
+        multiplierBase: 16,
+      }),
+    );
+  }
+  if (!gasPrice) {
+    throw new Error(
+      'getMaximumGasTotalInHexWei requires gasPrice be provided to calculate legacy gas total',
+    );
+  }
+  return addHexPrefix(
+    multiplyCurrencies(gasLimit, gasPrice, {
+      toNumericBase: 'hex',
+      multiplicandBase: 16,
+      multiplierBase: 16,
+    }),
+  );
+}
+
+/**
+ * Accepts an options bag containing gas fee parameters in hex format and
+ * returns a gasTotal parameter representing the minimum amount of wei the
+ * transaction will cost. For gasPrice types this is the same as max.
+ *
+ * @param {object} options - gas fee parameters object
+ * @param {string} [options.gasLimit] - the maximum amount of gas to allow this
+ *  transaction to consume. Value is a hex string
+ * @param {string} [options.gasPrice] - The fee in wei to pay per gas used.
+ *  gasPrice is only set on Legacy type transactions. Value is hex string
+ * @param {string} [options.maxFeePerGas] - The maximum fee in wei to pay per
+ *  gas used. maxFeePerGas is introduced in EIP 1559 and represents the max
+ *  total a user will pay per gas. Actual cost is determined by baseFeePerGas
+ *  on the block + maxPriorityFeePerGas. Value is hex string
+ * @param {string} [options.maxPriorityFeePerGas] - The maximum fee in wei to
+ *  pay a miner to include this transaction.
+ * @param {string} [options.baseFeePerGas] - The estimated block baseFeePerGas
+ *  that will be burned. Introduced in EIP 1559. Value in hex wei.
+ * @returns {string} - The minimum total cost of transaction in hex wei string
+ */
+export function getMinimumGasTotalInHexWei({
+  gasLimit = '0x0',
+  gasPrice,
+  maxPriorityFeePerGas,
+  maxFeePerGas,
+  baseFeePerGas,
+} = {}) {
+  const isEIP1559Estimate = Boolean(
+    maxFeePerGas || maxPriorityFeePerGas || baseFeePerGas,
+  );
+  if (isEIP1559Estimate && gasPrice) {
+    throw new Error(
+      `getMinimumGasTotalInHexWei expects either gasPrice OR the EIP-1559 gas fields, but both were provided`,
+    );
+  }
+
+  if (isEIP1559Estimate === false && !gasPrice) {
+    throw new Error(
+      `getMinimumGasTotalInHexWei expects either gasPrice OR the EIP-1559 gas fields, but neither were provided`,
+    );
+  }
+
+  if (isEIP1559Estimate && !baseFeePerGas) {
+    throw new Error(
+      `getMinimumGasTotalInHexWei requires baseFeePerGas be provided when calculating EIP-1559 totals`,
+    );
+  }
+
+  if (isEIP1559Estimate && (!maxFeePerGas || !maxPriorityFeePerGas)) {
+    throw new Error(
+      `getMinimumGasTotalInHexWei requires maxFeePerGas and maxPriorityFeePerGas be provided when calculating EIP-1559 totals`,
+    );
+  }
+  if (isEIP1559Estimate === false) {
+    return getMaximumGasTotalInHexWei({ gasLimit, gasPrice });
+  }
+  const minimumFeePerGas = addCurrencies(baseFeePerGas, maxPriorityFeePerGas, {
+    toNumericBase: 'hex',
+    aBase: 16,
+    bBase: 16,
+  });
+
+  if (
+    conversionGreaterThan(
+      { value: minimumFeePerGas, fromNumericBase: 'hex' },
+      { value: maxFeePerGas, fromNumericBase: 'hex' },
+    )
+  ) {
+    return getMaximumGasTotalInHexWei({ gasLimit, maxFeePerGas });
+  }
+  return addHexPrefix(
+    multiplyCurrencies(gasLimit, minimumFeePerGas, {
+      toNumericBase: 'hex',
+      multiplicandBase: 16,
+      multiplierBase: 16,
+    }),
+  );
+}
diff --git a/shared/modules/gas.utils.test.js b/shared/modules/gas.utils.test.js
new file mode 100644
index 000000000..8c2b9a359
--- /dev/null
+++ b/shared/modules/gas.utils.test.js
@@ -0,0 +1,131 @@
+const { addHexPrefix } = require('ethereumjs-util');
+const { conversionUtil } = require('./conversion.utils');
+const {
+  getMaximumGasTotalInHexWei,
+  getMinimumGasTotalInHexWei,
+} = require('./gas.utils');
+
+const feesToTest = [10, 24, 90];
+const tipsToTest = [2, 10, 50];
+const baseFeesToTest = [8, 12, 24];
+const gasLimitsToTest = [21000, 100000];
+
+describe('gas utils', () => {
+  describe('when using EIP 1559 fields', () => {
+    describe('getMaximumGasTotalInHexWei', () => {
+      feesToTest.forEach((maxFeePerGas) => {
+        describe(`when maxFeePerGas is ${maxFeePerGas}`, () => {
+          gasLimitsToTest.forEach((gasLimit) => {
+            const expectedResult = (gasLimit * maxFeePerGas).toString();
+            const gasLimitHex = addHexPrefix(gasLimit.toString(16));
+            const result = conversionUtil(
+              getMaximumGasTotalInHexWei({
+                gasLimit: gasLimitHex,
+                maxFeePerGas: addHexPrefix(maxFeePerGas.toString(16)),
+              }),
+              { fromNumericBase: 'hex', toNumericBase: 'dec' },
+            );
+            it(`returns ${expectedResult} when provided gasLimit: ${gasLimit}`, () => {
+              expect(result).toStrictEqual(expectedResult);
+            });
+          });
+        });
+      });
+    });
+
+    describe('getMinimumGasTotalInHexWei', () => {
+      feesToTest.forEach((maxFeePerGas) => {
+        tipsToTest.forEach((maxPriorityFeePerGas) => {
+          baseFeesToTest.forEach((baseFeePerGas) => {
+            describe(`when baseFee is ${baseFeePerGas}, maxFeePerGas is ${maxFeePerGas} and tip is ${maxPriorityFeePerGas}`, () => {
+              const maximum = maxFeePerGas;
+              const minimum = baseFeePerGas + maxPriorityFeePerGas;
+              const expectedEffectiveGasPrice =
+                minimum < maximum ? minimum : maximum;
+              const results = gasLimitsToTest.map((gasLimit) => {
+                const gasLimitHex = addHexPrefix(gasLimit.toString(16));
+                const result = conversionUtil(
+                  getMinimumGasTotalInHexWei({
+                    gasLimit: gasLimitHex,
+                    maxFeePerGas: addHexPrefix(maxFeePerGas.toString(16)),
+                    maxPriorityFeePerGas: addHexPrefix(
+                      maxPriorityFeePerGas.toString(16),
+                    ),
+                    baseFeePerGas: addHexPrefix(baseFeePerGas.toString(16)),
+                  }),
+                  { fromNumericBase: 'hex', toNumericBase: 'dec' },
+                );
+                return { result, gasLimit };
+              });
+              it(`should use an effective gasPrice of ${expectedEffectiveGasPrice}`, () => {
+                expect(
+                  results.every(({ result, gasLimit }) => {
+                    const effectiveGasPrice = Number(result) / gasLimit;
+                    return effectiveGasPrice === expectedEffectiveGasPrice;
+                  }),
+                ).toBe(true);
+              });
+              results.forEach(({ result, gasLimit }) => {
+                const expectedResult = (
+                  expectedEffectiveGasPrice * gasLimit
+                ).toString();
+                it(`returns ${expectedResult} when provided gasLimit: ${gasLimit}`, () => {
+                  expect(result).toStrictEqual(expectedResult);
+                });
+              });
+            });
+          });
+        });
+      });
+    });
+  });
+
+  describe('when using legacy fields', () => {
+    describe('getMaximumGasTotalInHexWei', () => {
+      feesToTest.forEach((gasPrice) => {
+        describe(`when gasPrice is ${gasPrice}`, () => {
+          gasLimitsToTest.forEach((gasLimit) => {
+            const expectedResult = (gasLimit * gasPrice).toString();
+            const gasLimitHex = addHexPrefix(gasLimit.toString(16));
+            it(`returns ${expectedResult} when provided gasLimit of ${gasLimit}`, () => {
+              expect(
+                conversionUtil(
+                  getMaximumGasTotalInHexWei({
+                    gasLimit: gasLimitHex,
+                    gasPrice: addHexPrefix(gasPrice.toString(16)),
+                  }),
+                  { fromNumericBase: 'hex', toNumericBase: 'dec' },
+                ),
+              ).toStrictEqual(expectedResult);
+            });
+          });
+        });
+      });
+    });
+
+    describe('getMinimumGasTotalInHexWei', () => {
+      feesToTest.forEach((gasPrice) => {
+        describe(`when gasPrice is ${gasPrice}`, () => {
+          gasLimitsToTest.forEach((gasLimit) => {
+            const expectedResult = (gasLimit * gasPrice).toString();
+            const gasLimitHex = addHexPrefix(gasLimit.toString(16));
+            it(`returns ${expectedResult} when provided gasLimit of ${gasLimit}`, () => {
+              expect(
+                conversionUtil(
+                  getMinimumGasTotalInHexWei({
+                    gasLimit: gasLimitHex,
+                    gasPrice: addHexPrefix(gasPrice.toString(16)),
+                  }),
+                  {
+                    fromNumericBase: 'hex',
+                    toNumericBase: 'dec',
+                  },
+                ),
+              ).toStrictEqual(expectedResult);
+            });
+          });
+        });
+      });
+    });
+  });
+});

From 2a74d24ae652a98b21d210f605b3a060fe9fa447 Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Wed, 7 Jul 2021 10:07:50 -0700
Subject: [PATCH 096/141] Removing unused files from app/images (#11465)

---
 app/images/camera.svg                   |   4 -
 app/images/connect-white.svg            |   3 -
 app/images/copy.svg                     |   5 -
 app/images/forward-carrat.svg           |   3 -
 app/images/help.svg                     |   3 -
 app/images/icons/blue-circle-info.svg   |   3 -
 app/images/icons/green-circle-check.svg |   3 -
 app/images/icons/hamburger.svg          |   1 -
 app/images/icons/info.svg               |   1 -
 app/images/loginglogo.svg               |  11 --
 app/images/meta-shield.svg              |   3 -
 app/images/mm-bolt.svg                  |   3 -
 app/images/mm-secure.svg                |   7 --
 app/images/open.svg                     |   6 --
 app/images/sleuth.svg                   |  18 ----
 app/images/source-logos-all.svg         | 132 ------------------------
 app/images/switch_acc.svg               |   5 -
 17 files changed, 211 deletions(-)
 delete mode 100644 app/images/camera.svg
 delete mode 100644 app/images/connect-white.svg
 delete mode 100644 app/images/copy.svg
 delete mode 100644 app/images/forward-carrat.svg
 delete mode 100644 app/images/help.svg
 delete mode 100644 app/images/icons/blue-circle-info.svg
 delete mode 100644 app/images/icons/green-circle-check.svg
 delete mode 100644 app/images/icons/hamburger.svg
 delete mode 100644 app/images/icons/info.svg
 delete mode 100644 app/images/loginglogo.svg
 delete mode 100644 app/images/meta-shield.svg
 delete mode 100644 app/images/mm-bolt.svg
 delete mode 100644 app/images/mm-secure.svg
 delete mode 100644 app/images/open.svg
 delete mode 100644 app/images/sleuth.svg
 delete mode 100644 app/images/source-logos-all.svg
 delete mode 100644 app/images/switch_acc.svg

diff --git a/app/images/camera.svg b/app/images/camera.svg
deleted file mode 100644
index 4d3f73ec6..000000000
--- a/app/images/camera.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg fill="#f7861c" height="24" viewBox="113.789 0 24.088 24" width="24.088" xmlns="http://www.w3.org/2000/svg">
-    <path d="M134.613 6.85h-3.499l-2.035-2.009-.006-.006-.004-.003a1.698 1.698 0 00-1.189-.482h-4.23c-.491 0-.93.209-1.238.539l-.003-.005-1.991 1.966h-3.571c-.935 0-1.691.747-1.691 1.667v10c0 .92.757 1.668 1.691 1.668h17.768a1.68 1.68 0 001.691-1.668v-10a1.682 1.682 0 00-1.693-1.667zm.846 11.668a.843.843 0 01-.846.834h-17.768a.841.841 0 01-.846-.834v-10c0-.459.38-.833.846-.833h3.922l.248-.245 1.024-1.011.021.062.971-1.035a.843.843 0 01.618-.271h4.23c.223 0 .435.086.602.247l2.033 2.008.247.245H134.613c.465 0 .846.374.846.833z"/>
-    <path d="M125.729 9.351c-2.104 0-3.808 1.678-3.808 3.749 0 2.072 1.703 3.752 3.808 3.752 2.104 0 3.808-1.68 3.808-3.752s-1.704-3.749-3.808-3.749zm0 6.667c-1.633 0-2.962-1.31-2.962-2.918s1.329-2.916 2.962-2.916 2.961 1.307 2.961 2.916-1.328 2.918-2.961 2.918z"/>
-</svg>
diff --git a/app/images/connect-white.svg b/app/images/connect-white.svg
deleted file mode 100644
index e9063ae46..000000000
--- a/app/images/connect-white.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6483 7.41741C14.3482 7.41741 15.8272 8.36346 16.5874 9.75779L18.8081 8.36985C17.5833 6.23784 15.2835 4.802 12.6483 4.802C9.11954 4.802 6.19214 7.37666 5.64216 10.7499H2.125C1.50368 10.7499 1 11.2536 1 11.8749C1 12.4962 1.50368 12.9999 2.125 12.9999H5.63386C6.16206 16.3987 9.1014 18.9999 12.6483 18.9999C15.2235 18.9999 17.4784 17.6287 18.7228 15.5766L16.5042 14.1901C15.7225 15.5041 14.2882 16.3845 12.6483 16.3845C10.1721 16.3845 8.16472 14.3772 8.16472 11.901C8.16472 9.42476 10.1721 7.41741 12.6483 7.41741ZM11.7002 11.9999C11.7002 12.5522 12.1479 12.9999 12.7002 12.9999C13.2525 12.9999 13.7002 12.5522 13.7002 11.9999C13.7002 11.4476 13.2525 10.9999 12.7002 10.9999C12.1479 10.9999 11.7002 11.4476 11.7002 11.9999ZM12.7002 14.9999C11.0433 14.9999 9.7002 13.6568 9.7002 11.9999C9.7002 10.3431 11.0433 8.99992 12.7002 8.99992C13.9109 8.99992 14.9542 9.71715 15.4282 10.7499H21.8751C22.4965 10.7499 23.0001 11.2536 23.0001 11.8749C23.0001 12.4962 22.4965 12.9999 21.8751 12.9999H15.5295C15.1177 14.1651 14.0064 14.9999 12.7002 14.9999Z" fill="white"/>
-</svg>
diff --git a/app/images/copy.svg b/app/images/copy.svg
deleted file mode 100644
index 9ee2317b7..000000000
--- a/app/images/copy.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg fill="#f7861c" height="24" viewBox="189.192 0 24.088 24" width="24.088" xmlns="http://www.w3.org/2000/svg">
-    <path d="M204.655 7.169h-8.962a1.99 1.99 0 00-1.991 1.991v8.963c0 1.1.892 1.99 1.991 1.99h8.962a1.99 1.99 0 001.991-1.99V9.16c0-1.1-.89-1.991-1.991-1.991zm.996 10.954a.995.995 0 01-.996.994h-8.962a.995.995 0 01-.995-.994V9.16c0-.55.446-.996.995-.996h8.962c.55 0 .996.446.996.996z"/>
-    <path d="M196.689 11.152h6.969v-.996h-6.969zM196.689 13.144h6.969v-.996h-6.969zM196.689 15.135h6.969v-.996h-6.969zM196.689 17.126h3.982v-.994h-3.982z"/>
-    <path d="M207.643 4.182h-8.962a1.99 1.99 0 00-1.991 1.991h.995c0-.549.446-.996.996-.996h8.962c.549 0 .995.447.995.996v8.962c0 .55-.446.997-.995.997v.994a1.99 1.99 0 001.991-1.991V6.172a1.99 1.99 0 00-1.991-1.99z"/>
-</svg>
diff --git a/app/images/forward-carrat.svg b/app/images/forward-carrat.svg
deleted file mode 100644
index c64355c78..000000000
--- a/app/images/forward-carrat.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg height="48.381" viewBox="0 0 15 45.357" width="16" xmlns="http://www.w3.org/2000/svg">
-    <path d="M0 0v7.5l10 15-10 15v7.857L15 22.5z" fill="#f7861c" fill-rule="evenodd"/>
-</svg>
diff --git a/app/images/help.svg b/app/images/help.svg
deleted file mode 100644
index 852663161..000000000
--- a/app/images/help.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg height="24" viewBox="51.64 0 24.088 24" width="24.088" xmlns="http://www.w3.org/2000/svg">
-    <path d="M67.495 2.012C65.976.858 64.266.461 62.096.461c-1.646 0-3.053.337-4.168 1.087-1.646 1.121-2.419 3.003-2.419 5.979h4.241c0-.794-.078-1.65.385-2.384.465-.734 1.11-1.297 2.22-1.297 1.126 0 1.707.325 2.254.999.464.574.641 1.258.641 1.987 0 .63-.321 1.209-.701 1.734a3.713 3.713 0 01-.834.85s-2.293 1.364-3.098 2.656c-.602.961-.817 2.166-.866 3.606-.006.105.031.32.396.32h3.412s.388-.243.393-.342c.021-.526.089-1.331.183-1.635.182-.575.534-1.076 1.087-1.507l1.144-.791c1.032-.807 1.854-1.463 2.22-1.982.623-.851 1.06-1.899 1.06-3.142-.002-2.024-.749-3.521-2.151-4.587zm-5.691 16.183c-1.431-.044-2.613.95-2.661 2.501-.046 1.557 1.075 2.578 2.512 2.623 1.489.044 2.645-.916 2.688-2.468.045-1.552-1.049-2.612-2.539-2.656z"/>
-</svg>
diff --git a/app/images/icons/blue-circle-info.svg b/app/images/icons/blue-circle-info.svg
deleted file mode 100644
index ebed859d5..000000000
--- a/app/images/icons/blue-circle-info.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.2 5.6H8.8V4H7.2V5.6ZM8 14.4C4.472 14.4 1.6 11.528 1.6 8C1.6 4.472 4.472 1.6 8 1.6C11.528 1.6 14.4 4.472 14.4 8C14.4 11.528 11.528 14.4 8 14.4ZM8 0C6.94943 0 5.90914 0.206926 4.93853 0.608964C3.96793 1.011 3.08601 1.60028 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.08601 14.3997 3.96793 14.989 4.93853 15.391C5.90914 15.7931 6.94943 16 8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 6.94943 15.7931 5.90914 15.391 4.93853C14.989 3.96793 14.3997 3.08601 13.6569 2.34315C12.914 1.60028 12.0321 1.011 11.0615 0.608964C10.0909 0.206926 9.05058 0 8 0ZM7.2 12H8.8V7.2H7.2V12Z" fill="#037DD6"/>
-</svg>
diff --git a/app/images/icons/green-circle-check.svg b/app/images/icons/green-circle-check.svg
deleted file mode 100644
index 305b326f7..000000000
--- a/app/images/icons/green-circle-check.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.4 8C14.4 9.69739 13.7257 11.3253 12.5255 12.5255C11.3253 13.7257 9.69739 14.4 8 14.4C6.30261 14.4 4.67475 13.7257 3.47452 12.5255C2.27428 11.3253 1.6 9.69739 1.6 8C1.6 6.30261 2.27428 4.67475 3.47452 3.47452C4.67475 2.27428 6.30261 1.6 8 1.6C8.608 1.6 9.2 1.688 9.76 1.848L11.016 0.592C10.088 0.208 9.072 0 8 0C6.94943 0 5.90914 0.206926 4.93853 0.608964C3.96793 1.011 3.08601 1.60028 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.08601 14.3997 3.96793 14.989 4.93853 15.391C5.90914 15.7931 6.94943 16 8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8H14.4ZM4.728 6.464L3.6 7.6L7.2 11.2L15.2 3.2L14.072 2.064L7.2 8.936L4.728 6.464Z" fill="#28A745"/>
-</svg>
diff --git a/app/images/icons/hamburger.svg b/app/images/icons/hamburger.svg
deleted file mode 100644
index 64fc344ab..000000000
--- a/app/images/icons/hamburger.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" height="15" viewBox="0 0 20 15" width="20" xmlns="http://www.w3.org/2000/svg"><g fill="#6a737d"><rect height="3" rx="1.5" width="20"/><rect height="3" rx="1.5" width="20" y="6"/><rect height="3" rx="1.5" width="20" y="12"/></g></svg>
\ No newline at end of file
diff --git a/app/images/icons/info.svg b/app/images/icons/info.svg
deleted file mode 100644
index dfb4ee049..000000000
--- a/app/images/icons/info.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><g fill="#6a737d"><path clip-rule="evenodd" d="m7.99984 2.00001c-3.31371 0-6 2.68629-6 5.99999s2.68629 6 6 6c3.31366 0 5.99996-2.6863 5.99996-6s-2.6863-5.99999-5.99996-5.99999zm-7.333336 5.99999c0-4.05008 3.283246-7.333328 7.333336-7.333328 4.05006 0 7.33336 3.283248 7.33336 7.333328 0 4.0501-3.2833 7.3333-7.33336 7.3333-4.05009 0-7.333336-3.2832-7.333336-7.3333z" fill-rule="evenodd"/><path clip-rule="evenodd" d="m7.99984 7.33334c.36819 0 .66666.29847.66666.66666v2.6667c0 .3682-.29847.6666-.66666.6666s-.66667-.2984-.66667-.6666v-2.6667c0-.36819.29848-.66666.66667-.66666z" fill-rule="evenodd"/><path d="m8.6665 5.33334c0 .36819-.29847.66666-.66666.66666s-.66667-.29847-.66667-.66666.29848-.66667.66667-.66667.66666.29848.66666.66667z"/></g></svg>
\ No newline at end of file
diff --git a/app/images/loginglogo.svg b/app/images/loginglogo.svg
deleted file mode 100644
index e39001e10..000000000
--- a/app/images/loginglogo.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg height="128" width="128" xmlns="http://www.w3.org/2000/svg">
-    <mask id="a" fill="#fff">
-        <path d="M0 82.118h126.527V0H0z" fill-rule="evenodd"/>
-    </mask>
-    <g fill="#1b243d" fill-rule="evenodd">
-        <path d="M7.881 97.273a2.224 2.224 0 00-.67-.534 1.739 1.739 0 00-.808-.198H1v8.536h.958v-7.674h4.268c.2 0 .381.052.54.157s.294.237.404.397c.11.159.193.337.253.533s.088.386.088.568c0 .164-.022.337-.068.52-.045.182-.12.35-.226.506s-.234.283-.389.383-.343.15-.56.15H4.993v.862h1.437c.283 0 .55-.066.8-.198s.472-.31.664-.533c.191-.224.341-.48.451-.767s.164-.59.164-.91c0-.356-.057-.688-.17-.998s-.268-.577-.459-.8M17.43 102.116a3.52 3.52 0 01-.746 1.073 3.598 3.598 0 01-1.094.739c-.415.183-.855.274-1.32.274s-.905-.091-1.32-.274a3.499 3.499 0 01-1.088-.74 3.57 3.57 0 01-.739-1.072 3.125 3.125 0 01-.273-1.293c0-.447.091-.878.273-1.293s.429-.777.739-1.088a3.63 3.63 0 011.094-.745c.42-.187.862-.28 1.328-.28.464 0 .904.093 1.319.28s.778.436 1.088.745c.31.31.556.673.739 1.088.182.415.273.846.273 1.293 0 .456-.091.887-.273 1.293m-.089-4.351c-.388-.387-.846-.695-1.375-.923s-1.094-.342-1.696-.342-1.168.114-1.696.342c-.53.228-.988.536-1.375.923a4.384 4.384 0 00-.924 1.369 4.155 4.155 0 00-.342 1.675c0 .593.114 1.152.342 1.676a4.324 4.324 0 002.299 2.291c.528.229 1.094.342 1.696.342s1.167-.113 1.696-.342a4.346 4.346 0 001.375-.923c.387-.387.695-.843.923-1.368a4.156 4.156 0 00.342-1.676c0-.592-.114-1.151-.342-1.675a4.398 4.398 0 00-.923-1.37M27.225 97.273a2.249 2.249 0 00-.67-.534 1.739 1.739 0 00-.808-.198h-5.403v8.536h.957v-7.674h4.269c.2 0 .38.052.54.157.159.105.294.237.404.397.109.159.193.337.253.533.059.196.088.386.088.568 0 .164-.023.337-.068.52-.046.182-.121.35-.226.506s-.234.283-.39.383a1.01 1.01 0 01-.56.15h-1.314l2.285 4.46h1.026l-1.82-3.598c.283 0 .55-.066.8-.198s.47-.31.658-.533c.186-.224.334-.48.444-.767.109-.287.164-.59.164-.91 0-.356-.057-.688-.171-.998s-.267-.577-.458-.8M36.87 96.54h-7.457v.862h3.242v7.674h.958v-7.673h3.256zM36.308 105.077h6.115l-.589-.861h-4.02l2.967-6.075 3.448 6.936h1.067l-4.515-8.987zM47.786 96.54h-.958v8.536h6.499v-.86h-5.541zM67.047 104.27l-5.403-7.729h-1.6v8.536H61v-7.743l5.5 7.743h1.504v-8.536h-.958zM69.92 105.077h6.498v-.861h-5.54v-6.813h5.54v-.862H69.92z"/>
-        <path d="M71.218 78.479h4.091v-.861h-4.091zM77.292 74.403h3.242v7.674h.958v-7.674h3.256v-.862h-7.456zM95.828 81.366L91.67 73.09l-4.09 8.208V73.54h-.958v8.536h1.642L91.67 75.1l3.448 6.977h1.67V73.54h-.959zM106.02 79.116a3.585 3.585 0 01-1.84 1.812c-.415.183-.855.274-1.32.274s-.905-.091-1.32-.274a3.499 3.499 0 01-1.088-.74 3.57 3.57 0 01-.739-1.072 3.125 3.125 0 01-.273-1.293c0-.447.091-.878.273-1.293s.43-.777.74-1.088a3.63 3.63 0 011.093-.745c.42-.187.863-.28 1.328-.28s.905.093 1.32.28a3.66 3.66 0 011.087.745c.31.31.556.673.74 1.088.181.415.272.846.272 1.293 0 .456-.09.887-.273 1.293m-.089-4.351c-.388-.387-.846-.695-1.375-.923s-1.094-.342-1.696-.342-1.168.114-1.696.342c-.53.228-.988.536-1.375.923a4.384 4.384 0 00-.924 1.369 4.155 4.155 0 00-.342 1.675c0 .593.114 1.152.342 1.676a4.324 4.324 0 002.299 2.291c.528.229 1.094.342 1.696.342s1.167-.113 1.696-.342a4.346 4.346 0 001.375-.923c.388-.387.695-.843.923-1.368a4.156 4.156 0 00.342-1.676c0-.592-.114-1.151-.342-1.675a4.381 4.381 0 00-.923-1.37M115.815 74.273a2.236 2.236 0 00-.67-.534 1.739 1.739 0 00-.808-.198h-5.403v8.536h.957v-7.674h4.27c.2 0 .38.052.54.157.158.105.293.237.403.397.11.159.193.337.253.533s.088.386.088.568c0 .164-.023.337-.068.52-.046.182-.12.35-.226.506s-.234.283-.39.383a1.01 1.01 0 01-.56.15h-1.314l2.285 4.46h1.026l-1.82-3.598c.283 0 .55-.066.801-.198.25-.132.47-.31.657-.533.186-.224.334-.48.444-.767.11-.287.164-.59.164-.91 0-.356-.057-.688-.17-.998s-.268-.577-.459-.8M126.527 73.54h-1.04l-2.12 4.31 2.12 4.227h1.04l-2.093-4.227zM119.208 73.54h-.958v8.536h.958v-3.802h2.9v-.863h-2.9zM72.463 48.06c-5.114 0-10.873-1.958-16.216-5.515-.481-.32-1.004-.311-1.168.019-.165.33.09.857.572 1.177 5.797 3.859 12.046 5.984 17.594 5.984 4.597 0 8.294-1.444 10.69-4.177 2.35-2.678 3.253-6.346 2.61-10.606-.065-.438-.527-.906-1.031-1.046-.503-.14-.858.102-.792.54.592 3.926-.24 7.307-2.406 9.775-2.208 2.519-5.616 3.849-9.853 3.849M84.508 28.475c-.216-.46-.764-.833-1.223-.833-.46 0-.657.373-.442.833.402.854.751 1.714 1.037 2.556.154.456.672.873 1.156.932a.868.868 0 00.112.008c.411 0 .626-.306.483-.725a26.647 26.647 0 00-1.123-2.771M71.577 13.692c-6-4.171-12.501-6.468-18.307-6.468-4.643 0-8.363 1.47-10.757 4.254-2.316 2.69-3.205 6.52-2.503 10.78.072.44.538.906 1.04 1.04.093.024.18.036.26.036.358 0 .579-.23.52-.59-.646-3.926.174-7.455 2.308-9.936 2.206-2.564 5.634-3.92 9.915-3.92 5.35 0 11.343 2.117 16.873 5.962.475.33 1.005.339 1.185.019s-.06-.847-.534-1.177M42.636 25.918c-.156-.456-.673-.874-1.157-.933s-.75.262-.594.718c.309.913.687 1.845 1.123 2.771.214.46.762.832 1.222.832s.658-.372.442-.832a24.811 24.811 0 01-1.036-2.556M48.954 5.599a.766.766 0 00.12-.01 21.005 21.005 0 013.31-.251c.46 0 .656-.373.441-.833-.216-.46-.764-.832-1.224-.832-1.23 0-2.423.09-3.546.27-.423.068-.538.49-.257.946.256.413.751.71 1.156.71" mask="url(#a)" transform="translate(1 23)"/>
-        <path d="M38.456 28.475c3.134 6.669 8.685 12.927 15.63 17.62.238.162.487.242.699.242.214 0 .389-.082.475-.247.17-.326-.08-.854-.56-1.177-6.477-4.38-11.655-10.216-14.58-16.438-2.42-5.15-3.055-10.024-1.836-14.095 1.18-3.944 4.108-6.851 8.243-8.186.385-.124.427-.583.095-1.026-.333-.443-.913-.7-1.297-.577-4.434 1.432-7.573 4.548-8.838 8.774-1.306 4.365-.625 9.589 1.969 15.11M77.442 51.359a21.003 21.003 0 01-3.311.253c-.46 0-.657.372-.44.832.215.459.763.832 1.223.832 1.23 0 2.423-.091 3.547-.271.422-.067.537-.49.256-.945-.281-.454-.852-.768-1.275-.701M88.059 28.474c-3.134-6.668-8.684-12.926-15.627-17.619-.478-.324-1.004-.32-1.174.005-.17.327.08.854.558 1.177 6.478 4.38 11.655 10.216 14.579 16.437 2.369 5.04 3.028 9.831 1.906 13.854-1.084 3.89-3.854 6.821-7.8 8.25-.375.137-.401.603-.06 1.042.28.357.716.586 1.072.586a.663.663 0 00.229-.037c4.229-1.534 7.198-4.674 8.36-8.844 1.203-4.313.497-9.448-2.043-14.85" mask="url(#a)" transform="translate(1 23)"/>
-        <path d="M36.572 28.475c-.216-.46-.764-.833-1.224-.833-.46 0-.657.373-.441.833 2.796 5.948 7.293 11.64 13.007 16.465.269.227.582.348.842.348.167 0 .313-.05.41-.154.248-.268.09-.787-.352-1.161-5.378-4.54-9.611-9.9-12.242-15.498M56.817 49.565a52.978 52.978 0 01-4.954-3.201c-.469-.341-1.007-.367-1.204-.06-.196.309.025.835.493 1.176a56.127 56.127 0 005.262 3.399c.207.119.414.176.592.176.248 0 .442-.111.507-.322.111-.363-.2-.886-.696-1.168M75.8 55.16c-4.868 0-10.25-1.321-15.57-3.823-.506-.238-.958-.112-1.01.282-.053.394.314.905.82 1.143 5.651 2.659 11.371 4.063 16.542 4.063.46 0 .656-.372.441-.832-.217-.46-.764-.832-1.224-.832M71.843 8.673a53.081 53.081 0 0110.553 8.787c3.203 3.468 5.743 7.174 7.548 11.014.216.46.763.832 1.223.832s.657-.372.441-.832c-1.917-4.079-4.615-8.016-8.02-11.702a56.342 56.342 0 00-11.209-9.334c-.486-.308-1-.282-1.148.06-.148.341.126.867.612 1.175M64.115 4.657a48.191 48.191 0 014.428 2.09 1.2 1.2 0 00.555.154c.26 0 .46-.12.516-.348.09-.375-.24-.894-.74-1.162a51.183 51.183 0 00-4.704-2.219c-.507-.207-.931-.044-.947.366-.015.411.385.911.892 1.12M50.716 1.788c2.948 0 6.07.478 9.276 1.419.103.03.2.045.29.045.346 0 .567-.218.522-.565-.057-.435-.51-.907-1.016-1.056-3.408-1-6.723-1.508-9.855-1.508-.459 0-.657.373-.44.833.215.459.763.832 1.223.832M36.791 1.572c.31-.21.234-.712-.168-1.12-.402-.409-.979-.57-1.29-.359-3.009 2.043-5.134 4.845-6.315 8.327-.12.358.181.881.674 1.171.213.124.426.185.61.185.242 0 .433-.106.502-.309 1.12-3.3 3.134-5.957 5.987-7.895M29.356 10.908c-.503-.25-.967-.14-1.036.246a21.216 21.216 0 00-.287 2.495c-.022.407.37.91.878 1.124.154.065.3.096.43.096.3 0 .514-.162.53-.445.045-.805.136-1.6.272-2.365.068-.386-.284-.9-.787-1.15M96.823 47.358c-.493-.29-.991-.233-1.112.124-1.12 3.3-3.135 5.957-5.988 7.895-.309.21-.234.712.168 1.12.283.288.651.453.953.453.128 0 .245-.03.337-.093 3.01-2.045 5.135-4.847 6.316-8.328.12-.358-.181-.882-.674-1.171M97.608 41.939c-.507-.211-.934-.05-.952.358-.04.884-.135 1.756-.284 2.592-.068.386.284.902.787 1.152.182.089.36.133.515.133.272 0 .477-.133.52-.38.157-.881.258-1.801.3-2.735.018-.408-.378-.91-.886-1.12M70.794 44.51c-8.842 0-19.416-7.194-23.571-16.036-4.156-8.84-.343-16.035 8.499-16.035s19.416 7.194 23.57 16.035c4.156 8.842.344 16.035-8.498 16.035M54.94 10.775c-9.76 0-13.968 7.94-9.382 17.7 4.587 9.76 16.258 17.7 26.018 17.7s13.968-7.94 9.382-17.7c-4.587-9.76-16.26-17.7-26.018-17.7M36.994 5.788c-.446-.37-1.004-.45-1.247-.178-1.528 1.714-2.616 3.766-3.233 6.1-.098.37.227.89.725 1.163.199.109.397.162.567.162.256 0 .454-.118.512-.34.582-2.198 1.606-4.13 3.045-5.743.242-.273.077-.793-.37-1.164M90.57 51.558c1.633-1.757 2.788-3.883 3.432-6.318.098-.37-.226-.892-.725-1.164s-.982-.193-1.08.178c-.606 2.293-1.694 4.295-3.231 5.95-.25.266-.091.787.352 1.16.269.227.582.348.842.348.167 0 .312-.05.41-.154" mask="url(#a)" transform="translate(1 23)"/>
-    </g>
-</svg>
diff --git a/app/images/meta-shield.svg b/app/images/meta-shield.svg
deleted file mode 100644
index f8eee0db1..000000000
--- a/app/images/meta-shield.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg fill="none" height="24" width="20" xmlns="http://www.w3.org/2000/svg">
-    <path clip-rule="evenodd" d="M0 9.715V3.572l10-2.7 10 2.7v6.143c0 6.33-4.2 11.69-10 13.52-5.8-1.83-10-7.19-10-13.52zm15.388 1.013l.235.17-.541.639.824 2.563-.763 2.616-2.67-.738-.517.426-1.055.733H9.098l-1.054-.733-.518-.426-2.67.738L4.1 14.1l.819-2.563-.542-.639.236-.17-.377-.346.287-.227-.376-.288.254-.19-.4-1.93.593-1.792 3.818 1.433h3.178l3.818-1.433L16 7.748l-.396 1.93.25.189-.377.288.287.227zm-8.003 2.437l1.086-.5.452.958zm3.384.458l.45-.959 1.088.501zM9.242 14.9h1.2l.209.166.117 1.112-.108-.11H9.027l-.104.11.112-1.112z" fill="#fff" fill-rule="evenodd"/>
-</svg>
diff --git a/app/images/mm-bolt.svg b/app/images/mm-bolt.svg
deleted file mode 100644
index 8f2e3a7e5..000000000
--- a/app/images/mm-bolt.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg viewBox="0 0 252 251.7" xmlns="http://www.w3.org/2000/svg">
-    <path d="M211.3 103.9h-60.7c-2 0-3.6-1.6-3.6-3.6V3.6c0-3.5-4.5-5-6.6-2.2l-102.7 140c-1.8 2.4 0 5.8 2.9 5.8h60.7c2 0 3.6 1.6 3.6 3.6v96.6c0 3.5 4.5 5 6.6 2.2l102.7-140c1.8-2.3.1-5.7-2.9-5.7z" fill="#757575"/>
-</svg>
diff --git a/app/images/mm-secure.svg b/app/images/mm-secure.svg
deleted file mode 100644
index a85800751..000000000
--- a/app/images/mm-secure.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg fill="none" height="22" width="78" xmlns="http://www.w3.org/2000/svg">
-    <path d="M29.549 2.89l1.826 5.157 1.816-5.156h1.924V10h-1.47V8.057l.147-3.355L31.873 10h-1.006l-1.914-5.293.147 3.35V10h-1.465V2.89zm9.184 7.208c-.774 0-1.406-.238-1.894-.713-.485-.475-.728-1.109-.728-1.9V7.35c0-.531.103-1.005.308-1.421.205-.42.495-.742.87-.967a2.446 2.446 0 011.288-.342c.723 0 1.29.228 1.704.684.417.455.625 1.102.625 1.938v.576h-3.364c.046.345.182.622.41.83.231.209.523.313.874.313.544 0 .969-.197 1.275-.59l.693.776c-.212.299-.498.533-.86.703-.36.166-.761.249-1.2.249zm-.16-4.336a.891.891 0 00-.684.283c-.173.189-.283.459-.332.81h1.963v-.112c-.007-.312-.092-.553-.254-.722-.163-.173-.394-.26-.694-.26zM43.4 3.418v1.299h.904v1.035H43.4v2.637c0 .195.038.335.113.42.075.084.218.127.43.127.156 0 .294-.012.414-.035v1.07a2.906 2.906 0 01-.854.127c-.99 0-1.494-.5-1.514-1.5V5.753h-.771V4.717h.771V3.418zM48.152 10a1.567 1.567 0 01-.141-.474c-.342.381-.786.572-1.333.572-.518 0-.947-.15-1.29-.45a1.448 1.448 0 01-.507-1.132c0-.56.207-.99.62-1.29.417-.299 1.017-.45 1.802-.454h.65V6.47c0-.244-.064-.44-.191-.586-.124-.147-.32-.22-.591-.22-.238 0-.425.057-.562.171a.584.584 0 00-.2.469h-1.411c0-.306.094-.59.283-.85.19-.26.456-.464.801-.61.345-.15.733-.225 1.162-.225.651 0 1.167.165 1.548.493.384.326.576.785.576 1.377v2.29c.003.502.073.88.21 1.138V10zm-1.167-.981c.209 0 .4-.046.577-.137a.928.928 0 00.39-.376v-.908h-.527c-.707 0-1.083.244-1.128.732l-.005.083c0 .176.062.32.186.435.123.114.293.17.507.17zM52.46 2.89l1.826 5.156 1.817-5.156h1.923V10h-1.47V8.057l.147-3.355L54.783 10h-1.006l-1.914-5.293.147 3.35V10h-1.465V2.89zM62.273 10a1.567 1.567 0 01-.141-.474c-.342.381-.786.572-1.333.572-.518 0-.947-.15-1.29-.45a1.448 1.448 0 01-.507-1.132c0-.56.207-.99.62-1.29.417-.299 1.017-.45 1.802-.454h.65V6.47c0-.244-.064-.44-.191-.586-.124-.147-.32-.22-.591-.22-.238 0-.425.057-.561.171a.584.584 0 00-.2.469h-1.412c0-.306.095-.59.283-.85s.456-.464.801-.61a2.89 2.89 0 011.162-.225c.651 0 1.167.165 1.548.493.384.326.576.785.576 1.377v2.29c.004.502.074.88.21 1.138V10zm-1.167-.981c.209 0 .4-.046.577-.137a.928.928 0 00.39-.376v-.908h-.527c-.706 0-1.082.244-1.128.732l-.005.083c0 .176.062.32.186.435.123.114.293.17.507.17zm6.329-.479c0-.172-.087-.308-.26-.405-.168-.101-.442-.19-.82-.269-1.256-.263-1.884-.797-1.884-1.601 0-.47.193-.86.58-1.172.391-.316.9-.474 1.53-.474.67 0 1.205.158 1.606.474.403.316.605.726.605 1.23h-1.411a.674.674 0 00-.195-.498c-.13-.133-.334-.2-.61-.2-.238 0-.422.054-.553.161s-.195.244-.195.41c0 .157.073.283.22.381.15.095.4.178.752.25.351.068.648.146.889.234.745.273 1.118.747 1.118 1.42 0 .482-.207.873-.62 1.172-.414.297-.948.445-1.602.445-.443 0-.837-.078-1.182-.235a2.008 2.008 0 01-.805-.65 1.52 1.52 0 01-.293-.893h1.338c.013.251.105.443.278.576.172.134.404.2.693.2.27 0 .474-.05.61-.15.14-.105.21-.24.21-.406zm4.204-.66l-.508.509V10H69.72V2.5h1.41v4.155l.274-.351 1.353-1.587h1.694l-1.909 2.202L74.617 10h-1.62zM31.32 18.136c0-.277-.097-.489-.293-.635-.195-.15-.547-.306-1.054-.469a7.604 7.604 0 01-1.206-.488c-.808-.436-1.211-1.024-1.211-1.763 0-.384.107-.726.322-1.025.218-.303.529-.539.933-.708.406-.17.862-.254 1.367-.254.508 0 .96.093 1.357.278.397.183.705.441.923.777.221.335.332.716.332 1.142h-1.465c0-.325-.102-.578-.307-.757-.205-.182-.494-.273-.865-.273-.358 0-.636.076-.835.23a.71.71 0 00-.297.595c0 .231.115.425.346.581.235.156.578.303 1.03.44.834.25 1.44.561 1.822.932.38.371.571.834.571 1.387 0 .615-.233 1.099-.698 1.45-.466.348-1.092.523-1.88.523-.547 0-1.045-.1-1.494-.298-.45-.202-.793-.477-1.03-.825a2.117 2.117 0 01-.352-1.211h1.47c0 .784.468 1.176 1.406 1.176.348 0 .62-.07.815-.21a.698.698 0 00.293-.595zm4.805 1.963c-.775 0-1.406-.238-1.895-.713-.485-.476-.727-1.109-.727-1.9v-.136c0-.531.102-1.005.308-1.421.205-.42.494-.743.869-.967a2.446 2.446 0 011.289-.342c.722 0 1.29.228 1.704.684.417.455.625 1.102.625 1.938v.576h-3.364c.045.345.182.622.41.83.23.209.522.313.874.313.543 0 .968-.197 1.274-.59l.694.775c-.212.3-.498.534-.86.704-.361.166-.762.249-1.201.249zm-.161-4.336a.891.891 0 00-.684.283c-.172.189-.283.459-.332.81h1.963v-.112c-.006-.312-.091-.553-.254-.723-.163-.172-.394-.258-.693-.258zm5.337 3.198c.26 0 .472-.072.635-.215a.752.752 0 00.253-.571h1.324c-.004.358-.101.687-.293.986a1.953 1.953 0 01-.791.693c-.332.163-.7.245-1.104.245-.755 0-1.35-.24-1.787-.718-.436-.482-.654-1.146-.654-1.992v-.093c0-.814.216-1.463.65-1.948.432-.485 1.026-.728 1.781-.728.661 0 1.19.189 1.587.566.4.375.604.875.61 1.5H42.19c-.006-.274-.09-.495-.253-.665-.163-.172-.378-.258-.645-.258-.329 0-.578.12-.747.361-.166.238-.25.625-.25 1.162v.147c0 .543.084.934.25 1.171s.418.357.757.357zm6.181.503c-.348.423-.83.635-1.445.635-.566 0-1-.163-1.299-.489-.296-.325-.447-.802-.454-1.43v-3.462h1.411v3.413c0 .55.25.825.752.825.479 0 .807-.166.987-.498v-3.74h1.416V20h-1.328zm5.4-3.423a3.84 3.84 0 00-.507-.039c-.534 0-.884.18-1.05.542V20h-1.411v-5.283h1.333l.04.63c.282-.485.675-.728 1.176-.728.156 0 .303.021.44.064zm3.018 4.058c-.774 0-1.406-.238-1.894-.713-.485-.475-.728-1.109-.728-1.9v-.136c0-.531.103-1.005.308-1.421.205-.42.495-.742.87-.967a2.446 2.446 0 011.288-.342c.723 0 1.29.228 1.704.684.417.456.625 1.102.625 1.938v.576H54.71c.046.345.182.622.41.83.231.209.523.313.874.313.544 0 .969-.197 1.275-.59l.693.776c-.212.299-.498.533-.86.703-.36.166-.761.249-1.2.249zm-.16-4.336a.891.891 0 00-.684.283c-.173.189-.284.459-.332.81h1.963v-.112c-.007-.312-.092-.553-.254-.722-.163-.173-.394-.26-.694-.26z" fill="#a2a4ac"/>
-    <g clip-rule="evenodd" fill-rule="evenodd">
-        <path d="M0 2.655v6.044C0 14.925 4.2 20.199 10 22c5.8-1.802 10-7.075 10-13.301V2.655L10 0z" fill="#a2a4ac"/>
-        <path d="M8.47 11.6l-1.085.493 1.538.45zm2.75 0l-.45.943 1.538-.45zm-.776 2.2h-1.2l-.208.163-.113 1.094.104-.109h1.634l.108.11-.117-1.095zm5.18-3.937l-.236-.168.377-.34-.288-.223.377-.284-.25-.186L16 6.763 15.407 5l-3.818 1.41H8.41L4.593 5 4 6.763l.4 1.899-.254.186.377.284-.288.223.377.34-.235.168.541.628-.82 2.522.759 2.573 2.67-.726.517.419L9.098 16h1.803l1.055-.721.518-.419 2.67.726.762-2.573-.824-2.522z" fill="#fff"/>
-    </g>
-</svg>
diff --git a/app/images/open.svg b/app/images/open.svg
deleted file mode 100644
index 07feb87b9..000000000
--- a/app/images/open.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg height="28" width="28" xmlns="http://www.w3.org/2000/svg">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M27 14c0 7.18-5.82 13-13 13S1 21.18 1 14 6.82 1 14 1s13 5.82 13 13z" stroke="#4a4a4a"/>
-        <path d="M7 18s1.787-6.164 7.762-6.164V9L20 13.373 14.762 18v-2.836S10.54 14.463 7 18" fill="#4a4a4a"/>
-    </g>
-</svg>
diff --git a/app/images/sleuth.svg b/app/images/sleuth.svg
deleted file mode 100644
index 2ca1846d5..000000000
--- a/app/images/sleuth.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
-    <path d="M33 36v-1a6 6 0 00-6-6H9a6 6 0 00-6 6v1z" fill="#66757f"/>
-    <path d="M12 27.482C13.672 29.057 15.746 30 18 30s4.327-.944 6-2.518V26H12z" fill="#ef9645"/>
-    <path d="M26.75 20.435c1.188.208 2.619.129 2.416.917-.479 1.854-2.604 1.167-2.979 1.188-.375.02.563-2.105.563-2.105z" fill="#66757f"/>
-    <path d="M27.062 20.645c1.875.25 2.541.416 1.166.958-.772.305-2.243 4.803-3.331 4.118-1.087-.685 2.165-5.076 2.165-5.076z" fill="#292f33"/>
-    <path d="M9.255 20.435c-1.188.208-2.619.129-2.416.917.479 1.854 2.604 1.167 2.979 1.188.375.02-.563-2.105-.563-2.105z" fill="#66757f"/>
-    <path d="M8.943 20.645c-1.875.25-2.541.416-1.166.958.772.305 2.243 4.803 3.331 4.118s-2.165-5.076-2.165-5.076z" fill="#292f33"/>
-    <path d="M8.055 11.031c-1.953 0-2.305 3.164-.664 3.594 0 0-1.367 3.32 1.953 3.32-.547-1.68-1.562-4.414-.781-6.406m19.38-.508c1.953 0 2.305 3.164.664 3.594 0 0 1.367 3.32-1.953 3.32.547-1.68 1.562-4.414.781-6.406" fill="#ffac33"/>
-    <ellipse cx="18" cy="15.5" fill="#ffdc5d" rx="10" ry="12.5"/>
-    <path d="M14 17a1 1 0 01-1-1v-1a1 1 0 012 0v1a1 1 0 01-1 1zm8 0a1 1 0 01-1-1v-1a1 1 0 112 0v1a1 1 0 01-1 1z" fill="#662113"/>
-    <path d="M19 20.5a.5.5 0 01-.5.5h-1a.5.5 0 010-1h1a.5.5 0 01.5.5z" fill="#c1694f"/>
-    <path clip-rule="evenodd" d="M7.657 14.788c.148.147.888.591 1.036 1.034s.445 2.954 1.333 3.693c.916.762 4.37.478 5.032.149 1.48-.738 1.662-2.798 1.924-3.842.148-.591 1.036-.591 1.036-.591s.888 0 1.036.591c.262 1.044.444 3.104 1.924 3.841.662.33 4.116.614 5.034-.147.887-.739 1.183-3.25 1.331-3.694.146-.443.888-.886 1.035-1.034.148-.148.148-.739 0-.887-.296-.295-3.788-.559-7.548-.148-.75.082-1.035.295-2.812.295-1.776 0-2.062-.214-2.812-.295-3.759-.411-7.252-.148-7.548.148-.149.148-.149.74-.001.887z" fill="#292f33" fill-rule="evenodd"/>
-    <path d="M7.858 8.395S9.217-.506 13.79.023c3.512.406 4.89.825 7.833.097 1.947-.482 4.065 1.136 5.342 4.379a27.72 27.72 0 011.224 4.041s3.938-.385 4.165 1.732c.228 2.117-4.354 4.716-15.889 4.716C10 14.987 3.33 12.63 3.013 10.657s4.845-2.262 4.845-2.262z" fill="#66757f"/>
-    <path d="M8.125 7.15s-.27 1.104-.406 1.871c-.136.768.226 1.296 2.705 1.824 3.287.7 10.679.692 15.058-.383 1.759-.432 2.886-.72 2.751-1.583-.167-1.068-.196-1.066-.541-2.208 0 0-1.477.502-3.427.96-2.66.624-9.964.911-13.481.144-1.874-.41-2.659-.625-2.659-.625zm-.136 13.953c-.354.145 2.921 1.378 7.48 1.458 4.771.084 6.234.39 5.146 1.459-1.146 1.125-.852 2.894-.771 3.418s2.047 1.916 2.208 2.56c.161.645-1.229 5.961-1.229 5.961l-8.729-.252c-2.565-8.844-2.883-8.501-4.105-13.604-.241-1.008 0-1 0-1z" fill="#292f33"/>
-    <path d="M6.989 21.144c-.354.146 2.921 1.378 7.48 1.458 4.771.084 6.234.39 5.146 1.459-1.146 1.125-.664 2.894-.583 3.418s1.859 1.916 2.021 2.561c.16.644-1.231 5.96-1.231 5.96l-8.729-.252c-2.565-8.844-2.883-8.501-4.105-13.604-.24-1.008.001-1 .001-1z" fill="#66757f"/>
-    <path d="M28.052 21.103c.354.145-2.921 1.378-7.479 1.458-4.771.084-6.234.39-5.146 1.459 1.146 1.125 2.976 2.892 2.896 3.416-.081.524-4.172 1.918-4.333 2.562-.161.645 1.229 5.961 1.229 5.961l8.729-.252c2.565-8.844 2.883-8.501 4.104-13.604.241-1.008 0-1 0-1z" fill="#292f33"/>
-    <path d="M28.958 21.103c.354.145-2.921 1.378-7.479 1.458-4.771.084-6.234.39-5.146 1.459 1.146 1.125 2.977 2.892 2.896 3.416s-4.172 1.918-4.333 2.562c-.161.645 1.229 5.961 1.229 5.961l8.657.01c2.565-8.844 2.955-8.763 4.177-13.866.24-1.008-.001-1-.001-1z" fill="#66757f"/>
-</svg>
diff --git a/app/images/source-logos-all.svg b/app/images/source-logos-all.svg
deleted file mode 100644
index 22006c179..000000000
--- a/app/images/source-logos-all.svg
+++ /dev/null
@@ -1,132 +0,0 @@
-<svg width="239" height="103" viewBox="0 0 239 103" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_d)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M114.341 48.3461H112.917V56.1683H114.341V48.3461Z" fill="#2B71FF"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M126.962 51.6222C128.43 51.9664 129.278 52.453 129.481 53.4144C129.515 53.5743 129.531 53.7376 129.528 53.901C129.528 55.3609 128.502 56.2867 126.831 56.2867C125.556 56.2761 124.326 55.818 123.358 54.993L124.206 54.0079C124.969 54.6607 125.876 55.0761 126.867 55.0761C127.857 55.0761 128.132 54.6369 128.132 54.0316C128.132 53.4263 127.81 53.1652 126.33 52.8328C124.635 52.4412 123.657 51.8833 123.657 50.4353C123.657 48.9873 124.671 48.2277 126.246 48.2277C127.344 48.2155 128.414 48.5662 129.29 49.2247L128.538 50.2573C127.822 49.7351 127.01 49.379 126.282 49.379C125.554 49.379 125.053 49.7944 125.053 50.3166C125.053 50.8389 125.447 51.2662 126.962 51.6222Z" fill="#2B71FF"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M140.293 48.3461L138.384 54.1117L136.428 48.3461H135.255L133.299 54.1117L131.39 48.3461H129.885L132.659 56.1683H133.868L135.824 50.5929L137.78 56.1683H138.977L141.751 48.3461H140.293Z" fill="#2B71FF"/>
-<path d="M152.846 49.5943H150.862V52.3404H152.846C153.91 52.3404 154.567 51.9362 154.567 50.9257C154.567 49.9153 153.898 49.5943 152.846 49.5943ZM152.798 53.5649H150.862V56.1683H149.464V48.3461H152.966C154.818 48.3461 155.99 49.2852 155.99 50.8663C155.99 52.6257 154.687 53.5649 152.798 53.5649Z" fill="#2B71FF"/>
-<path d="M119.544 49.5943H117.523V52.3285H119.556C120.554 52.3285 121.196 51.746 121.196 50.9495C121.196 50.153 120.578 49.5943 119.544 49.5943ZM120.994 56.1683L119.259 53.5411H117.523V56.1683H116.12V48.3461H119.663C121.482 48.3461 122.611 49.4279 122.611 50.9495C122.611 52.2334 121.826 53.0061 120.709 53.3152L122.647 56.1683H120.994Z" fill="#2B71FF"/>
-<path d="M107.696 49.9747L108.83 52.9467C107.968 52.9453 107.117 53.1319 106.335 53.4935L107.696 49.9747ZM103.661 56.1683H105.13C105.13 56.1683 106.192 53.9215 109.307 54.1711L110.143 56.1683H111.611L108.364 48.3461H106.992L103.661 56.1683Z" fill="#2B71FF"/>
-<path d="M145.963 53.4935C145.182 53.1326 144.332 52.946 143.472 52.9467L144.604 49.9747L145.963 53.4935ZM145.307 48.3461H143.937L140.683 56.1683H142.149L142.995 54.1711C146.094 53.9215 147.155 56.1683 147.155 56.1683H148.633L145.307 48.3461Z" fill="#2B71FF"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M97.3423 55.8126L93.2661 59.8423L91.246 57.8453C93.4244 57.7138 95.5283 57.0124 97.3423 55.8126Z" fill="#2B71FF"/>
-<path d="M101.156 51.7186L100.656 51.2182L93.2786 43.8423L85.9013 51.2182L85.2697 51.8497L85.4961 52.0523C85.7583 52.2668 86.0205 52.4693 86.2946 52.66C88.2969 54.0617 90.6742 54.8294 93.1182 54.8633C95.5622 54.8973 97.9601 54.1961 100 52.8506C100.286 52.66 100.573 52.4455 100.847 52.231C101.121 52.0165 101.145 51.9808 101.288 51.8497L101.156 51.7186ZM95.2213 53.5656C93.0204 52.2147 90.4861 51.505 87.9036 51.5161C91.2764 50.0504 95.4 49.8479 99.19 52.0285C97.9791 52.7929 96.6312 53.315 95.2213 53.5656Z" fill="#2B71FF"/>
-</g>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M113.726 8.37524H119.92V9.75559H117.596V16.5043H116.05V9.75559H113.726V8.37524Z" fill="#283B4C"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M125.527 15.3737C126.969 15.3737 128.109 14.157 128.109 12.6393C128.109 11.1217 126.969 9.8929 125.527 9.8929C124.073 9.8929 122.945 11.1217 122.945 12.6393C122.945 14.157 124.073 15.3737 125.527 15.3737ZM125.527 8.37524C127.806 8.37524 129.597 10.2786 129.597 12.6393C129.597 14.9762 127.806 16.8914 125.527 16.8914C123.247 16.8914 121.468 14.9762 121.468 12.6393C121.468 10.2786 123.247 8.37524 125.527 8.37524Z" fill="#283B4C"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M131.146 8.37524H137.339V9.75559H135.016V16.5043H133.47V9.75559H131.146V8.37524Z" fill="#283B4C"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M139.275 8.37524H140.783V15.1592H143.92V16.5043H139.275V8.37524Z" fill="#283B4C"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M146.243 8.37524H151.159V9.72029H147.708V11.8322H150.732V13.1654H147.708V15.1592H151.275V16.5043H146.243V8.37524Z" fill="#283B4C"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M106.296 6.82703H100.759H95.2208H93.9844V8.16054V12.1619L98.8921 16.9812V15.0779V10.6576V9.32381H96.5293V10.6576H97.5315V13.7473L95.345 11.6084V8.16054H100.078V18.1583L100.759 18.827L101.439 18.1583V8.16054H106.172V11.6084L103.986 13.7473V10.6576H104.988V9.32381H102.625V10.6576V15.0779V16.9812L107.533 12.1619V8.16054V6.82703H106.296Z" fill="#283B4C"/>
-<path d="M11.423 87.9368C12.1755 86.9336 13.1732 86.432 14.4163 86.432C15.6594 86.432 16.6517 86.9336 17.3932 87.9368C18.1457 88.9291 18.5219 90.4121 18.5219 92.3858C18.5219 94.3596 18.1457 95.8426 17.3932 96.8349C16.6517 97.8272 15.6594 98.3233 14.4163 98.3233C13.1732 98.3233 12.1755 97.8272 11.423 96.8349C10.6815 95.8426 10.3108 94.3596 10.3108 92.3858C10.3108 90.4121 10.6815 88.9291 11.423 87.9368ZM11.374 92.3858C11.374 93.9779 11.6193 95.1992 12.11 96.0498L16.0356 87.9205C15.5995 87.5606 15.0597 87.3807 14.4163 87.3807C13.424 87.3807 12.6662 87.8114 12.1427 88.6729C11.6302 89.5234 11.374 90.7611 11.374 92.3858ZM14.4163 97.3746C15.4086 97.3746 16.161 96.9494 16.6735 96.0988C17.197 95.2483 17.4587 94.0106 17.4587 92.3858C17.4587 90.7938 17.2133 89.5779 16.7226 88.7383L12.797 96.8512C13.2441 97.2002 13.7839 97.3746 14.4163 97.3746ZM26.4039 98.1107L24.2121 94.4959H23.6232L21.3497 98.1107H20.2047L22.8545 93.9234L20.4828 89.9323H21.595L23.6232 93.3509H24.2121L26.273 89.9323H27.3853L24.9808 93.8743L27.6143 98.1107H26.4039ZM39.2859 86.432L43.4732 98.1107H42.3119L40.987 94.3323H35.6057L34.2808 98.1107H33.1522L37.3231 86.432H39.2859ZM37.9774 87.577L35.9492 93.3509H40.6435L38.6153 87.577H37.9774ZM45.3519 86.432H50.1443C51.3765 86.432 52.3252 86.7319 52.9903 87.3316C53.6555 87.9314 53.9881 88.7656 53.9881 89.8342C53.9881 90.9028 53.6555 91.737 52.9903 92.3368C52.3252 92.9365 51.3765 93.2364 50.1443 93.2364H46.4314V98.1107H45.3519V86.432ZM46.4314 92.255H49.9644C51.9272 92.255 52.9086 91.4481 52.9086 89.8342C52.9086 88.2203 51.9272 87.4134 49.9644 87.4134H46.4314V92.255ZM56.5201 86.432H57.5997V98.1107H56.5201V86.432Z" fill="#24292E"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M45.8782 7.89497C44.6021 8.2165 44.004 9.21711 44.3666 10.4235C44.522 10.9404 45.0001 11.4619 45.676 11.8518C46.8942 12.5546 47.2529 12.8393 47.4613 13.2681C47.6351 13.6258 47.6502 13.7454 47.5625 14.0697C47.3568 14.8308 46.8197 15.2506 46.0513 15.2506C45.267 15.2506 44.7163 14.8107 44.5934 14.086C44.5441 13.7946 44.4832 13.7015 44.3425 13.7015C44.1743 13.7015 44.1567 13.7786 44.1567 14.5168V15.3318L44.6668 15.5051C45.4633 15.7757 46.5963 15.7433 47.2724 15.4308C48.5894 14.8219 49.0942 13.6133 48.503 12.484C48.282 12.0616 47.7272 11.5901 46.7766 11.0168C45.7777 10.4141 45.3325 9.9757 45.2672 9.53014C45.1669 8.84544 45.7827 8.27876 46.6244 8.28118C47.2837 8.28302 47.5666 8.43909 47.8003 8.92977C47.9466 9.23698 48.0513 9.33852 48.2246 9.34123C48.4161 9.34414 48.4448 9.30841 48.3958 9.12688C48.3637 9.00712 48.3367 8.7068 48.336 8.45952C48.335 8.14554 48.2896 7.99275 48.1854 7.95296C47.9015 7.84433 46.2442 7.8027 45.8782 7.89497ZM20.2549 8.18291C20.2549 8.32223 20.3197 8.37654 20.4859 8.37654C20.955 8.37654 20.9802 8.51191 21.0322 11.3198C21.0776 13.7729 21.0944 13.9688 21.2904 14.3309C21.5713 14.8495 21.9523 15.1946 22.5382 15.4614C22.9396 15.6441 23.193 15.6828 23.9956 15.6845C24.8664 15.6861 25.025 15.658 25.524 15.4139C25.8301 15.2641 26.2115 14.9833 26.3714 14.79C26.9259 14.1197 26.9846 13.7958 27.0475 11.0596C27.108 8.42477 27.1162 8.38196 27.5663 8.37799C27.6711 8.37712 27.7364 8.30219 27.7364 8.18291C27.7364 8.00002 27.6716 7.98927 26.5704 7.98927C25.482 7.98927 25.4045 8.00176 25.4045 8.17681C25.4045 8.31719 25.4832 8.37189 25.718 8.39465C26.234 8.44451 26.2759 8.64281 26.2775 11.0456C26.2791 13.4817 26.1959 13.9503 25.6743 14.4436C25.1892 14.9025 24.8032 15.057 24.1423 15.057C23.1931 15.057 22.5203 14.6151 22.2997 13.8468C22.2255 13.5884 22.1982 12.6381 22.2176 10.9906L22.2467 8.52177L22.5868 8.41247C22.7738 8.35234 22.9409 8.23257 22.9582 8.14621C22.986 8.00747 22.8312 7.98927 21.6222 7.98927C20.3197 7.98927 20.2549 7.99847 20.2549 8.18291ZM29.2909 8.18291C29.2909 8.33278 29.3557 8.37654 29.5778 8.37654C30.0726 8.37654 30.3513 8.5667 30.4631 8.9806C30.5268 9.21597 30.5541 10.34 30.5355 11.9465C30.5021 14.8149 30.4628 15.0026 29.8695 15.1208C29.6739 15.1598 29.5824 15.2359 29.5824 15.3596C29.5824 15.5284 29.6775 15.541 30.9427 15.541C32.1857 15.541 32.3029 15.5262 32.3029 15.3675C32.3029 15.2439 32.1785 15.1608 31.8708 15.0788C31.4886 14.9769 31.4268 14.9214 31.3369 14.5988C31.2215 14.1849 31.1942 9.82437 31.307 9.83696C31.347 9.84141 31.724 10.2444 32.1446 10.7325C32.5651 11.2206 33.7157 12.5021 34.7014 13.5805C36.2442 15.2682 36.5328 15.541 36.7752 15.541H37.0568L37.0847 12.1088C37.1044 9.67179 37.1451 8.64406 37.2249 8.56457C37.2868 8.50299 37.4835 8.42283 37.6621 8.38643C37.8517 8.3478 37.9869 8.26133 37.9869 8.17894C37.9869 8.06334 37.7447 8.03284 36.6509 8.01076C35.3646 7.98482 35.315 7.9911 35.315 8.18019C35.315 8.32387 35.3786 8.37654 35.5524 8.37654C35.6831 8.37654 35.9126 8.48159 36.0626 8.61007L36.3351 8.8436L36.3658 11.1757C36.3832 12.4925 36.3589 13.5079 36.3102 13.5079C36.2628 13.5079 35.9661 13.2139 35.651 12.8544C35.3358 12.4949 34.4385 11.5038 33.6568 10.6518C32.8751 9.79977 32.0212 8.85569 31.7592 8.55391L31.2828 8.00515L30.2868 7.99721C29.353 7.98976 29.2909 8.00138 29.2909 8.18291ZM39.4929 8.18291C39.4929 8.33056 39.5577 8.37654 39.7659 8.37654C39.916 8.37654 40.1236 8.43831 40.2274 8.51383C40.4053 8.64346 40.4177 8.81059 40.4463 11.491C40.4823 14.838 40.4528 15.0256 39.8779 15.1172C39.5884 15.1634 39.4929 15.2235 39.4929 15.3598C39.4929 15.5289 39.5909 15.541 40.9503 15.541C42.343 15.541 42.4078 15.5325 42.4078 15.3474C42.4078 15.2097 42.343 15.1538 42.1834 15.1538C42.0601 15.1538 41.8743 15.092 41.7705 15.0165C41.5918 14.8864 41.5805 14.719 41.5537 11.8254C41.5263 8.86123 41.5313 8.76586 41.7237 8.57406C41.8328 8.46543 42.0313 8.37654 42.1648 8.37654C42.343 8.37654 42.4078 8.32494 42.4078 8.18291C42.4078 7.99789 42.343 7.98927 40.9503 7.98927C39.5577 7.98927 39.4929 7.99789 39.4929 8.18291ZM49.6667 8.18291C49.6982 8.30287 49.7993 8.37654 49.9322 8.37654C50.0502 8.37654 50.2424 8.47791 50.3593 8.60194C50.478 8.7278 51.1423 10.3194 51.8646 12.2084L53.1576 15.5895L53.4966 15.6185L53.8355 15.6474L54.7438 13.2464C55.2434 11.9259 55.7046 10.7409 55.7687 10.6131C55.8786 10.3943 55.9031 10.4276 56.195 11.1941C56.3654 11.6414 56.8189 12.8242 57.2028 13.8225L57.9007 15.6379H58.2082C58.3775 15.6379 58.5381 15.58 58.5654 15.5092C58.5926 15.4385 59.0391 14.2948 59.5574 12.9678C60.0759 11.6408 60.6501 10.1706 60.8335 9.70082C61.2514 8.63108 61.335 8.49902 61.6681 8.38332C61.8162 8.33191 61.9373 8.22222 61.9373 8.13954C61.9373 8.01213 61.7603 7.98927 60.7714 7.98927C59.6702 7.98927 59.6054 8.00002 59.6054 8.18291C59.6054 8.3232 59.6702 8.37654 59.8403 8.37654C60.218 8.37654 60.3827 8.47878 60.3827 8.71338C60.3827 8.90914 58.5321 13.932 58.418 14.0456C58.348 14.1154 56.6769 9.44949 56.6165 9.01536C56.5577 8.59362 56.7379 8.37654 57.1464 8.37654C57.3059 8.37654 57.3707 8.32068 57.3707 8.18291C57.3707 7.9976 57.3059 7.98927 55.8647 7.98927C54.4235 7.98927 54.3587 7.9976 54.3587 8.18291C54.3587 8.29328 54.4235 8.37654 54.5093 8.37654C54.8126 8.37654 55.2147 8.66855 55.318 8.96403C55.4664 9.388 55.3529 9.81786 54.4793 12.1425L53.7373 14.1173L53.5774 13.74C53.4895 13.5325 53.0319 12.3081 52.5608 11.0193C51.635 8.48729 51.6213 8.37654 52.233 8.37654C52.4478 8.37654 52.5126 8.33172 52.5126 8.18291C52.5126 7.99789 52.4478 7.98927 51.0643 7.98927C49.6638 7.98927 49.6177 7.99566 49.6667 8.18291ZM69.3436 8.24975C69.3436 8.24975 69.3434 8.38192 69.3597 8.4187C69.376 8.45547 69.4805 8.46929 69.4805 8.46929C69.5454 8.48669 69.6071 8.50198 69.6653 8.5164C69.959 8.58912 70.1653 8.6402 70.2477 8.83298C70.3034 8.96321 70.3068 9.41603 70.3075 11.8436C70.3082 14.4033 70.3077 14.7171 70.2392 14.8862C70.1543 15.0959 69.9917 15.2074 69.6167 15.3127C69.6167 15.3127 69.4507 15.3588 69.4061 15.4001C69.3614 15.4414 69.353 15.5336 69.353 15.5336C69.353 15.5336 69.3494 15.6192 69.3877 15.6603C69.426 15.7013 69.528 15.6817 69.528 15.6817L70.5003 15.6843L72.113 15.6973C72.113 15.6973 72.1789 15.7061 72.2131 15.6624C72.2473 15.6189 72.2386 15.5334 72.2386 15.5334C72.2386 15.5334 72.2386 15.4419 72.1961 15.4007C72.1536 15.3596 71.9888 15.3209 71.9888 15.3209C71.6246 15.2313 71.4378 15.1145 71.3551 14.9248C71.2937 14.7839 71.2871 14.4033 71.2779 13.6107V12.4487C71.3186 12.4717 71.3558 12.4977 71.3951 12.5252C71.581 12.6553 71.8138 12.8182 72.6833 12.8433C73.7368 12.8738 74.3705 12.4051 74.7475 11.8606C75.1243 11.3162 75.2705 10.4608 74.994 9.54962C74.7175 8.63843 73.9061 8.08702 72.7655 8.03001C72.1709 8.0003 71.3058 8.02964 70.8223 8.05158L70.6869 8.05766C70.2477 8.07682 69.7213 8.11881 69.459 8.14376L69.4582 8.14384C69.3869 8.15062 69.3798 8.1513 69.3598 8.17664C69.3398 8.20208 69.3436 8.24975 69.3436 8.24975ZM73.6246 11.8191C74.0484 11.4207 74.0554 10.7976 74.0554 10.3995C74.0139 9.77531 73.7623 8.57487 72.3376 8.57487C72.0045 8.55776 71.323 8.61525 71.3041 9.07731C71.2835 9.15893 71.2743 9.72989 71.2796 10.6062L71.288 12.0047L71.433 12.0811L71.4408 12.0852C71.5195 12.1268 71.6216 12.1807 71.8001 12.2156C72.3665 12.3266 73.2009 12.2175 73.6246 11.8191ZM64.7105 8.1114C64.816 8.07142 64.8855 8.04471 64.8855 8.04471C64.8855 8.04471 65.0432 7.97989 65.0942 8.04471C65.1099 8.06467 65.1671 8.21226 65.3088 8.57807C65.3366 8.64983 65.3677 8.72999 65.4023 8.81924C65.6136 9.3634 65.917 10.1445 66.0767 10.555C66.2364 10.9655 66.5522 11.7778 66.7785 12.3602C67.0048 12.9425 67.2954 13.6896 67.4241 14.0203C67.5529 14.3511 67.7173 14.6949 67.7633 14.7577C67.786 14.7885 67.8091 14.8268 67.8344 14.8687C67.9338 15.0335 68.0671 15.2545 68.335 15.2977C68.335 15.2977 68.5447 15.3324 68.5758 15.3653C68.6068 15.3982 68.6139 15.4579 68.6139 15.4579V15.5701C68.6139 15.5701 68.6103 15.5988 68.5931 15.6232C68.5758 15.6475 68.5124 15.6407 68.5124 15.6407L66.8954 15.6408L65.7451 15.6491C65.7451 15.6491 65.7049 15.654 65.6813 15.6344C65.6575 15.6149 65.6452 15.5653 65.6452 15.5653V15.4808C65.6452 15.4808 65.6353 15.4173 65.6813 15.362C65.7272 15.3067 65.9119 15.3003 65.9119 15.3003C66.2602 15.2701 66.3984 14.9734 66.4695 14.8207C66.4748 14.8093 66.4798 14.7987 66.4844 14.7891C66.5602 14.6312 66.5329 14.5284 66.1903 13.6845C65.9642 13.1275 65.8871 12.9711 65.8322 12.9572C65.7936 12.9474 65.1919 12.9439 64.4948 12.9492L63.2276 12.9588L63.1518 13.1671C62.9327 13.7696 62.7381 14.3682 62.7088 14.53C62.649 14.8592 62.7323 15.2254 63.2165 15.289C63.2165 15.289 63.396 15.3138 63.444 15.3499C63.4918 15.386 63.5086 15.4786 63.5086 15.4786V15.5639C63.5086 15.5639 63.4995 15.6045 63.4665 15.6319C63.4336 15.6592 63.348 15.6493 63.348 15.6493H62.1386L60.9684 15.6626C60.9684 15.6626 60.9185 15.6614 60.8815 15.6419C60.8446 15.6223 60.8387 15.583 60.8387 15.583V15.5019C60.8387 15.5019 60.8324 15.4493 60.8975 15.3849C60.9627 15.3205 61.1386 15.3033 61.1386 15.3033C61.4585 15.2518 61.6396 14.9114 61.7439 14.7154C61.7516 14.701 61.7589 14.6873 61.7657 14.6746C61.8071 14.5983 61.9934 14.1531 62.1799 13.6853C62.3664 13.2175 62.5757 12.6942 62.645 12.5223C62.8807 11.938 63.1047 11.3783 63.4437 10.5262C63.6299 10.0584 63.9054 9.36795 64.0561 8.9918L64.33 8.3079L64.7105 8.1114ZM64.6107 9.7738C64.6693 9.92172 64.7592 10.1443 64.8103 10.2684C64.8614 10.3925 65.0044 10.744 65.128 11.0495C65.2517 11.355 65.4036 11.7268 65.4656 11.8757C65.5277 12.0246 65.5785 12.1535 65.5785 12.1621C65.5785 12.1707 65.1127 12.1778 64.5436 12.1778C63.8901 12.1778 63.5086 12.1652 63.5086 12.1437C63.5086 12.125 63.5305 12.0508 63.5573 11.9788C63.5998 11.8644 63.8122 11.2566 64.2812 9.90691C64.3536 9.69851 64.4208 9.51469 64.4304 9.49845C64.4634 9.44287 64.504 9.5048 64.6107 9.7738Z" fill="#FF006E"/>
-<path d="M7.49602 8.43229C7.83181 9.02614 7.08078 9.21023 6.72832 9.24411C6.19427 9.29627 6.0837 8.98705 6.18801 8.5986C6.22228 8.45953 6.29824 8.3344 6.40565 8.24022C6.51312 8.14599 6.64677 8.08725 6.78856 8.07197C6.92825 8.05912 7.06876 8.08609 7.19389 8.14981C7.31902 8.21359 7.42377 8.31148 7.49602 8.43229Z" fill="#FF006E"/>
-<path d="M9.59223 7.3335C9.2019 10.3326 14.4639 9.70851 14.3637 12.0955C14.8828 11.4176 15.106 9.57607 13.5779 8.62816C12.2165 7.78295 10.4424 8.24542 9.59223 7.3335Z" fill="#FF006E"/>
-<path d="M13.8459 8.38901L13.8428 8.3843C13.7953 8.29566 13.7411 8.21079 13.6809 8.1304C13.5035 7.88895 13.249 7.71593 12.9599 7.64025C12.7675 7.59036 12.5707 7.5593 12.3723 7.54746C12.1715 7.53284 11.9665 7.52448 11.7594 7.51357C11.3442 7.49059 10.9191 7.44785 10.5038 7.32898C10.4 7.29925 10.2963 7.26692 10.196 7.22783C10.1442 7.20906 10.0959 7.18874 10.0445 7.16682C9.99313 7.14495 9.9407 7.11987 9.88877 7.09329C9.69355 6.98588 9.51267 6.85395 9.35056 6.7007C9.03082 6.40194 8.77963 6.06301 8.52788 5.73452C8.29059 5.40478 8.03585 5.08801 7.76489 4.78557C7.49753 4.48929 7.1815 4.24133 6.83065 4.05248C6.46729 3.86865 6.07264 3.75543 5.66748 3.71878C6.08782 3.67294 6.51302 3.72504 6.91005 3.87103C7.31067 4.02728 7.67691 4.26093 7.98807 4.55877C8.1912 4.75014 8.38194 4.95443 8.559 5.17037C9.87736 4.90967 10.9466 5.14117 11.7682 5.59062L11.7869 5.6C12.0484 5.74249 12.2935 5.9135 12.5177 6.10994C12.5535 6.14122 12.5888 6.1725 12.6215 6.20431C12.7965 6.36585 12.9594 6.54014 13.1089 6.72572L13.1203 6.74084C13.6056 7.35816 13.8454 8.00001 13.8459 8.38901Z" fill="#FF006E"/>
-<path d="M5.73447 4.1051C6.07082 4.15412 6.41392 4.28864 6.63499 4.54517C6.85612 4.8017 6.93762 5.1354 7.00145 5.45293C7.05333 5.69904 7.09436 5.94983 7.19092 6.1829C7.23759 6.29656 7.30613 6.39615 7.36321 6.50356C7.41044 6.59269 7.49659 6.67303 7.52981 6.76842C7.53579 6.78216 7.538 6.79716 7.53623 6.812C7.53451 6.82684 7.52892 6.84095 7.51995 6.85291C7.40269 6.98324 7.08605 6.8383 6.96669 6.77989C6.76028 6.67713 6.57547 6.53556 6.42222 6.36278C5.94314 5.82834 5.69555 5.05927 5.71061 4.35903C5.71393 4.27401 5.7219 4.18924 5.73447 4.1051Z" fill="#FF006E"/>
-<path d="M11.3598 10.1313C10.6331 12.1685 13.929 13.5351 12.6942 15.6061C13.9612 15.0805 14.5627 13.4929 14.037 12.2331C13.5771 11.1273 12.2172 10.7242 11.3598 10.1313Z" fill="#FF006E"/>
-<path d="M7.00049 12.7956C7.19848 12.6457 7.41501 12.5221 7.64461 12.428C7.87687 12.3346 8.11787 12.2648 8.36397 12.2195C8.85241 12.1261 9.33564 12.1032 9.74152 11.9389C9.94205 11.8603 10.1266 11.7454 10.286 11.6C10.4403 11.456 10.5584 11.2773 10.6306 11.0786C10.7046 10.8689 10.7347 10.6462 10.7188 10.4242C10.7005 10.1859 10.6468 9.95165 10.5595 9.72925C10.7404 9.91827 10.8722 10.1492 10.9431 10.4016C11.0139 10.654 11.0218 10.92 10.9659 11.1761C10.9024 11.4473 10.7653 11.6954 10.5699 11.893C10.3765 12.0845 10.1431 12.2305 9.88686 12.3206C9.64225 12.4068 9.38713 12.4594 9.12852 12.477C8.87937 12.4979 8.63853 12.5036 8.4019 12.5177C7.92337 12.5379 7.45072 12.6316 7.00049 12.7956Z" fill="#FF006E"/>
-<path d="M11.6498 16.3763C11.5766 16.4347 11.5034 16.4968 11.4229 16.551C11.342 16.6046 11.2571 16.652 11.1691 16.6928C10.9859 16.7826 10.7844 16.8285 10.5805 16.8268C10.0283 16.8164 9.63794 16.4034 9.40962 15.9368C9.25387 15.6188 9.14646 15.2751 8.96165 14.9722C8.69745 14.5389 8.24539 14.1901 7.71599 14.2547C7.50006 14.2818 7.29764 14.3793 7.17772 14.5676C6.86214 15.0593 7.31531 15.748 7.89299 15.6505C7.9421 15.643 7.99016 15.6297 8.03622 15.6109C8.08212 15.5913 8.12492 15.5651 8.16339 15.5332C8.24406 15.4657 8.30491 15.3774 8.33935 15.2778C8.37727 15.1738 8.38574 15.0613 8.36371 14.9529C8.34001 14.8395 8.27341 14.7399 8.1779 14.675C8.28896 14.7272 8.37544 14.8207 8.41929 14.9357C8.46469 15.054 8.47638 15.1828 8.45301 15.3074C8.43031 15.4373 8.37334 15.5587 8.28797 15.6589C8.24262 15.7104 8.19019 15.7552 8.13222 15.7918C8.07481 15.8281 8.0133 15.8573 7.94902 15.8789C7.81863 15.9237 7.67989 15.9381 7.54314 15.9212C7.35113 15.8937 7.17008 15.8148 7.01893 15.6928C6.84038 15.5509 6.7075 15.3653 6.54606 15.2058C6.36103 15.0107 6.14272 14.8506 5.90144 14.7328C5.73506 14.6594 5.56094 14.6052 5.38239 14.5712C5.29258 14.5525 5.20178 14.5389 5.11094 14.5274C5.06941 14.5233 4.86595 14.4779 4.8374 14.5045C5.11813 14.2449 5.42419 14.0143 5.7509 13.8162C6.08636 13.6162 6.44657 13.4615 6.82222 13.3559C7.21166 13.2457 7.61904 13.2143 8.02066 13.2636C8.2274 13.2885 8.42987 13.3411 8.62271 13.42C8.82479 13.5011 9.01132 13.6168 9.17392 13.762C9.33493 13.9143 9.46498 14.0965 9.557 14.2986C9.64005 14.4876 9.70206 14.6854 9.74175 14.8883C9.86012 15.4946 9.8165 16.4347 10.607 16.5734C10.6482 16.5814 10.6898 16.5874 10.7316 16.5911L10.8608 16.5943C10.9497 16.5879 11.038 16.5752 11.125 16.5562C11.3053 16.5136 11.4811 16.4533 11.6498 16.3763Z" fill="#FF006E"/>
-<path d="M6.34694 7.15729C6.31815 7.26841 6.26788 7.37277 6.19901 7.4644C6.07083 7.63155 5.90114 7.76188 5.70697 7.84244C5.53235 7.91801 5.34743 7.96684 5.15836 7.98739C5.11733 7.99259 5.0748 7.99569 5.03379 7.99885C4.91405 8.00339 4.79891 8.04635 4.70523 8.12143C4.61156 8.1965 4.54426 8.2997 4.5132 8.41597C4.49898 8.47383 4.4884 8.53251 4.48154 8.5917C4.46285 8.74495 4.45974 8.90451 4.44313 9.09741C4.40246 9.42572 4.30793 9.74496 4.16337 10.0422C3.97548 10.4395 3.76475 10.7596 3.81354 11.2175C3.84572 11.5147 3.99728 11.7138 4.19866 11.9193C4.56199 12.2926 5.37533 12.4594 5.19368 13.3792C5.08414 13.9282 4.1779 14.5044 2.90418 14.7057C3.03083 14.6863 2.74173 14.1967 2.72356 14.1655C2.58706 13.9506 2.43758 13.7483 2.3291 13.5153C2.11629 13.0632 2.01767 12.5403 2.10487 12.0449C2.19674 11.5235 2.58083 11.1241 2.90004 10.7258C3.27997 10.2518 3.67859 9.63085 3.76682 9.01558C3.78758 8.86648 3.80212 8.67979 3.83534 8.49415C3.86701 8.28852 3.93114 8.08926 4.0253 7.90395C4.08958 7.78237 4.17421 7.67285 4.27548 7.58017C4.32828 7.53095 4.36311 7.46534 4.37441 7.39387C4.3857 7.32239 4.3728 7.2492 4.33776 7.18597L2.3073 3.51738L5.22374 7.13276C5.25696 7.17468 5.29893 7.20873 5.34671 7.23248C5.39449 7.25623 5.44692 7.26918 5.50018 7.27029C5.5535 7.27145 5.60637 7.26082 5.65515 7.23912C5.70387 7.21742 5.74728 7.1852 5.78227 7.14478C5.8192 7.10148 5.84013 7.04673 5.84157 6.98975C5.84295 6.93278 5.82479 6.87703 5.79002 6.83196C5.59956 6.58741 5.39814 6.33817 5.20298 6.09311L4.46908 5.18066L2.99606 3.35887L0.987427 0.827026L3.18499 3.19568L4.75299 4.93716L5.53517 5.80999C5.79467 6.10354 6.05422 6.38771 6.31372 6.69637L6.3563 6.74853L6.36566 6.82931C6.37828 6.93893 6.37197 7.04988 6.34694 7.15729Z" fill="#FF006E"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14.0672 54.0185L17.6024 60.4413H18.412L14.472 53.2899L18.0612 46.7591H17.2516L14.0672 52.5612L10.8828 46.7591H10.0732L13.6624 53.2899L9.72237 60.4413H10.532L14.0672 54.0185ZM10.9368 53.2899L6.16015 44.6002H12.448L14.0672 47.5417L15.6864 44.6002H22.0012L17.2246 53.2899L22.3521 62.6002H16.0642L14.0672 59.011L12.0972 62.6002H5.80933L10.9368 53.2899Z" fill="#FCA060"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M25.8058 57.5952V49.5933H28.0252C28.777 49.5933 29.4468 49.6773 30.0347 49.8452C30.6225 50.0132 31.1184 50.2651 31.5223 50.601C31.9261 50.937 32.2341 51.3548 32.446 51.8547C32.658 52.3546 32.7639 52.9324 32.7639 53.5882C32.7639 54.2441 32.658 54.8219 32.446 55.3218C32.2341 55.8217 31.9261 56.2395 31.5223 56.5754C31.1184 56.9114 30.6225 57.1653 30.0347 57.3372C29.4468 57.5092 28.777 57.5952 28.0252 57.5952H25.8058ZM28.3611 55.3158C28.9609 55.3158 29.4248 55.1738 29.7527 54.8899C30.0806 54.606 30.2446 54.1721 30.2446 53.5882C30.2446 53.0044 30.0806 52.5725 29.7527 52.2926C29.4248 52.0127 28.9609 51.8727 28.3611 51.8727V55.3158ZM33.4237 49.5933H38.1385V51.6928H35.9791V52.5805H38.1025V54.572H35.9791V55.4957H38.2225V57.5952H33.4237V49.5933ZM40.5618 53.4563L38.4384 49.5933H41.2337L41.9535 50.901L42.6733 49.5933H45.4805L43.3571 53.4563L45.6365 57.5952H42.8412L41.9535 55.9996L41.0777 57.5952H38.2824L40.5618 53.4563ZM45.7564 55.5917H48.3238V57.5952H45.7564V55.5917ZM51.4789 49.5933H53.3984L56.4336 57.5952H53.9143L53.6503 56.8754H51.227L50.9631 57.5952H48.4437L51.4789 49.5933ZM52.9785 55.1118L52.4387 53.7082L51.8988 55.1118H52.9785ZM61.7122 52.3166C61.5682 52.1886 61.3883 52.0906 61.1723 52.0227C60.9564 51.9547 60.7444 51.9207 60.5365 51.9207C60.3046 51.9207 60.0926 51.9627 59.9007 52.0467C59.7087 52.1306 59.5428 52.2466 59.4028 52.3946C59.2628 52.5425 59.1529 52.7205 59.0729 52.9284C58.9929 53.1364 58.9529 53.3603 58.9529 53.6002C58.9529 53.8402 58.9969 54.0641 59.0849 54.2721C59.1729 54.48 59.2928 54.658 59.4448 54.8059C59.5967 54.9539 59.7747 55.0699 59.9786 55.1538C60.1826 55.2378 60.4005 55.2798 60.6325 55.2798C60.9044 55.2798 61.1523 55.2218 61.3763 55.1058C61.6002 54.9899 61.7922 54.8319 61.9521 54.632H61.2323V52.9524H64.3155V55.6157C64.1315 55.9436 63.9116 56.2415 63.6557 56.5095C63.3997 56.7774 63.1138 57.0073 62.7979 57.1993C62.482 57.3912 62.1401 57.5392 61.7722 57.6432C61.4043 57.7471 61.0244 57.7991 60.6325 57.7991C60.0566 57.7991 59.5128 57.6912 59.0009 57.4752C58.489 57.2593 58.0432 56.9633 57.6633 56.5874C57.2834 56.2115 56.9834 55.7677 56.7635 55.2558C56.5436 54.7439 56.4336 54.1921 56.4336 53.6002C56.4336 53.0244 56.5376 52.4805 56.7455 51.9687C56.9535 51.4568 57.2394 51.0109 57.6033 50.631C57.9672 50.2511 58.3991 49.9512 58.8989 49.7313C59.3988 49.5113 59.9367 49.4014 60.5125 49.4014C60.9604 49.4014 61.3483 49.4454 61.6762 49.5333C62.0041 49.6213 62.28 49.7213 62.504 49.8333C62.7679 49.9612 62.9878 50.1012 63.1638 50.2531L61.7122 52.3166Z" fill="#FCA060"/>
-<g clip-path="url(#clip0)">
-<path d="M186.197 18.0078L180.517 7.32699L174.837 18.0078H186.197ZM176.548 12.1586L179.118 7.32699H173.979L176.548 12.1586ZM228.252 15.8855C228.525 15.8855 228.79 15.8754 229.05 15.8552C229.309 15.8353 229.544 15.8091 229.757 15.7772C229.969 15.745 230.156 15.715 230.318 15.6869C230.479 15.6588 230.602 15.6327 230.688 15.6086V11.6849C230.688 11.3562 230.645 11.0515 230.56 10.7705C230.475 10.4897 230.339 10.2469 230.153 10.0423C229.965 9.83743 229.72 9.67701 229.419 9.56079C229.118 9.44457 228.75 9.38619 228.317 9.38619C227.892 9.38619 227.528 9.41454 227.226 9.47049C226.925 9.52671 226.702 9.5867 226.557 9.65082L226.672 10.3369C226.783 10.2968 226.957 10.245 227.194 10.1806C227.433 10.1165 227.794 10.0843 228.278 10.0843C228.618 10.0843 228.892 10.1343 229.1 10.2347C229.309 10.3353 229.47 10.4677 229.585 10.6322C229.699 10.7964 229.774 10.9808 229.808 11.1857C229.837 11.3606 229.851 11.5409 229.856 11.7248H229.859V11.8091C229.859 11.8121 229.859 11.8146 229.859 11.8176V12.2027H229.859V12.8887H229.859V15.0791C229.689 15.1113 229.483 15.1375 229.241 15.1574C228.999 15.1776 228.716 15.1874 228.393 15.1874C228.13 15.1874 227.894 15.1653 227.685 15.1211C227.477 15.0772 227.299 15.0071 227.15 14.9108C227.001 14.8145 226.886 14.6862 226.806 14.5252C226.725 14.3648 226.685 14.1687 226.685 13.9357C226.685 13.6708 226.744 13.4586 226.863 13.2979C226.982 13.1374 227.135 13.0109 227.322 12.9186C227.509 12.8264 227.713 12.7664 227.934 12.738C228.155 12.7102 228.368 12.6963 228.572 12.6963C228.732 12.6963 228.875 12.7012 229.004 12.7102V12.044C228.993 12.0432 228.983 12.0413 228.973 12.0402C228.841 12.0279 228.716 12.0219 228.597 12.0219C228.198 12.0219 227.828 12.0582 227.488 12.1305C227.148 12.2027 226.855 12.3171 226.608 12.4734C226.362 12.63 226.17 12.8283 226.034 13.0693C225.899 13.3099 225.831 13.5985 225.831 13.9357C225.831 14.289 225.892 14.5878 226.015 14.8322C226.138 15.0772 226.309 15.2777 226.525 15.4343C226.742 15.5906 226.997 15.7049 227.29 15.7772C227.583 15.8492 227.904 15.8855 228.252 15.8855ZM207.67 15.8855C207.942 15.8855 208.207 15.8754 208.467 15.8552C208.726 15.8353 208.962 15.8091 209.174 15.7772C209.387 15.745 209.574 15.715 209.735 15.6869C209.897 15.6588 210.02 15.6327 210.105 15.6086V11.6849C210.105 11.3562 210.063 11.0515 209.978 10.7705C209.893 10.4897 209.756 10.2469 209.57 10.0423C209.383 9.83743 209.138 9.67701 208.837 9.56079C208.535 9.44457 208.168 9.38619 207.734 9.38619C207.309 9.38619 206.945 9.41454 206.644 9.47049C206.342 9.52671 206.119 9.5867 205.975 9.65082L206.089 10.3369C206.2 10.2968 206.374 10.245 206.612 10.1806C206.85 10.1165 207.211 10.0843 207.695 10.0843C208.036 10.0843 208.309 10.1343 208.518 10.2347C208.726 10.3353 208.887 10.4677 209.002 10.6322C209.117 10.7964 209.191 10.9808 209.226 11.1857C209.255 11.3606 209.268 11.5409 209.273 11.7248H209.277V15.0791C209.106 15.1113 208.901 15.1375 208.658 15.1574C208.416 15.1776 208.133 15.1874 207.81 15.1874C207.547 15.1874 207.311 15.1653 207.103 15.1211C206.894 15.0772 206.716 15.0071 206.567 14.9108C206.418 14.8145 206.304 14.6862 206.223 14.5252C206.142 14.3648 206.102 14.1687 206.102 13.9357C206.102 13.6708 206.162 13.4586 206.281 13.2979C206.399 13.1374 206.552 13.0109 206.74 12.9186C206.927 12.8264 207.131 12.7664 207.351 12.738C207.572 12.7102 207.785 12.6963 207.989 12.6963C208.149 12.6963 208.291 12.7012 208.421 12.7102V12.044C208.41 12.0432 208.401 12.0413 208.39 12.0402C208.258 12.0279 208.133 12.0219 208.014 12.0219C207.615 12.0219 207.245 12.0582 206.905 12.1305C206.565 12.2027 206.272 12.3171 206.026 12.4734C205.779 12.63 205.588 12.8283 205.452 13.0693C205.316 13.3099 205.248 13.5985 205.248 13.9357C205.248 14.289 205.31 14.5878 205.433 14.8322C205.556 15.0772 205.726 15.2777 205.942 15.4343C206.159 15.5906 206.415 15.7049 206.707 15.7772C207.001 15.8492 207.322 15.8855 207.67 15.8855ZM197.703 15.8855C197.975 15.8855 198.24 15.8754 198.5 15.8552C198.759 15.8353 198.995 15.8091 199.207 15.7772C199.419 15.745 199.607 15.715 199.768 15.6869C199.93 15.6588 200.053 15.6327 200.138 15.6086V11.6849C200.138 11.3562 200.095 11.0515 200.011 10.7705C199.926 10.4897 199.789 10.2469 199.603 10.0423C199.416 9.83743 199.171 9.67701 198.869 9.56079C198.568 9.44457 198.2 9.38619 197.767 9.38619C197.342 9.38619 196.979 9.41454 196.677 9.47049C196.375 9.52671 196.152 9.5867 196.008 9.65082L196.123 10.3369C196.233 10.2968 196.407 10.245 196.645 10.1806C196.883 10.1165 197.244 10.0843 197.729 10.0843C198.068 10.0843 198.343 10.1343 198.551 10.2347C198.759 10.3353 198.921 10.4677 199.035 10.6322C199.15 10.7964 199.224 10.9808 199.258 11.1857C199.287 11.3606 199.301 11.5409 199.306 11.7248H199.309L199.309 11.8133L199.309 11.8176V12.2027H199.309V12.8887H199.309V15.0791C199.139 15.1113 198.934 15.1375 198.691 15.1574C198.449 15.1776 198.166 15.1874 197.843 15.1874C197.58 15.1874 197.344 15.1653 197.136 15.1211C196.928 15.0772 196.749 15.0071 196.6 14.9108C196.452 14.8145 196.337 14.6862 196.256 14.5252C196.176 14.3648 196.135 14.1687 196.135 13.9357C196.135 13.6708 196.195 13.4586 196.314 13.2979C196.432 13.1374 196.585 13.0109 196.773 12.9186C196.959 12.8264 197.163 12.7664 197.384 12.738C197.605 12.7102 197.818 12.6963 198.022 12.6963C198.182 12.6963 198.324 12.7012 198.454 12.7102V12.044C198.443 12.0432 198.434 12.0413 198.423 12.0402C198.292 12.0279 198.166 12.0219 198.047 12.0219C197.648 12.0219 197.278 12.0582 196.938 12.1305C196.598 12.2027 196.305 12.3171 196.059 12.4734C195.812 12.63 195.621 12.8283 195.485 13.0693C195.349 13.3099 195.281 13.5985 195.281 13.9357C195.281 14.289 195.343 14.5878 195.466 14.8322C195.589 15.0772 195.759 15.2777 195.975 15.4343C196.193 15.5906 196.448 15.7049 196.741 15.7772C197.034 15.8492 197.355 15.8855 197.703 15.8855ZM232.91 17.9794V15.392C233.055 15.4965 233.286 15.6067 233.605 15.7232C233.924 15.8392 234.3 15.8976 234.733 15.8976C235.209 15.8976 235.631 15.8173 236.001 15.6569C236.371 15.4965 236.683 15.2739 236.939 14.9888C237.193 14.704 237.387 14.3632 237.518 13.9657C237.65 13.5685 237.716 13.1334 237.716 12.66C237.716 12.1545 237.637 11.7014 237.48 11.3C237.323 10.8989 237.102 10.558 236.818 10.2769C236.533 9.99625 236.192 9.78177 235.797 9.63308C235.402 9.48466 234.962 9.41021 234.478 9.41021C233.891 9.41021 233.407 9.44646 233.025 9.51882C232.642 9.59082 232.328 9.66723 232.081 9.74741V17.9794H232.91ZM202.337 15.7532V10.301C202.405 10.2691 202.547 10.229 202.764 10.1806C202.981 10.1327 203.267 10.1083 203.625 10.1083C203.964 10.1083 204.238 10.1266 204.447 10.1626C204.655 10.1989 204.793 10.2327 204.861 10.2647L205.027 9.59082C204.933 9.55073 204.765 9.51085 204.523 9.47049C204.281 9.4304 204.024 9.41021 203.752 9.41021C203.217 9.41021 202.762 9.45659 202.388 9.54878C202.014 9.64104 201.72 9.73162 201.508 9.81969V15.7532H202.337ZM189.554 17.9794V15.392C189.698 15.4965 189.93 15.6067 190.249 15.7232C190.567 15.8392 190.943 15.8976 191.377 15.8976C191.853 15.8976 192.276 15.8173 192.645 15.6569C193.015 15.4965 193.327 15.2739 193.582 14.9888C193.837 14.704 194.031 14.3632 194.162 13.9657C194.294 13.5685 194.36 13.1334 194.36 12.66C194.36 12.1545 194.281 11.7014 194.124 11.3C193.967 10.8989 193.746 10.558 193.461 10.2769C193.177 9.99625 192.837 9.78177 192.442 9.63308C192.046 9.48466 191.606 9.41021 191.122 9.41021C190.536 9.41021 190.051 9.44646 189.669 9.51882C189.286 9.59082 188.972 9.66723 188.725 9.74741V17.9794H189.554ZM213.273 15.8976C214.046 15.8976 214.656 15.7532 215.103 15.4643C215.548 15.1754 215.772 14.7503 215.772 14.1883C215.772 13.8918 215.716 13.6452 215.606 13.4482C215.495 13.2515 215.351 13.0834 215.173 12.9429C214.994 12.8024 214.787 12.6821 214.555 12.5823C214.32 12.4827 214.076 12.3848 213.821 12.289C213.575 12.193 213.356 12.1054 213.164 12.0251C212.973 11.9455 212.812 11.8593 212.68 11.7671C212.548 11.6743 212.449 11.5679 212.381 11.4471C212.312 11.3264 212.279 11.1819 212.279 11.0127C212.279 11.0033 212.28 9.89079 212.28 9.58036L212.281 9.5008L211.442 9.5008C211.441 9.53203 211.438 10.7853 211.437 11.0394L211.437 11.0834C211.437 11.348 211.488 11.5728 211.59 11.7572C211.693 11.942 211.828 12.1004 211.998 12.2328C212.168 12.3651 212.364 12.4813 212.584 12.5817C212.806 12.6821 213.039 12.7803 213.286 12.8766C213.592 12.9969 213.849 13.1012 214.057 13.1895C214.265 13.2777 214.433 13.3701 214.56 13.4665C214.688 13.5628 214.779 13.6708 214.835 13.7914C214.89 13.9117 214.917 14.0563 214.917 14.2247C214.917 14.5776 214.762 14.8284 214.452 14.9768C214.142 15.1255 213.749 15.1994 213.273 15.1994C213.009 15.1994 212.778 15.1836 212.578 15.1514C212.378 15.1195 212.207 15.081 212.062 15.037C211.917 14.9931 211.803 14.9525 211.718 14.9168C211.633 14.8805 211.578 14.8545 211.552 14.8385L211.335 15.5484C211.437 15.5969 211.641 15.667 211.947 15.7589C212.253 15.8515 212.695 15.8976 213.273 15.8976ZM218.996 15.7532C219.123 15.4738 219.257 15.1598 219.398 14.8106C219.538 14.4617 219.683 14.0887 219.832 13.6918C219.981 13.2946 220.126 12.8772 220.265 12.439C220.405 12.0015 220.538 11.5534 220.665 11.0951C220.792 11.5524 220.926 11.9992 221.066 12.4363C221.207 12.8731 221.351 13.29 221.501 13.6866C221.651 14.0836 221.797 14.4562 221.938 14.8049C222.079 15.1535 222.215 15.4698 222.343 15.7532H223.111C223.546 14.8472 223.946 13.8893 224.308 12.8791C224.671 11.8691 225.005 10.7528 225.312 9.53055H224.495C224.402 9.95665 224.285 10.4166 224.144 10.9107C224.004 11.4048 223.852 11.8947 223.69 12.3796C223.528 12.8646 223.366 13.3254 223.204 13.7622C223.042 14.1992 222.888 14.5697 222.743 14.8745C222.572 14.4731 222.404 14.0438 222.239 13.586C222.072 13.1284 221.915 12.665 221.767 12.196C221.619 11.7264 221.483 11.2653 221.36 10.8122C221.238 10.3588 221.139 9.93186 221.063 9.53055H220.349C220.248 9.9313 220.134 10.3582 220.007 10.8119C219.88 11.2656 219.745 11.725 219.601 12.1905C219.458 12.6562 219.304 13.1181 219.14 13.5761C218.977 14.0345 218.814 14.4631 218.651 14.8622C218.506 14.5574 218.351 14.1881 218.185 13.7543C218.018 13.3208 217.854 12.8613 217.692 12.376C217.53 11.8909 217.378 11.4018 217.238 10.9082C217.097 10.4153 216.979 9.95609 216.885 9.53055H216.006C216.311 10.7505 216.643 11.8664 217.005 12.8774C217.366 13.8882 217.764 14.8469 218.2 15.7532H218.996ZM234.656 15.1874C234.461 15.1874 234.274 15.1691 234.096 15.1334C233.917 15.0974 233.751 15.051 233.598 14.9948C233.445 14.9388 233.311 14.8789 233.197 14.8145C233.082 14.7503 232.986 14.6901 232.91 14.6339V10.289C233.037 10.2489 233.227 10.2107 233.477 10.1743C233.728 10.1384 234.057 10.1204 234.465 10.1204C235.179 10.1204 235.752 10.3392 236.186 10.7764C236.62 11.2138 236.836 11.8415 236.836 12.66C236.836 13.0049 236.798 13.3322 236.722 13.6408C236.645 13.9499 236.522 14.2184 236.352 14.4472C236.182 14.6758 235.959 14.8564 235.683 14.9888C235.406 15.1211 235.065 15.1874 234.656 15.1874ZM191.3 15.1874C191.105 15.1874 190.918 15.1691 190.74 15.1334C190.561 15.0974 190.395 15.051 190.242 14.9948C190.089 14.9388 189.955 14.8789 189.841 14.8145C189.726 14.7503 189.63 14.6901 189.554 14.6339V10.289C189.681 10.2489 189.871 10.2107 190.121 10.1743C190.372 10.1384 190.701 10.1204 191.109 10.1204C191.823 10.1204 192.397 10.3392 192.83 10.7764C193.264 11.2138 193.481 11.8415 193.481 12.66C193.481 13.0049 193.442 13.3322 193.366 13.6408C193.289 13.9499 193.166 14.2184 192.996 14.4472C192.826 14.6758 192.603 14.8564 192.327 14.9888C192.05 15.1211 191.708 15.1874 191.3 15.1874ZM183.877 16.594H177.157L180.517 10.2751L183.877 16.594Z" fill="#0058D4"/>
-</g>
-<path d="M98.2516 84.4479C98.2516 84.7879 98.1882 85.1079 98.0616 85.4079C97.9349 85.7012 97.7582 85.9579 97.5316 86.1779C97.3116 86.3912 97.0482 86.5612 96.7416 86.6879C96.4416 86.8079 96.1116 86.8679 95.7516 86.8679H94.9316V89.1179H93.3416V82.0179H95.7516C96.1116 82.0179 96.4416 82.0812 96.7416 82.2079C97.0482 82.3279 97.3116 82.4979 97.5316 82.7179C97.7582 82.9379 97.9349 83.1979 98.0616 83.4979C98.1882 83.7912 98.2516 84.1079 98.2516 84.4479ZM96.7116 84.4479C96.7116 84.1812 96.6182 83.9612 96.4316 83.7879C96.2516 83.6079 96.0182 83.5179 95.7316 83.5179H94.9316V85.3779H95.7316C96.0182 85.3779 96.2516 85.2879 96.4316 85.1079C96.6182 84.9279 96.7116 84.7079 96.7116 84.4479Z" fill="#24292E"/>
-<path d="M99.0319 84.1179H100.542V84.8679C100.622 84.6479 100.769 84.4579 100.982 84.2979C101.202 84.1379 101.452 84.0579 101.732 84.0579C101.805 84.0579 101.882 84.0612 101.962 84.0679C102.042 84.0745 102.129 84.0912 102.222 84.1179V85.6479C102.109 85.6079 101.999 85.5779 101.892 85.5579C101.785 85.5379 101.672 85.5279 101.552 85.5279C101.225 85.5279 100.975 85.6412 100.802 85.8679C100.629 86.0945 100.542 86.3879 100.542 86.7479V89.1179H99.0319V84.1179Z" fill="#24292E"/>
-<path d="M105.209 89.2279C104.849 89.2279 104.509 89.1612 104.189 89.0279C103.869 88.8945 103.589 88.7112 103.349 88.4779C103.116 88.2379 102.929 87.9612 102.789 87.6479C102.649 87.3279 102.579 86.9845 102.579 86.6179C102.579 86.2512 102.649 85.9112 102.789 85.5979C102.929 85.2779 103.116 85.0012 103.349 84.7679C103.589 84.5279 103.869 84.3412 104.189 84.2079C104.509 84.0745 104.849 84.0079 105.209 84.0079C105.569 84.0079 105.909 84.0745 106.229 84.2079C106.549 84.3412 106.826 84.5279 107.059 84.7679C107.299 85.0012 107.489 85.2779 107.629 85.5979C107.769 85.9112 107.839 86.2512 107.839 86.6179C107.839 86.9845 107.769 87.3279 107.629 87.6479C107.489 87.9612 107.299 88.2379 107.059 88.4779C106.826 88.7112 106.549 88.8945 106.229 89.0279C105.909 89.1612 105.569 89.2279 105.209 89.2279ZM105.209 87.8179C105.529 87.8179 105.793 87.7079 105.999 87.4879C106.213 87.2679 106.319 86.9779 106.319 86.6179C106.319 86.2579 106.213 85.9679 105.999 85.7479C105.793 85.5279 105.529 85.4179 105.209 85.4179C104.889 85.4179 104.623 85.5279 104.409 85.7479C104.203 85.9679 104.099 86.2579 104.099 86.6179C104.099 86.9779 104.203 87.2679 104.409 87.4879C104.623 87.7079 104.889 87.8179 105.209 87.8179Z" fill="#24292E"/>
-<path d="M109.231 85.4279H108.231V84.1179H109.231V83.5679C109.231 83.2479 109.284 82.9645 109.391 82.7179C109.497 82.4712 109.641 82.2612 109.821 82.0879C110.001 81.9145 110.211 81.7845 110.451 81.6979C110.697 81.6045 110.961 81.5579 111.241 81.5579C111.441 81.5579 111.611 81.5679 111.751 81.5879C111.897 81.6079 112.027 81.6345 112.141 81.6679V82.9979C112.061 82.9645 111.977 82.9412 111.891 82.9279C111.811 82.9145 111.714 82.9079 111.601 82.9079C111.294 82.9079 111.074 82.9745 110.941 83.1079C110.807 83.2412 110.741 83.4579 110.741 83.7579V84.1179H112.141V85.4279H110.741V89.1179H109.231V85.4279Z" fill="#24292E"/>
-<path d="M115.122 89.2279C114.756 89.2279 114.409 89.1679 114.082 89.0479C113.762 88.9279 113.482 88.7545 113.242 88.5279C113.002 88.3012 112.812 88.0279 112.672 87.7079C112.532 87.3812 112.462 87.0179 112.462 86.6179C112.462 86.2445 112.526 85.9012 112.652 85.5879C112.786 85.2679 112.969 84.9912 113.202 84.7579C113.442 84.5245 113.722 84.3412 114.042 84.2079C114.362 84.0745 114.712 84.0079 115.092 84.0079C115.419 84.0079 115.732 84.0612 116.032 84.1679C116.339 84.2679 116.606 84.4212 116.832 84.6279C117.059 84.8279 117.239 85.0812 117.372 85.3879C117.512 85.6879 117.582 86.0412 117.582 86.4479C117.582 86.5145 117.579 86.5912 117.572 86.6779C117.572 86.7579 117.566 86.8579 117.552 86.9779H113.922C113.969 87.2779 114.112 87.5012 114.352 87.6479C114.592 87.7879 114.856 87.8579 115.142 87.8579C115.436 87.8579 115.686 87.8012 115.892 87.6879C116.106 87.5679 116.259 87.4345 116.352 87.2879L117.472 88.1279C117.239 88.4612 116.919 88.7279 116.512 88.9279C116.112 89.1279 115.649 89.2279 115.122 89.2279ZM116.082 85.9879C116.016 85.7212 115.882 85.5312 115.682 85.4179C115.482 85.2979 115.272 85.2379 115.052 85.2379C114.939 85.2379 114.826 85.2512 114.712 85.2779C114.599 85.3045 114.492 85.3479 114.392 85.4079C114.292 85.4679 114.202 85.5445 114.122 85.6379C114.049 85.7312 113.996 85.8479 113.962 85.9879H116.082Z" fill="#24292E"/>
-<path d="M120.254 89.2279C119.814 89.2279 119.414 89.1545 119.054 89.0079C118.7 88.8612 118.407 88.6345 118.174 88.3279L119.174 87.4179C119.287 87.5845 119.437 87.7145 119.624 87.8079C119.81 87.8945 120.02 87.9379 120.254 87.9379C120.367 87.9379 120.47 87.9179 120.564 87.8779C120.664 87.8312 120.714 87.7579 120.714 87.6579C120.714 87.5712 120.677 87.5012 120.604 87.4479C120.53 87.3945 120.364 87.3345 120.104 87.2679L119.774 87.1879C119.294 87.0745 118.934 86.8745 118.694 86.5879C118.454 86.2945 118.34 85.9479 118.354 85.5479C118.36 85.3145 118.41 85.1045 118.504 84.9179C118.604 84.7245 118.737 84.5612 118.904 84.4279C119.077 84.2945 119.28 84.1912 119.514 84.1179C119.747 84.0445 120 84.0079 120.274 84.0079C121.047 84.0079 121.634 84.2845 122.034 84.8379L121.054 85.6479C120.94 85.5012 120.817 85.3979 120.684 85.3379C120.55 85.2779 120.41 85.2479 120.264 85.2479C120.17 85.2479 120.077 85.2679 119.984 85.3079C119.897 85.3479 119.854 85.4145 119.854 85.5079C119.854 85.5612 119.874 85.6212 119.914 85.6879C119.96 85.7545 120.08 85.8145 120.274 85.8679L120.734 85.9879C121.187 86.1079 121.544 86.2912 121.804 86.5379C122.07 86.7779 122.204 87.1212 122.204 87.5679C122.204 87.8079 122.154 88.0312 122.054 88.2379C121.954 88.4379 121.814 88.6112 121.634 88.7579C121.46 88.9045 121.254 89.0212 121.014 89.1079C120.78 89.1879 120.527 89.2279 120.254 89.2279Z" fill="#24292E"/>
-<path d="M124.863 89.2279C124.423 89.2279 124.023 89.1545 123.663 89.0079C123.31 88.8612 123.017 88.6345 122.783 88.3279L123.783 87.4179C123.897 87.5845 124.047 87.7145 124.233 87.8079C124.42 87.8945 124.63 87.9379 124.863 87.9379C124.977 87.9379 125.08 87.9179 125.173 87.8779C125.273 87.8312 125.323 87.7579 125.323 87.6579C125.323 87.5712 125.287 87.5012 125.213 87.4479C125.14 87.3945 124.973 87.3345 124.713 87.2679L124.383 87.1879C123.903 87.0745 123.543 86.8745 123.303 86.5879C123.063 86.2945 122.95 85.9479 122.963 85.5479C122.97 85.3145 123.02 85.1045 123.113 84.9179C123.213 84.7245 123.347 84.5612 123.513 84.4279C123.687 84.2945 123.89 84.1912 124.123 84.1179C124.357 84.0445 124.61 84.0079 124.883 84.0079C125.657 84.0079 126.243 84.2845 126.643 84.8379L125.663 85.6479C125.55 85.5012 125.427 85.3979 125.293 85.3379C125.16 85.2779 125.02 85.2479 124.873 85.2479C124.78 85.2479 124.687 85.2679 124.593 85.3079C124.507 85.3479 124.463 85.4145 124.463 85.5079C124.463 85.5612 124.483 85.6212 124.523 85.6879C124.57 85.7545 124.69 85.8145 124.883 85.8679L125.343 85.9879C125.797 86.1079 126.153 86.2912 126.413 86.5379C126.68 86.7779 126.813 87.1212 126.813 87.5679C126.813 87.8079 126.763 88.0312 126.663 88.2379C126.563 88.4379 126.423 88.6112 126.243 88.7579C126.07 88.9045 125.863 89.0212 125.623 89.1079C125.39 89.1879 125.137 89.2279 124.863 89.2279Z" fill="#24292E"/>
-<path d="M128.503 83.4379C128.376 83.4379 128.256 83.4145 128.143 83.3679C128.029 83.3145 127.929 83.2479 127.843 83.1679C127.756 83.0812 127.686 82.9812 127.633 82.8679C127.586 82.7545 127.563 82.6312 127.563 82.4979C127.563 82.3712 127.586 82.2512 127.633 82.1379C127.686 82.0179 127.756 81.9179 127.843 81.8379C127.929 81.7512 128.029 81.6845 128.143 81.6379C128.256 81.5845 128.376 81.5579 128.503 81.5579C128.636 81.5579 128.759 81.5845 128.873 81.6379C128.993 81.6845 129.093 81.7512 129.173 81.8379C129.259 81.9179 129.326 82.0179 129.373 82.1379C129.426 82.2512 129.453 82.3712 129.453 82.4979C129.453 82.6312 129.426 82.7545 129.373 82.8679C129.326 82.9812 129.259 83.0812 129.173 83.1679C129.093 83.2479 128.993 83.3145 128.873 83.3679C128.759 83.4145 128.636 83.4379 128.503 83.4379ZM127.753 84.1179H129.263V89.1179H127.753V84.1179Z" fill="#24292E"/>
-<path d="M132.826 89.2279C132.466 89.2279 132.126 89.1612 131.806 89.0279C131.486 88.8945 131.206 88.7112 130.966 88.4779C130.733 88.2379 130.546 87.9612 130.406 87.6479C130.266 87.3279 130.196 86.9845 130.196 86.6179C130.196 86.2512 130.266 85.9112 130.406 85.5979C130.546 85.2779 130.733 85.0012 130.966 84.7679C131.206 84.5279 131.486 84.3412 131.806 84.2079C132.126 84.0745 132.466 84.0079 132.826 84.0079C133.186 84.0079 133.526 84.0745 133.846 84.2079C134.166 84.3412 134.443 84.5279 134.676 84.7679C134.916 85.0012 135.106 85.2779 135.246 85.5979C135.386 85.9112 135.456 86.2512 135.456 86.6179C135.456 86.9845 135.386 87.3279 135.246 87.6479C135.106 87.9612 134.916 88.2379 134.676 88.4779C134.443 88.7112 134.166 88.8945 133.846 89.0279C133.526 89.1612 133.186 89.2279 132.826 89.2279ZM132.826 87.8179C133.146 87.8179 133.41 87.7079 133.616 87.4879C133.83 87.2679 133.936 86.9779 133.936 86.6179C133.936 86.2579 133.83 85.9679 133.616 85.7479C133.41 85.5279 133.146 85.4179 132.826 85.4179C132.506 85.4179 132.24 85.5279 132.026 85.7479C131.82 85.9679 131.716 86.2579 131.716 86.6179C131.716 86.9779 131.82 87.2679 132.026 87.4879C132.24 87.7079 132.506 87.8179 132.826 87.8179Z" fill="#24292E"/>
-<path d="M136.385 84.1179H137.895V84.6279C138.015 84.4545 138.195 84.3079 138.435 84.1879C138.675 84.0679 138.959 84.0079 139.285 84.0079C139.592 84.0079 139.865 84.0645 140.105 84.1779C140.345 84.2845 140.549 84.4345 140.715 84.6279C140.882 84.8212 141.009 85.0545 141.095 85.3279C141.182 85.6012 141.225 85.9012 141.225 86.2279V89.1179H139.715V86.4879C139.715 86.1412 139.649 85.8712 139.515 85.6779C139.382 85.4779 139.179 85.3779 138.905 85.3779C138.619 85.3779 138.379 85.4845 138.185 85.6979C137.992 85.9045 137.895 86.2345 137.895 86.6879V89.1179H136.385V84.1179Z" fill="#24292E"/>
-<path d="M144.421 89.2279C144.094 89.2279 143.788 89.1579 143.501 89.0179C143.221 88.8779 142.978 88.6912 142.771 88.4579C142.564 88.2179 142.401 87.9412 142.281 87.6279C142.161 87.3079 142.101 86.9712 142.101 86.6179C142.101 86.2645 142.161 85.9312 142.281 85.6179C142.401 85.2979 142.564 85.0212 142.771 84.7879C142.978 84.5479 143.221 84.3579 143.501 84.2179C143.788 84.0779 144.094 84.0079 144.421 84.0079C144.588 84.0079 144.741 84.0279 144.881 84.0679C145.028 84.1012 145.158 84.1479 145.271 84.2079C145.391 84.2679 145.491 84.3345 145.571 84.4079C145.658 84.4812 145.728 84.5512 145.781 84.6179V84.1179H147.291V89.1179H145.781V88.6179C145.728 88.6845 145.658 88.7545 145.571 88.8279C145.491 88.9012 145.391 88.9679 145.271 89.0279C145.158 89.0879 145.028 89.1345 144.881 89.1679C144.741 89.2079 144.588 89.2279 144.421 89.2279ZM144.761 87.8579C145.101 87.8579 145.374 87.7412 145.581 87.5079C145.794 87.2745 145.901 86.9779 145.901 86.6179C145.901 86.2579 145.794 85.9612 145.581 85.7279C145.374 85.4945 145.101 85.3779 144.761 85.3779C144.421 85.3779 144.144 85.4945 143.931 85.7279C143.724 85.9612 143.621 86.2579 143.621 86.6179C143.621 86.9779 143.724 87.2745 143.931 87.5079C144.144 87.7412 144.421 87.8579 144.761 87.8579Z" fill="#24292E"/>
-<path d="M148.534 81.6179H150.044V89.1179H148.534V81.6179Z" fill="#24292E"/>
-<path d="M88.3609 94.0179L90.5709 97.0779L92.8009 94.0179H94.2509V101.118H92.6509V96.7479L90.5809 99.6079L88.5009 96.7379V101.118H86.9109V94.0179H88.3609Z" fill="#24292E"/>
-<path d="M97.5118 101.228C97.1852 101.228 96.8785 101.158 96.5918 101.018C96.3118 100.878 96.0685 100.691 95.8618 100.458C95.6552 100.218 95.4918 99.9412 95.3718 99.6279C95.2518 99.3079 95.1918 98.9712 95.1918 98.6179C95.1918 98.2645 95.2518 97.9312 95.3718 97.6179C95.4918 97.2979 95.6552 97.0212 95.8618 96.7879C96.0685 96.5479 96.3118 96.3579 96.5918 96.2179C96.8785 96.0779 97.1852 96.0079 97.5118 96.0079C97.6785 96.0079 97.8318 96.0279 97.9718 96.0679C98.1185 96.1012 98.2485 96.1479 98.3618 96.2079C98.4818 96.2679 98.5818 96.3345 98.6618 96.4079C98.7485 96.4812 98.8185 96.5512 98.8718 96.6179V96.1179H100.382V101.118H98.8718V100.618C98.8185 100.685 98.7485 100.755 98.6618 100.828C98.5818 100.901 98.4818 100.968 98.3618 101.028C98.2485 101.088 98.1185 101.135 97.9718 101.168C97.8318 101.208 97.6785 101.228 97.5118 101.228ZM97.8518 99.8579C98.1918 99.8579 98.4652 99.7412 98.6718 99.5079C98.8852 99.2745 98.9918 98.9779 98.9918 98.6179C98.9918 98.2579 98.8852 97.9612 98.6718 97.7279C98.4652 97.4945 98.1918 97.3779 97.8518 97.3779C97.5118 97.3779 97.2352 97.4945 97.0218 97.7279C96.8152 97.9612 96.7118 98.2579 96.7118 98.6179C96.7118 98.9779 96.8152 99.2745 97.0218 99.5079C97.2352 99.7412 97.5118 99.8579 97.8518 99.8579Z" fill="#24292E"/>
-<path d="M101.625 96.1179H103.135V96.8679C103.215 96.6479 103.361 96.4579 103.575 96.2979C103.795 96.1379 104.045 96.0579 104.325 96.0579C104.398 96.0579 104.475 96.0612 104.555 96.0679C104.635 96.0745 104.721 96.0912 104.815 96.1179V97.6479C104.701 97.6079 104.591 97.5779 104.485 97.5579C104.378 97.5379 104.265 97.5279 104.145 97.5279C103.818 97.5279 103.568 97.6412 103.395 97.8679C103.221 98.0945 103.135 98.3879 103.135 98.7479V101.118H101.625V96.1179Z" fill="#24292E"/>
-<path d="M107.168 98.8879V101.118H105.658V93.6179H107.168V97.9079L108.628 96.1179H110.418L108.578 98.3779L110.858 101.118H109.028L107.168 98.8879Z" fill="#24292E"/>
-<path d="M113.311 101.228C112.944 101.228 112.597 101.168 112.271 101.048C111.951 100.928 111.671 100.755 111.431 100.528C111.191 100.301 111.001 100.028 110.861 99.7079C110.721 99.3812 110.651 99.0179 110.651 98.6179C110.651 98.2445 110.714 97.9012 110.841 97.5879C110.974 97.2679 111.157 96.9912 111.391 96.7579C111.631 96.5245 111.911 96.3412 112.231 96.2079C112.551 96.0745 112.901 96.0079 113.281 96.0079C113.607 96.0079 113.921 96.0612 114.221 96.1679C114.527 96.2679 114.794 96.4212 115.021 96.6279C115.247 96.8279 115.427 97.0812 115.561 97.3879C115.701 97.6879 115.771 98.0412 115.771 98.4479C115.771 98.5145 115.767 98.5912 115.761 98.6779C115.761 98.7579 115.754 98.8579 115.741 98.9779H112.111C112.157 99.2779 112.301 99.5012 112.541 99.6479C112.781 99.7879 113.044 99.8579 113.331 99.8579C113.624 99.8579 113.874 99.8012 114.081 99.6879C114.294 99.5679 114.447 99.4345 114.541 99.2879L115.661 100.128C115.427 100.461 115.107 100.728 114.701 100.928C114.301 101.128 113.837 101.228 113.311 101.228ZM114.271 97.9879C114.204 97.7212 114.071 97.5312 113.871 97.4179C113.671 97.2979 113.461 97.2379 113.241 97.2379C113.127 97.2379 113.014 97.2512 112.901 97.2779C112.787 97.3045 112.681 97.3479 112.581 97.4079C112.481 97.4679 112.391 97.5445 112.311 97.6379C112.237 97.7312 112.184 97.8479 112.151 97.9879H114.271Z" fill="#24292E"/>
-<path d="M119.175 101.178C118.895 101.178 118.631 101.141 118.385 101.068C118.145 100.988 117.935 100.871 117.755 100.718C117.575 100.558 117.431 100.361 117.325 100.128C117.218 99.8879 117.165 99.6079 117.165 99.2879V97.4279H116.165V96.1179H117.165V94.7279H118.675V96.1179H120.075V97.4279H118.675V98.9779C118.675 99.2779 118.741 99.4945 118.875 99.6279C119.008 99.7612 119.225 99.8279 119.525 99.8279C119.638 99.8279 119.738 99.8212 119.825 99.8079C119.911 99.7945 119.995 99.7712 120.075 99.7379V101.078C119.961 101.111 119.831 101.135 119.685 101.148C119.545 101.168 119.375 101.178 119.175 101.178Z" fill="#24292E"/>
-<path d="M124.855 94.0179L127.065 97.0779L129.295 94.0179H130.745V101.118H129.145V96.7479L127.075 99.6079L124.995 96.7379V101.118H123.405V94.0179H124.855Z" fill="#24292E"/>
-<path d="M134.006 101.228C133.679 101.228 133.373 101.158 133.086 101.018C132.806 100.878 132.563 100.691 132.356 100.458C132.149 100.218 131.986 99.9412 131.866 99.6279C131.746 99.3079 131.686 98.9712 131.686 98.6179C131.686 98.2645 131.746 97.9312 131.866 97.6179C131.986 97.2979 132.149 97.0212 132.356 96.7879C132.563 96.5479 132.806 96.3579 133.086 96.2179C133.373 96.0779 133.679 96.0079 134.006 96.0079C134.173 96.0079 134.326 96.0279 134.466 96.0679C134.613 96.1012 134.743 96.1479 134.856 96.2079C134.976 96.2679 135.076 96.3345 135.156 96.4079C135.243 96.4812 135.313 96.5512 135.366 96.6179V96.1179H136.876V101.118H135.366V100.618C135.313 100.685 135.243 100.755 135.156 100.828C135.076 100.901 134.976 100.968 134.856 101.028C134.743 101.088 134.613 101.135 134.466 101.168C134.326 101.208 134.173 101.228 134.006 101.228ZM134.346 99.8579C134.686 99.8579 134.959 99.7412 135.166 99.5079C135.379 99.2745 135.486 98.9779 135.486 98.6179C135.486 98.2579 135.379 97.9612 135.166 97.7279C134.959 97.4945 134.686 97.3779 134.346 97.3779C134.006 97.3779 133.729 97.4945 133.516 97.7279C133.309 97.9612 133.206 98.2579 133.206 98.6179C133.206 98.9779 133.309 99.2745 133.516 99.5079C133.729 99.7412 134.006 99.8579 134.346 99.8579Z" fill="#24292E"/>
-<path d="M139.629 98.8879V101.118H138.119V93.6179H139.629V97.9079L141.089 96.1179H142.879L141.039 98.3779L143.319 101.118H141.489L139.629 98.8879Z" fill="#24292E"/>
-<path d="M145.772 101.228C145.405 101.228 145.058 101.168 144.732 101.048C144.412 100.928 144.132 100.755 143.892 100.528C143.652 100.301 143.462 100.028 143.322 99.7079C143.182 99.3812 143.112 99.0179 143.112 98.6179C143.112 98.2445 143.175 97.9012 143.302 97.5879C143.435 97.2679 143.618 96.9912 143.852 96.7579C144.092 96.5245 144.372 96.3412 144.692 96.2079C145.012 96.0745 145.362 96.0079 145.742 96.0079C146.068 96.0079 146.382 96.0612 146.682 96.1679C146.988 96.2679 147.255 96.4212 147.482 96.6279C147.708 96.8279 147.888 97.0812 148.022 97.3879C148.162 97.6879 148.232 98.0412 148.232 98.4479C148.232 98.5145 148.228 98.5912 148.222 98.6779C148.222 98.7579 148.215 98.8579 148.202 98.9779H144.572C144.618 99.2779 144.762 99.5012 145.002 99.6479C145.242 99.7879 145.505 99.8579 145.792 99.8579C146.085 99.8579 146.335 99.8012 146.542 99.6879C146.755 99.5679 146.908 99.4345 147.002 99.2879L148.122 100.128C147.888 100.461 147.568 100.728 147.162 100.928C146.762 101.128 146.298 101.228 145.772 101.228ZM146.732 97.9879C146.665 97.7212 146.532 97.5312 146.332 97.4179C146.132 97.2979 145.922 97.2379 145.702 97.2379C145.588 97.2379 145.475 97.2512 145.362 97.2779C145.248 97.3045 145.142 97.3479 145.042 97.4079C144.942 97.4679 144.852 97.5445 144.772 97.6379C144.698 97.7312 144.645 97.8479 144.612 97.9879H146.732Z" fill="#24292E"/>
-<path d="M149.183 96.1179H150.693V96.8679C150.773 96.6479 150.92 96.4579 151.133 96.2979C151.353 96.1379 151.603 96.0579 151.883 96.0579C151.957 96.0579 152.033 96.0612 152.113 96.0679C152.193 96.0745 152.28 96.0912 152.373 96.1179V97.6479C152.26 97.6079 152.15 97.5779 152.043 97.5579C151.937 97.5379 151.823 97.5279 151.703 97.5279C151.377 97.5279 151.127 97.6412 150.953 97.8679C150.78 98.0945 150.693 98.3879 150.693 98.7479V101.118H149.183V96.1179Z" fill="#24292E"/>
-<path d="M154.829 101.228C154.389 101.228 153.989 101.155 153.629 101.008C153.276 100.861 152.982 100.635 152.749 100.328L153.749 99.4179C153.862 99.5845 154.012 99.7145 154.199 99.8079C154.386 99.8945 154.596 99.9379 154.829 99.9379C154.942 99.9379 155.046 99.9179 155.139 99.8779C155.239 99.8312 155.289 99.7579 155.289 99.6579C155.289 99.5712 155.252 99.5012 155.179 99.4479C155.106 99.3945 154.939 99.3345 154.679 99.2679L154.349 99.1879C153.869 99.0745 153.509 98.8745 153.269 98.5879C153.029 98.2945 152.916 97.9479 152.929 97.5479C152.936 97.3145 152.986 97.1045 153.079 96.9179C153.179 96.7245 153.312 96.5612 153.479 96.4279C153.652 96.2945 153.856 96.1912 154.089 96.1179C154.322 96.0445 154.576 96.0079 154.849 96.0079C155.622 96.0079 156.209 96.2845 156.609 96.8379L155.629 97.6479C155.516 97.5012 155.392 97.3979 155.259 97.3379C155.126 97.2779 154.986 97.2479 154.839 97.2479C154.746 97.2479 154.652 97.2679 154.559 97.3079C154.472 97.3479 154.429 97.4145 154.429 97.5079C154.429 97.5612 154.449 97.6212 154.489 97.6879C154.536 97.7545 154.656 97.8145 154.849 97.8679L155.309 97.9879C155.762 98.1079 156.119 98.2912 156.379 98.5379C156.646 98.7779 156.779 99.1212 156.779 99.5679C156.779 99.8079 156.729 100.031 156.629 100.238C156.529 100.438 156.389 100.611 156.209 100.758C156.036 100.905 155.829 101.021 155.589 101.108C155.356 101.188 155.102 101.228 154.829 101.228Z" fill="#24292E"/>
-<path d="M176.969 83.2776L179.599 86.8176L182.249 83.2776H183.089V90.3776H182.169V84.8576L179.609 88.2976L177.049 84.8576V90.3776H176.119V83.2776H176.969Z" fill="#24292E"/>
-<path d="M186.978 90.4776C186.598 90.4776 186.248 90.411 185.928 90.2776C185.608 90.1376 185.331 89.951 185.098 89.7176C184.865 89.4843 184.681 89.211 184.548 88.8976C184.421 88.5776 184.358 88.2376 184.358 87.8776C184.358 87.5176 184.421 87.181 184.548 86.8676C184.681 86.5476 184.865 86.271 185.098 86.0376C185.331 85.8043 185.608 85.621 185.928 85.4876C186.248 85.3476 186.598 85.2776 186.978 85.2776C187.351 85.2776 187.698 85.3476 188.018 85.4876C188.338 85.621 188.615 85.8043 188.848 86.0376C189.081 86.271 189.261 86.5476 189.388 86.8676C189.521 87.181 189.588 87.5176 189.588 87.8776C189.588 88.2376 189.521 88.5776 189.388 88.8976C189.261 89.211 189.081 89.4843 188.848 89.7176C188.615 89.951 188.338 90.1376 188.018 90.2776C187.698 90.411 187.351 90.4776 186.978 90.4776ZM186.978 89.6776C187.238 89.6776 187.475 89.631 187.688 89.5376C187.901 89.4443 188.081 89.3176 188.228 89.1576C188.381 88.991 188.498 88.801 188.578 88.5876C188.665 88.3676 188.708 88.131 188.708 87.8776C188.708 87.631 188.665 87.3976 188.578 87.1776C188.498 86.9576 188.381 86.7676 188.228 86.6076C188.081 86.441 187.901 86.311 187.688 86.2176C187.475 86.1243 187.238 86.0776 186.978 86.0776C186.718 86.0776 186.481 86.1243 186.268 86.2176C186.055 86.311 185.871 86.441 185.718 86.6076C185.565 86.7676 185.445 86.9576 185.358 87.1776C185.278 87.3976 185.238 87.631 185.238 87.8776C185.238 88.131 185.278 88.3676 185.358 88.5876C185.445 88.801 185.565 88.991 185.718 89.1576C185.871 89.3176 186.055 89.4443 186.268 89.5376C186.481 89.631 186.718 89.6776 186.978 89.6776Z" fill="#24292E"/>
-<path d="M190.823 85.3776H191.683V86.3476C191.729 86.1876 191.803 86.0443 191.903 85.9176C192.003 85.791 192.116 85.6843 192.243 85.5976C192.369 85.511 192.503 85.4443 192.643 85.3976C192.789 85.351 192.936 85.3276 193.083 85.3276C193.216 85.3276 193.346 85.341 193.473 85.3676V86.2576C193.393 86.2243 193.316 86.2043 193.243 86.1976C193.169 86.1843 193.089 86.1776 193.003 86.1776C192.843 86.1776 192.683 86.2143 192.523 86.2876C192.369 86.3543 192.229 86.4576 192.103 86.5976C191.983 86.7376 191.883 86.9176 191.803 87.1376C191.723 87.351 191.683 87.6043 191.683 87.8976V90.3776H190.823V85.3776Z" fill="#24292E"/>
-<path d="M196.509 90.4776C196.122 90.4776 195.769 90.411 195.449 90.2776C195.129 90.1443 194.856 89.961 194.629 89.7276C194.402 89.4943 194.226 89.221 194.099 88.9076C193.979 88.5876 193.919 88.2443 193.919 87.8776C193.919 87.511 193.982 87.171 194.109 86.8576C194.236 86.5376 194.412 86.261 194.639 86.0276C194.872 85.7943 195.149 85.611 195.469 85.4776C195.789 85.3443 196.139 85.2776 196.519 85.2776C196.846 85.2776 197.152 85.3343 197.439 85.4476C197.726 85.5543 197.976 85.7176 198.189 85.9376C198.409 86.151 198.582 86.4143 198.709 86.7276C198.836 87.0343 198.899 87.3876 198.899 87.7876C198.899 87.8343 198.899 87.8776 198.899 87.9176C198.899 87.951 198.896 87.9943 198.889 88.0476H194.789C194.796 88.281 194.842 88.4976 194.929 88.6976C195.022 88.8976 195.142 89.071 195.289 89.2176C195.442 89.3643 195.622 89.481 195.829 89.5676C196.042 89.6476 196.272 89.6876 196.519 89.6876C196.906 89.6876 197.222 89.611 197.469 89.4576C197.722 89.2976 197.926 89.0843 198.079 88.8176L198.759 89.2876C198.532 89.6543 198.229 89.9443 197.849 90.1576C197.476 90.371 197.029 90.4776 196.509 90.4776ZM198.019 87.3476C197.986 87.141 197.922 86.9576 197.829 86.7976C197.742 86.6376 197.629 86.501 197.489 86.3876C197.356 86.2743 197.202 86.1876 197.029 86.1276C196.856 86.0676 196.676 86.0376 196.489 86.0376C196.302 86.0376 196.119 86.0676 195.939 86.1276C195.759 86.1876 195.596 86.2743 195.449 86.3876C195.302 86.4943 195.176 86.631 195.069 86.7976C194.962 86.9576 194.889 87.141 194.849 87.3476H198.019Z" fill="#24292E"/>
-<path d="M204.762 90.4776C204.382 90.4776 204.032 90.411 203.712 90.2776C203.392 90.1443 203.115 89.961 202.882 89.7276C202.648 89.4876 202.465 89.211 202.332 88.8976C202.205 88.5776 202.141 88.2376 202.141 87.8776C202.141 87.5176 202.205 87.181 202.332 86.8676C202.465 86.5476 202.648 86.271 202.882 86.0376C203.115 85.7976 203.392 85.611 203.712 85.4776C204.032 85.3443 204.382 85.2776 204.762 85.2776C205.282 85.2776 205.742 85.401 206.142 85.6476C206.542 85.8943 206.851 86.2176 207.071 86.6176L206.321 87.0376C206.181 86.751 205.975 86.521 205.701 86.3476C205.435 86.1676 205.122 86.0776 204.762 86.0776C204.502 86.0776 204.265 86.1243 204.052 86.2176C203.838 86.311 203.652 86.441 203.492 86.6076C203.338 86.7676 203.218 86.9576 203.132 87.1776C203.052 87.3976 203.012 87.631 203.012 87.8776C203.012 88.131 203.052 88.3676 203.132 88.5876C203.218 88.801 203.338 88.991 203.492 89.1576C203.652 89.3176 203.838 89.4443 204.052 89.5376C204.265 89.631 204.502 89.6776 204.762 89.6776C205.122 89.6776 205.435 89.591 205.701 89.4176C205.975 89.2376 206.181 89.0043 206.321 88.7176L207.071 89.1376C206.851 89.5376 206.542 89.861 206.142 90.1076C205.742 90.3543 205.282 90.4776 204.762 90.4776Z" fill="#24292E"/>
-<path d="M210.406 90.4776C210.026 90.4776 209.676 90.411 209.356 90.2776C209.036 90.1376 208.759 89.951 208.526 89.7176C208.292 89.4843 208.109 89.211 207.976 88.8976C207.849 88.5776 207.786 88.2376 207.786 87.8776C207.786 87.5176 207.849 87.181 207.976 86.8676C208.109 86.5476 208.292 86.271 208.526 86.0376C208.759 85.8043 209.036 85.621 209.356 85.4876C209.676 85.3476 210.026 85.2776 210.406 85.2776C210.779 85.2776 211.126 85.3476 211.446 85.4876C211.766 85.621 212.042 85.8043 212.276 86.0376C212.509 86.271 212.689 86.5476 212.816 86.8676C212.949 87.181 213.016 87.5176 213.016 87.8776C213.016 88.2376 212.949 88.5776 212.816 88.8976C212.689 89.211 212.509 89.4843 212.276 89.7176C212.042 89.951 211.766 90.1376 211.446 90.2776C211.126 90.411 210.779 90.4776 210.406 90.4776ZM210.406 89.6776C210.666 89.6776 210.902 89.631 211.116 89.5376C211.329 89.4443 211.509 89.3176 211.656 89.1576C211.809 88.991 211.926 88.801 212.006 88.5876C212.092 88.3676 212.136 88.131 212.136 87.8776C212.136 87.631 212.092 87.3976 212.006 87.1776C211.926 86.9576 211.809 86.7676 211.656 86.6076C211.509 86.441 211.329 86.311 211.116 86.2176C210.902 86.1243 210.666 86.0776 210.406 86.0776C210.146 86.0776 209.909 86.1243 209.696 86.2176C209.482 86.311 209.299 86.441 209.146 86.6076C208.992 86.7676 208.872 86.9576 208.786 87.1776C208.706 87.3976 208.666 87.631 208.666 87.8776C208.666 88.131 208.706 88.3676 208.786 88.5876C208.872 88.801 208.992 88.991 209.146 89.1576C209.299 89.3176 209.482 89.4443 209.696 89.5376C209.909 89.631 210.146 89.6776 210.406 89.6776Z" fill="#24292E"/>
-<path d="M220.69 87.4376C220.69 87.031 220.607 86.701 220.44 86.4476C220.274 86.1943 220.027 86.0676 219.7 86.0676C219.3 86.0676 218.974 86.2243 218.72 86.5376C218.474 86.851 218.344 87.2776 218.33 87.8176V90.3776H217.47V87.4376C217.47 87.031 217.387 86.701 217.22 86.4476C217.06 86.1943 216.817 86.0676 216.49 86.0676C216.084 86.0676 215.75 86.231 215.49 86.5576C215.237 86.8843 215.11 87.331 215.11 87.8976V90.3776H214.25V85.3776H215.11V86.1476C215.257 85.881 215.46 85.671 215.72 85.5176C215.98 85.3576 216.28 85.2776 216.62 85.2776C216.994 85.2776 217.31 85.3743 217.57 85.5676C217.837 85.7543 218.034 86.0143 218.16 86.3476C218.294 86.021 218.504 85.761 218.79 85.5676C219.084 85.3743 219.42 85.2776 219.8 85.2776C220.074 85.2776 220.317 85.3276 220.53 85.4276C220.75 85.521 220.934 85.6576 221.08 85.8376C221.234 86.011 221.35 86.2243 221.43 86.4776C221.51 86.7243 221.55 87.001 221.55 87.3076V90.3776H220.69V87.4376Z" fill="#24292E"/>
-<path d="M223.538 84.0376C223.365 84.0376 223.218 83.981 223.098 83.8676C222.978 83.7476 222.918 83.601 222.918 83.4276C222.918 83.261 222.978 83.1176 223.098 82.9976C223.218 82.8776 223.365 82.8176 223.538 82.8176C223.711 82.8176 223.855 82.8776 223.968 82.9976C224.081 83.1176 224.138 83.261 224.138 83.4276C224.138 83.601 224.081 83.7476 223.968 83.8676C223.855 83.981 223.711 84.0376 223.538 84.0376ZM223.098 85.3776H223.958V90.3776H223.098V85.3776Z" fill="#24292E"/>
-<path d="M225.588 85.3776H226.448V86.1476C226.621 85.8476 226.848 85.6276 227.128 85.4876C227.408 85.3476 227.711 85.2776 228.038 85.2776C228.318 85.2776 228.575 85.3243 228.808 85.4176C229.041 85.511 229.238 85.6476 229.398 85.8276C229.565 86.001 229.695 86.2143 229.788 86.4676C229.881 86.7143 229.928 86.991 229.928 87.2976V90.3776H229.078V87.4276C229.078 87.0076 228.968 86.6776 228.748 86.4376C228.535 86.191 228.251 86.0676 227.898 86.0676C227.698 86.0676 227.508 86.1076 227.328 86.1876C227.155 86.2676 227.001 86.3876 226.868 86.5476C226.741 86.701 226.638 86.891 226.558 87.1176C226.485 87.3443 226.448 87.6043 226.448 87.8976V90.3776H225.588V85.3776Z" fill="#24292E"/>
-<path d="M233.657 89.5676C233.903 89.5676 234.13 89.5243 234.337 89.4376C234.55 89.351 234.73 89.231 234.877 89.0776C235.023 88.9176 235.137 88.731 235.217 88.5176C235.303 88.3043 235.347 88.071 235.347 87.8176C235.347 87.571 235.303 87.341 235.217 87.1276C235.137 86.9076 235.023 86.721 234.877 86.5676C234.73 86.4143 234.55 86.2943 234.337 86.2076C234.13 86.1143 233.903 86.0676 233.657 86.0676C233.403 86.0676 233.173 86.1143 232.967 86.2076C232.76 86.2943 232.583 86.4143 232.437 86.5676C232.29 86.721 232.173 86.9076 232.087 87.1276C232.007 87.341 231.967 87.571 231.967 87.8176C231.967 88.071 232.007 88.3043 232.087 88.5176C232.173 88.731 232.29 88.9176 232.437 89.0776C232.583 89.231 232.76 89.351 232.967 89.4376C233.173 89.5243 233.403 89.5676 233.657 89.5676ZM233.607 92.5676C233.067 92.5676 232.593 92.4676 232.187 92.2676C231.78 92.0676 231.47 91.8276 231.257 91.5476L231.857 90.9476C232.057 91.201 232.3 91.4043 232.587 91.5576C232.88 91.711 233.22 91.7876 233.607 91.7876C233.82 91.7876 234.027 91.7543 234.227 91.6876C234.427 91.621 234.603 91.5143 234.757 91.3676C234.917 91.2276 235.043 91.0476 235.137 90.8276C235.23 90.6143 235.277 90.3576 235.277 90.0576V89.4876C235.103 89.741 234.863 89.951 234.557 90.1176C234.25 90.2843 233.91 90.3676 233.537 90.3676C233.19 90.3676 232.867 90.3043 232.567 90.1776C232.267 90.0443 232.007 89.8643 231.787 89.6376C231.567 89.4043 231.393 89.1343 231.267 88.8276C231.147 88.5143 231.087 88.1776 231.087 87.8176C231.087 87.4643 231.147 87.1343 231.267 86.8276C231.393 86.5143 231.567 86.2443 231.787 86.0176C232.007 85.7843 232.267 85.6043 232.567 85.4776C232.867 85.3443 233.19 85.2776 233.537 85.2776C233.91 85.2776 234.25 85.361 234.557 85.5276C234.863 85.6876 235.103 85.8943 235.277 86.1476V85.3776H236.137V90.0876C236.137 90.5076 236.07 90.871 235.937 91.1776C235.81 91.491 235.633 91.7476 235.407 91.9476C235.18 92.1543 234.913 92.3076 234.607 92.4076C234.3 92.5143 233.967 92.5676 233.607 92.5676Z" fill="#24292E"/>
-<path d="M195.765 102.478C195.318 102.478 194.918 102.384 194.565 102.198C194.212 102.004 193.958 101.711 193.805 101.318L194.505 100.928C194.598 101.181 194.762 101.378 194.995 101.518C195.235 101.651 195.495 101.718 195.775 101.718C196.015 101.718 196.218 101.661 196.385 101.548C196.558 101.428 196.645 101.261 196.645 101.048C196.645 100.868 196.582 100.718 196.455 100.598C196.328 100.478 196.102 100.368 195.775 100.268L195.275 100.108C194.862 99.9876 194.548 99.8043 194.335 99.5576C194.128 99.3043 194.025 99.001 194.025 98.6476C194.025 98.4343 194.068 98.2443 194.155 98.0776C194.248 97.9043 194.372 97.761 194.525 97.6476C194.685 97.5276 194.868 97.4376 195.075 97.3776C195.282 97.311 195.505 97.2776 195.745 97.2776C196.118 97.2776 196.445 97.3543 196.725 97.5076C197.005 97.6543 197.228 97.8676 197.395 98.1476L196.755 98.5876C196.642 98.4276 196.498 98.2943 196.325 98.1876C196.158 98.0743 195.955 98.0176 195.715 98.0176C195.502 98.0176 195.308 98.071 195.135 98.1776C194.968 98.2843 194.885 98.431 194.885 98.6176C194.885 98.771 194.932 98.9076 195.025 99.0276C195.125 99.1476 195.315 99.251 195.595 99.3376L196.145 99.5076C196.578 99.641 196.912 99.8243 197.145 100.058C197.385 100.291 197.505 100.598 197.505 100.978C197.505 101.218 197.462 101.431 197.375 101.618C197.288 101.804 197.165 101.961 197.005 102.088C196.852 102.214 196.668 102.311 196.455 102.378C196.242 102.444 196.012 102.478 195.765 102.478Z" fill="#24292E"/>
-<path d="M200.977 102.478C200.597 102.478 200.247 102.411 199.927 102.278C199.607 102.138 199.33 101.951 199.097 101.718C198.864 101.484 198.68 101.211 198.547 100.898C198.42 100.578 198.357 100.238 198.357 99.8776C198.357 99.5176 198.42 99.181 198.547 98.8676C198.68 98.5476 198.864 98.271 199.097 98.0376C199.33 97.8043 199.607 97.621 199.927 97.4876C200.247 97.3476 200.597 97.2776 200.977 97.2776C201.35 97.2776 201.697 97.3476 202.017 97.4876C202.337 97.621 202.614 97.8043 202.847 98.0376C203.08 98.271 203.26 98.5476 203.387 98.8676C203.52 99.181 203.587 99.5176 203.587 99.8776C203.587 100.238 203.52 100.578 203.387 100.898C203.26 101.211 203.08 101.484 202.847 101.718C202.614 101.951 202.337 102.138 202.017 102.278C201.697 102.411 201.35 102.478 200.977 102.478ZM200.977 101.678C201.237 101.678 201.474 101.631 201.687 101.538C201.9 101.444 202.08 101.318 202.227 101.158C202.38 100.991 202.497 100.801 202.577 100.588C202.664 100.368 202.707 100.131 202.707 99.8776C202.707 99.631 202.664 99.3976 202.577 99.1776C202.497 98.9576 202.38 98.7676 202.227 98.6076C202.08 98.441 201.9 98.311 201.687 98.2176C201.474 98.1243 201.237 98.0776 200.977 98.0776C200.717 98.0776 200.48 98.1243 200.267 98.2176C200.054 98.311 199.87 98.441 199.717 98.6076C199.564 98.7676 199.444 98.9576 199.357 99.1776C199.277 99.3976 199.237 99.631 199.237 99.8776C199.237 100.131 199.277 100.368 199.357 100.588C199.444 100.801 199.564 100.991 199.717 101.158C199.87 101.318 200.054 101.444 200.267 101.538C200.48 101.631 200.717 101.678 200.977 101.678Z" fill="#24292E"/>
-<path d="M207.042 102.478C206.662 102.478 206.312 102.411 205.992 102.278C205.672 102.138 205.395 101.951 205.162 101.718C204.928 101.484 204.745 101.211 204.612 100.898C204.485 100.578 204.422 100.238 204.422 99.8776C204.422 99.5176 204.485 99.181 204.612 98.8676C204.745 98.5476 204.928 98.271 205.162 98.0376C205.395 97.8043 205.672 97.621 205.992 97.4876C206.312 97.3476 206.662 97.2776 207.042 97.2776C207.415 97.2776 207.762 97.3476 208.082 97.4876C208.402 97.621 208.678 97.8043 208.912 98.0376C209.145 98.271 209.325 98.5476 209.452 98.8676C209.585 99.181 209.652 99.5176 209.652 99.8776C209.652 100.238 209.585 100.578 209.452 100.898C209.325 101.211 209.145 101.484 208.912 101.718C208.678 101.951 208.402 102.138 208.082 102.278C207.762 102.411 207.415 102.478 207.042 102.478ZM207.042 101.678C207.302 101.678 207.538 101.631 207.752 101.538C207.965 101.444 208.145 101.318 208.292 101.158C208.445 100.991 208.562 100.801 208.642 100.588C208.728 100.368 208.772 100.131 208.772 99.8776C208.772 99.631 208.728 99.3976 208.642 99.1776C208.562 98.9576 208.445 98.7676 208.292 98.6076C208.145 98.441 207.965 98.311 207.752 98.2176C207.538 98.1243 207.302 98.0776 207.042 98.0776C206.782 98.0776 206.545 98.1243 206.332 98.2176C206.118 98.311 205.935 98.441 205.782 98.6076C205.628 98.7676 205.508 98.9576 205.422 99.1776C205.342 99.3976 205.302 99.631 205.302 99.8776C205.302 100.131 205.342 100.368 205.422 100.588C205.508 100.801 205.628 100.991 205.782 101.158C205.935 101.318 206.118 101.444 206.332 101.538C206.545 101.631 206.782 101.678 207.042 101.678Z" fill="#24292E"/>
-<path d="M210.886 97.3776H211.746V98.1476C211.919 97.8476 212.146 97.6276 212.426 97.4876C212.706 97.3476 213.009 97.2776 213.336 97.2776C213.616 97.2776 213.873 97.3243 214.106 97.4176C214.339 97.511 214.536 97.6476 214.696 97.8276C214.863 98.001 214.993 98.2143 215.086 98.4676C215.179 98.7143 215.226 98.991 215.226 99.2976V102.378H214.376V99.4276C214.376 99.0076 214.266 98.6776 214.046 98.4376C213.833 98.191 213.549 98.0676 213.196 98.0676C212.996 98.0676 212.806 98.1076 212.626 98.1876C212.453 98.2676 212.299 98.3876 212.166 98.5476C212.039 98.701 211.936 98.891 211.856 99.1176C211.783 99.3443 211.746 99.6043 211.746 99.8976V102.378H210.886V97.3776Z" fill="#24292E"/>
-<path d="M216.885 98.1176V95.2776H217.755V98.1176L217.585 100.158H217.055L216.885 98.1176ZM217.315 102.458C217.108 102.458 216.931 102.384 216.785 102.238C216.645 102.091 216.575 101.914 216.575 101.708C216.575 101.508 216.645 101.334 216.785 101.188C216.931 101.034 217.108 100.958 217.315 100.958C217.521 100.958 217.695 101.034 217.835 101.188C217.981 101.334 218.055 101.508 218.055 101.708C218.055 101.914 217.981 102.091 217.835 102.238C217.695 102.384 217.521 102.458 217.315 102.458Z" fill="#24292E"/>
-<path d="M183.656 60.3849C182.876 60.3849 182.189 60.1912 181.615 59.8039C180.836 59.2826 180.336 58.4482 180.168 57.3937C180.01 56.4031 180.151 55.2333 180.573 54.0109C180.996 52.7886 181.693 51.5417 182.591 50.3958C183.919 48.7015 185.569 47.3675 187.237 46.6393C188.131 46.2497 188.982 46.0535 189.767 46.0535C190.547 46.0535 191.233 46.2471 191.808 46.6345C192.375 47.0144 192.798 47.5673 193.049 48.2506C193.097 48.1614 193.137 48.0681 193.168 47.9717L193.426 47.1396L193.576 47.9979C193.884 49.7709 193.4 51.3829 192.861 52.5252C193.002 52.441 193.134 52.3428 193.255 52.2321L193.89 51.6359L193.597 52.4558C193.121 53.7847 192.32 54.9903 191.214 56.0464C191.461 56.0238 191.715 55.9796 191.915 55.8966L192.72 55.5635L192.155 56.2265C190.79 57.8301 188.902 58.6561 187.548 59.067C187.113 59.3453 186.658 59.5896 186.186 59.7977C185.291 60.1857 184.44 60.3849 183.656 60.3849ZM189.765 47.4385C189.176 47.4385 188.512 47.5976 187.793 47.9117C186.332 48.5495 184.873 49.7361 183.684 51.2521C182.101 53.2724 181.279 55.5432 181.539 57.1755C181.646 57.8491 181.932 58.3455 182.387 58.6509C182.731 58.8804 183.158 58.9969 183.658 58.9969C184.247 58.9969 184.91 58.8378 185.63 58.5237C187.091 57.8859 188.55 56.6994 189.738 55.1833C191.322 53.1627 192.144 50.8932 191.884 49.26C191.777 48.5863 191.491 48.0899 191.035 47.7845C190.692 47.555 190.265 47.4385 189.765 47.4385Z" fill="#56A4CB"/>
-<path d="M192.237 50.8145C192.679 50.2215 192.845 49.4378 192.936 48.9194C192.586 49.3503 192.318 49.5395 192.318 49.5395C192.358 49.9307 192.382 50.3142 192.237 50.8145Z" fill="#277DAD"/>
-<path d="M186.407 47.5577C190.09 45.225 192.426 47.7266 192.463 48.3453C192.313 47.3689 191.624 46.683 190.806 46.2973C190.095 45.9296 187.96 46.4409 187.96 46.4409L186.407 47.5577Z" fill="#DDEDF5"/>
-<path d="M185.157 59.6599C184.498 60.0986 182.844 59.9236 182.51 59.8039C182.51 59.3843 182.646 58.9369 182.646 58.9369H183.457C183.457 58.9369 183.447 59.2671 184.302 59.0573C184.765 59.2942 185.157 59.6599 185.157 59.6599Z" fill="#277DAD"/>
-<path d="M180.229 56.108C180.974 53.5458 183.522 48.6196 188.375 46.457C187.605 46.1306 184.315 47.9166 182.591 50.3949C180.471 53.4451 180.471 54.2036 180.229 56.108Z" fill="#DDEDF5"/>
-<path d="M190.805 53.6605C190.805 53.6605 191.625 53.3845 192.129 53.004C192.516 52.3562 193.173 50.802 193.173 49.4427C192.226 51.6531 191.559 51.9097 191.559 51.9097C191.207 52.9717 191.074 53.1299 190.805 53.6605Z" fill="#277DAD"/>
-<path d="M191.322 56.5223C189.805 57.7027 188.769 58.1755 187.431 58.6203L186.572 59.0938L186.371 58.2653C186.371 58.2653 189.607 56.5507 190.683 53.8648C191.204 54.1124 192.603 53.4507 192.936 52.9717C192.29 54.1337 190.095 56.5009 190.095 56.5009L191.322 56.5223Z" fill="#277DAD"/>
-<path d="M189.767 46.2617C190.496 46.2617 191.149 46.4431 191.691 46.8059C192.339 47.2397 192.78 47.9085 192.982 48.7512C193.143 48.5253 193.294 48.2703 193.369 48.0308C193.695 49.9058 193.121 51.603 192.477 52.8202C192.453 52.8786 192.429 52.9374 192.404 52.9958C192.759 52.8344 193.137 52.6275 193.399 52.3825C192.803 54.0481 191.753 55.323 190.648 56.2743H190.721C191.097 56.2743 191.623 56.242 191.995 56.0877C190.689 57.6209 188.897 58.4391 187.459 58.8726C187.027 59.1515 186.573 59.3958 186.102 59.6034C185.23 59.9836 184.403 60.1738 183.656 60.1738C182.927 60.1738 182.274 59.9924 181.732 59.6296C181.004 59.1415 180.535 58.3568 180.377 57.3607C180.224 56.404 180.362 55.2695 180.773 54.0797C181.187 52.8819 181.873 51.653 182.757 50.5256C184.063 48.8581 185.685 47.5466 187.321 46.832C188.193 46.4518 189.02 46.2617 189.767 46.2617ZM183.658 59.2067C184.268 59.2067 184.965 59.0427 185.714 58.7158C187.206 58.0644 188.694 56.8559 189.904 55.3127C191.522 53.2469 192.36 50.9161 192.091 49.227C191.974 48.4933 191.658 47.9495 191.152 47.6102C190.771 47.3556 190.302 47.2287 189.764 47.2287C189.154 47.2287 188.457 47.3927 187.709 47.7193C186.216 48.371 184.728 49.5795 183.519 51.1227C181.901 53.1885 181.062 55.5193 181.331 57.2084C181.448 57.9421 181.764 58.4859 182.27 58.8252C182.65 59.0799 183.121 59.2067 183.658 59.2067V59.2067ZM189.767 45.8437C188.953 45.8437 188.074 46.0473 187.152 46.4492C185.453 47.1916 183.775 48.5473 182.426 50.2683C181.514 51.4303 180.805 52.7027 180.376 53.9425C179.941 55.1971 179.799 56.4021 179.96 57.4266C180.138 58.5411 180.67 59.4236 181.497 59.9765C182.106 60.3849 182.832 60.5918 183.655 60.5918C184.468 60.5918 185.348 60.3881 186.269 59.9862C186.742 59.7779 187.199 59.5337 187.635 59.2558C188.452 59.0092 189.24 58.6737 189.983 58.2552C191.621 57.323 192.225 56.6639 193.375 55.1942L191.852 55.6904C193.384 54.0245 193.771 53.0145 194.262 51.1069L193.382 51.8215C194.356 49.5501 193.71 47.0728 193.504 46.5699C193.369 46.9679 193.149 47.5269 193.033 47.6961C192.772 47.1973 192.391 46.7715 191.924 46.4573C191.315 46.0489 190.589 45.842 189.767 45.842V45.8437ZM183.658 58.7871C183.2 58.7871 182.812 58.6825 182.504 58.4766C182.099 58.2048 181.844 57.7561 181.746 57.1425C181.495 55.5648 182.301 53.3576 183.849 51.3816C185.017 49.8923 186.447 48.7283 187.877 48.1041C188.569 47.8016 189.205 47.6483 189.764 47.6483C190.222 47.6483 190.61 47.7529 190.918 47.9588C191.324 48.2306 191.579 48.6793 191.677 49.2929C191.928 50.8706 191.122 53.0778 189.573 55.0538C188.406 56.5438 186.976 57.7058 185.546 58.3313C184.853 58.6338 184.218 58.7871 183.658 58.7871V58.7871Z" fill="#083751"/>
-<path d="M183.658 58.7872C183.2 58.7872 182.812 58.6826 182.504 58.4767C182.099 58.2049 181.844 57.7563 181.746 57.1427C181.495 55.5649 182.301 53.3578 183.849 51.3817C185.017 49.8924 186.447 48.7285 187.877 48.1042C188.569 47.8018 189.205 47.6484 189.764 47.6484C190.222 47.6484 190.61 47.753 190.918 47.959C191.324 48.2307 191.579 48.6794 191.676 49.293C191.928 50.8707 191.122 53.0779 189.573 55.054C188.406 56.5439 186.976 57.7059 185.546 58.3315C184.853 58.6339 184.218 58.7872 183.658 58.7872V58.7872Z" fill="#083751"/>
-<path d="M181.534 43.8863C181.515 44.1268 181.532 45.2781 181.966 45.474C181.665 44.7639 181.985 43.4405 183.495 43.4341C183.219 43.64 183.007 43.978 182.914 44.2036C182.814 44.3125 182.726 44.4315 182.65 44.5586C182.759 44.4941 183.112 43.8944 184.437 43.8902C184.789 43.8902 185.171 43.9286 185.483 44.1061C184.947 43.9734 184.376 44.2675 183.932 44.5667C184.245 44.466 184.701 44.1642 185.343 44.2898C185.774 44.374 185.951 44.7714 186.307 44.9763C186.598 45.1438 187.01 45.1313 187.2 44.8188C187.248 44.7412 187.272 44.6515 187.269 44.5606C187.35 44.6468 187.421 44.7421 187.481 44.8446C187.613 45.0736 187.668 45.3389 187.639 45.6015C187.324 45.5715 187.015 45.68 186.7 45.6435C186.395 45.6029 186.107 45.4802 185.866 45.2884C186.037 45.5451 186.296 45.7307 186.594 45.811C186.973 45.9127 187.342 45.7707 187.72 45.8378C188.153 45.914 188.697 46.1958 189.19 45.8678C189.278 45.8083 189.351 45.7306 189.405 45.64C189.484 45.8567 189.49 46.0931 189.423 46.3136C189.388 46.4376 189.323 46.551 189.234 46.6438C189.153 46.7242 189.054 46.7516 188.961 46.8071C188.648 46.678 188.299 46.6344 187.96 46.6135C188.264 46.7103 188.576 46.8071 188.864 46.945C189.151 47.0828 189.346 47.3 189.547 47.5421C189.715 47.7435 189.91 47.9268 190.172 47.9891C190.353 48.0321 190.541 48.0229 190.717 47.9627C190.763 48.2257 190.52 48.6547 190.18 48.7115C190.344 48.8164 190.521 48.9001 190.707 48.9604C190.578 49.0766 190.269 49.1634 190.071 49.1737C190.548 49.4236 190.788 50.0891 190.777 50.6295C190.7 50.4645 190.612 50.2744 190.413 50.1305C190.469 50.3612 190.459 50.643 190.416 50.9051C190.322 50.8154 189.964 50.4009 189.812 50.2005C189.886 49.9697 189.873 49.8106 189.822 49.5756C189.757 49.9629 189.48 50.4074 189.338 50.5856C189.402 50.3445 189.377 50.0849 189.338 49.8432C189.289 49.5707 189.21 49.3047 189.101 49.0504C188.865 48.4762 188.865 48.4762 188.662 47.9762C188.544 48.4536 188.443 48.6763 188.287 48.8697C188.295 48.7167 188.284 48.5634 188.256 48.4129C188.245 48.3503 188.147 47.8607 187.689 47.2032C187.729 47.5079 187.85 47.8697 187.706 48.2106C187.697 47.9549 187.528 47.2148 187.016 46.9195C187.159 47.1661 187.285 47.9385 187.113 48.1367C187.129 47.7106 186.833 47.3178 186.509 47.0599C186.27 46.8688 184.942 46.1277 184.944 46.1309C184.946 46.1341 185.19 47.1993 184.656 47.2835C184.819 46.9153 184.409 46.1403 183.946 45.9976C184 45.7378 183.986 45.4253 183.896 45.1906C183.666 45.4402 183.084 45.4508 182.768 45.7245C182.633 45.8414 182.489 46.0195 182.43 46.2264L182.255 46.4679C182.252 46.4471 182.244 46.4273 182.233 46.4095L181.361 45.5812C181.163 45.2036 181.109 44.292 181.534 43.8863Z" fill="#E61C3F"/>
-<path d="M180.545 45.0911L181.04 45.5901C181.013 45.6382 180.977 45.6918 180.924 45.704C180.955 45.7112 180.987 45.7093 181.017 45.6986C181.047 45.6879 181.073 45.6688 181.092 45.6437L181.326 45.8796C181.279 45.9865 181.201 46.1175 181.079 46.1378C181.235 46.1824 181.353 46.0836 181.408 45.9629L181.706 46.2631C181.667 46.4048 181.581 46.5859 181.332 46.6181C181.602 46.6827 181.754 46.5268 181.805 46.3618L182.014 46.5736C182.083 46.7995 181.696 47.0623 181.466 47.0019L180.545 45.0911Z" fill="white"/>
-<path d="M182.457 59.1141C182.42 59.6125 182.279 60.5463 181.755 60.7813C181.593 60.7167 181.452 60.5017 181.34 60.2483C181.398 59.8768 181.566 59.7642 181.888 59.5211C182.075 59.3807 182.204 59.1338 182.283 58.9369C182.357 59.015 182.421 59.0783 182.457 59.1141Z" fill="white"/>
-<path d="M185.942 58.0287C186 58.1649 186.076 58.3514 186.153 58.5474C186.202 58.6707 186.25 58.7978 186.294 58.9199C186.409 59.2404 186.493 59.5222 186.455 59.587C186.418 59.6519 186.204 59.6748 185.92 59.6516C185.75 59.4085 185.755 59.2278 185.791 58.9305C185.796 58.8892 185.802 58.8453 185.807 58.7988C185.819 58.6848 185.81 58.5697 185.782 58.4586C185.739 58.2864 185.673 58.1203 185.589 57.9641C185.709 57.972 185.827 57.9937 185.942 58.0287V58.0287Z" fill="white"/>
-<path d="M191.075 52.592C190.673 53.4578 190.172 54.2734 189.581 55.0222C189.36 55.3049 189.13 55.5754 188.892 55.8337C188.97 55.243 188.8 54.6226 188.422 54.3302C188.772 55.0797 188.68 55.711 188.385 56.1884C187.945 56.8956 187.123 57.2 186.628 57.1893C186.253 57.178 185.886 57.0722 185.563 56.8817C185.563 56.8817 184.188 56.5438 184.098 56.8553C184.008 57.1667 184.484 57.964 184.484 57.964C184.484 57.964 184.812 57.9485 184.841 58.1848C184.973 58.0759 185.131 58.0045 185.299 57.9779C185.43 58.0647 185.527 58.1928 185.576 58.3417C185.665 58.6202 185.57 58.9291 185.519 59.1515C185.509 59.1927 185.501 59.2344 185.496 59.2764C185.489 59.3269 185.491 59.3781 185.502 59.4278C185.516 59.4914 185.544 59.5513 185.583 59.6037C185.471 59.5823 185.362 59.5545 185.254 59.5204C185.136 59.4839 185.022 59.4384 184.912 59.3842C184.739 59.3041 184.587 59.1876 184.464 59.0427C183.959 59.0773 183.786 59.1854 183.631 58.9036C183.585 58.8128 183.547 58.7179 183.518 58.6202C183.317 57.9985 182.865 57.3665 182.68 57.1096C182.496 56.8527 182.729 56.3123 183.171 56.118C183.613 55.9237 185.41 55.4634 185.675 55.1087C185.941 54.754 185.82 53.9983 187.111 53.5171C186.742 53.3973 185.675 53.9283 185.41 54.8676C184.909 55.1955 183.629 55.5674 183.281 55.6707C182.705 55.8411 182.382 56.2575 182.289 56.5209C182.005 56.6216 181.541 56.782 181.537 57.005C181.532 57.2545 181.709 57.6154 181.698 58.1325C181.698 58.2138 181.78 58.35 181.894 58.4966C181.966 58.5892 182.05 58.6861 182.131 58.7758C182.112 58.9497 182.031 59.1109 181.902 59.2293C181.81 59.3158 181.708 59.3916 181.599 59.4552C181.491 59.5217 181.389 59.5763 181.319 59.6286C181.259 59.6742 181.211 59.7346 181.181 59.8038C181.129 59.6294 181.094 59.4504 181.076 59.2693C180.798 58.8894 180.697 58.7852 180.646 58.6238C180.641 58.6093 180.639 58.5945 180.637 58.5795V58.5795C180.617 58.3898 180.666 57.822 180.697 57.4937C180.735 57.4892 180.816 57.5441 180.972 57.6319L181.004 57.6512L180.962 57.5867C180.737 57.24 180.481 56.8578 180.593 56.5109C180.654 56.3243 180.772 56.2204 180.96 56.1083C180.961 56.1074 180.962 56.1066 180.963 56.1061C181.035 56.0625 181.118 56.0176 181.212 55.966C181.549 55.7791 182.909 55.3395 183.086 54.9793C183.187 54.7792 183.299 54.5852 183.423 54.3983C183.452 54.6611 183.509 54.9202 183.592 55.171C183.572 53.3634 184.229 52.2311 184.488 51.8551C184.517 52.216 184.518 52.5787 184.489 52.9396C184.85 52.601 184.873 51.1088 184.413 49.8987C184.375 49.7978 184.333 49.6991 184.287 49.6027C184.239 49.4998 184.187 49.4 184.131 49.3045C184.222 49.1065 184.262 48.8887 184.246 48.6712C184.239 48.5684 184.222 48.4667 184.193 48.3678C184.144 48.1891 184.057 48.023 183.939 47.881C183.99 48.1099 184.035 48.3074 184.041 48.5033C184.045 48.6405 184.027 48.7775 183.985 48.9084C183.974 48.9449 183.96 48.9817 183.945 49.0195C183.947 48.9933 183.949 48.9675 183.95 48.9417C183.954 48.8323 183.943 48.7228 183.918 48.6163C183.903 48.5539 183.883 48.4928 183.859 48.4333C183.856 48.4249 183.843 48.431 183.845 48.4394C183.861 48.5108 183.871 48.5835 183.874 48.6567C183.879 48.7904 183.865 48.9241 183.832 49.0537C183.817 49.1114 183.8 49.1683 183.78 49.2241C183.75 49.3065 183.716 49.3873 183.677 49.4662C183.423 49.778 183.019 49.8758 182.81 50.246C182.791 50.238 182.769 50.2289 182.746 50.2196C182.667 50.1888 182.587 50.164 182.505 50.1453C182.358 50.113 182.195 50.1014 182.061 50.1557C181.991 50.1774 181.925 50.209 181.864 50.2496C181.809 50.2853 181.763 50.3334 181.729 50.39C181.808 50.3012 182.052 50.2286 182.246 50.2315C182.299 50.237 182.351 50.2564 182.394 50.288C182.458 50.3344 182.507 50.398 182.536 50.4713C182.535 50.4749 182.534 50.4784 182.533 50.4817C182.534 50.4793 182.536 50.4768 182.537 50.4742V50.4768C182.581 50.5843 182.606 50.7392 182.587 50.9626C182.532 51.1856 182.481 51.3851 182.405 51.4761C182.261 51.6517 181.789 51.9332 181.535 51.9826C181.516 51.9872 181.497 51.9905 181.477 51.9926C181.41 51.9964 181.342 51.9878 181.278 51.9671C181.256 51.961 181.233 51.9532 181.21 51.9445C181.254 51.9101 181.299 51.8778 181.346 51.8477C181.396 51.8156 181.447 51.7866 181.501 51.7608C181.563 51.7309 181.621 51.7021 181.676 51.6743C182.077 51.4755 182.29 51.3432 182.356 51.2205C182.417 51.1079 182.371 50.9513 182.276 50.8154C182.233 50.7526 182.181 50.6961 182.123 50.6476C182.094 50.6242 182.064 50.6033 182.032 50.5849C182.078 50.5726 182.126 50.5706 182.173 50.5791C182.215 50.5862 182.256 50.5955 182.297 50.6069C182.273 50.5798 182.15 50.5501 182.114 50.5294C181.998 50.461 181.895 50.4904 181.816 50.5795C181.713 50.6957 181.571 51.1075 181.329 51.3896C181.165 51.5833 180.853 51.654 180.672 51.6801C180.414 51.4974 180.252 51.247 180.231 51.0481C180.208 50.8115 180.264 50.4923 180.503 50.3451C180.685 49.91 181.006 48.7186 181.027 48.5334C181.047 48.3481 180.821 47.8517 180.841 47.6196C180.856 47.455 181.095 47.0618 181.159 46.9592L181.238 47.1415C181.24 47.1435 181.248 47.1528 181.262 47.1654C181.145 47.4559 181.133 47.8249 181.206 48.1179C181.223 47.9324 181.238 47.749 181.29 47.5692C181.322 47.4553 181.364 47.3452 181.404 47.2348C181.519 47.2597 181.699 47.2426 181.964 47.076C182.079 47.0097 182.171 46.9097 182.227 46.7894L182.421 46.5676C182.434 46.6218 182.454 46.674 182.481 46.7232C182.481 46.5806 182.578 46.3427 182.69 46.1645C182.9 45.8275 183.303 45.7265 183.558 45.6016C183.456 45.6965 183.35 45.7862 183.251 45.884C183.041 46.0899 182.914 46.3359 182.948 46.6322C183.064 46.3159 183.246 46.0835 183.506 45.8717C183.57 45.8181 183.667 45.7468 183.749 45.6645C183.714 45.8988 183.685 46.1332 183.531 46.3352C183.35 46.5764 183.038 46.8113 183.318 47.1235C183.241 46.9153 183.522 46.7164 183.641 46.5864C183.746 46.4715 183.828 46.3388 183.886 46.1945C184.402 46.5034 184.743 47.2832 184.229 47.4262C184.449 47.5515 185.371 47.6231 185.234 46.5796C185.493 46.741 185.768 46.8752 186.041 47.0286L186.063 47.0405C186.145 47.0862 186.224 47.136 186.3 47.1896C186.551 47.3659 186.707 47.5447 186.799 47.7142C186.85 47.8062 186.886 47.9061 186.905 48.0098C186.954 48.28 186.858 48.4827 186.811 48.5263C187.063 48.5198 187.359 48.3361 187.373 47.7677V47.7003L187.375 47.7051C187.381 47.7232 187.387 47.7406 187.393 47.758C187.582 48.3358 187.584 48.6638 187.584 48.6638C187.745 48.5195 187.927 48.3323 187.951 47.9785C187.962 48.0376 188.129 48.6218 188.09 49.2122C188.205 49.1731 188.504 49.1066 188.675 48.6473C188.729 48.8087 188.898 49.1521 189.005 49.532C189.077 49.7841 189.131 50.0537 189.119 50.317C189.101 50.7499 188.893 50.9626 188.877 51.0117C188.892 51.0139 189.374 51.053 189.67 50.5523C189.957 51.0691 190.401 51.8554 191.075 52.592Z" fill="#E5ECEF"/>
-<path d="M182.043 48.6649C182.154 48.4654 182.338 48.1853 182.579 47.98C182.643 48.0365 182.681 48.163 182.694 48.243C182.745 48.549 182.472 48.4399 182.043 48.6649Z" fill="#FFCE55"/>
-<path d="M180.176 51.3579C180.176 51.3579 180.232 50.8444 180.699 50.7282C180.638 50.4854 180.818 50.0358 181.141 50.1288C181.211 49.4993 181.383 48.7085 181.383 48.7085C181.383 48.7085 181.728 48.8134 181.771 48.6278C181.813 48.4422 181.964 47.8532 182.506 47.6918C182.044 47.6918 181.782 48.135 181.605 48.4416C181.341 48.4335 181.129 48.1753 181.212 47.7718C181.296 47.3683 181.341 47.1021 181.341 47.1021L181.142 46.868C181.142 46.868 180.648 47.3616 180.731 47.6918C180.814 48.022 181.036 48.4306 180.925 48.6646C180.813 48.8986 180.399 50.2217 180.399 50.2217C180.05 50.6455 180.019 50.9454 180.176 51.3579Z" fill="white"/>
-<path d="M187.47 53.6605C187.08 53.6605 185.994 54.4297 185.994 55.2312C185.395 55.4894 183.909 56.0329 183.909 56.0329L186.19 55.6563C186.19 55.6563 186.848 55.9306 187.29 55.6563C187.732 55.3819 187.622 54.8467 187.622 54.8467C187.079 55.3173 186.204 54.3706 187.47 53.6605Z" fill="white"/>
-<path d="M185.417 48.4012C186.158 49.1133 187.697 50.8308 187.081 52.3479C186.889 51.264 186.204 49.7011 185.417 48.4012Z" fill="white"/>
-<path d="M180.358 51.4979C180.358 51.4979 180.541 51.6377 180.702 51.4979C180.943 51.2897 180.743 50.7529 180.896 50.6154C181.049 50.4779 181.362 50.5079 181.394 50.5618C181.311 50.3359 181.24 50.0883 181.294 49.9915C181.348 49.8946 181.54 49.3136 181.94 49.0554C181.769 49.3504 181.473 50.0696 181.603 50.3895C181.724 50.2216 182.284 50.0644 182.531 50.3078C182.779 50.5512 182.795 51.2313 182.531 51.5582C182.267 51.8852 181.577 52.2293 181.394 52.1809C180.851 51.9646 180.612 51.7868 180.358 51.4979Z" fill="white"/>
-<path d="M181.604 50.3895C181.972 49.822 182.372 50.0641 182.701 49.3136C182.744 49.4226 182.744 49.5436 182.701 49.6526C183.256 49.4108 184 48.3589 183.749 47.3689C183.975 47.6807 184.177 48.66 184.048 49.12C183.919 49.5799 183.338 49.9027 183.225 50.0883C183.112 50.2739 182.725 50.5644 182.725 50.5644C182.533 50.2223 181.988 50.3023 181.604 50.3895Z" fill="white"/>
-<path d="M181.811 48.8617C181.811 48.8617 182.414 48.9298 182.724 48.773C183.033 48.6161 183.199 48.1032 183.199 47.9257C183.109 48.1677 182.804 48.3333 182.804 48.3333C182.693 48.4465 182.558 48.5324 182.408 48.5841C182.166 48.6651 181.908 48.7407 181.908 48.7407L181.811 48.8617Z" fill="white"/>
-<path d="M181.604 46.5619C181.604 46.5619 181.753 46.4124 181.719 46.2088C181.665 46.3763 181.549 46.4086 181.497 46.4086C181.446 46.4086 181.243 46.0858 181.243 46.0858C181.243 46.0858 181.462 45.8786 181.394 45.7404C181.326 45.8815 181.141 46.0067 181.141 46.0067L180.924 45.7059C180.924 45.7059 181.182 45.5871 181.141 45.4741C181.061 45.4741 181.98 46.2956 181.98 46.2956L182.165 46.5958C182.165 46.5958 182.165 46.7733 181.888 46.9463C181.673 46.7026 181.604 46.5619 181.604 46.5619Z" fill="white"/>
-<path d="M184.119 48.6842C184.404 48.5319 183.748 47.6023 183.748 47.3689C184.797 48.3227 185.701 49.8543 185.297 51.1812C185.2 50.9069 184.926 50.3465 184.926 50.3465C184.926 50.3465 185.395 51.6215 184.628 52.493C184.7 51.3633 184.23 49.6616 184.006 49.4428C184.208 49.0925 184.119 48.6842 184.119 48.6842Z" fill="white"/>
-<path d="M186.792 53.5276C186.275 53.483 185.362 53.8487 185.119 54.575C185.134 54.3064 185.09 53.9995 185.427 53.6605C184.975 53.6605 184.394 54.3061 184.394 54.8468C183.635 55.2018 181.327 56.3018 181.142 56.4632C180.956 56.6246 180.986 56.7954 181.295 57.5336C181.101 58.0771 180.814 58.3989 181.541 59.0293C181.841 59.2876 181.981 59.3198 181.981 59.3198L182.291 58.6833C182.291 58.6833 181.559 57.3228 181.77 56.9797C182.268 56.6408 182.457 56.5923 182.457 56.5923C182.457 56.5923 182.634 56.0598 183.538 55.8015C184.442 55.5433 185.589 55.0107 185.589 55.0107C185.83 53.8164 186.572 53.6657 186.792 53.5276Z" fill="white"/>
-<path d="M188.718 55.979C188.718 55.979 188.848 54.5265 188.154 53.9293C188.331 54.3005 188.412 55.0429 188.154 55.4141C188.158 55.084 188.043 54.7635 187.831 54.5103C187.831 54.5103 188.181 55.8176 187.202 56.1323C186.431 56.3017 186.121 55.9467 186.121 55.9467C185.298 56.2372 184.12 56.3502 183.781 56.4309C183.555 56.9473 183.555 57.9899 184.338 58.732C184.28 58.549 184.234 58.3626 184.2 58.1739C184.2 58.1739 184.45 58.5773 184.72 58.5128C184.99 58.4482 185.374 58.0806 185.812 58.66C185.638 58.0609 185.434 57.8349 185.434 57.8349L184.877 57.8672L184.49 57.6574L184.216 56.9312L185.434 57.0441C185.434 57.0441 186.636 57.7242 187.395 57.2701C188.155 56.8159 188.718 55.979 188.718 55.979Z" fill="white"/>
-<path d="M181.933 50.7096C181.956 50.7092 181.978 50.712 182 50.718C181.993 50.9159 181.753 51.1673 181.753 51.1673C181.942 51.0605 182.07 50.9698 182.145 50.8094C182.184 50.8515 182.213 50.9024 182.23 50.9579C182.246 51.0134 182.248 51.0719 182.237 51.1286C182.202 51.28 181.583 51.5353 181.295 51.6531C181.709 51.3849 181.73 50.7151 181.933 50.7096Z" fill="white"/>
-<path d="M189.977 50.6205L189.719 50.2216C189.719 50.2216 189.377 50.7338 189.154 50.8307C189.356 49.9592 188.977 48.9408 188.654 48.4011C188.626 48.5409 188.566 48.6725 188.48 48.7858C188.393 48.8992 188.282 48.9914 188.155 49.0554C188.155 49.0554 188.164 48.4892 188.035 48.0373C188.003 47.9109 187.95 47.7904 187.879 47.6807C187.867 47.8382 187.836 47.9938 187.787 48.1442C187.76 48.2352 187.72 48.3221 187.67 48.4024C187.67 48.4024 187.651 48.3298 187.621 48.2229C187.589 48.1109 187.545 47.9608 187.497 47.8169C187.431 47.6161 187.357 47.4276 187.298 47.3701C187.29 47.4854 187.324 47.6981 187.289 47.9189C187.269 48.0724 187.204 48.2166 187.103 48.334L187.081 48.3036C187.069 48.2199 187.052 48.137 187.031 48.0551C186.971 47.8191 186.848 47.4741 186.614 47.2869C186.59 47.2672 186.562 47.2462 186.532 47.2249C186.423 47.1471 186.28 47.0596 186.129 46.9718C185.693 46.7204 185.181 46.4699 185.158 46.4586C185.441 46.6378 185.704 46.8474 185.941 47.0838C186.041 47.1847 186.133 47.2925 186.217 47.4066C186.468 47.7494 186.565 48.0622 186.585 48.3162C186.594 48.4225 186.588 48.5294 186.569 48.6341C186.273 48.3808 185.911 48.1087 185.638 48.0235C185.785 48.161 186.123 48.5618 186.435 48.9456L186.43 48.9505C186.444 48.9627 186.458 48.9763 186.471 48.9892C186.625 49.1777 186.772 49.3598 186.885 49.5011C187.478 50.4278 187.775 51.8419 187.428 52.6553C187.791 52.5988 188.189 51.9568 188.146 51.4126C188.114 50.993 187.946 50.4717 187.845 50.1861C189.953 52.2586 190.131 53.7228 190.188 53.8658C189.902 53.4687 188.892 52.524 188.861 52.4946C188.879 52.5269 189.674 53.9242 189.94 54.5636C190.476 53.8083 190.903 53.0307 191.204 52.2761L189.977 50.6205Z" fill="white"/>
-<path d="M183.28 46.9008C183.524 46.8389 183.853 46.7233 183.934 46.5458C184.127 46.6265 184.563 47.0454 184.442 47.3689C184.69 47.0696 184.463 46.3295 183.871 46.0858C183.871 45.9567 183.813 45.4725 183.813 45.4725C183.813 45.4725 182.618 46.3072 183.022 47.0109C183.086 46.7007 183.312 46.3844 183.312 46.3844L183.28 46.9008Z" fill="white"/>
-<path d="M181.256 45.6187C181.256 45.6187 181.21 44.7946 181.426 44.5257C181.426 44.773 181.56 45.2384 181.966 45.4737C181.701 44.9131 181.643 43.65 181.643 43.65C180.983 44.2439 180.932 44.8227 181.256 45.6187Z" fill="#F0ABAB"/>
-<path d="M181.8 45.225C181.8 45.225 181.619 43.8909 182.646 43.5359C183.673 43.1808 183.748 43.3206 183.748 43.3206C183.748 43.3206 182.768 44.2944 182.505 44.8054C182.505 44.5365 182.606 44.0242 182.938 43.7725C182.372 43.837 181.855 44.6462 181.8 45.225Z" fill="#F0ABAB"/>
-<path d="M183.008 44.1895C183.457 44.0797 184.305 43.9797 184.931 44.203C184.221 44.3321 183.785 44.6065 183.643 44.8431C184.361 44.5203 185.229 44.4122 185.651 44.7518C186.072 45.0913 186.56 45.7524 187.289 45.0913C187.289 45.3328 187.356 45.5155 187.289 45.7201C187.682 45.8334 187.825 45.7201 187.825 45.7201C187.825 45.7201 187.868 44.6762 187.234 44.418C187.227 44.7689 186.835 44.999 186.513 44.9128C186.19 44.8266 185.638 44.2137 185.638 44.2137C185.638 44.2137 185.597 43.6249 184.221 43.7402C183.457 43.7253 183.008 44.1895 183.008 44.1895Z" fill="#F0ABAB"/>
-<path d="M185.867 45.2902C185.996 45.6007 186.254 46.049 186.712 46.1294C187.17 46.2098 187.591 45.9967 187.827 46.1294C188.063 46.262 188.784 46.5045 189.118 46.2094C189.237 46.3447 188.935 46.8395 188.688 46.7859C188.01 46.611 188.175 46.621 187.494 46.6136C188.232 46.8605 188.804 47.2049 188.998 47.506C189.192 47.8072 189.485 48.4011 190.16 48.3333C190.085 48.5173 189.956 48.6103 189.633 48.5841C189.73 48.7433 189.999 48.9666 190.257 48.9666C190.107 49.0554 189.708 49.0554 189.708 49.0554C189.708 49.0554 190.356 49.7009 190.439 50.1796C190.636 50.7045 190.841 50.8019 190.841 50.8019C190.841 50.8019 191.085 49.8543 190.483 49.2597C190.956 49.0554 191.021 48.9747 191.021 48.9747L190.429 48.6651C190.429 48.6651 191.158 48.2626 190.849 47.7965C190.3 47.9257 190.133 47.9276 189.764 47.6484C189.395 47.3692 189.106 46.9447 189.106 46.9447C189.106 46.9447 189.934 46.5377 189.397 45.4725C188.988 45.8421 188.73 45.9222 188.149 45.7705C187.567 45.6188 186.847 45.8424 186.674 45.7705C186.502 45.6985 185.867 45.2902 185.867 45.2902Z" fill="#F0ABAB"/>
-<path d="M183.855 54.7793C183.748 54.0692 183.976 52.9795 184.303 52.4931C184.303 52.8643 184.541 53.4236 184.541 53.4236C184.541 53.4236 185.408 52.3991 185.297 51.6532C185.59 52.3478 185.049 53.4669 184.568 53.9294C184.087 54.392 183.855 54.7793 183.855 54.7793Z" fill="white"/>
-<path d="M183.425 56.205C183.109 56.2372 182.701 56.7053 182.844 57.0281C182.987 57.3508 183.425 58.0287 183.425 58.0287L183.126 57.1168C183.126 57.1168 183.425 56.9232 183.425 56.673C183.425 56.4228 183.741 56.1727 183.425 56.205Z" fill="white"/>
-<path d="M186.43 48.9495C187.172 49.9317 187.433 50.7015 187.497 51.2109C187.529 51.4742 187.537 51.8519 187.56 52.0065C187.692 51.7896 187.751 51.5355 187.726 51.2825C187.602 49.8971 186.48 48.9843 186.43 48.9495Z" fill="#083751"/>
-<path d="M180.92 50.4873C180.773 50.5554 180.812 50.8424 180.833 51.0496L180.861 51.0173C180.895 50.7233 180.946 50.5613 181.101 50.5435C181.101 50.5422 181.067 50.4192 180.92 50.4873Z" fill="#083751"/>
-<path d="M182.768 48.7248C182.596 48.8113 182.328 48.84 182.167 48.8775C182.369 48.9566 182.664 48.9136 182.823 48.831C183.031 48.7248 183.118 48.4811 183.127 48.25C183.014 48.4421 182.957 48.6293 182.768 48.7248Z" fill="#082E44"/>
-<path d="M190.571 51.2199C190.596 51.1292 190.661 50.994 190.63 50.7471C190.704 50.8882 190.751 51.0424 190.766 51.2012C191.368 50.4711 190.776 49.4259 190.692 49.3527C190.922 49.2881 191.079 49.1012 191.24 48.8362C191.014 48.8433 190.882 48.8301 190.68 48.7584C191.088 48.546 190.998 47.9657 190.922 47.6419C190.681 47.8091 190.282 47.7656 190.027 47.6097C189.719 47.4212 189.67 47.1846 189.295 46.9493C189.406 46.9064 189.503 46.8308 189.571 46.7323C189.645 46.6223 189.694 46.4968 189.713 46.3653C189.773 45.9987 189.665 45.5523 189.431 45.2598C188.974 45.8783 188.052 45.6417 187.987 45.6259C188.044 45.224 187.752 44.2379 187.067 44.2256C187.135 44.7721 186.719 44.9393 186.333 44.6533C186.184 44.3273 185.975 44.0216 185.669 43.8393C185.317 43.6291 184.855 43.5875 184.454 43.6004C184.126 43.6098 183.81 43.6992 183.555 43.7883C183.634 43.5652 183.931 43.3422 183.984 43.3202C183.21 42.9268 181.911 43.4042 181.742 44.2808C181.71 43.8528 181.718 43.4891 181.73 43.4432C180.946 43.7718 180.926 44.806 180.935 45.1753L179.995 44.2802L180.953 46.4928C180.929 46.5635 180.895 46.6478 180.857 46.7369C180.792 46.886 180.719 47.0493 180.657 47.1917C180.605 47.301 180.56 47.4138 180.523 47.5293C180.486 47.6975 180.745 48.3127 180.717 48.528C180.688 48.7403 180.647 48.9507 180.593 49.158C180.519 49.4527 180.428 49.7474 180.348 49.9737C180.313 50.0725 180.279 50.1583 180.251 50.2251C179.929 50.4888 179.922 50.9214 179.918 51.1238C179.911 51.4607 180.426 51.8445 180.626 51.9665C180.658 51.9859 180.696 52.0078 180.737 52.0311C180.877 52.111 181.024 52.1803 181.175 52.2383C181.271 52.2774 181.374 52.3012 181.478 52.3087C181.793 52.3148 182.566 51.8513 182.67 51.7186C182.773 51.586 182.868 50.86 182.977 50.6025C183.164 50.1593 183.3 50.3442 183.895 49.6635C184.013 49.892 184.277 50.4675 184.418 51.2955C183.684 52.0014 183.422 52.9249 183.396 53.745C183.321 53.8187 183.251 53.8971 183.186 53.9797C183.029 54.1737 182.896 54.3855 182.789 54.6107C182.648 54.9103 182.293 55.1059 181.905 55.2689C181.784 55.3192 181.66 55.3657 181.539 55.4132C181.359 55.4819 181.184 55.5484 181.03 55.6194C180.517 55.8573 180.306 56.1546 180.22 56.4935C180.152 56.7598 180.298 57.1491 180.363 57.304C180.326 57.6042 180.228 58.4705 180.311 58.6868C180.412 58.9502 180.436 59.0073 180.788 59.4343C180.914 60.0944 181.236 60.9759 181.875 61.1809C182.435 61.0925 182.785 59.6203 182.795 59.0451L182.749 58.9457C182.749 58.9457 182.096 58.2326 182.067 57.9931C182.037 57.7536 182.074 57.5816 181.891 57.0477C182.022 56.9883 182.157 56.9409 182.296 56.906C182.315 57.0622 182.384 57.3221 182.613 57.6484C182.998 58.1949 183.237 59.2229 183.493 59.3843C183.748 59.5457 184.235 59.3982 184.235 59.3982C184.235 59.3982 185.573 60.5702 186.834 59.9195C186.883 59.617 186.775 59.1409 186.638 58.7178C186.595 58.5851 186.549 58.4579 186.503 58.3424C186.393 58.0622 186.288 57.854 186.245 57.8163C186.245 57.8163 185.873 57.5851 185.043 57.7549C184.988 57.6978 184.747 57.6426 184.656 57.6297C184.58 57.4822 184.435 57.0735 184.506 57.0309C184.581 56.9854 185.001 57.0632 185.28 57.1245C185.59 57.1923 185.946 57.5864 186.608 57.5987C187.318 57.6123 188.367 57.1039 188.699 56.469C189.073 55.7566 188.946 54.7315 188.425 54.328C188.775 55.0775 188.683 55.7088 188.389 56.1862C187.948 56.8947 187.126 57.1988 186.631 57.1894C186.256 57.1783 185.889 57.0726 185.566 56.8821C185.566 56.8821 184.189 56.5439 184.099 56.8553C184.059 56.9967 184.134 57.2365 184.228 57.4573C184.304 57.6312 184.39 57.8004 184.486 57.9641C184.486 57.9641 184.815 57.948 184.844 58.1845C184.925 58.117 185.017 58.0638 185.115 58.0274C185.176 58.005 185.238 57.9884 185.302 57.9776C185.425 58.0604 185.518 58.1799 185.57 58.3191C185.626 58.4763 185.62 58.6452 185.595 58.8033C185.567 58.987 185.511 59.1558 185.496 59.2762C185.481 59.3925 185.512 59.5102 185.583 59.6035C185.165 59.5215 184.705 59.3453 184.464 59.0431C183.836 59.0857 183.72 59.2423 183.519 58.6203C183.317 57.9983 182.866 57.3666 182.681 57.1097C182.628 57.0267 182.606 56.9269 182.622 56.8292C182.641 56.6889 182.695 56.5557 182.779 56.4419C182.878 56.3002 183.014 56.188 183.172 56.1171C183.614 55.9235 185.411 55.4622 185.676 55.1078C185.941 54.7534 185.821 53.9975 187.111 53.5159C186.743 53.3961 185.676 53.9271 185.411 54.8667C184.91 55.1943 183.63 55.5665 183.282 55.6695C182.982 55.756 182.713 55.9268 182.507 56.1617C182.416 56.265 182.344 56.3834 182.294 56.5116C182.294 56.5151 182.291 56.5187 182.29 56.5222C182.005 56.6226 181.542 56.7837 181.537 57.0064C181.533 57.2559 181.71 57.6168 181.699 58.1339C181.696 58.2669 181.921 58.5457 182.132 58.7775C182.085 59.2733 181.543 59.4647 181.322 59.6303C181.261 59.6753 181.213 59.735 181.181 59.8039C181.129 59.6296 181.094 59.4505 181.077 59.2694C180.799 58.8895 180.697 58.7852 180.646 58.6239C180.608 58.5038 180.664 57.8537 180.697 57.4941C180.739 57.4893 180.829 57.5525 181.007 57.6513C180.773 57.2892 180.477 56.8802 180.595 56.5116C180.68 56.2534 180.876 56.1536 181.214 55.9667C181.313 55.9119 181.501 55.835 181.72 55.7453C181.836 55.6979 181.961 55.6465 182.086 55.5926C182.533 55.4015 182.99 55.1785 183.089 54.9794C183.239 54.6746 183.347 54.5275 183.425 54.3983C183.454 54.6611 183.511 54.92 183.595 55.1708C183.575 53.3632 184.231 52.2306 184.49 51.8549C184.52 52.2157 184.52 52.5783 184.49 52.9391C184.914 52.5424 184.873 50.5586 184.132 49.3042C184.406 48.7071 184.147 48.11 183.938 47.8808C184.032 48.3049 184.11 48.6232 183.944 49.0192C183.964 48.82 183.935 48.6189 183.859 48.4334C183.856 48.4244 183.843 48.4305 183.845 48.4392C183.906 48.7029 183.871 48.9705 183.78 49.2239C183.75 49.3059 183.715 49.3872 183.677 49.466C183.423 49.7778 183.019 49.8759 182.811 50.2458C182.654 50.1787 182.308 50.0554 182.06 50.1554C181.991 50.1774 181.925 50.2091 181.865 50.2497C181.81 50.2853 181.764 50.3334 181.73 50.3901C181.809 50.3013 182.053 50.2287 182.247 50.2316C182.279 50.2339 182.446 50.2568 182.537 50.4717C182.537 50.4752 182.536 50.4786 182.534 50.4817L182.538 50.474C182.583 50.5818 182.608 50.7377 182.589 50.9624C182.536 51.1841 182.484 51.3846 182.409 51.4766C182.265 51.6521 181.793 51.9339 181.539 51.9827C181.429 52.0007 181.316 51.9867 181.214 51.9423C181.304 51.8701 181.401 51.8081 181.504 51.7574C182.021 51.5085 182.286 51.3565 182.36 51.217C182.462 51.0279 182.264 50.7148 182.038 50.5841C182.128 50.5563 182.229 50.5876 182.302 50.606C182.199 50.4901 181.904 50.4256 181.792 50.5337C181.52 50.7974 181.523 51.3842 181.054 51.5792C180.933 51.6281 180.806 51.6617 180.677 51.6793L180.674 51.6773C180.413 51.4962 180.251 51.2467 180.233 51.0485C180.212 50.8387 180.254 50.5644 180.43 50.403C180.453 50.3817 180.478 50.3628 180.505 50.3465C180.563 50.2077 180.634 49.9914 180.707 49.7555C180.861 49.2526 181.014 48.661 181.028 48.5351C181.048 48.3501 180.822 47.8534 180.843 47.621C180.854 47.4977 180.991 47.2465 181.086 47.0848C181.118 47.0309 181.145 46.988 181.161 46.9609L181.202 47.0542L181.24 47.1416C181.247 47.15 181.255 47.1579 181.264 47.1652C181.146 47.4557 181.135 47.825 181.207 48.118C181.224 47.9324 181.239 47.7494 181.291 47.5693C181.323 47.4554 181.365 47.3456 181.406 47.2349C181.52 47.2598 181.7 47.2427 181.966 47.0764C182.078 47.011 182.168 46.9136 182.224 46.7969C182.225 46.7944 182.226 46.7919 182.227 46.7895L182.421 46.5677C182.434 46.6219 182.454 46.6742 182.481 46.7233C182.481 46.6129 182.539 46.4457 182.617 46.2934C182.64 46.2485 182.665 46.2049 182.69 46.1643C182.901 45.8276 183.303 45.7262 183.559 45.6016C183.458 45.6962 183.35 45.786 183.252 45.8834C183.159 45.972 183.082 46.076 183.024 46.1907C182.96 46.3222 182.933 46.4689 182.947 46.6145V46.632C182.95 46.6255 182.952 46.6187 182.954 46.6123C183.019 46.4395 183.113 46.2791 183.232 46.1381C183.314 46.0409 183.406 45.9516 183.505 45.8715C183.569 45.8179 183.666 45.7466 183.748 45.6646C183.733 45.786 183.71 45.9064 183.68 46.0248C183.65 46.1366 183.599 46.2418 183.531 46.335C183.489 46.3905 183.44 46.4454 183.394 46.5012C183.237 46.6881 183.102 46.8828 183.317 47.1236C183.24 46.9154 183.522 46.7162 183.64 46.5858C183.692 46.5298 183.738 46.4689 183.778 46.4041C183.82 46.3374 183.855 46.2672 183.885 46.1943C183.95 46.2339 184.012 46.2796 184.069 46.3308C184.472 46.6891 184.677 47.3011 184.228 47.426C184.448 47.5509 185.37 47.6226 185.234 46.5793C185.499 46.7436 185.782 46.8821 186.063 47.0403C187.206 47.6858 186.907 48.435 186.81 48.528C187.072 48.5215 187.382 48.3233 187.373 47.7013C187.373 47.7029 187.374 47.7049 187.375 47.7068C187.582 48.3169 187.584 48.6648 187.584 48.6648C187.747 48.5209 187.927 48.3333 187.95 47.9799C187.962 48.039 188.129 48.6229 188.09 49.2135C188.205 49.1748 188.503 49.108 188.675 48.6487C188.729 48.8101 188.898 49.1535 189.006 49.5334C189.077 49.7855 189.13 50.055 189.119 50.3184C189.101 50.7513 188.894 50.964 188.877 51.013C188.892 51.0153 189.375 51.0544 189.67 50.5541C189.961 51.0789 190.415 51.8839 191.108 52.6315C191.131 52.656 191.166 52.6915 191.205 52.7309C191.254 52.5727 191.305 52.4152 191.359 52.2586C191.108 52.0298 190.826 51.6948 190.571 51.2199ZM185.591 57.9641C185.71 57.9721 185.828 57.9938 185.943 58.0286C186 58.1649 186.077 58.3514 186.154 58.5474C186.202 58.6707 186.251 58.7978 186.294 58.9198C186.41 59.2404 186.493 59.5221 186.456 59.587C186.418 59.6519 186.205 59.6748 185.921 59.6516C185.75 59.4085 185.755 59.2278 185.792 58.9305C185.796 58.8892 185.802 58.8453 185.808 58.7988C185.819 58.6848 185.811 58.5697 185.783 58.4586C185.74 58.2864 185.675 58.1203 185.591 57.9641V57.9641ZM181.888 59.5212C182.075 59.3808 182.204 59.1338 182.283 58.9369C182.358 59.0151 182.421 59.0783 182.458 59.1142C182.42 59.6125 182.28 60.5463 181.756 60.7813C181.594 60.7168 181.453 60.5018 181.34 60.2484C181.399 59.8769 181.566 59.7642 181.888 59.5212ZM181.934 50.7093C181.957 50.7089 181.979 50.7117 182.001 50.7177C181.994 50.9156 181.754 51.167 181.754 51.167C181.943 51.0602 182.071 50.9695 182.146 50.809C182.185 50.8511 182.214 50.902 182.23 50.9575C182.246 51.013 182.249 51.0716 182.238 51.1283C182.203 51.2797 181.584 51.535 181.296 51.6528C181.71 51.3849 181.731 50.7151 181.934 50.7096V50.7093ZM181.862 46.8876C181.744 46.9783 181.585 47.0329 181.467 47.0019L181.461 46.9886L181.287 46.6281L180.544 45.091L181.04 45.59C181.013 45.6381 180.978 45.6917 180.925 45.7043C180.956 45.7114 180.988 45.7094 181.018 45.6987C181.048 45.6879 181.074 45.6688 181.094 45.6436L181.327 45.8799C181.279 45.9864 181.201 46.1175 181.08 46.1381C181.235 46.1827 181.354 46.0839 181.409 45.9632L181.707 46.2637C181.675 46.3799 181.61 46.5219 181.452 46.5864C181.414 46.6023 181.374 46.6131 181.333 46.6187C181.51 46.6607 181.637 46.6081 181.717 46.5219C181.758 46.4765 181.788 46.4225 181.805 46.3641L181.912 46.4722L182.015 46.5758C182.049 46.6833 181.974 46.8021 181.862 46.8879V46.8876ZM190.415 50.9065C190.321 50.8171 189.964 50.402 189.811 50.2019C189.885 49.9711 189.872 49.8117 189.821 49.5767C189.757 49.964 189.48 50.4088 189.337 50.5873C189.402 50.3459 189.376 50.0863 189.337 49.8433C189.289 49.5708 189.21 49.3048 189.1 49.0505C188.865 48.476 188.865 48.476 188.662 47.9763C188.544 48.4537 188.443 48.6764 188.286 48.8695C188.295 48.7167 188.285 48.5634 188.256 48.4131C188.245 48.3501 188.148 47.8608 187.689 47.203C187.73 47.508 187.851 47.8695 187.707 48.2107C187.697 47.955 187.528 47.2149 187.017 46.9196C187.16 47.1662 187.286 47.9389 187.114 48.1368C187.131 47.7107 186.834 47.3182 186.511 47.0596C186.272 46.8689 184.95 46.1313 184.945 46.1313C184.948 46.1346 185.192 47.1994 184.657 47.2837C184.772 47.0254 184.603 46.5651 184.333 46.2653C184.218 46.1384 184.086 46.0393 183.948 45.9977C183.951 45.9838 183.954 45.9699 183.956 45.9557C184 45.7046 183.983 45.4128 183.898 45.1917C183.667 45.4403 183.085 45.4509 182.769 45.7246C182.632 45.8418 182.488 46.0213 182.429 46.2266L182.328 46.3657L182.254 46.468C182.251 46.4472 182.243 46.4274 182.232 46.4096L182.216 46.3941L181.362 45.5813C181.164 45.2037 181.109 44.2921 181.535 43.8864C181.516 44.1269 181.533 45.2789 181.967 45.4725C181.666 44.7624 181.986 43.4406 183.496 43.4326C183.219 43.6388 183.008 43.9765 182.915 44.2024C182.815 44.3115 182.727 44.4305 182.651 44.5575C182.76 44.4929 183.113 43.8929 184.438 43.889C184.79 43.889 185.172 43.9274 185.484 44.1049C184.948 43.9723 184.377 44.2663 183.932 44.5655C184.246 44.4648 184.702 44.163 185.344 44.2886C185.775 44.3728 185.952 44.7702 186.308 44.9755C186.599 45.1427 187.011 45.1304 187.201 44.8179C187.249 44.7402 187.272 44.6506 187.27 44.5597C187.351 44.6462 187.422 44.7419 187.482 44.8447C187.614 45.0737 187.669 45.339 187.64 45.6016C187.488 45.5921 187.336 45.5992 187.186 45.623C187.024 45.6426 186.863 45.662 186.702 45.6436C186.475 45.6154 186.257 45.5404 186.061 45.4235C185.994 45.3834 185.929 45.339 185.868 45.2905C185.905 45.3437 185.945 45.3944 185.989 45.4422C186.151 45.6222 186.362 45.751 186.596 45.8127C186.975 45.9147 187.344 45.7727 187.722 45.8395C187.966 45.8825 188.246 45.9912 188.533 46.0187C188.753 46.0397 188.978 46.0122 189.192 45.8696C189.279 45.8098 189.353 45.7321 189.407 45.6417C189.482 45.8475 189.491 46.0714 189.434 46.2827L189.424 46.315C189.39 46.4342 189.328 46.5437 189.244 46.6345L189.235 46.6442C189.153 46.7246 189.054 46.752 188.961 46.8076C188.649 46.6784 188.299 46.6345 187.961 46.6139C188.265 46.7107 188.577 46.8076 188.864 46.9451C189.152 47.0826 189.346 47.3001 189.547 47.5422C189.715 47.7443 189.91 47.9273 190.173 47.9896C190.353 48.0323 190.542 48.0232 190.717 47.9631C190.764 48.2262 190.52 48.6551 190.18 48.7119C190.345 48.8168 190.522 48.9004 190.707 48.9608C190.578 49.0773 190.27 49.1638 190.071 49.1742C190.548 49.424 190.788 50.0896 190.777 50.6302C190.701 50.465 190.613 50.2752 190.413 50.1309C190.47 50.3643 190.459 50.6464 190.417 50.9068L190.415 50.9065Z" fill="#083751"/>
-<path d="M182.852 48.2161C182.83 48.0992 182.787 47.9701 182.705 47.883C182.825 47.7976 182.964 47.7411 183.109 47.7177C182.749 47.6312 182.507 47.7674 182.233 48.034C182.061 48.2006 181.857 48.6192 181.816 48.7419C181.766 48.8871 181.428 48.7683 181.428 48.7683C181.499 48.8574 181.645 48.971 181.8 48.9739C181.917 48.9762 181.92 48.9136 181.973 48.8026C182.291 48.657 182.634 48.655 182.764 48.5488C182.863 48.4678 182.873 48.3452 182.852 48.2161ZM182.045 48.6647C182.156 48.4652 182.34 48.1851 182.58 47.9798C182.644 48.0363 182.683 48.1628 182.695 48.2429C182.745 48.5492 182.472 48.4401 182.043 48.665L182.045 48.6647Z" fill="#083751"/>
-<path d="M180.9 50.0938C180.59 50.3214 180.593 50.894 180.721 51.0945C180.687 50.824 180.759 50.2594 181.018 50.2552C181.187 50.2517 181.272 50.3033 181.312 50.3395L181.34 50.3734C181.344 50.3472 181.342 50.3206 181.336 50.2949C181.333 49.9638 181.525 49.6658 181.643 49.3534C181.451 49.5657 181.289 49.8037 181.162 50.0606C181.09 50.0215 180.999 50.0215 180.9 50.0938Z" fill="#083751"/>
-<path d="M196.303 50.6121C196.114 50.501 195.947 50.3561 195.811 50.1845C195.655 49.9965 195.577 49.7357 195.577 49.4021C195.577 48.7999 195.958 48.3589 196.722 48.0792L198.69 47.3694H199.271C199.723 47.3694 200.075 47.4985 200.328 47.7567C200.58 48.0149 200.707 48.3699 200.707 48.8215V57.7749C200.545 57.816 200.38 57.8483 200.215 57.8718C199.988 57.9053 199.759 57.9215 199.529 57.9202C199.013 57.9202 198.639 57.8341 198.408 57.662C198.177 57.4898 198.061 57.1618 198.061 56.6779V50.0151L196.303 50.6121Z" fill="#323232"/>
-<path d="M202.578 47.7727C202.578 47.3641 202.715 47.0199 202.989 46.7402C203.264 46.4605 203.627 46.3207 204.078 46.3208C204.53 46.3208 204.893 46.4606 205.167 46.7402C205.442 47.0198 205.579 47.364 205.579 47.7727C205.579 48.1815 205.442 48.5257 205.167 48.8052C204.893 49.0849 204.53 49.2248 204.078 49.2248C203.627 49.2248 203.264 49.0849 202.989 48.8052C202.715 48.5256 202.578 48.1814 202.578 47.7727ZM202.707 50.0635C202.875 50.0217 203.044 49.9893 203.215 49.9667C203.453 49.9332 203.693 49.917 203.933 49.9183C204.471 49.9183 204.858 50.007 205.095 50.1844C205.332 50.3619 205.45 50.7033 205.45 51.2088V57.7747C205.282 57.8166 205.113 57.8489 204.942 57.8716C204.704 57.9051 204.464 57.9212 204.224 57.92C203.686 57.92 203.299 57.8313 203.062 57.6538C202.826 57.4764 202.708 57.1349 202.707 56.6294L202.707 50.0635Z" fill="#323232"/>
-<path d="M214.903 57.7748C214.736 57.8167 214.566 57.849 214.395 57.8717C214.157 57.9051 213.918 57.9213 213.677 57.9201C213.139 57.9201 212.752 57.8314 212.516 57.6539C212.28 57.4765 212.161 57.135 212.161 56.6295V52.8222C212.161 52.489 212.061 52.2443 211.862 52.0882C211.663 51.9321 211.403 51.8541 211.08 51.8543C210.876 51.8529 210.672 51.88 210.475 51.935C210.289 51.9881 210.108 52.0583 209.935 52.1448V57.7749C209.767 57.8168 209.597 57.8491 209.426 57.8718C209.189 57.9052 208.949 57.9214 208.709 57.9202C208.171 57.9202 207.783 57.8315 207.547 57.654C207.311 57.4766 207.192 57.1351 207.192 56.6296V51.7736C207.192 51.4833 207.254 51.2466 207.377 51.0638C207.515 50.8673 207.687 50.6978 207.886 50.5637C208.251 50.3054 208.711 50.0984 209.265 49.9426C209.819 49.7867 210.435 49.7087 211.112 49.7086C212.327 49.7086 213.263 49.9748 213.919 50.5072C214.575 51.0395 214.903 51.7843 214.903 52.7415L214.903 57.7748Z" fill="#323232"/>
-<path d="M221.017 51.8703C220.756 51.869 220.497 51.9127 220.251 51.9995C220.016 52.0815 219.801 52.2135 219.622 52.3866C219.438 52.5681 219.293 52.7849 219.194 53.0239C219.087 53.2767 219.033 53.5697 219.033 53.903C219.033 54.5701 219.221 55.0648 219.598 55.3872C219.974 55.7096 220.442 55.8709 221.001 55.8712C221.291 55.876 221.579 55.8352 221.856 55.7502C222.076 55.6802 222.292 55.5967 222.501 55.5002C222.706 55.6508 222.859 55.8121 222.961 55.9841C223.063 56.1562 223.114 56.366 223.114 56.6133C223.114 57.0436 222.902 57.3878 222.477 57.6457C222.052 57.9037 221.447 58.0328 220.662 58.0331C219.985 58.0331 219.374 57.9443 218.831 57.7669C218.288 57.5895 217.826 57.326 217.444 56.9764C217.056 56.6188 216.756 56.1774 216.565 55.6858C216.36 55.1751 216.258 54.5809 216.258 53.9031C216.258 53.1934 216.374 52.575 216.605 52.0479C216.836 51.5209 217.151 51.0853 217.549 50.7413C217.952 50.3939 218.421 50.1306 218.928 49.9669C219.462 49.793 220.02 49.7058 220.582 49.7087C221.356 49.7087 221.953 49.8486 222.372 50.1283C222.792 50.408 223.001 50.7683 223.001 51.2092C223.003 51.4093 222.953 51.6064 222.856 51.7819C222.766 51.9506 222.652 52.1054 222.517 52.2416C222.303 52.1435 222.082 52.06 221.856 51.9915C221.584 51.9089 221.301 51.868 221.017 51.8703V51.8703Z" fill="#323232"/>
-<path d="M231.721 57.8718C231.483 57.9053 231.243 57.9214 231.003 57.9202C230.465 57.9202 230.078 57.8315 229.842 57.654C229.605 57.4766 229.487 57.1351 229.487 56.6296V53.0482C229.487 52.6073 229.377 52.2981 229.156 52.1206C228.936 51.943 228.664 51.8543 228.341 51.8544C228.142 51.8523 227.944 51.8795 227.752 51.9351C227.581 51.9864 227.416 52.0568 227.26 52.1449V57.7751C227.093 57.8169 226.923 57.8493 226.752 57.8719C226.514 57.9054 226.275 57.9216 226.034 57.9203C225.496 57.9203 225.109 57.8316 224.873 57.6542C224.636 57.4767 224.518 57.1353 224.518 56.6298V47.2728C224.685 47.2309 224.855 47.1986 225.026 47.1759C225.264 47.1425 225.504 47.1263 225.744 47.1275C226.282 47.1275 226.669 47.2162 226.905 47.3937C227.142 47.5711 227.26 47.9126 227.26 48.4181V50.0152C227.496 49.923 227.739 49.8502 227.986 49.7974C228.273 49.7365 228.565 49.7068 228.857 49.7087C229.922 49.7087 230.75 49.9749 231.342 50.5072C231.933 51.0396 232.229 51.8328 232.229 52.8868V57.7749C232.062 57.8167 231.892 57.8491 231.721 57.8718Z" fill="#323232"/>
-<defs>
-<filter id="filter0_d" x="65.2697" y="27.8423" width="110.72" height="56" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="10"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.168627 0 0 0 0 0.443137 0 0 0 0 1 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
-</filter>
-<clipPath id="clip0">
-<rect width="64.1667" height="11" fill="white" transform="translate(173.979 7.3269)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/app/images/switch_acc.svg b/app/images/switch_acc.svg
deleted file mode 100644
index 436e2e28a..000000000
--- a/app/images/switch_acc.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg fill="#f7861c" height="24" viewBox="78.469 0 29.477 24" width="29.477" xmlns="http://www.w3.org/2000/svg">
-    <path d="M90.437 9.087c0 1.669 1.423 4.766 3.177 4.766 1.755 0 3.177-3.097 3.177-4.766 0-1.668-1.422-3.021-3.177-3.021s-3.177 1.352-3.177 3.021z"/>
-    <path d="M93.613 17.091h4.042c1.108 0 1.503-.249 1.503-.84 0-1.21-1.158-2.147-2.867-2.62-.713.861-1.619 1.467-2.678 1.467-1.057 0-1.964-.605-2.676-1.467-1.709.473-2.867 1.41-2.867 2.62 0 .591.395.84 1.502.84zM86.392 4.841a10.252 10.252 0 017.268-3.006c1.47 0 2.892.304 4.225.902.166.075.36.039.488-.09l.558-.556a.438.438 0 00-.121-.705A12.001 12.001 0 0093.66.22c-1.545 0-3.052.292-4.478.869a11.794 11.794 0 00-3.933 2.609 11.798 11.798 0 00-3.325 6.495 12.001 12.001 0 00.17 4.684l-.732-.497a.438.438 0 00-.608.117l-.45.664a.44.44 0 00.117.609l2.638 1.787.259.177a.437.437 0 00.345.063.437.437 0 00.264-.18l1.965-2.897a.44.44 0 00-.118-.608l-.665-.45a.436.436 0 00-.607.116l-.741 1.093a10.333 10.333 0 01-.22-4.541 10.19 10.19 0 012.851-5.489z"/>
-    <path d="M106.979 8.028a.44.44 0 00-.226-.248l-2.443-1.142-.727-.34a.44.44 0 00-.583.211l-1.482 3.17a.438.438 0 00.212.582l.728.34a.442.442 0 00.335.015.439.439 0 00.247-.226l.509-1.087c.43 1.52.505 3.12.213 4.694a10.211 10.211 0 01-2.832 5.382 10.257 10.257 0 01-7.268 3.005c-1.393 0-2.743-.273-4.018-.812a.44.44 0 00-.48.095l-.561.561a.438.438 0 00.129.709A12.015 12.015 0 0093.661 24a11.862 11.862 0 008.412-3.478 11.803 11.803 0 003.304-6.378 11.895 11.895 0 00-.273-5.281l.939.439a.438.438 0 00.583-.211l.34-.727a.43.43 0 00.013-.336z"/>
-</svg>

From 39906d61241bb5e2ab294b3304dc1bda6c99d7d2 Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Wed, 7 Jul 2021 15:08:00 -0500
Subject: [PATCH 097/141] upgrade @metamask/controllers to v12.0.0 (#11472)

---
 package.json |  2 +-
 yarn.lock    | 20 +++++++++++---------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 8099f0356..438a9dd50 100644
--- a/package.json
+++ b/package.json
@@ -101,7 +101,7 @@
     "@lavamoat/preinstall-always-fail": "^1.0.0",
     "@material-ui/core": "^4.11.0",
     "@metamask/contract-metadata": "^1.27.0",
-    "@metamask/controllers": "^10.0.0",
+    "@metamask/controllers": "^12.0.0",
     "@metamask/eth-ledger-bridge-keyring": "^0.6.0",
     "@metamask/eth-token-tracker": "^3.0.1",
     "@metamask/etherscan-link": "^2.1.0",
diff --git a/yarn.lock b/yarn.lock
index df90ec976..ee4ddf525 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2646,17 +2646,19 @@
     semver "^7.3.5"
     yargs "^17.0.1"
 
-"@metamask/contract-metadata@^1.19.0", "@metamask/contract-metadata@^1.25.0", "@metamask/contract-metadata@^1.27.0":
+"@metamask/contract-metadata@^1.19.0", "@metamask/contract-metadata@^1.27.0":
   version "1.27.0"
   resolved "https://registry.yarnpkg.com/@metamask/contract-metadata/-/contract-metadata-1.27.0.tgz#1e65b821bad6f7d8313dd881116e4366b0662f75"
   integrity sha512-ZAvuROiHjSksy40buCL4M6m16bAmXQl6vjllK/XQxt9+UElhwJSp7PJ1ZULuZXmznBBY64WXlCPjm94JhW4l3g==
 
-"@metamask/controllers@^10.0.0":
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/@metamask/controllers/-/controllers-10.1.0.tgz#ec0a3751fa658966e9818038784ab6b555c95382"
-  integrity sha512-Me0jzI5CIOdfXkpm3eBOEIxDGlgbKQaW1au0GQdVgbW93ZxDueTqLUg9xSGSfGSJ3i+Alfqi/tnGqT/nwa/5CQ==
+"@metamask/controllers@^12.0.0":
+  version "12.0.0"
+  resolved "https://registry.yarnpkg.com/@metamask/controllers/-/controllers-12.0.0.tgz#afc36e6e8eb53133996b6e41dfc30d01c25ba9d9"
+  integrity sha512-YGi3rcfBjjL0UqtyoAgYQUmjBJ4V9e1uQPcmreDghDxeyFdTMAXEySWlyON84SLgsCK1FLiZ2rYm/P/FIhUXJw==
   dependencies:
-    "@metamask/contract-metadata" "^1.25.0"
+    "@ethereumjs/common" "^2.3.1"
+    "@ethereumjs/tx" "^3.2.1"
+    "@metamask/contract-metadata" "^1.27.0"
     "@types/uuid" "^8.3.0"
     async-mutex "^0.2.6"
     babel-runtime "^6.26.0"
@@ -2668,9 +2670,9 @@
     eth-query "^2.1.2"
     eth-rpc-errors "^4.0.0"
     eth-sig-util "^3.0.0"
-    ethereumjs-tx "^1.3.7"
     ethereumjs-util "^7.0.10"
     ethereumjs-wallet "^1.0.1"
+    ethjs-unit "^0.1.6"
     ethjs-util "^0.1.6"
     human-standard-collectible-abi "^1.0.2"
     human-standard-token-abi "^2.0.0"
@@ -10903,7 +10905,7 @@ ethereumjs-tx@2.1.2, ethereumjs-tx@^2.1.1, ethereumjs-tx@^2.1.2:
     ethereumjs-common "^1.5.0"
     ethereumjs-util "^6.0.0"
 
-ethereumjs-tx@^1.1.1, ethereumjs-tx@^1.2.0, ethereumjs-tx@^1.2.2, ethereumjs-tx@^1.3.3, ethereumjs-tx@^1.3.4, ethereumjs-tx@^1.3.7:
+ethereumjs-tx@^1.1.1, ethereumjs-tx@^1.2.0, ethereumjs-tx@^1.2.2, ethereumjs-tx@^1.3.3, ethereumjs-tx@^1.3.4:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/ethereumjs-tx/-/ethereumjs-tx-1.3.7.tgz#88323a2d875b10549b8347e09f4862b546f3d89a"
   integrity sha512-wvLMxzt1RPhAQ9Yi3/HKZTn0FZYpnsmQdbKYfUUpi4j1SEIcbkd9tndVjcPrufY3V7j2IebOpC00Zp2P/Ay2kA==
@@ -11241,7 +11243,7 @@ ethjs-schema@0.2.1:
   resolved "https://registry.yarnpkg.com/ethjs-schema/-/ethjs-schema-0.2.1.tgz#47e138920421453617069034684642e26bb310f4"
   integrity sha512-DXd8lwNrhT9sjsh/Vd2Z+4pfyGxhc0POVnLBUfwk5udtdoBzADyq+sK39dcb48+ZU+2VgtwHxtGWnLnCfmfW5g==
 
-ethjs-unit@0.1.6:
+ethjs-unit@0.1.6, ethjs-unit@^0.1.6:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/ethjs-unit/-/ethjs-unit-0.1.6.tgz#c665921e476e87bce2a9d588a6fe0405b2c41699"
   integrity sha1-xmWSHkduh7ziqdWIpv4EBbLEFpk=

From 0ca0f1784e5e2a597141c7c0a7165cbd2b3f568b Mon Sep 17 00:00:00 2001
From: Alex Donesky <adonesky@gmail.com>
Date: Wed, 7 Jul 2021 19:10:12 -0500
Subject: [PATCH 098/141] Add recovery-phrase views for new onboarding flow
 (#11434)

* add recovery-phrase views for new onboarding flow

* black => ui-black

* minor syntax improvement
---
 app/_locales/en/messages.json                 |  22 ++++
 ui/components/app/app-components.scss         |   1 +
 ui/components/app/step-progress-bar/index.js  |   1 +
 .../app/step-progress-bar/index.scss          |  66 ++++++++++
 .../step-progress-bar/step-progress-bar.js    |  50 +++++++
 ui/components/ui/chip/chip.scss               |   2 +
 .../confirm-recovery-phrase.js                | 100 ++++++++++++++
 .../recovery-phrase/index.scss                | 110 ++++++++++++++++
 .../recovery-phrase/recovery-phrase-chips.js  | 101 ++++++++++++++
 .../recovery-phrase/review-recovery-phrase.js | 124 ++++++++++++++++++
 10 files changed, 577 insertions(+)
 create mode 100644 ui/components/app/step-progress-bar/index.js
 create mode 100644 ui/components/app/step-progress-bar/index.scss
 create mode 100644 ui/components/app/step-progress-bar/step-progress-bar.js
 create mode 100644 ui/pages/onboarding-flow/recovery-phrase/confirm-recovery-phrase.js
 create mode 100644 ui/pages/onboarding-flow/recovery-phrase/index.scss
 create mode 100644 ui/pages/onboarding-flow/recovery-phrase/recovery-phrase-chips.js
 create mode 100644 ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 554cbc1a6..45728a415 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -322,6 +322,9 @@
   "confirmSecretBackupPhrase": {
     "message": "Confirm your Secret Backup Phrase"
   },
+  "confirmSeedPhrase": {
+    "message": "Confirm Seed Phrase"
+  },
   "confirmed": {
     "message": "Confirmed"
   },
@@ -1140,6 +1143,10 @@
   "makeAnotherSwap": {
     "message": "Create a new swap"
   },
+  "makeSureNoOneWatching": {
+    "message": "Make sure no one is watching your screen",
+    "description": "Warning to users to be care while creating and saving their new seed phrase"
+  },
   "max": {
     "message": "Max"
   },
@@ -1696,12 +1703,21 @@
   "secretPhrase": {
     "message": "Enter your secret phrase here to restore your vault."
   },
+  "secureWallet": {
+    "message": "Secure Wallet"
+  },
   "securityAndPrivacy": {
     "message": "Security & Privacy"
   },
   "securitySettingsDescription": {
     "message": "Privacy settings and wallet Secret Recovery Phrase"
   },
+  "seedPhraseConfirm": {
+    "message": "Confirm Secret Recovery Phrase"
+  },
+  "seedPhraseEnterMissingWords": {
+    "message": "Confirm Secret Recovery Phrase"
+  },
   "seedPhraseIntroSidebarBulletFour": {
     "message": "Write down and store in multiple secret places."
   },
@@ -1747,6 +1763,12 @@
   "seedPhraseReq": {
     "message": "Secret Recovery Phrases contain 12, 15, 18, 21, or 24 words"
   },
+  "seedPhraseWriteDownDetails": {
+    "message": "Write down this 12-word Secret Recovery Phrase and save it in a place that you trust and only you can access."
+  },
+  "seedPhraseWriteDownHeader": {
+    "message": "Write down your Secret Recovery Phrase"
+  },
   "selectAHigherGasFee": {
     "message": "Select a higher gas fee to accelerate the processing of your transaction.*"
   },
diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss
index b579de073..c868491ac 100644
--- a/ui/components/app/app-components.scss
+++ b/ui/components/app/app-components.scss
@@ -28,6 +28,7 @@
 @import 'permissions-connect-footer/index';
 @import 'permissions-connect-header/index';
 @import 'recovery-phrase-reminder/index';
+@import 'step-progress-bar/index.scss';
 @import 'selected-account/index';
 @import 'sidebars/index';
 @import 'signature-request/index';
diff --git a/ui/components/app/step-progress-bar/index.js b/ui/components/app/step-progress-bar/index.js
new file mode 100644
index 000000000..8a02cf42f
--- /dev/null
+++ b/ui/components/app/step-progress-bar/index.js
@@ -0,0 +1 @@
+export { default } from './step-progress-bar';
diff --git a/ui/components/app/step-progress-bar/index.scss b/ui/components/app/step-progress-bar/index.scss
new file mode 100644
index 000000000..b2a35bef1
--- /dev/null
+++ b/ui/components/app/step-progress-bar/index.scss
@@ -0,0 +1,66 @@
+.progressbar {
+  counter-reset: step;
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.progressbar li {
+  list-style-type: none;
+  width: 25%;
+  float: left;
+  font-size: 12px;
+  position: relative;
+  text-align: center;
+  text-transform: uppercase;
+  color: #7d7d7d;
+  z-index: 2;
+}
+
+.progressbar li::before {
+  width: 30px;
+  height: 30px;
+  content: counter(step);
+  counter-increment: step;
+  line-height: 30px;
+  border: 2px solid #d6d9dc;
+  display: block;
+  text-align: center;
+  margin: 0 auto 10px auto;
+  border-radius: 50%;
+  background-color: white;
+  z-index: -1;
+}
+
+.progressbar li::after {
+  width: 100%;
+  height: 2px;
+  content: '';
+  position: absolute;
+  background-color: #d6d9dc;
+  top: 15px;
+  right: 62%;
+  z-index: -1;
+}
+
+.progressbar li:first-child::after {
+  content: none;
+}
+
+.progressbar li.active {
+  color: $primary-blue;
+}
+
+.progressbar li.active::before {
+  border-color: $primary-blue;
+  z-index: 1;
+}
+
+.progressbar li.active + li::after {
+  background-color: $primary-blue;
+  z-index: -1;
+}
+
+.progressbar li.complete::before {
+  background-color: $primary-blue;
+  color: $ui-white;
+}
diff --git a/ui/components/app/step-progress-bar/step-progress-bar.js b/ui/components/app/step-progress-bar/step-progress-bar.js
new file mode 100644
index 000000000..72e80319c
--- /dev/null
+++ b/ui/components/app/step-progress-bar/step-progress-bar.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import Box from '../../ui/box';
+
+const stages = {
+  PASSWORD_CREATE: 1,
+  SEED_PHRASE_VIDEO: 2,
+  SEED_PHRASE_REVIEW: 3,
+  SEED_PHRASE_CONFIRM: 4,
+  ONBOARDING_COMPLETE: 5,
+};
+export default function StepProgressBar({ stage = 'PASSWORD_CREATE' }) {
+  const t = useI18nContext();
+  return (
+    <Box margin={4}>
+      <ul className="progressbar">
+        <li
+          className={classnames({
+            active: stages[stage] >= 1,
+            complete: stages[stage] >= 1,
+          })}
+        >
+          {t('createPassword')}
+        </li>
+        <li
+          className={classnames({
+            active: stages[stage] >= 2,
+            complete: stages[stage] >= 3,
+          })}
+        >
+          {t('secureWallet')}
+        </li>
+        <li
+          className={classnames({
+            active: stages[stage] >= 4,
+            complete: stages[stage] >= 5,
+          })}
+        >
+          {t('confirmSeedPhrase')}
+        </li>
+      </ul>
+    </Box>
+  );
+}
+
+StepProgressBar.propTypes = {
+  stage: PropTypes.string,
+};
diff --git a/ui/components/ui/chip/chip.scss b/ui/components/ui/chip/chip.scss
index 51a176138..02c4df6a5 100644
--- a/ui/components/ui/chip/chip.scss
+++ b/ui/components/ui/chip/chip.scss
@@ -42,6 +42,8 @@
     border: none;
     background: transparent;
     text-align: center;
+    width: 100%;
+    font-size: design-system.$font-size-h5;
 
     &:focus {
       text-align: left;
diff --git a/ui/pages/onboarding-flow/recovery-phrase/confirm-recovery-phrase.js b/ui/pages/onboarding-flow/recovery-phrase/confirm-recovery-phrase.js
new file mode 100644
index 000000000..52d3926e1
--- /dev/null
+++ b/ui/pages/onboarding-flow/recovery-phrase/confirm-recovery-phrase.js
@@ -0,0 +1,100 @@
+import React, { useState, useMemo } from 'react';
+import { useHistory } from 'react-router-dom';
+import { debounce } from 'lodash';
+import PropTypes from 'prop-types';
+import Box from '../../../components/ui/box';
+import Button from '../../../components/ui/button';
+import Typography from '../../../components/ui/typography';
+import {
+  TEXT_ALIGN,
+  TYPOGRAPHY,
+  JUSTIFY_CONTENT,
+  FONT_WEIGHT,
+} from '../../../helpers/constants/design-system';
+import { INITIALIZE_END_OF_FLOW_ROUTE } from '../../../helpers/constants/routes';
+import ProgressBar from '../../../components/app/step-progress-bar';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import RecoveryPhraseChips from './recovery-phrase-chips';
+
+export default function ConfirmRecoveryPhrase({ seedPhrase = '' }) {
+  const history = useHistory();
+  const t = useI18nContext();
+  const splitSeedPhrase = seedPhrase.split(' ');
+  const indicesToCheck = [2, 3, 7];
+  const [matching, setMatching] = useState(false);
+
+  // Removes seed phrase words from chips corresponding to the
+  // indicesToCheck so that user has to complete the phrase and confirm
+  // they have saved it.
+  const initializePhraseElements = () => {
+    const phraseElements = { ...splitSeedPhrase };
+    indicesToCheck.forEach((i) => {
+      phraseElements[i] = '';
+    });
+    return phraseElements;
+  };
+  const [phraseElements, setPhraseElements] = useState(
+    initializePhraseElements(),
+  );
+
+  const validate = useMemo(
+    () =>
+      debounce((elements) => {
+        setMatching(Object.values(elements).join(' ') === seedPhrase);
+      }, 500),
+    [setMatching, seedPhrase],
+  );
+
+  const handleSetPhraseElements = (values) => {
+    setPhraseElements(values);
+    validate(values);
+  };
+
+  return (
+    <div>
+      <ProgressBar stage="SEED_PHRASE_CONFIRM" />
+      <Box
+        justifyContent={JUSTIFY_CONTENT.CENTER}
+        textAlign={TEXT_ALIGN.CENTER}
+        marginBottom={4}
+      >
+        <Typography variant={TYPOGRAPHY.H2} fontWeight={FONT_WEIGHT.BOLD}>
+          {t('seedPhraseConfirm')}
+        </Typography>
+      </Box>
+      <Box
+        justifyContent={JUSTIFY_CONTENT.CENTER}
+        textAlign={TEXT_ALIGN.CENTER}
+        marginBottom={4}
+      >
+        <Typography variant={TYPOGRAPHY.H4}>
+          {t('seedPhraseEnterMissingWords')}
+        </Typography>
+      </Box>
+      <RecoveryPhraseChips
+        seedPhrase={splitSeedPhrase}
+        confirmPhase
+        setInputValue={handleSetPhraseElements}
+        inputValue={phraseElements}
+        indicesToCheck={indicesToCheck}
+      />
+      <div className="recovery-phrase__footer">
+        <Button
+          rounded
+          type="primary"
+          className="recovery-phrase__footer--button"
+          onClick={() => {
+            history.push(INITIALIZE_END_OF_FLOW_ROUTE);
+          }}
+          disabled={!matching}
+        >
+          {t('confirm')}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+ConfirmRecoveryPhrase.propTypes = {
+  seedPhrase: PropTypes.string,
+};
diff --git a/ui/pages/onboarding-flow/recovery-phrase/index.scss b/ui/pages/onboarding-flow/recovery-phrase/index.scss
new file mode 100644
index 000000000..7c37d0059
--- /dev/null
+++ b/ui/pages/onboarding-flow/recovery-phrase/index.scss
@@ -0,0 +1,110 @@
+.recovery-phrase {
+  &__tips {
+    flex-direction: column;
+
+    ul {
+      list-style: disc;
+      margin-left: 20px;
+    }
+  }
+
+  &__chips {
+    display: grid;
+    grid-template-columns: 160px 160px 160px;
+    justify-items: center;
+    align-items: center;
+    row-gap: 16px;
+
+    &--hidden {
+      filter: blur(5px);
+    }
+  }
+
+  &__secret {
+    position: relative;
+  }
+
+  &__secret-blocker {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    height: 100%;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 0 18px;
+    border-radius: 4px;
+    color: $ui-white;
+
+    &--text {
+      margin-top: 32px;
+    }
+  }
+
+  &__chip-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    text-align: center;
+
+    &__number {
+      font-size: $font-size-h5;
+    }
+  }
+
+  &__footer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    &--button {
+      width: 50%;
+      padding: 20px;
+    }
+
+    &--copy {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      &--button {
+        background-color: transparent;
+        border: none;
+        display: flex;
+        justify-content: space-evenly;
+        width: 40%;
+        color: $primary-blue;
+        cursor: pointer;
+        margin-bottom: 24px;
+
+        &:active {
+          color: $ui-black;
+          background-color: transparent;
+          border: none;
+          transform: scale(0.97);
+        }
+      }
+    }
+  }
+
+  &__chip {
+    justify-content: center;
+    border-radius: 13px;
+    height: 32px;
+    width: 120px;
+
+    &--with-input {
+      width: 120px;
+      box-shadow: 0 3px 4px -3px $Grey-800;
+      border-width: 2px;
+      border-radius: 13px;
+      height: 32px;
+    }
+  }
+}
diff --git a/ui/pages/onboarding-flow/recovery-phrase/recovery-phrase-chips.js b/ui/pages/onboarding-flow/recovery-phrase/recovery-phrase-chips.js
new file mode 100644
index 000000000..c46193833
--- /dev/null
+++ b/ui/pages/onboarding-flow/recovery-phrase/recovery-phrase-chips.js
@@ -0,0 +1,101 @@
+import React from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import Chip from '../../../components/ui/chip';
+import Box from '../../../components/ui/box';
+import Typography from '../../../components/ui/typography';
+import { ChipWithInput } from '../../../components/ui/chip/chip-with-input';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import {
+  TYPOGRAPHY,
+  COLORS,
+  BORDER_STYLE,
+  SIZES,
+  DISPLAY,
+} from '../../../helpers/constants/design-system';
+
+export default function RecoveryPhraseChips({
+  seedPhrase,
+  seedPhraseRevealed,
+  confirmPhase,
+  setInputValue,
+  inputValue,
+  indicesToCheck,
+}) {
+  const t = useI18nContext();
+  const hideSeedPhrase = seedPhraseRevealed === false;
+  return (
+    <Box
+      borderColor={COLORS.UI2}
+      borderStyle={BORDER_STYLE.SOLID}
+      padding={4}
+      borderWidth={1}
+      borderRadius={SIZES.MD}
+      display={DISPLAY.GRID}
+      marginBottom={4}
+      className="recovery-phrase__secret"
+    >
+      <div
+        className={classnames('recovery-phrase__chips', {
+          'recovery-phrase__chips--hidden': hideSeedPhrase,
+        })}
+      >
+        {seedPhrase.map((word, index) => {
+          if (
+            confirmPhase &&
+            indicesToCheck &&
+            indicesToCheck.includes(index)
+          ) {
+            return (
+              <div className="recovery-phrase__chip-item" key={index}>
+                <div className="recovery-phrase__chip-item__number">
+                  {`${index + 1}.`}
+                </div>
+                <ChipWithInput
+                  borderColor={COLORS.PRIMARY1}
+                  className="recovery-phrase__chip--with-input"
+                  inputValue={inputValue[index]}
+                  setInputValue={(value) => {
+                    setInputValue({ ...inputValue, [index]: value });
+                  }}
+                />
+              </div>
+            );
+          }
+          return (
+            <div className="recovery-phrase__chip-item" key={index}>
+              <div className="recovery-phrase__chip-item__number">
+                {`${index + 1}.`}
+              </div>
+              <Chip className="recovery-phrase__chip" borderColor={COLORS.UI3}>
+                {word}
+              </Chip>
+            </div>
+          );
+        })}
+      </div>
+
+      {hideSeedPhrase && (
+        <div className="recovery-phrase__secret-blocker">
+          <i className="far fa-eye-slash" color="white" />
+          <Typography
+            variant={TYPOGRAPHY.H6}
+            color={COLORS.WHITE}
+            className="recovery-phrase__secret-blocker--text"
+          >
+            {t('makeSureNoOneWatching')}
+          </Typography>
+        </div>
+      )}
+    </Box>
+  );
+}
+
+RecoveryPhraseChips.propTypes = {
+  seedPhrase: PropTypes.array,
+  seedPhraseRevealed: PropTypes.bool,
+  confirmPhase: PropTypes.bool,
+  setInputValue: PropTypes.func,
+  inputValue: PropTypes.string,
+  indicesToCheck: PropTypes.array,
+};
diff --git a/ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js b/ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js
new file mode 100644
index 000000000..78f8437dc
--- /dev/null
+++ b/ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js
@@ -0,0 +1,124 @@
+import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import Box from '../../../components/ui/box';
+import Button from '../../../components/ui/button';
+import Typography from '../../../components/ui/typography';
+import Copy from '../../../components/ui/icon/copy-icon.component';
+import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import { INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE } from '../../../helpers/constants/routes';
+import {
+  TEXT_ALIGN,
+  TYPOGRAPHY,
+  JUSTIFY_CONTENT,
+  FONT_WEIGHT,
+} from '../../../helpers/constants/design-system';
+import ProgressBar from '../../../components/app/step-progress-bar';
+import RecoveryPhraseChips from './recovery-phrase-chips';
+
+export default function RecoveryPhrase({ seedPhrase }) {
+  const history = useHistory();
+  const t = useI18nContext();
+  const [copied, handleCopy] = useCopyToClipboard();
+  const [seedPhraseRevealed, setSeedPhraseRevealed] = useState(false);
+  return (
+    <div>
+      <ProgressBar stage="SEED_PHRASE_REVIEW" />
+      <Box
+        justifyContent={JUSTIFY_CONTENT.CENTER}
+        textAlign={TEXT_ALIGN.CENTER}
+        marginBottom={4}
+      >
+        <Typography variant={TYPOGRAPHY.H2} fontWeight={FONT_WEIGHT.BOLD}>
+          {t('seedPhraseWriteDownHeader')}
+        </Typography>
+      </Box>
+      <Box
+        justifyContent={JUSTIFY_CONTENT.CENTER}
+        textAlign={TEXT_ALIGN.CENTER}
+        marginBottom={4}
+      >
+        <Typography variant={TYPOGRAPHY.H4}>
+          {t('seedPhraseWriteDownDetails')}
+        </Typography>
+      </Box>
+      <Box
+        justifyContent={JUSTIFY_CONTENT.SPACE_EVENLY}
+        textAlign={TEXT_ALIGN.LEFT}
+        marginBottom={4}
+        className="recovery-phrase__tips"
+      >
+        <Typography variant={TYPOGRAPHY.H4} fontWeight={FONT_WEIGHT.BOLD}>
+          {t('tips')}:
+        </Typography>
+        <ul>
+          <li>
+            <Typography variant={TYPOGRAPHY.H4}>
+              {t('seedPhraseIntroSidebarBulletFour')}
+            </Typography>
+          </li>
+          <li>
+            <Typography variant={TYPOGRAPHY.H4}>
+              {t('seedPhraseIntroSidebarBulletTwo')}
+            </Typography>
+          </li>
+          <li>
+            <Typography variant={TYPOGRAPHY.H4}>
+              {t('seedPhraseIntroSidebarBulletThree')}
+            </Typography>
+          </li>
+          <li>
+            <Typography variant={TYPOGRAPHY.H4}>
+              {t('seedPhraseIntroSidebarBulletFour')}
+            </Typography>
+          </li>
+        </ul>
+      </Box>
+      <RecoveryPhraseChips
+        seedPhrase={seedPhrase.split(' ')}
+        seedPhraseRevealed={seedPhraseRevealed}
+      />
+      <div className="recovery-phrase__footer">
+        {seedPhraseRevealed ? (
+          <div className="recovery-phrase__footer--copy">
+            <Button
+              onClick={() => {
+                handleCopy(seedPhrase);
+              }}
+              icon={copied ? null : <Copy size={20} color="#3098DC" />}
+              className="recovery-phrase__footer--copy--button"
+            >
+              {copied ? t('copiedExclamation') : t('copyToClipboard')}
+            </Button>
+            <Button
+              rounded
+              type="primary"
+              className="recovery-phrase__footer--button"
+              onClick={() => {
+                history.push(INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE);
+              }}
+            >
+              {t('next')}
+            </Button>
+          </div>
+        ) : (
+          <Button
+            rounded
+            type="primary"
+            className="recovery-phrase__footer--button"
+            onClick={() => {
+              setSeedPhraseRevealed(true);
+            }}
+          >
+            {t('revealSeedWords')}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+RecoveryPhrase.propTypes = {
+  seedPhrase: PropTypes.string,
+};

From 64adfe7b112fed1ed09b543d9ac82576e977219a Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Thu, 8 Jul 2021 13:48:23 -0500
Subject: [PATCH 099/141] update speedup and cancel to make room for EIP-1559
 (#11407)

* prepare for EIP1559 gas fields in speedup/cancel

* Update ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
---
 app/scripts/controllers/transactions/index.js | 129 ++++++++++++++----
 .../controllers/transactions/index.test.js    |  12 +-
 app/scripts/metamask-controller.js            |  33 +++--
 .../gas-modal-page-container.container.js     |  14 +-
 .../cancel-transaction.container.js           |  21 +--
 ui/hooks/useCancelTransaction.js              |  58 +++-----
 ui/hooks/useCancelTransaction.test.js         |  28 ++--
 ui/hooks/useIncrementedGasFees.js             |  73 ++++++++++
 ui/hooks/useRetryTransaction.js               |  36 +++--
 ui/store/actions.js                           |  16 +--
 10 files changed, 285 insertions(+), 135 deletions(-)
 create mode 100644 ui/hooks/useIncrementedGasFees.js

diff --git a/app/scripts/controllers/transactions/index.js b/app/scripts/controllers/transactions/index.js
index 66a36df40..7af9f9912 100644
--- a/app/scripts/controllers/transactions/index.js
+++ b/app/scripts/controllers/transactions/index.js
@@ -50,6 +50,16 @@ export const TRANSACTION_EVENTS = {
   SUBMITTED: 'Transaction Submitted',
 };
 
+/**
+ * @typedef {Object} CustomGasSettings
+ * @property {string} [gas] - The gas limit to use for the transaction
+ * @property {string} [gasPrice] - The gasPrice to use for a legacy transaction
+ * @property {string} [maxFeePerGas] - The maximum amount to pay per gas on a
+ *  EIP-1559 transaction
+ * @property {string} [maxPriorityFeePerGas] - The maximum amount of paid fee
+ *  to be distributed to miner in an EIP-1559 transaction
+ */
+
 /**
   Transaction Controller is an aggregate of sub-controllers and trackers
   composing them in a way to be exposed to the metamask controller
@@ -468,32 +478,105 @@ export default class TransactionController extends EventEmitter {
     return { gasLimit, simulationFails };
   }
 
+  /**
+   * Given a TransactionMeta object, generate new gas params such that if the
+   * transaction was an EIP1559 transaction, it only has EIP1559 gas fields,
+   * otherwise it only has gasPrice. Will use whatever custom values are
+   * specified in customGasSettings, or falls back to incrementing by a percent
+   * which is defined by specifying a numerator. 11 is a 10% bump, 12 would be
+   * a 20% bump, and so on.
+   * @param {import(
+   *  '../../../../shared/constants/transaction'
+   * ).TransactionMeta} originalTxMeta - Original transaction to use as base
+   * @param {CustomGasSettings} [customGasSettings] - overrides for the gas
+   *  fields to use instead of the multiplier
+   * @param {number} [incrementNumerator] - Numerator from which to generate a
+   *  percentage bump of gas price. E.g 11 would be a 10% bump over base.
+   * @returns {{ newGasParams: CustomGasSettings, previousGasParams: CustomGasSettings }}
+   */
+  generateNewGasParams(
+    originalTxMeta,
+    customGasSettings = {},
+    incrementNumerator = 11,
+  ) {
+    const { txParams } = originalTxMeta;
+    const previousGasParams = {};
+    const newGasParams = {};
+    if (customGasSettings.gasLimit) {
+      newGasParams.gas = customGasSettings?.gas ?? GAS_LIMITS.SIMPLE;
+    }
+
+    if (isEIP1559Transaction(originalTxMeta)) {
+      previousGasParams.maxFeePerGas = txParams.maxFeePerGas;
+      previousGasParams.maxPriorityFeePerGas = txParams.maxPriorityFeePerGas;
+      newGasParams.maxFeePerGas =
+        customGasSettings?.maxFeePerGas ||
+        bnToHex(
+          BnMultiplyByFraction(
+            hexToBn(txParams.maxFeePerGas),
+            incrementNumerator,
+            10,
+          ),
+        );
+      newGasParams.maxPriorityFeePerGas =
+        customGasSettings?.maxPriorityFeePerGas ||
+        bnToHex(
+          BnMultiplyByFraction(
+            hexToBn(txParams.maxPriorityFeePerGas),
+            incrementNumerator,
+            10,
+          ),
+        );
+    } else {
+      previousGasParams.gasPrice = txParams.gasPrice;
+      newGasParams.gasPrice =
+        customGasSettings?.gasPrice ||
+        bnToHex(
+          BnMultiplyByFraction(
+            hexToBn(txParams.gasPrice),
+            incrementNumerator,
+            10,
+          ),
+        );
+    }
+
+    return { previousGasParams, newGasParams };
+  }
+
   /**
    * Creates a new approved transaction to attempt to cancel a previously submitted transaction. The
    * new transaction contains the same nonce as the previous, is a basic ETH transfer of 0x value to
    * the sender's address, and has a higher gasPrice than that of the previous transaction.
    * @param {number} originalTxId - the id of the txMeta that you want to attempt to cancel
-   * @param {string} [customGasPrice] - the hex value to use for the cancel transaction
+   * @param {CustomGasSettings} [customGasSettings] - overrides to use for gas
+   *  params instead of allowing this method to generate them
    * @returns {txMeta}
    */
-  async createCancelTransaction(originalTxId, customGasPrice, customGasLimit) {
+  async createCancelTransaction(originalTxId, customGasSettings) {
     const originalTxMeta = this.txStateManager.getTransaction(originalTxId);
     const { txParams } = originalTxMeta;
-    const { gasPrice: lastGasPrice, from, nonce } = txParams;
+    const { from, nonce } = txParams;
+
+    const { previousGasParams, newGasParams } = this.generateNewGasParams(
+      originalTxMeta,
+      {
+        ...customGasSettings,
+        // We want to override the previous transactions gasLimit because it
+        // will now be a simple send instead of whatever it was before such
+        // as a token transfer or contract call.
+        gasLimit: customGasSettings.gasLimit || GAS_LIMITS.SIMPLE,
+      },
+    );
 
-    const newGasPrice =
-      customGasPrice ||
-      bnToHex(BnMultiplyByFraction(hexToBn(lastGasPrice), 11, 10));
     const newTxMeta = this.txStateManager.generateTxMeta({
       txParams: {
         from,
         to: from,
         nonce,
-        gas: customGasLimit || GAS_LIMITS.SIMPLE,
         value: '0x0',
-        gasPrice: newGasPrice,
+        ...newGasParams,
       },
-      lastGasPrice,
+      previousGasParams,
       loadingDefaults: false,
       status: TRANSACTION_STATUSES.APPROVED,
       type: TRANSACTION_TYPES.CANCEL,
@@ -510,34 +593,30 @@ export default class TransactionController extends EventEmitter {
    * the same gas limit and a 10% higher gas price, though it is possible to set a custom value for
    * each instead.
    * @param {number} originalTxId - the id of the txMeta that you want to speed up
-   * @param {string} [customGasPrice] - The new custom gas price, in hex
-   * @param {string} [customGasLimit] - The new custom gas limt, in hex
+   * @param {CustomGasSettings} [customGasSettings] - overrides to use for gas
+   *  params instead of allowing this method to generate them
    * @returns {txMeta}
    */
-  async createSpeedUpTransaction(originalTxId, customGasPrice, customGasLimit) {
+  async createSpeedUpTransaction(originalTxId, customGasSettings) {
     const originalTxMeta = this.txStateManager.getTransaction(originalTxId);
     const { txParams } = originalTxMeta;
-    const { gasPrice: lastGasPrice } = txParams;
 
-    const newGasPrice =
-      customGasPrice ||
-      bnToHex(BnMultiplyByFraction(hexToBn(lastGasPrice), 11, 10));
+    const { previousGasParams, newGasParams } = this.generateNewGasParams(
+      originalTxMeta,
+      customGasSettings,
+    );
 
     const newTxMeta = this.txStateManager.generateTxMeta({
       txParams: {
         ...txParams,
-        gasPrice: newGasPrice,
+        ...newGasParams,
       },
-      lastGasPrice,
+      previousGasParams,
       loadingDefaults: false,
       status: TRANSACTION_STATUSES.APPROVED,
       type: TRANSACTION_TYPES.RETRY,
     });
 
-    if (customGasLimit) {
-      newTxMeta.txParams.gas = customGasLimit;
-    }
-
     this.addTransaction(newTxMeta);
     await this.approveTransaction(newTxMeta.id);
     return newTxMeta;
@@ -596,9 +675,9 @@ export default class TransactionController extends EventEmitter {
       customNonceValue = Number(customNonceValue);
       nonceLock = await this.nonceTracker.getNonceLock(fromAddress);
       // add nonce to txParams
-      // if txMeta has lastGasPrice then it is a retry at same nonce with higher
-      // gas price transaction and their for the nonce should not be calculated
-      const nonce = txMeta.lastGasPrice
+      // if txMeta has previousGasParams then it is a retry at same nonce with
+      // higher gas settings and therefor the nonce should not be recalculated
+      const nonce = txMeta.previousGasParams
         ? txMeta.txParams.nonce
         : nonceLock.nextNonce;
       const customOrNonce =
diff --git a/app/scripts/controllers/transactions/index.test.js b/app/scripts/controllers/transactions/index.test.js
index 26f15ccfb..6e0d6421c 100644
--- a/app/scripts/controllers/transactions/index.test.js
+++ b/app/scripts/controllers/transactions/index.test.js
@@ -739,11 +739,11 @@ describe('Transaction Controller', function () {
       const addTransactionArgs = addTransactionSpy.getCall(0).args[0];
       assert.deepEqual(addTransactionArgs.txParams, expectedTxParams);
 
-      const { lastGasPrice, type } = addTransactionArgs;
+      const { previousGasParams, type } = addTransactionArgs;
       assert.deepEqual(
-        { lastGasPrice, type },
+        { gasPrice: previousGasParams.gasPrice, type },
         {
-          lastGasPrice: '0xa',
+          gasPrice: '0xa',
           type: TRANSACTION_TYPES.RETRY,
         },
       );
@@ -762,11 +762,11 @@ describe('Transaction Controller', function () {
 
       assert.deepEqual(result.txParams, expectedTxParams);
 
-      const { lastGasPrice, type } = result;
+      const { previousGasParams, type } = result;
       assert.deepEqual(
-        { lastGasPrice, type },
+        { gasPrice: previousGasParams.gasPrice, type },
         {
-          lastGasPrice: '0xa',
+          gasPrice: '0xa',
           type: TRANSACTION_TYPES.RETRY,
         },
       );
diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
index cb6936dfc..7bd321280 100644
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@@ -1972,27 +1972,40 @@ export default class MetamaskController extends EventEmitter {
   //=============================================================================
 
   /**
-   * Allows a user to attempt to cancel a previously submitted transaction by creating a new
-   * transaction.
-   * @param {number} originalTxId - the id of the txMeta that you want to attempt to cancel
-   * @param {string} [customGasPrice] - the hex value to use for the cancel transaction
+   * Allows a user to attempt to cancel a previously submitted transaction
+   * by creating a new transaction.
+   * @param {number} originalTxId - the id of the txMeta that you want to
+   *  attempt to cancel
+   * @param {import(
+   *  './controllers/transactions'
+   * ).CustomGasSettings} [customGasSettings] - overrides to use for gas params
+   *  instead of allowing this method to generate them
    * @returns {Object} MetaMask state
    */
-  async createCancelTransaction(originalTxId, customGasPrice, customGasLimit) {
+  async createCancelTransaction(originalTxId, customGasSettings) {
     await this.txController.createCancelTransaction(
       originalTxId,
-      customGasPrice,
-      customGasLimit,
+      customGasSettings,
     );
     const state = await this.getState();
     return state;
   }
 
-  async createSpeedUpTransaction(originalTxId, customGasPrice, customGasLimit) {
+  /**
+   * Allows a user to attempt to speed up a previously submitted transaction
+   * by creating a new transaction.
+   * @param {number} originalTxId - the id of the txMeta that you want to
+   *  attempt to speed up
+   * @param {import(
+   *  './controllers/transactions'
+   * ).CustomGasSettings} [customGasSettings] - overrides to use for gas params
+   *  instead of allowing this method to generate them
+   * @returns {Object} MetaMask state
+   */
+  async createSpeedUpTransaction(originalTxId, customGasSettings) {
     await this.txController.createSpeedUpTransaction(
       originalTxId,
-      customGasPrice,
-      customGasLimit,
+      customGasSettings,
     );
     const state = await this.getState();
     return state;
diff --git a/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js b/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
index a0e399dc6..736700c0c 100644
--- a/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
+++ b/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
@@ -220,11 +220,11 @@ const mapDispatchToProps = (dispatch) => {
       dispatch(setCustomGasLimit(addHexPrefix(gasLimit.toString(16))));
       return dispatch(updateTransaction(updatedTx));
     },
-    createRetryTransaction: (txId, gasPrice, gasLimit) => {
-      return dispatch(createRetryTransaction(txId, gasPrice, gasLimit));
+    createRetryTransaction: (txId, customGasSettings) => {
+      return dispatch(createRetryTransaction(txId, customGasSettings));
     },
-    createSpeedUpTransaction: (txId, gasPrice, gasLimit) => {
-      return dispatch(createSpeedUpTransaction(txId, gasPrice, gasLimit));
+    createSpeedUpTransaction: (txId, customGasSettings) => {
+      return dispatch(createSpeedUpTransaction(txId, customGasSettings));
     },
     hideSidebar: () => dispatch(hideSidebar()),
     fetchBasicGasEstimates: () => dispatch(fetchBasicGasEstimates()),
@@ -264,7 +264,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
       if (ownProps.onSubmit) {
         dispatchHideSidebar();
         dispatchCancelAndClose();
-        ownProps.onSubmit(gasLimit, gasPrice);
+        ownProps.onSubmit({ gasLimit, gasPrice });
         return;
       }
       if (isConfirm) {
@@ -279,11 +279,11 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
         dispatchUpdateConfirmTxGasAndCalculate(gasLimit, gasPrice, updatedTx);
         dispatchHideModal();
       } else if (isSpeedUp) {
-        dispatchCreateSpeedUpTransaction(txId, gasPrice, gasLimit);
+        dispatchCreateSpeedUpTransaction(txId, { gasPrice, gasLimit });
         dispatchHideSidebar();
         dispatchCancelAndClose();
       } else if (isRetry) {
-        dispatchCreateRetryTransaction(txId, gasPrice, gasLimit);
+        dispatchCreateRetryTransaction(txId, { gasPrice, gasLimit });
         dispatchHideSidebar();
         dispatchCancelAndClose();
       } else {
diff --git a/ui/components/app/modals/cancel-transaction/cancel-transaction.container.js b/ui/components/app/modals/cancel-transaction/cancel-transaction.container.js
index f05ecdf51..6e16a9d32 100644
--- a/ui/components/app/modals/cancel-transaction/cancel-transaction.container.js
+++ b/ui/components/app/modals/cancel-transaction/cancel-transaction.container.js
@@ -10,8 +10,7 @@ const mapStateToProps = (state, ownProps) => {
     transactionId,
     originalGasPrice,
     newGasFee,
-    defaultNewGasPrice,
-    gasLimit,
+    customGasSettings,
   } = ownProps;
   const { currentNetworkTxList } = metamask;
   const transaction = currentNetworkTxList.find(
@@ -23,18 +22,15 @@ const mapStateToProps = (state, ownProps) => {
     transactionId,
     transactionStatus,
     originalGasPrice,
-    defaultNewGasPrice,
+    customGasSettings,
     newGasFee,
-    gasLimit,
   };
 };
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    createCancelTransaction: (txId, customGasPrice, customGasLimit) => {
-      return dispatch(
-        createCancelTransaction(txId, customGasPrice, customGasLimit),
-      );
+    createCancelTransaction: (txId, customGasSettings) => {
+      return dispatch(createCancelTransaction(txId, customGasSettings));
     },
     showTransactionConfirmedModal: () =>
       dispatch(showModal({ name: 'TRANSACTION_CONFIRMED' })),
@@ -42,12 +38,7 @@ const mapDispatchToProps = (dispatch) => {
 };
 
 const mergeProps = (stateProps, dispatchProps, ownProps) => {
-  const {
-    transactionId,
-    defaultNewGasPrice,
-    gasLimit,
-    ...restStateProps
-  } = stateProps;
+  const { transactionId, customGasSettings, ...restStateProps } = stateProps;
   // eslint-disable-next-line no-shadow
   const { createCancelTransaction, ...restDispatchProps } = dispatchProps;
 
@@ -56,7 +47,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     ...restDispatchProps,
     ...ownProps,
     createCancelTransaction: () =>
-      createCancelTransaction(transactionId, defaultNewGasPrice, gasLimit),
+      createCancelTransaction(transactionId, customGasSettings),
   };
 };
 
diff --git a/ui/hooks/useCancelTransaction.js b/ui/hooks/useCancelTransaction.js
index da1e08b0b..5c88d76a8 100644
--- a/ui/hooks/useCancelTransaction.js
+++ b/ui/hooks/useCancelTransaction.js
@@ -1,12 +1,7 @@
 import { useDispatch, useSelector } from 'react-redux';
 import { useCallback } from 'react';
-import { addHexPrefix } from 'ethereumjs-util';
 import { showModal, showSidebar } from '../store/actions';
 import { isBalanceSufficient } from '../pages/send/send.utils';
-import {
-  getHexGasTotal,
-  increaseLastGasPrice,
-} from '../helpers/utils/confirm-tx.util';
 import { getSelectedAccount, getIsMainnet } from '../selectors';
 import { getConversionRate } from '../ducks/metamask/metamask';
 
@@ -14,8 +9,10 @@ import {
   setCustomGasLimit,
   setCustomGasPriceForRetry,
 } from '../ducks/gas/gas.duck';
-import { multiplyCurrencies } from '../../shared/modules/conversion.utils';
 import { GAS_LIMITS } from '../../shared/constants/gas';
+import { isLegacyTransaction } from '../../shared/modules/transaction.utils';
+import { getMaximumGasTotalInHexWei } from '../../shared/modules/gas.utils';
+import { useIncrementedGasFees } from './useIncrementedGasFees';
 
 /**
  * Determine whether a transaction can be cancelled and provide a method to
@@ -30,33 +27,27 @@ import { GAS_LIMITS } from '../../shared/constants/gas';
 export function useCancelTransaction(transactionGroup) {
   const { primaryTransaction } = transactionGroup;
 
-  const transactionGasPrice = primaryTransaction.txParams?.gasPrice;
-  const gasPrice =
-    transactionGasPrice === undefined || transactionGasPrice?.startsWith('-')
-      ? '0x0'
-      : primaryTransaction.txParams?.gasPrice;
-  const transaction = primaryTransaction;
+  const customGasSettings = useIncrementedGasFees(transactionGroup);
+
   const dispatch = useDispatch();
   const selectedAccount = useSelector(getSelectedAccount);
   const conversionRate = useSelector(getConversionRate);
-  const defaultNewGasPrice = addHexPrefix(
-    multiplyCurrencies(gasPrice, 1.1, {
-      toNumericBase: 'hex',
-      multiplicandBase: 16,
-      multiplierBase: 10,
-    }),
-  );
   const isMainnet = useSelector(getIsMainnet);
   const hideBasic = !(isMainnet || process.env.IN_TEST);
   const cancelTransaction = useCallback(
     (event) => {
       event.stopPropagation();
-      dispatch(setCustomGasLimit(GAS_LIMITS.SIMPLE));
-      dispatch(setCustomGasPriceForRetry(defaultNewGasPrice));
+      if (isLegacyTransaction(primaryTransaction)) {
+        // To support the current process of cancelling or speeding up
+        // a transaction, we have to inform the custom gas state of the new
+        // gasPrice/gasLimit to start at.
+        dispatch(setCustomGasPriceForRetry(customGasSettings.gasPrice));
+        dispatch(setCustomGasLimit(GAS_LIMITS.SIMPLE));
+      }
       const tx = {
-        ...transaction,
+        ...primaryTransaction,
         txParams: {
-          ...transaction.txParams,
+          ...primaryTransaction.txParams,
           gas: GAS_LIMITS.SIMPLE,
           value: '0x0',
         },
@@ -68,18 +59,16 @@ export function useCancelTransaction(transactionGroup) {
           props: {
             hideBasic,
             transaction: tx,
-            onSubmit: (newGasLimit, newGasPrice) => {
-              const userCustomizedGasTotal = getHexGasTotal({
-                gasPrice: newGasPrice,
-                gasLimit: newGasLimit,
-              });
+            onSubmit: (newGasSettings) => {
+              const userCustomizedGasTotal = getMaximumGasTotalInHexWei(
+                newGasSettings,
+              );
               dispatch(
                 showModal({
                   name: 'CANCEL_TRANSACTION',
                   newGasFee: userCustomizedGasTotal,
-                  transactionId: transaction.id,
-                  defaultNewGasPrice: newGasPrice,
-                  gasLimit: newGasLimit,
+                  transactionId: primaryTransaction.id,
+                  customGasSettings: newGasSettings,
                 }),
               );
             },
@@ -87,17 +76,14 @@ export function useCancelTransaction(transactionGroup) {
         }),
       );
     },
-    [dispatch, transaction, defaultNewGasPrice, hideBasic],
+    [dispatch, primaryTransaction, customGasSettings, hideBasic],
   );
 
   const hasEnoughCancelGas =
     primaryTransaction.txParams &&
     isBalanceSufficient({
       amount: '0x0',
-      gasTotal: getHexGasTotal({
-        gasPrice: increaseLastGasPrice(gasPrice),
-        gasLimit: primaryTransaction.txParams.gas,
-      }),
+      gasTotal: getMaximumGasTotalInHexWei(customGasSettings),
       balance: selectedAccount.balance,
       conversionRate,
     });
diff --git a/ui/hooks/useCancelTransaction.test.js b/ui/hooks/useCancelTransaction.test.js
index 6bc391475..8dd4e495b 100644
--- a/ui/hooks/useCancelTransaction.test.js
+++ b/ui/hooks/useCancelTransaction.test.js
@@ -77,10 +77,10 @@ describe('useCancelTransaction', function () {
         ).toStrictEqual(transactionId);
 
         // call onSubmit myself
-        dispatchAction[dispatchAction.length - 1][0].value.props.onSubmit(
-          GAS_LIMITS.SIMPLE,
-          '0x1',
-        );
+        dispatchAction[dispatchAction.length - 1][0].value.props.onSubmit({
+          gasLimit: GAS_LIMITS.SIMPLE,
+          gasPrice: '0x1',
+        });
 
         expect(
           dispatch.calledWith(
@@ -88,8 +88,10 @@ describe('useCancelTransaction', function () {
               name: 'CANCEL_TRANSACTION',
               transactionId,
               newGasFee: GAS_LIMITS.SIMPLE,
-              defaultNewGasPrice: '0x1',
-              gasLimit: GAS_LIMITS.SIMPLE,
+              customGasSettings: {
+                gasPrice: '0x1',
+                gasLimit: GAS_LIMITS.SIMPLE,
+              },
             }),
           ),
         ).toStrictEqual(true);
@@ -147,10 +149,10 @@ describe('useCancelTransaction', function () {
             .id,
         ).toStrictEqual(transactionId);
 
-        dispatchAction[dispatchAction.length - 1][0].value.props.onSubmit(
-          GAS_LIMITS.SIMPLE,
-          '0x1',
-        );
+        dispatchAction[dispatchAction.length - 1][0].value.props.onSubmit({
+          gasLimit: GAS_LIMITS.SIMPLE,
+          gasPrice: '0x1',
+        });
 
         expect(
           dispatch.calledWith(
@@ -158,8 +160,10 @@ describe('useCancelTransaction', function () {
               name: 'CANCEL_TRANSACTION',
               transactionId,
               newGasFee: GAS_LIMITS.SIMPLE,
-              defaultNewGasPrice: '0x1',
-              gasLimit: GAS_LIMITS.SIMPLE,
+              customGasSettings: {
+                gasPrice: '0x1',
+                gasLimit: GAS_LIMITS.SIMPLE,
+              },
             }),
           ),
         ).toStrictEqual(true);
diff --git a/ui/hooks/useIncrementedGasFees.js b/ui/hooks/useIncrementedGasFees.js
new file mode 100644
index 000000000..48b7c6263
--- /dev/null
+++ b/ui/hooks/useIncrementedGasFees.js
@@ -0,0 +1,73 @@
+import { addHexPrefix } from 'ethereumjs-util';
+import { useMemo } from 'react';
+import { multiplyCurrencies } from '../../shared/modules/conversion.utils';
+import { isEIP1559Transaction } from '../../shared/modules/transaction.utils';
+
+/**
+ * Simple helper to save on duplication to multiply the supplied wei hex string
+ * by 1.10 to get bare minimum new gas fee.
+ *
+ * @param {string} hexStringValue - hex value in wei to be incremented
+ * @returns {string} - hex value in WEI 10% higher than the param.
+ */
+function addTenPercent(hexStringValue) {
+  return addHexPrefix(
+    multiplyCurrencies(hexStringValue, 1.1, {
+      toNumericBase: 'hex',
+      multiplicandBase: 16,
+      multiplierBase: 10,
+    }),
+  );
+}
+
+/**
+ * When initializing cancellations or speed ups we need to set the baseline
+ * gas fees to be 10% higher, which is the bare minimum that the network will
+ * accept for transactions of the same nonce. Anything lower than this will be
+ * discarded by the network to avoid DoS attacks. This hook returns an object
+ * that either has gasPrice or maxFeePerGas/maxPriorityFeePerGas specified. In
+ * addition the gasLimit will also be included.
+ * @param {} transactionGroup
+ * @returns {import(
+ *   '../../app/scripts/controllers/transactions'
+ * ).CustomGasSettings} - Gas settings for cancellations/speed ups
+ */
+export function useIncrementedGasFees(transactionGroup) {
+  const { primaryTransaction } = transactionGroup;
+
+  // We memoize this value so that it can be relied upon in other hooks.
+  const customGasSettings = useMemo(() => {
+    // This hook is called indiscriminantly on all transactions appearing in
+    // the activity list. This includes transitional items such as signature
+    // requests. These types of "transactions" are not really transactions and
+    // do not have txParams. This is why we use optional chaining on the
+    // txParams object in this hook.
+    const temporaryGasSettings = {
+      gasLimit: primaryTransaction.txParams?.gas,
+    };
+    if (isEIP1559Transaction(primaryTransaction)) {
+      const transactionMaxFeePerGas = primaryTransaction.txParams?.maxFeePerGas;
+      const transactionMaxPriorityFeePerGas =
+        primaryTransaction.txParams?.maxPriorityFeePerGas;
+      temporaryGasSettings.maxFeePerGas =
+        transactionMaxFeePerGas === undefined ||
+        transactionMaxFeePerGas.startsWith('-')
+          ? '0x0'
+          : addTenPercent(transactionMaxFeePerGas);
+      temporaryGasSettings.maxPriorityFeePerGas =
+        transactionMaxPriorityFeePerGas === undefined ||
+        transactionMaxPriorityFeePerGas.startsWith('-')
+          ? '0x0'
+          : addTenPercent(transactionMaxPriorityFeePerGas);
+    } else {
+      const transactionGasPrice = primaryTransaction.txParams?.gasPrice;
+      temporaryGasSettings.gasPrice =
+        transactionGasPrice === undefined || transactionGasPrice.startsWith('-')
+          ? '0x0'
+          : addTenPercent(transactionGasPrice);
+    }
+    return temporaryGasSettings;
+  }, [primaryTransaction]);
+
+  return customGasSettings;
+}
diff --git a/ui/hooks/useRetryTransaction.js b/ui/hooks/useRetryTransaction.js
index 44fccb2f4..db1bf6205 100644
--- a/ui/hooks/useRetryTransaction.js
+++ b/ui/hooks/useRetryTransaction.js
@@ -7,9 +7,10 @@ import {
   setCustomGasPriceForRetry,
   setCustomGasLimit,
 } from '../ducks/gas/gas.duck';
-import { increaseLastGasPrice } from '../helpers/utils/confirm-tx.util';
 import { getIsMainnet } from '../selectors';
+import { isLegacyTransaction } from '../../shared/modules/transaction.utils';
 import { useMetricEvent } from './useMetricEvent';
+import { useIncrementedGasFees } from './useIncrementedGasFees';
 /**
  * Provides a reusable hook that, given a transactionGroup, will return
  * a method for beginning the retry process
@@ -20,8 +21,7 @@ export function useRetryTransaction(transactionGroup) {
   const { primaryTransaction } = transactionGroup;
   const isMainnet = useSelector(getIsMainnet);
   const hideBasic = !(isMainnet || process.env.IN_TEST);
-  // Signature requests do not have a txParams, but this hook is called indiscriminately
-  const gasPrice = primaryTransaction.txParams?.gasPrice;
+  const customGasSettings = useIncrementedGasFees(transactionGroup);
   const trackMetricsEvent = useMetricEvent({
     eventOpts: {
       category: 'Navigation',
@@ -36,24 +36,32 @@ export function useRetryTransaction(transactionGroup) {
       event.stopPropagation();
 
       trackMetricsEvent();
-      await dispatch(fetchBasicGasEstimates);
-      const transaction = primaryTransaction;
-      const increasedGasPrice = increaseLastGasPrice(gasPrice);
-      await dispatch(
-        setCustomGasPriceForRetry(
-          increasedGasPrice || transaction.txParams.gasPrice,
-        ),
-      );
-      dispatch(setCustomGasLimit(transaction.txParams.gas));
+      if (process.env.SHOW_EIP_1559_UI === true) {
+        await dispatch(fetchBasicGasEstimates);
+      }
+      if (isLegacyTransaction(primaryTransaction)) {
+        // To support the current process of cancelling or speeding up
+        // a transaction, we have to inform the custom gas state of the new
+        // gasPrice to start at.
+        dispatch(setCustomGasPriceForRetry(customGasSettings.gasPrice));
+        dispatch(setCustomGasLimit(primaryTransaction.txParams.gas));
+      }
+
       dispatch(
         showSidebar({
           transitionName: 'sidebar-left',
           type: 'customize-gas',
-          props: { transaction, hideBasic },
+          props: { transaction: primaryTransaction, hideBasic },
         }),
       );
     },
-    [dispatch, trackMetricsEvent, gasPrice, primaryTransaction, hideBasic],
+    [
+      dispatch,
+      trackMetricsEvent,
+      customGasSettings,
+      primaryTransaction,
+      hideBasic,
+    ],
   );
 
   return retryTransaction;
diff --git a/ui/store/actions.js b/ui/store/actions.js
index e8f97eedd..57a5f5d86 100644
--- a/ui/store/actions.js
+++ b/ui/store/actions.js
@@ -1324,7 +1324,7 @@ export function clearPendingTokens() {
   };
 }
 
-export function createCancelTransaction(txId, customGasPrice, customGasLimit) {
+export function createCancelTransaction(txId, customGasSettings) {
   log.debug('background.cancelTransaction');
   let newTxId;
 
@@ -1332,8 +1332,7 @@ export function createCancelTransaction(txId, customGasPrice, customGasLimit) {
     return new Promise((resolve, reject) => {
       background.createCancelTransaction(
         txId,
-        customGasPrice,
-        customGasLimit,
+        customGasSettings,
         (err, newState) => {
           if (err) {
             dispatch(displayWarning(err.message));
@@ -1353,7 +1352,7 @@ export function createCancelTransaction(txId, customGasPrice, customGasLimit) {
   };
 }
 
-export function createSpeedUpTransaction(txId, customGasPrice, customGasLimit) {
+export function createSpeedUpTransaction(txId, customGasSettings) {
   log.debug('background.createSpeedUpTransaction');
   let newTx;
 
@@ -1361,8 +1360,7 @@ export function createSpeedUpTransaction(txId, customGasPrice, customGasLimit) {
     return new Promise((resolve, reject) => {
       background.createSpeedUpTransaction(
         txId,
-        customGasPrice,
-        customGasLimit,
+        customGasSettings,
         (err, newState) => {
           if (err) {
             dispatch(displayWarning(err.message));
@@ -1381,16 +1379,14 @@ export function createSpeedUpTransaction(txId, customGasPrice, customGasLimit) {
   };
 }
 
-export function createRetryTransaction(txId, customGasPrice, customGasLimit) {
-  log.debug('background.createRetryTransaction');
+export function createRetryTransaction(txId, customGasSettings) {
   let newTx;
 
   return (dispatch) => {
     return new Promise((resolve, reject) => {
       background.createSpeedUpTransaction(
         txId,
-        customGasPrice,
-        customGasLimit,
+        customGasSettings,
         (err, newState) => {
           if (err) {
             dispatch(displayWarning(err.message));

From 68dfc98f400eb6b8b306a7dfe0eed25c325a9bc7 Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Thu, 8 Jul 2021 15:23:00 -0500
Subject: [PATCH 100/141] wire up gasFeeController (#11421)

---
 app/scripts/metamask-controller.js            |  40 +++++++
 shared/constants/gas.js                       |  11 ++
 .../confirm-page-container.component.js       |   6 +
 .../edit-gas-popover.component.js             |   8 +-
 ...gas-modal-page-container-container.test.js |  38 ++----
 .../gas-modal-page-container.container.js     |  28 ++---
 ui/ducks/metamask/metamask.js                 |  57 +++++++++
 ui/ducks/send/send.js                         | 112 ++++++++++++++----
 ui/ducks/send/send.test.js                    |   1 +
 .../confirm-transaction-base.component.js     |  37 ++++--
 .../confirm-transaction-base.container.js     |  26 ++--
 .../amount-max-button/amount-max-button.js    |   9 +-
 .../send-content/send-content.component.js    |   2 +-
 ui/store/actionConstants.js                   |   1 +
 ui/store/actions.js                           |  41 ++++++-
 yarn.lock                                     |   7 +-
 16 files changed, 324 insertions(+), 100 deletions(-)

diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
index 7bd321280..f74041946 100644
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@@ -24,6 +24,7 @@ import {
   CurrencyRateController,
   PhishingController,
   NotificationController,
+  GasFeeController,
 } from '@metamask/controllers';
 import { TRANSACTION_STATUSES } from '../../shared/constants/transaction';
 import { MAINNET_CHAIN_ID } from '../../shared/constants/network';
@@ -174,6 +175,32 @@ export default class MetamaskController extends EventEmitter {
       initState: initState.MetaMetricsController,
     });
 
+    const gasFeeMessenger = controllerMessenger.getRestricted({
+      name: 'GasFeeController',
+    });
+
+    this.gasFeeController = new GasFeeController({
+      interval: 10000,
+      messenger: gasFeeMessenger,
+      getProvider: () =>
+        this.networkController.getProviderAndBlockTracker().provider,
+      onNetworkStateChange: this.networkController.on.bind(
+        this.networkController,
+        NETWORK_EVENTS.NETWORK_DID_CHANGE,
+      ),
+      getCurrentNetworkEIP1559Compatibility: this.networkController.getEIP1559Compatibility.bind(
+        this.networkController,
+      ),
+      getCurrentAccountEIP1559Compatibility: this.getCurrentAccountEIP1559Compatibility.bind(
+        this,
+      ),
+      getCurrentNetworkLegacyGasAPICompatibility: () =>
+        this.networkController.getCurrentChainId() === MAINNET_CHAIN_ID,
+      getChainId: this.networkController.getCurrentChainId.bind(
+        this.networkController,
+      ),
+    });
+
     this.appStateController = new AppStateController({
       addUnlockListener: this.on.bind(this, 'unlock'),
       isUnlocked: this.isUnlocked.bind(this),
@@ -470,6 +497,7 @@ export default class MetamaskController extends EventEmitter {
       PermissionsMetadata: this.permissionsController.store,
       ThreeBoxController: this.threeBoxController.store,
       NotificationController: this.notificationController,
+      GasFeeController: this.gasFeeController,
     });
 
     this.memStore = new ComposableObservableStore({
@@ -501,6 +529,7 @@ export default class MetamaskController extends EventEmitter {
         EnsController: this.ensController.store,
         ApprovalController: this.approvalController,
         NotificationController: this.notificationController,
+        GasFeeController: this.gasFeeController,
       },
       controllerMessenger,
     });
@@ -1027,6 +1056,17 @@ export default class MetamaskController extends EventEmitter {
         this.notificationController.updateViewed,
         this.notificationController,
       ),
+
+      // GasFeeController
+      getGasFeeEstimatesAndStartPolling: nodeify(
+        this.gasFeeController.getGasFeeEstimatesAndStartPolling,
+        this.gasFeeController,
+      ),
+
+      disconnectGasFeeEstimatePoller: nodeify(
+        this.gasFeeController.disconnectPoller,
+        this.gasFeeController,
+      ),
     };
   }
 
diff --git a/shared/constants/gas.js b/shared/constants/gas.js
index 6f53aaeae..b149458cf 100644
--- a/shared/constants/gas.js
+++ b/shared/constants/gas.js
@@ -9,3 +9,14 @@ export const GAS_LIMITS = {
   // a base estimate for token transfers.
   BASE_TOKEN_ESTIMATE: addHexPrefix(ONE_HUNDRED_THOUSAND.toString(16)),
 };
+
+/**
+ * These are already declared in @metamask/controllers but importing them from
+ * that module and re-exporting causes the UI bundle size to expand beyond 4MB
+ */
+export const GAS_ESTIMATE_TYPES = {
+  FEE_MARKET: 'fee-market',
+  LEGACY: 'legacy',
+  ETH_GASPRICE: 'eth_gasPrice',
+  NONE: 'none',
+};
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 71923e546..8e3b8d858 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
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import SenderToRecipient from '../../ui/sender-to-recipient';
 import { PageContainerFooter } from '../../ui/page-container';
+import EditGasPopover from '../edit-gas-popover';
 import {
   ConfirmPageContainerHeader,
   ConfirmPageContainerContent,
@@ -60,6 +61,8 @@ export default class ConfirmPageContainer extends Component {
     onCancel: PropTypes.func,
     onSubmit: PropTypes.func,
     disabled: PropTypes.bool,
+    editingGas: PropTypes.bool,
+    handleCloseEditGas: PropTypes.func,
   };
 
   render() {
@@ -105,6 +108,8 @@ export default class ConfirmPageContainer extends Component {
       showAccountInHeader,
       origin,
       ethGasPriceWarning,
+      editingGas,
+      handleCloseEditGas,
     } = this.props;
     const renderAssetImage = contentComponent || !identiconAddress;
 
@@ -183,6 +188,7 @@ export default class ConfirmPageContainer extends Component {
             )}
           </PageContainerFooter>
         )}
+        {editingGas && <EditGasPopover onClose={handleCloseEditGas} />}
       </div>
     );
   }
diff --git a/ui/components/app/edit-gas-popover/edit-gas-popover.component.js b/ui/components/app/edit-gas-popover/edit-gas-popover.component.js
index 76810dcfc..f27f6525d 100644
--- a/ui/components/app/edit-gas-popover/edit-gas-popover.component.js
+++ b/ui/components/app/edit-gas-popover/edit-gas-popover.component.js
@@ -14,6 +14,7 @@ export default function EditGasPopover({
   popoverTitle,
   confirmButtonText,
   editGasDisplayProps,
+  onClose,
 }) {
   const t = useContext(I18nContext);
   const dispatch = useDispatch();
@@ -27,12 +28,14 @@ export default function EditGasPopover({
    * the modal in testing
    */
   const closePopover = useCallback(() => {
-    if (showSidebar) {
+    if (onClose) {
+      onClose();
+    } else if (showSidebar) {
       dispatch(hideSidebar());
     } else {
       dispatch(hideModal());
     }
-  }, [showSidebar, dispatch]);
+  }, [showSidebar, onClose, dispatch]);
 
   const title = showEducationContent
     ? t('editGasEducationModalTitle')
@@ -73,6 +76,7 @@ EditGasPopover.propTypes = {
   editGasDisplayProps: PropTypes.object,
   confirmButtonText: PropTypes.string,
   showEducationButton: PropTypes.bool,
+  onClose: PropTypes.func,
 };
 
 EditGasPopover.defaultProps = {
diff --git a/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container-container.test.js b/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container-container.test.js
index d82a8fb0a..37e853cd1 100644
--- a/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container-container.test.js
+++ b/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container-container.test.js
@@ -49,6 +49,10 @@ jest.mock('../../../../store/actions', () => ({
   updateTransaction: jest.fn(),
 }));
 
+jest.mock('../../../../ducks/metamask/metamask.js', () => ({
+  updateTransactionGasFees: jest.fn(),
+}));
+
 jest.mock('../../../../ducks/gas/gas.duck', () => ({
   setCustomGasPrice: jest.fn(),
   setCustomGasLimit: jest.fn(),
@@ -79,6 +83,7 @@ describe('gas-modal-page-container container', () => {
 
     afterEach(() => {
       dispatchSpy.resetHistory();
+      jest.clearAllMocks();
     });
 
     describe('useCustomGas()', () => {
@@ -137,17 +142,6 @@ describe('gas-modal-page-container container', () => {
         expect(updateGasPrice).toHaveBeenCalledWith('aaaa');
       });
     });
-
-    describe('updateConfirmTxGasAndCalculate()', () => {
-      it('should dispatch a updateGasAndCalculate action with the correct props', () => {
-        mapDispatchToPropsObject.updateConfirmTxGasAndCalculate('ffff', 'aaaa');
-        expect(dispatchSpy.callCount).toStrictEqual(3);
-        expect(setCustomGasPrice).toHaveBeenCalled();
-        expect(setCustomGasLimit).toHaveBeenCalled();
-        expect(setCustomGasLimit).toHaveBeenCalledWith('0xffff');
-        expect(setCustomGasPrice).toHaveBeenCalledWith('0xaaaa');
-      });
-    });
   });
 
   describe('mergeProps', () => {
@@ -169,7 +163,7 @@ describe('gas-modal-page-container container', () => {
         updateCustomGasPrice: sinon.spy(),
         useCustomGas: sinon.spy(),
         setGasData: sinon.spy(),
-        updateConfirmTxGasAndCalculate: sinon.spy(),
+        updateTransactionGasFees: sinon.spy(),
         someOtherDispatchProp: sinon.spy(),
         createSpeedUpTransaction: sinon.spy(),
         hideSidebar: sinon.spy(),
@@ -192,18 +186,14 @@ describe('gas-modal-page-container container', () => {
       ).toStrictEqual('bar');
       expect(result.someOwnProp).toStrictEqual(123);
 
-      expect(
-        dispatchProps.updateConfirmTxGasAndCalculate.callCount,
-      ).toStrictEqual(0);
+      expect(dispatchProps.updateTransactionGasFees.callCount).toStrictEqual(0);
       expect(dispatchProps.setGasData.callCount).toStrictEqual(0);
       expect(dispatchProps.useCustomGas.callCount).toStrictEqual(0);
       expect(dispatchProps.hideModal.callCount).toStrictEqual(0);
 
       result.onSubmit();
 
-      expect(
-        dispatchProps.updateConfirmTxGasAndCalculate.callCount,
-      ).toStrictEqual(1);
+      expect(dispatchProps.updateTransactionGasFees.callCount).toStrictEqual(1);
       expect(dispatchProps.setGasData.callCount).toStrictEqual(0);
       expect(dispatchProps.useCustomGas.callCount).toStrictEqual(0);
       expect(dispatchProps.hideModal.callCount).toStrictEqual(1);
@@ -236,18 +226,14 @@ describe('gas-modal-page-container container', () => {
       ).toStrictEqual('bar');
       expect(result.someOwnProp).toStrictEqual(123);
 
-      expect(
-        dispatchProps.updateConfirmTxGasAndCalculate.callCount,
-      ).toStrictEqual(0);
+      expect(dispatchProps.updateTransactionGasFees.callCount).toStrictEqual(0);
       expect(dispatchProps.setGasData.callCount).toStrictEqual(0);
       expect(dispatchProps.useCustomGas.callCount).toStrictEqual(0);
       expect(dispatchProps.cancelAndClose.callCount).toStrictEqual(0);
 
       result.onSubmit('mockNewLimit', 'mockNewPrice');
 
-      expect(
-        dispatchProps.updateConfirmTxGasAndCalculate.callCount,
-      ).toStrictEqual(0);
+      expect(dispatchProps.updateTransactionGasFees.callCount).toStrictEqual(0);
       expect(dispatchProps.setGasData.callCount).toStrictEqual(1);
       expect(dispatchProps.setGasData.getCall(0).args).toStrictEqual([
         'mockNewLimit',
@@ -276,9 +262,7 @@ describe('gas-modal-page-container container', () => {
 
       result.onSubmit();
 
-      expect(
-        dispatchProps.updateConfirmTxGasAndCalculate.callCount,
-      ).toStrictEqual(0);
+      expect(dispatchProps.updateTransactionGasFees.callCount).toStrictEqual(0);
       expect(dispatchProps.setGasData.callCount).toStrictEqual(0);
       expect(dispatchProps.useCustomGas.callCount).toStrictEqual(0);
       expect(dispatchProps.cancelAndClose.callCount).toStrictEqual(1);
diff --git a/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js b/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
index 736700c0c..a1a262589 100644
--- a/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
+++ b/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
@@ -5,7 +5,6 @@ import {
   createRetryTransaction,
   createSpeedUpTransaction,
   hideSidebar,
-  updateTransaction,
 } from '../../../../store/actions';
 import {
   setCustomGasPrice,
@@ -59,6 +58,7 @@ import {
 import { MIN_GAS_LIMIT_DEC } from '../../../../pages/send/send.constants';
 import { TRANSACTION_STATUSES } from '../../../../../shared/constants/transaction';
 import { GAS_LIMITS } from '../../../../../shared/constants/gas';
+import { updateTransactionGasFees } from '../../../../ducks/metamask/metamask';
 import GasModalPageContainer from './gas-modal-page-container.component';
 
 const mapStateToProps = (state, ownProps) => {
@@ -208,6 +208,9 @@ const mapDispatchToProps = (dispatch) => {
     },
     hideModal: () => dispatch(hideModal()),
     useCustomGas: () => dispatch(useCustomGas()),
+    updateTransactionGasFees: (gasFees) => {
+      dispatch(updateTransactionGasFees({ ...gasFees, expectHexWei: true }));
+    },
     updateCustomGasPrice,
     updateCustomGasLimit: (newLimit) =>
       dispatch(setCustomGasLimit(addHexPrefix(newLimit))),
@@ -215,11 +218,6 @@ const mapDispatchToProps = (dispatch) => {
       dispatch(updateGasLimit(newLimit));
       dispatch(updateGasPrice(newPrice));
     },
-    updateConfirmTxGasAndCalculate: (gasLimit, gasPrice, updatedTx) => {
-      updateCustomGasPrice(gasPrice);
-      dispatch(setCustomGasLimit(addHexPrefix(gasLimit.toString(16))));
-      return dispatch(updateTransaction(updatedTx));
-    },
     createRetryTransaction: (txId, customGasSettings) => {
       return dispatch(createRetryTransaction(txId, customGasSettings));
     },
@@ -247,9 +245,9 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
   const {
     useCustomGas: dispatchUseCustomGas,
     setGasData: dispatchSetGasData,
-    updateConfirmTxGasAndCalculate: dispatchUpdateConfirmTxGasAndCalculate,
     createSpeedUpTransaction: dispatchCreateSpeedUpTransaction,
     createRetryTransaction: dispatchCreateRetryTransaction,
+    updateTransactionGasFees: dispatchUpdateTransactionGasFees,
     hideSidebar: dispatchHideSidebar,
     cancelAndClose: dispatchCancelAndClose,
     hideModal: dispatchHideModal,
@@ -268,16 +266,14 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
         return;
       }
       if (isConfirm) {
-        const updatedTx = {
-          ...transaction,
-          txParams: {
-            ...transaction.txParams,
-            gas: gasLimit,
-            gasPrice,
-          },
-        };
-        dispatchUpdateConfirmTxGasAndCalculate(gasLimit, gasPrice, updatedTx);
+        dispatchUpdateTransactionGasFees({
+          gasLimit,
+          gasPrice,
+          transaction,
+          isModal: true,
+        });
         dispatchHideModal();
+        dispatchCancelAndClose();
       } else if (isSpeedUp) {
         dispatchCreateSpeedUpTransaction(txId, { gasPrice, gasLimit });
         dispatchHideSidebar();
diff --git a/ui/ducks/metamask/metamask.js b/ui/ducks/metamask/metamask.js
index e72fb8ec7..5663c2029 100644
--- a/ui/ducks/metamask/metamask.js
+++ b/ui/ducks/metamask/metamask.js
@@ -1,3 +1,4 @@
+import { addHexPrefix, isHexString } from 'ethereumjs-util';
 import * as actionConstants from '../../store/actionConstants';
 import { ALERT_TYPES } from '../../../shared/constants/alerts';
 import { NETWORK_TYPE_RPC } from '../../../shared/constants/network';
@@ -5,6 +6,9 @@ import {
   accountsWithSendEtherInfoSelector,
   getAddressBook,
 } from '../../selectors';
+import { updateTransaction } from '../../store/actions';
+import { setCustomGasLimit, setCustomGasPrice } from '../gas/gas.duck';
+import { decGWEIToHexWEI } from '../../helpers/utils/conversions.util';
 
 export default function reduceMetamask(state = {}, action) {
   const metamaskState = {
@@ -198,6 +202,47 @@ export default function reduceMetamask(state = {}, action) {
   }
 }
 
+const toHexWei = (value, expectHexWei) => {
+  return addHexPrefix(expectHexWei ? value : decGWEIToHexWEI(value));
+};
+
+// Action Creators
+export function updateTransactionGasFees({
+  gasPrice,
+  gasLimit,
+  maxPriorityFeePerGas,
+  maxFeePerGas,
+  transaction,
+  expectHexWei = false,
+}) {
+  return async (dispatch) => {
+    const txParamsCopy = { ...transaction.txParams, gas: gasLimit };
+    if (gasPrice) {
+      dispatch(
+        setCustomGasPrice(toHexWei(txParamsCopy.gasPrice, expectHexWei)),
+      );
+      txParamsCopy.gasPrice = toHexWei(gasPrice, expectHexWei);
+    } else if (maxFeePerGas && maxPriorityFeePerGas) {
+      txParamsCopy.maxFeePerGas = toHexWei(maxFeePerGas, expectHexWei);
+      txParamsCopy.maxPriorityFeePerGas = addHexPrefix(
+        decGWEIToHexWEI(maxPriorityFeePerGas),
+      );
+    }
+    const updatedTx = {
+      ...transaction,
+      txParams: txParamsCopy,
+    };
+
+    const customGasLimit = isHexString(addHexPrefix(gasLimit))
+      ? addHexPrefix(gasLimit)
+      : addHexPrefix(gasLimit.toString(16));
+    dispatch(setCustomGasLimit(customGasLimit));
+    await dispatch(updateTransaction(updatedTx));
+  };
+}
+
+// Selectors
+
 export const getCurrentLocale = (state) => state.metamask.currentLocale;
 
 export const getAlertEnabledness = (state) => state.metamask.alertEnabledness;
@@ -242,3 +287,15 @@ export function getUnapprovedTxs(state) {
 export function isEIP1559Network(state) {
   return state.metamask.networkDetails.EIPS[1559] === true;
 }
+
+export function getGasEstimateType(state) {
+  return state.metamask.gasEstimateType;
+}
+
+export function getGasFeeEstimates(state) {
+  return state.metamask.gasFeeEstimates;
+}
+
+export function getEstimatedGasFeeTimeBounds(state) {
+  return state.metamask.estimatedGasFeeTimeBounds;
+}
diff --git a/ui/ducks/send/send.js b/ui/ducks/send/send.js
index 70bb7e7b1..a7a98072e 100644
--- a/ui/ducks/send/send.js
+++ b/ui/ducks/send/send.js
@@ -10,7 +10,7 @@ import {
   multiplyCurrencies,
   subtractCurrencies,
 } from '../../../shared/modules/conversion.utils';
-import { GAS_LIMITS } from '../../../shared/constants/gas';
+import { GAS_ESTIMATE_TYPES, GAS_LIMITS } from '../../../shared/constants/gas';
 import {
   CONTRACT_ADDRESS_ERROR,
   INSUFFICIENT_FUNDS_ERROR,
@@ -40,8 +40,10 @@ import {
   getIsNonStandardEthChain,
 } from '../../selectors';
 import {
+  disconnectGasFeeEstimatePoller,
   displayWarning,
   estimateGas,
+  getGasFeeEstimatesAndStartPolling,
   hideLoadingIndication,
   showConfTxPage,
   showLoadingIndication,
@@ -62,6 +64,7 @@ import {
   SELECTED_ACCOUNT_CHANGED,
   ACCOUNT_CHANGED,
   ADDRESS_BOOK_UPDATED,
+  GAS_FEE_ESTIMATES_UPDATED,
 } from '../../store/actionConstants';
 import {
   calcTokenAmount,
@@ -389,17 +392,44 @@ export const initializeSendState = createAsyncThunk(
     // the getMetaMaskAccounts selector. getTargetAccount consumes this
     // selector and returns the account at the specified address.
     const account = getTargetAccount(state, fromAddress);
-    // Initiate gas slices work to fetch gasPrice estimates. We need to get the
-    // new state after this is set to determine if initialization can proceed.
-    await thunkApi.dispatch(fetchBasicGasEstimates());
-    const {
-      gas: { basicEstimateStatus, basicEstimates },
-    } = thunkApi.getState();
+
     // Default gasPrice to 1 gwei if all estimation fails
-    const gasPrice =
-      basicEstimateStatus === BASIC_ESTIMATE_STATES.READY
-        ? getGasPriceInHexWei(basicEstimates.average)
-        : '0x1';
+    let gasPrice = '0x1';
+    let basicEstimateStatus = BASIC_ESTIMATE_STATES.LOADING;
+    let gasEstimatePollToken = null;
+
+    if (Boolean(process.env.SHOW_EIP_1559_UI) === false) {
+      // Initiate gas slices work to fetch gasPrice estimates. We need to get the
+      // new state after this is set to determine if initialization can proceed.
+      await thunkApi.dispatch(fetchBasicGasEstimates());
+      const {
+        gas: { basicEstimates, basicEstimateStatus: apiBasicEstimateStatus },
+      } = thunkApi.getState();
+
+      basicEstimateStatus = apiBasicEstimateStatus;
+
+      if (basicEstimateStatus === BASIC_ESTIMATE_STATES.READY) {
+        gasPrice = getGasPriceInHexWei(basicEstimates.average);
+      }
+    } else {
+      // Instruct the background process that polling for gas prices should begin
+      gasEstimatePollToken = await getGasFeeEstimatesAndStartPolling();
+      const {
+        metamask: { gasFeeEstimates, gasEstimateType },
+      } = thunkApi.getState();
+
+      if (gasEstimateType === GAS_ESTIMATE_TYPES.LEGACY) {
+        gasPrice = getGasPriceInHexWei(gasFeeEstimates.medium);
+      } else if (gasEstimateType === GAS_ESTIMATE_TYPES.ETH_GASPRICE) {
+        gasPrice = getGasPriceInHexWei(gasFeeEstimates.gasPrice);
+      } else if (gasEstimateType === GAS_ESTIMATE_TYPES.FEE_MARKET) {
+        gasPrice = getGasPriceInHexWei(
+          gasFeeEstimates.medium.suggestedMaxFeePerGas,
+        );
+      }
+
+      basicEstimateStatus = BASIC_ESTIMATE_STATES.READY;
+    }
     // Set a basic gasLimit in the event that other estimation fails
     let gasLimit =
       asset.type === ASSET_TYPES.TOKEN
@@ -412,7 +442,7 @@ export const initializeSendState = createAsyncThunk(
       // Run our estimateGasLimit logic to get a more accurate estimation of
       // required gas. If this value isn't nullish, set it as the new gasLimit
       const estimatedGasLimit = await estimateGasLimitForSend({
-        gasPrice: getGasPriceInHexWei(basicEstimates.average),
+        gasPrice,
         blockGasLimit: metamask.blockGasLimit,
         selectedAddress: fromAddress,
         sendToken: asset.details,
@@ -451,6 +481,7 @@ export const initializeSendState = createAsyncThunk(
       gasPrice,
       gasLimit,
       gasTotal: addHexPrefix(calcGasTotal(gasLimit, gasPrice)),
+      gasEstimatePollToken,
     };
   },
 );
@@ -470,6 +501,8 @@ export const initialState = {
   gas: {
     // indicate whether the gas estimate is loading
     isGasEstimateLoading: true,
+    // String token indentifying a listener for polling on the gasFeeController
+    gasEstimatePollToken: null,
     // has the user set custom gas in the custom gas modal
     isCustomGasSet: false,
     // maximum gas needed for tx
@@ -991,6 +1024,10 @@ const slice = createSlice({
         state.gas.gasLimit = action.payload.gasLimit;
         state.gas.gasPrice = action.payload.gasPrice;
         state.gas.gasTotal = action.payload.gasTotal;
+        state.gas.gasEstimatePollToken = action.payload.gasEstimatePollToken;
+        if (action.payload.gasEstimatePollToken) {
+          state.gas.isGasEstimateLoading = false;
+        }
         if (state.stage !== SEND_STAGES.UNINITIALIZED) {
           slice.caseReducers.validateRecipientUserInput(state, {
             payload: {
@@ -1030,9 +1067,11 @@ const slice = createSlice({
         // the gasPrice in our slice. We call into the caseReducer
         // updateGasPrice to also tap into the appropriate follow up checks
         // and gasTotal calculation.
-        slice.caseReducers.updateGasPrice(state, {
-          payload: getGasPriceInHexWei(action.value.average),
-        });
+        if (Boolean(process.env.SHOW_EIP_1559_UI) === false) {
+          slice.caseReducers.updateGasPrice(state, {
+            payload: getGasPriceInHexWei(action.value.average),
+          });
+        }
       })
       .addCase(BASIC_GAS_ESTIMATE_STATUS, (state, action) => {
         // When we fetch gas prices we should temporarily set the form invalid
@@ -1053,6 +1092,28 @@ const slice = createSlice({
             state.gas.isGasEstimateLoading = false;
             slice.caseReducers.validateSendState(state);
         }
+      })
+      .addCase(GAS_FEE_ESTIMATES_UPDATED, (state, action) => {
+        // When the gasFeeController updates its gas fee estimates we need to
+        // update and validate state based on those new values
+        if (process.env.SHOW_EIP_1559_UI) {
+          const { gasFeeEstimates, gasEstimateType } = action.payload;
+          let payload = null;
+          if (gasEstimateType === GAS_ESTIMATE_TYPES.FEE_MARKET) {
+            payload = getGasPriceInHexWei(
+              gasFeeEstimates.medium.suggestedMaxFeePerGas,
+            );
+          } else if (gasEstimateType === GAS_ESTIMATE_TYPES.LEGACY) {
+            payload = getGasPriceInHexWei(gasFeeEstimates.medium);
+          } else if (gasEstimateType === GAS_ESTIMATE_TYPES.ETH_GASPRICE) {
+            payload = getGasPriceInHexWei(gasFeeEstimates.gasPrice);
+          }
+          if (payload) {
+            slice.caseReducers.updateGasPrice(state, {
+              payload,
+            });
+          }
+        }
       });
   },
 });
@@ -1066,21 +1127,26 @@ const {
   useCustomGas,
   updateGasLimit,
   updateGasPrice,
-  resetSendState,
   validateRecipientUserInput,
   updateRecipientSearchMode,
 } = actions;
 
-export {
-  useDefaultGas,
-  useCustomGas,
-  updateGasLimit,
-  updateGasPrice,
-  resetSendState,
-};
+export { useDefaultGas, useCustomGas, updateGasLimit, updateGasPrice };
 
 // Action Creators
 
+export function resetSendState() {
+  return async (dispatch, getState) => {
+    const state = getState();
+    dispatch(actions.resetSendState());
+
+    if (state[name].gas.gasEstimatePollToken) {
+      await disconnectGasFeeEstimatePoller(
+        state[name].gas.gasEstimatePollToken,
+      );
+    }
+  };
+}
 /**
  * Updates the amount the user intends to send and performs side effects.
  * 1. If the current mode is MAX change to INPUT
diff --git a/ui/ducks/send/send.test.js b/ui/ducks/send/send.test.js
index 57f84071f..4b96e7a24 100644
--- a/ui/ducks/send/send.test.js
+++ b/ui/ducks/send/send.test.js
@@ -42,6 +42,7 @@ jest.mock('../../store/actions', () => {
   return {
     ...actual,
     estimateGas: jest.fn(() => Promise.resolve('0x0')),
+    getGasFeeEstimatesAndStartPolling: jest.fn(() => Promise.resolve()),
     updateTokenType: jest.fn(() => Promise.resolve({ isERC721: false })),
   };
 });
diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
index e58b30c2e..3e3c4197f 100644
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -113,6 +113,7 @@ export default class ConfirmTransactionBase extends Component {
     submitError: null,
     submitWarning: '',
     ethGasPriceWarning: '',
+    editingGas: false,
   };
 
   componentDidUpdate(prevProps) {
@@ -259,7 +260,17 @@ export default class ConfirmTransactionBase extends Component {
       },
     });
 
-    showCustomizeGasModal();
+    if (process.env.SHOW_EIP_1559_UI) {
+      this.setState({ editingGas: true });
+    } else {
+      showCustomizeGasModal();
+    }
+  }
+
+  // TODO: rename this 'handleCloseEditGas' later when we remove the
+  // SHOW_EIP_1559_UI flag/branch
+  handleCloseNewGasPopover() {
+    this.setState({ editingGas: false });
   }
 
   renderDetails() {
@@ -389,6 +400,13 @@ export default class ConfirmTransactionBase extends Component {
         </div>
       );
     }
+    const showInlineControls = process.env.SHOW_EIP_1559_UI
+      ? advancedInlineGasShown
+      : advancedInlineGasShown || notMainnetOrTest || gasPriceFetchFailure;
+
+    const showGasEditButton = process.env.SHOW_EIP_1559_UI
+      ? !showInlineControls
+      : !(notMainnetOrTest || gasPriceFetchFailure);
 
     return (
       <div className="confirm-page-container-content__details">
@@ -396,24 +414,18 @@ export default class ConfirmTransactionBase extends Component {
           <ConfirmDetailRow
             label={t('gasFee')}
             value={hexTransactionFee}
-            headerText={notMainnetOrTest || gasPriceFetchFailure ? '' : 'Edit'}
+            headerText={showGasEditButton ? 'Edit' : ''}
             headerTextClassName={
-              notMainnetOrTest || gasPriceFetchFailure
-                ? ''
-                : 'confirm-detail-row__header-text--edit'
+              showGasEditButton ? 'confirm-detail-row__header-text--edit' : ''
             }
             onHeaderClick={
-              notMainnetOrTest || gasPriceFetchFailure
-                ? null
-                : () => this.handleEditGas()
+              showGasEditButton ? () => this.handleEditGas() : null
             }
             secondaryText={
               hideFiatConversion ? t('noConversionRateAvailable') : ''
             }
           />
-          {advancedInlineGasShown || notMainnetOrTest || gasPriceFetchFailure
-            ? inlineGasControls
-            : null}
+          {showInlineControls ? inlineGasControls : null}
           {noGasPrice ? (
             <div className="confirm-page-container-content__error-container">
               <ErrorMessage errorKey={GAS_PRICE_FETCH_FAILURE_ERROR_KEY} />
@@ -735,6 +747,7 @@ export default class ConfirmTransactionBase extends Component {
       submitError,
       submitWarning,
       ethGasPriceWarning,
+      editingGas,
     } = this.state;
 
     const { name } = methodData;
@@ -802,6 +815,8 @@ export default class ConfirmTransactionBase extends Component {
         hideSenderToRecipient={hideSenderToRecipient}
         origin={txData.origin}
         ethGasPriceWarning={ethGasPriceWarning}
+        editingGas={editingGas}
+        handleCloseEditGas={() => this.handleCloseNewGasPopover()}
       />
     );
   }
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 9cc4e7741..df2a0b670 100644
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js
+++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js
@@ -10,7 +10,6 @@ import {
   cancelTxs,
   updateAndApproveTx,
   showModal,
-  updateTransaction,
   getNextNonce,
   tryReverseResolveAddress,
   setDefaultHomeActiveTabName,
@@ -39,6 +38,7 @@ import {
 import { getMostRecentOverviewPage } from '../../ducks/history/history';
 import { transactionMatchesNetwork } from '../../../shared/modules/transaction.utils';
 import { toChecksumHexAddress } from '../../../shared/modules/hexstring-utils';
+import { updateTransactionGasFees } from '../../ducks/metamask/metamask';
 import ConfirmTransactionBase from './confirm-transaction-base.component';
 
 const casedContractMap = Object.keys(contractMap).reduce((acc, base) => {
@@ -213,9 +213,6 @@ export const mapDispatchToProps = (dispatch) => {
         }),
       );
     },
-    updateGasAndCalculate: (updatedTx) => {
-      return dispatch(updateTransaction(updatedTx));
-    },
     showRejectTransactionsConfirmationModal: ({
       onSubmit,
       unapprovedTxCount,
@@ -231,6 +228,9 @@ export const mapDispatchToProps = (dispatch) => {
     getNextNonce: () => dispatch(getNextNonce()),
     setDefaultHomeActiveTabName: (tabName) =>
       dispatch(setDefaultHomeActiveTabName(tabName)),
+    updateTransactionGasFees: (gasFees) => {
+      dispatch(updateTransactionGasFees({ ...gasFees, expectHexWei: true }));
+    },
   };
 };
 
@@ -286,7 +286,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
   const {
     cancelAllTransactions: dispatchCancelAllTransactions,
     showCustomizeGasModal: dispatchShowCustomizeGasModal,
-    updateGasAndCalculate: dispatchUpdateGasAndCalculate,
+    updateTransactionGasFees: dispatchUpdateTransactionGasFees,
     ...otherDispatchProps
   } = dispatchProps;
 
@@ -303,21 +303,17 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     showCustomizeGasModal: () =>
       dispatchShowCustomizeGasModal({
         txData,
-        onSubmit: (customGas) => dispatchUpdateGasAndCalculate(customGas),
+        onSubmit: (customGas) => dispatchUpdateTransactionGasFees(customGas),
         validate: validateEditGas,
       }),
     cancelAllTransactions: () =>
       dispatchCancelAllTransactions(valuesFor(unapprovedTxs)),
     updateGasAndCalculate: ({ gasLimit, gasPrice }) => {
-      const updatedTx = {
-        ...txData,
-        txParams: {
-          ...txData.txParams,
-          gas: gasLimit,
-          gasPrice,
-        },
-      };
-      dispatchUpdateGasAndCalculate(updatedTx);
+      dispatchUpdateTransactionGasFees({
+        gasLimit,
+        gasPrice,
+        transaction: txData,
+      });
     },
   };
 };
diff --git a/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.js b/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.js
index 7f143879b..03676e3c5 100644
--- a/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.js
+++ b/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.js
@@ -29,17 +29,20 @@ export default function AmountMaxButton() {
     dispatch(toggleSendMaxMode());
   };
 
+  const disabled = process.env.SHOW_EIP_1559_UI
+    ? isDraftTransactionInvalid
+    : buttonDataLoading || isDraftTransactionInvalid;
+
   return (
     <button
       className="send-v2__amount-max"
-      disabled={buttonDataLoading || isDraftTransactionInvalid}
+      disabled={disabled}
       onClick={onMaxClick}
     >
       <input type="checkbox" checked={maxModeOn} readOnly />
       <div
         className={classnames('send-v2__amount-max__button', {
-          'send-v2__amount-max__button__disabled':
-            buttonDataLoading || isDraftTransactionInvalid,
+          'send-v2__amount-max__button__disabled': disabled,
         })}
       >
         {t('max')}
diff --git a/ui/pages/send/send-content/send-content.component.js b/ui/pages/send/send-content/send-content.component.js
index fc27aff25..851f96f9a 100644
--- a/ui/pages/send/send-content/send-content.component.js
+++ b/ui/pages/send/send-content/send-content.component.js
@@ -57,7 +57,7 @@ export default class SendContent extends Component {
           {this.maybeRenderAddContact()}
           <SendAssetRow />
           <SendAmountRow />
-          <SendGasRow />
+          {process.env.SHOW_EIP_1559_UI ? null : <SendGasRow />}
           {this.props.showHexData && <SendHexDataRow />}
         </div>
       </PageContainerContent>
diff --git a/ui/store/actionConstants.js b/ui/store/actionConstants.js
index c96088f2f..807865ddd 100644
--- a/ui/store/actionConstants.js
+++ b/ui/store/actionConstants.js
@@ -19,6 +19,7 @@ export const SELECTED_ACCOUNT_CHANGED = 'SELECTED_ACCOUNT_CHANGED';
 export const ACCOUNT_CHANGED = 'ACCOUNT_CHANGED';
 export const CHAIN_CHANGED = 'CHAIN_CHANGED';
 export const ADDRESS_BOOK_UPDATED = 'ADDRESS_BOOK_UPDATED';
+export const GAS_FEE_ESTIMATES_UPDATED = 'GAS_FEE_ESTIMATES_UPDATED';
 export const FORGOT_PASSWORD = 'FORGOT_PASSWORD';
 export const CLOSE_WELCOME_SCREEN = 'CLOSE_WELCOME_SCREEN';
 // unlock screen
diff --git a/ui/store/actions.js b/ui/store/actions.js
index 57a5f5d86..7c5be2fe9 100644
--- a/ui/store/actions.js
+++ b/ui/store/actions.js
@@ -20,7 +20,10 @@ import {
 } from '../selectors';
 import { computeEstimatedGasLimit, resetSendState } from '../ducks/send';
 import { switchedToUnconnectedAccount } from '../ducks/alerts/unconnected-account';
-import { getUnconnectedAccountAlertEnabledness } from '../ducks/metamask/metamask';
+import {
+  getUnconnectedAccountAlertEnabledness,
+  isEIP1559Network,
+} from '../ducks/metamask/metamask';
 import { LISTED_CONTRACT_ADDRESSES } from '../../shared/constants/tokens';
 import { toChecksumHexAddress } from '../../shared/modules/hexstring-utils';
 import * as actionConstants from './actionConstants';
@@ -1056,6 +1059,19 @@ export function updateMetamaskState(newState) {
       });
     }
 
+    // track when gasFeeEstimates change
+    if (
+      isEqual(currentState.gasFeeEstimates, newState.gasFeeEstimates) === false
+    ) {
+      dispatch({
+        type: actionConstants.GAS_FEE_ESTIMATES_UPDATED,
+        payload: {
+          gasFeeEstimates: newState.gasFeeEstimates,
+          gasEstimateType: newState.gasEstimateType,
+          isEIP1559Network: isEIP1559Network({ metamask: newState }),
+        },
+      });
+    }
     if (provider.chainId !== newProvider.chainId) {
       dispatch({
         type: actionConstants.CHAIN_CHANGED,
@@ -2708,6 +2724,29 @@ export async function updateTokenType(tokenAddress) {
   return token;
 }
 
+/**
+ * initiates polling for gas fee estimates.
+ *
+ * @returns {string} a unique identify of the polling request that can be used
+ *  to remove that request from consideration of whether polling needs to
+ *  continue.
+ */
+export function getGasFeeEstimatesAndStartPolling() {
+  return promisifiedBackground.getGasFeeEstimatesAndStartPolling();
+}
+
+/**
+ * Informs the GasFeeController that a specific token is no longer requiring
+ * gas fee estimates. If all tokens unsubscribe the controller stops polling.
+ *
+ * @param {string} pollToken - Poll token received from calling
+ *  `getGasFeeEstimatesAndStartPolling`.
+ * @returns {void}
+ */
+export function disconnectGasFeeEstimatePoller(pollToken) {
+  return promisifiedBackground.disconnectGasFeeEstimatePoller(pollToken);
+}
+
 // MetaMetrics
 /**
  * @typedef {import('../../shared/constants/metametrics').MetaMetricsEventPayload} MetaMetricsEventPayload
diff --git a/yarn.lock b/yarn.lock
index ee4ddf525..20e5dc2c4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2646,7 +2646,12 @@
     semver "^7.3.5"
     yargs "^17.0.1"
 
-"@metamask/contract-metadata@^1.19.0", "@metamask/contract-metadata@^1.27.0":
+"@metamask/contract-metadata@^1.19.0":
+  version "1.25.0"
+  resolved "https://registry.yarnpkg.com/@metamask/contract-metadata/-/contract-metadata-1.25.0.tgz#442ace91fb40165310764b68d8096d0017bb0492"
+  integrity sha512-yhmYB9CQPv0dckNcPoWDcgtrdUp0OgK0uvkRE5QIBv4b3qENI1/03BztvK2ijbTuMlORUpjPq7/1MQDUPoRPVw==
+
+"@metamask/contract-metadata@^1.27.0":
   version "1.27.0"
   resolved "https://registry.yarnpkg.com/@metamask/contract-metadata/-/contract-metadata-1.27.0.tgz#1e65b821bad6f7d8313dd881116e4366b0662f75"
   integrity sha512-ZAvuROiHjSksy40buCL4M6m16bAmXQl6vjllK/XQxt9+UElhwJSp7PJ1ZULuZXmznBBY64WXlCPjm94JhW4l3g==

From 2cb807dc20c77390f4d1ec3dbeea6c2c093c792a Mon Sep 17 00:00:00 2001
From: Alex Donesky <adonesky@gmail.com>
Date: Fri, 9 Jul 2021 09:17:02 -0500
Subject: [PATCH 101/141] fix up ens/hex address validation error handling
 (#11477)

* fix up ens/hex address validation error handling

* fix lint/tests
---
 ui/ducks/ens.js                               | 21 +++++++++++--------
 ui/ducks/send/send.js                         |  4 ++--
 ui/ducks/send/send.test.js                    |  2 +-
 .../add-recipient/ens-input.component.js      | 15 ++++++-------
 .../add-recipient/ens-input.container.js      |  4 ++--
 .../add-contact/add-contact.component.js      |  4 ++--
 .../add-contact/add-contact.container.js      |  4 ++--
 7 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/ui/ducks/ens.js b/ui/ducks/ens.js
index de72739e6..d2786f1d7 100644
--- a/ui/ducks/ens.js
+++ b/ui/ducks/ens.js
@@ -92,18 +92,20 @@ const slice = createSlice({
     },
     disableEnsLookup: (state) => {
       state.stage = 'NO_NETWORK_SUPPORT';
-      state.error = ENS_NOT_SUPPORTED_ON_NETWORK;
+      state.error = null;
       state.warning = null;
       state.resolution = null;
       state.network = null;
     },
-    resetResolution: (state) => {
+    ensNotSupported: (state) => {
       state.resolution = null;
       state.warning = null;
-      state.error =
-        state.stage === 'NO_NETWORK_SUPPORT'
-          ? ENS_NOT_SUPPORTED_ON_NETWORK
-          : null;
+      state.error = ENS_NOT_SUPPORTED_ON_NETWORK;
+    },
+    resetEnsResolution: (state) => {
+      state.resolution = null;
+      state.warning = null;
+      state.error = null;
     },
   },
   extraReducers: (builder) => {
@@ -123,9 +125,10 @@ const {
   disableEnsLookup,
   ensLookup,
   enableEnsLookup,
-  resetResolution,
+  ensNotSupported,
+  resetEnsResolution,
 } = actions;
-export { resetResolution };
+export { resetEnsResolution };
 
 export function initializeEnsSlice() {
   return (dispatch, getState) => {
@@ -159,7 +162,7 @@ export function lookupEnsName(ensName) {
       ) &&
       !isHexString(trimmedEnsName)
     ) {
-      await dispatch(resetResolution());
+      await dispatch(ensNotSupported());
     } else {
       log.info(`ENS attempting to resolve name: ${trimmedEnsName}`);
       let address;
diff --git a/ui/ducks/send/send.js b/ui/ducks/send/send.js
index a7a98072e..a7e224175 100644
--- a/ui/ducks/send/send.js
+++ b/ui/ducks/send/send.js
@@ -78,7 +78,7 @@ import {
   isValidDomainName,
 } from '../../helpers/utils/util';
 import { getTokens, getUnapprovedTxs } from '../metamask/metamask';
-import { resetResolution } from '../ens';
+import { resetEnsResolution } from '../ens';
 import {
   isBurnAddress,
   isValidHexAddress,
@@ -1284,7 +1284,7 @@ export function resetRecipientInput() {
   return async (dispatch) => {
     await dispatch(updateRecipientUserInput(''));
     await dispatch(updateRecipient({ address: '', nickname: '' }));
-    await dispatch(resetResolution());
+    await dispatch(resetEnsResolution());
     await dispatch(validateRecipientUserInput());
   };
 }
diff --git a/ui/ducks/send/send.test.js b/ui/ducks/send/send.test.js
index 4b96e7a24..0f72349a9 100644
--- a/ui/ducks/send/send.test.js
+++ b/ui/ducks/send/send.test.js
@@ -1457,7 +1457,7 @@ describe('Send Slice', () => {
         );
         expect(actionResult[0].payload).toStrictEqual('');
         expect(actionResult[1].type).toStrictEqual('send/updateRecipient');
-        expect(actionResult[2].type).toStrictEqual('ENS/resetResolution');
+        expect(actionResult[2].type).toStrictEqual('ENS/resetEnsResolution');
         expect(actionResult[3].type).toStrictEqual(
           'send/validateRecipientUserInput',
         );
diff --git a/ui/pages/send/send-content/add-recipient/ens-input.component.js b/ui/pages/send/send-content/add-recipient/ens-input.component.js
index bb1c7f3e7..47d641013 100644
--- a/ui/pages/send/send-content/add-recipient/ens-input.component.js
+++ b/ui/pages/send/send-content/add-recipient/ens-input.component.js
@@ -62,18 +62,19 @@ export default class EnsInput extends Component {
     }
     // Empty ENS state if input is empty
     // maybe scan ENS
-
     if (isValidDomainName(input)) {
       lookupEnsName(input);
-    } else if (
-      onValidAddressTyped &&
-      !isBurnAddress(input) &&
-      isValidHexAddress(input, { mixedCaseUseChecksum: true })
-    ) {
-      onValidAddressTyped(input);
     } else {
       resetEnsResolution();
+      if (
+        onValidAddressTyped &&
+        !isBurnAddress(input) &&
+        isValidHexAddress(input, { mixedCaseUseChecksum: true })
+      ) {
+        onValidAddressTyped(input);
+      }
     }
+
     return null;
   };
 
diff --git a/ui/pages/send/send-content/add-recipient/ens-input.container.js b/ui/pages/send/send-content/add-recipient/ens-input.container.js
index ef61fce85..bf0650b0e 100644
--- a/ui/pages/send/send-content/add-recipient/ens-input.container.js
+++ b/ui/pages/send/send-content/add-recipient/ens-input.container.js
@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import {
   lookupEnsName,
   initializeEnsSlice,
-  resetResolution,
+  resetEnsResolution,
 } from '../../../../ducks/ens';
 import EnsInput from './ens-input.component';
 
@@ -11,7 +11,7 @@ function mapDispatchToProps(dispatch) {
   return {
     lookupEnsName: debounce((ensName) => dispatch(lookupEnsName(ensName)), 150),
     initializeEnsSlice: () => dispatch(initializeEnsSlice()),
-    resetEnsResolution: debounce(() => dispatch(resetResolution()), 300),
+    resetEnsResolution: debounce(() => dispatch(resetEnsResolution()), 300),
   };
 }
 
diff --git a/ui/pages/settings/contact-list-tab/add-contact/add-contact.component.js b/ui/pages/settings/contact-list-tab/add-contact/add-contact.component.js
index 64e076973..6ce7f06f0 100644
--- a/ui/pages/settings/contact-list-tab/add-contact/add-contact.component.js
+++ b/ui/pages/settings/contact-list-tab/add-contact/add-contact.component.js
@@ -27,7 +27,7 @@ export default class AddContact extends PureComponent {
     qrCodeDetected: PropTypes.func,
     ensResolution: PropTypes.string,
     ensError: PropTypes.string,
-    resetResolution: PropTypes.func,
+    resetEnsResolution: PropTypes.func,
   };
 
   state = {
@@ -88,7 +88,7 @@ export default class AddContact extends PureComponent {
           this.validate(text);
         }}
         onReset={() => {
-          this.props.resetResolution();
+          this.props.resetEnsResolution();
           this.setState({ ethAddress: '', input: '' });
         }}
         userInput={this.state.input}
diff --git a/ui/pages/settings/contact-list-tab/add-contact/add-contact.container.js b/ui/pages/settings/contact-list-tab/add-contact/add-contact.container.js
index 49f4deb70..604b10fee 100644
--- a/ui/pages/settings/contact-list-tab/add-contact/add-contact.container.js
+++ b/ui/pages/settings/contact-list-tab/add-contact/add-contact.container.js
@@ -10,7 +10,7 @@ import { getQrCodeData } from '../../../../ducks/app/app';
 import {
   getEnsError,
   getEnsResolution,
-  resetResolution,
+  resetEnsResolution,
 } from '../../../../ducks/ens';
 import AddContact from './add-contact.component';
 
@@ -28,7 +28,7 @@ const mapDispatchToProps = (dispatch) => {
       dispatch(addToAddressBook(recipient, nickname)),
     scanQrCode: () => dispatch(showQrScanner()),
     qrCodeDetected: (data) => dispatch(qrCodeDetected(data)),
-    resetResolution: () => dispatch(resetResolution()),
+    resetEnsResolution: () => dispatch(resetEnsResolution()),
   };
 };
 

From f51a8451b8cdb80e236941dee56027cbe2d9d9dd Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Fri, 9 Jul 2021 10:23:45 -0500
Subject: [PATCH 102/141] add useGasEstimates hook (#11479)

---
 ui/hooks/useGasFeeEstimates.js      |  73 +++++++++
 ui/hooks/useGasFeeEstimates.test.js | 238 ++++++++++++++++++++++++++++
 2 files changed, 311 insertions(+)
 create mode 100644 ui/hooks/useGasFeeEstimates.js
 create mode 100644 ui/hooks/useGasFeeEstimates.test.js

diff --git a/ui/hooks/useGasFeeEstimates.js b/ui/hooks/useGasFeeEstimates.js
new file mode 100644
index 000000000..82ae44f7b
--- /dev/null
+++ b/ui/hooks/useGasFeeEstimates.js
@@ -0,0 +1,73 @@
+import { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { GAS_ESTIMATE_TYPES } from '../../shared/constants/gas';
+import {
+  getEstimatedGasFeeTimeBounds,
+  getGasEstimateType,
+  getGasFeeEstimates,
+  isEIP1559Network,
+} from '../ducks/metamask/metamask';
+import {
+  disconnectGasFeeEstimatePoller,
+  getGasFeeEstimatesAndStartPolling,
+} from '../store/actions';
+
+/**
+ * @typedef {keyof typeof GAS_ESTIMATE_TYPES} GasEstimateTypes
+ */
+
+/**
+ * @typedef {object} GasEstimates
+ * @property {GasEstimateTypes} gasEstimateType - The type of estimate provided
+ * @property {import(
+ *   '@metamask/controllers'
+ * ).GasFeeState['gasFeeEstimates']} gasFeeEstimates - The estimate object
+ * @property {import(
+ *   '@metamask/controllers'
+ * ).GasFeeState['estimatedGasFeeTimeBounds']} [estimatedGasFeeTimeBounds] -
+ *  estimated time boundaries for fee-market type estimates
+ * @property {boolean} isGasEstimateLoading - indicates whether the gas
+ *  estimates are currently loading.
+ */
+
+/**
+ * Gets the current gasFeeEstimates from state and begins polling for new
+ * estimates. When this hook is removed from the tree it will signal to the
+ * GasFeeController that it is done requiring new gas estimates. Also checks
+ * the returned gas estimate for validity on the current network.
+ *
+ * @returns {GasFeeEstimates} - GasFeeEstimates object
+ */
+export function useGasFeeEstimates() {
+  const supportsEIP1559 = useSelector(isEIP1559Network);
+  const gasEstimateType = useSelector(getGasEstimateType);
+  const gasFeeEstimates = useSelector(getGasFeeEstimates);
+  const estimatedGasFeeTimeBounds = useSelector(getEstimatedGasFeeTimeBounds);
+  useEffect(() => {
+    let pollToken;
+    getGasFeeEstimatesAndStartPolling().then((newPollToken) => {
+      pollToken = newPollToken;
+    });
+    return () => {
+      if (pollToken) {
+        disconnectGasFeeEstimatePoller(pollToken);
+      }
+    };
+  }, []);
+
+  // We consider the gas estimate to be loading if the gasEstimateType is
+  // 'NONE' or if the current gasEstimateType does not match the type we expect
+  // for the current network. e.g, a ETH_GASPRICE estimate when on a network
+  // supporting EIP-1559.
+  const isGasEstimatesLoading =
+    gasEstimateType === GAS_ESTIMATE_TYPES.NONE ||
+    (supportsEIP1559 && gasEstimateType !== GAS_ESTIMATE_TYPES.FEE_MARKET) ||
+    (!supportsEIP1559 && gasEstimateType === GAS_ESTIMATE_TYPES.FEE_MARKET);
+
+  return {
+    gasFeeEstimates,
+    gasEstimateType,
+    estimatedGasFeeTimeBounds,
+    isGasEstimatesLoading,
+  };
+}
diff --git a/ui/hooks/useGasFeeEstimates.test.js b/ui/hooks/useGasFeeEstimates.test.js
new file mode 100644
index 000000000..d30127759
--- /dev/null
+++ b/ui/hooks/useGasFeeEstimates.test.js
@@ -0,0 +1,238 @@
+import { cleanup, renderHook } from '@testing-library/react-hooks';
+import { useSelector } from 'react-redux';
+import { GAS_ESTIMATE_TYPES } from '../../shared/constants/gas';
+import createRandomId from '../../shared/modules/random-id';
+import {
+  getGasEstimateType,
+  getGasFeeEstimates,
+  isEIP1559Network,
+} from '../ducks/metamask/metamask';
+import {
+  disconnectGasFeeEstimatePoller,
+  getGasFeeEstimatesAndStartPolling,
+} from '../store/actions';
+import { useGasFeeEstimates } from './useGasFeeEstimates';
+
+jest.mock('../store/actions', () => ({
+  disconnectGasFeeEstimatePoller: jest.fn(),
+  getGasFeeEstimatesAndStartPolling: jest.fn(),
+}));
+
+jest.mock('react-redux', () => {
+  const actual = jest.requireActual('react-redux');
+
+  return {
+    ...actual,
+    useSelector: jest.fn(),
+  };
+});
+
+const DEFAULT_OPTS = {
+  isEIP1559Network: false,
+  gasEstimateType: GAS_ESTIMATE_TYPES.LEGACY,
+  gasFeeEstimates: {
+    low: '10',
+    medium: '20',
+    high: '30',
+  },
+};
+
+const generateUseSelectorRouter = (opts = DEFAULT_OPTS) => (selector) => {
+  if (selector === isEIP1559Network) {
+    return opts.isEIP1559Network ?? DEFAULT_OPTS.isEIP1559Network;
+  }
+  if (selector === getGasEstimateType) {
+    return opts.gasEstimateType ?? DEFAULT_OPTS.gasEstimateType;
+  }
+  if (selector === getGasFeeEstimates) {
+    return opts.gasFeeEstimates ?? DEFAULT_OPTS.gasFeeEstimates;
+  }
+  return undefined;
+};
+
+describe('useGasFeeEstimates', () => {
+  let tokens = [];
+  beforeEach(() => {
+    jest.clearAllMocks();
+    tokens = [];
+    getGasFeeEstimatesAndStartPolling.mockImplementation(() => {
+      const token = createRandomId();
+      tokens.push(token);
+      return Promise.resolve(token);
+    });
+    disconnectGasFeeEstimatePoller.mockImplementation((token) => {
+      tokens = tokens.filter((tkn) => tkn !== token);
+    });
+    useSelector.mockImplementation(generateUseSelectorRouter());
+  });
+
+  it('registers with the controller', () => {
+    renderHook(() => useGasFeeEstimates());
+    expect(tokens).toHaveLength(1);
+  });
+
+  it('clears token with the controller on unmount', async () => {
+    renderHook(() => useGasFeeEstimates());
+    expect(tokens).toHaveLength(1);
+    const expectedToken = tokens[0];
+    await cleanup();
+    expect(getGasFeeEstimatesAndStartPolling).toHaveBeenCalledTimes(1);
+    expect(disconnectGasFeeEstimatePoller).toHaveBeenCalledWith(expectedToken);
+    expect(tokens).toHaveLength(0);
+  });
+
+  it('works with LEGACY gas prices', () => {
+    const {
+      result: { current },
+    } = renderHook(() => useGasFeeEstimates());
+    expect(current).toMatchObject({
+      gasFeeEstimates: DEFAULT_OPTS.gasFeeEstimates,
+      gasEstimateType: GAS_ESTIMATE_TYPES.LEGACY,
+      estimatedGasFeeTimeBounds: undefined,
+      isGasEstimatesLoading: false,
+    });
+  });
+
+  it('works with ETH_GASPRICE gas prices', () => {
+    const gasFeeEstimates = { gasPrice: '10' };
+    useSelector.mockImplementation(
+      generateUseSelectorRouter({
+        gasEstimateType: GAS_ESTIMATE_TYPES.ETH_GASPRICE,
+        gasFeeEstimates,
+      }),
+    );
+
+    const {
+      result: { current },
+    } = renderHook(() => useGasFeeEstimates());
+    expect(current).toMatchObject({
+      gasFeeEstimates,
+      gasEstimateType: GAS_ESTIMATE_TYPES.ETH_GASPRICE,
+      estimatedGasFeeTimeBounds: undefined,
+      isGasEstimatesLoading: false,
+    });
+  });
+
+  it('works with FEE_MARKET gas prices', () => {
+    const gasFeeEstimates = {
+      low: {
+        minWaitTimeEstimate: 180000,
+        maxWaitTimeEstimate: 300000,
+        suggestedMaxPriorityFeePerGas: '3',
+        suggestedMaxFeePerGas: '53',
+      },
+      medium: {
+        minWaitTimeEstimate: 15000,
+        maxWaitTimeEstimate: 60000,
+        suggestedMaxPriorityFeePerGas: '7',
+        suggestedMaxFeePerGas: '70',
+      },
+      high: {
+        minWaitTimeEstimate: 0,
+        maxWaitTimeEstimate: 15000,
+        suggestedMaxPriorityFeePerGas: '10',
+        suggestedMaxFeePerGas: '100',
+      },
+      estimatedBaseFee: '50',
+    };
+    useSelector.mockImplementation(
+      generateUseSelectorRouter({
+        isEIP1559Network: true,
+        gasEstimateType: GAS_ESTIMATE_TYPES.FEE_MARKET,
+        gasFeeEstimates,
+      }),
+    );
+
+    const {
+      result: { current },
+    } = renderHook(() => useGasFeeEstimates());
+    expect(current).toMatchObject({
+      gasFeeEstimates,
+      gasEstimateType: GAS_ESTIMATE_TYPES.FEE_MARKET,
+      estimatedGasFeeTimeBounds: undefined,
+      isGasEstimatesLoading: false,
+    });
+  });
+
+  it('indicates that gas estimates are loading when gasEstimateType is NONE', () => {
+    useSelector.mockImplementation(
+      generateUseSelectorRouter({
+        gasEstimateType: GAS_ESTIMATE_TYPES.NONE,
+        gasFeeEstimates: {},
+      }),
+    );
+
+    const {
+      result: { current },
+    } = renderHook(() => useGasFeeEstimates());
+    expect(current).toMatchObject({
+      gasFeeEstimates: {},
+      gasEstimateType: GAS_ESTIMATE_TYPES.NONE,
+      estimatedGasFeeTimeBounds: undefined,
+      isGasEstimatesLoading: true,
+    });
+  });
+
+  it('indicates that gas estimates are loading when gasEstimateType is not FEE_MARKET but network supports EIP-1559', () => {
+    useSelector.mockImplementation(
+      generateUseSelectorRouter({
+        isEIP1559Network: true,
+        gasEstimateType: GAS_ESTIMATE_TYPES.ETH_GASPRICE,
+        gasFeeEstimates: {
+          gasPrice: '10',
+        },
+      }),
+    );
+
+    const {
+      result: { current },
+    } = renderHook(() => useGasFeeEstimates());
+    expect(current).toMatchObject({
+      gasFeeEstimates: { gasPrice: '10' },
+      gasEstimateType: GAS_ESTIMATE_TYPES.ETH_GASPRICE,
+      estimatedGasFeeTimeBounds: undefined,
+      isGasEstimatesLoading: true,
+    });
+  });
+
+  it('indicates that gas estimates are loading when gasEstimateType is FEE_MARKET but network does not support EIP-1559', () => {
+    const gasFeeEstimates = {
+      low: {
+        minWaitTimeEstimate: 180000,
+        maxWaitTimeEstimate: 300000,
+        suggestedMaxPriorityFeePerGas: '3',
+        suggestedMaxFeePerGas: '53',
+      },
+      medium: {
+        minWaitTimeEstimate: 15000,
+        maxWaitTimeEstimate: 60000,
+        suggestedMaxPriorityFeePerGas: '7',
+        suggestedMaxFeePerGas: '70',
+      },
+      high: {
+        minWaitTimeEstimate: 0,
+        maxWaitTimeEstimate: 15000,
+        suggestedMaxPriorityFeePerGas: '10',
+        suggestedMaxFeePerGas: '100',
+      },
+      estimatedBaseFee: '50',
+    };
+    useSelector.mockImplementation(
+      generateUseSelectorRouter({
+        isEIP1559Network: false,
+        gasEstimateType: GAS_ESTIMATE_TYPES.FEE_MARKET,
+        gasFeeEstimates,
+      }),
+    );
+
+    const {
+      result: { current },
+    } = renderHook(() => useGasFeeEstimates());
+    expect(current).toMatchObject({
+      gasFeeEstimates,
+      gasEstimateType: GAS_ESTIMATE_TYPES.FEE_MARKET,
+      estimatedGasFeeTimeBounds: undefined,
+      isGasEstimatesLoading: true,
+    });
+  });
+});

From d43843966124ae3eac828831cc6083d9ec046125 Mon Sep 17 00:00:00 2001
From: Daniel <80175477+dan437@users.noreply.github.com>
Date: Fri, 9 Jul 2021 17:24:00 +0200
Subject: [PATCH 103/141] Swaps: Add conditional routing to new APIs based on a
 feature flag (#11470)

---
 app/_locales/en/messages.json                 |   3 +
 app/scripts/controllers/swaps.js              |  28 ++--
 app/scripts/controllers/swaps.test.js         |  19 ++-
 jest.config.js                                |   8 +-
 shared/constants/network.js                   |   1 +
 shared/constants/swaps.js                     |   4 +
 test/data/fetch-mocks.json                    |  18 ++-
 test/e2e/webdriver/index.js                   |   6 +-
 test/jest/constants.js                        |   1 +
 test/jest/mock-store.js                       |   1 +
 test/jest/mocks.js                            |  20 +++
 ui/ducks/swaps/swaps.js                       |  54 +++++--
 ui/ducks/swaps/swaps.test.js                  | 107 +++++++++----
 ui/pages/home/home.container.js               |   4 +-
 ui/pages/swaps/build-quote/build-quote.js     |  18 ++-
 ui/pages/swaps/fee-card/fee-card.js           |   3 +
 ui/pages/swaps/index.js                       |  47 +++---
 ui/pages/swaps/index.test.js                  |  10 +-
 .../list-item-search.component.js             |   4 +-
 ui/pages/swaps/swaps.util.js                  | 149 ++++++++++++++----
 ui/pages/swaps/swaps.util.test.js             |  80 +++++++++-
 ui/store/actions.js                           |   4 +-
 22 files changed, 448 insertions(+), 141 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 45728a415..78e00d6b2 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -1266,6 +1266,9 @@
   "networkNameEthereum": {
     "message": "Ethereum"
   },
+  "networkNamePolygon": {
+    "message": "Polygon"
+  },
   "networkNameTestnet": {
     "message": "Testnet"
   },
diff --git a/app/scripts/controllers/swaps.js b/app/scripts/controllers/swaps.js
index 9b2c21204..424039408 100644
--- a/app/scripts/controllers/swaps.js
+++ b/app/scripts/controllers/swaps.js
@@ -19,7 +19,6 @@ import { isSwapsDefaultTokenAddress } from '../../../shared/modules/swaps.utils'
 
 import {
   fetchTradesInfo as defaultFetchTradesInfo,
-  fetchSwapsFeatureLiveness as defaultFetchSwapsFeatureLiveness,
   fetchSwapsQuoteRefreshTime as defaultFetchSwapsQuoteRefreshTime,
 } from '../../../ui/pages/swaps/swaps.util';
 import { MINUTE, SECOND } from '../../../shared/constants/time';
@@ -73,6 +72,7 @@ const initialState = {
     topAggId: null,
     routeState: '',
     swapsFeatureIsLive: true,
+    useNewSwapsApi: false,
     swapsQuoteRefreshTime: FALLBACK_QUOTE_REFRESH_TIME,
   },
 };
@@ -85,7 +85,6 @@ export default class SwapsController {
     getProviderConfig,
     tokenRatesStore,
     fetchTradesInfo = defaultFetchTradesInfo,
-    fetchSwapsFeatureLiveness = defaultFetchSwapsFeatureLiveness,
     fetchSwapsQuoteRefreshTime = defaultFetchSwapsQuoteRefreshTime,
     getCurrentChainId,
   }) {
@@ -94,7 +93,6 @@ export default class SwapsController {
     });
 
     this._fetchTradesInfo = fetchTradesInfo;
-    this._fetchSwapsFeatureLiveness = fetchSwapsFeatureLiveness;
     this._fetchSwapsQuoteRefreshTime = fetchSwapsQuoteRefreshTime;
     this._getCurrentChainId = getCurrentChainId;
 
@@ -119,15 +117,19 @@ export default class SwapsController {
   // Sets the refresh rate for quote updates from the MetaSwap API
   async _setSwapsQuoteRefreshTime() {
     const chainId = this._getCurrentChainId();
+    const { swapsState } = this.store.getState();
+
     // Default to fallback time unless API returns valid response
     let swapsQuoteRefreshTime = FALLBACK_QUOTE_REFRESH_TIME;
     try {
-      swapsQuoteRefreshTime = await this._fetchSwapsQuoteRefreshTime(chainId);
+      swapsQuoteRefreshTime = await this._fetchSwapsQuoteRefreshTime(
+        chainId,
+        swapsState.useNewSwapsApi,
+      );
     } catch (e) {
       console.error('Request for swaps quote refresh time failed: ', e);
     }
 
-    const { swapsState } = this.store.getState();
     this.store.updateState({
       swapsState: { ...swapsState, swapsQuoteRefreshTime },
     });
@@ -162,6 +164,9 @@ export default class SwapsController {
     isPolledRequest,
   ) {
     const { chainId } = fetchParamsMetaData;
+    const {
+      swapsState: { useNewSwapsApi },
+    } = this.store.getState();
 
     if (!fetchParams) {
       return null;
@@ -182,7 +187,10 @@ export default class SwapsController {
     this.indexOfNewestCallInFlight = indexOfCurrentCall;
 
     let [newQuotes] = await Promise.all([
-      this._fetchTradesInfo(fetchParams, fetchParamsMetaData),
+      this._fetchTradesInfo(fetchParams, {
+        ...fetchParamsMetaData,
+        useNewSwapsApi,
+      }),
       this._setSwapsQuoteRefreshTime(),
     ]);
 
@@ -449,22 +457,23 @@ export default class SwapsController {
     this.store.updateState({ swapsState: { ...swapsState, routeState } });
   }
 
-  setSwapsLiveness(swapsFeatureIsLive) {
+  setSwapsLiveness(swapsLiveness) {
     const { swapsState } = this.store.getState();
+    const { swapsFeatureIsLive, useNewSwapsApi } = swapsLiveness;
     this.store.updateState({
-      swapsState: { ...swapsState, swapsFeatureIsLive },
+      swapsState: { ...swapsState, swapsFeatureIsLive, useNewSwapsApi },
     });
   }
 
   resetPostFetchState() {
     const { swapsState } = this.store.getState();
-
     this.store.updateState({
       swapsState: {
         ...initialState.swapsState,
         tokens: swapsState.tokens,
         fetchParams: swapsState.fetchParams,
         swapsFeatureIsLive: swapsState.swapsFeatureIsLive,
+        useNewSwapsApi: swapsState.useNewSwapsApi,
         swapsQuoteRefreshTime: swapsState.swapsQuoteRefreshTime,
       },
     });
@@ -473,7 +482,6 @@ export default class SwapsController {
 
   resetSwapsState() {
     const { swapsState } = this.store.getState();
-
     this.store.updateState({
       swapsState: {
         ...initialState.swapsState,
diff --git a/app/scripts/controllers/swaps.test.js b/app/scripts/controllers/swaps.test.js
index d3b96a098..642191f92 100644
--- a/app/scripts/controllers/swaps.test.js
+++ b/app/scripts/controllers/swaps.test.js
@@ -128,13 +128,13 @@ const EMPTY_INIT_STATE = {
     topAggId: null,
     routeState: '',
     swapsFeatureIsLive: true,
+    useNewSwapsApi: false,
     swapsQuoteRefreshTime: 60000,
   },
 };
 
 const sandbox = sinon.createSandbox();
 const fetchTradesInfoStub = sandbox.stub();
-const fetchSwapsFeatureLivenessStub = sandbox.stub();
 const fetchSwapsQuoteRefreshTimeStub = sandbox.stub();
 const getCurrentChainIdStub = sandbox.stub();
 getCurrentChainIdStub.returns(MAINNET_CHAIN_ID);
@@ -150,7 +150,6 @@ describe('SwapsController', function () {
       getProviderConfig: MOCK_GET_PROVIDER_CONFIG,
       tokenRatesStore: MOCK_TOKEN_RATES_STORE,
       fetchTradesInfo: fetchTradesInfoStub,
-      fetchSwapsFeatureLiveness: fetchSwapsFeatureLivenessStub,
       fetchSwapsQuoteRefreshTime: fetchSwapsQuoteRefreshTimeStub,
       getCurrentChainId: getCurrentChainIdStub,
     });
@@ -201,7 +200,6 @@ describe('SwapsController', function () {
         getProviderConfig: MOCK_GET_PROVIDER_CONFIG,
         tokenRatesStore: MOCK_TOKEN_RATES_STORE,
         fetchTradesInfo: fetchTradesInfoStub,
-        fetchSwapsFeatureLiveness: fetchSwapsFeatureLivenessStub,
         getCurrentChainId: getCurrentChainIdStub,
       });
       const currentEthersInstance = swapsController.ethersProvider;
@@ -226,7 +224,6 @@ describe('SwapsController', function () {
         getProviderConfig: MOCK_GET_PROVIDER_CONFIG,
         tokenRatesStore: MOCK_TOKEN_RATES_STORE,
         fetchTradesInfo: fetchTradesInfoStub,
-        fetchSwapsFeatureLiveness: fetchSwapsFeatureLivenessStub,
         getCurrentChainId: getCurrentChainIdStub,
       });
       const currentEthersInstance = swapsController.ethersProvider;
@@ -251,7 +248,6 @@ describe('SwapsController', function () {
         getProviderConfig: MOCK_GET_PROVIDER_CONFIG,
         tokenRatesStore: MOCK_TOKEN_RATES_STORE,
         fetchTradesInfo: fetchTradesInfoStub,
-        fetchSwapsFeatureLiveness: fetchSwapsFeatureLivenessStub,
         getCurrentChainId: getCurrentChainIdStub,
       });
       const currentEthersInstance = swapsController.ethersProvider;
@@ -658,6 +654,7 @@ describe('SwapsController', function () {
         const quotes = await swapsController.fetchAndSetQuotes(undefined);
         assert.strictEqual(quotes, null);
       });
+
       it('calls fetchTradesInfo with the given fetchParams and returns the correct quotes', async function () {
         fetchTradesInfoStub.resolves(getMockQuotes());
         fetchSwapsQuoteRefreshTimeStub.resolves(getMockQuoteRefreshTime());
@@ -695,15 +692,15 @@ describe('SwapsController', function () {
           metaMaskFeeInEth: '0.5050505050505050505',
           ethValueOfTokens: '50',
         });
-
         assert.strictEqual(
-          fetchTradesInfoStub.calledOnceWithExactly(
-            MOCK_FETCH_PARAMS,
-            MOCK_FETCH_METADATA,
-          ),
+          fetchTradesInfoStub.calledOnceWithExactly(MOCK_FETCH_PARAMS, {
+            ...MOCK_FETCH_METADATA,
+            useNewSwapsApi: false,
+          }),
           true,
         );
       });
+
       it('performs the allowance check', async function () {
         fetchTradesInfoStub.resolves(getMockQuotes());
         fetchSwapsQuoteRefreshTimeStub.resolves(getMockQuoteRefreshTime());
@@ -878,12 +875,14 @@ describe('SwapsController', function () {
         const tokens = 'test';
         const fetchParams = 'test';
         const swapsFeatureIsLive = false;
+        const useNewSwapsApi = false;
         const swapsQuoteRefreshTime = 0;
         swapsController.store.updateState({
           swapsState: {
             tokens,
             fetchParams,
             swapsFeatureIsLive,
+            useNewSwapsApi,
             swapsQuoteRefreshTime,
           },
         });
diff --git a/jest.config.js b/jest.config.js
index 3219d5eba..425f7580f 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -5,10 +5,10 @@ module.exports = {
   coveragePathIgnorePatterns: ['.stories.js', '.snap'],
   coverageThreshold: {
     global: {
-      branches: 45.45,
-      functions: 55.29,
-      lines: 60.22,
-      statements: 60.43,
+      branches: 45.24,
+      functions: 51.94,
+      lines: 58.36,
+      statements: 58.6,
     },
   },
   setupFiles: ['./test/setup.js', './test/env.js'],
diff --git a/shared/constants/network.js b/shared/constants/network.js
index db4fe9a2e..d937f7d9a 100644
--- a/shared/constants/network.js
+++ b/shared/constants/network.js
@@ -21,6 +21,7 @@ export const LOCALHOST_CHAIN_ID = '0x539';
 export const BSC_CHAIN_ID = '0x38';
 export const OPTIMISM_CHAIN_ID = '0xa';
 export const OPTIMISM_TESTNET_CHAIN_ID = '0x45';
+export const POLYGON_CHAIN_ID = '0x89';
 
 /**
  * The largest possible chain ID we can handle.
diff --git a/shared/constants/swaps.js b/shared/constants/swaps.js
index 42a2167f3..00512c0cc 100644
--- a/shared/constants/swaps.js
+++ b/shared/constants/swaps.js
@@ -93,3 +93,7 @@ export const SWAPS_CHAINID_DEFAULT_BLOCK_EXPLORER_URL_MAP = {
   [BSC_CHAIN_ID]: BSC_DEFAULT_BLOCK_EXPLORER_URL,
   [MAINNET_CHAIN_ID]: MAINNET_DEFAULT_BLOCK_EXPLORER_URL,
 };
+
+export const ETHEREUM = 'ethereum';
+export const POLYGON = 'polygon';
+export const BSC = 'bsc';
diff --git a/test/data/fetch-mocks.json b/test/data/fetch-mocks.json
index 886f87697..9299b4602 100644
--- a/test/data/fetch-mocks.json
+++ b/test/data/fetch-mocks.json
@@ -8,9 +8,21 @@
     "mockMetaMetricsResponse": true
   },
   "swaps": {
-    "featureFlag": {
-      "status": {
-        "active": true
+    "featureFlags": {
+      "bsc": {
+        "mobile_active": false,
+        "extension_active": true,
+        "fallback_to_v1": true
+      },
+      "ethereum": {
+        "mobile_active": false,
+        "extension_active": true,
+        "fallback_to_v1": true
+      },
+      "polygon": {
+        "mobile_active": false,
+        "extension_active": true,
+        "fallback_to_v1": false
       }
     }
   }
diff --git a/test/e2e/webdriver/index.js b/test/e2e/webdriver/index.js
index b7647f96a..075718631 100644
--- a/test/e2e/webdriver/index.js
+++ b/test/e2e/webdriver/index.js
@@ -48,9 +48,9 @@ async function setupFetchMocking(driver) {
         return { json: async () => clone(mockResponses.gasPricesBasic) };
       } else if (url.match(/chromeextensionmm/u)) {
         return { json: async () => clone(mockResponses.metametrics) };
-      } else if (url.match(/^https:\/\/(api\.metaswap|.*airswap-dev)/u)) {
-        if (url.match(/featureFlag$/u)) {
-          return { json: async () => clone(mockResponses.swaps.featureFlag) };
+      } else if (url.match(/^https:\/\/(api2\.metaswap\.codefi\.network)/u)) {
+        if (url.match(/featureFlags$/u)) {
+          return { json: async () => clone(mockResponses.swaps.featureFlags) };
         }
       }
       return window.origFetch(...args);
diff --git a/test/jest/constants.js b/test/jest/constants.js
index 2ed360574..da5c54bdf 100644
--- a/test/jest/constants.js
+++ b/test/jest/constants.js
@@ -1 +1,2 @@
 export const METASWAP_BASE_URL = 'https://api.metaswap.codefi.network';
+export const METASWAP_API_V2_BASE_URL = 'https://api2.metaswap.codefi.network';
diff --git a/test/jest/mock-store.js b/test/jest/mock-store.js
index 35e52682f..325c9f2b5 100644
--- a/test/jest/mock-store.js
+++ b/test/jest/mock-store.js
@@ -220,6 +220,7 @@ export const createSwapsMockStore = () => {
         topAggId: null,
         routeState: '',
         swapsFeatureIsLive: false,
+        useNewSwapsApi: false,
       },
     },
     appState: {
diff --git a/test/jest/mocks.js b/test/jest/mocks.js
index c57b2068c..4d7b4cd68 100644
--- a/test/jest/mocks.js
+++ b/test/jest/mocks.js
@@ -59,3 +59,23 @@ export const TOKENS_GET_RESPONSE = [
     address: '0x0D8775F648430679A709E98d2b0Cb6250d2887EF',
   },
 ];
+
+export const createFeatureFlagsResponse = () => {
+  return {
+    bsc: {
+      mobile_active: false,
+      extension_active: true,
+      fallback_to_v1: true,
+    },
+    ethereum: {
+      mobile_active: false,
+      extension_active: true,
+      fallback_to_v1: true,
+    },
+    polygon: {
+      mobile_active: false,
+      extension_active: true,
+      fallback_to_v1: false,
+    },
+  };
+};
diff --git a/ui/ducks/swaps/swaps.js b/ui/ducks/swaps/swaps.js
index 3fbd63676..c047d4134 100644
--- a/ui/ducks/swaps/swaps.js
+++ b/ui/ducks/swaps/swaps.js
@@ -34,9 +34,10 @@ import {
   SWAPS_MAINTENANCE_ROUTE,
 } from '../../helpers/constants/routes';
 import {
-  fetchSwapsFeatureLiveness,
+  fetchSwapsFeatureFlags,
   fetchSwapsGasPrices,
   isContractAddressValid,
+  getSwapsLivenessForNetwork,
 } from '../../pages/swaps/swaps.util';
 import { calcGasTotal } from '../../pages/send/send.utils';
 import {
@@ -223,9 +224,12 @@ export function shouldShowCustomPriceTooLowWarning(state) {
 
 const getSwapsState = (state) => state.metamask.swapsState;
 
-export const getSwapsFeatureLiveness = (state) =>
+export const getSwapsFeatureIsLive = (state) =>
   state.metamask.swapsState.swapsFeatureIsLive;
 
+export const getUseNewSwapsApi = (state) =>
+  state.metamask.swapsState.useNewSwapsApi;
+
 export const getSwapsQuoteRefreshTime = (state) =>
   state.metamask.swapsState.swapsQuoteRefreshTime;
 
@@ -373,16 +377,21 @@ export const fetchAndSetSwapsGasPriceInfo = () => {
 
 export const fetchSwapsLiveness = () => {
   return async (dispatch, getState) => {
-    let swapsFeatureIsLive = false;
+    let swapsLivenessForNetwork = {
+      swapsFeatureIsLive: false,
+      useNewSwapsApi: false,
+    };
     try {
-      swapsFeatureIsLive = await fetchSwapsFeatureLiveness(
+      const swapsFeatureFlags = await fetchSwapsFeatureFlags();
+      swapsLivenessForNetwork = getSwapsLivenessForNetwork(
+        swapsFeatureFlags,
         getCurrentChainId(getState()),
       );
     } catch (error) {
       log.error('Failed to fetch Swaps liveness, defaulting to false.', error);
     }
-    await dispatch(setSwapsLiveness(swapsFeatureIsLive));
-    return swapsFeatureIsLive;
+    await dispatch(setSwapsLiveness(swapsLivenessForNetwork));
+    return swapsLivenessForNetwork;
   };
 };
 
@@ -395,15 +404,22 @@ export const fetchQuotesAndSetQuoteState = (
   return async (dispatch, getState) => {
     const state = getState();
     const chainId = getCurrentChainId(state);
-    let swapsFeatureIsLive = false;
+    let swapsLivenessForNetwork = {
+      swapsFeatureIsLive: false,
+      useNewSwapsApi: false,
+    };
     try {
-      swapsFeatureIsLive = await fetchSwapsFeatureLiveness(chainId);
+      const swapsFeatureFlags = await fetchSwapsFeatureFlags();
+      swapsLivenessForNetwork = getSwapsLivenessForNetwork(
+        swapsFeatureFlags,
+        chainId,
+      );
     } catch (error) {
       log.error('Failed to fetch Swaps liveness, defaulting to false.', error);
     }
-    await dispatch(setSwapsLiveness(swapsFeatureIsLive));
+    await dispatch(setSwapsLiveness(swapsLivenessForNetwork));
 
-    if (!swapsFeatureIsLive) {
+    if (!swapsLivenessForNetwork.swapsFeatureIsLive) {
       await history.push(SWAPS_MAINTENANCE_ROUTE);
       return;
     }
@@ -600,15 +616,22 @@ export const signAndSendTransactions = (history, metaMetricsEvent) => {
     const state = getState();
     const chainId = getCurrentChainId(state);
     const hardwareWalletUsed = isHardwareWallet(state);
-    let swapsFeatureIsLive = false;
+    let swapsLivenessForNetwork = {
+      swapsFeatureIsLive: false,
+      useNewSwapsApi: false,
+    };
     try {
-      swapsFeatureIsLive = await fetchSwapsFeatureLiveness(chainId);
+      const swapsFeatureFlags = await fetchSwapsFeatureFlags();
+      swapsLivenessForNetwork = getSwapsLivenessForNetwork(
+        swapsFeatureFlags,
+        chainId,
+      );
     } catch (error) {
       log.error('Failed to fetch Swaps liveness, defaulting to false.', error);
     }
-    await dispatch(setSwapsLiveness(swapsFeatureIsLive));
+    await dispatch(setSwapsLiveness(swapsLivenessForNetwork));
 
-    if (!swapsFeatureIsLive) {
+    if (!swapsLivenessForNetwork.swapsFeatureIsLive) {
       await history.push(SWAPS_MAINTENANCE_ROUTE);
       return;
     }
@@ -808,12 +831,13 @@ export function fetchMetaSwapsGasPriceEstimates() {
   return async (dispatch, getState) => {
     const state = getState();
     const chainId = getCurrentChainId(state);
+    const useNewSwapsApi = getUseNewSwapsApi(state);
 
     dispatch(swapGasPriceEstimatesFetchStarted());
 
     let priceEstimates;
     try {
-      priceEstimates = await fetchSwapsGasPrices(chainId);
+      priceEstimates = await fetchSwapsGasPrices(chainId, useNewSwapsApi);
     } catch (e) {
       log.warn('Fetching swaps gas prices failed:', e);
 
diff --git a/ui/ducks/swaps/swaps.test.js b/ui/ducks/swaps/swaps.test.js
index a94869267..c3a9c9e3e 100644
--- a/ui/ducks/swaps/swaps.test.js
+++ b/ui/ducks/swaps/swaps.test.js
@@ -1,5 +1,6 @@
 import nock from 'nock';
 
+import { MOCKS } from '../../../test/jest';
 import { setSwapsLiveness } from '../../store/actions';
 import { setStorageItem } from '../../helpers/utils/storage-helpers';
 import * as swaps from './swaps';
@@ -25,7 +26,7 @@ describe('Ducks - Swaps', () => {
   describe('fetchSwapsLiveness', () => {
     const cleanFeatureFlagApiCache = () => {
       setStorageItem(
-        'cachedFetch:https://api.metaswap.codefi.network/featureFlag',
+        'cachedFetch:https://api2.metaswap.codefi.network/featureFlags',
         null,
       );
     };
@@ -34,12 +35,12 @@ describe('Ducks - Swaps', () => {
       cleanFeatureFlagApiCache();
     });
 
-    const mockFeatureFlagApiResponse = ({
-      active = false,
+    const mockFeatureFlagsApiResponse = ({
+      featureFlagsResponse,
       replyWithError = false,
     } = {}) => {
-      const apiNock = nock('https://api.metaswap.codefi.network').get(
-        '/featureFlag',
+      const apiNock = nock('https://api2.metaswap.codefi.network').get(
+        '/featureFlags',
       );
       if (replyWithError) {
         return apiNock.replyWithError({
@@ -47,9 +48,7 @@ describe('Ducks - Swaps', () => {
           code: 'serverSideError',
         });
       }
-      return apiNock.reply(200, {
-        active,
-      });
+      return apiNock.reply(200, featureFlagsResponse);
     };
 
     const createGetState = () => {
@@ -58,61 +57,111 @@ describe('Ducks - Swaps', () => {
       });
     };
 
-    it('returns true if the Swaps feature is enabled', async () => {
+    it('checks that Swaps for ETH are enabled and can use new API', async () => {
       const mockDispatch = jest.fn();
-      const featureFlagApiNock = mockFeatureFlagApiResponse({ active: true });
-      const isSwapsFeatureEnabled = await swaps.fetchSwapsLiveness()(
+      const expectedSwapsLiveness = {
+        swapsFeatureIsLive: true,
+        useNewSwapsApi: true,
+      };
+      const featureFlagsResponse = MOCKS.createFeatureFlagsResponse();
+      const featureFlagApiNock = mockFeatureFlagsApiResponse({
+        featureFlagsResponse,
+      });
+      const swapsLiveness = await swaps.fetchSwapsLiveness()(
         mockDispatch,
         createGetState(),
       );
       expect(featureFlagApiNock.isDone()).toBe(true);
       expect(mockDispatch).toHaveBeenCalledTimes(1);
-      expect(setSwapsLiveness).toHaveBeenCalledWith(true);
-      expect(isSwapsFeatureEnabled).toBe(true);
+      expect(setSwapsLiveness).toHaveBeenCalledWith(expectedSwapsLiveness);
+      expect(swapsLiveness).toMatchObject(expectedSwapsLiveness);
     });
 
-    it('returns false if the Swaps feature is disabled', async () => {
+    it('checks that Swaps for ETH are disabled for API v2 and enabled for API v1', async () => {
       const mockDispatch = jest.fn();
-      const featureFlagApiNock = mockFeatureFlagApiResponse({ active: false });
-      const isSwapsFeatureEnabled = await swaps.fetchSwapsLiveness()(
+      const expectedSwapsLiveness = {
+        swapsFeatureIsLive: true,
+        useNewSwapsApi: false,
+      };
+      const featureFlagsResponse = MOCKS.createFeatureFlagsResponse();
+      featureFlagsResponse.ethereum.extension_active = false;
+      const featureFlagApiNock = mockFeatureFlagsApiResponse({
+        featureFlagsResponse,
+      });
+      const swapsLiveness = await swaps.fetchSwapsLiveness()(
         mockDispatch,
         createGetState(),
       );
       expect(featureFlagApiNock.isDone()).toBe(true);
       expect(mockDispatch).toHaveBeenCalledTimes(1);
-      expect(setSwapsLiveness).toHaveBeenCalledWith(false);
-      expect(isSwapsFeatureEnabled).toBe(false);
+      expect(setSwapsLiveness).toHaveBeenCalledWith(expectedSwapsLiveness);
+      expect(swapsLiveness).toMatchObject(expectedSwapsLiveness);
     });
 
-    it('returns false if the /featureFlag API call throws an error', async () => {
+    it('checks that Swaps for ETH are disabled for API v1 and v2', async () => {
       const mockDispatch = jest.fn();
-      const featureFlagApiNock = mockFeatureFlagApiResponse({
+      const expectedSwapsLiveness = {
+        swapsFeatureIsLive: false,
+        useNewSwapsApi: false,
+      };
+      const featureFlagsResponse = MOCKS.createFeatureFlagsResponse();
+      featureFlagsResponse.ethereum.extension_active = false;
+      featureFlagsResponse.ethereum.fallback_to_v1 = false;
+      const featureFlagApiNock = mockFeatureFlagsApiResponse({
+        featureFlagsResponse,
+      });
+      const swapsLiveness = await swaps.fetchSwapsLiveness()(
+        mockDispatch,
+        createGetState(),
+      );
+      expect(featureFlagApiNock.isDone()).toBe(true);
+      expect(mockDispatch).toHaveBeenCalledTimes(1);
+      expect(setSwapsLiveness).toHaveBeenCalledWith(expectedSwapsLiveness);
+      expect(swapsLiveness).toMatchObject(expectedSwapsLiveness);
+    });
+
+    it('checks that Swaps for ETH are disabled if the /featureFlags API call throws an error', async () => {
+      const mockDispatch = jest.fn();
+      const expectedSwapsLiveness = {
+        swapsFeatureIsLive: false,
+        useNewSwapsApi: false,
+      };
+      const featureFlagApiNock = mockFeatureFlagsApiResponse({
         replyWithError: true,
       });
-      const isSwapsFeatureEnabled = await swaps.fetchSwapsLiveness()(
+      const swapsLiveness = await swaps.fetchSwapsLiveness()(
         mockDispatch,
         createGetState(),
       );
       expect(featureFlagApiNock.isDone()).toBe(true);
       expect(mockDispatch).toHaveBeenCalledTimes(1);
-      expect(setSwapsLiveness).toHaveBeenCalledWith(false);
-      expect(isSwapsFeatureEnabled).toBe(false);
+      expect(setSwapsLiveness).toHaveBeenCalledWith(expectedSwapsLiveness);
+      expect(swapsLiveness).toMatchObject(expectedSwapsLiveness);
     });
 
-    it('only calls the API once and returns true from cache for the second call', async () => {
+    it('only calls the API once and returns response from cache for the second call', async () => {
       const mockDispatch = jest.fn();
-      const featureFlagApiNock = mockFeatureFlagApiResponse({ active: true });
+      const expectedSwapsLiveness = {
+        swapsFeatureIsLive: true,
+        useNewSwapsApi: true,
+      };
+      const featureFlagsResponse = MOCKS.createFeatureFlagsResponse();
+      const featureFlagApiNock = mockFeatureFlagsApiResponse({
+        featureFlagsResponse,
+      });
       await swaps.fetchSwapsLiveness()(mockDispatch, createGetState());
       expect(featureFlagApiNock.isDone()).toBe(true);
-      const featureFlagApiNock2 = mockFeatureFlagApiResponse({ active: true });
-      const isSwapsFeatureEnabled = await swaps.fetchSwapsLiveness()(
+      const featureFlagApiNock2 = mockFeatureFlagsApiResponse({
+        featureFlagsResponse,
+      });
+      const swapsLiveness = await swaps.fetchSwapsLiveness()(
         mockDispatch,
         createGetState(),
       );
       expect(featureFlagApiNock2.isDone()).toBe(false); // Second API call wasn't made, cache was used instead.
       expect(mockDispatch).toHaveBeenCalledTimes(2);
-      expect(setSwapsLiveness).toHaveBeenCalledWith(true);
-      expect(isSwapsFeatureEnabled).toBe(true);
+      expect(setSwapsLiveness).toHaveBeenCalledWith(expectedSwapsLiveness);
+      expect(swapsLiveness).toMatchObject(expectedSwapsLiveness);
     });
   });
 });
diff --git a/ui/pages/home/home.container.js b/ui/pages/home/home.container.js
index 2b989ae03..4d179abf9 100644
--- a/ui/pages/home/home.container.js
+++ b/ui/pages/home/home.container.js
@@ -31,7 +31,7 @@ import {
 } from '../../store/actions';
 import { setThreeBoxLastUpdated, hideWhatsNewPopup } from '../../ducks/app/app';
 import { getWeb3ShimUsageAlertEnabledness } from '../../ducks/metamask/metamask';
-import { getSwapsFeatureLiveness } from '../../ducks/swaps/swaps';
+import { getSwapsFeatureIsLive } from '../../ducks/swaps/swaps';
 import { getEnvironmentType } from '../../../app/scripts/lib/util';
 import {
   ENVIRONMENT_TYPE_NOTIFICATION,
@@ -60,7 +60,7 @@ const mapStateToProps = (state) => {
   const accountBalance = getCurrentEthBalance(state);
   const { forgottenPassword, threeBoxLastUpdated } = appState;
   const totalUnapprovedCount = getTotalUnapprovedCount(state);
-  const swapsEnabled = getSwapsFeatureLiveness(state);
+  const swapsEnabled = getSwapsFeatureIsLive(state);
   const pendingConfirmations = getUnapprovedTemplatedConfirmations(state);
 
   const envType = getEnvironmentType();
diff --git a/ui/pages/swaps/build-quote/build-quote.js b/ui/pages/swaps/build-quote/build-quote.js
index 1d5220258..4985a8f6d 100644
--- a/ui/pages/swaps/build-quote/build-quote.js
+++ b/ui/pages/swaps/build-quote/build-quote.js
@@ -141,7 +141,9 @@ export default function BuildQuote({
   const toTokenIsNotDefault =
     selectedToToken?.address &&
     !isSwapsDefaultTokenAddress(selectedToToken?.address, chainId);
-  const occurances = Number(selectedToToken?.occurances || 0);
+  const occurrences = Number(
+    selectedToToken?.occurances || selectedToToken?.occurrences || 0,
+  );
   const {
     address: fromTokenAddress,
     symbol: fromTokenSymbol,
@@ -354,11 +356,11 @@ export default function BuildQuote({
 
   let tokenVerificationDescription = '';
   if (blockExplorerTokenLink) {
-    if (occurances === 1) {
+    if (occurrences === 1) {
       tokenVerificationDescription = t('verifyThisTokenOn', [
         <BlockExplorerLink key="block-explorer-link" />,
       ]);
-    } else if (occurances === 0) {
+    } else if (occurrences === 0) {
       tokenVerificationDescription = t('verifyThisUnconfirmedTokenOn', [
         <BlockExplorerLink key="block-explorer-link" />,
       ]);
@@ -470,13 +472,13 @@ export default function BuildQuote({
           />
         </div>
         {toTokenIsNotDefault &&
-          (occurances < 2 ? (
+          (occurrences < 2 ? (
             <ActionableMessage
-              type={occurances === 1 ? 'warning' : 'danger'}
+              type={occurrences === 1 ? 'warning' : 'danger'}
               message={
                 <div className="build-quote__token-verification-warning-message">
                   <div className="build-quote__bold">
-                    {occurances === 1
+                    {occurrences === 1
                       ? t('swapTokenVerificationOnlyOneSource')
                       : t('swapTokenVerificationAddedManually')}
                   </div>
@@ -503,7 +505,7 @@ export default function BuildQuote({
                 className="build-quote__bold"
                 key="token-verification-bold-text"
               >
-                {t('swapTokenVerificationSources', [occurances])}
+                {t('swapTokenVerificationSources', [occurrences])}
               </span>
               {blockExplorerTokenLink && (
                 <>
@@ -563,7 +565,7 @@ export default function BuildQuote({
           !selectedToToken?.address ||
           Number(maxSlippage) < 0 ||
           Number(maxSlippage) > MAX_ALLOWED_SLIPPAGE ||
-          (toTokenIsNotDefault && occurances < 2 && !verificationClicked)
+          (toTokenIsNotDefault && occurrences < 2 && !verificationClicked)
         }
         hideCancel
         showTermsOfService
diff --git a/ui/pages/swaps/fee-card/fee-card.js b/ui/pages/swaps/fee-card/fee-card.js
index 5e7269f18..e29da8e1e 100644
--- a/ui/pages/swaps/fee-card/fee-card.js
+++ b/ui/pages/swaps/fee-card/fee-card.js
@@ -6,6 +6,7 @@ import {
   MAINNET_CHAIN_ID,
   BSC_CHAIN_ID,
   LOCALHOST_CHAIN_ID,
+  POLYGON_CHAIN_ID,
 } from '../../../../shared/constants/network';
 
 export default function FeeCard({
@@ -38,6 +39,8 @@ export default function FeeCard({
         return t('networkNameEthereum');
       case BSC_CHAIN_ID:
         return t('networkNameBSC');
+      case POLYGON_CHAIN_ID:
+        return t('networkNamePolygon');
       case LOCALHOST_CHAIN_ID:
         return t('networkNameTestnet');
       default:
diff --git a/ui/pages/swaps/index.js b/ui/pages/swaps/index.js
index 05a0d6d42..d2a30b904 100644
--- a/ui/pages/swaps/index.js
+++ b/ui/pages/swaps/index.js
@@ -29,10 +29,11 @@ import {
   getAggregatorMetadata,
   getBackgroundSwapRouteState,
   getSwapsErrorKey,
-  getSwapsFeatureLiveness,
+  getSwapsFeatureIsLive,
   prepareToLeaveSwaps,
   fetchAndSetSwapsGasPriceInfo,
   fetchSwapsLiveness,
+  getUseNewSwapsApi,
 } from '../../ducks/swaps/swaps';
 import {
   AWAITING_SIGNATURES_ROUTE,
@@ -103,9 +104,10 @@ export default function Swap() {
   const aggregatorMetadata = useSelector(getAggregatorMetadata);
   const fetchingQuotes = useSelector(getFetchingQuotes);
   let swapsErrorKey = useSelector(getSwapsErrorKey);
-  const swapsEnabled = useSelector(getSwapsFeatureLiveness);
+  const swapsEnabled = useSelector(getSwapsFeatureIsLive);
   const chainId = useSelector(getCurrentChainId);
   const isSwapsChain = useSelector(getIsSwapsChain);
+  const useNewSwapsApi = useSelector(getUseNewSwapsApi);
 
   const {
     balance: ethBalance,
@@ -165,27 +167,28 @@ export default function Swap() {
     };
   }, []);
 
+  // eslint-disable-next-line
   useEffect(() => {
-    fetchTokens(chainId)
-      .then((tokens) => {
-        dispatch(setSwapsTokens(tokens));
-      })
-      .catch((error) => console.error(error));
-
-    fetchTopAssets(chainId).then((topAssets) => {
-      dispatch(setTopAssets(topAssets));
-    });
-
-    fetchAggregatorMetadata(chainId).then((newAggregatorMetadata) => {
-      dispatch(setAggregatorMetadata(newAggregatorMetadata));
-    });
-
-    dispatch(fetchAndSetSwapsGasPriceInfo(chainId));
-
-    return () => {
-      dispatch(prepareToLeaveSwaps());
-    };
-  }, [dispatch, chainId]);
+    if (isFeatureFlagLoaded) {
+      fetchTokens(chainId, useNewSwapsApi)
+        .then((tokens) => {
+          dispatch(setSwapsTokens(tokens));
+        })
+        .catch((error) => console.error(error));
+      fetchTopAssets(chainId, useNewSwapsApi).then((topAssets) => {
+        dispatch(setTopAssets(topAssets));
+      });
+      fetchAggregatorMetadata(chainId, useNewSwapsApi).then(
+        (newAggregatorMetadata) => {
+          dispatch(setAggregatorMetadata(newAggregatorMetadata));
+        },
+      );
+      dispatch(fetchAndSetSwapsGasPriceInfo(chainId));
+      return () => {
+        dispatch(prepareToLeaveSwaps());
+      };
+    }
+  }, [dispatch, chainId, isFeatureFlagLoaded, useNewSwapsApi]);
 
   const hardwareWalletUsed = useSelector(isHardwareWallet);
   const hardwareWalletType = useSelector(getHardwareWalletType);
diff --git a/ui/pages/swaps/index.test.js b/ui/pages/swaps/index.test.js
index a3162ae2a..ed2323e40 100644
--- a/ui/pages/swaps/index.test.js
+++ b/ui/pages/swaps/index.test.js
@@ -24,7 +24,7 @@ setBackgroundConnection({
 });
 
 describe('Swap', () => {
-  let tokensNock;
+  let featureFlagsNock;
 
   beforeEach(() => {
     nock(CONSTANTS.METASWAP_BASE_URL)
@@ -43,9 +43,13 @@ describe('Swap', () => {
       .get('/gasPrices')
       .reply(200, MOCKS.GAS_PRICES_GET_RESPONSE);
 
-    tokensNock = nock(CONSTANTS.METASWAP_BASE_URL)
+    nock(CONSTANTS.METASWAP_BASE_URL)
       .get('/tokens')
       .reply(200, MOCKS.TOKENS_GET_RESPONSE);
+
+    featureFlagsNock = nock(CONSTANTS.METASWAP_API_V2_BASE_URL)
+      .get('/featureFlags')
+      .reply(200, MOCKS.createFeatureFlagsResponse());
   });
 
   afterAll(() => {
@@ -55,7 +59,7 @@ describe('Swap', () => {
   it('renders the component with initial props', async () => {
     const store = configureMockStore(middleware)(createSwapsMockStore());
     const { container, getByText } = renderWithProvider(<Swap />, store);
-    await waitFor(() => expect(tokensNock.isDone()).toBe(true));
+    await waitFor(() => expect(featureFlagsNock.isDone()).toBe(true));
     expect(getByText('Swap')).toBeInTheDocument();
     expect(getByText('Cancel')).toBeInTheDocument();
     expect(container).toMatchSnapshot();
diff --git a/ui/pages/swaps/searchable-item-list/list-item-search/list-item-search.component.js b/ui/pages/swaps/searchable-item-list/list-item-search/list-item-search.component.js
index 26fbc0124..ed1b9e257 100644
--- a/ui/pages/swaps/searchable-item-list/list-item-search/list-item-search.component.js
+++ b/ui/pages/swaps/searchable-item-list/list-item-search/list-item-search.component.js
@@ -9,6 +9,7 @@ import { usePrevious } from '../../../../hooks/usePrevious';
 import { isValidHexAddress } from '../../../../../shared/modules/hexstring-utils';
 import { fetchToken } from '../../swaps.util';
 import { getCurrentChainId } from '../../../../selectors/selectors';
+import { getUseNewSwapsApi } from '../../../../ducks/swaps/swaps';
 
 const renderAdornment = () => (
   <InputAdornment position="start" style={{ marginRight: '12px' }}>
@@ -28,6 +29,7 @@ export default function ListItemSearch({
   const fuseRef = useRef();
   const [searchQuery, setSearchQuery] = useState('');
   const chainId = useSelector(getCurrentChainId);
+  const useNewSwapsApi = useSelector(getUseNewSwapsApi);
 
   /**
    * Search a custom token for import based on a contract address.
@@ -36,7 +38,7 @@ export default function ListItemSearch({
   const handleSearchTokenForImport = async (contractAddress) => {
     setSearchQuery(contractAddress);
     try {
-      const token = await fetchToken(contractAddress, chainId);
+      const token = await fetchToken(contractAddress, chainId, useNewSwapsApi);
       if (token) {
         token.primaryLabel = token.symbol;
         token.secondaryLabel = token.name;
diff --git a/ui/pages/swaps/swaps.util.js b/ui/pages/swaps/swaps.util.js
index 11907c8c1..cb417ab24 100644
--- a/ui/pages/swaps/swaps.util.js
+++ b/ui/pages/swaps/swaps.util.js
@@ -6,6 +6,9 @@ import {
   METASWAP_CHAINID_API_HOST_MAP,
   SWAPS_CHAINID_CONTRACT_ADDRESS_MAP,
   ETH_WETH_CONTRACT_ADDRESS,
+  ETHEREUM,
+  POLYGON,
+  BSC,
 } from '../../../shared/constants/swaps';
 import {
   isSwapsDefaultTokenAddress,
@@ -15,6 +18,9 @@ import {
   ETH_SYMBOL,
   WETH_SYMBOL,
   MAINNET_CHAIN_ID,
+  BSC_CHAIN_ID,
+  POLYGON_CHAIN_ID,
+  LOCALHOST_CHAIN_ID,
 } from '../../../shared/constants/network';
 import { SECOND } from '../../../shared/constants/time';
 import {
@@ -42,24 +48,50 @@ const TOKEN_TRANSFER_LOG_TOPIC_HASH =
 
 const CACHE_REFRESH_FIVE_MINUTES = 300000;
 
-const getBaseApi = function (type, chainId = MAINNET_CHAIN_ID) {
+const SWAPS_API_V2_BASE_URL = 'https://api2.metaswap.codefi.network';
+const GAS_API_BASE_URL = 'https://gas-api.metaswap.codefi.network';
+
+/**
+ * @param {string} type Type of an API call, e.g. "tokens"
+ * @param {string} chainId
+ * @returns string
+ */
+const getBaseUrlForNewSwapsApi = (type, chainId) => {
+  const noNetworkSpecificTypes = ['refreshTime']; // These types don't need network info in the URL.
+  if (noNetworkSpecificTypes.includes(type)) {
+    return SWAPS_API_V2_BASE_URL;
+  }
+  const chainIdDecimal = chainId && parseInt(chainId, 16);
+  const gasApiTypes = ['gasPrices'];
+  if (gasApiTypes.includes(type)) {
+    return `${GAS_API_BASE_URL}/networks/${chainIdDecimal}`; // Gas calculations are in its own repo.
+  }
+  return `${SWAPS_API_V2_BASE_URL}/networks/${chainIdDecimal}`;
+};
+
+const getBaseApi = function (
+  type,
+  chainId = MAINNET_CHAIN_ID,
+  useNewSwapsApi = false,
+) {
+  const baseUrl = useNewSwapsApi
+    ? getBaseUrlForNewSwapsApi(type, chainId)
+    : METASWAP_CHAINID_API_HOST_MAP[chainId];
   switch (type) {
     case 'trade':
-      return `${METASWAP_CHAINID_API_HOST_MAP[chainId]}/trades?`;
+      return `${baseUrl}/trades?`;
     case 'tokens':
-      return `${METASWAP_CHAINID_API_HOST_MAP[chainId]}/tokens`;
+      return `${baseUrl}/tokens`;
     case 'token':
-      return `${METASWAP_CHAINID_API_HOST_MAP[chainId]}/token`;
+      return `${baseUrl}/token`;
     case 'topAssets':
-      return `${METASWAP_CHAINID_API_HOST_MAP[chainId]}/topAssets`;
-    case 'featureFlag':
-      return `${METASWAP_CHAINID_API_HOST_MAP[chainId]}/featureFlag`;
+      return `${baseUrl}/topAssets`;
     case 'aggregatorMetadata':
-      return `${METASWAP_CHAINID_API_HOST_MAP[chainId]}/aggregatorMetadata`;
+      return `${baseUrl}/aggregatorMetadata`;
     case 'gasPrices':
-      return `${METASWAP_CHAINID_API_HOST_MAP[chainId]}/gasPrices`;
+      return `${baseUrl}/gasPrices`;
     case 'refreshTime':
-      return `${METASWAP_CHAINID_API_HOST_MAP[chainId]}/quoteRefreshRate`;
+      return `${baseUrl}/quoteRefreshRate`;
     default:
       throw new Error('getBaseApi requires an api call type');
   }
@@ -233,7 +265,7 @@ export async function fetchTradesInfo(
     fromAddress,
     exchangeList,
   },
-  { chainId },
+  { chainId, useNewSwapsApi },
 ) {
   const urlParams = {
     destinationToken,
@@ -249,7 +281,11 @@ export async function fetchTradesInfo(
   }
 
   const queryString = new URLSearchParams(urlParams).toString();
-  const tradeURL = `${getBaseApi('trade', chainId)}${queryString}`;
+  const tradeURL = `${getBaseApi(
+    'trade',
+    chainId,
+    useNewSwapsApi,
+  )}${queryString}`;
   const tradesResponse = await fetchWithCache(
     tradeURL,
     { method: 'GET' },
@@ -293,8 +329,8 @@ export async function fetchTradesInfo(
   return newQuotes;
 }
 
-export async function fetchToken(contractAddress, chainId) {
-  const tokenUrl = getBaseApi('token', chainId);
+export async function fetchToken(contractAddress, chainId, useNewSwapsApi) {
+  const tokenUrl = getBaseApi('token', chainId, useNewSwapsApi);
   const token = await fetchWithCache(
     `${tokenUrl}?address=${contractAddress}`,
     { method: 'GET' },
@@ -303,8 +339,8 @@ export async function fetchToken(contractAddress, chainId) {
   return token;
 }
 
-export async function fetchTokens(chainId) {
-  const tokensUrl = getBaseApi('tokens', chainId);
+export async function fetchTokens(chainId, useNewSwapsApi) {
+  const tokensUrl = getBaseApi('tokens', chainId, useNewSwapsApi);
   const tokens = await fetchWithCache(
     tokensUrl,
     { method: 'GET' },
@@ -325,8 +361,12 @@ export async function fetchTokens(chainId) {
   return filteredTokens;
 }
 
-export async function fetchAggregatorMetadata(chainId) {
-  const aggregatorMetadataUrl = getBaseApi('aggregatorMetadata', chainId);
+export async function fetchAggregatorMetadata(chainId, useNewSwapsApi) {
+  const aggregatorMetadataUrl = getBaseApi(
+    'aggregatorMetadata',
+    chainId,
+    useNewSwapsApi,
+  );
   const aggregators = await fetchWithCache(
     aggregatorMetadataUrl,
     { method: 'GET' },
@@ -347,8 +387,8 @@ export async function fetchAggregatorMetadata(chainId) {
   return filteredAggregators;
 }
 
-export async function fetchTopAssets(chainId) {
-  const topAssetsUrl = getBaseApi('topAssets', chainId);
+export async function fetchTopAssets(chainId, useNewSwapsApi) {
+  const topAssetsUrl = getBaseApi('topAssets', chainId, useNewSwapsApi);
   const response = await fetchWithCache(
     topAssetsUrl,
     { method: 'GET' },
@@ -363,18 +403,18 @@ export async function fetchTopAssets(chainId) {
   return topAssetsMap;
 }
 
-export async function fetchSwapsFeatureLiveness(chainId) {
-  const status = await fetchWithCache(
-    getBaseApi('featureFlag', chainId),
+export async function fetchSwapsFeatureFlags() {
+  const response = await fetchWithCache(
+    `${SWAPS_API_V2_BASE_URL}/featureFlags`,
     { method: 'GET' },
     { cacheRefreshTime: 600000 },
   );
-  return status?.active;
+  return response;
 }
 
-export async function fetchSwapsQuoteRefreshTime(chainId) {
+export async function fetchSwapsQuoteRefreshTime(chainId, useNewSwapsApi) {
   const response = await fetchWithCache(
-    getBaseApi('refreshTime', chainId),
+    getBaseApi('refreshTime', chainId, useNewSwapsApi),
     { method: 'GET' },
     { cacheRefreshTime: 600000 },
   );
@@ -409,8 +449,8 @@ export async function fetchTokenBalance(address, userAddress) {
   return usersToken;
 }
 
-export async function fetchSwapsGasPrices(chainId) {
-  const gasPricesUrl = getBaseApi('gasPrices', chainId);
+export async function fetchSwapsGasPrices(chainId, useNewSwapsApi) {
+  const gasPricesUrl = getBaseApi('gasPrices', chainId, useNewSwapsApi);
   const response = await fetchWithCache(
     gasPricesUrl,
     { method: 'GET' },
@@ -730,3 +770,56 @@ export const isContractAddressValid = (
     contractAddressForChainId.toUpperCase() === contractAddress.toUpperCase()
   );
 };
+
+/**
+ * @param {string} chainId
+ * @returns string e.g. ethereum, bsc or polygon
+ */
+export const getNetworkNameByChainId = (chainId) => {
+  switch (chainId) {
+    case MAINNET_CHAIN_ID:
+      return ETHEREUM;
+    case BSC_CHAIN_ID:
+      return BSC;
+    case POLYGON_CHAIN_ID:
+      return POLYGON;
+    default:
+      return '';
+  }
+};
+
+/**
+ * It returns info about if Swaps are enabled and if we should use our new APIs for it.
+ * @param {object} swapsFeatureFlags
+ * @param {string} chainId
+ * @returns object with 2 items: "swapsFeatureIsLive" and "useNewSwapsApi"
+ */
+export const getSwapsLivenessForNetwork = (swapsFeatureFlags = {}, chainId) => {
+  const networkName = getNetworkNameByChainId(chainId);
+  // Use old APIs for testnet.
+  if (chainId === LOCALHOST_CHAIN_ID) {
+    return {
+      swapsFeatureIsLive: true,
+      useNewSwapsApi: false,
+    };
+  }
+  // If a network name is not found in the list of feature flags, disable Swaps.
+  if (!swapsFeatureFlags[networkName]) {
+    return {
+      swapsFeatureIsLive: false,
+      useNewSwapsApi: false,
+    };
+  }
+  const isNetworkEnabledForNewApi =
+    swapsFeatureFlags[networkName].extension_active;
+  if (isNetworkEnabledForNewApi) {
+    return {
+      swapsFeatureIsLive: true,
+      useNewSwapsApi: true,
+    };
+  }
+  return {
+    swapsFeatureIsLive: swapsFeatureFlags[networkName].fallback_to_v1,
+    useNewSwapsApi: false,
+  };
+};
diff --git a/ui/pages/swaps/swaps.util.test.js b/ui/pages/swaps/swaps.util.test.js
index 936864f0f..81220cbd4 100644
--- a/ui/pages/swaps/swaps.util.test.js
+++ b/ui/pages/swaps/swaps.util.test.js
@@ -1,14 +1,20 @@
 import nock from 'nock';
+import { MOCKS } from '../../../test/jest';
 import {
   ETH_SYMBOL,
   WETH_SYMBOL,
   MAINNET_CHAIN_ID,
   BSC_CHAIN_ID,
+  POLYGON_CHAIN_ID,
   LOCALHOST_CHAIN_ID,
+  RINKEBY_CHAIN_ID,
 } from '../../../shared/constants/network';
 import {
   SWAPS_CHAINID_CONTRACT_ADDRESS_MAP,
   ETH_WETH_CONTRACT_ADDRESS,
+  ETHEREUM,
+  POLYGON,
+  BSC,
 } from '../../../shared/constants/swaps';
 import {
   TOKENS,
@@ -17,13 +23,14 @@ import {
   AGGREGATOR_METADATA,
   TOP_ASSETS,
 } from './swaps-util-test-constants';
-
 import {
   fetchTradesInfo,
   fetchTokens,
   fetchAggregatorMetadata,
   fetchTopAssets,
   isContractAddressValid,
+  getNetworkNameByChainId,
+  getSwapsLivenessForNetwork,
 } from './swaps.util';
 
 jest.mock('../../helpers/utils/storage-helpers.js', () => ({
@@ -372,4 +379,75 @@ describe('Swaps Util', () => {
       ).toBe(false);
     });
   });
+
+  describe('getNetworkNameByChainId', () => {
+    it('returns "ethereum" for mainnet chain ID', () => {
+      expect(getNetworkNameByChainId(MAINNET_CHAIN_ID)).toBe(ETHEREUM);
+    });
+
+    it('returns "bsc" for mainnet chain ID', () => {
+      expect(getNetworkNameByChainId(BSC_CHAIN_ID)).toBe(BSC);
+    });
+
+    it('returns "polygon" for mainnet chain ID', () => {
+      expect(getNetworkNameByChainId(POLYGON_CHAIN_ID)).toBe(POLYGON);
+    });
+
+    it('returns an empty string for an unsupported network', () => {
+      expect(getNetworkNameByChainId(RINKEBY_CHAIN_ID)).toBe('');
+    });
+  });
+
+  describe('getSwapsLivenessForNetwork', () => {
+    it('returns info that Swaps are enabled and cannot use API v2 for localhost chain ID', () => {
+      const expectedSwapsLiveness = {
+        swapsFeatureIsLive: true,
+        useNewSwapsApi: false,
+      };
+      expect(
+        getSwapsLivenessForNetwork(
+          MOCKS.createFeatureFlagsResponse(),
+          LOCALHOST_CHAIN_ID,
+        ),
+      ).toMatchObject(expectedSwapsLiveness);
+    });
+
+    it('returns info that Swaps are disabled and cannot use API v2 if network name is not found', () => {
+      const expectedSwapsLiveness = {
+        swapsFeatureIsLive: false,
+        useNewSwapsApi: false,
+      };
+      expect(
+        getSwapsLivenessForNetwork(
+          MOCKS.createFeatureFlagsResponse(),
+          RINKEBY_CHAIN_ID,
+        ),
+      ).toMatchObject(expectedSwapsLiveness);
+    });
+
+    it('returns info that Swaps are enabled and can use API v2 for mainnet chain ID', () => {
+      const expectedSwapsLiveness = {
+        swapsFeatureIsLive: true,
+        useNewSwapsApi: true,
+      };
+      expect(
+        getSwapsLivenessForNetwork(
+          MOCKS.createFeatureFlagsResponse(),
+          MAINNET_CHAIN_ID,
+        ),
+      ).toMatchObject(expectedSwapsLiveness);
+    });
+
+    it('returns info that Swaps are enabled but can only use API v1 for mainnet chain ID', () => {
+      const expectedSwapsLiveness = {
+        swapsFeatureIsLive: true,
+        useNewSwapsApi: false,
+      };
+      const swapsFeatureFlags = MOCKS.createFeatureFlagsResponse();
+      swapsFeatureFlags[ETHEREUM].extension_active = false;
+      expect(
+        getSwapsLivenessForNetwork(swapsFeatureFlags, MAINNET_CHAIN_ID),
+      ).toMatchObject(expectedSwapsLiveness);
+    });
+  });
 });
diff --git a/ui/store/actions.js b/ui/store/actions.js
index 7c5be2fe9..d9f629952 100644
--- a/ui/store/actions.js
+++ b/ui/store/actions.js
@@ -2121,9 +2121,9 @@ export function setPendingTokens(pendingTokens) {
 
 // Swaps
 
-export function setSwapsLiveness(swapsFeatureIsLive) {
+export function setSwapsLiveness(swapsLiveness) {
   return async (dispatch) => {
-    await promisifiedBackground.setSwapsLiveness(swapsFeatureIsLive);
+    await promisifiedBackground.setSwapsLiveness(swapsLiveness);
     await forceUpdateMetamaskState(dispatch);
   };
 }

From 36ab817858f797c709f2b0ccc3e19767d54d2c2c Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Fri, 9 Jul 2021 13:08:15 -0500
Subject: [PATCH 104/141] add edit button support to transaction-detail-item
 (#11481)

---
 .../app/transaction-detail-item/index.scss       | 14 ++++++++++++++
 .../transaction-detail-item.component.js         | 16 ++++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/ui/components/app/transaction-detail-item/index.scss b/ui/components/app/transaction-detail-item/index.scss
index 7359d694c..a007a2e2d 100644
--- a/ui/components/app/transaction-detail-item/index.scss
+++ b/ui/components/app/transaction-detail-item/index.scss
@@ -3,6 +3,20 @@
 
   &__row {
     display: flex;
+
+    &--action-row {
+      justify-content: flex-end;
+      align-items: flex-start;
+      margin-bottom: 4px;
+    }
+  }
+
+  &__action-button.button {
+    @include H7;
+
+    width: auto;
+    padding: 0;
+    text-transform: uppercase;
   }
 
   &__title {
diff --git a/ui/components/app/transaction-detail-item/transaction-detail-item.component.js b/ui/components/app/transaction-detail-item/transaction-detail-item.component.js
index 0e3039987..edbd03b4b 100644
--- a/ui/components/app/transaction-detail-item/transaction-detail-item.component.js
+++ b/ui/components/app/transaction-detail-item/transaction-detail-item.component.js
@@ -7,6 +7,7 @@ import {
   FONT_WEIGHT,
   TYPOGRAPHY,
 } from '../../../helpers/constants/design-system';
+import Button from '../../ui/button';
 
 export default function TransactionDetailItem({
   detailTitle,
@@ -14,9 +15,22 @@ export default function TransactionDetailItem({
   detailTotal,
   subTitle,
   subText,
+  handleActionClick,
+  actionText,
 }) {
   return (
     <div className="transaction-detail-item">
+      {actionText && handleActionClick && (
+        <div className="transaction-detail-item__row transaction-detail-item__row--action-row">
+          <Button
+            className="transaction-detail-item__action-button"
+            onClick={handleActionClick}
+            type="link"
+          >
+            {actionText}
+          </Button>
+        </div>
+      )}
       <div className="transaction-detail-item__row">
         <Typography
           color={COLORS.BLACK}
@@ -63,6 +77,8 @@ export default function TransactionDetailItem({
 }
 
 TransactionDetailItem.propTypes = {
+  handleActionClick: PropTypes.func,
+  actionText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   detailTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   detailText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   detailTotal: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),

From 809b93dd77b4d2e8bfec0fffe923d1c4b03bfd02 Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Fri, 9 Jul 2021 15:39:43 -0230
Subject: [PATCH 105/141] =?UTF-8?q?Ensure=20simple=20send=20gas=20estimati?=
 =?UTF-8?q?on=20happens=20after=20the=20recipient=20is=20iden=E2=80=A6=20(?=
 =?UTF-8?q?#11485)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Ensure simple send gas estimation happens after the recipient is identified

* Update ui/ducks/send/send.test.js

Co-authored-by: Alex Donesky <adonesky@gmail.com>

* Improve test name

* Lint fix

Co-authored-by: Alex Donesky <adonesky@gmail.com>
---
 ui/ducks/send/send.js      | 10 +++---
 ui/ducks/send/send.test.js | 68 ++++++++++++++++++++++++++++++--------
 2 files changed, 59 insertions(+), 19 deletions(-)

diff --git a/ui/ducks/send/send.js b/ui/ducks/send/send.js
index a7e224175..238230986 100644
--- a/ui/ducks/send/send.js
+++ b/ui/ducks/send/send.js
@@ -437,7 +437,8 @@ export const initializeSendState = createAsyncThunk(
         : GAS_LIMITS.SIMPLE;
     if (
       basicEstimateStatus === BASIC_ESTIMATE_STATES.READY &&
-      stage !== SEND_STAGES.EDIT
+      stage !== SEND_STAGES.EDIT &&
+      recipient.address
     ) {
       // Run our estimateGasLimit logic to get a more accurate estimation of
       // required gas. If this value isn't nullish, set it as the new gasLimit
@@ -1267,12 +1268,9 @@ export function useMyAccountsForRecipientSearch() {
  * @returns {void}
  */
 export function updateRecipient({ address, nickname }) {
-  return async (dispatch, getState) => {
+  return async (dispatch) => {
     await dispatch(actions.updateRecipient({ address, nickname }));
-    const state = getState();
-    if (state.send.asset.type === ASSET_TYPES.TOKEN) {
-      await dispatch(computeEstimatedGasLimit());
-    }
+    await dispatch(computeEstimatedGasLimit());
   };
 }
 
diff --git a/ui/ducks/send/send.test.js b/ui/ducks/send/send.test.js
index 0f72349a9..7038b11e8 100644
--- a/ui/ducks/send/send.test.js
+++ b/ui/ducks/send/send.test.js
@@ -1348,12 +1348,36 @@ describe('Send Slice', () => {
         nickname: '',
       };
 
-      it('should create an action to update recipient', async () => {
+      it('should create actions to update recipient and recalculate gas limit if the asset type is not set', async () => {
+        global.eth = {
+          getCode: sinon.stub(),
+        };
+
         const updateRecipientState = {
+          metamask: {
+            provider: {
+              chainId: '0x1',
+            },
+          },
           send: {
+            account: {
+              balance: '',
+            },
             asset: {
               type: '',
             },
+            gas: {
+              gasPrice: '',
+            },
+            recipient: {
+              address: '',
+            },
+            amount: {
+              value: '',
+            },
+            draftTransaction: {
+              userInputHexData: '',
+            },
           },
         };
 
@@ -1363,18 +1387,20 @@ describe('Send Slice', () => {
 
         const actionResult = store.getActions();
 
-        const expectedActionResult = [
-          {
-            type: 'send/updateRecipient',
-            payload: recipient,
-          },
-        ];
-
-        expect(actionResult).toHaveLength(1);
-        expect(actionResult).toStrictEqual(expectedActionResult);
+        expect(actionResult).toHaveLength(4);
+        expect(actionResult[0].type).toStrictEqual('send/updateRecipient');
+        expect(actionResult[1].type).toStrictEqual(
+          'send/computeEstimatedGasLimit/pending',
+        );
+        expect(actionResult[2].type).toStrictEqual(
+          'metamask/gas/SET_CUSTOM_GAS_LIMIT',
+        );
+        expect(actionResult[3].type).toStrictEqual(
+          'send/computeEstimatedGasLimit/fulfilled',
+        );
       });
 
-      it('should create actions to update recipient and recalculate gas limit if the asset is a token', async () => {
+      it('should create actions to reset recipient input and ens, calculate gas and then validate input', async () => {
         const tokenState = {
           metamask: {
             blockGasLimit: '',
@@ -1443,6 +1469,13 @@ describe('Send Slice', () => {
               address: 'Address',
               nickname: 'NickName',
             },
+            gas: {
+              gasPrice: '0x1',
+            },
+            amount: {
+              value: '0x1',
+            },
+            draftTransaction: {},
           },
         };
 
@@ -1451,14 +1484,23 @@ describe('Send Slice', () => {
         await store.dispatch(resetRecipientInput());
         const actionResult = store.getActions();
 
-        expect(actionResult).toHaveLength(4);
+        expect(actionResult).toHaveLength(7);
         expect(actionResult[0].type).toStrictEqual(
           'send/updateRecipientUserInput',
         );
         expect(actionResult[0].payload).toStrictEqual('');
         expect(actionResult[1].type).toStrictEqual('send/updateRecipient');
-        expect(actionResult[2].type).toStrictEqual('ENS/resetEnsResolution');
+        expect(actionResult[2].type).toStrictEqual(
+          'send/computeEstimatedGasLimit/pending',
+        );
         expect(actionResult[3].type).toStrictEqual(
+          'metamask/gas/SET_CUSTOM_GAS_LIMIT',
+        );
+        expect(actionResult[4].type).toStrictEqual(
+          'send/computeEstimatedGasLimit/fulfilled',
+        );
+        expect(actionResult[5].type).toStrictEqual('ENS/resetEnsResolution');
+        expect(actionResult[6].type).toStrictEqual(
           'send/validateRecipientUserInput',
         );
       });

From c3e6514c356f57a6057a3fe362071d2fc434cb9c Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Fri, 9 Jul 2021 13:26:54 -0500
Subject: [PATCH 106/141] add useGasInputs hook (#11480)

---
 ui/hooks/useGasFeeInputs.js      | 317 +++++++++++++++++++++++++++++++
 ui/hooks/useGasFeeInputs.test.js | 237 +++++++++++++++++++++++
 2 files changed, 554 insertions(+)
 create mode 100644 ui/hooks/useGasFeeInputs.js
 create mode 100644 ui/hooks/useGasFeeInputs.test.js

diff --git a/ui/hooks/useGasFeeInputs.js b/ui/hooks/useGasFeeInputs.js
new file mode 100644
index 000000000..5b6ac4df5
--- /dev/null
+++ b/ui/hooks/useGasFeeInputs.js
@@ -0,0 +1,317 @@
+import { addHexPrefix } from 'ethereumjs-util';
+import { useCallback, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { GAS_ESTIMATE_TYPES } from '../../shared/constants/gas';
+import { multiplyCurrencies } from '../../shared/modules/conversion.utils';
+import {
+  getMaximumGasTotalInHexWei,
+  getMinimumGasTotalInHexWei,
+} from '../../shared/modules/gas.utils';
+import { PRIMARY, SECONDARY } from '../helpers/constants/common';
+import {
+  decGWEIToHexWEI,
+  decimalToHex,
+} from '../helpers/utils/conversions.util';
+import { getShouldShowFiat } from '../selectors';
+import { useCurrencyDisplay } from './useCurrencyDisplay';
+import { useGasFeeEstimates } from './useGasFeeEstimates';
+import { useUserPreferencedCurrency } from './useUserPreferencedCurrency';
+
+/**
+ * Opaque string type representing a decimal (base 10) number in GWEI
+ * @typedef {`${number}`} DecGweiString
+ */
+
+/**
+ * String value representing the active estimate level to use
+ * @typedef {'low' | 'medium' | 'high'} EstimateLevel
+ */
+
+/**
+ * Pulls out gasPrice estimate from either of the two gasPrice estimation
+ * sources, based on the gasEstimateType and current estimateToUse.
+ * @param {{import(
+ *   '@metamask/controllers'
+ * ).GasFeeState['gasFeeEstimates']}} gasFeeEstimates - estimates returned from
+ *  the controller
+ * @param {import(
+ *  './useGasFeeEstimates'
+ * ).GasEstimates} gasEstimateType - type of estimate returned from controller
+ * @param {EstimateLevel} estimateToUse - current estimate level to use
+ * @returns {[DecGweiString]} - gasPrice estimate to use or null
+ */
+function getGasPriceEstimate(gasFeeEstimates, gasEstimateType, estimateToUse) {
+  if (gasEstimateType === GAS_ESTIMATE_TYPES.LEGACY) {
+    return gasFeeEstimates?.[estimateToUse] ?? '0';
+  } else if (gasEstimateType === GAS_ESTIMATE_TYPES.ETH_GASPRICE) {
+    return gasFeeEstimates?.gasPrice ?? '0';
+  }
+  return '0';
+}
+
+/**
+ * Pulls out gas fee estimate from the estimates returned from controller,
+ * based on the gasEstimateType and current estimateToUse.
+ * @param {'maxFeePerGas' | 'maxPriorityFeePerGas'} field - field to select
+ * @param {{import(
+ *   '@metamask/controllers'
+ * ).GasFeeState['gasFeeEstimates']}} gasFeeEstimates - estimates returned from
+ *  the controller
+ * @param {import(
+ *  './useGasFeeEstimates'
+ * ).GasEstimates} gasEstimateType - type of estimate returned from controller
+ * @param {EstimateLevel} estimateToUse - current estimate level to use
+ * @returns {[DecGweiString]} - gas fee estimate to use or null
+ */
+function getGasFeeEstimate(
+  field,
+  gasFeeEstimates,
+  gasEstimateType,
+  estimateToUse,
+) {
+  if (gasEstimateType === GAS_ESTIMATE_TYPES.FEE_MARKET) {
+    return gasFeeEstimates?.[estimateToUse]?.[field] ?? '0';
+  }
+  return '0';
+}
+
+/**
+ * @typedef {Object} GasFeeInputReturnType
+ * @property {DecGweiString} [maxFeePerGas] - the maxFeePerGas input value.
+ * @property {string} [maxFeePerGasFiat] - the maxFeePerGas converted to the
+ *  user's preferred currency.
+ * @property {(DecGweiString) => void} setMaxFeePerGas - state setter method to
+ *  update the maxFeePerGas.
+ * @property {DecGweiString} [maxPriorityFeePerGas] - the maxPriorityFeePerGas
+ *  input value.
+ * @property {string} [maxPriorityFeePerGasFiat] - the maxPriorityFeePerGas
+ *  converted to the user's preferred currency.
+ * @property {(DecGweiString) => void} setMaxPriorityFeePerGas - state setter
+ *  method to update the maxPriorityFeePerGas.
+ * @property {DecGweiString} [gasPrice] - the gasPrice input value.
+ * @property {(DecGweiString) => void} setGasPrice - state setter method to
+ *  update the gasPrice.
+ * @property {DecGweiString} gasLimit - the gasLimit input value.
+ * @property {(DecGweiString) => void} setGasLimit - state setter method to
+ *  update the gasLimit.
+ * @property {EstimateLevel} [estimateToUse] - the estimate level currently
+ *  selected. This will be null if the user has ejected from using the
+ *  estimates.
+ * @property {([EstimateLevel]) => void} setEstimateToUse - Setter method for
+ *  choosing which EstimateLevel to use.
+ * @property {string} [estimatedMinimumFiat] - The amount estimated to be paid
+ *  based on current network conditions. Expressed in user's preferred
+ *  currency.
+ * @property {string} [estimatedMaximumFiat] - the maximum amount estimated to be
+ *  paid if current network transaction volume increases. Expressed in user's
+ *  preferred currency.
+ * @property {string} [estimatedMaximumNative] - the maximum amount estimated to
+ *  be paid if the current network transaction volume increases. Expressed in
+ *  the network's native currency.
+ */
+
+/**
+ * Uses gasFeeEstimates and state to keep track of user gas fee inputs.
+ * Will update the gas fee state when estimates update if the user has not yet
+ * modified the fields.
+ * @param {EstimateLevel} defaultEstimateToUse - which estimate
+ *  level to default the 'estimateToUse' state variable to.
+ * @returns {GasFeeInputReturnType & import(
+ *  './useGasFeeEstimates'
+ * ).GasEstimates} - gas fee input state and the GasFeeEstimates object
+ */
+export function useGasFeeInputs(defaultEstimateToUse = 'medium') {
+  // We need to know whether to show fiat conversions or not, so that we can
+  // default our fiat values to empty strings if showing fiat is not wanted or
+  // possible.
+  const showFiat = useSelector(getShouldShowFiat);
+
+  // We need to know the current network's currency and its decimal precision
+  // to calculate the amount to display to the user.
+  const {
+    currency: primaryCurrency,
+    numberOfDecimals: primaryNumberOfDecimals,
+  } = useUserPreferencedCurrency(PRIMARY);
+
+  // For calculating the value of gas fees in the user's preferred currency we
+  // first have to know what that currency is and its decimal precision
+  const {
+    currency: fiatCurrency,
+    numberOfDecimals: fiatNumberOfDecimals,
+  } = useUserPreferencedCurrency(SECONDARY);
+
+  // This hook keeps track of a few pieces of transitional state. It is
+  // transitional because it is only used to modify a transaction in the
+  // metamask (background) state tree.
+  const [maxFeePerGas, setMaxFeePerGas] = useState(null);
+  const [maxPriorityFeePerGas, setMaxPriorityFeePerGas] = useState(null);
+  const [gasPrice, setGasPrice] = useState(null);
+  const [gasLimit, setGasLimit] = useState(21000);
+  const [estimateToUse, setInternalEstimateToUse] = useState(
+    defaultEstimateToUse,
+  );
+
+  // We need the gas estimates from the GasFeeController in the background.
+  // Calling this hooks initiates polling for new gas estimates and returns the
+  // current estimate.
+  const {
+    gasEstimateType,
+    gasFeeEstimates,
+    isGasEstimatesLoading,
+    estimatedGasFeeTimeBounds,
+  } = useGasFeeEstimates();
+
+  // When a user selects an estimate level, it will wipe out what they have
+  // previously put in the inputs. This returns the inputs to the estimated
+  // values at the level specified.
+  const setEstimateToUse = useCallback((estimateLevel) => {
+    setInternalEstimateToUse(estimateLevel);
+    setMaxFeePerGas(null);
+    setMaxPriorityFeePerGas(null);
+    setGasPrice(null);
+  }, []);
+
+  // We specify whether to use the estimate value by checking if the state
+  // value has been set. The state value is only set by user input and is wiped
+  // when the user selects an estimate. Default here is '0' to avoid bignumber
+  // errors in later calculations for nullish values.
+  const maxFeePerGasToUse =
+    maxFeePerGas ??
+    getGasFeeEstimate(
+      'suggestedMaxFeePerGas',
+      gasFeeEstimates,
+      gasEstimateType,
+      estimateToUse,
+    );
+
+  const maxPriorityFeePerGasToUse =
+    maxPriorityFeePerGas ??
+    getGasFeeEstimate(
+      'suggestedMaxPriorityFeePerGas',
+      gasFeeEstimates,
+      gasEstimateType,
+      estimateToUse,
+    );
+
+  const gasPriceToUse =
+    gasPrice ??
+    getGasPriceEstimate(gasFeeEstimates, gasEstimateType, estimateToUse);
+
+  // We have two helper methods that take an object that can have either
+  // gasPrice OR the EIP-1559 fields on it, plus gasLimit. This object is
+  // conditionally set to the appropriate fields to compute the minimum
+  // and maximum cost of a transaction given the current estimates or selected
+  // gas fees.
+  const gasSettings = {
+    gasLimit: decimalToHex(gasLimit),
+  };
+  if (gasEstimateType === GAS_ESTIMATE_TYPES.FEE_MARKET) {
+    gasSettings.maxFeePerGas = decGWEIToHexWEI(maxFeePerGasToUse);
+    gasSettings.maxPriorityFeePerGas = decGWEIToHexWEI(
+      maxPriorityFeePerGasToUse,
+    );
+    gasSettings.baseFeePerGas = decGWEIToHexWEI(
+      gasFeeEstimates.estimatedBaseFee ?? '0',
+    );
+  } else if (gasEstimateType === GAS_ESTIMATE_TYPES.NONE) {
+    gasSettings.gasPrice = '0x0';
+  } else {
+    gasSettings.gasPrice = decGWEIToHexWEI(gasPriceToUse);
+  }
+
+  // The maximum amount this transaction will cost
+  const maximumCostInHexWei = getMaximumGasTotalInHexWei(gasSettings);
+  // The minimum amount this transaction will cost's
+  const minimumCostInHexWei = getMinimumGasTotalInHexWei(gasSettings);
+
+  // We need to display the estimated fiat currency impact of the
+  // maxPriorityFeePerGas field to the user. This hook calculates that amount.
+  const [, { value: maxPriorityFeePerGasFiat }] = useCurrencyDisplay(
+    addHexPrefix(
+      multiplyCurrencies(maxPriorityFeePerGasToUse, gasLimit, {
+        toNumericBase: 'hex',
+        fromDenomination: 'GWEI',
+        toDenomination: 'WEI',
+        multiplicandBase: 10,
+        multiplierBase: 10,
+      }),
+    ),
+    {
+      numberOfDecimals: fiatNumberOfDecimals,
+      currency: fiatCurrency,
+    },
+  );
+
+  // We need to display thee estimated fiat currency impact of the maxFeePerGas
+  // field to the user. This hook calculates that amount. This also works for
+  // the gasPrice amount because in legacy transactions cost is always gasPrice
+  // * gasLimit.
+  const [, { value: maxFeePerGasFiat }] = useCurrencyDisplay(
+    maximumCostInHexWei,
+    {
+      numberOfDecimals: fiatNumberOfDecimals,
+      currency: fiatCurrency,
+    },
+  );
+
+  // We need to display the total amount of native currency will be expended
+  // given the selected gas fees.
+  const [estimatedMaximumNative] = useCurrencyDisplay(maximumCostInHexWei, {
+    numberOfDecimals: primaryNumberOfDecimals,
+    currency: primaryCurrency,
+  });
+
+  // We also need to display our closest estimate of the low end of estimation
+  // in fiat.
+  const [, { value: estimatedMinimumFiat }] = useCurrencyDisplay(
+    minimumCostInHexWei,
+    {
+      numberOfDecimals: fiatNumberOfDecimals,
+      currency: fiatCurrency,
+    },
+  );
+
+  let isMaxPriorityFeeError = false;
+  let isMaxFeeError = false;
+
+  switch (gasEstimateType) {
+    case GAS_ESTIMATE_TYPES.FEE_MARKET:
+      isMaxPriorityFeeError =
+        !isGasEstimatesLoading &&
+        maxPriorityFeePerGasToUse <
+          gasFeeEstimates?.low?.suggestedMaxPriorityFeePerGas;
+      isMaxFeeError =
+        !isGasEstimatesLoading &&
+        maxFeePerGasToUse < gasFeeEstimates?.low?.suggestedMaxFeePerGas;
+      break;
+    default:
+      break;
+  }
+
+  const isGasTooLow = Boolean(isMaxPriorityFeeError || isMaxFeeError);
+
+  return {
+    maxFeePerGas: maxFeePerGasToUse,
+    maxFeePerGasFiat: showFiat ? maxFeePerGasFiat : '',
+    setMaxFeePerGas,
+    isMaxFeeError,
+    maxPriorityFeePerGas: maxPriorityFeePerGasToUse,
+    maxPriorityFeePerGasFiat: showFiat ? maxPriorityFeePerGasFiat : '',
+    setMaxPriorityFeePerGas,
+    isMaxPriorityFeeError,
+    gasPrice: gasPriceToUse,
+    setGasPrice,
+    gasLimit,
+    setGasLimit,
+    isGasTooLow,
+    estimateToUse,
+    setEstimateToUse,
+    estimatedMinimumFiat: showFiat ? estimatedMinimumFiat : '',
+    estimatedMaximumFiat: showFiat ? maxFeePerGasFiat : '',
+    estimatedMaximumNative,
+    isGasEstimatesLoading,
+    gasFeeEstimates,
+    gasEstimateType,
+    estimatedGasFeeTimeBounds,
+  };
+}
diff --git a/ui/hooks/useGasFeeInputs.test.js b/ui/hooks/useGasFeeInputs.test.js
new file mode 100644
index 000000000..a4b1400bb
--- /dev/null
+++ b/ui/hooks/useGasFeeInputs.test.js
@@ -0,0 +1,237 @@
+import { act, renderHook } from '@testing-library/react-hooks';
+import { useSelector } from 'react-redux';
+import { GAS_ESTIMATE_TYPES } from '../../shared/constants/gas';
+import { multiplyCurrencies } from '../../shared/modules/conversion.utils';
+import {
+  getConversionRate,
+  getNativeCurrency,
+} from '../ducks/metamask/metamask';
+import { ETH, PRIMARY } from '../helpers/constants/common';
+import { getCurrentCurrency, getShouldShowFiat } from '../selectors';
+import { useGasFeeEstimates } from './useGasFeeEstimates';
+import { useGasFeeInputs } from './useGasFeeInputs';
+import { useUserPreferencedCurrency } from './useUserPreferencedCurrency';
+
+jest.mock('./useUserPreferencedCurrency', () => ({
+  useUserPreferencedCurrency: jest.fn(),
+}));
+
+jest.mock('./useGasFeeEstimates', () => ({
+  useGasFeeEstimates: jest.fn(),
+}));
+
+jest.mock('react-redux', () => {
+  const actual = jest.requireActual('react-redux');
+
+  return {
+    ...actual,
+    useSelector: jest.fn(),
+  };
+});
+
+// Why this number?
+// 20 gwei * 21000 gasLimit = 420,000 gwei
+// 420,000 gwei is 0.00042 ETH
+// 0.00042 ETH * 100000 = $42
+const MOCK_ETH_USD_CONVERSION_RATE = 100000;
+
+const LEGACY_GAS_ESTIMATE_RETURN_VALUE = {
+  gasEstimateType: GAS_ESTIMATE_TYPES.LEGACY,
+  gasFeeEstimates: {
+    low: '10',
+    medium: '20',
+    high: '30',
+  },
+  estimatedGasFeeTimeBounds: {},
+};
+
+const FEE_MARKET_ESTIMATE_RETURN_VALUE = {
+  gasEstimateType: GAS_ESTIMATE_TYPES.FEE_MARKET,
+  gasFeeEstimates: {
+    low: {
+      minWaitTimeEstimate: 180000,
+      maxWaitTimeEstimate: 300000,
+      suggestedMaxPriorityFeePerGas: '3',
+      suggestedMaxFeePerGas: '53',
+    },
+    medium: {
+      minWaitTimeEstimate: 15000,
+      maxWaitTimeEstimate: 60000,
+      suggestedMaxPriorityFeePerGas: '7',
+      suggestedMaxFeePerGas: '70',
+    },
+    high: {
+      minWaitTimeEstimate: 0,
+      maxWaitTimeEstimate: 15000,
+      suggestedMaxPriorityFeePerGas: '10',
+      suggestedMaxFeePerGas: '100',
+    },
+    estimatedBaseFee: '50',
+  },
+  estimatedGasFeeTimeBounds: {},
+};
+
+const generateUseSelectorRouter = () => (selector) => {
+  if (selector === getConversionRate) {
+    return MOCK_ETH_USD_CONVERSION_RATE;
+  }
+  if (selector === getNativeCurrency) {
+    return ETH;
+  }
+  if (selector === getCurrentCurrency) {
+    return 'USD';
+  }
+  if (selector === getShouldShowFiat) {
+    return true;
+  }
+  return undefined;
+};
+
+function getTotalCostInETH(gwei, gasLimit) {
+  return multiplyCurrencies(gwei, gasLimit, {
+    fromDenomination: 'GWEI',
+    toDenomination: 'ETH',
+    multiplicandBase: 10,
+    multiplierBase: 10,
+  });
+}
+
+describe('useGasFeeInputs', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    useUserPreferencedCurrency.mockImplementation((type) => {
+      if (type === PRIMARY) {
+        return { currency: ETH, numberOfDecimals: 6 };
+      }
+      return { currency: 'USD', numberOfDecimals: 2 };
+    });
+  });
+
+  describe('when using gasPrice API for estimation', () => {
+    beforeEach(() => {
+      useGasFeeEstimates.mockImplementation(
+        () => LEGACY_GAS_ESTIMATE_RETURN_VALUE,
+      );
+      useSelector.mockImplementation(generateUseSelectorRouter());
+    });
+    it('passes through the raw estimate values from useGasFeeEstimates', () => {
+      const { result } = renderHook(() => useGasFeeInputs());
+      expect(result.current.gasFeeEstimates).toMatchObject(
+        LEGACY_GAS_ESTIMATE_RETURN_VALUE.gasFeeEstimates,
+      );
+      expect(result.current.gasEstimateType).toBe(
+        LEGACY_GAS_ESTIMATE_RETURN_VALUE.gasEstimateType,
+      );
+      expect(result.current.estimatedGasFeeTimeBounds).toMatchObject({});
+    });
+
+    it('returns gasPrice appropriately, and "0" for EIP1559 fields', () => {
+      const { result } = renderHook(() => useGasFeeInputs());
+      expect(result.current.gasPrice).toBe(
+        LEGACY_GAS_ESTIMATE_RETURN_VALUE.gasFeeEstimates.medium,
+      );
+      expect(result.current.maxFeePerGas).toBe('0');
+      expect(result.current.maxPriorityFeePerGas).toBe('0');
+    });
+
+    it('updates values when user modifies gasPrice', () => {
+      const { result } = renderHook(() => useGasFeeInputs());
+      expect(result.current.gasPrice).toBe(
+        LEGACY_GAS_ESTIMATE_RETURN_VALUE.gasFeeEstimates.medium,
+      );
+      let totalEthGasFee = getTotalCostInETH(
+        LEGACY_GAS_ESTIMATE_RETURN_VALUE.gasFeeEstimates.medium,
+        result.current.gasLimit,
+      );
+      let totalFiat = (
+        Number(totalEthGasFee) * MOCK_ETH_USD_CONVERSION_RATE
+      ).toFixed(2);
+      expect(result.current.estimatedMaximumNative).toBe(
+        `${totalEthGasFee} ETH`,
+      );
+      expect(result.current.estimatedMaximumFiat).toBe(`$${totalFiat}`);
+      expect(result.current.estimatedMinimumFiat).toBe(`$${totalFiat}`);
+      act(() => {
+        result.current.setGasPrice('30');
+      });
+      totalEthGasFee = getTotalCostInETH('30', result.current.gasLimit);
+      totalFiat = (
+        Number(totalEthGasFee) * MOCK_ETH_USD_CONVERSION_RATE
+      ).toFixed(2);
+      expect(result.current.gasPrice).toBe('30');
+      expect(result.current.estimatedMaximumNative).toBe(
+        `${totalEthGasFee} ETH`,
+      );
+      expect(result.current.estimatedMaximumFiat).toBe(`$${totalFiat}`);
+      expect(result.current.estimatedMinimumFiat).toBe(`$${totalFiat}`);
+    });
+  });
+
+  describe('when using EIP 1559 API for estimation', () => {
+    beforeEach(() => {
+      useGasFeeEstimates.mockImplementation(
+        () => FEE_MARKET_ESTIMATE_RETURN_VALUE,
+      );
+      useSelector.mockImplementation(generateUseSelectorRouter());
+    });
+    it('passes through the raw estimate values from useGasFeeEstimates', () => {
+      const { result } = renderHook(() => useGasFeeInputs());
+      expect(result.current.gasFeeEstimates).toMatchObject(
+        FEE_MARKET_ESTIMATE_RETURN_VALUE.gasFeeEstimates,
+      );
+      expect(result.current.gasEstimateType).toBe(
+        FEE_MARKET_ESTIMATE_RETURN_VALUE.gasEstimateType,
+      );
+      expect(result.current.estimatedGasFeeTimeBounds).toMatchObject({});
+    });
+
+    it('returns EIP-1559 fields appropriately, and "0" for gasPrice fields', () => {
+      const { result } = renderHook(() => useGasFeeInputs());
+      expect(result.current.gasPrice).toBe('0');
+      expect(result.current.maxFeePerGas).toBe(
+        FEE_MARKET_ESTIMATE_RETURN_VALUE.gasFeeEstimates.medium
+          .suggestedMaxFeePerGas,
+      );
+      expect(result.current.maxPriorityFeePerGas).toBe(
+        FEE_MARKET_ESTIMATE_RETURN_VALUE.gasFeeEstimates.medium
+          .suggestedMaxPriorityFeePerGas,
+      );
+    });
+
+    it('updates values when user modifies maxFeePerGas', () => {
+      const { result } = renderHook(() => useGasFeeInputs());
+      expect(result.current.maxFeePerGas).toBe(
+        FEE_MARKET_ESTIMATE_RETURN_VALUE.gasFeeEstimates.medium
+          .suggestedMaxFeePerGas,
+      );
+      let totalEthGasFee = getTotalCostInETH(
+        FEE_MARKET_ESTIMATE_RETURN_VALUE.gasFeeEstimates.medium
+          .suggestedMaxFeePerGas,
+        result.current.gasLimit,
+      );
+      let totalMaxFiat = (
+        Number(totalEthGasFee) * MOCK_ETH_USD_CONVERSION_RATE
+      ).toFixed(2);
+      expect(result.current.estimatedMaximumNative).toBe(
+        `${totalEthGasFee} ETH`,
+      );
+      expect(result.current.estimatedMaximumFiat).toBe(`$${totalMaxFiat}`);
+      // TODO: test minimum fiat too
+      // expect(result.current.estimatedMinimumFiat).toBe(`$${totalMaxFiat}`);
+      act(() => {
+        result.current.setMaxFeePerGas('90');
+      });
+      totalEthGasFee = getTotalCostInETH('90', result.current.gasLimit);
+      totalMaxFiat = (
+        Number(totalEthGasFee) * MOCK_ETH_USD_CONVERSION_RATE
+      ).toFixed(2);
+      expect(result.current.maxFeePerGas).toBe('90');
+      expect(result.current.estimatedMaximumNative).toBe(
+        `${totalEthGasFee} ETH`,
+      );
+      expect(result.current.estimatedMaximumFiat).toBe(`$${totalMaxFiat}`);
+      // TODO: test minimum fiat too
+      // expect(result.current.estimatedMinimumFiat).toBe(`$${totalMaxFiat}`);
+    });
+  });
+});

From be2e6d02f9c75a2009850f2750669cc55e5ae261 Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Mon, 12 Jul 2021 08:43:02 -0700
Subject: [PATCH 107/141] Fix

---
 .../gas-modal-page-container.container.js                        | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js b/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
index 6cc1ae258..a1a262589 100644
--- a/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
+++ b/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
@@ -41,7 +41,6 @@ import {
   getIsGasEstimatesFetched,
   getShouldShowFiat,
   getIsCustomNetworkGasPriceFetched,
-  getShouldShowFiat,
 } from '../../../../selectors';
 
 import {

From 1da7beed132917f51bdc89d222339e36a78fd9b1 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Mon, 12 Jul 2021 11:16:03 -0500
Subject: [PATCH 108/141] Provide Estimate Data to EditGasDisplay (#11433)

---
 app/_locales/en/messages.json                 |  13 ++
 shared/constants/gas.js                       |   9 +
 .../advanced-gas-controls.component.js        | 205 ++++++++++++++----
 .../edit-gas-display.component.js             | 123 +++++++++--
 ui/components/app/edit-gas-display/index.scss |   3 +-
 .../transaction-total-banner.component.js     |   2 +-
 .../numeric-input/numeric-input.component.js  |  13 +-
 ui/components/ui/radio-group/index.scss       |   4 +
 .../ui/radio-group/radio-group.component.js   |   4 +-
 9 files changed, 313 insertions(+), 63 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 78e00d6b2..1a73a1a57 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -650,6 +650,12 @@
   "editGasLow": {
     "message": "Low"
   },
+  "editGasMaxFeeLow": {
+    "message": "Max fee too low for network conditions"
+  },
+  "editGasMaxPriorityFeeLow": {
+    "message": "Max priority fee too low for network conditions"
+  },
   "editGasMedium": {
     "message": "Medium"
   },
@@ -659,6 +665,13 @@
   "editGasTitle": {
     "message": "Edit gas fee"
   },
+  "editGasTooLow": {
+    "message": "Unknown processing time"
+  },
+  "editGasTotalBannerSubtitle": {
+    "message": "Up to $1 ($2)",
+    "display": "$1 represents a fiat value"
+  },
   "editNonceField": {
     "message": "Edit Nonce"
   },
diff --git a/shared/constants/gas.js b/shared/constants/gas.js
index b149458cf..161751b60 100644
--- a/shared/constants/gas.js
+++ b/shared/constants/gas.js
@@ -20,3 +20,12 @@ export const GAS_ESTIMATE_TYPES = {
   ETH_GASPRICE: 'eth_gasPrice',
   NONE: 'none',
 };
+
+/**
+ * These represent gas recommendation levels presented in the UI
+ */
+export const GAS_RECOMMENDATIONS = {
+  LOW: 'low',
+  MEDIUM: 'medium',
+  HIGH: 'high',
+};
diff --git a/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js b/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js
index 78403469f..a8a909eeb 100644
--- a/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js
+++ b/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js
@@ -1,4 +1,5 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
 
 import { I18nContext } from '../../../contexts/i18n';
 import Typography from '../../ui/typography/typography';
@@ -8,16 +9,55 @@ import {
   COLORS,
 } from '../../../helpers/constants/design-system';
 import FormField from '../../ui/form-field';
+import {
+  GAS_ESTIMATE_TYPES,
+  GAS_RECOMMENDATIONS,
+} from '../../../../shared/constants/gas';
 
-export default function AdvancedGasControls() {
+const DEFAULT_ESTIMATES_LEVEL = 'medium';
+
+export default function AdvancedGasControls({
+  estimateToUse,
+  gasFeeEstimates,
+  gasEstimateType,
+  maxPriorityFee,
+  maxFee,
+  setMaxPriorityFee,
+  setMaxFee,
+  onManualChange,
+  gasLimit,
+  setGasLimit,
+  gasPrice,
+  setGasPrice,
+  maxPriorityFeeFiat,
+  maxFeeFiat,
+  maxPriorityFeeError,
+  maxFeeError,
+}) {
   const t = useContext(I18nContext);
 
-  const [gasLimit, setGasLimit] = useState(0);
-  const [maxPriorityFee, setMaxPriorityFee] = useState(0);
-  const [maxFee, setMaxFee] = useState(0);
+  const suggestedValues = {};
 
-  // Used in legacy version
-  const [gasPrice, setGasPrice] = useState(0);
+  switch (gasEstimateType) {
+    case GAS_ESTIMATE_TYPES.FEE_MARKET:
+      suggestedValues.maxPriorityFeePerGas =
+        gasFeeEstimates?.[estimateToUse]?.suggestedMaxPriorityFeePerGas;
+      suggestedValues.maxFeePerGas =
+        gasFeeEstimates?.[estimateToUse]?.suggestedMaxFeePerGas;
+      break;
+    case GAS_ESTIMATE_TYPES.LEGACY:
+      suggestedValues.gasPrice = gasFeeEstimates?.[estimateToUse];
+      break;
+    case GAS_ESTIMATE_TYPES.ETH_GASPRICE:
+      suggestedValues.gasPrice = gasFeeEstimates?.gasPrice;
+      break;
+    default:
+      break;
+  }
+
+  const showFeeMarketFields =
+    process.env.SHOW_EIP_1559_UI &&
+    gasEstimateType === GAS_ESTIMATE_TYPES.FEE_MARKET;
 
   return (
     <div className="advanced-gas-controls">
@@ -27,58 +67,83 @@ export default function AdvancedGasControls() {
         tooltipText=""
         value={gasLimit}
         numeric
+        autoFocus
       />
-      {process.env.SHOW_EIP_1559_UI ? (
+      {showFeeMarketFields ? (
         <>
           <FormField
             titleText={t('maxPriorityFee')}
             titleUnit="(GWEI)"
             tooltipText=""
-            onChange={setMaxPriorityFee}
+            onChange={(value) => {
+              setMaxPriorityFee(value);
+              onManualChange?.();
+            }}
             value={maxPriorityFee}
+            detailText={maxPriorityFeeFiat}
             numeric
             titleDetail={
-              <>
-                <Typography
-                  tag="span"
-                  color={COLORS.UI4}
-                  variant={TYPOGRAPHY.H8}
-                  fontWeight={FONT_WEIGHT.BOLD}
-                >
-                  {t('gasFeeEstimate')}:
-                </Typography>{' '}
-                <Typography
-                  tag="span"
-                  color={COLORS.UI4}
-                  variant={TYPOGRAPHY.H8}
-                ></Typography>
-              </>
+              suggestedValues.maxPriorityFeePerGas && (
+                <>
+                  <Typography
+                    tag="span"
+                    color={COLORS.UI4}
+                    variant={TYPOGRAPHY.H8}
+                    fontWeight={FONT_WEIGHT.BOLD}
+                  >
+                    {t('gasFeeEstimate')}:
+                  </Typography>{' '}
+                  <Typography
+                    tag="span"
+                    color={COLORS.UI4}
+                    variant={TYPOGRAPHY.H8}
+                  >
+                    {
+                      gasFeeEstimates?.[DEFAULT_ESTIMATES_LEVEL]
+                        ?.suggestedMaxPriorityFeePerGas
+                    }
+                  </Typography>
+                </>
+              )
             }
+            error={maxPriorityFeeError}
           />
           <FormField
             titleText={t('maxFee')}
             titleUnit="(GWEI)"
             tooltipText=""
-            onChange={setMaxFee}
+            onChange={(value) => {
+              setMaxFee(value);
+              onManualChange?.();
+            }}
             value={maxFee}
             numeric
+            detailText={maxFeeFiat}
             titleDetail={
-              <>
-                <Typography
-                  tag="span"
-                  color={COLORS.UI4}
-                  variant={TYPOGRAPHY.H8}
-                  fontWeight={FONT_WEIGHT.BOLD}
-                >
-                  {t('gasFeeEstimate')}:
-                </Typography>{' '}
-                <Typography
-                  tag="span"
-                  color={COLORS.UI4}
-                  variant={TYPOGRAPHY.H8}
-                ></Typography>
-              </>
+              suggestedValues.maxFeePerGas && (
+                <>
+                  <Typography
+                    tag="span"
+                    color={COLORS.UI4}
+                    variant={TYPOGRAPHY.H8}
+                    fontWeight={FONT_WEIGHT.BOLD}
+                  >
+                    {t('gasFeeEstimate')}:
+                  </Typography>{' '}
+                  <Typography
+                    tag="span"
+                    color={COLORS.UI4}
+                    variant={TYPOGRAPHY.H8}
+                  >
+                    {
+                      gasFeeEstimates?.[DEFAULT_ESTIMATES_LEVEL]
+                        ?.suggestedMaxFeePerGas
+                    }
+                  </Typography>
+                </>
+              )
             }
+            error={maxFeeError}
           />
         </>
       ) : (
@@ -86,13 +151,71 @@ export default function AdvancedGasControls() {
           <FormField
             titleText={t('gasPrice')}
             titleUnit="(GWEI)"
-            onChange={setGasPrice}
+            onChange={(value) => {
+              setGasPrice(value);
+              onManualChange?.();
+            }}
             tooltipText={t('editGasPriceTooltip')}
             value={gasPrice}
             numeric
+            titleDetail={
+              suggestedValues.gasPrice && (
+                <>
+                  <Typography
+                    tag="span"
+                    color={COLORS.UI4}
+                    variant={TYPOGRAPHY.H8}
+                    fontWeight={FONT_WEIGHT.BOLD}
+                  >
+                    {t('gasFeeEstimate')}:
+                  </Typography>{' '}
+                  <Typography
+                    tag="span"
+                    color={COLORS.UI4}
+                    variant={TYPOGRAPHY.H8}
+                  >
+                    {suggestedValues.gasPrice}
+                  </Typography>
+                </>
+              )
+            }
           />
         </>
       )}
     </div>
   );
 }
+
+AdvancedGasControls.propTypes = {
+  estimateToUse: PropTypes.oneOf(Object.values(GAS_RECOMMENDATIONS)),
+  gasFeeEstimates: PropTypes.oneOf([
+    PropTypes.shape({
+      gasPrice: PropTypes.string,
+    }),
+    PropTypes.shape({
+      low: PropTypes.string,
+      medium: PropTypes.string,
+      high: PropTypes.string,
+    }),
+    PropTypes.shape({
+      low: PropTypes.object,
+      medium: PropTypes.object,
+      high: PropTypes.object,
+      estimatedBaseFee: PropTypes.string,
+    }),
+  ]),
+  gasEstimateType: PropTypes.oneOf(Object.values(GAS_ESTIMATE_TYPES)),
+  setMaxPriorityFee: PropTypes.func,
+  setMaxFee: PropTypes.func,
+  maxPriorityFee: PropTypes.number,
+  maxFee: PropTypes.number,
+  onManualChange: PropTypes.func,
+  gasLimit: PropTypes.number,
+  setGasLimit: PropTypes.func,
+  gasPrice: PropTypes.number,
+  setGasPrice: PropTypes.func,
+  maxPriorityFeeFiat: PropTypes.string,
+  maxFeeFiat: PropTypes.string,
+  maxPriorityFeeError: PropTypes.string,
+  maxFeeError: PropTypes.string,
+};
diff --git a/ui/components/app/edit-gas-display/edit-gas-display.component.js b/ui/components/app/edit-gas-display/edit-gas-display.component.js
index 9bb7ec113..cf3bb72e6 100644
--- a/ui/components/app/edit-gas-display/edit-gas-display.component.js
+++ b/ui/components/app/edit-gas-display/edit-gas-display.component.js
@@ -1,21 +1,25 @@
 import React, { useState, useContext } from 'react';
 import PropTypes from 'prop-types';
 
+import { GAS_RECOMMENDATIONS } from '../../../../shared/constants/gas';
+
 import Button from '../../ui/button';
 import Typography from '../../ui/typography/typography';
 import {
   COLORS,
   TYPOGRAPHY,
   FONT_WEIGHT,
+  TEXT_ALIGN,
 } from '../../../helpers/constants/design-system';
 
 import InfoTooltip from '../../ui/info-tooltip';
 import TransactionTotalBanner from '../transaction-total-banner/transaction-total-banner.component';
 import RadioGroup from '../../ui/radio-group/radio-group.component';
 import AdvancedGasControls from '../advanced-gas-controls/advanced-gas-controls.component';
+import ActionableMessage from '../../ui/actionable-message/actionable-message';
 
 import { I18nContext } from '../../../contexts/i18n';
-import ActionableMessage from '../../ui/actionable-message/actionable-message';
+import { useGasFeeInputs } from '../../../hooks/useGasFeeInputs';
 
 export default function EditGasDisplay({
   alwaysShowForm,
@@ -24,18 +28,45 @@ export default function EditGasDisplay({
   onEducationClick,
   dappSuggestedGasFee,
   dappOrigin,
+  defaultEstimateToUse = 'medium',
 }) {
   const t = useContext(I18nContext);
 
   const [warning] = useState(null);
+
   const [showAdvancedForm, setShowAdvancedForm] = useState(false);
   const [
     dappSuggestedGasFeeAcknowledged,
     setDappSuggestedGasFeeAcknowledged,
   ] = useState(false);
 
-  const requireDappAcknowledgement =
-    dappSuggestedGasFee && !dappSuggestedGasFeeAcknowledged;
+  const requireDappAcknowledgement = Boolean(
+    dappSuggestedGasFee && !dappSuggestedGasFeeAcknowledged,
+  );
+
+  const {
+    maxPriorityFeePerGas,
+    setMaxPriorityFeePerGas,
+    maxPriorityFeePerGasFiat,
+    maxFeePerGas,
+    setMaxFeePerGas,
+    maxFeePerGasFiat,
+    estimatedMaximumNative,
+    isGasEstimatesLoading,
+    gasFeeEstimates,
+    gasEstimateType,
+    gasPrice,
+    setGasPrice,
+    gasLimit,
+    setGasLimit,
+    estimateToUse,
+    setEstimateToUse,
+    estimatedMinimumFiat,
+    estimatedMaximumFiat,
+    isMaxFeeError,
+    isMaxPriorityFeeError,
+    isGasTooLow,
+  } = useGasFeeInputs(defaultEstimateToUse);
 
   return (
     <div className="edit-gas-display">
@@ -44,7 +75,7 @@ export default function EditGasDisplay({
           <div className="edit-gas-display__warning">
             <ActionableMessage
               className="actionable-message--warning"
-              message="Swaps are time sensitive. “Medium” is not reccomended."
+              message={warning}
             />
           </div>
         )}
@@ -72,9 +103,25 @@ export default function EditGasDisplay({
             </Typography>
           </div>
         )}
-
-        <TransactionTotalBanner total="" detail="" timing="" />
-
+        <TransactionTotalBanner
+          total={estimatedMinimumFiat}
+          detail={
+            process.env.SHOW_EIP_1559_UI &&
+            t('editGasTotalBannerSubtitle', [
+              <Typography
+                fontWeight={FONT_WEIGHT.BOLD}
+                tag="span"
+                key="secondary"
+              >
+                {estimatedMaximumFiat}
+              </Typography>,
+              <Typography tag="span" key="primary">
+                {estimatedMaximumNative}
+              </Typography>,
+            ])
+          }
+          timing=""
+        />
         {requireDappAcknowledgement && (
           <Button
             className="edit-gas-display__dapp-acknowledgement-button"
@@ -83,23 +130,43 @@ export default function EditGasDisplay({
             {t('gasDisplayAcknowledgeDappButtonText')}
           </Button>
         )}
-
+        {isGasTooLow && (
+          <div className="edit-gas-display__error">
+            <Typography
+              color={COLORS.ERROR1}
+              variant={TYPOGRAPHY.H7}
+              align={TEXT_ALIGN.CENTER}
+            >
+              {t('editGasTooLow')}
+            </Typography>
+          </div>
+        )}
         {!requireDappAcknowledgement && (
           <RadioGroup
             name="gas-recommendation"
             options={[
-              { value: 'low', label: t('editGasLow'), recommended: false },
               {
-                value: 'medium',
-                label: t('editGasMedium'),
-                recommended: false,
+                value: GAS_RECOMMENDATIONS.LOW,
+                label: t('editGasLow'),
+                recommended: defaultEstimateToUse === GAS_RECOMMENDATIONS.LOW,
+              },
+              {
+                value: GAS_RECOMMENDATIONS.MEDIUM,
+                label: t('editGasMedium'),
+                recommended:
+                  defaultEstimateToUse === GAS_RECOMMENDATIONS.MEDIUM,
+              },
+              {
+                value: GAS_RECOMMENDATIONS.HIGH,
+                label: t('editGasHigh'),
+                recommended: defaultEstimateToUse === GAS_RECOMMENDATIONS.HIGH,
               },
-              { value: 'high', label: t('editGasHigh'), recommended: true },
             ]}
-            selectedValue="high"
+            selectedValue={estimateToUse}
+            onChange={setEstimateToUse}
           />
         )}
-        {!requireDappAcknowledgement && !alwaysShowForm && (
+        {!alwaysShowForm && (
           <button
             className="edit-gas-display__advanced-button"
             onClick={() => setShowAdvancedForm(!showAdvancedForm)}
@@ -112,8 +179,29 @@ export default function EditGasDisplay({
             )}
           </button>
         )}
-        {((!requireDappAcknowledgement && alwaysShowForm) ||
-          showAdvancedForm) && <AdvancedGasControls />}
+        {!requireDappAcknowledgement &&
+          (alwaysShowForm || showAdvancedForm) && (
+            <AdvancedGasControls
+              gasFeeEstimates={gasFeeEstimates}
+              gasEstimateType={gasEstimateType}
+              estimateToUse={estimateToUse}
+              isGasEstimatesLoading={isGasEstimatesLoading}
+              gasLimit={gasLimit}
+              setGasLimit={setGasLimit}
+              maxPriorityFee={maxPriorityFeePerGas}
+              setMaxPriorityFee={setMaxPriorityFeePerGas}
+              maxFee={maxFeePerGas}
+              setMaxFee={setMaxFeePerGas}
+              gasPrice={gasPrice}
+              setGasPrice={setGasPrice}
+              maxPriorityFeeFiat={maxPriorityFeePerGasFiat}
+              maxFeeFiat={maxFeePerGasFiat}
+              maxPriorityFeeError={
+                isMaxPriorityFeeError ? t('editGasMaxPriorityFeeLow') : null
+              }
+              maxFeeError={isMaxFeeError ? t('editGasMaxFeeLow') : null}
+            />
+          )}
       </div>
       {!requireDappAcknowledgement && showEducationButton && (
         <div className="edit-gas-display__education">
@@ -133,6 +221,7 @@ EditGasDisplay.propTypes = {
   onEducationClick: PropTypes.func,
   dappSuggestedGasFee: PropTypes.number,
   dappOrigin: PropTypes.string,
+  defaultEstimateToUse: PropTypes.oneOf(Object.values(GAS_RECOMMENDATIONS)),
 };
 
 EditGasDisplay.defaultProps = {
diff --git a/ui/components/app/edit-gas-display/index.scss b/ui/components/app/edit-gas-display/index.scss
index 6c822a401..98bca0a12 100644
--- a/ui/components/app/edit-gas-display/index.scss
+++ b/ui/components/app/edit-gas-display/index.scss
@@ -1,5 +1,6 @@
 .edit-gas-display {
-  & .actionable-message--warning {
+  & .actionable-message--warning,
+  & .actionable-message--error {
     margin-top: 0;
   }
 
diff --git a/ui/components/app/transaction-total-banner/transaction-total-banner.component.js b/ui/components/app/transaction-total-banner/transaction-total-banner.component.js
index f267155ca..ec9356892 100644
--- a/ui/components/app/transaction-total-banner/transaction-total-banner.component.js
+++ b/ui/components/app/transaction-total-banner/transaction-total-banner.component.js
@@ -10,7 +10,7 @@ export default function TransactionTotalBanner({ total, detail, timing }) {
   return (
     <div className="transaction-total-banner">
       <Typography color={COLORS.BLACK} variant={TYPOGRAPHY.H1}>
-        {total}
+        ~ {total}
       </Typography>
       {detail && (
         <Typography
diff --git a/ui/components/ui/numeric-input/numeric-input.component.js b/ui/components/ui/numeric-input/numeric-input.component.js
index 9b4d2026f..efc3ca44e 100644
--- a/ui/components/ui/numeric-input/numeric-input.component.js
+++ b/ui/components/ui/numeric-input/numeric-input.component.js
@@ -4,7 +4,13 @@ import PropTypes from 'prop-types';
 import Typography from '../typography/typography';
 import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system';
 
-export default function NumericInput({ detailText, value, onChange, error }) {
+export default function NumericInput({
+  detailText,
+  value,
+  onChange,
+  error,
+  autoFocus,
+}) {
   return (
     <div
       className={classNames('numeric-input', { 'numeric-input--error': error })}
@@ -12,8 +18,9 @@ export default function NumericInput({ detailText, value, onChange, error }) {
       <input
         type="number"
         value={value}
-        onChange={(e) => onChange?.(Number(e.target.value))}
+        onChange={(e) => onChange?.(parseInt(e.target.value, 10))}
         min="0"
+        autoFocus={autoFocus}
       />
       {detailText && (
         <Typography color={COLORS.UI4} variant={TYPOGRAPHY.H7} tag="span">
@@ -29,6 +36,7 @@ NumericInput.propTypes = {
   detailText: PropTypes.string,
   onChange: PropTypes.func,
   error: PropTypes.string,
+  autoFocus: PropTypes.bool,
 };
 
 NumericInput.defaultProps = {
@@ -36,4 +44,5 @@ NumericInput.defaultProps = {
   detailText: '',
   onChange: undefined,
   error: '',
+  autoFocus: false,
 };
diff --git a/ui/components/ui/radio-group/index.scss b/ui/components/ui/radio-group/index.scss
index 7cc8e9534..7aab3307d 100644
--- a/ui/components/ui/radio-group/index.scss
+++ b/ui/components/ui/radio-group/index.scss
@@ -8,6 +8,10 @@
     cursor: pointer;
   }
 
+  &__column {
+    text-align: center;
+  }
+
   &__column-recommended {
     height: 20px;
   }
diff --git a/ui/components/ui/radio-group/radio-group.component.js b/ui/components/ui/radio-group/radio-group.component.js
index 8665c5803..c59b300f0 100644
--- a/ui/components/ui/radio-group/radio-group.component.js
+++ b/ui/components/ui/radio-group/radio-group.component.js
@@ -14,6 +14,7 @@ export default function RadioGroup({ options, name, selectedValue, onChange }) {
   return (
     <div className="radio-group">
       {options.map((option) => {
+        const checked = option.value === selectedValue;
         return (
           <div className="radio-group__column" key={`${name}-${option.value}`}>
             <label>
@@ -29,7 +30,8 @@ export default function RadioGroup({ options, name, selectedValue, onChange }) {
                 <input
                   type="radio"
                   name={name}
-                  defaultChecked={option.value === selectedValue}
+                  defaultChecked={checked}
+                  checked={checked}
                   value={option.value}
                   onChange={() => onChange?.(option.value)}
                 />

From 1117e7b1feedcb78bddca5175c9da9d02df18e6d Mon Sep 17 00:00:00 2001
From: Alex Donesky <adonesky@gmail.com>
Date: Mon, 12 Jul 2021 11:55:48 -0500
Subject: [PATCH 109/141] use ERC721 interface id instead of ERC721 metadata
 interface ID for identifying ERC721 tokens (#11495)

---
 app/scripts/controllers/preferences.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/scripts/controllers/preferences.js b/app/scripts/controllers/preferences.js
index 298272968..ddb14755a 100644
--- a/app/scripts/controllers/preferences.js
+++ b/app/scripts/controllers/preferences.js
@@ -15,7 +15,7 @@ import {
 } from '../../../shared/modules/hexstring-utils';
 import { NETWORK_EVENTS } from './network';
 
-const ERC721METADATA_INTERFACE_ID = '0x5b5e139f';
+const ERC721_INTERFACE_ID = '0x80ac58cd';
 
 export default class PreferencesController {
   /**
@@ -803,7 +803,7 @@ export default class PreferencesController {
     );
 
     return await tokenContract
-      .supportsInterface(ERC721METADATA_INTERFACE_ID)
+      .supportsInterface(ERC721_INTERFACE_ID)
       .catch((error) => {
         console.log('error', error);
         log.debug(error);

From f15a68b92305911b1e2eb20e0a963dabb6be4358 Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Mon, 12 Jul 2021 10:13:09 -0700
Subject: [PATCH 110/141] Fixing invalid prop type in
 ConfirmPageContainerHeader (#11500)

---
 .../confirm-transaction-base.component.js                       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
index 3e3c4197f..6af9a95aa 100644
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -781,7 +781,7 @@ export default class ConfirmTransactionBase extends Component {
         toAddress={toAddress}
         toEns={toEns}
         toNickname={toNickname}
-        showEdit={onEdit}
+        showEdit={Boolean(onEdit)}
         action={functionType}
         title={title}
         titleComponent={this.renderTitleComponent()}

From bf4cdb0b5c4ac647e7653161b486366896a14c99 Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Mon, 12 Jul 2021 10:14:54 -0700
Subject: [PATCH 111/141] Using current time in place of block timestamp for
 completion time metric (#11483)

---
 app/scripts/controllers/transactions/index.js | 27 +++++--------------
 .../controllers/transactions/index.test.js    | 24 +++++++++++++++++
 2 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/app/scripts/controllers/transactions/index.js b/app/scripts/controllers/transactions/index.js
index 7af9f9912..adebd4204 100644
--- a/app/scripts/controllers/transactions/index.js
+++ b/app/scripts/controllers/transactions/index.js
@@ -820,15 +820,12 @@ export default class TransactionController extends EventEmitter {
       this._markNonceDuplicatesDropped(txId);
 
       const { submittedTime } = txMeta;
-      const { blockNumber } = txReceipt;
       const metricsParams = { gas_used: gasUsed };
-      const completionTime = await this._getTransactionCompletionTime(
-        blockNumber,
-        submittedTime,
-      );
 
-      if (completionTime) {
-        metricsParams.completion_time = completionTime;
+      if (submittedTime) {
+        metricsParams.completion_time = this._getTransactionCompletionTime(
+          submittedTime,
+        );
       }
 
       if (txReceipt.status === '0x0') {
@@ -1256,20 +1253,8 @@ export default class TransactionController extends EventEmitter {
     });
   }
 
-  async _getTransactionCompletionTime(blockNumber, submittedTime) {
-    const transactionBlock = await this.query.getBlockByNumber(
-      blockNumber.toString(16),
-      false,
-    );
-
-    if (!transactionBlock) {
-      return '';
-    }
-
-    return new BigNumber(transactionBlock.timestamp, 10)
-      .minus(submittedTime / 1000)
-      .round()
-      .toString(10);
+  _getTransactionCompletionTime(submittedTime) {
+    return Math.round((Date.now() - submittedTime) / 1000).toString();
   }
 
   _failTransaction(txId, error) {
diff --git a/app/scripts/controllers/transactions/index.test.js b/app/scripts/controllers/transactions/index.test.js
index 6e0d6421c..2f4c96f19 100644
--- a/app/scripts/controllers/transactions/index.test.js
+++ b/app/scripts/controllers/transactions/index.test.js
@@ -1391,4 +1391,28 @@ describe('Transaction Controller', function () {
       );
     });
   });
+
+  describe('#_getTransactionCompletionTime', function () {
+    let nowStub;
+
+    beforeEach(function () {
+      nowStub = sinon.stub(Date, 'now').returns(1625782016341);
+    });
+
+    afterEach(function () {
+      nowStub.restore();
+    });
+
+    it('calculates completion time (one)', function () {
+      const submittedTime = 1625781997397;
+      const result = txController._getTransactionCompletionTime(submittedTime);
+      assert.equal(result, '19');
+    });
+
+    it('calculates completion time (two)', function () {
+      const submittedTime = 1625781995397;
+      const result = txController._getTransactionCompletionTime(submittedTime);
+      assert.equal(result, '21');
+    });
+  });
 });

From e88c06939826126ffce29bb8cbd52a81165b3dd5 Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Mon, 12 Jul 2021 10:54:39 -0700
Subject: [PATCH 112/141] Converting gas params for tx metrics to decimal GWEI
 (#11482)

---
 app/scripts/controllers/transactions/index.js | 17 +++++++--
 .../controllers/transactions/index.test.js    | 36 ++++++++++++++++---
 2 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/app/scripts/controllers/transactions/index.js b/app/scripts/controllers/transactions/index.js
index adebd4204..56ccfa286 100644
--- a/app/scripts/controllers/transactions/index.js
+++ b/app/scripts/controllers/transactions/index.js
@@ -1,6 +1,6 @@
 import EventEmitter from 'safe-event-emitter';
 import { ObservableStore } from '@metamask/obs-store';
-import { bufferToHex, keccak, toBuffer } from 'ethereumjs-util';
+import { bufferToHex, keccak, toBuffer, isHexString } from 'ethereumjs-util';
 import EthQuery from 'ethjs-query';
 import { ethErrors } from 'eth-rpc-errors';
 import abi from 'human-standard-token-abi';
@@ -20,6 +20,7 @@ import {
 } from '../../lib/util';
 import { TRANSACTION_NO_CONTRACT_ERROR_KEY } from '../../../../ui/helpers/constants/error-keys';
 import { getSwapsTokensReceivedFromTxMeta } from '../../../../ui/pages/swaps/swaps.util';
+import { hexWEIToDecGWEI } from '../../../../ui/helpers/utils/conversions.util';
 import {
   TRANSACTION_STATUSES,
   TRANSACTION_TYPES,
@@ -1232,6 +1233,8 @@ export default class TransactionController extends EventEmitter {
       gasParams.gas_price = gasPrice;
     }
 
+    const gasParamsInGwei = this._getGasValuesInGWEI(gasParams);
+
     this._trackMetaMetricsEvent({
       event,
       category: 'Transactions',
@@ -1247,7 +1250,7 @@ export default class TransactionController extends EventEmitter {
           : 'legacy',
         first_seen: time,
         gas_limit: gasLimit,
-        ...gasParams,
+        ...gasParamsInGwei,
         ...extraParams,
       },
     });
@@ -1257,6 +1260,16 @@ export default class TransactionController extends EventEmitter {
     return Math.round((Date.now() - submittedTime) / 1000).toString();
   }
 
+  _getGasValuesInGWEI(gasParams) {
+    const gasValuesInGwei = {};
+    for (const param in gasParams) {
+      if (isHexString(gasParams[param])) {
+        gasValuesInGwei[param] = hexWEIToDecGWEI(gasParams[param]);
+      }
+    }
+    return gasValuesInGwei;
+  }
+
   _failTransaction(txId, error) {
     this.txStateManager.setTxStatusFailed(txId, error);
     const txMeta = this.txStateManager.getTransaction(txId);
diff --git a/app/scripts/controllers/transactions/index.test.js b/app/scripts/controllers/transactions/index.test.js
index 2f4c96f19..b04132850 100644
--- a/app/scripts/controllers/transactions/index.test.js
+++ b/app/scripts/controllers/transactions/index.test.js
@@ -1219,7 +1219,7 @@ describe('Transaction Controller', function () {
         category: 'Transactions',
         sensitiveProperties: {
           chain_id: '0x2a',
-          gas_price: '0x77359400',
+          gas_price: '2',
           gas_limit: '0x7b0d',
           first_seen: 1624408066355,
           transaction_envelope_type: 'legacy',
@@ -1264,7 +1264,7 @@ describe('Transaction Controller', function () {
         category: 'Transactions',
         sensitiveProperties: {
           chain_id: '0x2a',
-          gas_price: '0x77359400',
+          gas_price: '2',
           gas_limit: '0x7b0d',
           first_seen: 1624408066355,
           transaction_envelope_type: 'legacy',
@@ -1311,7 +1311,7 @@ describe('Transaction Controller', function () {
           baz: 3.0,
           foo: 'bar',
           chain_id: '0x2a',
-          gas_price: '0x77359400',
+          gas_price: '2',
           gas_limit: '0x7b0d',
           first_seen: 1624408066355,
           transaction_envelope_type: 'legacy',
@@ -1363,8 +1363,8 @@ describe('Transaction Controller', function () {
           baz: 3.0,
           foo: 'bar',
           chain_id: '0x2a',
-          max_fee_per_gas: '0x77359400',
-          max_priority_fee_per_gas: '0x77359400',
+          max_fee_per_gas: '2',
+          max_priority_fee_per_gas: '2',
           gas_limit: '0x7b0d',
           first_seen: 1624408066355,
           transaction_envelope_type: 'fee-market',
@@ -1415,4 +1415,30 @@ describe('Transaction Controller', function () {
       assert.equal(result, '21');
     });
   });
+
+  describe('#_getGasValuesInGWEI', function () {
+    it('converts gas values in hex GWEi to dec GWEI (EIP-1559)', function () {
+      const params = {
+        max_fee_per_gas: '0x77359400',
+        max_priority_fee_per_gas: '0x77359400',
+      };
+      const expectedParams = {
+        max_fee_per_gas: '2',
+        max_priority_fee_per_gas: '2',
+      };
+      const result = txController._getGasValuesInGWEI(params);
+      assert.deepEqual(result, expectedParams);
+    });
+
+    it('converts gas values in hex GWEi to dec GWEI (non EIP-1559)', function () {
+      const params = {
+        gas_price: '0x37e11d600',
+      };
+      const expectedParams = {
+        gas_price: '15',
+      };
+      const result = txController._getGasValuesInGWEI(params);
+      assert.deepEqual(result, expectedParams);
+    });
+  });
 });

From 9416d1ca7120ef214f3e3a9f845be3b0a4864d25 Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Mon, 12 Jul 2021 14:35:54 -0500
Subject: [PATCH 113/141] provide skeleton for submitting gas form (#11496)

---
 app/_locales/en/messages.json                 |  3 +
 .../confirm-page-container.component.js       | 10 +++-
 .../edit-gas-popover.component.js             | 54 +++++++++++++++++-
 .../app/sidebars/sidebar.component.js         | 18 ------
 .../transaction-list-item.component.js        | 31 ++++++++--
 ui/hooks/useCancelTransaction.js              | 17 +++++-
 ui/hooks/useCancelTransaction.test.js         | 12 ++--
 ui/hooks/useRetryTransaction.js               | 56 ++++++++++++-------
 ui/hooks/useRetryTransaction.test.js          | 12 ++--
 .../confirm-transaction-base.component.js     |  1 +
 10 files changed, 158 insertions(+), 56 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 1a73a1a57..d84e28438 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -289,6 +289,9 @@
   "cancel": {
     "message": "Cancel"
   },
+  "cancelPopoverTitle": {
+    "message": "Cancel transaction"
+  },
   "cancellationGasFee": {
     "message": "Cancellation Gas Fee"
   },
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 8e3b8d858..8c81e5b39 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
@@ -63,6 +63,8 @@ export default class ConfirmPageContainer extends Component {
     disabled: PropTypes.bool,
     editingGas: PropTypes.bool,
     handleCloseEditGas: PropTypes.func,
+    // Gas Popover
+    currentTransaction: PropTypes.object.isRequired,
   };
 
   render() {
@@ -110,6 +112,7 @@ export default class ConfirmPageContainer extends Component {
       ethGasPriceWarning,
       editingGas,
       handleCloseEditGas,
+      currentTransaction,
     } = this.props;
     const renderAssetImage = contentComponent || !identiconAddress;
 
@@ -188,7 +191,12 @@ export default class ConfirmPageContainer extends Component {
             )}
           </PageContainerFooter>
         )}
-        {editingGas && <EditGasPopover onClose={handleCloseEditGas} />}
+        {editingGas && (
+          <EditGasPopover
+            onClose={handleCloseEditGas}
+            transaction={currentTransaction}
+          />
+        )}
       </div>
     );
   }
diff --git a/ui/components/app/edit-gas-popover/edit-gas-popover.component.js b/ui/components/app/edit-gas-popover/edit-gas-popover.component.js
index f27f6525d..740668416 100644
--- a/ui/components/app/edit-gas-popover/edit-gas-popover.component.js
+++ b/ui/components/app/edit-gas-popover/edit-gas-popover.component.js
@@ -8,12 +8,26 @@ import EditGasDisplay from '../edit-gas-display';
 import EditGasDisplayEducation from '../edit-gas-display-education';
 
 import { I18nContext } from '../../../contexts/i18n';
-import { hideModal, hideSidebar } from '../../../store/actions';
+import {
+  createCancelTransaction,
+  createSpeedUpTransaction,
+  hideModal,
+  hideSidebar,
+  updateTransaction,
+} from '../../../store/actions';
+
+export const EDIT_GAS_MODE = {
+  SPEED_UP: 'speed-up',
+  CANCEL: 'cancel',
+  MODIFY_IN_PLACE: 'modify-in-place',
+};
 
 export default function EditGasPopover({
   popoverTitle,
   confirmButtonText,
   editGasDisplayProps,
+  transaction,
+  mode,
   onClose,
 }) {
   const t = useContext(I18nContext);
@@ -37,6 +51,40 @@ export default function EditGasPopover({
     }
   }, [showSidebar, onClose, dispatch]);
 
+  const onSubmit = useCallback(() => {
+    if (!transaction || !mode) {
+      closePopover();
+    }
+    switch (mode) {
+      case EDIT_GAS_MODE.CANCEL:
+        dispatch(
+          createCancelTransaction(transaction.id, {
+            /** new gas settings */
+          }),
+        );
+        break;
+      case EDIT_GAS_MODE.SPEED_UP:
+        dispatch(
+          createSpeedUpTransaction(transaction.id, {
+            /** new gas settings */
+          }),
+        );
+        break;
+      case EDIT_GAS_MODE.MODIFY_IN_PLACE:
+        dispatch(
+          updateTransaction({
+            ...transaction,
+            txParams: { ...transaction.txParams /** ...newGasSettings */ },
+          }),
+        );
+        break;
+      default:
+        break;
+    }
+
+    closePopover();
+  }, [transaction, mode, dispatch, closePopover]);
+
   const title = showEducationContent
     ? t('editGasEducationModalTitle')
     : popoverTitle || t('editGasTitle');
@@ -51,7 +99,7 @@ export default function EditGasPopover({
       }
       footer={
         <>
-          <Button type="primary" onClick={closePopover}>
+          <Button type="primary" onClick={onSubmit}>
             {footerButtonText}
           </Button>
         </>
@@ -77,6 +125,8 @@ EditGasPopover.propTypes = {
   confirmButtonText: PropTypes.string,
   showEducationButton: PropTypes.bool,
   onClose: PropTypes.func,
+  transaction: PropTypes.object,
+  mode: PropTypes.oneOf(Object.values(EDIT_GAS_MODE)),
 };
 
 EditGasPopover.defaultProps = {
diff --git a/ui/components/app/sidebars/sidebar.component.js b/ui/components/app/sidebars/sidebar.component.js
index 1efd03c41..4ed71461b 100644
--- a/ui/components/app/sidebars/sidebar.component.js
+++ b/ui/components/app/sidebars/sidebar.component.js
@@ -4,8 +4,6 @@ import ReactCSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
 import CustomizeGas from '../gas-customization/gas-modal-page-container';
 import { MILLISECOND } from '../../../../shared/constants/time';
 
-import EditGasPopover from '../edit-gas-popover/edit-gas-popover.component';
-
 export default class Sidebar extends Component {
   static propTypes = {
     sidebarOpen: PropTypes.bool,
@@ -54,18 +52,6 @@ export default class Sidebar extends Component {
     }
   }
 
-  renderGasPopover() {
-    const { t } = this.context;
-
-    return (
-      <EditGasPopover
-        popoverTitle={t('speedUpPopoverTitle')}
-        editGasDisplayProps={{ alwaysShowForm: true, type: 'speed-up' }}
-        confirmButtonText={t('submit')}
-      />
-    );
-  }
-
   componentDidUpdate(prevProps) {
     if (!prevProps.sidebarShouldClose && this.props.sidebarShouldClose) {
       this.props.hideSidebar();
@@ -77,10 +63,6 @@ export default class Sidebar extends Component {
 
     const showSidebar = sidebarOpen && !sidebarShouldClose;
 
-    if (showSidebar && process.env.SHOW_EIP_1559_UI) {
-      return this.renderGasPopover();
-    }
-
     return (
       <div>
         <ReactCSSTransitionGroup
diff --git a/ui/components/app/transaction-list-item/transaction-list-item.component.js b/ui/components/app/transaction-list-item/transaction-list-item.component.js
index 98635cce4..01cd5cbb7 100644
--- a/ui/components/app/transaction-list-item/transaction-list-item.component.js
+++ b/ui/components/app/transaction-list-item/transaction-list-item.component.js
@@ -18,6 +18,8 @@ import {
   TRANSACTION_GROUP_CATEGORIES,
   TRANSACTION_STATUSES,
 } from '../../../../shared/constants/transaction';
+import EditGasPopover from '../edit-gas-popover';
+import { EDIT_GAS_MODE } from '../edit-gas-popover/edit-gas-popover.component';
 
 export default function TransactionListItem({
   transactionGroup,
@@ -32,10 +34,15 @@ export default function TransactionListItem({
     initialTransaction: { id },
     primaryTransaction: { err, status },
   } = transactionGroup;
-  const [cancelEnabled, cancelTransaction] = useCancelTransaction(
-    transactionGroup,
-  );
-  const retryTransaction = useRetryTransaction(transactionGroup);
+  const [
+    cancelEnabled,
+    { cancelTransaction, showCancelEditGasPopover, closeCancelEditGasPopover },
+  ] = useCancelTransaction(transactionGroup);
+  const {
+    retryTransaction,
+    showRetryEditGasPopover,
+    closeRetryEditGasPopover,
+  } = useRetryTransaction(transactionGroup);
   const shouldShowSpeedUp = useShouldShowSpeedUp(
     transactionGroup,
     isEarliestNonce,
@@ -203,6 +210,22 @@ export default function TransactionListItem({
           cancelDisabled={!cancelEnabled}
         />
       )}
+      {process.env.SHOW_EIP_1559_UI && showRetryEditGasPopover && (
+        <EditGasPopover
+          popoverTitle={t('cancelPopoverTitle')}
+          onClose={closeRetryEditGasPopover}
+          mode={EDIT_GAS_MODE.SPEED_UP}
+          transaction={transactionGroup.primaryTransaction}
+        />
+      )}
+      {process.env.SHOW_EIP_1559_UI && showCancelEditGasPopover && (
+        <EditGasPopover
+          popoverTitle={t('speedUpPopoverTitle')}
+          onClose={closeCancelEditGasPopover}
+          mode={EDIT_GAS_MODE.CANCEL}
+          transaction={transactionGroup.primaryTransaction}
+        />
+      )}
     </>
   );
 }
diff --git a/ui/hooks/useCancelTransaction.js b/ui/hooks/useCancelTransaction.js
index 5c88d76a8..e0ee0cd4d 100644
--- a/ui/hooks/useCancelTransaction.js
+++ b/ui/hooks/useCancelTransaction.js
@@ -1,5 +1,5 @@
 import { useDispatch, useSelector } from 'react-redux';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { showModal, showSidebar } from '../store/actions';
 import { isBalanceSufficient } from '../pages/send/send.utils';
 import { getSelectedAccount, getIsMainnet } from '../selectors';
@@ -34,9 +34,19 @@ export function useCancelTransaction(transactionGroup) {
   const conversionRate = useSelector(getConversionRate);
   const isMainnet = useSelector(getIsMainnet);
   const hideBasic = !(isMainnet || process.env.IN_TEST);
+
+  const [showCancelEditGasPopover, setShowCancelEditGasPopover] = useState(
+    false,
+  );
+
+  const closeCancelEditGasPopover = () => setShowCancelEditGasPopover(false);
+
   const cancelTransaction = useCallback(
     (event) => {
       event.stopPropagation();
+      if (process.env.SHOW_EIP_1559_UI) {
+        return setShowCancelEditGasPopover(true);
+      }
       if (isLegacyTransaction(primaryTransaction)) {
         // To support the current process of cancelling or speeding up
         // a transaction, we have to inform the custom gas state of the new
@@ -88,5 +98,8 @@ export function useCancelTransaction(transactionGroup) {
       conversionRate,
     });
 
-  return [hasEnoughCancelGas, cancelTransaction];
+  return [
+    hasEnoughCancelGas,
+    { cancelTransaction, showCancelEditGasPopover, closeCancelEditGasPopover },
+  ];
 }
diff --git a/ui/hooks/useCancelTransaction.test.js b/ui/hooks/useCancelTransaction.test.js
index 8dd4e495b..711866bb4 100644
--- a/ui/hooks/useCancelTransaction.test.js
+++ b/ui/hooks/useCancelTransaction.test.js
@@ -58,8 +58,10 @@ describe('useCancelTransaction', function () {
         const { result } = renderHook(() =>
           useCancelTransaction(transactionGroup),
         );
-        expect(typeof result.current[1]).toStrictEqual('function');
-        result.current[1]({
+        expect(typeof result.current[1].cancelTransaction).toStrictEqual(
+          'function',
+        );
+        result.current[1].cancelTransaction({
           preventDefault: () => undefined,
           stopPropagation: () => undefined,
         });
@@ -134,8 +136,10 @@ describe('useCancelTransaction', function () {
         const { result } = renderHook(() =>
           useCancelTransaction(transactionGroup),
         );
-        expect(typeof result.current[1]).toStrictEqual('function');
-        result.current[1]({
+        expect(typeof result.current[1].cancelTransaction).toStrictEqual(
+          'function',
+        );
+        result.current[1].cancelTransaction({
           preventDefault: () => undefined,
           stopPropagation: () => undefined,
         });
diff --git a/ui/hooks/useRetryTransaction.js b/ui/hooks/useRetryTransaction.js
index db1bf6205..f19c1000a 100644
--- a/ui/hooks/useRetryTransaction.js
+++ b/ui/hooks/useRetryTransaction.js
@@ -1,6 +1,6 @@
 import { useDispatch, useSelector } from 'react-redux';
 
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { showSidebar } from '../store/actions';
 import {
   fetchBasicGasEstimates,
@@ -11,11 +11,20 @@ import { getIsMainnet } from '../selectors';
 import { isLegacyTransaction } from '../../shared/modules/transaction.utils';
 import { useMetricEvent } from './useMetricEvent';
 import { useIncrementedGasFees } from './useIncrementedGasFees';
+
+/**
+ * @typedef {Object} RetryTransactionReturnValue
+ * @property {(event: Event) => void} retryTransaction - open edit gas popover
+ *  to begin setting retry gas fees
+ * @property {boolean} showRetryEditGasPopover - Whether to show the popover
+ * @property {() => void} closeRetryEditGasPopover - close the popover.
+ */
+
 /**
  * Provides a reusable hook that, given a transactionGroup, will return
  * a method for beginning the retry process
  * @param {Object} transactionGroup - the transaction group
- * @return {Function}
+ * @return {RetryTransactionReturnValue}
  */
 export function useRetryTransaction(transactionGroup) {
   const { primaryTransaction } = transactionGroup;
@@ -30,30 +39,35 @@ export function useRetryTransaction(transactionGroup) {
     },
   });
   const dispatch = useDispatch();
+  const [showRetryEditGasPopover, setShowRetryEditGasPopover] = useState(false);
+
+  const closeRetryEditGasPopover = () => setShowRetryEditGasPopover(false);
 
   const retryTransaction = useCallback(
     async (event) => {
       event.stopPropagation();
 
       trackMetricsEvent();
-      if (process.env.SHOW_EIP_1559_UI === true) {
+      if (process.env.SHOW_EIP_1559_UI) {
+        setShowRetryEditGasPopover(true);
+      } else {
         await dispatch(fetchBasicGasEstimates);
-      }
-      if (isLegacyTransaction(primaryTransaction)) {
-        // To support the current process of cancelling or speeding up
-        // a transaction, we have to inform the custom gas state of the new
-        // gasPrice to start at.
-        dispatch(setCustomGasPriceForRetry(customGasSettings.gasPrice));
-        dispatch(setCustomGasLimit(primaryTransaction.txParams.gas));
-      }
+        if (isLegacyTransaction(primaryTransaction)) {
+          // To support the current process of cancelling or speeding up
+          // a transaction, we have to inform the custom gas state of the new
+          // gasPrice to start at.
+          dispatch(setCustomGasPriceForRetry(customGasSettings.gasPrice));
+          dispatch(setCustomGasLimit(primaryTransaction.txParams.gas));
+        }
 
-      dispatch(
-        showSidebar({
-          transitionName: 'sidebar-left',
-          type: 'customize-gas',
-          props: { transaction: primaryTransaction, hideBasic },
-        }),
-      );
+        dispatch(
+          showSidebar({
+            transitionName: 'sidebar-left',
+            type: 'customize-gas',
+            props: { transaction: primaryTransaction, hideBasic },
+          }),
+        );
+      }
     },
     [
       dispatch,
@@ -64,5 +78,9 @@ export function useRetryTransaction(transactionGroup) {
     ],
   );
 
-  return retryTransaction;
+  return {
+    retryTransaction,
+    showRetryEditGasPopover,
+    closeRetryEditGasPopover,
+  };
 }
diff --git a/ui/hooks/useRetryTransaction.test.js b/ui/hooks/useRetryTransaction.test.js
index 3c1f78401..b6b554a75 100644
--- a/ui/hooks/useRetryTransaction.test.js
+++ b/ui/hooks/useRetryTransaction.test.js
@@ -53,8 +53,8 @@ describe('useRetryTransaction', () => {
       const { result } = renderHook(() =>
         useRetryTransaction(retryEnabledTransaction, true),
       );
-      const retry = result.current;
-      retry(event);
+      const { retryTransaction } = result.current;
+      retryTransaction(event);
       expect(trackEvent.calledOnce).toStrictEqual(true);
     });
 
@@ -62,8 +62,8 @@ describe('useRetryTransaction', () => {
       const { result } = renderHook(() =>
         useRetryTransaction(retryEnabledTransaction, true),
       );
-      const retry = result.current;
-      await retry(event);
+      const { retryTransaction } = result.current;
+      await retryTransaction(event);
       expect(
         dispatch.calledWith(
           showSidebar({
@@ -108,8 +108,8 @@ describe('useRetryTransaction', () => {
       const { result } = renderHook(() =>
         useRetryTransaction(cancelledTransaction, true),
       );
-      const retry = result.current;
-      await retry(event);
+      const { retryTransaction } = result.current;
+      await retryTransaction(event);
       expect(
         dispatch.calledWith(
           showSidebar({
diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
index 6af9a95aa..e953adc1c 100644
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -817,6 +817,7 @@ export default class ConfirmTransactionBase extends Component {
         ethGasPriceWarning={ethGasPriceWarning}
         editingGas={editingGas}
         handleCloseEditGas={() => this.handleCloseNewGasPopover()}
+        currentTransaction={txData}
       />
     );
   }

From 07601f4a90172ab17271d7b213eaf99f4da50163 Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Mon, 12 Jul 2021 13:26:53 -0700
Subject: [PATCH 114/141] Setting tx param type before signing transactions
 (#11497)

Fixes MetaMask/metamask-extension#11491
---
 app/scripts/controllers/transactions/index.js |  5 ++
 .../controllers/transactions/index.test.js    | 53 +++++++++++++++++++
 2 files changed, 58 insertions(+)

diff --git a/app/scripts/controllers/transactions/index.js b/app/scripts/controllers/transactions/index.js
index 56ccfa286..0a19a238c 100644
--- a/app/scripts/controllers/transactions/index.js
+++ b/app/scripts/controllers/transactions/index.js
@@ -24,6 +24,7 @@ import { hexWEIToDecGWEI } from '../../../../ui/helpers/utils/conversions.util';
 import {
   TRANSACTION_STATUSES,
   TRANSACTION_TYPES,
+  TRANSACTION_ENVELOPE_TYPES,
 } from '../../../../shared/constants/transaction';
 import { METAMASK_CONTROLLER_EVENTS } from '../../metamask-controller';
 import { GAS_LIMITS } from '../../../../shared/constants/gas';
@@ -727,7 +728,11 @@ export default class TransactionController extends EventEmitter {
     const txMeta = this.txStateManager.getTransaction(txId);
     // add network/chain id
     const chainId = this.getChainId();
+    const type = isEIP1559Transaction(txMeta)
+      ? TRANSACTION_ENVELOPE_TYPES.FEE_MARKET
+      : TRANSACTION_ENVELOPE_TYPES.LEGACY;
     const txParams = {
+      type,
       ...txMeta.txParams,
       chainId,
       gasLimit: txMeta.txParams.gas,
diff --git a/app/scripts/controllers/transactions/index.test.js b/app/scripts/controllers/transactions/index.test.js
index b04132850..c753d70d0 100644
--- a/app/scripts/controllers/transactions/index.test.js
+++ b/app/scripts/controllers/transactions/index.test.js
@@ -773,6 +773,59 @@ describe('Transaction Controller', function () {
     });
   });
 
+  describe('#signTransaction', function () {
+    let fromTxDataSpy;
+
+    beforeEach(function () {
+      fromTxDataSpy = sinon.spy(TransactionFactory, 'fromTxData');
+    });
+
+    afterEach(function () {
+      fromTxDataSpy.restore();
+    });
+
+    it('sets txParams.type to 0x0 (non-EIP-1559)', async function () {
+      txController.txStateManager._addTransactionsToState([
+        {
+          status: TRANSACTION_STATUSES.UNAPPROVED,
+          id: 1,
+          metamaskNetworkId: currentNetworkId,
+          history: [{}],
+          txParams: {
+            from: VALID_ADDRESS_TWO,
+            to: VALID_ADDRESS,
+            gasPrice: '0x77359400',
+            gas: '0x7b0d',
+            nonce: '0x4b',
+          },
+        },
+      ]);
+      await txController.signTransaction('1');
+      assert.equal(fromTxDataSpy.getCall(0).args[0].type, '0x0');
+    });
+
+    it('sets txParams.type to 0x2 (EIP-1559)', async function () {
+      txController.txStateManager._addTransactionsToState([
+        {
+          status: TRANSACTION_STATUSES.UNAPPROVED,
+          id: 2,
+          metamaskNetworkId: currentNetworkId,
+          history: [{}],
+          txParams: {
+            from: VALID_ADDRESS_TWO,
+            to: VALID_ADDRESS,
+            maxFeePerGas: '0x77359400',
+            maxPriorityFeePerGas: '0x77359400',
+            gas: '0x7b0d',
+            nonce: '0x4b',
+          },
+        },
+      ]);
+      await txController.signTransaction('2');
+      assert.equal(fromTxDataSpy.getCall(0).args[0].type, '0x2');
+    });
+  });
+
   describe('#publishTransaction', function () {
     let hash, txMeta, trackTransactionMetricsEventSpy;
 

From 2edd44e1c56b3121251ecd92198305f93e6fad26 Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Mon, 12 Jul 2021 17:30:35 -0500
Subject: [PATCH 115/141] moving some properties to identifiable payload
 (#11506)

---
 app/scripts/controllers/transactions/index.js | 10 ++--
 .../controllers/transactions/index.test.js    | 48 +++++++++++--------
 2 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/app/scripts/controllers/transactions/index.js b/app/scripts/controllers/transactions/index.js
index 0a19a238c..50e90f061 100644
--- a/app/scripts/controllers/transactions/index.js
+++ b/app/scripts/controllers/transactions/index.js
@@ -1243,13 +1243,15 @@ export default class TransactionController extends EventEmitter {
     this._trackMetaMetricsEvent({
       event,
       category: 'Transactions',
-      sensitiveProperties: {
-        type,
-        status,
+      properties: {
+        chain_id: chainId,
         referrer,
         source,
         network,
-        chain_id: chainId,
+        type,
+      },
+      sensitiveProperties: {
+        status,
         transaction_envelope_type: isEIP1559Transaction(txMeta)
           ? 'fee-market'
           : 'legacy',
diff --git a/app/scripts/controllers/transactions/index.test.js b/app/scripts/controllers/transactions/index.test.js
index c753d70d0..08ae84919 100644
--- a/app/scripts/controllers/transactions/index.test.js
+++ b/app/scripts/controllers/transactions/index.test.js
@@ -1270,17 +1270,19 @@ describe('Transaction Controller', function () {
       const expectedPayload = {
         event: 'Transaction Added',
         category: 'Transactions',
-        sensitiveProperties: {
+        properties: {
           chain_id: '0x2a',
+          network: '42',
+          referrer: 'metamask',
+          source: 'user',
+          type: 'sentEther',
+        },
+        sensitiveProperties: {
           gas_price: '2',
           gas_limit: '0x7b0d',
           first_seen: 1624408066355,
           transaction_envelope_type: 'legacy',
-          network: '42',
-          referrer: 'metamask',
-          source: 'user',
           status: 'unapproved',
-          type: 'sentEther',
         },
       };
 
@@ -1315,17 +1317,19 @@ describe('Transaction Controller', function () {
       const expectedPayload = {
         event: 'Transaction Added',
         category: 'Transactions',
-        sensitiveProperties: {
+        properties: {
           chain_id: '0x2a',
+          network: '42',
+          referrer: 'other',
+          source: 'dapp',
+          type: 'sentEther',
+        },
+        sensitiveProperties: {
           gas_price: '2',
           gas_limit: '0x7b0d',
           first_seen: 1624408066355,
           transaction_envelope_type: 'legacy',
-          network: '42',
-          referrer: 'other',
-          source: 'dapp',
           status: 'unapproved',
-          type: 'sentEther',
         },
       };
 
@@ -1360,19 +1364,21 @@ describe('Transaction Controller', function () {
       const expectedPayload = {
         event: 'Transaction Added',
         category: 'Transactions',
+        properties: {
+          network: '42',
+          referrer: 'other',
+          source: 'dapp',
+          type: 'sentEther',
+          chain_id: '0x2a',
+        },
         sensitiveProperties: {
           baz: 3.0,
           foo: 'bar',
-          chain_id: '0x2a',
           gas_price: '2',
           gas_limit: '0x7b0d',
           first_seen: 1624408066355,
           transaction_envelope_type: 'legacy',
-          network: '42',
-          referrer: 'other',
-          source: 'dapp',
           status: 'unapproved',
-          type: 'sentEther',
         },
       };
 
@@ -1412,20 +1418,22 @@ describe('Transaction Controller', function () {
       const expectedPayload = {
         event: 'Transaction Added',
         category: 'Transactions',
+        properties: {
+          chain_id: '0x2a',
+          network: '42',
+          referrer: 'other',
+          source: 'dapp',
+          type: 'sentEther',
+        },
         sensitiveProperties: {
           baz: 3.0,
           foo: 'bar',
-          chain_id: '0x2a',
           max_fee_per_gas: '2',
           max_priority_fee_per_gas: '2',
           gas_limit: '0x7b0d',
           first_seen: 1624408066355,
           transaction_envelope_type: 'fee-market',
-          network: '42',
-          referrer: 'other',
-          source: 'dapp',
           status: 'unapproved',
-          type: 'sentEther',
         },
       };
 

From 97d9cdff8012f6080c061075ac462f0bf85aa218 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Tue, 13 Jul 2021 08:42:36 -0500
Subject: [PATCH 116/141] Provide EIP 1559 fields in transaction history
 (#11464)

---
 app/_locales/en/messages.json                 |  9 ++
 .../transaction-breakdown.component.js        | 96 +++++++++++++++----
 2 files changed, 84 insertions(+), 21 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index d84e28438..0d6867c03 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -2451,6 +2451,15 @@
   "transactionFee": {
     "message": "Transaction Fee"
   },
+  "transactionHistoryBaseFee": {
+    "message": "Base fee (GWEI)"
+  },
+  "transactionHistoryEffectiveGasPrice": {
+    "message": "Effective gas price"
+  },
+  "transactionHistoryPriorityFee": {
+    "message": "Priority fee (GWEI)"
+  },
   "transactionResubmitted": {
     "message": "Transaction resubmitted with gas fee increased to $1 at $2"
   },
diff --git a/ui/components/app/transaction-breakdown/transaction-breakdown.component.js b/ui/components/app/transaction-breakdown/transaction-breakdown.component.js
index cba7803c9..0daf6add0 100644
--- a/ui/components/app/transaction-breakdown/transaction-breakdown.component.js
+++ b/ui/components/app/transaction-breakdown/transaction-breakdown.component.js
@@ -23,6 +23,9 @@ export default class TransactionBreakdown extends PureComponent {
     gasPrice: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     gasUsed: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     totalInHex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    baseFee: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    priorityFee: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    effectiveGasPrice: PropTypes.number,
   };
 
   static defaultProps = {
@@ -42,6 +45,9 @@ export default class TransactionBreakdown extends PureComponent {
       totalInHex,
       gasUsed,
       isTokenApprove,
+      baseFee,
+      priorityFee,
+      effectiveGasPrice,
     } = this.props;
     return (
       <div className={classnames('transaction-breakdown', className)}>
@@ -85,35 +91,83 @@ export default class TransactionBreakdown extends PureComponent {
             />
           </TransactionBreakdownRow>
         )}
-        <TransactionBreakdownRow title={t('gasPrice')}>
-          {typeof gasPrice === 'undefined' ? (
-            '?'
-          ) : (
-            <CurrencyDisplay
+        {process.env.SHOW_EIP_1559_UI && (
+          <TransactionBreakdownRow title={t('transactionHistoryBaseFee')}>
+            {typeof baseFee === 'undefined' ? (
+              '?'
+            ) : (
+              <CurrencyDisplay
+                className="transaction-breakdown__value"
+                data-testid="transaction-breakdown__base-fee"
+                currency={nativeCurrency}
+                denomination={GWEI}
+                value={baseFee}
+                hideLabel
+              />
+            )}
+          </TransactionBreakdownRow>
+        )}
+        {process.env.SHOW_EIP_1559_UI && (
+          <TransactionBreakdownRow title={t('transactionHistoryPriorityFee')}>
+            {typeof priorityFee === 'undefined' ? (
+              '?'
+            ) : (
+              <CurrencyDisplay
+                className="transaction-breakdown__value"
+                data-testid="transaction-breakdown__priority-fee"
+                currency={nativeCurrency}
+                denomination={GWEI}
+                value={priorityFee}
+                hideLabel
+              />
+            )}
+          </TransactionBreakdownRow>
+        )}
+        {!process.env.SHOW_EIP_1559_UI && (
+          <TransactionBreakdownRow title={t('gasPrice')}>
+            {typeof gasPrice === 'undefined' ? (
+              '?'
+            ) : (
+              <CurrencyDisplay
+                className="transaction-breakdown__value"
+                data-testid="transaction-breakdown__gas-price"
+                currency={nativeCurrency}
+                denomination={GWEI}
+                value={gasPrice}
+                hideLabel
+              />
+            )}
+          </TransactionBreakdownRow>
+        )}
+        <TransactionBreakdownRow
+          title={t('transactionHistoryEffectiveGasPrice')}
+        >
+          <UserPreferencedCurrencyDisplay
+            className="transaction-breakdown__value transaction-breakdown__value--effective-gas-price"
+            type={PRIMARY}
+            value={effectiveGasPrice}
+          />
+          {showFiat && (
+            <UserPreferencedCurrencyDisplay
               className="transaction-breakdown__value"
-              data-testid="transaction-breakdown__gas-price"
-              currency={nativeCurrency}
-              denomination={GWEI}
-              value={gasPrice}
-              hideLabel
+              type={SECONDARY}
+              value={effectiveGasPrice}
             />
           )}
         </TransactionBreakdownRow>
         <TransactionBreakdownRow title={t('total')}>
-          <div>
+          <UserPreferencedCurrencyDisplay
+            className="transaction-breakdown__value transaction-breakdown__value--eth-total"
+            type={PRIMARY}
+            value={totalInHex}
+          />
+          {showFiat && (
             <UserPreferencedCurrencyDisplay
-              className="transaction-breakdown__value transaction-breakdown__value--eth-total"
-              type={PRIMARY}
+              className="transaction-breakdown__value"
+              type={SECONDARY}
               value={totalInHex}
             />
-            {showFiat && (
-              <UserPreferencedCurrencyDisplay
-                className="transaction-breakdown__value"
-                type={SECONDARY}
-                value={totalInHex}
-              />
-            )}
-          </div>
+          )}
         </TransactionBreakdownRow>
       </div>
     );

From 90180627cbd0640687a4cd7e28fc3ca67f3e5a04 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Tue, 13 Jul 2021 14:22:33 -0500
Subject: [PATCH 117/141] Using translation for edit text (#11514)

---
 .../confirm-transaction-base.component.js                       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
index e953adc1c..9db87bdfe 100644
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -414,7 +414,7 @@ export default class ConfirmTransactionBase extends Component {
           <ConfirmDetailRow
             label={t('gasFee')}
             value={hexTransactionFee}
-            headerText={showGasEditButton ? 'Edit' : ''}
+            headerText={showGasEditButton ? t('edit') : ''}
             headerTextClassName={
               showGasEditButton ? 'confirm-detail-row__header-text--edit' : ''
             }

From aef1cd24502f197f73a98c5f59b1e7ce1d2b7aae Mon Sep 17 00:00:00 2001
From: muji <tmpfs@protonmail.com>
Date: Wed, 14 Jul 2021 06:11:53 +0800
Subject: [PATCH 118/141] Use ESM imports in migrations index. (#11443)

So that spack does not complain about mixing CommonJs and ESM.
---
 app/scripts/migrations/index.js | 184 +++++++++++++++++++++-----------
 1 file changed, 123 insertions(+), 61 deletions(-)

diff --git a/app/scripts/migrations/index.js b/app/scripts/migrations/index.js
index 389b4ef4a..693537f80 100644
--- a/app/scripts/migrations/index.js
+++ b/app/scripts/migrations/index.js
@@ -5,68 +5,130 @@
 // The `migrate` function receives the previous
 // config data format, and returns the new one.
 
+import m002 from './002';
+import m003 from './003';
+import m004 from './004';
+import m005 from './005';
+import m006 from './006';
+import m007 from './007';
+import m008 from './008';
+import m009 from './009';
+import m010 from './010';
+import m011 from './011';
+import m012 from './012';
+import m013 from './013';
+import m014 from './014';
+import m015 from './015';
+import m016 from './016';
+import m017 from './017';
+import m018 from './018';
+import m019 from './019';
+import m020 from './020';
+import m021 from './021';
+import m022 from './022';
+import m023 from './023';
+import m024 from './024';
+import m025 from './025';
+import m026 from './026';
+import m027 from './027';
+import m028 from './028';
+import m029 from './029';
+import m030 from './030';
+import m031 from './031';
+import m032 from './032';
+import m033 from './033';
+import m034 from './034';
+import m035 from './035';
+import m036 from './036';
+import m037 from './037';
+import m038 from './038';
+import m039 from './039';
+import m040 from './040';
+import m041 from './041';
+import m042 from './042';
+import m043 from './043';
+import m044 from './044';
+import m045 from './045';
+import m046 from './046';
+import m047 from './047';
+import m048 from './048';
+import m049 from './049';
+import m050 from './050';
+import m051 from './051';
+import m052 from './052';
+import m053 from './053';
+import m054 from './054';
+import m055 from './055';
+import m056 from './056';
+import m057 from './057';
+import m058 from './058';
+import m059 from './059';
+import m060 from './060';
+import m061 from './061';
+import m062 from './062';
+
 const migrations = [
-  require('./002').default,
-  require('./003').default,
-  require('./004').default,
-  require('./005').default,
-  require('./006').default,
-  require('./007').default,
-  require('./008').default,
-  require('./009').default,
-  require('./010').default,
-  require('./011').default,
-  require('./012').default,
-  require('./013').default,
-  require('./014').default,
-  require('./015').default,
-  require('./016').default,
-  require('./017').default,
-  require('./018').default,
-  require('./019').default,
-  require('./020').default,
-  require('./021').default,
-  require('./022').default,
-  require('./023').default,
-  require('./024').default,
-  require('./025').default,
-  require('./026').default,
-  require('./027').default,
-  require('./028').default,
-  require('./029').default,
-  require('./030').default,
-  require('./031').default,
-  require('./032').default,
-  require('./033').default,
-  require('./034').default,
-  require('./035').default,
-  require('./036').default,
-  require('./037').default,
-  require('./038').default,
-  require('./039').default,
-  require('./040').default,
-  require('./041').default,
-  require('./042').default,
-  require('./043').default,
-  require('./044').default,
-  require('./045').default,
-  require('./046').default,
-  require('./047').default,
-  require('./048').default,
-  require('./049').default,
-  require('./050').default,
-  require('./051').default,
-  require('./052').default,
-  require('./053').default,
-  require('./054').default,
-  require('./055').default,
-  require('./056').default,
-  require('./057').default,
-  require('./058').default,
-  require('./059').default,
-  require('./060').default,
-  require('./061').default,
-  require('./062').default,
+  m002,
+  m003,
+  m004,
+  m005,
+  m006,
+  m007,
+  m008,
+  m009,
+  m010,
+  m011,
+  m012,
+  m013,
+  m014,
+  m015,
+  m016,
+  m017,
+  m018,
+  m019,
+  m020,
+  m021,
+  m022,
+  m023,
+  m024,
+  m025,
+  m026,
+  m027,
+  m028,
+  m029,
+  m030,
+  m031,
+  m032,
+  m033,
+  m034,
+  m035,
+  m036,
+  m037,
+  m038,
+  m039,
+  m040,
+  m041,
+  m042,
+  m043,
+  m044,
+  m045,
+  m046,
+  m047,
+  m048,
+  m049,
+  m050,
+  m051,
+  m052,
+  m053,
+  m054,
+  m055,
+  m056,
+  m057,
+  m058,
+  m059,
+  m060,
+  m061,
+  m062,
 ];
 
 export default migrations;

From bbef49158dda2b77f1ba1ac5e38f231492a66ca8 Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Tue, 13 Jul 2021 19:06:12 -0700
Subject: [PATCH 119/141] Various UI fixes (#11512)

---
 .../gas-customization/gas-modal-page-container/index.scss   | 2 +-
 ui/components/app/modals/account-modal-container/index.scss | 2 +-
 .../app/modals/export-private-key-modal/index.scss          | 2 ++
 .../add-token/token-list/token-list-placeholder/index.scss  | 6 +++++-
 ui/pages/create-account/import-account/index.scss           | 4 ++++
 ui/pages/settings/index.scss                                | 3 +--
 ui/pages/settings/settings.component.js                     | 2 +-
 7 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/ui/components/app/gas-customization/gas-modal-page-container/index.scss b/ui/components/app/gas-customization/gas-modal-page-container/index.scss
index be2dcc3ed..fe069251c 100644
--- a/ui/components/app/gas-customization/gas-modal-page-container/index.scss
+++ b/ui/components/app/gas-customization/gas-modal-page-container/index.scss
@@ -36,7 +36,7 @@
       color: #4eade7;
       position: absolute;
       font-size: 0.75rem;
-      top: 4px;
+      top: 8px;
       right: 16px;
       cursor: pointer;
       overflow: hidden;
diff --git a/ui/components/app/modals/account-modal-container/index.scss b/ui/components/app/modals/account-modal-container/index.scss
index ad4ca6118..bfb0c37a8 100644
--- a/ui/components/app/modals/account-modal-container/index.scss
+++ b/ui/components/app/modals/account-modal-container/index.scss
@@ -34,7 +34,7 @@
     color: $dusty-gray;
     position: absolute;
     cursor: pointer;
-    top: 10px;
+    top: -10px;
     right: 12px;
 
     &::after {
diff --git a/ui/components/app/modals/export-private-key-modal/index.scss b/ui/components/app/modals/export-private-key-modal/index.scss
index 737b94863..a0862f5bc 100644
--- a/ui/components/app/modals/export-private-key-modal/index.scss
+++ b/ui/components/app/modals/export-private-key-modal/index.scss
@@ -84,6 +84,8 @@
     display: flex;
     flex-direction: row;
     justify-content: center;
+    width: 100%;
+    padding: 0 25px;
   }
 
   &__button {
diff --git a/ui/pages/add-token/token-list/token-list-placeholder/index.scss b/ui/pages/add-token/token-list/token-list-placeholder/index.scss
index aa6d0a0e9..bbc1e8304 100644
--- a/ui/pages/add-token/token-list/token-list-placeholder/index.scss
+++ b/ui/pages/add-token/token-list/token-list-placeholder/index.scss
@@ -4,13 +4,17 @@
   padding-top: 36px;
   flex-direction: column;
   line-height: 22px;
-  opacity: 0.5;
+
+  img {
+    opacity: 0.5;
+  }
 
   &__text {
     color: $silver-chalice;
     width: 50%;
     text-align: center;
     margin-top: 8px;
+    opacity: 0.5;
 
     @media screen and (max-width: 575px) {
       width: 60%;
diff --git a/ui/pages/create-account/import-account/index.scss b/ui/pages/create-account/import-account/index.scss
index 11056d25d..1e5efe7f0 100644
--- a/ui/pages/create-account/import-account/index.scss
+++ b/ui/pages/create-account/import-account/index.scss
@@ -14,6 +14,10 @@
   align-items: center;
   padding: 0 30px 30px;
 
+  @media screen and (max-width: $break-small) {
+    padding: 0 22px 22px;
+  }
+
   &__select-section {
     display: flex;
     justify-content: space-between;
diff --git a/ui/pages/settings/index.scss b/ui/pages/settings/index.scss
index 30976a6da..3846e4873 100644
--- a/ui/pages/settings/index.scss
+++ b/ui/pages/settings/index.scss
@@ -52,8 +52,7 @@
   }
 
   &__subheader--break {
-    margin-right: 4px;
-    padding-right: 4px;
+    margin-inline-start: 4px;
   }
 
   &__sub-header {
diff --git a/ui/pages/settings/settings.component.js b/ui/pages/settings/settings.component.js
index 2ef3f15d3..6efe49b05 100644
--- a/ui/pages/settings/settings.component.js
+++ b/ui/pages/settings/settings.component.js
@@ -121,7 +121,7 @@ class SettingsPage extends PureComponent {
     } else if (initialBreadCrumbKey) {
       subheaderText = t(initialBreadCrumbKey);
     } else {
-      subheaderText = t(pathnameI18nKey || 'general');
+      subheaderText = t(pathnameI18nKey || 'contacts');
     }
 
     return (

From 91e744a7050a4a17ed93ed646685424271673029 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Wed, 14 Jul 2021 08:42:10 -0500
Subject: [PATCH 120/141] EIP-1559 - Provide edit button for transaction
 screens to update gas (#11516)

---
 .../app/transaction-detail-item/index.scss    | 14 --------
 .../transaction-detail-item.component.js      | 16 ----------
 .../app/transaction-detail/index.scss         | 21 +++++++++++-
 .../transaction-detail.component.js           | 32 ++++++++++++++-----
 .../transaction-detail.stories.js             |  8 +++++
 .../confirm-transaction-base.component.js     | 16 ++++++----
 6 files changed, 61 insertions(+), 46 deletions(-)

diff --git a/ui/components/app/transaction-detail-item/index.scss b/ui/components/app/transaction-detail-item/index.scss
index a007a2e2d..7359d694c 100644
--- a/ui/components/app/transaction-detail-item/index.scss
+++ b/ui/components/app/transaction-detail-item/index.scss
@@ -3,20 +3,6 @@
 
   &__row {
     display: flex;
-
-    &--action-row {
-      justify-content: flex-end;
-      align-items: flex-start;
-      margin-bottom: 4px;
-    }
-  }
-
-  &__action-button.button {
-    @include H7;
-
-    width: auto;
-    padding: 0;
-    text-transform: uppercase;
   }
 
   &__title {
diff --git a/ui/components/app/transaction-detail-item/transaction-detail-item.component.js b/ui/components/app/transaction-detail-item/transaction-detail-item.component.js
index edbd03b4b..0e3039987 100644
--- a/ui/components/app/transaction-detail-item/transaction-detail-item.component.js
+++ b/ui/components/app/transaction-detail-item/transaction-detail-item.component.js
@@ -7,7 +7,6 @@ import {
   FONT_WEIGHT,
   TYPOGRAPHY,
 } from '../../../helpers/constants/design-system';
-import Button from '../../ui/button';
 
 export default function TransactionDetailItem({
   detailTitle,
@@ -15,22 +14,9 @@ export default function TransactionDetailItem({
   detailTotal,
   subTitle,
   subText,
-  handleActionClick,
-  actionText,
 }) {
   return (
     <div className="transaction-detail-item">
-      {actionText && handleActionClick && (
-        <div className="transaction-detail-item__row transaction-detail-item__row--action-row">
-          <Button
-            className="transaction-detail-item__action-button"
-            onClick={handleActionClick}
-            type="link"
-          >
-            {actionText}
-          </Button>
-        </div>
-      )}
       <div className="transaction-detail-item__row">
         <Typography
           color={COLORS.BLACK}
@@ -77,8 +63,6 @@ export default function TransactionDetailItem({
 }
 
 TransactionDetailItem.propTypes = {
-  handleActionClick: PropTypes.func,
-  actionText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   detailTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   detailText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   detailTotal: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
diff --git a/ui/components/app/transaction-detail/index.scss b/ui/components/app/transaction-detail/index.scss
index 61ddb3479..538f469d8 100644
--- a/ui/components/app/transaction-detail/index.scss
+++ b/ui/components/app/transaction-detail/index.scss
@@ -1,5 +1,24 @@
 .transaction-detail {
-  .transaction-detail-item {
+  .transaction-detail-edit {
+    text-align: end;
+    padding-top: 20px;
+
+    button {
+      @include H7;
+
+      color: $primary-1;
+      background: transparent;
+      border: 0;
+      padding-inline-end: 0;
+      text-transform: uppercase;
+    }
+  }
+
+  &-rows &-item:first-child {
+    padding-top: 0;
+  }
+
+  &-item {
     padding: 20px 0;
     border-bottom: 1px solid $ui-3;
 
diff --git a/ui/components/app/transaction-detail/transaction-detail.component.js b/ui/components/app/transaction-detail/transaction-detail.component.js
index 6079f741c..aacb71b8c 100644
--- a/ui/components/app/transaction-detail/transaction-detail.component.js
+++ b/ui/components/app/transaction-detail/transaction-detail.component.js
@@ -1,15 +1,31 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import { I18nContext } from '../../../contexts/i18n';
+
 import TransactionDetailItem from '../transaction-detail-item/transaction-detail-item.component';
 
-export default function TransactionDetail({ rows }) {
-  return <div className="transaction-detail">{rows}</div>;
+export default function TransactionDetail({ rows = [], onEdit }) {
+  const t = useContext(I18nContext);
+
+  return (
+    <div
+      className={classNames('transaction-detail', {
+        'transaction-detail--editable': Boolean(onEdit),
+      })}
+    >
+      {onEdit && (
+        <div className="transaction-detail-edit">
+          <button onClick={onEdit}>{t('edit')}</button>
+        </div>
+      )}
+      <div className="transaction-detail-rows">{rows}</div>
+    </div>
+  );
 }
 
 TransactionDetail.propTypes = {
-  rows: PropTypes.arrayOf(TransactionDetailItem),
-};
-
-TransactionDetail.defaultProps = {
-  rows: [],
+  rows: PropTypes.arrayOf(TransactionDetailItem).isRequired,
+  onEdit: PropTypes.func,
 };
diff --git a/ui/components/app/transaction-detail/transaction-detail.stories.js b/ui/components/app/transaction-detail/transaction-detail.stories.js
index e20fbd64a..b02b778fa 100644
--- a/ui/components/app/transaction-detail/transaction-detail.stories.js
+++ b/ui/components/app/transaction-detail/transaction-detail.stories.js
@@ -49,3 +49,11 @@ export const basic = () => {
     </div>
   );
 };
+
+export const editable = () => {
+  return (
+    <div style={{ width: '400px' }}>
+      <TransactionDetail rows={rows} onEdit={() => console.log('Edit!')} />
+    </div>
+  );
+};
diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
index 9db87bdfe..625eda06d 100644
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -346,10 +346,19 @@ export default class ConfirmTransactionBase extends Component {
       </div>
     ) : null;
 
+    const showInlineControls = process.env.SHOW_EIP_1559_UI
+      ? advancedInlineGasShown
+      : advancedInlineGasShown || notMainnetOrTest || gasPriceFetchFailure;
+
+    const showGasEditButton = process.env.SHOW_EIP_1559_UI
+      ? !showInlineControls
+      : !(notMainnetOrTest || gasPriceFetchFailure);
+
     if (process.env.SHOW_EIP_1559_UI) {
       return (
         <div className="confirm-page-container-content__details">
           <TransactionDetail
+            onEdit={() => this.handleEditGas()}
             rows={[
               <TransactionDetailItem
                 key="gas-item"
@@ -400,13 +409,6 @@ export default class ConfirmTransactionBase extends Component {
         </div>
       );
     }
-    const showInlineControls = process.env.SHOW_EIP_1559_UI
-      ? advancedInlineGasShown
-      : advancedInlineGasShown || notMainnetOrTest || gasPriceFetchFailure;
-
-    const showGasEditButton = process.env.SHOW_EIP_1559_UI
-      ? !showInlineControls
-      : !(notMainnetOrTest || gasPriceFetchFailure);
 
     return (
       <div className="confirm-page-container-content__details">

From a294f02b1d46a16cc443b627f2b1e492809177b1 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Wed, 14 Jul 2021 11:45:37 -0500
Subject: [PATCH 121/141] EIP-1559 - Elevate gas properties to the Popover,
 disable submission if errors (#11510)

---
 shared/constants/gas.js                       |   9 +
 .../edit-gas-display.component.js             | 169 +++++++++--------
 .../edit-gas-popover.component.js             | 172 ++++++++++++++----
 .../transaction-list-item.component.js        |   8 +-
 4 files changed, 238 insertions(+), 120 deletions(-)

diff --git a/shared/constants/gas.js b/shared/constants/gas.js
index 161751b60..004e0919b 100644
--- a/shared/constants/gas.js
+++ b/shared/constants/gas.js
@@ -29,3 +29,12 @@ export const GAS_RECOMMENDATIONS = {
   MEDIUM: 'medium',
   HIGH: 'high',
 };
+
+/**
+ * These represent the different edit modes presented in the UI
+ */
+export const EDIT_GAS_MODES = {
+  SPEED_UP: 'speed-up',
+  CANCEL: 'cancel',
+  MODIFY_IN_PLACE: 'modify-in-place',
+};
diff --git a/ui/components/app/edit-gas-display/edit-gas-display.component.js b/ui/components/app/edit-gas-display/edit-gas-display.component.js
index cf3bb72e6..a51cd8a0d 100644
--- a/ui/components/app/edit-gas-display/edit-gas-display.component.js
+++ b/ui/components/app/edit-gas-display/edit-gas-display.component.js
@@ -1,7 +1,10 @@
-import React, { useState, useContext } from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 
-import { GAS_RECOMMENDATIONS } from '../../../../shared/constants/gas';
+import {
+  GAS_RECOMMENDATIONS,
+  EDIT_GAS_MODES,
+} from '../../../../shared/constants/gas';
 
 import Button from '../../ui/button';
 import Typography from '../../ui/typography/typography';
@@ -19,55 +22,48 @@ import AdvancedGasControls from '../advanced-gas-controls/advanced-gas-controls.
 import ActionableMessage from '../../ui/actionable-message/actionable-message';
 
 import { I18nContext } from '../../../contexts/i18n';
-import { useGasFeeInputs } from '../../../hooks/useGasFeeInputs';
 
 export default function EditGasDisplay({
-  alwaysShowForm,
-  type,
-  showEducationButton,
+  mode = EDIT_GAS_MODES.MODIFY_IN_PLACE,
+  alwaysShowForm = false,
+  showEducationButton = false,
   onEducationClick,
-  dappSuggestedGasFee,
-  dappOrigin,
-  defaultEstimateToUse = 'medium',
+  dappSuggestedGasFee = 0,
+  dappOrigin = '',
+  defaultEstimateToUse,
+  maxPriorityFeePerGas,
+  setMaxPriorityFeePerGas,
+  maxPriorityFeePerGasFiat,
+  maxFeePerGas,
+  setMaxFeePerGas,
+  maxFeePerGasFiat,
+  estimatedMaximumNative,
+  isGasEstimatesLoading,
+  gasFeeEstimates,
+  gasEstimateType,
+  gasPrice,
+  setGasPrice,
+  gasLimit,
+  setGasLimit,
+  estimateToUse,
+  setEstimateToUse,
+  estimatedMinimumFiat,
+  estimatedMaximumFiat,
+  isMaxFeeError,
+  isMaxPriorityFeeError,
+  isGasTooLow,
+  dappSuggestedGasFeeAcknowledged,
+  setDappSuggestedGasFeeAcknowledged,
+  showAdvancedForm,
+  setShowAdvancedForm,
+  warning,
 }) {
   const t = useContext(I18nContext);
 
-  const [warning] = useState(null);
-
-  const [showAdvancedForm, setShowAdvancedForm] = useState(false);
-  const [
-    dappSuggestedGasFeeAcknowledged,
-    setDappSuggestedGasFeeAcknowledged,
-  ] = useState(false);
-
   const requireDappAcknowledgement = Boolean(
     dappSuggestedGasFee && !dappSuggestedGasFeeAcknowledged,
   );
 
-  const {
-    maxPriorityFeePerGas,
-    setMaxPriorityFeePerGas,
-    maxPriorityFeePerGasFiat,
-    maxFeePerGas,
-    setMaxFeePerGas,
-    maxFeePerGasFiat,
-    estimatedMaximumNative,
-    isGasEstimatesLoading,
-    gasFeeEstimates,
-    gasEstimateType,
-    gasPrice,
-    setGasPrice,
-    gasLimit,
-    setGasLimit,
-    estimateToUse,
-    setEstimateToUse,
-    estimatedMinimumFiat,
-    estimatedMaximumFiat,
-    isMaxFeeError,
-    isMaxPriorityFeeError,
-    isGasTooLow,
-  } = useGasFeeInputs(defaultEstimateToUse);
-
   return (
     <div className="edit-gas-display">
       <div className="edit-gas-display__content">
@@ -88,7 +84,7 @@ export default function EditGasDisplay({
             />
           </div>
         )}
-        {type === 'speed-up' && (
+        {mode === EDIT_GAS_MODES.SPEED_UP && (
           <div className="edit-gas-display__top-tooltip">
             <Typography
               color={COLORS.BLACK}
@@ -141,31 +137,33 @@ export default function EditGasDisplay({
             </Typography>
           </div>
         )}
-        {!requireDappAcknowledgement && (
-          <RadioGroup
-            name="gas-recommendation"
-            options={[
-              {
-                value: GAS_RECOMMENDATIONS.LOW,
-                label: t('editGasLow'),
-                recommended: defaultEstimateToUse === GAS_RECOMMENDATIONS.LOW,
-              },
-              {
-                value: GAS_RECOMMENDATIONS.MEDIUM,
-                label: t('editGasMedium'),
-                recommended:
-                  defaultEstimateToUse === GAS_RECOMMENDATIONS.MEDIUM,
-              },
-              {
-                value: GAS_RECOMMENDATIONS.HIGH,
-                label: t('editGasHigh'),
-                recommended: defaultEstimateToUse === GAS_RECOMMENDATIONS.HIGH,
-              },
-            ]}
-            selectedValue={estimateToUse}
-            onChange={setEstimateToUse}
-          />
-        )}
+        {!requireDappAcknowledgement &&
+          ![EDIT_GAS_MODES.SPEED_UP, EDIT_GAS_MODES.CANCEL].includes(mode) && (
+            <RadioGroup
+              name="gas-recommendation"
+              options={[
+                {
+                  value: GAS_RECOMMENDATIONS.LOW,
+                  label: t('editGasLow'),
+                  recommended: defaultEstimateToUse === GAS_RECOMMENDATIONS.LOW,
+                },
+                {
+                  value: GAS_RECOMMENDATIONS.MEDIUM,
+                  label: t('editGasMedium'),
+                  recommended:
+                    defaultEstimateToUse === GAS_RECOMMENDATIONS.MEDIUM,
+                },
+                {
+                  value: GAS_RECOMMENDATIONS.HIGH,
+                  label: t('editGasHigh'),
+                  recommended:
+                    defaultEstimateToUse === GAS_RECOMMENDATIONS.HIGH,
+                },
+              ]}
+              selectedValue={estimateToUse}
+              onChange={setEstimateToUse}
+            />
+          )}
         {!alwaysShowForm && (
           <button
             className="edit-gas-display__advanced-button"
@@ -216,19 +214,36 @@ export default function EditGasDisplay({
 
 EditGasDisplay.propTypes = {
   alwaysShowForm: PropTypes.bool,
-  type: PropTypes.oneOf(['customize-gas', 'speed-up']),
+  mode: PropTypes.oneOf(Object.values(EDIT_GAS_MODES)),
   showEducationButton: PropTypes.bool,
   onEducationClick: PropTypes.func,
   dappSuggestedGasFee: PropTypes.number,
   dappOrigin: PropTypes.string,
   defaultEstimateToUse: PropTypes.oneOf(Object.values(GAS_RECOMMENDATIONS)),
-};
-
-EditGasDisplay.defaultProps = {
-  alwaysShowForm: false,
-  type: 'customize-gas',
-  showEducationButton: false,
-  onEducationClick: undefined,
-  dappSuggestedGasFee: 0,
-  dappOrigin: '',
+  maxPriorityFeePerGas: PropTypes.string,
+  setMaxPriorityFeePerGas: PropTypes.func,
+  maxPriorityFeePerGasFiat: PropTypes.string,
+  maxFeePerGas: PropTypes.string,
+  setMaxFeePerGas: PropTypes.func,
+  maxFeePerGasFiat: PropTypes.string,
+  estimatedMaximumNative: PropTypes.string,
+  isGasEstimatesLoading: PropTypes.boolean,
+  gasFeeEstimates: PropTypes.object,
+  gasEstimateType: PropTypes.string,
+  gasPrice: PropTypes.string,
+  setGasPrice: PropTypes.func,
+  gasLimit: PropTypes.number,
+  setGasLimit: PropTypes.func,
+  estimateToUse: PropTypes.string,
+  setEstimateToUse: PropTypes.func,
+  estimatedMinimumFiat: PropTypes.string,
+  estimatedMaximumFiat: PropTypes.string,
+  isMaxFeeError: PropTypes.boolean,
+  isMaxPriorityFeeError: PropTypes.boolean,
+  isGasTooLow: PropTypes.boolean,
+  dappSuggestedGasFeeAcknowledged: PropTypes.boolean,
+  setDappSuggestedGasFeeAcknowledged: PropTypes.func,
+  showAdvancedForm: PropTypes.bool,
+  setShowAdvancedForm: PropTypes.func,
+  warning: PropTypes.string,
 };
diff --git a/ui/components/app/edit-gas-popover/edit-gas-popover.component.js b/ui/components/app/edit-gas-popover/edit-gas-popover.component.js
index 740668416..59f9ebd78 100644
--- a/ui/components/app/edit-gas-popover/edit-gas-popover.component.js
+++ b/ui/components/app/edit-gas-popover/edit-gas-popover.component.js
@@ -2,6 +2,18 @@ import React, { useCallback, useContext, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import { useDispatch, useSelector } from 'react-redux';
+import { useGasFeeInputs } from '../../../hooks/useGasFeeInputs';
+
+import {
+  GAS_ESTIMATE_TYPES,
+  EDIT_GAS_MODES,
+} from '../../../../shared/constants/gas';
+
+import {
+  decGWEIToHexWEI,
+  decimalToHex,
+} from '../../../helpers/utils/conversions.util';
+
 import Popover from '../../ui/popover';
 import Button from '../../ui/button';
 import EditGasDisplay from '../edit-gas-display';
@@ -16,16 +28,11 @@ import {
   updateTransaction,
 } from '../../../store/actions';
 
-export const EDIT_GAS_MODE = {
-  SPEED_UP: 'speed-up',
-  CANCEL: 'cancel',
-  MODIFY_IN_PLACE: 'modify-in-place',
-};
-
 export default function EditGasPopover({
-  popoverTitle,
-  confirmButtonText,
-  editGasDisplayProps,
+  popoverTitle = '',
+  confirmButtonText = '',
+  editGasDisplayProps = {},
+  defaultEstimateToUse = 'medium',
   transaction,
   mode,
   onClose,
@@ -33,8 +40,42 @@ export default function EditGasPopover({
   const t = useContext(I18nContext);
   const dispatch = useDispatch();
   const showSidebar = useSelector((state) => state.appState.sidebar.isOpen);
+
+  const showEducationButton = mode === EDIT_GAS_MODES.MODIFY_IN_PLACE;
   const [showEducationContent, setShowEducationContent] = useState(false);
 
+  const [warning] = useState(null);
+
+  const [showAdvancedForm, setShowAdvancedForm] = useState(false);
+  const [
+    dappSuggestedGasFeeAcknowledged,
+    setDappSuggestedGasFeeAcknowledged,
+  ] = useState(false);
+
+  const {
+    maxPriorityFeePerGas,
+    setMaxPriorityFeePerGas,
+    maxPriorityFeePerGasFiat,
+    maxFeePerGas,
+    setMaxFeePerGas,
+    maxFeePerGasFiat,
+    estimatedMaximumNative,
+    isGasEstimatesLoading,
+    gasFeeEstimates,
+    gasEstimateType,
+    gasPrice,
+    setGasPrice,
+    gasLimit,
+    setGasLimit,
+    estimateToUse,
+    setEstimateToUse,
+    estimatedMinimumFiat,
+    estimatedMaximumFiat,
+    isMaxFeeError,
+    isMaxPriorityFeeError,
+    isGasTooLow,
+  } = useGasFeeInputs(defaultEstimateToUse);
+
   /**
    * Temporary placeholder, this should be managed by the parent component but
    * we will be extracting this component from the hard to maintain modal/
@@ -55,26 +96,36 @@ export default function EditGasPopover({
     if (!transaction || !mode) {
       closePopover();
     }
+
+    const newGasSettings =
+      gasEstimateType === GAS_ESTIMATE_TYPES.FEE_MARKET
+        ? {
+            gas: decimalToHex(gasLimit),
+            gasLimit: decimalToHex(gasLimit),
+            maxFeePerGas: decGWEIToHexWEI(maxFeePerGas),
+            maxPriorityFeePerGas: decGWEIToHexWEI(maxPriorityFeePerGas),
+          }
+        : {
+            gas: decimalToHex(gasLimit),
+            gasLimit: decimalToHex(gasLimit),
+            gasPrice: decGWEIToHexWEI(gasPrice),
+          };
+
     switch (mode) {
-      case EDIT_GAS_MODE.CANCEL:
-        dispatch(
-          createCancelTransaction(transaction.id, {
-            /** new gas settings */
-          }),
-        );
+      case EDIT_GAS_MODES.CANCEL:
+        dispatch(createCancelTransaction(transaction.id, newGasSettings));
         break;
-      case EDIT_GAS_MODE.SPEED_UP:
-        dispatch(
-          createSpeedUpTransaction(transaction.id, {
-            /** new gas settings */
-          }),
-        );
+      case EDIT_GAS_MODES.SPEED_UP:
+        dispatch(createSpeedUpTransaction(transaction.id, newGasSettings));
         break;
-      case EDIT_GAS_MODE.MODIFY_IN_PLACE:
+      case EDIT_GAS_MODES.MODIFY_IN_PLACE:
         dispatch(
           updateTransaction({
             ...transaction,
-            txParams: { ...transaction.txParams /** ...newGasSettings */ },
+            txParams: {
+              ...transaction.txParams,
+              ...newGasSettings,
+            },
           }),
         );
         break;
@@ -83,11 +134,29 @@ export default function EditGasPopover({
     }
 
     closePopover();
-  }, [transaction, mode, dispatch, closePopover]);
+  }, [
+    transaction,
+    mode,
+    dispatch,
+    closePopover,
+    gasLimit,
+    gasPrice,
+    maxFeePerGas,
+    maxPriorityFeePerGas,
+    gasEstimateType,
+  ]);
+
+  let title = t('editGasTitle');
+  if (popoverTitle) {
+    title = popoverTitle;
+  } else if (showEducationContent) {
+    title = t('editGasEducationModalTitle');
+  } else if (mode === EDIT_GAS_MODES.SPEED_UP) {
+    title = t('speedUpPopoverTitle');
+  } else if (mode === EDIT_GAS_MODES.CANCEL) {
+    title = t('cancelPopoverTitle');
+  }
 
-  const title = showEducationContent
-    ? t('editGasEducationModalTitle')
-    : popoverTitle || t('editGasTitle');
   const footerButtonText = confirmButtonText || t('save');
 
   return (
@@ -99,7 +168,11 @@ export default function EditGasPopover({
       }
       footer={
         <>
-          <Button type="primary" onClick={onSubmit}>
+          <Button
+            type="primary"
+            onClick={onSubmit}
+            disabled={isMaxFeeError || isMaxPriorityFeeError || isGasTooLow}
+          >
             {footerButtonText}
           </Button>
         </>
@@ -110,8 +183,38 @@ export default function EditGasPopover({
           <EditGasDisplayEducation />
         ) : (
           <EditGasDisplay
-            {...editGasDisplayProps}
+            showEducationButton={showEducationButton}
+            warning={warning}
+            showAdvancedForm={showAdvancedForm}
+            setShowAdvancedForm={setShowAdvancedForm}
+            dappSuggestedGasFeeAcknowledged={dappSuggestedGasFeeAcknowledged}
+            setDappSuggestedGasFeeAcknowledged={
+              setDappSuggestedGasFeeAcknowledged
+            }
+            maxPriorityFeePerGas={maxPriorityFeePerGas}
+            setMaxPriorityFeePerGas={setMaxPriorityFeePerGas}
+            maxPriorityFeePerGasFiat={maxPriorityFeePerGasFiat}
+            maxFeePerGas={maxFeePerGas}
+            setMaxFeePerGas={setMaxFeePerGas}
+            maxFeePerGasFiat={maxFeePerGasFiat}
+            estimatedMaximumNative={estimatedMaximumNative}
+            isGasEstimatesLoading={isGasEstimatesLoading}
+            gasFeeEstimates={gasFeeEstimates}
+            gasEstimateType={gasEstimateType}
+            gasPrice={gasPrice}
+            setGasPrice={setGasPrice}
+            gasLimit={gasLimit}
+            setGasLimit={setGasLimit}
+            estimateToUse={estimateToUse}
+            setEstimateToUse={setEstimateToUse}
+            estimatedMinimumFiat={estimatedMinimumFiat}
+            estimatedMaximumFiat={estimatedMaximumFiat}
+            isMaxFeeError={isMaxFeeError}
+            isMaxPriorityFeeError={isMaxPriorityFeeError}
+            isGasTooLow={isGasTooLow}
             onEducationClick={() => setShowEducationContent(true)}
+            mode={mode}
+            {...editGasDisplayProps}
           />
         )}
       </div>
@@ -123,15 +226,8 @@ EditGasPopover.propTypes = {
   popoverTitle: PropTypes.string,
   editGasDisplayProps: PropTypes.object,
   confirmButtonText: PropTypes.string,
-  showEducationButton: PropTypes.bool,
   onClose: PropTypes.func,
   transaction: PropTypes.object,
-  mode: PropTypes.oneOf(Object.values(EDIT_GAS_MODE)),
-};
-
-EditGasPopover.defaultProps = {
-  popoverTitle: '',
-  editGasDisplayProps: {},
-  confirmButtonText: '',
-  showEducationButton: false,
+  mode: PropTypes.oneOf(Object.values(EDIT_GAS_MODES)),
+  defaultEstimateToUse: PropTypes.string,
 };
diff --git a/ui/components/app/transaction-list-item/transaction-list-item.component.js b/ui/components/app/transaction-list-item/transaction-list-item.component.js
index 01cd5cbb7..5065ae957 100644
--- a/ui/components/app/transaction-list-item/transaction-list-item.component.js
+++ b/ui/components/app/transaction-list-item/transaction-list-item.component.js
@@ -18,8 +18,8 @@ import {
   TRANSACTION_GROUP_CATEGORIES,
   TRANSACTION_STATUSES,
 } from '../../../../shared/constants/transaction';
+import { EDIT_GAS_MODES } from '../../../../shared/constants/gas';
 import EditGasPopover from '../edit-gas-popover';
-import { EDIT_GAS_MODE } from '../edit-gas-popover/edit-gas-popover.component';
 
 export default function TransactionListItem({
   transactionGroup,
@@ -212,17 +212,15 @@ export default function TransactionListItem({
       )}
       {process.env.SHOW_EIP_1559_UI && showRetryEditGasPopover && (
         <EditGasPopover
-          popoverTitle={t('cancelPopoverTitle')}
           onClose={closeRetryEditGasPopover}
-          mode={EDIT_GAS_MODE.SPEED_UP}
+          mode={EDIT_GAS_MODES.SPEED_UP}
           transaction={transactionGroup.primaryTransaction}
         />
       )}
       {process.env.SHOW_EIP_1559_UI && showCancelEditGasPopover && (
         <EditGasPopover
-          popoverTitle={t('speedUpPopoverTitle')}
           onClose={closeCancelEditGasPopover}
-          mode={EDIT_GAS_MODE.CANCEL}
+          mode={EDIT_GAS_MODES.CANCEL}
           transaction={transactionGroup.primaryTransaction}
         />
       )}

From c1064e0c50c36cfb1ec1f58ccc8e23096d51dd88 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Thu, 15 Jul 2021 12:22:55 -0500
Subject: [PATCH 122/141] EIP-1559 - Only show education link if on
 1559-compatible network (#11535)

---
 .../app/edit-gas-popover/edit-gas-popover.component.js         | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/ui/components/app/edit-gas-popover/edit-gas-popover.component.js b/ui/components/app/edit-gas-popover/edit-gas-popover.component.js
index 59f9ebd78..cacd24f32 100644
--- a/ui/components/app/edit-gas-popover/edit-gas-popover.component.js
+++ b/ui/components/app/edit-gas-popover/edit-gas-popover.component.js
@@ -41,7 +41,8 @@ export default function EditGasPopover({
   const dispatch = useDispatch();
   const showSidebar = useSelector((state) => state.appState.sidebar.isOpen);
 
-  const showEducationButton = mode === EDIT_GAS_MODES.MODIFY_IN_PLACE;
+  const showEducationButton =
+    mode === EDIT_GAS_MODES.MODIFY_IN_PLACE && process.env.SHOW_EIP_1559_UI;
   const [showEducationContent, setShowEducationContent] = useState(false);
 
   const [warning] = useState(null);

From 89e2da71cf32fc92e79a00f0ce123df4c2f81374 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Thu, 15 Jul 2021 12:23:05 -0500
Subject: [PATCH 123/141] EIP-1559 - Update the title fo the Edit gas popover
 (#11533)

---
 app/_locales/en/messages.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 0d6867c03..1361a9326 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -666,7 +666,7 @@
     "message": "This network uses an older version of gas pricing which requires a “Gas price” field. Gas price is the maximum amount you are willing to pay per unit of gas."
   },
   "editGasTitle": {
-    "message": "Edit gas fee"
+    "message": "Edit priority"
   },
   "editGasTooLow": {
     "message": "Unknown processing time"

From 1f70023ce16d3efef6f92f61d6eff8363d0db74d Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Thu, 15 Jul 2021 12:23:15 -0500
Subject: [PATCH 124/141] EIP-1559 - Update text for editing gas fee suggested
 by a dapp (#11532)

---
 app/_locales/en/messages.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 1361a9326..84a85f30c 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -863,10 +863,10 @@
     "message": "Function Type"
   },
   "gasDisplayAcknowledgeDappButtonText": {
-    "message": "Edit app suggestion"
+    "message": "Edit suggested gas fee"
   },
   "gasDisplayDappWarning": {
-    "message": "This gas fee has been suggested by the app $1. It’s using legacy gas estimation which may be inaccurate. However, editing this gas fee may cause unintended consequences. Please reach out to the app team if you have questions.",
+    "message": "This gas fee has been suggested by $1. It’s using legacy gas estimation which may be inaccurate. However, editing this gas fee may cause a problem with your transaction. Please reach out to $1 if you have questions.",
     "description": "$1 represents the Dapp's origin"
   },
   "gasFee": {

From 1e1530e8e97445a281edceea4267e4416e472d5d Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Thu, 15 Jul 2021 12:23:28 -0500
Subject: [PATCH 125/141] EIP-1559 - Update speed up tooltip text (#11530)

---
 app/_locales/en/messages.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 84a85f30c..3ef3844ff 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -1914,7 +1914,7 @@
     "message": "Speed up this cancellation"
   },
   "speedUpExplanation": {
-    "message": "We’ve restimated the gas fee based on current network conditions and have increased it by at least 10% (required by the network)."
+    "message": "We’ve updated the gas fee based on current network conditions and have increased it by at least 10% (required by the network)."
   },
   "speedUpPopoverTitle": {
     "message": "Speed up transaction"

From c241d3150c747cebf78fdbf26b009086b60b7d72 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Thu, 15 Jul 2021 12:23:37 -0500
Subject: [PATCH 126/141] EIP-1559 - Provide tooltip text for all advanced gas
 controls (#11529)

---
 app/_locales/en/messages.json                            | 9 +++++++++
 .../advanced-gas-controls.component.js                   | 6 +++---
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 3ef3844ff..26028cf51 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -650,15 +650,24 @@
   "editGasHigh": {
     "message": "High"
   },
+  "editGasLimitTooltip": {
+    "message": "Gas limit is the maximum units of gas you are willing to use. Units of gas are a multiplier to “Max priority fee” and “Max fee”."
+  },
   "editGasLow": {
     "message": "Low"
   },
   "editGasMaxFeeLow": {
     "message": "Max fee too low for network conditions"
   },
+  "editGasMaxFeeTooltip": {
+    "message": "The max fee is the most you’ll pay (base fee + priority fee)."
+  },
   "editGasMaxPriorityFeeLow": {
     "message": "Max priority fee too low for network conditions"
   },
+  "editGasMaxPriorityFeeTooltip": {
+    "message": "Max priority fee (aka “miner tip”) goes directly to miners and incentivizes them to prioritize your transaction. You’ll most often pay your max setting"
+  },
   "editGasMedium": {
     "message": "Medium"
   },
diff --git a/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js b/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js
index a8a909eeb..54aa63bdd 100644
--- a/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js
+++ b/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js
@@ -64,7 +64,7 @@ export default function AdvancedGasControls({
       <FormField
         titleText={t('gasLimit')}
         onChange={setGasLimit}
-        tooltipText=""
+        tooltipText={t('editGasLimitTooltip')}
         value={gasLimit}
         numeric
         autoFocus
@@ -74,7 +74,7 @@ export default function AdvancedGasControls({
           <FormField
             titleText={t('maxPriorityFee')}
             titleUnit="(GWEI)"
-            tooltipText=""
+            tooltipText={t('editGasMaxPriorityFeeTooltip')}
             onChange={(value) => {
               setMaxPriorityFee(value);
               onManualChange?.();
@@ -111,7 +111,7 @@ export default function AdvancedGasControls({
           <FormField
             titleText={t('maxFee')}
             titleUnit="(GWEI)"
-            tooltipText=""
+            tooltipText={t('editGasMaxFeeTooltip')}
             onChange={(value) => {
               setMaxFee(value);
               onManualChange?.();

From 166561737819f77d1df3f70345e53c1a7be6653d Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Thu, 15 Jul 2021 12:23:54 -0500
Subject: [PATCH 127/141] Create different label for Gas Price with GWEI
 included (#11526)

---
 app/_locales/en/messages.json                                  | 3 +++
 .../advanced-gas-controls/advanced-gas-controls.component.js   | 2 +-
 .../transaction-breakdown/transaction-breakdown.component.js   | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 26028cf51..c66932f8b 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -103,6 +103,9 @@
   "advanced": {
     "message": "Advanced"
   },
+  "advancedGasPriceTitle": {
+    "message": "Gas price"
+  },
   "advancedOptions": {
     "message": "Advanced Options"
   },
diff --git a/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js b/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js
index 54aa63bdd..b97af9ee8 100644
--- a/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js
+++ b/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js
@@ -149,7 +149,7 @@ export default function AdvancedGasControls({
       ) : (
         <>
           <FormField
-            titleText={t('gasPrice')}
+            titleText={t('advancedGasPriceTitle')}
             titleUnit="(GWEI)"
             onChange={(value) => {
               setGasPrice(value);
diff --git a/ui/components/app/transaction-breakdown/transaction-breakdown.component.js b/ui/components/app/transaction-breakdown/transaction-breakdown.component.js
index 0daf6add0..3ebd3d20c 100644
--- a/ui/components/app/transaction-breakdown/transaction-breakdown.component.js
+++ b/ui/components/app/transaction-breakdown/transaction-breakdown.component.js
@@ -124,7 +124,7 @@ export default class TransactionBreakdown extends PureComponent {
           </TransactionBreakdownRow>
         )}
         {!process.env.SHOW_EIP_1559_UI && (
-          <TransactionBreakdownRow title={t('gasPrice')}>
+          <TransactionBreakdownRow title={t('advancedGasPriceTitle')}>
             {typeof gasPrice === 'undefined' ? (
               '?'
             ) : (

From 8e5ebfb05a6a63659cc30f23abd1cf5af67bde01 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Thu, 15 Jul 2021 12:24:03 -0500
Subject: [PATCH 128/141] EIP-1559 - Disable gas form submission if estimates
 are loading state (#11525)

---
 .../app/edit-gas-popover/edit-gas-popover.component.js     | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/ui/components/app/edit-gas-popover/edit-gas-popover.component.js b/ui/components/app/edit-gas-popover/edit-gas-popover.component.js
index cacd24f32..be3dbc8d5 100644
--- a/ui/components/app/edit-gas-popover/edit-gas-popover.component.js
+++ b/ui/components/app/edit-gas-popover/edit-gas-popover.component.js
@@ -172,7 +172,12 @@ export default function EditGasPopover({
           <Button
             type="primary"
             onClick={onSubmit}
-            disabled={isMaxFeeError || isMaxPriorityFeeError || isGasTooLow}
+            disabled={
+              isMaxFeeError ||
+              isMaxPriorityFeeError ||
+              isGasTooLow ||
+              isGasEstimatesLoading
+            }
           >
             {footerButtonText}
           </Button>

From 4aab4887d5003f30cdcdd94601ddd5e89cc1ad50 Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Thu, 15 Jul 2021 12:31:51 -0500
Subject: [PATCH 129/141] add MODIFY_IN_PLACE as mode prop on edit-gas-popover
 (#11527)

This is necessary for the submit method to call the right background process
---
 .../confirm-page-container/confirm-page-container.component.js  | 2 ++
 1 file changed, 2 insertions(+)

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 8c81e5b39..9cc2e4286 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
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import SenderToRecipient from '../../ui/sender-to-recipient';
 import { PageContainerFooter } from '../../ui/page-container';
 import EditGasPopover from '../edit-gas-popover';
+import { EDIT_GAS_MODES } from '../../../../shared/constants/gas';
 import {
   ConfirmPageContainerHeader,
   ConfirmPageContainerContent,
@@ -193,6 +194,7 @@ export default class ConfirmPageContainer extends Component {
         )}
         {editingGas && (
           <EditGasPopover
+            mode={EDIT_GAS_MODES.MODIFY_IN_PLACE}
             onClose={handleCloseEditGas}
             transaction={currentTransaction}
           />

From 9f4820ee987ac6d2af382f1a6672dad97bac8d47 Mon Sep 17 00:00:00 2001
From: kumavis <kumavis@users.noreply.github.com>
Date: Thu, 15 Jul 2021 10:59:34 -0700
Subject: [PATCH 130/141] Build - refactor for bundle factoring and swappable
 runtime (#11080)

* wip

* build - breakout sentry-install bundle

* deps - move new build sys deps to published versions

* chore: lint fix

* clean - remove unused file

* clean - remove unsused package script

* lavamoat - update build system policy

* build - render html to all platforms

* development - improve sourcemap debugger output

* deps - update lavapack

* lint - fix

* deps - update lavapack for bugfix

* deps - update lavapack for bugfix

* deps - bump lavapack for line ending normalization

* sourcemap explorer - disable boundary validation

* ci - reset normal ci flow

* build - re-enable minification on prod

* build - remove noisy log about html dest

* build - update terser and remove gulp wrapper for sourcemap fix

* Revert "sourcemap explorer - disable boundary validation"

This reverts commit 94112209ed880a6ebf4ee2ded411e59db6908162.

* build - reenable react-devtools in dev mode

* wip

* build - breakout sentry-install bundle

* deps - move new build sys deps to published versions

* chore: lint fix

* clean - remove unused file

* clean - remove unsused package script

* lavamoat - update build system policy

* build - render html to all platforms

* development - improve sourcemap debugger output

* deps - update lavapack

* lint - fix

* deps - update lavapack for bugfix

* deps - update lavapack for bugfix

* deps - bump lavapack for line ending normalization

* sourcemap explorer - disable boundary validation

* ci - reset normal ci flow

* build - re-enable minification on prod

* build - remove noisy log about html dest

* build - update terser and remove gulp wrapper for sourcemap fix

* Revert "sourcemap explorer - disable boundary validation"

This reverts commit 94112209ed880a6ebf4ee2ded411e59db6908162.

* build - reenable react-devtools in dev mode

* Updating lockfile

* lint fix

* build/dev - patch watchifys incompatible binary stats output

* ui - add comment about conditional import

* build - improve comment

* Update development/stream-flat-map.js

Co-authored-by: Brad Decker <git@braddecker.dev>

* Outputting all bundle file links (metamaskbot)

Co-authored-by: ryanml <ryanlanese@gmail.com>
Co-authored-by: Brad Decker <git@braddecker.dev>
---
 .eslintrc.js                                  |   2 +-
 app/background.html                           |  12 +-
 app/home.html                                 |  12 +-
 app/manifest/_base.json                       |   4 +-
 app/notification.html                         |  12 +-
 app/phishing.html                             |   4 +-
 app/popup.html                                |  12 +-
 .../{runLockdown.js => lockdown-run.js}       |   4 +-
 .../{initSentry.js => sentry-install.js}      |   0
 app/scripts/ui.js                             |   3 +
 development/build/scripts.js                  | 355 +++++++++++-------
 development/build/static.js                   |  17 +-
 development/build/task.js                     |   5 +-
 development/metamaskbot-build-announce.js     |  23 +-
 development/require-react-devtools.js         |   1 -
 development/sourcemap-validator.js            |  65 ++--
 development/stream-flat-map.js                |  43 +++
 lavamoat/node/policy.json                     | 282 +++-----------
 package.json                                  |  16 +-
 patches/squirrelly+8.0.8.patch                |  13 +
 patches/watchify+3.11.1.patch                 |  38 ++
 test/unit-global/frozenPromise.test.js        |   2 +-
 yarn.lock                                     | 133 ++++++-
 23 files changed, 586 insertions(+), 472 deletions(-)
 rename app/scripts/{runLockdown.js => lockdown-run.js} (83%)
 rename app/scripts/{initSentry.js => sentry-install.js} (100%)
 delete mode 100644 development/require-react-devtools.js
 create mode 100644 development/stream-flat-map.js
 create mode 100644 patches/squirrelly+8.0.8.patch
 create mode 100644 patches/watchify+3.11.1.patch

diff --git a/.eslintrc.js b/.eslintrc.js
index 56c2d4b86..d3763fdef 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -154,7 +154,7 @@ module.exports = {
         'babel.config.js',
         'nyc.config.js',
         'stylelint.config.js',
-        'app/scripts/runLockdown.js',
+        'app/scripts/lockdown-run.js',
         'development/**/*.js',
         'test/e2e/**/*.js',
         'test/lib/wait-until-called.js',
diff --git a/app/background.html b/app/background.html
index 290576939..2faa31411 100644
--- a/app/background.html
+++ b/app/background.html
@@ -5,11 +5,13 @@
   </head>
   <body>
     <script src="./globalthis.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./initSentry.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./lockdown.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./runLockdown.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./bg-libs.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./background.js" type="text/javascript" charset="utf-8"></script>
+    <script src="./sentry-install.js" type="text/javascript" charset="utf-8"></script>
+    <script src="./lockdown-install.js" type="text/javascript" charset="utf-8"></script>
+    <script src="./lockdown-run.js" type="text/javascript" charset="utf-8"></script>
+    <script src="./runtime-cjs.js" type="text/javascript" charset="utf-8"></script>
+    {{@each(it.jsBundles) => val}}
+    <script src="{{val}}" type="text/javascript" charset="utf-8"></script>
+    {{/each}}
     <script src="./chromereload.js" type="text/javascript" charset="utf-8"></script>
   </body>
 </html>
diff --git a/app/home.html b/app/home.html
index d952983c9..5350b31dd 100644
--- a/app/home.html
+++ b/app/home.html
@@ -11,10 +11,12 @@
     <div id="app-content"></div>
     <div id="popover-content"></div>
     <script src="./globalthis.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./initSentry.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./lockdown.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./runLockdown.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./ui-libs.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./ui.js" type="text/javascript" charset="utf-8"></script>
+    <script src="./sentry-install.js" type="text/javascript" charset="utf-8"></script>
+    <script src="./lockdown-install.js" type="text/javascript" charset="utf-8"></script>
+    <script src="./lockdown-run.js" type="text/javascript" charset="utf-8"></script>
+    <script src="./runtime-cjs.js" type="text/javascript" charset="utf-8"></script>
+    {{@each(it.jsBundles) => val}}
+    <script src="{{val}}" type="text/javascript" charset="utf-8"></script>
+    {{/each}}
   </body>
 </html>
diff --git a/app/manifest/_base.json b/app/manifest/_base.json
index 437ef1d2e..6c328d0c6 100644
--- a/app/manifest/_base.json
+++ b/app/manifest/_base.json
@@ -33,8 +33,8 @@
       "js": [
         "disable-console.js",
         "globalthis.js",
-        "lockdown.js",
-        "runLockdown.js",
+        "lockdown-install.js",
+        "lockdown-run.js",
         "contentscript.js"
       ],
       "run_at": "document_start",
diff --git a/app/notification.html b/app/notification.html
index 8d82c41b2..55b98c960 100644
--- a/app/notification.html
+++ b/app/notification.html
@@ -34,10 +34,12 @@
     </div>
     <div id="popover-content"></div>
     <script src="./globalthis.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./initSentry.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./lockdown.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./runLockdown.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./ui-libs.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./ui.js" type="text/javascript" charset="utf-8"></script>
+    <script src="./sentry-install.js" type="text/javascript" charset="utf-8"></script>
+    <script src="./lockdown-install.js" type="text/javascript" charset="utf-8"></script>
+    <script src="./lockdown-run.js" type="text/javascript" charset="utf-8"></script>
+    <script src="./runtime-cjs.js" type="text/javascript" charset="utf-8"></script>
+    {{@each(it.jsBundles) => val}}
+    <script src="{{val}}" type="text/javascript" charset="utf-8"></script>
+    {{/each}}
   </body>
 </html>
diff --git a/app/phishing.html b/app/phishing.html
index 7bbc11dab..5460447b9 100644
--- a/app/phishing.html
+++ b/app/phishing.html
@@ -3,8 +3,8 @@
   <head>
     <title>Ethereum Phishing Detection - MetaMask</title>
     <script src="./globalthis.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./lockdown.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./runLockdown.js" type="text/javascript" charset="utf-8"></script>
+    <script src="./lockdown-install.js" type="text/javascript" charset="utf-8"></script>
+    <script src="./lockdown-run.js" type="text/javascript" charset="utf-8"></script>
     <script src="./phishing-detect.js"></script>
     <link rel="stylesheet" type="text/css" href="./index.css" title="ltr">
     <link rel="stylesheet" type="text/css" href="./index-rtl.css" title="rtl" disabled>
diff --git a/app/popup.html b/app/popup.html
index d16257992..c94b82df8 100644
--- a/app/popup.html
+++ b/app/popup.html
@@ -11,10 +11,12 @@
     <div id="app-content"></div>
     <div id="popover-content"></div>
     <script src="./globalthis.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./initSentry.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./lockdown.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./runLockdown.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./ui-libs.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./ui.js" type="text/javascript" charset="utf-8"></script>
+    <script src="./sentry-install.js" type="text/javascript" charset="utf-8"></script>
+    <script src="./lockdown-install.js" type="text/javascript" charset="utf-8"></script>
+    <script src="./lockdown-run.js" type="text/javascript" charset="utf-8"></script>
+    <script src="./runtime-cjs.js" type="text/javascript" charset="utf-8"></script>
+    {{@each(it.jsBundles) => val}}
+    <script src="{{val}}" type="text/javascript" charset="utf-8"></script>
+    {{/each}}
   </body>
 </html>
diff --git a/app/scripts/runLockdown.js b/app/scripts/lockdown-run.js
similarity index 83%
rename from app/scripts/runLockdown.js
rename to app/scripts/lockdown-run.js
index 2918368e7..f0682654e 100644
--- a/app/scripts/runLockdown.js
+++ b/app/scripts/lockdown-run.js
@@ -14,7 +14,7 @@ try {
   // caught and logged here so that the contentscript still gets injected.
   // This affects Firefox v56 and Waterfox Classic
   console.error('Lockdown failed:', error);
-  if (window.sentry && window.sentry.captureException) {
-    window.sentry.captureException(error);
+  if (globalThis.sentry && globalThis.sentry.captureException) {
+    globalThis.sentry.captureException(error);
   }
 }
diff --git a/app/scripts/initSentry.js b/app/scripts/sentry-install.js
similarity index 100%
rename from app/scripts/initSentry.js
rename to app/scripts/sentry-install.js
diff --git a/app/scripts/ui.js b/app/scripts/ui.js
index b00c3d6da..ee4539370 100644
--- a/app/scripts/ui.js
+++ b/app/scripts/ui.js
@@ -2,6 +2,9 @@
 import 'abortcontroller-polyfill/dist/polyfill-patch-fetch';
 import '@formatjs/intl-relativetimeformat/polyfill';
 
+// dev only, "react-devtools" import is skipped in prod builds
+import 'react-devtools';
+
 import PortStream from 'extension-port-stream';
 import extension from 'extensionizer';
 
diff --git a/development/build/scripts.js b/development/build/scripts.js
index 50fa4f8db..d0007ec74 100644
--- a/development/build/scripts.js
+++ b/development/build/scripts.js
@@ -1,19 +1,29 @@
+const { callbackify } = require('util');
+const path = require('path');
+const { writeFileSync, readFileSync } = require('fs');
 const EventEmitter = require('events');
 const gulp = require('gulp');
 const watch = require('gulp-watch');
 const source = require('vinyl-source-stream');
 const buffer = require('vinyl-buffer');
 const log = require('fancy-log');
-const watchify = require('watchify');
 const browserify = require('browserify');
-const envify = require('loose-envify/custom');
-const sourcemaps = require('gulp-sourcemaps');
-const terser = require('gulp-terser-js');
+const watchify = require('watchify');
 const babelify = require('babelify');
 const brfs = require('brfs');
+const envify = require('loose-envify/custom');
+const sourcemaps = require('gulp-sourcemaps');
+const applySourceMap = require('vinyl-sourcemaps-apply');
 const pify = require('pify');
+const through = require('through2');
 const endOfStream = pify(require('end-of-stream'));
 const labeledStreamSplicer = require('labeled-stream-splicer').obj;
+const wrapInStream = require('pumpify').obj;
+const Sqrl = require('squirrelly');
+const lavaPack = require('@lavamoat/lavapack');
+const terser = require('terser');
+
+const bifyModuleGroups = require('bify-module-groups');
 
 const metamaskrc = require('rc')('metamask', {
   INFURA_PROJECT_ID: process.env.INFURA_PROJECT_ID,
@@ -25,9 +35,8 @@ const metamaskrc = require('rc')('metamask', {
     'https://f59f3dd640d2429d9d0e2445a87ea8e1@sentry.io/273496',
 });
 
-const { version } = require('../../package.json');
-
-const packageJSON = require('../../package.json');
+const { streamFlatMap } = require('../stream-flat-map.js');
+const baseManifest = require('../../app/manifest/_base.json');
 const {
   createTask,
   composeParallel,
@@ -37,17 +46,6 @@ const {
 
 module.exports = createScriptTasks;
 
-const dependencies = Object.keys(
-  (packageJSON && packageJSON.dependencies) || {},
-);
-const materialUIDependencies = ['@material-ui/core'];
-const reactDepenendencies = dependencies.filter((dep) => dep.match(/react/u));
-
-const externalDependenciesMap = {
-  background: ['3box', '@ethereumjs/common', 'unicode-confusables'],
-  ui: [...materialUIDependencies, ...reactDepenendencies],
-};
-
 function createScriptTasks({ browserPlatforms, livereload }) {
   // internal tasks
   const core = {
@@ -69,72 +67,43 @@ function createScriptTasks({ browserPlatforms, livereload }) {
     // production
     prod: createTasksForBuildJsExtension({ taskPrefix: 'scripts:core:prod' }),
   };
-  const deps = {
-    background: createTasksForBuildJsDeps({
-      label: 'bg-libs',
-      key: 'background',
-    }),
-    ui: createTasksForBuildJsDeps({ label: 'ui-libs', key: 'ui' }),
-  };
 
   // high level tasks
 
-  const prod = composeParallel(deps.background, deps.ui, core.prod);
+  const { dev, test, testDev, prod } = core;
+  return { dev, test, testDev, prod };
 
-  const { dev, testDev } = core;
-
-  const test = composeParallel(deps.background, deps.ui, core.test);
-
-  return { prod, dev, testDev, test };
-
-  function createTasksForBuildJsDeps({ key, label }) {
-    return createTask(
-      `scripts:deps:${key}`,
-      createNormalBundle({
-        label,
-        destFilepath: `${label}.js`,
-        modulesToExpose: externalDependenciesMap[key],
-        devMode: false,
+  function createTasksForBuildJsExtension({ taskPrefix, devMode, testing }) {
+    const standardEntryPoints = ['background', 'ui', 'phishing-detect'];
+    const standardSubtask = createTask(
+      `${taskPrefix}:standardEntryPoints`,
+      createFactoredBuild({
+        entryFiles: standardEntryPoints.map(
+          (label) => `./app/scripts/${label}.js`,
+        ),
+        devMode,
+        testing,
         browserPlatforms,
       }),
     );
-  }
-
-  function createTasksForBuildJsExtension({ taskPrefix, devMode, testing }) {
-    const standardBundles = [
-      'background',
-      'ui',
-      'phishing-detect',
-      'initSentry',
-    ];
-
-    const standardSubtasks = standardBundles.map((label) => {
-      let extraEntries;
-      if (devMode && label === 'ui') {
-        extraEntries = ['./development/require-react-devtools.js'];
-      }
-      return createTask(
-        `${taskPrefix}:${label}`,
-        createBundleTaskForBuildJsExtensionNormal({
-          label,
-          devMode,
-          testing,
-          extraEntries,
-        }),
-      );
-    });
 
     // inpage must be built before contentscript
     // because inpage bundle result is included inside contentscript
     const contentscriptSubtask = createTask(
       `${taskPrefix}:contentscript`,
-      createTaskForBuildJsExtensionContentscript({ devMode, testing }),
+      createTaskForBundleContentscript({ devMode, testing }),
     );
 
     // this can run whenever
     const disableConsoleSubtask = createTask(
       `${taskPrefix}:disable-console`,
-      createTaskForBuildJsExtensionDisableConsole({ devMode }),
+      createTaskForBundleDisableConsole({ devMode }),
+    );
+
+    // this can run whenever
+    const installSentrySubtask = createTask(
+      `${taskPrefix}:sentry`,
+      createTaskForBundleSentry({ devMode }),
     );
 
     // task for initiating browser livereload
@@ -155,36 +124,16 @@ function createScriptTasks({ browserPlatforms, livereload }) {
 
     // make each bundle run in a separate process
     const allSubtasks = [
-      ...standardSubtasks,
+      standardSubtask,
       contentscriptSubtask,
       disableConsoleSubtask,
+      installSentrySubtask,
     ].map((subtask) => runInChildProcess(subtask));
-    // const allSubtasks = [...standardSubtasks, contentscriptSubtask].map(subtask => (subtask))
     // make a parent task that runs each task in a child thread
     return composeParallel(initiateLiveReload, ...allSubtasks);
   }
 
-  function createBundleTaskForBuildJsExtensionNormal({
-    label,
-    devMode,
-    testing,
-    extraEntries,
-  }) {
-    return createNormalBundle({
-      label,
-      entryFilepath: `./app/scripts/${label}.js`,
-      destFilepath: `${label}.js`,
-      extraEntries,
-      externalDependencies: devMode
-        ? undefined
-        : externalDependenciesMap[label],
-      devMode,
-      testing,
-      browserPlatforms,
-    });
-  }
-
-  function createTaskForBuildJsExtensionDisableConsole({ devMode }) {
+  function createTaskForBundleDisableConsole({ devMode }) {
     const label = 'disable-console';
     return createNormalBundle({
       label,
@@ -195,7 +144,19 @@ function createScriptTasks({ browserPlatforms, livereload }) {
     });
   }
 
-  function createTaskForBuildJsExtensionContentscript({ devMode, testing }) {
+  function createTaskForBundleSentry({ devMode }) {
+    const label = 'sentry-install';
+    return createNormalBundle({
+      label,
+      entryFilepath: `./app/scripts/${label}.js`,
+      destFilepath: `${label}.js`,
+      devMode,
+      browserPlatforms,
+    });
+  }
+
+  // the "contentscript" bundle contains the "inpage" bundle
+  function createTaskForBundleContentscript({ devMode, testing }) {
     const inpage = 'inpage';
     const contentscript = 'contentscript';
     return composeSeries(
@@ -203,9 +164,6 @@ function createScriptTasks({ browserPlatforms, livereload }) {
         label: inpage,
         entryFilepath: `./app/scripts/${inpage}.js`,
         destFilepath: `${inpage}.js`,
-        externalDependencies: devMode
-          ? undefined
-          : externalDependenciesMap[inpage],
         devMode,
         testing,
         browserPlatforms,
@@ -214,9 +172,6 @@ function createScriptTasks({ browserPlatforms, livereload }) {
         label: contentscript,
         entryFilepath: `./app/scripts/${contentscript}.js`,
         destFilepath: `${contentscript}.js`,
-        externalDependencies: devMode
-          ? undefined
-          : externalDependenciesMap[contentscript],
         devMode,
         testing,
         browserPlatforms,
@@ -225,12 +180,8 @@ function createScriptTasks({ browserPlatforms, livereload }) {
   }
 }
 
-function createNormalBundle({
-  destFilepath,
-  entryFilepath,
-  extraEntries = [],
-  modulesToExpose,
-  externalDependencies,
+function createFactoredBuild({
+  entryFiles,
   devMode,
   testing,
   browserPlatforms,
@@ -240,10 +191,126 @@ function createNormalBundle({
     const buildConfiguration = createBuildConfiguration();
     const { bundlerOpts, events } = buildConfiguration;
 
+    // devMode options
+    const reloadOnChange = Boolean(devMode);
+    const minify = Boolean(devMode) === false;
+
     const envVars = getEnvironmentVariables({ devMode, testing });
     setupBundlerDefaults(buildConfiguration, {
       devMode,
       envVars,
+      reloadOnChange,
+      minify,
+    });
+
+    // set bundle entries
+    bundlerOpts.entries = [...entryFiles];
+
+    // setup bundle factoring with bify-module-groups plugin
+    Object.assign(bundlerOpts, bifyModuleGroups.plugin.args);
+    bundlerOpts.plugin = [...bundlerOpts.plugin, [bifyModuleGroups.plugin]];
+
+    // instrument pipeline
+    let sizeGroupMap;
+    events.on('configurePipeline', ({ pipeline }) => {
+      // to be populated by the group-by-size transform
+      sizeGroupMap = new Map();
+      pipeline.get('groups').unshift(
+        // factor modules
+        bifyModuleGroups.groupByFactor({
+          entryFileToLabel(filepath) {
+            return path.parse(filepath).name;
+          },
+        }),
+        // cap files at 2 mb
+        bifyModuleGroups.groupBySize({
+          sizeLimit: 2e6,
+          groupingMap: sizeGroupMap,
+        }),
+      );
+      pipeline.get('vinyl').unshift(
+        // convert each module group into a stream with a single vinyl file
+        streamFlatMap((moduleGroup) => {
+          const filename = `${moduleGroup.label}.js`;
+          const childStream = wrapInStream(
+            moduleGroup.stream,
+            lavaPack({ raw: true, hasExports: true, includePrelude: false }),
+            source(filename),
+          );
+          return childStream;
+        }),
+        buffer(),
+      );
+      // setup bundle destination
+      browserPlatforms.forEach((platform) => {
+        const dest = `./dist/${platform}/`;
+        pipeline.get('dest').push(gulp.dest(dest));
+      });
+    });
+
+    // wait for bundle completion for postprocessing
+    events.on('bundleDone', () => {
+      const commonSet = sizeGroupMap.get('common');
+      // create entry points for each file
+      for (const [groupLabel, groupSet] of sizeGroupMap.entries()) {
+        // skip "common" group, they are added tp all other groups
+        if (groupSet === commonSet) continue;
+
+        switch (groupLabel) {
+          case 'ui': {
+            renderHtmlFile('popup', groupSet, commonSet, browserPlatforms);
+            renderHtmlFile(
+              'notification',
+              groupSet,
+              commonSet,
+              browserPlatforms,
+            );
+            renderHtmlFile('home', groupSet, commonSet, browserPlatforms);
+            break;
+          }
+          case 'phishing-detect': {
+            renderHtmlFile('phishing', groupSet, commonSet, browserPlatforms);
+            break;
+          }
+          case 'background': {
+            renderHtmlFile('background', groupSet, commonSet, browserPlatforms);
+            break;
+          }
+          default: {
+            throw new Error(`buildsys - unknown groupLabel "${groupLabel}"`);
+          }
+        }
+      }
+    });
+
+    await bundleIt(buildConfiguration);
+  };
+}
+
+function createNormalBundle({
+  destFilepath,
+  entryFilepath,
+  extraEntries = [],
+  modulesToExpose,
+  devMode,
+  testing,
+  browserPlatforms,
+}) {
+  return async function () {
+    // create bundler setup and apply defaults
+    const buildConfiguration = createBuildConfiguration();
+    const { bundlerOpts, events } = buildConfiguration;
+
+    // devMode options
+    const reloadOnChange = Boolean(devMode);
+    const minify = Boolean(devMode) === false;
+
+    const envVars = getEnvironmentVariables({ devMode, testing });
+    setupBundlerDefaults(buildConfiguration, {
+      devMode,
+      envVars,
+      reloadOnChange,
+      minify,
     });
 
     // set bundle entries
@@ -256,14 +323,6 @@ function createNormalBundle({
       bundlerOpts.require = bundlerOpts.require.concat(modulesToExpose);
     }
 
-    if (externalDependencies) {
-      // there doesnt seem to be a standard bify option for this
-      // so we'll put it here but manually call it after bundle
-      bundlerOpts.manualExternal = bundlerOpts.manualExternal.concat(
-        externalDependencies,
-      );
-    }
-
     // instrument pipeline
     events.on('configurePipeline', ({ pipeline }) => {
       // convert bundle stream to gulp vinyl stream
@@ -288,17 +347,18 @@ function createBuildConfiguration() {
     transform: [],
     plugin: [],
     require: [],
-    // not a standard bify option
+    // non-standard bify options
     manualExternal: [],
+    manualIgnore: [],
   };
   return { bundlerOpts, events };
 }
 
-function setupBundlerDefaults(buildConfiguration, { devMode, envVars }) {
+function setupBundlerDefaults(
+  buildConfiguration,
+  { devMode, envVars, reloadOnChange, minify },
+) {
   const { bundlerOpts } = buildConfiguration;
-  // devMode options
-  const reloadOnChange = Boolean(devMode);
-  const minify = Boolean(devMode) === false;
 
   Object.assign(bundlerOpts, {
     // source transforms
@@ -314,6 +374,11 @@ function setupBundlerDefaults(buildConfiguration, { devMode, envVars }) {
     debug: true,
   });
 
+  // ensure react-devtools are not included in non-dev builds
+  if (!devMode) {
+    bundlerOpts.manualIgnore.push('react-devtools');
+  }
+
   // inject environment variables via node-style `process.env`
   if (envVars) {
     bundlerOpts.transform.push([envify(envVars), { global: true }]);
@@ -351,17 +416,33 @@ function setupReloadOnChange({ bundlerOpts, events }) {
 }
 
 function setupMinification(buildConfiguration) {
+  const minifyOpts = {
+    mangle: {
+      reserved: ['MetamaskInpageProvider'],
+    },
+  };
   const { events } = buildConfiguration;
   events.on('configurePipeline', ({ pipeline }) => {
     pipeline.get('minify').push(
-      terser({
-        mangle: {
-          reserved: ['MetamaskInpageProvider'],
-        },
-        sourceMap: {
-          content: true,
-        },
-      }),
+      // this is the "gulp-terser-js" wrapper around the latest version of terser
+      through.obj(
+        callbackify(async (file, _enc) => {
+          const input = {
+            [file.sourceMap.file]: file.contents.toString(),
+          };
+          const opts = {
+            sourceMap: {
+              filename: file.sourceMap.file,
+              content: file.sourceMap,
+            },
+            ...minifyOpts,
+          };
+          const res = await terser.minify(input, opts);
+          file.contents = Buffer.from(res.code);
+          applySourceMap(file, res.map);
+          return file;
+        }),
+      ),
     );
   });
 }
@@ -385,18 +466,22 @@ function setupSourcemaps(buildConfiguration, { devMode }) {
 async function bundleIt(buildConfiguration) {
   const { bundlerOpts, events } = buildConfiguration;
   const bundler = browserify(bundlerOpts);
-  // manually apply non-standard option
+  // manually apply non-standard options
   bundler.external(bundlerOpts.manualExternal);
+  bundler.ignore(bundlerOpts.manualIgnore);
   // output build logs to terminal
   bundler.on('log', log);
   // forward update event (used by watchify)
   bundler.on('update', () => performBundle());
+
   await performBundle();
 
   async function performBundle() {
     // this pipeline is created for every bundle
     // the labels are all the steps you can hook into
     const pipeline = labeledStreamSplicer([
+      'groups',
+      [],
       'vinyl',
       [],
       'sourcemaps:init',
@@ -415,7 +500,11 @@ async function bundleIt(buildConfiguration) {
     bundleStream.pipe(pipeline);
     // nothing will consume pipeline, so let it flow
     pipeline.resume();
+
     await endOfStream(pipeline);
+
+    // call the completion event to handle any post-processing
+    events.emit('bundleDone');
   }
 }
 
@@ -427,7 +516,7 @@ function getEnvironmentVariables({ devMode, testing }) {
   return {
     METAMASK_DEBUG: devMode,
     METAMASK_ENVIRONMENT: environment,
-    METAMASK_VERSION: version,
+    METAMASK_VERSION: baseManifest.version,
     NODE_ENV: devMode ? 'development' : 'production',
     IN_TEST: testing ? 'true' : false,
     PUBNUB_SUB_KEY: process.env.PUBNUB_SUB_KEY || '',
@@ -478,6 +567,20 @@ function getEnvironment({ devMode, testing }) {
   return 'other';
 }
 
+function renderHtmlFile(htmlName, groupSet, commonSet, browserPlatforms) {
+  const htmlFilePath = `./app/${htmlName}.html`;
+  const htmlTemplate = readFileSync(htmlFilePath, 'utf8');
+  const jsBundles = [...commonSet.values(), ...groupSet.values()].map(
+    (label) => `./${label}.js`,
+  );
+  const htmlOutput = Sqrl.render(htmlTemplate, { jsBundles });
+  browserPlatforms.forEach((platform) => {
+    const dest = `./dist/${platform}/${htmlName}.html`;
+    // we dont have a way of creating async events atm
+    writeFileSync(dest, htmlOutput);
+  });
+}
+
 function beep() {
   process.stdout.write('\x07');
 }
diff --git a/development/build/static.js b/development/build/static.js
index 636af1106..300134806 100644
--- a/development/build/static.js
+++ b/development/build/static.js
@@ -40,9 +40,8 @@ const copyTargets = [
     dest: ``,
   },
   {
-    src: `./app/`,
-    pattern: `*.html`,
-    dest: ``,
+    src: `./app/loading.html`,
+    dest: `loading.html`,
   },
   {
     src: `./node_modules/globalthis/dist/browser.js`,
@@ -50,12 +49,16 @@ const copyTargets = [
   },
   {
     src: `./node_modules/ses/dist/lockdown.cjs`,
-    dest: `lockdown.js`,
+    dest: `lockdown-install.js`,
   },
   {
-    src: `./app/scripts/`,
-    pattern: `runLockdown.js`,
-    dest: ``,
+    src: `./app/scripts/lockdown-run.js`,
+    dest: `lockdown-run.js`,
+  },
+  {
+    // eslint-disable-next-line node/no-extraneous-require
+    src: require.resolve('@lavamoat/lavapack/src/runtime-cjs.js'),
+    dest: `runtime-cjs.js`,
   },
 ];
 
diff --git a/development/build/task.js b/development/build/task.js
index b6e0f554b..22c70ad4a 100644
--- a/development/build/task.js
+++ b/development/build/task.js
@@ -71,8 +71,9 @@ function runInChildProcess(task) {
     let childProcess;
     // don't run subprocesses in lavamoat for dev mode if main process not run in lavamoat
     if (
-      taskName.includes('scripts:core:dev') &&
-      !process.argv[0].includes('lavamoat')
+      process.env.npm_lifecycle_event === 'build:dev' ||
+      (taskName.includes('scripts:core:dev') &&
+        !process.argv[0].includes('lavamoat'))
     ) {
       childProcess = spawn('yarn', ['build:dev', taskName, '--skip-stats'], {
         env: process.env,
diff --git a/development/metamaskbot-build-announce.js b/development/metamaskbot-build-announce.js
index a1f6e3659..26f2174dc 100755
--- a/development/metamaskbot-build-announce.js
+++ b/development/metamaskbot-build-announce.js
@@ -2,6 +2,7 @@
 const { promises: fs } = require('fs');
 const path = require('path');
 const fetch = require('node-fetch');
+const glob = require('fast-glob');
 const VERSION = require('../dist/chrome/manifest.json').version; // eslint-disable-line import/no-unresolved
 
 start().catch(console.error);
@@ -39,19 +40,15 @@ async function start() {
     .join(', ');
 
   // links to bundle browser builds
-  const bundles = [
-    'background',
-    'ui',
-    'inpage',
-    'contentscript',
-    'ui-libs',
-    'bg-libs',
-    'phishing-detect',
-  ];
-  const bundleLinks = bundles
-    .map((bundle) => {
-      const url = `${BUILD_LINK_BASE}/build-artifacts/source-map-explorer/${bundle}.html`;
-      return `<a href="${url}">${bundle}</a>`;
+  const fileType = '.html';
+  const sourceMapRoot = '/build-artifacts/source-map-explorer/';
+  const bundleFiles = await glob(`.${sourceMapRoot}*${fileType}`);
+  const bundleLinks = bundleFiles
+    .map((bundleFile) => {
+      const fileName = bundleFile.split(sourceMapRoot)[1];
+      const bundleName = fileName.split(fileType)[0];
+      const url = `${BUILD_LINK_BASE}${sourceMapRoot}${fileName}`;
+      return `<a href="${url}">${bundleName}</a>`;
     })
     .join(', ');
 
diff --git a/development/require-react-devtools.js b/development/require-react-devtools.js
deleted file mode 100644
index 9af12aa87..000000000
--- a/development/require-react-devtools.js
+++ /dev/null
@@ -1 +0,0 @@
-require('react-devtools');
diff --git a/development/sourcemap-validator.js b/development/sourcemap-validator.js
index 15feb56f1..504e87e80 100644
--- a/development/sourcemap-validator.js
+++ b/development/sourcemap-validator.js
@@ -2,6 +2,7 @@ const fs = require('fs');
 const path = require('path');
 const { SourceMapConsumer } = require('source-map');
 const pify = require('pify');
+const { codeFrameColumns } = require('@babel/code-frame');
 
 const fsAsync = pify(fs);
 
@@ -20,13 +21,12 @@ start().catch((error) => {
 
 async function start() {
   const targetFiles = [
-    `background.js`,
-    // `bg-libs`, skipped because source maps are invalid due to browserify bug: https://github.com/browserify/browserify/issues/1971
+    `common-0.js`,
+    `background-0.js`,
+    `ui-0.js`,
+    'phishing-detect-0.js',
     // `contentscript.js`, skipped because the validator is erroneously sampling the inlined `inpage.js` script
     `inpage.js`,
-    'phishing-detect.js',
-    `ui.js`,
-    // `ui-libs.js`, skipped because source maps are invalid due to browserify bug: https://github.com/browserify/browserify/issues/1971
   ];
   let valid = true;
 
@@ -102,7 +102,6 @@ async function validateSourcemapForFile({ buildName }) {
 
   const buildLines = rawBuild.split('\n');
   const targetString = 'new Error';
-  // const targetString = 'null'
   const matchesPerLine = buildLines.map((line) =>
     indicesOf(targetString, line),
   );
@@ -114,26 +113,35 @@ async function validateSourcemapForFile({ buildName }) {
       // warn if source content is missing
       if (!result.source) {
         valid = false;
-        console.warn(
-          `!! missing source for position: ${JSON.stringify(position)}`,
+        const location = {
+          start: { line: position.line, column: position.column + 1 },
+        };
+        const codeSample = codeFrameColumns(rawBuild, location, {
+          message: `missing source for position`,
+          highlightCode: true,
+        });
+        console.error(
+          `missing source for position, in bundle "${buildName}"\n${codeSample}`,
         );
-        // const buildLine = buildLines[position.line - 1]
-        console.warn(`   origin in build:`);
-        console.warn(`   ${buildLines[position.line - 2]}`);
-        console.warn(`-> ${buildLines[position.line - 1]}`);
-        console.warn(`   ${buildLines[position.line - 0]}`);
         return;
       }
       const sourceContent = consumer.sourceContentFor(result.source);
       const sourceLines = sourceContent.split('\n');
-      const line = sourceLines[result.line - 1];
+      const sourceLine = sourceLines[result.line - 1];
       // this sometimes includes the whole line though we tried to match somewhere in the middle
-      const portion = line.slice(result.column);
-      const isMaybeValid = portion.includes(targetString);
-      if (!isMaybeValid) {
+      const portion = sourceLine.slice(result.column);
+      const foundValidSource = portion.includes(targetString);
+      if (!foundValidSource) {
         valid = false;
+        const location = {
+          start: { line: result.line + 1, column: result.column + 1 },
+        };
+        const codeSample = codeFrameColumns(sourceContent, location, {
+          message: `expected to see ${JSON.stringify(targetString)}`,
+          highlightCode: true,
+        });
         console.error(
-          `Sourcemap seems invalid:\n${getFencedCode(result.source, line)}`,
+          `Sourcemap seems invalid, ${result.source}\n${codeSample}`,
         );
       }
     });
@@ -142,27 +150,6 @@ async function validateSourcemapForFile({ buildName }) {
   return valid;
 }
 
-const CODE_FENCE_LENGTH = 80;
-const TITLE_PADDING_LENGTH = 1;
-
-function getFencedCode(filename, code) {
-  const title = `${' '.repeat(TITLE_PADDING_LENGTH)}${filename}${' '.repeat(
-    TITLE_PADDING_LENGTH,
-  )}`;
-  const openingFenceLength = Math.max(
-    CODE_FENCE_LENGTH - (filename.length + TITLE_PADDING_LENGTH * 2),
-    0,
-  );
-  const startOpeningFenceLength = Math.floor(openingFenceLength / 2);
-  const endOpeningFenceLength = Math.ceil(openingFenceLength / 2);
-  const openingFence = `${'='.repeat(
-    startOpeningFenceLength,
-  )}${title}${'='.repeat(endOpeningFenceLength)}`;
-  const closingFence = '='.repeat(CODE_FENCE_LENGTH);
-
-  return `${openingFence}\n${code}\n${closingFence}\n`;
-}
-
 function indicesOf(substring, string) {
   const a = [];
   let i = -1;
diff --git a/development/stream-flat-map.js b/development/stream-flat-map.js
new file mode 100644
index 000000000..0e84f3514
--- /dev/null
+++ b/development/stream-flat-map.js
@@ -0,0 +1,43 @@
+const { PassThrough: ThroughStream } = require('stream');
+// eslint-ignore-next-line node/no-extraneous-require
+const duplexify = require('duplexify').obj;
+
+module.exports = {
+  streamFlatMap,
+  asyncGeneratorToStream,
+};
+
+// returns an async generator that maps each chunk to a stream with the specified
+// "entryToStream" mapping fn, and forwards child streams out
+// useable with streams.pipeline
+function streamFlatMap(entryToStream) {
+  const duplex = asyncGeneratorToStream(flatMapGenerator);
+  return duplex;
+
+  async function* flatMapGenerator(source) {
+    for await (const entry of source) {
+      const subStream = entryToStream(entry);
+      yield* subStream;
+    }
+  }
+}
+
+// this stupid utility turns an async iterator factory into a duplex stream
+function asyncGeneratorToStream(factoryFn) {
+  const writableStream = new ThroughStream({ objectMode: true });
+  const readableStream = new ThroughStream({ objectMode: true });
+  const duplex = duplexify(writableStream, readableStream);
+  const asyncIter = factoryFn(writableStream);
+  // drain iterator into readable stream
+  process.nextTick(async () => {
+    try {
+      for await (const item of asyncIter) {
+        readableStream.write(item);
+      }
+      readableStream.end();
+    } catch (err) {
+      readableStream.destroy(err);
+    }
+  });
+  return duplex;
+}
diff --git a/lavamoat/node/policy.json b/lavamoat/node/policy.json
index e744f1175..d9eef720a 100644
--- a/lavamoat/node/policy.json
+++ b/lavamoat/node/policy.json
@@ -223,11 +223,6 @@
         "js-tokens": true
       }
     },
-    "@babel/parser": {
-      "globals": {
-        "BigInt": true
-      }
-    },
     "@babel/plugin-proposal-async-generator-functions": {
       "packages": {
         "@babel/core": true,
@@ -805,6 +800,26 @@
         "through2": true
       }
     },
+    "@lavamoat/lavapack": {
+      "builtin": {
+        "assert": true,
+        "buffer.Buffer.from": true,
+        "path.join": true,
+        "path.relative": true
+      },
+      "globals": {
+        "__dirname": true,
+        "process.cwd": true
+      },
+      "packages": {
+        "JSONStream": true,
+        "combine-source-map": true,
+        "convert-source-map": true,
+        "json-stable-stringify": true,
+        "through2": true,
+        "umd": true
+      }
+    },
     "@nodelib/fs.scandir": {
       "builtin": {
         "fs.lstat": true,
@@ -874,7 +889,6 @@
     },
     "acorn": {
       "globals": {
-        "BigInt": true,
         "define": true
       }
     },
@@ -884,9 +898,6 @@
       }
     },
     "acorn-node": {
-      "globals": {
-        "BigInt": true
-      },
       "packages": {
         "acorn": true,
         "acorn-dynamic-import": true,
@@ -959,16 +970,6 @@
         "buffer-equal": true
       }
     },
-    "are-we-there-yet": {
-      "builtin": {
-        "events.EventEmitter": true,
-        "util.inherits": true
-      },
-      "packages": {
-        "delegates": true,
-        "readable-stream": true
-      }
-    },
     "arr-diff": {
       "packages": {
         "arr-flatten": true,
@@ -1091,6 +1092,13 @@
         "pascalcase": true
       }
     },
+    "bify-module-groups": {
+      "packages": {
+        "pify": true,
+        "pump": true,
+        "through2": true
+      }
+    },
     "bl": {
       "builtin": {
         "util.inherits": true
@@ -1321,7 +1329,6 @@
         "anymatch": true,
         "async-each": true,
         "braces": true,
-        "fsevents": true,
         "glob-parent": true,
         "inherits": true,
         "is-binary-path": true,
@@ -1573,16 +1580,6 @@
         "through2": true
       }
     },
-    "detect-libc": {
-      "builtin": {
-        "child_process.spawnSync": true,
-        "fs.readdirSync": true,
-        "os.platform": true
-      },
-      "globals": {
-        "process.env": true
-      }
-    },
     "detective": {
       "packages": {
         "acorn-node": true,
@@ -1670,10 +1667,7 @@
     "es-abstract": {
       "globals": {
         "AggregateError": true,
-        "Atomics": true,
-        "BigInt": true,
         "FinalizationRegistry": true,
-        "SharedArrayBuffer": true,
         "WeakRef": true
       },
       "packages": {
@@ -2026,45 +2020,6 @@
         "process.version": true
       }
     },
-    "fsevents": {
-      "builtin": {
-        "events.EventEmitter": true,
-        "fs.stat": true,
-        "path.join": true,
-        "util.inherits": true
-      },
-      "globals": {
-        "__dirname": true,
-        "process.nextTick": true,
-        "process.platform": true,
-        "setImmediate": true
-      },
-      "native": true,
-      "packages": {
-        "node-pre-gyp": true
-      }
-    },
-    "gauge": {
-      "builtin": {
-        "util.format": true
-      },
-      "globals": {
-        "clearInterval": true,
-        "process": true,
-        "setImmediate": true,
-        "setInterval": true
-      },
-      "packages": {
-        "aproba": true,
-        "console-control-strings": true,
-        "has-unicode": true,
-        "object-assign": true,
-        "signal-exit": true,
-        "string-width": true,
-        "strip-ansi": true,
-        "wide-align": true
-      }
-    },
     "get-assigned-identifiers": {
       "builtin": {
         "assert.equal": true
@@ -2375,26 +2330,6 @@
         "through2": true
       }
     },
-    "gulp-terser-js": {
-      "builtin": {
-        "fs.readFileSync": true,
-        "path.basename": true,
-        "path.resolve": true
-      },
-      "globals": {
-        "Buffer.from": true,
-        "console.error": true,
-        "console.log": true,
-        "process.stdout.columns": true
-      },
-      "packages": {
-        "plugin-error": true,
-        "source-map": true,
-        "terser": true,
-        "through2": true,
-        "vinyl-sourcemaps-apply": true
-      }
-    },
     "gulp-watch": {
       "builtin": {
         "path.dirname": true,
@@ -2445,16 +2380,6 @@
         "process.argv": true
       }
     },
-    "has-unicode": {
-      "builtin": {
-        "os.type": true
-      },
-      "globals": {
-        "process.env.LANG": true,
-        "process.env.LC_ALL": true,
-        "process.env.LC_CTYPE": true
-      }
-    },
     "has-value": {
       "packages": {
         "get-value": true,
@@ -2608,11 +2533,6 @@
         "is-plain-object": true
       }
     },
-    "is-fullwidth-code-point": {
-      "packages": {
-        "number-is-nan": true
-      }
-    },
     "is-glob": {
       "packages": {
         "is-extglob": true
@@ -2997,56 +2917,6 @@
         "setTimeout": true
       }
     },
-    "node-pre-gyp": {
-      "builtin": {
-        "events.EventEmitter": true,
-        "fs.existsSync": true,
-        "fs.readFileSync": true,
-        "fs.renameSync": true,
-        "path.dirname": true,
-        "path.existsSync": true,
-        "path.join": true,
-        "path.resolve": true,
-        "url.parse": true,
-        "url.resolve": true,
-        "util.inherits": true
-      },
-      "globals": {
-        "__dirname": true,
-        "console.log": true,
-        "process.arch": true,
-        "process.cwd": true,
-        "process.env": true,
-        "process.platform": true,
-        "process.version.substr": true,
-        "process.versions": true
-      },
-      "packages": {
-        "detect-libc": true,
-        "nopt": true,
-        "npmlog": true,
-        "rimraf": true,
-        "semver": true
-      }
-    },
-    "nopt": {
-      "builtin": {
-        "path": true,
-        "stream.Stream": true,
-        "url": true
-      },
-      "globals": {
-        "console": true,
-        "process.argv": true,
-        "process.env.DEBUG_NOPT": true,
-        "process.env.NOPT_DEBUG": true,
-        "process.platform": true
-      },
-      "packages": {
-        "abbrev": true,
-        "osenv": true
-      }
-    },
     "normalize-path": {
       "packages": {
         "remove-trailing-separator": true
@@ -3062,22 +2932,6 @@
         "once": true
       }
     },
-    "npmlog": {
-      "builtin": {
-        "events.EventEmitter": true,
-        "util": true
-      },
-      "globals": {
-        "process.nextTick": true,
-        "process.stderr": true
-      },
-      "packages": {
-        "are-we-there-yet": true,
-        "console-control-strings": true,
-        "gauge": true,
-        "set-blocking": true
-      }
-    },
     "object-copy": {
       "packages": {
         "copy-descriptor": true,
@@ -3090,7 +2944,6 @@
         "util.inspect": true
       },
       "globals": {
-        "BigInt": true,
         "HTMLElement": true
       }
     },
@@ -3145,54 +2998,6 @@
         "readable-stream": true
       }
     },
-    "os-homedir": {
-      "builtin": {
-        "os.homedir": true
-      },
-      "globals": {
-        "process.env": true,
-        "process.getuid": true,
-        "process.platform": true
-      }
-    },
-    "os-tmpdir": {
-      "globals": {
-        "process.env.SystemRoot": true,
-        "process.env.TEMP": true,
-        "process.env.TMP": true,
-        "process.env.TMPDIR": true,
-        "process.env.windir": true,
-        "process.platform": true
-      }
-    },
-    "osenv": {
-      "builtin": {
-        "child_process.exec": true,
-        "path": true
-      },
-      "globals": {
-        "process.env.COMPUTERNAME": true,
-        "process.env.ComSpec": true,
-        "process.env.EDITOR": true,
-        "process.env.HOSTNAME": true,
-        "process.env.PATH": true,
-        "process.env.PROMPT": true,
-        "process.env.PS1": true,
-        "process.env.Path": true,
-        "process.env.SHELL": true,
-        "process.env.USER": true,
-        "process.env.USERDOMAIN": true,
-        "process.env.USERNAME": true,
-        "process.env.VISUAL": true,
-        "process.env.path": true,
-        "process.nextTick": true,
-        "process.platform": true
-      },
-      "packages": {
-        "os-homedir": true,
-        "os-tmpdir": true
-      }
-    },
     "parent-module": {
       "packages": {
         "callsites": true
@@ -3775,12 +3580,6 @@
         "process": true
       }
     },
-    "set-blocking": {
-      "globals": {
-        "process.stderr": true,
-        "process.stdout": true
-      }
-    },
     "set-value": {
       "packages": {
         "extend-shallow": true,
@@ -3910,6 +3709,15 @@
         "extend-shallow": true
       }
     },
+    "squirrelly": {
+      "builtin": {
+        "fs.existsSync": true,
+        "fs.readFileSync": true,
+        "path.dirname": true,
+        "path.extname": true,
+        "path.resolve": true
+      }
+    },
     "static-eval": {
       "packages": {
         "escodegen": true
@@ -3974,7 +3782,6 @@
     },
     "string-width": {
       "packages": {
-        "code-point-at": true,
         "emoji-regex": true,
         "is-fullwidth-code-point": true,
         "strip-ansi": true
@@ -4130,9 +3937,19 @@
         "Buffer.from": true,
         "atob": true,
         "btoa": true,
-        "define": true
+        "console.log": true,
+        "console.warn": true,
+        "define": true,
+        "process.argv": true,
+        "process.exit": true,
+        "process.platform": true,
+        "process.stderr.write": true,
+        "process.stdin.on": true,
+        "process.stdin.resume": true,
+        "process.stdin.setEncoding": true
       },
       "packages": {
+        "acorn": true,
         "source-map": true
       }
     },
@@ -4531,11 +4348,6 @@
         "isexe": true
       }
     },
-    "wide-align": {
-      "packages": {
-        "string-width": true
-      }
-    },
     "write": {
       "builtin": {
         "fs.createWriteStream": true,
diff --git a/package.json b/package.json
index 210687128..f4a1ea337 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
   "scripts": {
     "setup": "yarn install && yarn setup:postinstall",
     "setup:postinstall": "yarn patch-package && yarn allow-scripts",
-    "start": "node development/build/index.js dev",
+    "start": "yarn build:dev dev",
     "start:lavamoat": "yarn build dev",
     "dist": "yarn build prod",
     "build": "lavamoat development/build/index.js",
@@ -191,6 +191,7 @@
     "readable-stream": "^2.3.3",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
+    "requirejs": "^2.3.6",
     "reselect": "^3.0.1",
     "rpc-cap": "^3.2.1",
     "safe-event-emitter": "^1.0.1",
@@ -204,6 +205,7 @@
     "web3-stream-provider": "^4.0.0"
   },
   "devDependencies": {
+    "@babel/code-frame": "^7.12.13",
     "@babel/core": "^7.12.1",
     "@babel/eslint-parser": "^7.13.14",
     "@babel/eslint-plugin": "^7.12.1",
@@ -216,6 +218,7 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.5.5",
     "@lavamoat/allow-scripts": "^1.0.6",
+    "@lavamoat/lavapack": "^1.0.4",
     "@metamask/auto-changelog": "^2.1.0",
     "@metamask/eslint-config": "^6.0.0",
     "@metamask/eslint-config-jest": "^6.0.0",
@@ -237,7 +240,10 @@
     "@types/react": "^16.9.53",
     "addons-linter": "1.14.0",
     "babelify": "^10.0.0",
+    "bify-module-groups": "^1.0.0",
+    "bify-vinyl-gator": "^1.0.0",
     "brfs": "^2.0.2",
+    "browser-pack": "^6.1.0",
     "browserify": "^16.5.1",
     "chalk": "^3.0.0",
     "chromedriver": "^79.0.0",
@@ -247,6 +253,7 @@
     "css-loader": "^2.1.1",
     "css-to-xpath": "^0.1.0",
     "del": "^3.0.0",
+    "duplexify": "^4.1.1",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
     "eslint": "^7.23.0",
@@ -273,7 +280,6 @@
     "gulp-rtlcss": "^1.4.0",
     "gulp-sourcemaps": "^2.6.0",
     "gulp-stylelint": "^13.0.0",
-    "gulp-terser-js": "^5.2.2",
     "gulp-watch": "^5.0.1",
     "gulp-zip": "^4.0.0",
     "history": "^5.0.0",
@@ -293,6 +299,7 @@
     "prettier": "^2.2.1",
     "prettier-plugin-sort-json": "^0.0.1",
     "proxyquire": "^2.1.3",
+    "pumpify": "^2.0.1",
     "randomcolor": "^0.5.4",
     "rc": "^1.2.8",
     "react-devtools": "^4.10.1",
@@ -308,13 +315,16 @@
     "sinon": "^9.0.0",
     "source-map": "^0.7.2",
     "source-map-explorer": "^2.4.2",
+    "squirrelly": "^8.0.8",
     "string.prototype.matchall": "^4.0.2",
     "style-loader": "^0.21.0",
     "stylelint": "^13.6.1",
-    "through2": "^2.0.3",
+    "terser": "^5.7.0",
+    "through2": "^4.0.2",
     "ttest": "^2.1.1",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
+    "vinyl-sourcemaps-apply": "^0.2.1",
     "watchify": "^3.11.1",
     "webpack": "^4.41.6",
     "yargs": "^17.0.1"
diff --git a/patches/squirrelly+8.0.8.patch b/patches/squirrelly+8.0.8.patch
new file mode 100644
index 000000000..f43a50ef5
--- /dev/null
+++ b/patches/squirrelly+8.0.8.patch
@@ -0,0 +1,13 @@
+diff --git a/node_modules/squirrelly/dist/squirrelly.cjs.js b/node_modules/squirrelly/dist/squirrelly.cjs.js
+index 7908a34..044e348 100644
+--- a/node_modules/squirrelly/dist/squirrelly.cjs.js
++++ b/node_modules/squirrelly/dist/squirrelly.cjs.js
+@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
+ // TODO: allow '-' to trim up until newline. Use [^\S\n\r] instead of \s
+ // TODO: only include trimLeft polyfill if not in ES6
+ /* END TYPES */
+-var promiseImpl = new Function('return this')().Promise;
++var promiseImpl = globalThis.Promise;
+ var asyncFunc = false;
+ try {
+     asyncFunc = new Function('return (async function(){}).constructor')();
diff --git a/patches/watchify+3.11.1.patch b/patches/watchify+3.11.1.patch
new file mode 100644
index 000000000..cf3e489ad
--- /dev/null
+++ b/patches/watchify+3.11.1.patch
@@ -0,0 +1,38 @@
+diff --git a/node_modules/watchify/index.js b/node_modules/watchify/index.js
+index 0753b9f..4fea9e1 100644
+--- a/node_modules/watchify/index.js
++++ b/node_modules/watchify/index.js
+@@ -58,33 +58,6 @@ function watchify (b, opts) {
+         if (pkgcache) pkgcache[file] = pkg;
+     });
+ 
+-    b.on('reset', reset);
+-    reset();
+-    
+-    function reset () {
+-        var time = null;
+-        var bytes = 0;
+-        b.pipeline.get('record').on('end', function () {
+-            time = Date.now();
+-        });
+-        
+-        b.pipeline.get('wrap').push(through(write, end));
+-        function write (buf, enc, next) {
+-            bytes += buf.length;
+-            this.push(buf);
+-            next();
+-        }
+-        function end () {
+-            var delta = Date.now() - time;
+-            b.emit('time', delta);
+-            b.emit('bytes', bytes);
+-            b.emit('log', bytes + ' bytes written ('
+-                + (delta / 1000).toFixed(2) + ' seconds)'
+-            );
+-            this.push(null);
+-        }
+-    }
+-    
+     var fwatchers = {};
+     var fwatcherFiles = {};
+     var ignoredFiles = {};
diff --git a/test/unit-global/frozenPromise.test.js b/test/unit-global/frozenPromise.test.js
index f96af0d2a..b41362266 100644
--- a/test/unit-global/frozenPromise.test.js
+++ b/test/unit-global/frozenPromise.test.js
@@ -1,7 +1,7 @@
 // Should occur before anything else
 import './globalPatch';
 import 'ses/lockdown';
-import '../../app/scripts/runLockdown';
+import '../../app/scripts/lockdown-run';
 import { strict as assert } from 'assert'; /* eslint-disable-line import/first,import/order */
 
 describe('Promise global is immutable', function () {
diff --git a/yarn.lock b/yarn.lock
index 20e5dc2c4..a3fc83e86 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2567,6 +2567,18 @@
     semver "^7.3.4"
     yargs "^16.2.0"
 
+"@lavamoat/lavapack@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@lavamoat/lavapack/-/lavapack-1.0.4.tgz#e72d6b29fa70da8236a127c1d95cb581cda6941e"
+  integrity sha512-Zhcn+eJyHIS4AAmN9IIjs8WCh12Q7NpFXXz0pI3Y54uknTdx5TPlwr3ARKf0jEXDOWNok/TuK2uPld54BSG/FQ==
+  dependencies:
+    JSONStream "^1.3.5"
+    combine-source-map "^0.8.0"
+    convert-source-map "^1.7.0"
+    json-stable-stringify "^1.0.1"
+    through2 "^4.0.2"
+    umd "^3.0.3"
+
 "@lavamoat/preinstall-always-fail@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@lavamoat/preinstall-always-fail/-/preinstall-always-fail-1.0.0.tgz#e78a6e3d9e212a4fef869ec37d4f5fb498dea373"
@@ -4299,7 +4311,7 @@
   optionalDependencies:
     text-encoding "^0.6.4"
 
-JSONStream@^1.0.3:
+JSONStream@^1.0.3, JSONStream@^1.3.5:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.5.tgz#3208c1f08d3a4d99261ab64f92302bc15e111ca0"
   integrity sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==
@@ -6435,6 +6447,33 @@ better-opn@^2.0.0:
   dependencies:
     open "^7.0.3"
 
+bify-module-groups@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/bify-module-groups/-/bify-module-groups-1.0.0.tgz#6fba8f96a8b0f9e8f0b04035650fd56249b6119d"
+  integrity sha512-JAAkE9L5vZoALCEqawXipQNlDn3D0nUyjt0cHgRXj0Kce2RNLQsBxA6wTmnYpQDna6g6VVyC8IUi3n02ppmbhA==
+  dependencies:
+    bify-packagedata-stream "1.0.0"
+    pump "^3.0.0"
+    through2 "^3.0.1"
+
+bify-packagedata-stream@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/bify-packagedata-stream/-/bify-packagedata-stream-1.0.0.tgz#a6dbdcba64f9bf1c87bdc02ba9586fff7b94ccb3"
+  integrity sha512-ckOCceDpAOySFrt89saOShpVbP/iQbmZeWlYSxZV2e3HPTPhcd3JSudMJZhpsihQTyZut39efDo4+8aOb4vo2w==
+  dependencies:
+    module-name-from-path "git+https://git@github.com/kumavis/module-name-from-path.git"
+    resolve-package-path "^1.2.7"
+    through2 "^3.0.0"
+
+bify-vinyl-gator@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/bify-vinyl-gator/-/bify-vinyl-gator-1.0.0.tgz#aa1ce5c6a5829c75250fea6b04ec6a45c558efde"
+  integrity sha512-mGR/U+veqIrMWRWV1TUayNEmSIhaGDggYLwIBwDA7v2bTSHrEZcyyLs6FN3cF2cuyCzvpV1w4eH6P/So0nhCbA==
+  dependencies:
+    requirejs "^2.3.6"
+    through2 "^4.0.2"
+    vinyl "^2.2.1"
+
 big-integer@1.6.36:
   version "1.6.36"
   resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.36.tgz#78631076265d4ae3555c04f85e7d9d2f3a071a36"
@@ -6792,7 +6831,7 @@ brorand@^1.0.1, brorand@^1.0.5, brorand@^1.1.0:
   resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
   integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
 
-browser-pack@^6.0.1:
+browser-pack@^6.0.1, browser-pack@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/browser-pack/-/browser-pack-6.1.0.tgz#c34ba10d0b9ce162b5af227c7131c92c2ecd5774"
   integrity sha512-erYug8XoqzU3IfcU8fUgyHqyOXqIE4tUTTQ+7mqUjQlvnXkOO6OlT9c/ZoJVHYoAaqGxr09CN53G7XIsO4KtWA==
@@ -9556,6 +9595,16 @@ duplexify@^3.1.2, duplexify@^3.4.2:
     readable-stream "^2.0.0"
     stream-shift "^1.0.0"
 
+duplexify@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-4.1.1.tgz#7027dc374f157b122a8ae08c2d3ea4d2d953aa61"
+  integrity sha512-DY3xVEmVHTv1wSzKNbwoU6nVjzI369Y6sPoqfYr0/xlx3IdX2n94xIszTcjPO8W8ZIv0Wb0PXNcjuZyT4wiICA==
+  dependencies:
+    end-of-stream "^1.4.1"
+    inherits "^2.0.3"
+    readable-stream "^3.1.1"
+    stream-shift "^1.0.0"
+
 each-props@^1.3.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/each-props/-/each-props-1.3.2.tgz#ea45a414d16dd5cfa419b1a81720d5ca06892333"
@@ -13225,17 +13274,6 @@ gulp-stylelint@^13.0.0:
     strip-ansi "^6.0.0"
     through2 "^3.0.1"
 
-gulp-terser-js@^5.2.2:
-  version "5.2.2"
-  resolved "https://registry.yarnpkg.com/gulp-terser-js/-/gulp-terser-js-5.2.2.tgz#3d93db9b2b83f35dfcc5b209af6b1762756eb6a3"
-  integrity sha512-4ull0HzTWeWjRPiGmAFmdhRcEDOG+r7aXivNHOBQzElLzMaeVKQwmCPDi2juBzUUkjAkPkKb1jHVoJN/PKTvcA==
-  dependencies:
-    plugin-error "^1.0.1"
-    source-map "^0.7.3"
-    terser "^4.6.12"
-    through2 "^3.0.1"
-    vinyl-sourcemaps-apply "^0.2.1"
-
 gulp-watch@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/gulp-watch/-/gulp-watch-5.0.1.tgz#83d378752f5bfb46da023e73c17ed1da7066215d"
@@ -18548,6 +18586,10 @@ module-deps@^6.0.0:
     through2 "^2.0.0"
     xtend "^4.0.0"
 
+"module-name-from-path@git+https://git@github.com/kumavis/module-name-from-path.git":
+  version "1.0.4"
+  resolved "git+https://git@github.com/kumavis/module-name-from-path.git#fd9c592663a1af6cc48b1be7b8045ea547fca79a"
+
 module-not-found-error@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/module-not-found-error/-/module-not-found-error-1.0.1.tgz#cf8b4ff4f29640674d6cdd02b0e3bc523c2bbdc0"
@@ -21605,6 +21647,15 @@ pumpify@^1.3.3, pumpify@^1.3.5:
     inherits "^2.0.1"
     pump "^1.0.0"
 
+pumpify@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-2.0.1.tgz#abfc7b5a621307c728b551decbbefb51f0e4aa1e"
+  integrity sha512-m7KOje7jZxrmutanlkS1daj1dS6z6BgslzOXmcSEpIlCxM3VJH7lG5QLeck/6hgF6F4crFf01UtQmNsJfweTAw==
+  dependencies:
+    duplexify "^4.1.1"
+    inherits "^2.0.3"
+    pump "^3.0.0"
+
 punycode@1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
@@ -22354,7 +22405,7 @@ readable-stream@1.1.x, readable-stream@^1.0.33:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
-"readable-stream@2 || 3", readable-stream@^3.0.0, readable-stream@^3.0.1, readable-stream@^3.0.2, readable-stream@^3.0.5, readable-stream@^3.0.6, readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.5.0, readable-stream@^3.6.0:
+"readable-stream@2 || 3", readable-stream@3, readable-stream@^3.0.0, readable-stream@^3.0.1, readable-stream@^3.0.2, readable-stream@^3.0.5, readable-stream@^3.0.6, readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.5.0, readable-stream@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
   integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
@@ -22919,6 +22970,11 @@ require-uncached@^1.0.2:
     caller-path "^0.1.0"
     resolve-from "^1.0.0"
 
+requirejs@^2.3.6:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/requirejs/-/requirejs-2.3.6.tgz#e5093d9601c2829251258c0b9445d4d19fa9e7c9"
+  integrity sha512-ipEzlWQe6RK3jkzikgCupiTbTvm4S0/CAU5GlgptkN5SO6F3u0UD0K18wy6ErDqiCyP4J4YYe1HuAShvsxePLg==
+
 reselect@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/reselect/-/reselect-3.0.1.tgz#efdaa98ea7451324d092b2b2163a6a1d7a9a2147"
@@ -22971,6 +23027,14 @@ resolve-options@^1.1.0:
   dependencies:
     value-or-function "^3.0.0"
 
+resolve-package-path@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/resolve-package-path/-/resolve-package-path-1.2.7.tgz#2a7bc37ad96865e239330e3102c31322847e652e"
+  integrity sha512-fVEKHGeK85bGbVFuwO9o1aU0n3vqQGrezPc51JGu9UTXpFQfWq5qCeKxyaRUSvephs+06c5j5rPq/dzHGEo8+Q==
+  dependencies:
+    path-root "^0.1.1"
+    resolve "^1.10.0"
+
 resolve-pathname@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
@@ -24188,7 +24252,7 @@ source-map-support@^0.4.15:
   dependencies:
     source-map "^0.5.6"
 
-source-map-support@^0.5.11, source-map-support@^0.5.16, source-map-support@^0.5.6, source-map-support@~0.5.12, source-map-support@~0.5.4:
+source-map-support@^0.5.11, source-map-support@^0.5.16, source-map-support@^0.5.6, source-map-support@~0.5.12, source-map-support@~0.5.19, source-map-support@~0.5.4:
   version "0.5.19"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
   integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
@@ -24206,7 +24270,7 @@ source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, sourc
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-source-map@0.X, source-map@^0.7.2, source-map@^0.7.3:
+source-map@0.X, source-map@^0.7.2, source-map@^0.7.3, source-map@~0.7.2:
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
@@ -24313,6 +24377,11 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
 
+squirrelly@^8.0.8:
+  version "8.0.8"
+  resolved "https://registry.yarnpkg.com/squirrelly/-/squirrelly-8.0.8.tgz#d6704650b2170b8040d5de5bff9fa69cb62b5e0f"
+  integrity sha512-7dyZJ9Gw86MmH0dYLiESsjGOTj6KG8IWToTaqBuB6LwPI+hyNb6mbQaZwrfnAQ4cMDnSWMUvX/zAYDLTSWLk/w==
+
 sshpk@^1.7.0:
   version "1.16.1"
   resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.16.1.tgz#fb661c0bef29b39db40769ee39fa70093d6f6877"
@@ -25257,7 +25326,7 @@ terser-webpack-plugin@^3.0.0:
     terser "^4.8.0"
     webpack-sources "^1.4.3"
 
-terser@^4.1.2, terser@^4.6.12, terser@^4.6.3, terser@^4.8.0:
+terser@^4.1.2, terser@^4.6.3, terser@^4.8.0:
   version "4.8.0"
   resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17"
   integrity sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==
@@ -25266,6 +25335,15 @@ terser@^4.1.2, terser@^4.6.12, terser@^4.6.3, terser@^4.8.0:
     source-map "~0.6.1"
     source-map-support "~0.5.12"
 
+terser@^5.7.0:
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.7.0.tgz#a761eeec206bc87b605ab13029876ead938ae693"
+  integrity sha512-HP5/9hp2UaZt5fYkuhNBR8YyRcT8juw8+uFbAme53iN9hblvKnLUTKkmwJG6ocWpIKf8UK4DoeWG4ty0J6S6/g==
+  dependencies:
+    commander "^2.20.0"
+    source-map "~0.7.2"
+    source-map-support "~0.5.19"
+
 test-exclude@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-6.0.0.tgz#04a8698661d805ea6fa293b6cb9e63ac044ef15e"
@@ -25323,6 +25401,13 @@ through2@^3.0.0, through2@^3.0.1:
   dependencies:
     readable-stream "2 || 3"
 
+through2@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-4.0.2.tgz#a7ce3ac2a7a8b0b966c80e7c49f0484c3b239764"
+  integrity sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==
+  dependencies:
+    readable-stream "3"
+
 through@2, "through@>=2.2.7 <3", through@^2.3.6, through@~2.3, through@~2.3.1, through@~2.3.4, through@~2.3.8:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
@@ -25868,7 +25953,7 @@ typical@^5.0.0:
   resolved "https://registry.yarnpkg.com/typical/-/typical-5.1.0.tgz#7116ca103caf2574985fc84fbaa8fd0ee5ea1684"
   integrity sha512-t5Ik8UAwBal1P1XzuVE4dc+RYQZicLUGJdvqr/vdqsED7SQECgsGBylldSsfWZL7RQjxT3xhQcKHWhLaVSR6YQ==
 
-umd@^3.0.0:
+umd@^3.0.0, umd@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/umd/-/umd-3.0.3.tgz#aa9fe653c42b9097678489c01000acb69f0b26cf"
   integrity sha512-4IcGSufhFshvLNcMCV80UnQVlZ5pMOC8mvNPForqwA4+lzYQuetTESLDQkeLmihq8bRcnpbQa48Wb8Lh16/xow==
@@ -26566,6 +26651,18 @@ vinyl@^2.0.0, vinyl@^2.1.0, vinyl@^2.2.0:
     remove-trailing-separator "^1.0.1"
     replace-ext "^1.0.0"
 
+vinyl@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-2.2.1.tgz#23cfb8bbab5ece3803aa2c0a1eb28af7cbba1974"
+  integrity sha512-LII3bXRFBZLlezoG5FfZVcXflZgWP/4dCwKtxd5ky9+LOtM4CS3bIRQsmR1KMnMW07jpE8fqR2lcxPZ+8sJIcw==
+  dependencies:
+    clone "^2.1.1"
+    clone-buffer "^1.0.0"
+    clone-stats "^1.0.0"
+    cloneable-readable "^1.0.0"
+    remove-trailing-separator "^1.0.1"
+    replace-ext "^1.0.0"
+
 vm-browserify@^1.0.0, vm-browserify@^1.0.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"

From ee925d0186a4a52b9f34c67a92aaa342730149f0 Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Thu, 15 Jul 2021 15:43:53 -0230
Subject: [PATCH 131/141] Retrieve state after async action before updating
 state in _setSwapsQuoteRefreshTime (#11538)

---
 app/scripts/controllers/swaps.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/scripts/controllers/swaps.js b/app/scripts/controllers/swaps.js
index 424039408..17425b678 100644
--- a/app/scripts/controllers/swaps.js
+++ b/app/scripts/controllers/swaps.js
@@ -130,8 +130,10 @@ export default class SwapsController {
       console.error('Request for swaps quote refresh time failed: ', e);
     }
 
+    const { swapsState: latestSwapsState } = this.store.getState();
+
     this.store.updateState({
-      swapsState: { ...swapsState, swapsQuoteRefreshTime },
+      swapsState: { ...latestSwapsState, swapsQuoteRefreshTime },
     });
   }
 

From b21ad53bdcf94e7f91f76a3ec65ac6a6755ff9e3 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Thu, 15 Jul 2021 15:47:51 -0500
Subject: [PATCH 132/141] EIP-1559 - Provide updated gas price field tooltip
 text (#11531)

---
 app/_locales/en/messages.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index c66932f8b..405faa011 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -675,7 +675,7 @@
     "message": "Medium"
   },
   "editGasPriceTooltip": {
-    "message": "This network uses an older version of gas pricing which requires a “Gas price” field. Gas price is the maximum amount you are willing to pay per unit of gas."
+    "message": "This network requires a “Gas price” field when submitting a transaction. Gas price is the amount you will pay pay per unit of gas."
   },
   "editGasTitle": {
     "message": "Edit priority"

From b21b1396534ff65f4848d0925e358ffcc6f64b4b Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Thu, 15 Jul 2021 14:11:43 -0700
Subject: [PATCH 133/141] Handling non-numeric input for chain id in network
 form (#11537)

---
 .../network-form/network-form.component.js    | 31 +++++++++++++------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/ui/pages/settings/networks-tab/network-form/network-form.component.js b/ui/pages/settings/networks-tab/network-form/network-form.component.js
index 8381c921d..3e5913081 100644
--- a/ui/pages/settings/networks-tab/network-form/network-form.component.js
+++ b/ui/pages/settings/networks-tab/network-form/network-form.component.js
@@ -358,14 +358,27 @@ export default class NetworkForm extends PureComponent {
   };
 
   validateChainIdOnChange = (selfRpcUrl, chainIdArg = '') => {
+    const { t } = this.context;
     const { networksToRender } = this.props;
     const chainId = chainIdArg.trim();
+
     let errorKey = '';
     let errorMessage = '';
     let radix = 10;
-    const hexChainId = chainId.startsWith('0x')
-      ? chainId
-      : `0x${decimalToHex(chainId)}`;
+    let hexChainId = chainId;
+
+    if (!hexChainId.startsWith('0x')) {
+      try {
+        hexChainId = `0x${decimalToHex(hexChainId)}`;
+      } catch (err) {
+        this.setErrorTo('chainId', {
+          key: 'invalidHexNumber',
+          msg: t('invalidHexNumber'),
+        });
+        return;
+      }
+    }
+
     const [matchingChainId] = networksToRender.filter(
       (e) => e.chainId === hexChainId && e.rpcUrl !== selfRpcUrl,
     );
@@ -375,26 +388,26 @@ export default class NetworkForm extends PureComponent {
       return;
     } else if (matchingChainId) {
       errorKey = 'chainIdExistsErrorMsg';
-      errorMessage = this.context.t('chainIdExistsErrorMsg', [
+      errorMessage = t('chainIdExistsErrorMsg', [
         matchingChainId.label ?? matchingChainId.labelKey,
       ]);
     } else if (chainId.startsWith('0x')) {
       radix = 16;
       if (!/^0x[0-9a-f]+$/iu.test(chainId)) {
         errorKey = 'invalidHexNumber';
-        errorMessage = this.context.t('invalidHexNumber');
+        errorMessage = t('invalidHexNumber');
       } else if (!isPrefixedFormattedHexString(chainId)) {
-        errorMessage = this.context.t('invalidHexNumberLeadingZeros');
+        errorMessage = t('invalidHexNumberLeadingZeros');
       }
     } else if (!/^[0-9]+$/u.test(chainId)) {
       errorKey = 'invalidNumber';
-      errorMessage = this.context.t('invalidNumber');
+      errorMessage = t('invalidNumber');
     } else if (chainId.startsWith('0')) {
       errorKey = 'invalidNumberLeadingZeros';
-      errorMessage = this.context.t('invalidNumberLeadingZeros');
+      errorMessage = t('invalidNumberLeadingZeros');
     } else if (!isSafeChainId(parseInt(chainId, radix))) {
       errorKey = 'invalidChainIdTooBig';
-      errorMessage = this.context.t('invalidChainIdTooBig');
+      errorMessage = t('invalidChainIdTooBig');
     }
 
     this.setErrorTo('chainId', {

From d33b841fb8610c0629f8ac633baa9a0e40b6749f Mon Sep 17 00:00:00 2001
From: Niranjana Binoy <43930900+NiranjanaBinoy@users.noreply.github.com>
Date: Thu, 15 Jul 2021 19:08:16 -0400
Subject: [PATCH 134/141] Adding TokenListController to Metamask-Controller
 (#11515)

---
 app/scripts/controllers/preferences.js      | 11 +++++++
 app/scripts/controllers/preferences.test.js | 18 +++++++++++
 app/scripts/metamask-controller.js          | 35 +++++++++++++++++++++
 ui/store/actions.js                         | 13 ++++++++
 4 files changed, 77 insertions(+)

diff --git a/app/scripts/controllers/preferences.js b/app/scripts/controllers/preferences.js
index ddb14755a..bd2c91a09 100644
--- a/app/scripts/controllers/preferences.js
+++ b/app/scripts/controllers/preferences.js
@@ -51,6 +51,7 @@ export default class PreferencesController {
       useNonceField: false,
       usePhishDetect: true,
       dismissSeedBackUpReminder: false,
+      useStaticTokenList: false,
 
       // WARNING: Do not use feature flags for security-sensitive things.
       // Feature flag toggling is available in the global namespace
@@ -138,6 +139,16 @@ export default class PreferencesController {
     this.store.updateState({ usePhishDetect: val });
   }
 
+  /**
+   * Setter for the `useStaticTokenList` property
+   *
+   * @param {boolean} val - Whether or not the user prefers to use the static token list or dynamic token list from the API
+   *
+   */
+  setUseStaticTokenList(val) {
+    this.store.updateState({ useStaticTokenList: val });
+  }
+
   /**
    * Setter for the `firstTimeFlowType` property
    *
diff --git a/app/scripts/controllers/preferences.test.js b/app/scripts/controllers/preferences.test.js
index 5e454d55a..f088199ed 100644
--- a/app/scripts/controllers/preferences.test.js
+++ b/app/scripts/controllers/preferences.test.js
@@ -869,4 +869,22 @@ describe('preferences controller', function () {
       );
     });
   });
+  describe('setUseStaticTokenList', function () {
+    it('should default to false', function () {
+      const state = preferencesController.store.getState();
+      assert.equal(state.useStaticTokenList, false);
+    });
+
+    it('should set the useStaticTokenList property in state', function () {
+      assert.equal(
+        preferencesController.store.getState().useStaticTokenList,
+        false,
+      );
+      preferencesController.setUseStaticTokenList(true);
+      assert.equal(
+        preferencesController.store.getState().useStaticTokenList,
+        true,
+      );
+    });
+  });
 });
diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
index f74041946..b45a1a613 100644
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@@ -25,6 +25,7 @@ import {
   PhishingController,
   NotificationController,
   GasFeeController,
+  TokenListController,
 } from '@metamask/controllers';
 import { TRANSACTION_STATUSES } from '../../shared/constants/transaction';
 import { MAINNET_CHAIN_ID } from '../../shared/constants/network';
@@ -32,6 +33,7 @@ import { UI_NOTIFICATIONS } from '../../shared/notifications';
 import { toChecksumHexAddress } from '../../shared/modules/hexstring-utils';
 import { MILLISECOND } from '../../shared/constants/time';
 
+import { hexToDecimal } from '../../ui/helpers/utils/conversions.util';
 import ComposableObservableStore from './lib/ComposableObservableStore';
 import AccountTracker from './lib/account-tracker';
 import createLoggerMiddleware from './lib/createLoggerMiddleware';
@@ -219,6 +221,31 @@ export default class MetamaskController extends EventEmitter {
       state: initState.CurrencyController,
     });
 
+    const tokenListMessenger = controllerMessenger.getRestricted({
+      name: 'TokenListController',
+    });
+    this.tokenListController = new TokenListController({
+      chainId: hexToDecimal(this.networkController.getCurrentChainId()),
+      useStaticTokenList: this.preferencesController.store.getState()
+        .useStaticTokenList,
+      onNetworkStateChange: (cb) =>
+        this.networkController.store.subscribe((networkState) => {
+          const modifiedNetworkState = {
+            ...networkState,
+            provider: {
+              ...networkState.provider,
+              chainId: hexToDecimal(networkState.provider.chainId),
+            },
+          };
+          return cb(modifiedNetworkState);
+        }),
+      onPreferencesStateChange: this.preferencesController.store.subscribe.bind(
+        this.preferencesController.store,
+      ),
+      messenger: tokenListMessenger,
+      state: initState.tokenListController,
+    });
+
     this.phishingController = new PhishingController();
 
     this.notificationController = new NotificationController(
@@ -275,11 +302,13 @@ export default class MetamaskController extends EventEmitter {
         this.incomingTransactionsController.start();
         this.tokenRatesController.start();
         this.currencyRateController.start();
+        this.tokenListController.start();
       } else {
         this.accountTracker.stop();
         this.incomingTransactionsController.stop();
         this.tokenRatesController.stop();
         this.currencyRateController.stop();
+        this.tokenListController.stop();
       }
     });
 
@@ -498,6 +527,7 @@ export default class MetamaskController extends EventEmitter {
       ThreeBoxController: this.threeBoxController.store,
       NotificationController: this.notificationController,
       GasFeeController: this.gasFeeController,
+      TokenListController: this.tokenListController,
     });
 
     this.memStore = new ComposableObservableStore({
@@ -530,6 +560,7 @@ export default class MetamaskController extends EventEmitter {
         ApprovalController: this.approvalController,
         NotificationController: this.notificationController,
         GasFeeController: this.gasFeeController,
+        TokenListController: this.tokenListController,
       },
       controllerMessenger,
     });
@@ -723,6 +754,10 @@ export default class MetamaskController extends EventEmitter {
       setUseBlockie: this.setUseBlockie.bind(this),
       setUseNonceField: this.setUseNonceField.bind(this),
       setUsePhishDetect: this.setUsePhishDetect.bind(this),
+      setUseStaticTokenList: nodeify(
+        this.preferencesController.setUseStaticTokenList,
+        this.preferencesController,
+      ),
       setIpfsGateway: this.setIpfsGateway.bind(this),
       setParticipateInMetaMetrics: this.setParticipateInMetaMetrics.bind(this),
       setFirstTimeFlowType: this.setFirstTimeFlowType.bind(this),
diff --git a/ui/store/actions.js b/ui/store/actions.js
index d9f629952..312324990 100644
--- a/ui/store/actions.js
+++ b/ui/store/actions.js
@@ -2046,6 +2046,19 @@ export function setUsePhishDetect(val) {
   };
 }
 
+export function setUseStaticTokenList(val) {
+  return (dispatch) => {
+    dispatch(showLoadingIndication());
+    log.debug(`background.setUseStaticTokenList`);
+    background.setUseStaticTokenList(val, (err) => {
+      dispatch(hideLoadingIndication());
+      if (err) {
+        dispatch(displayWarning(err.message));
+      }
+    });
+  };
+}
+
 export function setIpfsGateway(val) {
   return (dispatch) => {
     dispatch(showLoadingIndication());

From e77101138a64b53905f9c6e38da8788b5523469f Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Thu, 15 Jul 2021 19:24:52 -0700
Subject: [PATCH 135/141] Cleaning up bundle link formatting (metamaskbot)
 (#11539)

---
 development/metamaskbot-build-announce.js | 43 ++++++++++++++++++-----
 1 file changed, 34 insertions(+), 9 deletions(-)

diff --git a/development/metamaskbot-build-announce.js b/development/metamaskbot-build-announce.js
index 26f2174dc..f8ec42f0a 100755
--- a/development/metamaskbot-build-announce.js
+++ b/development/metamaskbot-build-announce.js
@@ -40,17 +40,42 @@ async function start() {
     .join(', ');
 
   // links to bundle browser builds
+  const bundles = {};
   const fileType = '.html';
   const sourceMapRoot = '/build-artifacts/source-map-explorer/';
   const bundleFiles = await glob(`.${sourceMapRoot}*${fileType}`);
-  const bundleLinks = bundleFiles
-    .map((bundleFile) => {
-      const fileName = bundleFile.split(sourceMapRoot)[1];
-      const bundleName = fileName.split(fileType)[0];
-      const url = `${BUILD_LINK_BASE}${sourceMapRoot}${fileName}`;
-      return `<a href="${url}">${bundleName}</a>`;
-    })
-    .join(', ');
+
+  bundleFiles.forEach((bundleFile) => {
+    const fileName = bundleFile.split(sourceMapRoot)[1];
+    const bundleName = fileName.split(fileType)[0];
+    const url = `${BUILD_LINK_BASE}${sourceMapRoot}${fileName}`;
+    let fileRoot = bundleName;
+    let fileIndex;
+
+    if (bundleName.indexOf('-') > -1) {
+      const split = bundleName.split('-');
+      // Handle bundles that have hyphens in their name
+      if (split.length === 2 && !isNaN(parseInt(split[1], 10))) {
+        fileRoot = split[0];
+        fileIndex = split[1];
+      } else if (split.length === 3) {
+        fileRoot = [split[0], split[1]].join('-');
+        fileIndex = split[2];
+      }
+    }
+
+    const link = `<a href="${url}">${fileIndex || fileRoot}</a>`;
+
+    if (fileRoot in bundles) {
+      bundles[fileRoot].push(link);
+    } else {
+      bundles[fileRoot] = [link];
+    }
+  });
+
+  const bundleMarkup = `<ul>${Object.keys(bundles)
+    .map((key) => `<li>${key}: ${bundles[key].join(', ')}</li>`)
+    .join('')}</ul>`;
 
   const coverageUrl = `${BUILD_LINK_BASE}/coverage/index.html`;
   const coverageLink = `<a href="${coverageUrl}">Report</a>`;
@@ -67,7 +92,7 @@ async function start() {
 
   const contentRows = [
     `builds: ${buildLinks}`,
-    `bundle viz: ${bundleLinks}`,
+    `bundle viz: ${bundleMarkup}`,
     `build viz: ${depVizLink}`,
     `code coverage: ${coverageLink}`,
     `storybook: ${storybookLink}`,

From d8984d3cf32b77d4fc5411331212b9303d9d1d0b Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Fri, 16 Jul 2021 10:00:03 -0500
Subject: [PATCH 136/141] EIP-1559 - Provide Updated UI for Dapp-Suggested Gas
 fees (#11523)

---
 app/_locales/en/messages.json                 | 16 +++++++
 .../edit-gas-display.component.js             | 13 +++---
 ui/components/app/edit-gas-display/index.scss |  6 ++-
 .../edit-gas-popover.component.js             |  1 +
 .../app/transaction-detail-item/index.scss    |  5 +++
 .../transaction-detail-item.component.js      | 22 ++++------
 .../actionable-message/actionable-message.js  | 18 ++------
 .../actionable-message.stories.js             |  2 +-
 ui/components/ui/info-tooltip/index.scss      | 14 ++++++-
 .../ui/info-tooltip/info-tooltip-icon.js      | 17 ++++++++
 ui/components/ui/info-tooltip/info-tooltip.js |  5 ++-
 .../confirm-transaction-base.component.js     | 42 ++++++++++++++++---
 .../__snapshots__/fee-card.test.js.snap       | 13 ++++--
 .../__snapshots__/sort-list.test.js.snap      | 10 +----
 .../sort-list/sort-list.test.js               |  5 +++
 .../__snapshots__/view-quote.test.js.snap     |  5 +--
 ui/pages/swaps/view-quote/view-quote.test.js  |  4 ++
 17 files changed, 137 insertions(+), 61 deletions(-)
 create mode 100644 ui/components/ui/info-tooltip/info-tooltip-icon.js

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 405faa011..68306c809 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -2442,9 +2442,25 @@
   "transactionCreated": {
     "message": "Transaction created with a value of $1 at $2."
   },
+  "transactionDetailDappGasHeading": {
+    "message": "$1 suggested gas fee",
+    "description": "$1 represents a dapp origin"
+  },
+  "transactionDetailDappGasTooltip": {
+    "message": "This gas fee suggestion is using legacy gas estimation which may be inaccurate."
+  },
   "transactionDetailGasHeading": {
     "message": "Estimated gas fee"
   },
+  "transactionDetailGasTooltipConversion": {
+    "message": "Learn more about gas fees"
+  },
+  "transactionDetailGasTooltipExplanation": {
+    "message": "Gas fees are set by the network and fluctuate based on network traffic and transaction complexity."
+  },
+  "transactionDetailGasTooltipIntro": {
+    "message": "Gas fees are paid to crypto miners who process transactions on the Ethereum network. MetaMask does not profit from gas fees."
+  },
   "transactionDetailGasTotalSubtitle": {
     "message": "Amount + gas fee"
   },
diff --git a/ui/components/app/edit-gas-display/edit-gas-display.component.js b/ui/components/app/edit-gas-display/edit-gas-display.component.js
index a51cd8a0d..4e41d565c 100644
--- a/ui/components/app/edit-gas-display/edit-gas-display.component.js
+++ b/ui/components/app/edit-gas-display/edit-gas-display.component.js
@@ -28,8 +28,7 @@ export default function EditGasDisplay({
   alwaysShowForm = false,
   showEducationButton = false,
   onEducationClick,
-  dappSuggestedGasFee = 0,
-  dappOrigin = '',
+  transaction,
   defaultEstimateToUse,
   maxPriorityFeePerGas,
   setMaxPriorityFeePerGas,
@@ -61,7 +60,7 @@ export default function EditGasDisplay({
   const t = useContext(I18nContext);
 
   const requireDappAcknowledgement = Boolean(
-    dappSuggestedGasFee && !dappSuggestedGasFeeAcknowledged,
+    transaction?.dappSuggestedGasFees && !dappSuggestedGasFeeAcknowledged,
   );
 
   return (
@@ -79,7 +78,8 @@ export default function EditGasDisplay({
           <div className="edit-gas-display__dapp-acknowledgement-warning">
             <ActionableMessage
               className="actionable-message--warning"
-              message={t('gasDisplayDappWarning', [dappOrigin])}
+              message={t('gasDisplayDappWarning', [transaction.dappOrigin])}
+              iconFillColor="#f8c000"
               useIcon
             />
           </div>
@@ -164,7 +164,7 @@ export default function EditGasDisplay({
               onChange={setEstimateToUse}
             />
           )}
-        {!alwaysShowForm && (
+        {!alwaysShowForm && !requireDappAcknowledgement && (
           <button
             className="edit-gas-display__advanced-button"
             onClick={() => setShowAdvancedForm(!showAdvancedForm)}
@@ -217,8 +217,6 @@ EditGasDisplay.propTypes = {
   mode: PropTypes.oneOf(Object.values(EDIT_GAS_MODES)),
   showEducationButton: PropTypes.bool,
   onEducationClick: PropTypes.func,
-  dappSuggestedGasFee: PropTypes.number,
-  dappOrigin: PropTypes.string,
   defaultEstimateToUse: PropTypes.oneOf(Object.values(GAS_RECOMMENDATIONS)),
   maxPriorityFeePerGas: PropTypes.string,
   setMaxPriorityFeePerGas: PropTypes.func,
@@ -246,4 +244,5 @@ EditGasDisplay.propTypes = {
   showAdvancedForm: PropTypes.bool,
   setShowAdvancedForm: PropTypes.func,
   warning: PropTypes.string,
+  transaction: PropTypes.object,
 };
diff --git a/ui/components/app/edit-gas-display/index.scss b/ui/components/app/edit-gas-display/index.scss
index 98bca0a12..ae5f96fa0 100644
--- a/ui/components/app/edit-gas-display/index.scss
+++ b/ui/components/app/edit-gas-display/index.scss
@@ -2,6 +2,10 @@
   & .actionable-message--warning,
   & .actionable-message--error {
     margin-top: 0;
+
+    & .actionable-message__message {
+      text-align: start;
+    }
   }
 
   &__top-tooltip {
@@ -22,7 +26,7 @@
   }
 
   button.edit-gas-display__dapp-acknowledgement-button {
-    margin: 0 auto;
+    margin: 40px auto 0 auto;
     display: block;
     color: $secondary-1;
     border: 1px solid $secondary-1;
diff --git a/ui/components/app/edit-gas-popover/edit-gas-popover.component.js b/ui/components/app/edit-gas-popover/edit-gas-popover.component.js
index be3dbc8d5..6bbf5eede 100644
--- a/ui/components/app/edit-gas-popover/edit-gas-popover.component.js
+++ b/ui/components/app/edit-gas-popover/edit-gas-popover.component.js
@@ -220,6 +220,7 @@ export default function EditGasPopover({
             isGasTooLow={isGasTooLow}
             onEducationClick={() => setShowEducationContent(true)}
             mode={mode}
+            transaction={transaction}
             {...editGasDisplayProps}
           />
         )}
diff --git a/ui/components/app/transaction-detail-item/index.scss b/ui/components/app/transaction-detail-item/index.scss
index 7359d694c..e986278f7 100644
--- a/ui/components/app/transaction-detail-item/index.scss
+++ b/ui/components/app/transaction-detail-item/index.scss
@@ -9,6 +9,11 @@
     flex-grow: 1;
   }
 
+  &__title--dapp-suggested {
+    color: $secondary-1;
+    font-weight: bold;
+  }
+
   .info-tooltip {
     display: inline-block;
     margin-inline-start: 4px;
diff --git a/ui/components/app/transaction-detail-item/transaction-detail-item.component.js b/ui/components/app/transaction-detail-item/transaction-detail-item.component.js
index 0e3039987..4b59ecef3 100644
--- a/ui/components/app/transaction-detail-item/transaction-detail-item.component.js
+++ b/ui/components/app/transaction-detail-item/transaction-detail-item.component.js
@@ -9,17 +9,18 @@ import {
 } from '../../../helpers/constants/design-system';
 
 export default function TransactionDetailItem({
-  detailTitle,
-  detailText,
-  detailTotal,
-  subTitle,
-  subText,
+  detailTitle = '',
+  detailText = '',
+  detailTitleColor = COLORS.BLACK,
+  detailTotal = '',
+  subTitle = '',
+  subText = '',
 }) {
   return (
     <div className="transaction-detail-item">
       <div className="transaction-detail-item__row">
         <Typography
-          color={COLORS.BLACK}
+          color={detailTitleColor}
           fontWeight={FONT_WEIGHT.BOLD}
           variant={TYPOGRAPHY.H6}
           className="transaction-detail-item__title"
@@ -64,16 +65,9 @@ export default function TransactionDetailItem({
 
 TransactionDetailItem.propTypes = {
   detailTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  detailTitleColor: PropTypes.string,
   detailText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   detailTotal: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   subTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   subText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 };
-
-TransactionDetailItem.defaultProps = {
-  detailTitle: '',
-  detailText: '',
-  detailTotal: '',
-  subTitle: '',
-  subText: '',
-};
diff --git a/ui/components/ui/actionable-message/actionable-message.js b/ui/components/ui/actionable-message/actionable-message.js
index 39826ea04..750852f31 100644
--- a/ui/components/ui/actionable-message/actionable-message.js
+++ b/ui/components/ui/actionable-message/actionable-message.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import InfoTooltip from '../info-tooltip';
+import InfoTooltipIcon from '../info-tooltip/info-tooltip-icon';
 
 const CLASSNAME_WARNING = 'actionable-message--warning';
 const CLASSNAME_DANGER = 'actionable-message--danger';
@@ -21,7 +22,7 @@ export default function ActionableMessage({
   withRightButton = false,
   type = false,
   useIcon = false,
-  iconFill = '#b8b8b8',
+  iconFillColor = '',
 }) {
   const actionableMessageClassName = classnames(
     'actionable-message',
@@ -33,18 +34,7 @@ export default function ActionableMessage({
 
   return (
     <div className={actionableMessageClassName}>
-      {useIcon && (
-        <svg
-          viewBox="0 0 10 10"
-          xmlns="http://www.w3.org/2000/svg"
-          className="actionable-message__icon"
-        >
-          <path
-            d="M5 0C2.2 0 0 2.2 0 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 2c.4 0 .7.3.7.7s-.3.7-.7.7-.7-.2-.7-.6.3-.8.7-.8zm.7 6H4.3V4.3h1.5V8z"
-            fill={iconFill}
-          />
-        </svg>
-      )}
+      {useIcon && <InfoTooltipIcon fillColor={iconFillColor} />}
       {infoTooltipText && (
         <InfoTooltip
           position="left"
@@ -98,5 +88,5 @@ ActionableMessage.propTypes = {
   withRightButton: PropTypes.bool,
   infoTooltipText: PropTypes.string,
   useIcon: PropTypes.bool,
-  iconFill: PropTypes.string,
+  iconFillColor: PropTypes.string,
 };
diff --git a/ui/components/ui/actionable-message/actionable-message.stories.js b/ui/components/ui/actionable-message/actionable-message.stories.js
index 877c66e98..00643bad3 100644
--- a/ui/components/ui/actionable-message/actionable-message.stories.js
+++ b/ui/components/ui/actionable-message/actionable-message.stories.js
@@ -78,7 +78,7 @@ export const withIcon = () => (
       )}
       className="actionable-message--left-aligned actionable-message--warning"
       useIcon
-      iconFill="#f8c000"
+      iconFillColor="#f8c000"
     />
   </div>
 );
diff --git a/ui/components/ui/info-tooltip/index.scss b/ui/components/ui/info-tooltip/index.scss
index cdc52fb97..335108ffc 100644
--- a/ui/components/ui/info-tooltip/index.scss
+++ b/ui/components/ui/info-tooltip/index.scss
@@ -1,5 +1,5 @@
 .info-tooltip {
-  img {
+  svg {
     height: 12px;
     width: 12px;
   }
@@ -41,6 +41,18 @@
 
       text-align: left;
       color: $Grey-500;
+
+      a {
+        color: $primary-1;
+      }
+
+      p {
+        margin-bottom: 12px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
     }
   }
 
diff --git a/ui/components/ui/info-tooltip/info-tooltip-icon.js b/ui/components/ui/info-tooltip/info-tooltip-icon.js
new file mode 100644
index 000000000..8e65c5870
--- /dev/null
+++ b/ui/components/ui/info-tooltip/info-tooltip-icon.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function InfoTooltipIcon({ fillColor = '#b8b8b8' }) {
+  return (
+    <svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M5 0C2.2 0 0 2.2 0 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 2c.4 0 .7.3.7.7s-.3.7-.7.7-.7-.2-.7-.6.3-.8.7-.8zm.7 6H4.3V4.3h1.5V8z"
+        fill={fillColor}
+      />
+    </svg>
+  );
+}
+
+InfoTooltipIcon.propTypes = {
+  fillColor: PropTypes.string,
+};
diff --git a/ui/components/ui/info-tooltip/info-tooltip.js b/ui/components/ui/info-tooltip/info-tooltip.js
index 4c67eefd0..03b0d96ca 100644
--- a/ui/components/ui/info-tooltip/info-tooltip.js
+++ b/ui/components/ui/info-tooltip/info-tooltip.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Tooltip from '../tooltip';
+import InfoTooltipIcon from './info-tooltip-icon';
 
 const positionArrowClassMap = {
   top: 'info-tooltip__top-tooltip-arrow',
@@ -16,6 +17,7 @@ export default function InfoTooltip({
   containerClassName,
   wrapperClassName,
   wide,
+  iconFillColor = '',
 }) {
   return (
     <div className="info-tooltip">
@@ -32,7 +34,7 @@ export default function InfoTooltip({
         html={contentText}
         theme={wide ? 'tippy-tooltip-wideInfo' : 'tippy-tooltip-info'}
       >
-        <img src="images/mm-info-icon.svg" alt="" />
+        <InfoTooltipIcon fillColor={iconFillColor} />
       </Tooltip>
     </div>
   );
@@ -44,4 +46,5 @@ InfoTooltip.propTypes = {
   wide: PropTypes.bool,
   containerClassName: PropTypes.string,
   wrapperClassName: PropTypes.string,
+  iconFillColor: PropTypes.string,
 };
diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
index 625eda06d..f83c4fd7a 100644
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -35,6 +35,8 @@ import TransactionDetail from '../../components/app/transaction-detail/transacti
 import TransactionDetailItem from '../../components/app/transaction-detail-item/transaction-detail-item.component';
 import InfoTooltip from '../../components/ui/info-tooltip/info-tooltip';
 
+import { COLORS } from '../../helpers/constants/design-system';
+
 export default class ConfirmTransactionBase extends Component {
   static contextTypes = {
     t: PropTypes.func,
@@ -292,6 +294,7 @@ export default class ConfirmTransactionBase extends Component {
       isMainnet,
       isEthGasPrice,
       noGasPrice,
+      txData,
     } = this.props;
     const { t } = this.context;
 
@@ -363,13 +366,40 @@ export default class ConfirmTransactionBase extends Component {
               <TransactionDetailItem
                 key="gas-item"
                 detailTitle={
-                  <>
-                    {t('transactionDetailGasHeading')}
-                    <InfoTooltip contentText="" position="top">
-                      <i className="fa fa-info-circle" />
-                    </InfoTooltip>
-                  </>
+                  txData.dappSuggestedGasFees ? (
+                    <>
+                      {t('transactionDetailDappGasHeading', [txData.origin])}
+                      <InfoTooltip
+                        contentText={t('transactionDetailDappGasTooltip')}
+                        position="top"
+                        iconFillColor="#f66a0a"
+                      >
+                        <i className="fa fa-info-circle" />
+                      </InfoTooltip>
+                    </>
+                  ) : (
+                    <>
+                      {t('transactionDetailGasHeading')}
+                      <InfoTooltip
+                        contentText={
+                          <>
+                            <p>{t('transactionDetailGasTooltipIntro')}</p>
+                            <p>{t('transactionDetailGasTooltipExplanation')}</p>
+                            <p>
+                              <a href="https://community.metamask.io/t/what-is-gas-why-do-transactions-take-so-long/3172">
+                                {t('transactionDetailGasTooltipConversion')}
+                              </a>
+                            </p>
+                          </>
+                        }
+                        position="top"
+                      >
+                        <i className="fa fa-info-circle" />
+                      </InfoTooltip>
+                    </>
+                  )
                 }
+                detailTitleColor={COLORS.SECONDARY1}
                 detailText={
                   <UserPreferencedCurrencyDisplay
                     type={PRIMARY}
diff --git a/ui/pages/swaps/fee-card/__snapshots__/fee-card.test.js.snap b/ui/pages/swaps/fee-card/__snapshots__/fee-card.test.js.snap
index 8152957ad..8aad16fe3 100644
--- a/ui/pages/swaps/fee-card/__snapshots__/fee-card.test.js.snap
+++ b/ui/pages/swaps/fee-card/__snapshots__/fee-card.test.js.snap
@@ -59,10 +59,15 @@ exports[`FeeCard renders the component with initial props 2`] = `
           style="display: inline;"
           tabindex="0"
         >
-          <img
-            alt=""
-            src="images/mm-info-icon.svg"
-          />
+          <svg
+            viewBox="0 0 10 10"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5 0C2.2 0 0 2.2 0 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 2c.4 0 .7.3.7.7s-.3.7-.7.7-.7-.2-.7-.6.3-.8.7-.8zm.7 6H4.3V4.3h1.5V8z"
+              fill=""
+            />
+          </svg>
         </div>
       </div>
     </div>
diff --git a/ui/pages/swaps/select-quote-popover/sort-list/__snapshots__/sort-list.test.js.snap b/ui/pages/swaps/select-quote-popover/sort-list/__snapshots__/sort-list.test.js.snap
index a267c11f3..b73581f3e 100644
--- a/ui/pages/swaps/select-quote-popover/sort-list/__snapshots__/sort-list.test.js.snap
+++ b/ui/pages/swaps/select-quote-popover/sort-list/__snapshots__/sort-list.test.js.snap
@@ -27,10 +27,7 @@ exports[`SortList renders the component with initial props 1`] = `
           style="display: inline;"
           tabindex="0"
         >
-          <img
-            alt=""
-            src="images/mm-info-icon.svg"
-          />
+          &lt;InfoTooltipIcon /&gt;
         </div>
       </div>
     </div>
@@ -69,10 +66,7 @@ exports[`SortList renders the component with initial props 2`] = `
         style="display: inline;"
         tabindex="0"
       >
-        <img
-          alt=""
-          src="images/mm-info-icon.svg"
-        />
+        &lt;InfoTooltipIcon /&gt;
       </div>
     </div>
   </div>
diff --git a/ui/pages/swaps/select-quote-popover/sort-list/sort-list.test.js b/ui/pages/swaps/select-quote-popover/sort-list/sort-list.test.js
index 99e5a19e5..1b594ba3c 100644
--- a/ui/pages/swaps/select-quote-popover/sort-list/sort-list.test.js
+++ b/ui/pages/swaps/select-quote-popover/sort-list/sort-list.test.js
@@ -3,6 +3,11 @@ import React from 'react';
 import { renderWithProvider } from '../../../../../test/jest';
 import SortList from './sort-list';
 
+jest.mock(
+  '../../../../components/ui/info-tooltip/info-tooltip-icon',
+  () => () => '<InfoTooltipIcon />',
+);
+
 const createProps = (customProps = {}) => {
   return {
     selectedAggId: 'Agg2',
diff --git a/ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap b/ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap
index 49d491b37..26456e10a 100644
--- a/ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap
+++ b/ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap
@@ -126,10 +126,7 @@ exports[`ViewQuote renders the component with initial props 4`] = `
           style="display: inline;"
           tabindex="0"
         >
-          <img
-            alt=""
-            src="images/mm-info-icon.svg"
-          />
+          &lt;InfoTooltipIcon /&gt;
         </div>
       </div>
     </div>
diff --git a/ui/pages/swaps/view-quote/view-quote.test.js b/ui/pages/swaps/view-quote/view-quote.test.js
index 51dae8a3e..f1b362f80 100644
--- a/ui/pages/swaps/view-quote/view-quote.test.js
+++ b/ui/pages/swaps/view-quote/view-quote.test.js
@@ -9,6 +9,10 @@ import {
 } from '../../../../test/jest';
 import ViewQuote from '.';
 
+jest.mock('../../../components/ui/info-tooltip/info-tooltip-icon', () => () =>
+  '<InfoTooltipIcon />',
+);
+
 const middleware = [thunk];
 const createProps = (customProps = {}) => {
   return {

From 3fada25dfc296388daef1ce1ff131b9a3cb49601 Mon Sep 17 00:00:00 2001
From: Peter-Jan Brone <peter-jan@settlemint.com>
Date: Fri, 16 Jul 2021 17:22:04 +0200
Subject: [PATCH 137/141] Add Skylink support to ENS resolver (#11401)

* Add Skynet support to ENS to IPFS resolver

* Remove newline

* Fix lint

* Fix lint

* Remove mistakenly committed zip file

* Update
---
 app/scripts/lib/ens-ipfs/resolver.js |   2 +-
 app/scripts/lib/ens-ipfs/setup.js    |  17 ++-
 package.json                         |   4 +-
 yarn.lock                            | 192 ++++++++++++++++++++++++++-
 4 files changed, 209 insertions(+), 6 deletions(-)

diff --git a/app/scripts/lib/ens-ipfs/resolver.js b/app/scripts/lib/ens-ipfs/resolver.js
index ff61f00e6..4359a55f8 100644
--- a/app/scripts/lib/ens-ipfs/resolver.js
+++ b/app/scripts/lib/ens-ipfs/resolver.js
@@ -1,7 +1,7 @@
 import namehash from 'eth-ens-namehash';
 import Eth from 'ethjs-query';
 import EthContract from 'ethjs-contract';
-import contentHash from 'content-hash';
+import contentHash from '@ensdomains/content-hash';
 import registryAbi from './contracts/registry';
 import resolverAbi from './contracts/resolver';
 
diff --git a/app/scripts/lib/ens-ipfs/setup.js b/app/scripts/lib/ens-ipfs/setup.js
index 353bd32f3..c7d1b2c09 100644
--- a/app/scripts/lib/ens-ipfs/setup.js
+++ b/app/scripts/lib/ens-ipfs/setup.js
@@ -1,6 +1,8 @@
+import base32Encode from 'base32-encode';
+import base64 from 'base64-js';
 import extension from 'extensionizer';
-import getFetchWithTimeout from '../../../../shared/modules/fetch-with-timeout';
 import { SECOND } from '../../../../shared/constants/time';
+import getFetchWithTimeout from '../../../../shared/modules/fetch-with-timeout';
 import resolveEnsToIpfsContentId from './resolver';
 
 const fetchWithTimeout = getFetchWithTimeout(SECOND * 30);
@@ -81,6 +83,19 @@ export default function setupEnsIpfsResolver({
         url = `http://127.0.0.1:43110/${hash}${pathname}${search || ''}${
           fragment || ''
         }`;
+      } else if (type === 'skynet-ns') {
+        const padded = hash.padEnd(hash.length + 4 - (hash.length % 4), '=');
+        const decoded = base64.toByteArray(padded);
+
+        const options = { padding: false };
+        const base32EncodedSkylink = base32Encode(
+          decoded,
+          'RFC4648-HEX',
+          options,
+        ).toLowerCase();
+        url = `https://${base32EncodedSkylink}.siasky.net${pathname}${
+          search || ''
+        }${fragment || ''}`;
       }
     } catch (err) {
       console.warn(err);
diff --git a/package.json b/package.json
index f4a1ea337..f49fe85a6 100644
--- a/package.json
+++ b/package.json
@@ -94,6 +94,7 @@
     "3box": "^1.10.2",
     "@babel/runtime": "^7.5.5",
     "@download/blockies": "^1.0.3",
+    "@ensdomains/content-hash": "^2.5.6",
     "@ethereumjs/common": "^2.3.1",
     "@ethereumjs/tx": "^3.2.1",
     "@formatjs/intl-relativetimeformat": "^5.2.6",
@@ -118,10 +119,11 @@
     "abortcontroller-polyfill": "^1.4.0",
     "analytics-node": "^3.4.0-beta.3",
     "await-semaphore": "^0.1.1",
+    "base32-encode": "^1.2.0",
+    "base64-js": "^1.5.1",
     "bignumber.js": "^4.1.0",
     "bn.js": "^4.11.7",
     "classnames": "^2.2.6",
-    "content-hash": "^2.5.2",
     "copy-to-clipboard": "^3.0.8",
     "currency-formatter": "^1.4.2",
     "debounce-stream": "^2.0.0",
diff --git a/yarn.lock b/yarn.lock
index a3fc83e86..dccaea634 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1506,6 +1506,16 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 
+"@ensdomains/content-hash@^2.5.6":
+  version "2.5.6"
+  resolved "https://registry.yarnpkg.com/@ensdomains/content-hash/-/content-hash-2.5.6.tgz#f257fe94977288119c0b8317bdf2619550c2ac83"
+  integrity sha512-DQy7C7KqOcKnZVE18fQSwRC3z5s2DuKt9IBCT1Pd8g3E7ibMu3+jGXjdOCOSQ43FOiMn8+jO020sVci5kwJrPg==
+  dependencies:
+    cids "^1.1.5"
+    js-base64 "^3.6.0"
+    multicodec "^2.1.0"
+    multihashes "^2.0.0"
+
 "@eslint/eslintrc@^0.4.0":
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.0.tgz#99cc0a0584d72f1df38b900fb062ba995f395547"
@@ -2863,6 +2873,11 @@
     call-me-maybe "^1.0.1"
     glob-to-regexp "^0.3.0"
 
+"@multiformats/base-x@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@multiformats/base-x/-/base-x-4.0.1.tgz#95ff0fa58711789d53aefb2590a8b7a4e715d121"
+  integrity sha512-eMk0b9ReBbV23xXU693TAIrLyeO5iTgBZGSJfpqriG8UkYvr/hC9u9pyMlAakDNHWmbhMZCDs6KQO0jzKD8OTw==
+
 "@nodelib/fs.scandir@2.1.3":
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz#3a582bdb53804c6ba6d146579c46e52130cf4a3b"
@@ -4311,6 +4326,11 @@
   optionalDependencies:
     text-encoding "^0.6.4"
 
+"@zxing/text-encoding@0.9.0":
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/@zxing/text-encoding/-/text-encoding-0.9.0.tgz#fb50ffabc6c7c66a0c96b4c03e3d9be74864b70b"
+  integrity sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==
+
 JSONStream@^1.0.3, JSONStream@^1.3.5:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.5.tgz#3208c1f08d3a4d99261ab64f92302bc15e111ca0"
@@ -5432,6 +5452,11 @@ autoprefixer@^9.7.2, autoprefixer@^9.8.0:
     postcss "^7.0.32"
     postcss-value-parser "^4.1.0"
 
+available-typed-arrays@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.4.tgz#9e0ae84ecff20caae6a94a1c3bc39b955649b7a9"
+  integrity sha512-SA5mXJWrId1TaQjfxUYghbqQ/hYioKmLJvPJyDuYRtXXenFNMjj4hSSt1Cf1xsuXSXrtxrVC5Ot4eU6cOtBDdA==
+
 await-semaphore@^0.1.1, await-semaphore@^0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/await-semaphore/-/await-semaphore-0.1.3.tgz#2b88018cc8c28e06167ae1cdff02504f1f9688d3"
@@ -6353,7 +6378,7 @@ base-x@3.0.4:
   dependencies:
     safe-buffer "^5.0.1"
 
-base-x@3.0.8, base-x@^3.0.2:
+base-x@3.0.8, base-x@^3.0.2, base-x@^3.0.8:
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/base-x/-/base-x-3.0.8.tgz#1e1106c2537f0162e8b52474a557ebb09000018d"
   integrity sha512-Rl/1AWP4J/zRrk54hhlxH4drNxPJXYUaKffODVI53/dAsV4t9fBxyxYKAVPU1XBHxYwOWP9h9H0hM2MVw4YfJA==
@@ -6365,6 +6390,13 @@ base32-encode@^1.1.0:
   resolved "https://registry.yarnpkg.com/base32-encode/-/base32-encode-1.1.1.tgz#d022d86aca0002a751bbe1bf20eb4a9b1cef4e95"
   integrity sha512-eqa0BeGghj3guezlasdHJhr3+J5ZbbQvxeprkcDMbRQrjlqOT832IUDT4Al4ofAwekFYMqkkM9KMUHs9Cu0HKA==
 
+base32-encode@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/base32-encode/-/base32-encode-1.2.0.tgz#e150573a5e431af0a998e32bdfde7045725ca453"
+  integrity sha512-cHFU8XeRyx0GgmoWi5qHMCVRiqU6J3MHWxVgun7jggCBUpVzm1Ir7M9dYr2whjSNc3tFeXfQ/oZjQu/4u55h9A==
+  dependencies:
+    to-data-view "^1.1.0"
+
 base32.js@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/base32.js/-/base32.js-0.1.0.tgz#b582dec693c2f11e893cf064ee6ac5b6131a2202"
@@ -6375,7 +6407,7 @@ base64-arraybuffer@0.1.4:
   resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.4.tgz#9818c79e059b1355f97e0428a017c838e90ba812"
   integrity sha1-mBjHngWbE1X5fgQooBfIOOkLqBI=
 
-base64-js@^1.0.2, base64-js@^1.3.1:
+base64-js@^1.0.2, base64-js@^1.3.1, base64-js@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
   integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
@@ -7142,7 +7174,7 @@ buffer@^4.3.0:
     ieee754 "^1.1.4"
     isarray "^1.0.0"
 
-buffer@^5.0.5, buffer@^5.2.1:
+buffer@^5.0.5, buffer@^5.2.1, buffer@^5.5.0, buffer@^5.6.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
   integrity sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==
@@ -7691,6 +7723,16 @@ cids@^0.7.1, cids@~0.7.0, cids@~0.7.1:
     multicodec "~0.5.1"
     multihashes "~0.4.14"
 
+cids@^1.1.5:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/cids/-/cids-1.1.7.tgz#06aee89b9b5d615a7def86f2308a72bb642b7c7e"
+  integrity sha512-dlh+K0hMwFAFFjWQ2ZzxOhgGVNVREPdmk8cqHFui2U4sOodcemLMxdE5Ujga4cDcDQhWfldEPThkfu6KWBt1eA==
+  dependencies:
+    multibase "^4.0.1"
+    multicodec "^3.0.1"
+    multihashes "^4.0.1"
+    uint8arrays "^2.1.3"
+
 cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.4.tgz#8760e4ecc272f4c363532f926d874aae2c1397de"
@@ -12234,6 +12276,11 @@ for-own@^1.0.0:
   dependencies:
     for-in "^1.0.1"
 
+foreach@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
+  integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k=
+
 foreground-child@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/foreground-child/-/foreground-child-2.0.0.tgz#71b32800c9f15aa8f2f83f4a6bd9bff35d861a53"
@@ -15391,6 +15438,17 @@ is-symbol@^1.0.2, is-symbol@^1.0.3:
   dependencies:
     has-symbols "^1.0.1"
 
+is-typed-array@^1.1.3:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.5.tgz#f32e6e096455e329eb7b423862456aa213f0eb4e"
+  integrity sha512-S+GRDgJlR3PyEbsX/Fobd9cqpZBuvUS+8asRqYDMLCb2qMzt1oz5m5oxQCxOgUDxiWsOVNi4yaF+/uvdlHlYug==
+  dependencies:
+    available-typed-arrays "^1.0.2"
+    call-bind "^1.0.2"
+    es-abstract "^1.18.0-next.2"
+    foreach "^2.0.5"
+    has-symbols "^1.0.1"
+
 is-typedarray@^1.0.0, is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
@@ -16031,6 +16089,11 @@ join-component@^1.1.0:
   resolved "https://registry.yarnpkg.com/join-component/-/join-component-1.1.0.tgz#b8417b750661a392bee2c2537c68b2a9d4977cd5"
   integrity sha1-uEF7dQZho5K+4sJTfGiyqdSXfNU=
 
+js-base64@^3.6.0:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-3.6.1.tgz#555aae398b74694b4037af1f8a5a6209d170efbe"
+  integrity sha512-Frdq2+tRRGLQUIQOgsIGSCd1VePCS2fsddTG5dTCqR0JHgltXWfsxnY0gIXPoMeRmdom6Oyq+UMOFg5suduOjQ==
+
 js-sha256@^0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/js-sha256/-/js-sha256-0.9.0.tgz#0b89ac166583e91ef9123644bd3c5334ce9d0966"
@@ -18699,6 +18762,30 @@ multiaddr@^6.0.3, multiaddr@^6.0.4, multiaddr@^6.0.5, multiaddr@^6.0.6, multiadd
     is-ip "^2.0.0"
     varint "^5.0.0"
 
+multibase@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/multibase/-/multibase-2.0.0.tgz#e20a2a14813fa435dc69c702909209ac0741919e"
+  integrity sha512-xIrqUVsinSlFjqj+OtEgCJ6MRl5hXjHMBPWsUt1ZGSRMx8rzm+7hCLE4wDeSA3COomlUC9zHCoUlvWjvAMtfDg==
+  dependencies:
+    base-x "^3.0.8"
+    buffer "^5.5.0"
+    web-encoding "^1.0.2"
+
+multibase@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/multibase/-/multibase-3.1.2.tgz#59314e1e2c35d018db38e4c20bb79026827f0f2f"
+  integrity sha512-bpklWHs70LO3smJUHOjcnzGceJJvn9ui0Vau6Za0B/GBepaXswmW8Ufea0uD9pROf/qCQ4N4lZ3sf3U+SNf0tw==
+  dependencies:
+    "@multiformats/base-x" "^4.0.1"
+    web-encoding "^1.0.6"
+
+multibase@^4.0.1:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/multibase/-/multibase-4.0.4.tgz#55ef53e6acce223c5a09341a8a3a3d973871a577"
+  integrity sha512-8/JmrdSGzlw6KTgAJCOqUBSGd1V6186i/X8dDCGy/lbCKrQ+1QB6f3HE+wPr7Tpdj4U3gutaj9jG2rNX6UpiJg==
+  dependencies:
+    "@multiformats/base-x" "^4.0.1"
+
 multibase@~0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/multibase/-/multibase-0.6.0.tgz#0216e350614c7456da5e8e5b20d3fcd4c9104f56"
@@ -18721,6 +18808,22 @@ multicodec@^0.5.5, multicodec@~0.5.0, multicodec@~0.5.1, multicodec@~0.5.3:
   dependencies:
     varint "^5.0.0"
 
+multicodec@^2.1.0:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/multicodec/-/multicodec-2.1.3.tgz#b9850635ad4e2a285a933151b55b4a2294152a5d"
+  integrity sha512-0tOH2Gtio39uO41o+2xl9UhRkCWxU5ZmZSbFCh/OjGzkWJI8e6lkN/s4Mj1YfyWoBod+2+S3W+6wO6nhkwN8pA==
+  dependencies:
+    uint8arrays "1.1.0"
+    varint "^6.0.0"
+
+multicodec@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/multicodec/-/multicodec-3.1.0.tgz#bc96faee2118d1ff114a3ee9e870a030a3b65743"
+  integrity sha512-f6d4DhbQ9a8WiJ/wpbKgeJSeR0/juP/1wnjbKdZ0KAWDkC/z7Lb3xOegMUG+uTcfwSYf6j1eTvFf8HDgqPRGmQ==
+  dependencies:
+    uint8arrays "^2.1.5"
+    varint "^6.0.0"
+
 multihashes@^0.4.12, multihashes@^0.4.15, multihashes@~0.4.12, multihashes@~0.4.13, multihashes@~0.4.14, multihashes@~0.4.15:
   version "0.4.15"
   resolved "https://registry.yarnpkg.com/multihashes/-/multihashes-0.4.15.tgz#6dbc55f7f312c6782f5367c03c9783681589d8a6"
@@ -18729,6 +18832,25 @@ multihashes@^0.4.12, multihashes@^0.4.15, multihashes@~0.4.12, multihashes@~0.4.
     bs58 "^4.0.1"
     varint "^5.0.0"
 
+multihashes@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/multihashes/-/multihashes-2.0.0.tgz#4fa599d2d726ec6de33bf1e6f6d9f04b2351ace9"
+  integrity sha512-Mp94Y+7h3oWQx8JickVghlWR6VhRPDnlv/KZEUyNP0ISSkNEe3kQkWoyIGt1B45D6cTLoulg+MP6bugVewx32Q==
+  dependencies:
+    buffer "^5.6.0"
+    multibase "^2.0.0"
+    varint "^5.0.0"
+    web-encoding "^1.0.2"
+
+multihashes@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/multihashes/-/multihashes-4.0.2.tgz#d76aeac3a302a1bed9fe1ec964fb7a22fa662283"
+  integrity sha512-xpx++1iZr4ZQHjN1mcrXS6904R36LWLxX/CBifczjtmrtCXEX623DMWOF1eiNSg+pFpiZDFVBgou/4v6ayCHSQ==
+  dependencies:
+    multibase "^4.0.1"
+    uint8arrays "^2.1.3"
+    varint "^5.0.2"
+
 multihashing-async@~0.4.7, multihashing-async@~0.4.8:
   version "0.4.8"
   resolved "https://registry.yarnpkg.com/multihashing-async/-/multihashing-async-0.4.8.tgz#41572b25a8fc68eb318b8562409fdd721a727ea1"
@@ -25576,6 +25698,11 @@ to-arraybuffer@^1.0.0:
   resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
   integrity sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=
 
+to-data-view@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/to-data-view/-/to-data-view-1.1.0.tgz#08d6492b0b8deb9b29bdf1f61c23eadfa8994d00"
+  integrity sha512-1eAdufMg6mwgmlojAx3QeMnzB/BTVp7Tbndi3U7ftcT2zCZadjxkkmLmd97zmaxWi+sgGcgWrokmpEoy0Dn0vQ==
+
 to-fast-properties@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
@@ -25953,6 +26080,21 @@ typical@^5.0.0:
   resolved "https://registry.yarnpkg.com/typical/-/typical-5.1.0.tgz#7116ca103caf2574985fc84fbaa8fd0ee5ea1684"
   integrity sha512-t5Ik8UAwBal1P1XzuVE4dc+RYQZicLUGJdvqr/vdqsED7SQECgsGBylldSsfWZL7RQjxT3xhQcKHWhLaVSR6YQ==
 
+uint8arrays@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/uint8arrays/-/uint8arrays-1.1.0.tgz#d034aa65399a9fd213a1579e323f0b29f67d0ed2"
+  integrity sha512-cLdlZ6jnFczsKf5IH1gPHTtcHtPGho5r4CvctohmQjw8K7Q3gFdfIGHxSTdTaCKrL4w09SsPRJTqRS0drYeszA==
+  dependencies:
+    multibase "^3.0.0"
+    web-encoding "^1.0.2"
+
+uint8arrays@^2.1.3, uint8arrays@^2.1.5:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/uint8arrays/-/uint8arrays-2.1.5.tgz#9e6e6377a9463d5eba4620a3f0450f7eb389a351"
+  integrity sha512-CSR7AO+4AHUeSOnZ/NBNCElDeWfRh9bXtOck27083kc7SznmmHIhNEkEOCQOn0wvrIMjS3IH0TNLR16vuc46mA==
+  dependencies:
+    multibase "^4.0.1"
+
 umd@^3.0.0, umd@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/umd/-/umd-3.0.3.tgz#aa9fe653c42b9097678489c01000acb69f0b26cf"
@@ -26423,6 +26565,18 @@ util@^0.11.0:
   dependencies:
     inherits "2.0.3"
 
+util@^0.12.3:
+  version "0.12.4"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.12.4.tgz#66121a31420df8f01ca0c464be15dfa1d1850253"
+  integrity sha512-bxZ9qtSlGUWSOy9Qa9Xgk11kSslpuZwaxCg4sNIDj6FLucDab2JxnHwyNTCpHMtK1MjoQiWQ6DiUMZYbSrO+Sw==
+  dependencies:
+    inherits "^2.0.3"
+    is-arguments "^1.0.4"
+    is-generator-function "^1.0.7"
+    is-typed-array "^1.1.3"
+    safe-buffer "^5.1.2"
+    which-typed-array "^1.1.2"
+
 utila@^0.4.0, utila@~0.4:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
@@ -26514,6 +26668,16 @@ varint@^5.0.0, varint@~5.0.0:
   resolved "https://registry.yarnpkg.com/varint/-/varint-5.0.0.tgz#d826b89f7490732fabc0c0ed693ed475dcb29ebf"
   integrity sha1-2Ca4n3SQcy+rwMDtaT7Uddyynr8=
 
+varint@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/varint/-/varint-5.0.2.tgz#5b47f8a947eb668b848e034dcfa87d0ff8a7f7a4"
+  integrity sha512-lKxKYG6H03yCZUpAGOPOsMcGxd1RHCu1iKvEHYDPmTyq2HueGhD73ssNBqqQWfvYs04G9iUFRvmAVLW20Jw6ow==
+
+varint@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/varint/-/varint-6.0.0.tgz#9881eb0ce8feaea6512439d19ddf84bf551661d0"
+  integrity sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==
+
 varuint-bitcoin@^1.0.4:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/varuint-bitcoin/-/varuint-bitcoin-1.1.0.tgz#7a343f50537607af6a3059312b9782a170894540"
@@ -26741,6 +26905,15 @@ wcwidth@^1.0.0:
   dependencies:
     defaults "^1.0.3"
 
+web-encoding@^1.0.2, web-encoding@^1.0.6:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/web-encoding/-/web-encoding-1.1.5.tgz#fc810cf7667364a6335c939913f5051d3e0c4864"
+  integrity sha512-HYLeVCdJ0+lBYV2FvNZmv3HJ2Nt0QYXqZojk3d9FJOLkwnuhzM9tmamh8d7HPM8QqjKH8DeHkFTx+CFlWpZZDA==
+  dependencies:
+    util "^0.12.3"
+  optionalDependencies:
+    "@zxing/text-encoding" "0.9.0"
+
 web3-bzz@1.2.11:
   version "1.2.11"
   resolved "https://registry.yarnpkg.com/web3-bzz/-/web3-bzz-1.2.11.tgz#41bc19a77444bd5365744596d778b811880f707f"
@@ -27284,6 +27457,19 @@ which-module@^2.0.0:
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
   integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
 
+which-typed-array@^1.1.2:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.4.tgz#8fcb7d3ee5adf2d771066fba7cf37e32fe8711ff"
+  integrity sha512-49E0SpUe90cjpoc7BOJwyPHRqSAd12c10Qm2amdEZrJPCY2NDxaW01zHITrem+rnETY3dwrbH3UUrUwagfCYDA==
+  dependencies:
+    available-typed-arrays "^1.0.2"
+    call-bind "^1.0.0"
+    es-abstract "^1.18.0-next.1"
+    foreach "^2.0.5"
+    function-bind "^1.1.1"
+    has-symbols "^1.0.1"
+    is-typed-array "^1.1.3"
+
 which@1.3.1, which@^1.2.14, which@^1.2.9, which@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"

From dc25a24de3535116bd032b2eeb416a85cf2891e2 Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Fri, 16 Jul 2021 11:06:32 -0500
Subject: [PATCH 138/141] rely upon gas fee controller for gas price estimates
 (#11511)

---
 app/scripts/controllers/network/network.js    |   3 +
 app/scripts/metamask-controller.js            |  16 +-
 ...gas-modal-page-container-component.test.js |  40 +--
 .../gas-modal-page-container.component.js     |  28 +-
 .../gas-modal-page-container.container.js     |   2 -
 ui/ducks/gas/gas-action-constants.js          |   5 -
 ui/ducks/gas/gas-duck.test.js                 | 155 +--------
 ui/ducks/gas/gas.duck.js                      | 176 ----------
 ui/ducks/send/send.js                         | 204 ++++++------
 ui/ducks/send/send.test.js                    |  57 +---
 ui/hooks/useCancelTransaction.js              |   7 +-
 ui/hooks/useGasFeeEstimates.js                |   8 +-
 ui/hooks/useRetryTransaction.js               |  10 +-
 ui/hooks/useRetryTransaction.test.js          |   4 +
 .../confirm-send-ether.component.js           |   5 +-
 .../confirm-send-ether.container.js           |   4 +-
 .../confirm-transaction.component.js          |  28 +-
 .../confirm-transaction.container.js          |   2 -
 .../amount-max-button.test.js                 |  22 +-
 ui/pages/send/send.test.js                    |  24 +-
 ui/selectors/custom-gas.js                    | 139 ++++----
 ui/selectors/custom-gas.test.js               | 312 +++++++++++-------
 22 files changed, 525 insertions(+), 726 deletions(-)

diff --git a/app/scripts/controllers/network/network.js b/app/scripts/controllers/network/network.js
index 2056cc154..f9b4f52a9 100644
--- a/app/scripts/controllers/network/network.js
+++ b/app/scripts/controllers/network/network.js
@@ -162,6 +162,9 @@ export default class NetworkController extends EventEmitter {
    */
   async getEIP1559Compatibility() {
     const { EIPS } = this.networkDetails.getState();
+    if (process.env.SHOW_EIP_1559_UI === false) {
+      return false;
+    }
     if (EIPS[1559] !== undefined) {
       return EIPS[1559];
     }
diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
index b45a1a613..1f9aeca20 100644
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@@ -196,11 +196,17 @@ export default class MetamaskController extends EventEmitter {
       getCurrentAccountEIP1559Compatibility: this.getCurrentAccountEIP1559Compatibility.bind(
         this,
       ),
-      getCurrentNetworkLegacyGasAPICompatibility: () =>
-        this.networkController.getCurrentChainId() === MAINNET_CHAIN_ID,
-      getChainId: this.networkController.getCurrentChainId.bind(
-        this.networkController,
-      ),
+      legacyAPIEndpoint: `https://gas-api.metaswap.codefi.network/networks/<chain_id>/gasPrices`,
+      EIP1559APIEndpoint: `https://gas-api.metaswap.codefi.network/networks/<chain_id>/suggestedGasFees`,
+      getCurrentNetworkLegacyGasAPICompatibility: () => {
+        const chainId = this.networkController.getCurrentChainId();
+        return process.env.IN_TEST || chainId === MAINNET_CHAIN_ID;
+      },
+      getChainId: () => {
+        return process.env.IN_TEST
+          ? MAINNET_CHAIN_ID
+          : this.networkController.getCurrentChainId();
+      },
     });
 
     this.appStateController = new AppStateController({
diff --git a/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container-component.test.js b/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container-component.test.js
index d88a3ab98..5b8f5c665 100644
--- a/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container-component.test.js
+++ b/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container-component.test.js
@@ -1,22 +1,23 @@
 import React from 'react';
 import sinon from 'sinon';
 import { shallowWithContext } from '../../../../../test/lib/render-helpers';
+import { getGasFeeEstimatesAndStartPolling } from '../../../../store/actions';
 
 import PageContainer from '../../../ui/page-container';
 
 import { Tab } from '../../../ui/tabs';
 import GasModalPageContainer from './gas-modal-page-container.component';
 
-const mockBasicGasEstimates = {
-  average: '20',
-};
+jest.mock('../../../../store/actions', () => ({
+  disconnectGasFeeEstimatePoller: jest.fn(),
+  getGasFeeEstimatesAndStartPolling: jest
+    .fn()
+    .mockImplementation(() => Promise.resolve()),
+}));
 
 const propsMethodSpies = {
   cancelAndClose: sinon.spy(),
   onSubmit: sinon.spy(),
-  fetchBasicGasEstimates: sinon
-    .stub()
-    .returns(Promise.resolve(mockBasicGasEstimates)),
 };
 
 const mockGasPriceButtonGroupProps = {
@@ -67,7 +68,6 @@ describe('GasModalPageContainer Component', () => {
       <GasModalPageContainer
         cancelAndClose={propsMethodSpies.cancelAndClose}
         onSubmit={propsMethodSpies.onSubmit}
-        fetchBasicGasEstimates={propsMethodSpies.fetchBasicGasEstimates}
         updateCustomGasPrice={() => 'mockupdateCustomGasPrice'}
         updateCustomGasLimit={() => 'mockupdateCustomGasLimit'}
         gasPriceButtonGroupProps={mockGasPriceButtonGroupProps}
@@ -83,18 +83,15 @@ describe('GasModalPageContainer Component', () => {
 
   afterEach(() => {
     propsMethodSpies.cancelAndClose.resetHistory();
+    jest.clearAllMocks();
   });
 
   describe('componentDidMount', () => {
-    it('should call props.fetchBasicGasEstimates', () => {
-      propsMethodSpies.fetchBasicGasEstimates.resetHistory();
-      expect(propsMethodSpies.fetchBasicGasEstimates.callCount).toStrictEqual(
-        0,
-      );
+    it('should call getGasFeeEstimatesAndStartPolling', () => {
+      jest.clearAllMocks();
+      expect(getGasFeeEstimatesAndStartPolling).not.toHaveBeenCalled();
       wrapper.instance().componentDidMount();
-      expect(propsMethodSpies.fetchBasicGasEstimates.callCount).toStrictEqual(
-        1,
-      );
+      expect(getGasFeeEstimatesAndStartPolling).toHaveBeenCalled();
     });
   });
 
@@ -120,20 +117,18 @@ describe('GasModalPageContainer Component', () => {
     });
 
     it('should pass the correct renderTabs property to PageContainer', () => {
-      sinon.stub(GP, 'renderTabs').returns('mockTabs');
+      jest
+        .spyOn(GasModalPageContainer.prototype, 'renderTabs')
+        .mockImplementation(() => 'mockTabs');
       const renderTabsWrapperTester = shallowWithContext(
-        <GasModalPageContainer
-          fetchBasicGasEstimates={propsMethodSpies.fetchBasicGasEstimates}
-          fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
-          customPriceIsExcessive={false}
-        />,
+        <GasModalPageContainer customPriceIsExcessive={false} />,
         { context: { t: (str1, str2) => (str2 ? str1 + str2 : str1) } },
       );
       const { tabsComponent } = renderTabsWrapperTester
         .find(PageContainer)
         .props();
       expect(tabsComponent).toStrictEqual('mockTabs');
-      GasModalPageContainer.prototype.renderTabs.restore();
+      GasModalPageContainer.prototype.renderTabs.mockClear();
     });
   });
 
@@ -195,7 +190,6 @@ describe('GasModalPageContainer Component', () => {
         <GasModalPageContainer
           cancelAndClose={propsMethodSpies.cancelAndClose}
           onSubmit={propsMethodSpies.onSubmit}
-          fetchBasicGasEstimates={propsMethodSpies.fetchBasicGasEstimates}
           updateCustomGasPrice={() => 'mockupdateCustomGasPrice'}
           updateCustomGasLimit={() => 'mockupdateCustomGasLimit'}
           gasPriceButtonGroupProps={mockGasPriceButtonGroupProps}
diff --git a/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js b/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
index ea59b7882..aaa28a056 100644
--- a/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
+++ b/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
@@ -2,6 +2,10 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import PageContainer from '../../../ui/page-container';
 import { Tabs, Tab } from '../../../ui/tabs';
+import {
+  disconnectGasFeeEstimatePoller,
+  getGasFeeEstimatesAndStartPolling,
+} from '../../../../store/actions';
 import AdvancedTabContent from './advanced-tab-content';
 import BasicTabContent from './basic-tab-content';
 
@@ -17,7 +21,6 @@ export default class GasModalPageContainer extends Component {
     updateCustomGasPrice: PropTypes.func,
     updateCustomGasLimit: PropTypes.func,
     insufficientBalance: PropTypes.bool,
-    fetchBasicGasEstimates: PropTypes.func,
     gasPriceButtonGroupProps: PropTypes.object,
     infoRowProps: PropTypes.shape({
       originalTotalFiat: PropTypes.string,
@@ -38,8 +41,29 @@ export default class GasModalPageContainer extends Component {
     customPriceIsExcessive: PropTypes.bool.isRequired,
   };
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      pollingToken: undefined,
+    };
+  }
+
   componentDidMount() {
-    this.props.fetchBasicGasEstimates();
+    this._isMounted = true;
+    getGasFeeEstimatesAndStartPolling().then((pollingToken) => {
+      if (this._isMounted) {
+        this.setState({ pollingToken });
+      } else {
+        disconnectGasFeeEstimatePoller(pollingToken);
+      }
+    });
+  }
+
+  componentWillUnmount() {
+    this._isMounted = false;
+    if (this.state.pollingToken) {
+      disconnectGasFeeEstimatePoller(this.state.pollingToken);
+    }
   }
 
   renderBasicTabContent(gasPriceButtonGroupProps) {
diff --git a/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js b/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
index a1a262589..571544cf0 100644
--- a/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
+++ b/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
@@ -10,7 +10,6 @@ import {
   setCustomGasPrice,
   setCustomGasLimit,
   resetCustomData,
-  fetchBasicGasEstimates,
 } from '../../../../ducks/gas/gas.duck';
 import {
   getSendMaxModeState,
@@ -225,7 +224,6 @@ const mapDispatchToProps = (dispatch) => {
       return dispatch(createSpeedUpTransaction(txId, customGasSettings));
     },
     hideSidebar: () => dispatch(hideSidebar()),
-    fetchBasicGasEstimates: () => dispatch(fetchBasicGasEstimates()),
   };
 };
 
diff --git a/ui/ducks/gas/gas-action-constants.js b/ui/ducks/gas/gas-action-constants.js
index 19cb16ee7..18d1d8dc8 100644
--- a/ui/ducks/gas/gas-action-constants.js
+++ b/ui/ducks/gas/gas-action-constants.js
@@ -4,11 +4,6 @@
 // untangling is having the constants separate.
 
 // Actions
-export const BASIC_GAS_ESTIMATE_STATUS =
-  'metamask/gas/BASIC_GAS_ESTIMATE_STATUS';
 export const RESET_CUSTOM_DATA = 'metamask/gas/RESET_CUSTOM_DATA';
-export const SET_BASIC_GAS_ESTIMATE_DATA =
-  'metamask/gas/SET_BASIC_GAS_ESTIMATE_DATA';
 export const SET_CUSTOM_GAS_LIMIT = 'metamask/gas/SET_CUSTOM_GAS_LIMIT';
 export const SET_CUSTOM_GAS_PRICE = 'metamask/gas/SET_CUSTOM_GAS_PRICE';
-export const SET_ESTIMATE_SOURCE = 'metamask/gas/SET_ESTIMATE_SOURCE';
diff --git a/ui/ducks/gas/gas-duck.test.js b/ui/ducks/gas/gas-duck.test.js
index 221e4dbd8..f5998012a 100644
--- a/ui/ducks/gas/gas-duck.test.js
+++ b/ui/ducks/gas/gas-duck.test.js
@@ -1,36 +1,14 @@
-import nock from 'nock';
 import sinon from 'sinon';
-import BN from 'bn.js';
 
-import GasReducer, {
-  setBasicEstimateStatus,
-  setBasicGasEstimateData,
-  setCustomGasPrice,
-  setCustomGasLimit,
-  fetchBasicGasEstimates,
-} from './gas.duck';
+import GasReducer, { setCustomGasPrice, setCustomGasLimit } from './gas.duck';
 
 import {
-  BASIC_GAS_ESTIMATE_STATUS,
-  SET_BASIC_GAS_ESTIMATE_DATA,
   SET_CUSTOM_GAS_PRICE,
   SET_CUSTOM_GAS_LIMIT,
-  SET_ESTIMATE_SOURCE,
 } from './gas-action-constants';
 
-jest.mock('../../helpers/utils/storage-helpers.js', () => ({
-  getStorageItem: jest.fn(),
-  setStorageItem: jest.fn(),
-}));
-
 describe('Gas Duck', () => {
   let tempDateNow;
-  const mockGasPriceApiResponse = {
-    SafeGasPrice: 10,
-    ProposeGasPrice: 20,
-    FastGasPrice: 30,
-  };
-
   beforeEach(() => {
     tempDateNow = global.Date.now;
 
@@ -51,22 +29,6 @@ describe('Gas Duck', () => {
       price: null,
       limit: null,
     },
-    basicEstimates: {
-      average: null,
-      fast: null,
-      safeLow: null,
-    },
-    basicEstimateStatus: 'LOADING',
-    estimateSource: '',
-  };
-
-  const providerState = {
-    chainId: '0x1',
-    nickname: '',
-    rpcPrefs: {},
-    rpcUrl: '',
-    ticker: 'ETH',
-    type: 'mainnet',
   };
 
   describe('GasReducer()', () => {
@@ -83,27 +45,6 @@ describe('Gas Duck', () => {
       ).toStrictEqual(mockState);
     });
 
-    it('should set basicEstimateStatus to LOADING when receiving a BASIC_GAS_ESTIMATE_STATUS action with value LOADING', () => {
-      expect(
-        GasReducer(mockState, {
-          type: BASIC_GAS_ESTIMATE_STATUS,
-          value: 'LOADING',
-        }),
-      ).toStrictEqual({ basicEstimateStatus: 'LOADING', ...mockState });
-    });
-
-    it('should set basicEstimates when receiving a SET_BASIC_GAS_ESTIMATE_DATA action', () => {
-      expect(
-        GasReducer(mockState, {
-          type: SET_BASIC_GAS_ESTIMATE_DATA,
-          value: { someProp: 'someData123' },
-        }),
-      ).toStrictEqual({
-        basicEstimates: { someProp: 'someData123' },
-        ...mockState,
-      });
-    });
-
     it('should set customData.price when receiving a SET_CUSTOM_GAS_PRICE action', () => {
       expect(
         GasReducer(mockState, {
@@ -123,100 +64,6 @@ describe('Gas Duck', () => {
     });
   });
 
-  it('should set estimateSource to Metaswaps when receiving a SET_ESTIMATE_SOURCE action with value Metaswaps', () => {
-    expect(
-      GasReducer(mockState, { type: SET_ESTIMATE_SOURCE, value: 'Metaswaps' }),
-    ).toStrictEqual({ estimateSource: 'Metaswaps', ...mockState });
-  });
-
-  describe('basicEstimateStatus', () => {
-    it('should create the correct action', () => {
-      expect(setBasicEstimateStatus('LOADING')).toStrictEqual({
-        type: BASIC_GAS_ESTIMATE_STATUS,
-        value: 'LOADING',
-      });
-    });
-  });
-
-  describe('fetchBasicGasEstimates', () => {
-    it('should call fetch with the expected params', async () => {
-      const mockDistpatch = sinon.spy();
-      const windowFetchSpy = sinon.spy(window, 'fetch');
-
-      nock('https://api.metaswap.codefi.network')
-        .get('/gasPrices')
-        .reply(200, mockGasPriceApiResponse);
-
-      await fetchBasicGasEstimates()(mockDistpatch, () => ({
-        gas: { ...initState },
-        metamask: { provider: { ...providerState } },
-      }));
-
-      expect(mockDistpatch.getCall(0).args).toStrictEqual([
-        { type: 'metamask/gas/BASIC_GAS_ESTIMATE_STATUS', value: 'LOADING' },
-      ]);
-
-      expect(
-        windowFetchSpy
-          .getCall(0)
-          .args[0].startsWith('https://api.metaswap.codefi.network/gasPrices'),
-      ).toStrictEqual(true);
-
-      expect(mockDistpatch.getCall(2).args).toStrictEqual([
-        { type: 'metamask/gas/SET_ESTIMATE_SOURCE', value: 'MetaSwaps' },
-      ]);
-
-      expect(mockDistpatch.getCall(4).args).toStrictEqual([
-        { type: 'metamask/gas/BASIC_GAS_ESTIMATE_STATUS', value: 'READY' },
-      ]);
-    });
-
-    it('should call fetch with the expected params for test network', async () => {
-      global.eth = { gasPrice: sinon.fake.returns(new BN(48199313, 10)) };
-
-      const mockDistpatch = sinon.spy();
-      const providerStateForTestNetwork = {
-        chainId: '0x5',
-        nickname: '',
-        rpcPrefs: {},
-        rpcUrl: '',
-        ticker: 'ETH',
-        type: 'goerli',
-      };
-
-      await fetchBasicGasEstimates()(mockDistpatch, () => ({
-        gas: { ...initState, basicPriceAEstimatesLastRetrieved: 1000000 },
-        metamask: { provider: { ...providerStateForTestNetwork } },
-      }));
-      expect(mockDistpatch.getCall(0).args).toStrictEqual([
-        { type: 'metamask/gas/BASIC_GAS_ESTIMATE_STATUS', value: 'LOADING' },
-      ]);
-      expect(mockDistpatch.getCall(1).args).toStrictEqual([
-        { type: 'metamask/gas/SET_ESTIMATE_SOURCE', value: 'eth_gasprice' },
-      ]);
-      expect(mockDistpatch.getCall(2).args).toStrictEqual([
-        {
-          type: SET_BASIC_GAS_ESTIMATE_DATA,
-          value: {
-            average: 0.0482,
-          },
-        },
-      ]);
-      expect(mockDistpatch.getCall(3).args).toStrictEqual([
-        { type: 'metamask/gas/BASIC_GAS_ESTIMATE_STATUS', value: 'READY' },
-      ]);
-    });
-  });
-
-  describe('setBasicGasEstimateData', () => {
-    it('should create the correct action', () => {
-      expect(setBasicGasEstimateData('mockBasicEstimatData')).toStrictEqual({
-        type: SET_BASIC_GAS_ESTIMATE_DATA,
-        value: 'mockBasicEstimatData',
-      });
-    });
-  });
-
   describe('setCustomGasPrice', () => {
     it('should create the correct action', () => {
       expect(setCustomGasPrice('mockCustomGasPrice')).toStrictEqual({
diff --git a/ui/ducks/gas/gas.duck.js b/ui/ducks/gas/gas.duck.js
index a41c313c5..ea045a2c4 100644
--- a/ui/ducks/gas/gas.duck.js
+++ b/ui/ducks/gas/gas.duck.js
@@ -1,62 +1,20 @@
 import { cloneDeep } from 'lodash';
-import BigNumber from 'bignumber.js';
 import {
-  getStorageItem,
-  setStorageItem,
-} from '../../helpers/utils/storage-helpers';
-import {
-  decGWEIToHexWEI,
-  getValueFromWeiHex,
-} from '../../helpers/utils/conversions.util';
-import { getIsMainnet, getCurrentChainId } from '../../selectors';
-import fetchWithCache from '../../helpers/utils/fetch-with-cache';
-import {
-  BASIC_GAS_ESTIMATE_STATUS,
   RESET_CUSTOM_DATA,
-  SET_BASIC_GAS_ESTIMATE_DATA,
   SET_CUSTOM_GAS_LIMIT,
   SET_CUSTOM_GAS_PRICE,
-  SET_ESTIMATE_SOURCE,
 } from './gas-action-constants';
 
-export const BASIC_ESTIMATE_STATES = {
-  LOADING: 'LOADING',
-  FAILED: 'FAILED',
-  READY: 'READY',
-};
-
-export const GAS_SOURCE = {
-  METASWAPS: 'MetaSwaps',
-  ETHGASPRICE: 'eth_gasprice',
-};
-
 const initState = {
   customData: {
     price: null,
     limit: null,
   },
-  basicEstimates: {
-    safeLow: null,
-    average: null,
-    fast: null,
-  },
-  basicEstimateStatus: BASIC_ESTIMATE_STATES.LOADING,
-  estimateSource: '',
 };
 
 // Reducer
 export default function reducer(state = initState, action) {
   switch (action.type) {
-    case BASIC_GAS_ESTIMATE_STATUS:
-      return {
-        ...state,
-        basicEstimateStatus: action.value,
-      };
-    case SET_BASIC_GAS_ESTIMATE_DATA:
-      return {
-        ...state,
-        basicEstimates: action.value,
-      };
     case SET_CUSTOM_GAS_PRICE:
       return {
         ...state,
@@ -78,138 +36,11 @@ export default function reducer(state = initState, action) {
         ...state,
         customData: cloneDeep(initState.customData),
       };
-    case SET_ESTIMATE_SOURCE:
-      return {
-        ...state,
-        estimateSource: action.value,
-      };
     default:
       return state;
   }
 }
 
-// Action Creators
-export function setBasicEstimateStatus(status) {
-  return {
-    type: BASIC_GAS_ESTIMATE_STATUS,
-    value: status,
-  };
-}
-
-async function basicGasPriceQuery() {
-  const url = `https://api.metaswap.codefi.network/gasPrices`;
-  return await fetchWithCache(
-    url,
-    {
-      referrer: url,
-      referrerPolicy: 'no-referrer-when-downgrade',
-      method: 'GET',
-      mode: 'cors',
-    },
-    { cacheRefreshTime: 75000 },
-  );
-}
-
-export function fetchBasicGasEstimates() {
-  return async (dispatch, getState) => {
-    const isMainnet = getIsMainnet(getState());
-
-    dispatch(setBasicEstimateStatus(BASIC_ESTIMATE_STATES.LOADING));
-    let basicEstimates;
-    try {
-      dispatch(setEstimateSource(GAS_SOURCE.ETHGASPRICE));
-      if (isMainnet || process.env.IN_TEST) {
-        try {
-          basicEstimates = await fetchExternalBasicGasEstimates();
-          dispatch(setEstimateSource(GAS_SOURCE.METASWAPS));
-        } catch (error) {
-          basicEstimates = await fetchEthGasPriceEstimates(getState());
-        }
-      } else {
-        basicEstimates = await fetchEthGasPriceEstimates(getState());
-      }
-      dispatch(setBasicGasEstimateData(basicEstimates));
-      dispatch(setBasicEstimateStatus(BASIC_ESTIMATE_STATES.READY));
-    } catch (error) {
-      dispatch(setBasicEstimateStatus(BASIC_ESTIMATE_STATES.FAILED));
-    }
-
-    return basicEstimates;
-  };
-}
-
-async function fetchExternalBasicGasEstimates() {
-  const {
-    SafeGasPrice,
-    ProposeGasPrice,
-    FastGasPrice,
-  } = await basicGasPriceQuery();
-
-  const [safeLow, average, fast] = [
-    SafeGasPrice,
-    ProposeGasPrice,
-    FastGasPrice,
-  ].map((price) => new BigNumber(price, 10).toNumber());
-
-  const basicEstimates = {
-    safeLow,
-    average,
-    fast,
-  };
-
-  return basicEstimates;
-}
-
-async function fetchEthGasPriceEstimates(state) {
-  const chainId = getCurrentChainId(state);
-  const [cachedTimeLastRetrieved, cachedBasicEstimates] = await Promise.all([
-    getStorageItem(`${chainId}_BASIC_PRICE_ESTIMATES_LAST_RETRIEVED`),
-    getStorageItem(`${chainId}_BASIC_PRICE_ESTIMATES`),
-  ]);
-  const timeLastRetrieved = cachedTimeLastRetrieved || 0;
-  if (cachedBasicEstimates && Date.now() - timeLastRetrieved < 75000) {
-    return cachedBasicEstimates;
-  }
-  const gasPrice = await global.eth.gasPrice();
-  const averageGasPriceInDecGWEI = getValueFromWeiHex({
-    value: gasPrice.toString(16),
-    numberOfDecimals: 4,
-    toDenomination: 'GWEI',
-  });
-  const basicEstimates = {
-    average: Number(averageGasPriceInDecGWEI),
-  };
-  const timeRetrieved = Date.now();
-
-  await Promise.all([
-    setStorageItem(`${chainId}_BASIC_PRICE_ESTIMATES`, basicEstimates),
-    setStorageItem(
-      `${chainId}_BASIC_PRICE_ESTIMATES_LAST_RETRIEVED`,
-      timeRetrieved,
-    ),
-  ]);
-
-  return basicEstimates;
-}
-
-export function setCustomGasPriceForRetry(newPrice) {
-  return async (dispatch) => {
-    if (newPrice === '0x0') {
-      const { fast } = await fetchExternalBasicGasEstimates();
-      dispatch(setCustomGasPrice(decGWEIToHexWEI(fast)));
-    } else {
-      dispatch(setCustomGasPrice(newPrice));
-    }
-  };
-}
-
-export function setBasicGasEstimateData(basicGasEstimateData) {
-  return {
-    type: SET_BASIC_GAS_ESTIMATE_DATA,
-    value: basicGasEstimateData,
-  };
-}
-
 export function setCustomGasPrice(newPrice) {
   return {
     type: SET_CUSTOM_GAS_PRICE,
@@ -227,10 +58,3 @@ export function setCustomGasLimit(newLimit) {
 export function resetCustomData() {
   return { type: RESET_CUSTOM_DATA };
 }
-
-export function setEstimateSource(estimateSource) {
-  return {
-    type: SET_ESTIMATE_SOURCE,
-    value: estimateSource,
-  };
-}
diff --git a/ui/ducks/send/send.js b/ui/ducks/send/send.js
index 238230986..675117d45 100644
--- a/ui/ducks/send/send.js
+++ b/ui/ducks/send/send.js
@@ -50,15 +50,7 @@ import {
   updateTokenType,
   updateTransaction,
 } from '../../store/actions';
-import {
-  fetchBasicGasEstimates,
-  setCustomGasLimit,
-  BASIC_ESTIMATE_STATES,
-} from '../gas/gas.duck';
-import {
-  SET_BASIC_GAS_ESTIMATE_DATA,
-  BASIC_GAS_ESTIMATE_STATUS,
-} from '../gas/gas-action-constants';
+import { setCustomGasLimit } from '../gas/gas.duck';
 import {
   QR_CODE_DETECTED,
   SELECTED_ACCOUNT_CHANGED,
@@ -77,13 +69,18 @@ import {
   isOriginContractAddress,
   isValidDomainName,
 } from '../../helpers/utils/util';
-import { getTokens, getUnapprovedTxs } from '../metamask/metamask';
+import {
+  getGasEstimateType,
+  getTokens,
+  getUnapprovedTxs,
+} from '../metamask/metamask';
 import { resetEnsResolution } from '../ens';
 import {
   isBurnAddress,
   isValidHexAddress,
 } from '../../../shared/modules/hexstring-utils';
 import { CHAIN_ID_TO_GAS_LIMIT_BUFFER_MAP } from '../../../shared/constants/network';
+import { ETH, GWEI } from '../../helpers/constants/common';
 
 // typedefs
 /**
@@ -186,8 +183,19 @@ async function estimateGasLimitForSend({
   let isSimpleSendOnNonStandardNetwork = false;
 
   // blockGasLimit may be a falsy, but defined, value when we receive it from
-  // state, so we use logical or to fall back to MIN_GAS_LIMIT_HEX.
-  const blockGasLimit = options.blockGasLimit || MIN_GAS_LIMIT_HEX;
+  // state, so we use logical or to fall back to MIN_GAS_LIMIT_HEX. Some
+  // network implementations check the gas parameter supplied to
+  // eth_estimateGas for validity. For this reason, we set token sends
+  // blockGasLimit default to a higher number. Note that the current gasLimit
+  // on a BLOCK is 15,000,000 and will be 30,000,000 on mainnet after London.
+  // Meanwhile, MIN_GAS_LIMIT_HEX is 0x5208.
+  let blockGasLimit = MIN_GAS_LIMIT_HEX;
+  if (options.blockGasLimit) {
+    blockGasLimit = options.blockGasLimit;
+  } else if (sendToken) {
+    blockGasLimit = GAS_LIMITS.BASE_TOKEN_ESTIMATE;
+  }
+
   // The parameters below will be sent to our background process to estimate
   // how much gas will be used for a transaction. That background process is
   // located in tx-gas-utils.js in the transaction controller folder.
@@ -342,7 +350,7 @@ export const computeEstimatedGasLimit = createAsyncThunk(
     if (send.stage !== SEND_STAGES.EDIT) {
       const gasLimit = await estimateGasLimitForSend({
         gasPrice: send.gas.gasPrice,
-        blockGasLimit: metamask.blockGasLimit,
+        blockGasLimit: metamask.currentBlockGasLimit,
         selectedAddress: metamask.selectedAddress,
         sendToken: send.asset.details,
         to: send.recipient.address?.toLowerCase(),
@@ -360,6 +368,29 @@ export const computeEstimatedGasLimit = createAsyncThunk(
   },
 );
 
+/**
+ * This method is used to keep the original logic from the gas.duck.js file
+ * after receiving a gasPrice from eth_gasPrice. First, the returned gasPrice
+ * was converted to GWEI, then it was converted to a Number, then in the send
+ * duck (here) we would use getGasPriceInHexWei to get back to hexWei. Now that
+ * we receive a GWEI estimate from the controller, we still need to do this
+ * weird conversion to get the proper rounding.
+ * @param {T} gasPriceEstimate
+ * @returns
+ */
+function getRoundedGasPrice(gasPriceEstimate) {
+  const gasPriceInDecGwei = conversionUtil(gasPriceEstimate, {
+    numberOfDecimals: 4,
+    toDenomination: GWEI,
+    fromNumericBase: 'dec',
+    toNumericBase: 'dec',
+    fromCurrency: ETH,
+    fromDenomination: GWEI,
+  });
+  const gasPriceAsNumber = Number(gasPriceInDecGwei);
+  return getGasPriceInHexWei(gasPriceAsNumber);
+}
+
 /**
  * Responsible for initializing required state for the send slice.
  * This method is dispatched from the send page in the componentDidMount
@@ -395,48 +426,31 @@ export const initializeSendState = createAsyncThunk(
 
     // Default gasPrice to 1 gwei if all estimation fails
     let gasPrice = '0x1';
-    let basicEstimateStatus = BASIC_ESTIMATE_STATES.LOADING;
     let gasEstimatePollToken = null;
 
-    if (Boolean(process.env.SHOW_EIP_1559_UI) === false) {
-      // Initiate gas slices work to fetch gasPrice estimates. We need to get the
-      // new state after this is set to determine if initialization can proceed.
-      await thunkApi.dispatch(fetchBasicGasEstimates());
-      const {
-        gas: { basicEstimates, basicEstimateStatus: apiBasicEstimateStatus },
-      } = thunkApi.getState();
+    // Instruct the background process that polling for gas prices should begin
+    gasEstimatePollToken = await getGasFeeEstimatesAndStartPolling();
+    const {
+      metamask: { gasFeeEstimates, gasEstimateType },
+    } = thunkApi.getState();
 
-      basicEstimateStatus = apiBasicEstimateStatus;
-
-      if (basicEstimateStatus === BASIC_ESTIMATE_STATES.READY) {
-        gasPrice = getGasPriceInHexWei(basicEstimates.average);
-      }
-    } else {
-      // Instruct the background process that polling for gas prices should begin
-      gasEstimatePollToken = await getGasFeeEstimatesAndStartPolling();
-      const {
-        metamask: { gasFeeEstimates, gasEstimateType },
-      } = thunkApi.getState();
-
-      if (gasEstimateType === GAS_ESTIMATE_TYPES.LEGACY) {
-        gasPrice = getGasPriceInHexWei(gasFeeEstimates.medium);
-      } else if (gasEstimateType === GAS_ESTIMATE_TYPES.ETH_GASPRICE) {
-        gasPrice = getGasPriceInHexWei(gasFeeEstimates.gasPrice);
-      } else if (gasEstimateType === GAS_ESTIMATE_TYPES.FEE_MARKET) {
-        gasPrice = getGasPriceInHexWei(
-          gasFeeEstimates.medium.suggestedMaxFeePerGas,
-        );
-      }
-
-      basicEstimateStatus = BASIC_ESTIMATE_STATES.READY;
+    if (gasEstimateType === GAS_ESTIMATE_TYPES.LEGACY) {
+      gasPrice = getGasPriceInHexWei(gasFeeEstimates.medium);
+    } else if (gasEstimateType === GAS_ESTIMATE_TYPES.ETH_GASPRICE) {
+      gasPrice = getRoundedGasPrice(gasFeeEstimates.gasPrice);
+    } else if (gasEstimateType === GAS_ESTIMATE_TYPES.FEE_MARKET) {
+      gasPrice = getGasPriceInHexWei(
+        gasFeeEstimates.medium.suggestedMaxFeePerGas,
+      );
     }
+
     // Set a basic gasLimit in the event that other estimation fails
     let gasLimit =
       asset.type === ASSET_TYPES.TOKEN
         ? GAS_LIMITS.BASE_TOKEN_ESTIMATE
         : GAS_LIMITS.SIMPLE;
     if (
-      basicEstimateStatus === BASIC_ESTIMATE_STATES.READY &&
+      gasEstimateType !== GAS_ESTIMATE_TYPES.NONE &&
       stage !== SEND_STAGES.EDIT &&
       recipient.address
     ) {
@@ -444,7 +458,7 @@ export const initializeSendState = createAsyncThunk(
       // required gas. If this value isn't nullish, set it as the new gasLimit
       const estimatedGasLimit = await estimateGasLimitForSend({
         gasPrice,
-        blockGasLimit: metamask.blockGasLimit,
+        blockGasLimit: metamask.currentBlockGasLimit,
         selectedAddress: fromAddress,
         sendToken: asset.details,
         to: recipient.address.toLowerCase(),
@@ -508,9 +522,12 @@ export const initialState = {
     isCustomGasSet: false,
     // maximum gas needed for tx
     gasLimit: '0x0',
-    // price in gwei to pay per gas
+    // price in wei to pay per gas
     gasPrice: '0x0',
-    // maximum total price in gwei to pay
+    // expected price in wei necessary to pay per gas used for a transaction
+    // to be included in a reasonable timeframe. Comes from GasFeeController.
+    gasPriceEstimate: '0x0',
+    // maximum total price in wei to pay
     gasTotal: '0x0',
     // minimum supported gasLimit
     minimumGasLimit: GAS_LIMITS.SIMPLE,
@@ -761,7 +778,9 @@ const slice = createSlice({
       // We keep a copy of txParams in state that could be submitted to the
       // network if the form state is valid.
       if (state.status === SEND_STATUSES.VALID) {
-        state.draftTransaction.txParams.from = state.account.address;
+        if (state.stage !== SEND_STAGES.EDIT) {
+          state.draftTransaction.txParams.from = state.account.address;
+        }
         switch (state.asset.type) {
           case ASSET_TYPES.TOKEN:
             // When sending a token the to address is the contract address of
@@ -926,7 +945,7 @@ const slice = createSlice({
           break;
         case state.asset.type === ASSET_TYPES.TOKEN &&
           state.asset.details.isERC721 === true:
-          state.state = SEND_STATUSES.INVALID;
+          state.status = SEND_STATUSES.INVALID;
           break;
         default:
           state.status = SEND_STATUSES.VALID;
@@ -1063,58 +1082,36 @@ const slice = createSlice({
           });
         }
       })
-      .addCase(SET_BASIC_GAS_ESTIMATE_DATA, (state, action) => {
-        // When we receive a new gasPrice via the gas duck we need to update
-        // the gasPrice in our slice. We call into the caseReducer
-        // updateGasPrice to also tap into the appropriate follow up checks
-        // and gasTotal calculation.
-        if (Boolean(process.env.SHOW_EIP_1559_UI) === false) {
-          slice.caseReducers.updateGasPrice(state, {
-            payload: getGasPriceInHexWei(action.value.average),
-          });
-        }
-      })
-      .addCase(BASIC_GAS_ESTIMATE_STATUS, (state, action) => {
-        // When we fetch gas prices we should temporarily set the form invalid
-        // Once the price updates we get that value in the
-        // SET_BASIC_GAS_ESTIMATE_DATA extraReducer above. Finally as long as
-        // the state is 'READY' we will revalidate the form.
-        switch (action.value) {
-          case BASIC_ESTIMATE_STATES.FAILED:
-            state.status = SEND_STATUSES.INVALID;
-            state.gas.isGasEstimateLoading = true;
-            break;
-          case BASIC_ESTIMATE_STATES.LOADING:
-            state.status = SEND_STATUSES.INVALID;
-            state.gas.isGasEstimateLoading = true;
-            break;
-          case BASIC_ESTIMATE_STATES.READY:
-          default:
-            state.gas.isGasEstimateLoading = false;
-            slice.caseReducers.validateSendState(state);
-        }
-      })
       .addCase(GAS_FEE_ESTIMATES_UPDATED, (state, action) => {
         // When the gasFeeController updates its gas fee estimates we need to
         // update and validate state based on those new values
-        if (process.env.SHOW_EIP_1559_UI) {
-          const { gasFeeEstimates, gasEstimateType } = action.payload;
-          let payload = null;
-          if (gasEstimateType === GAS_ESTIMATE_TYPES.FEE_MARKET) {
-            payload = getGasPriceInHexWei(
-              gasFeeEstimates.medium.suggestedMaxFeePerGas,
-            );
-          } else if (gasEstimateType === GAS_ESTIMATE_TYPES.LEGACY) {
-            payload = getGasPriceInHexWei(gasFeeEstimates.medium);
-          } else if (gasEstimateType === GAS_ESTIMATE_TYPES.ETH_GASPRICE) {
-            payload = getGasPriceInHexWei(gasFeeEstimates.gasPrice);
-          }
-          if (payload) {
-            slice.caseReducers.updateGasPrice(state, {
-              payload,
-            });
-          }
+        const { gasFeeEstimates, gasEstimateType } = action.payload;
+        let payload = null;
+        if (gasEstimateType === GAS_ESTIMATE_TYPES.FEE_MARKET) {
+          payload = getGasPriceInHexWei(
+            gasFeeEstimates.medium.suggestedMaxFeePerGas,
+          );
+        } else if (gasEstimateType === GAS_ESTIMATE_TYPES.LEGACY) {
+          payload = getGasPriceInHexWei(gasFeeEstimates.medium);
+        } else if (gasEstimateType === GAS_ESTIMATE_TYPES.ETH_GASPRICE) {
+          payload = getRoundedGasPrice(gasFeeEstimates.gasPrice);
         }
+        // If a new gasPrice can be derived, and either the gasPriceEstimate
+        // was '0x0' or the gasPrice selected matches the previous estimate,
+        // update the gasPrice. This will ensure that we only update the
+        // gasPrice if the user is using our previous estimated value.
+        if (
+          payload &&
+          (state.gas.gasPriceEstimate === '0x0' ||
+            state.gas.gasPrice === state.gas.gasPriceEstimate)
+        ) {
+          slice.caseReducers.updateGasPrice(state, {
+            payload,
+          });
+        }
+
+        // Record the latest gasPriceEstimate for future comparisons
+        state.gas.gasPriceEstimate = payload ?? state.gas.gasPriceEstimate;
       });
   },
 });
@@ -1487,6 +1484,7 @@ export function getMinimumGasLimitForSend(state) {
 
 export function getGasInputMode(state) {
   const isMainnet = getIsMainnet(state);
+  const gasEstimateType = getGasEstimateType(state);
   const showAdvancedGasFields = getAdvancedInlineGasShown(state);
   if (state[name].gas.isCustomGasSet) {
     return GAS_INPUT_MODES.CUSTOM;
@@ -1494,6 +1492,16 @@ export function getGasInputMode(state) {
   if ((!isMainnet && !process.env.IN_TEST) || showAdvancedGasFields) {
     return GAS_INPUT_MODES.INLINE;
   }
+
+  // We get eth_gasPrice estimation if the legacy API fails but we need to
+  // instruct the UI to render the INLINE inputs in this case, only on
+  // mainnet or IN_TEST.
+  if (
+    (isMainnet || process.env.IN_TEST) &&
+    gasEstimateType === GAS_ESTIMATE_TYPES.ETH_GASPRICE
+  ) {
+    return GAS_INPUT_MODES.INLINE;
+  }
   return GAS_INPUT_MODES.BASIC;
 }
 
diff --git a/ui/ducks/send/send.test.js b/ui/ducks/send/send.test.js
index 7038b11e8..76267f393 100644
--- a/ui/ducks/send/send.test.js
+++ b/ui/ducks/send/send.test.js
@@ -10,9 +10,8 @@ import {
   KNOWN_RECIPIENT_ADDRESS_WARNING,
   NEGATIVE_ETH_ERROR,
 } from '../../pages/send/send.constants';
-import { BASIC_ESTIMATE_STATES } from '../gas/gas.duck';
 import { RINKEBY_CHAIN_ID } from '../../../shared/constants/network';
-import { GAS_LIMITS } from '../../../shared/constants/gas';
+import { GAS_ESTIMATE_TYPES, GAS_LIMITS } from '../../../shared/constants/gas';
 import { TRANSACTION_TYPES } from '../../../shared/constants/transaction';
 import sendReducer, {
   initialState,
@@ -953,6 +952,11 @@ describe('Send Slice', () => {
       it('should dispatch async action thunk first with pending, then finally fulfilling from minimal state', async () => {
         getState = jest.fn().mockReturnValue({
           metamask: {
+            gasEstimateType: GAS_ESTIMATE_TYPES.NONE,
+            gasFeeEstimates: {},
+            networkDetails: {
+              EIPS: {},
+            },
             accounts: {
               '0xAddress': {
                 address: '0xAddress',
@@ -970,6 +974,7 @@ describe('Send Slice', () => {
             },
           },
           send: initialState,
+
           gas: {
             basicEstimateStatus: 'LOADING',
             basicEstimatesStatus: {
@@ -983,12 +988,12 @@ describe('Send Slice', () => {
         const action = initializeSendState();
         await action(dispatchSpy, getState, undefined);
 
-        expect(dispatchSpy).toHaveBeenCalledTimes(4);
+        expect(dispatchSpy).toHaveBeenCalledTimes(3);
 
         expect(dispatchSpy.mock.calls[0][0].type).toStrictEqual(
           'send/initializeSendState/pending',
         );
-        expect(dispatchSpy.mock.calls[3][0].type).toStrictEqual(
+        expect(dispatchSpy.mock.calls[2][0].type).toStrictEqual(
           'send/initializeSendState/fulfilled',
         );
       });
@@ -1000,6 +1005,7 @@ describe('Send Slice', () => {
           ...initialState,
           gas: {
             gasPrice: '0x0',
+            gasPriceEstimate: '0x0',
             gasLimit: '0x5208',
             gasTotal: '0x0',
             minimumGasLimit: '0x5208',
@@ -1007,9 +1013,12 @@ describe('Send Slice', () => {
         };
 
         const action = {
-          type: 'metamask/gas/SET_BASIC_GAS_ESTIMATE_DATA',
-          value: {
-            average: '1',
+          type: 'GAS_FEE_ESTIMATES_UPDATED',
+          payload: {
+            gasEstimateType: GAS_ESTIMATE_TYPES.LEGACY,
+            gasFeeEstimates: {
+              medium: '1',
+            },
           },
         };
 
@@ -1020,40 +1029,6 @@ describe('Send Slice', () => {
         expect(result.gas.gasTotal).toStrictEqual('0x1319718a5000');
       });
     });
-
-    describe('BASIC_GAS_ESTIMATE_STATUS', () => {
-      it('should invalidate the send status when status is LOADING', () => {
-        const validSendStatusState = {
-          ...initialState,
-          status: SEND_STATUSES.VALID,
-        };
-
-        const action = {
-          type: 'metamask/gas/BASIC_GAS_ESTIMATE_STATUS',
-          value: BASIC_ESTIMATE_STATES.LOADING,
-        };
-
-        const result = sendReducer(validSendStatusState, action);
-
-        expect(result.status).not.toStrictEqual(validSendStatusState.status);
-      });
-
-      it('should invalidate the send status when status is FAILED and use INLINE gas input mode', () => {
-        const validSendStatusState = {
-          ...initialState,
-          status: SEND_STATUSES.VALID,
-        };
-
-        const action = {
-          type: 'metamask/gas/BASIC_GAS_ESTIMATE_STATUS',
-          value: BASIC_ESTIMATE_STATES.FAILED,
-        };
-
-        const result = sendReducer(validSendStatusState, action);
-
-        expect(result.status).not.toStrictEqual(validSendStatusState.status);
-      });
-    });
   });
 
   describe('Action Creators', () => {
diff --git a/ui/hooks/useCancelTransaction.js b/ui/hooks/useCancelTransaction.js
index e0ee0cd4d..9bd19cc87 100644
--- a/ui/hooks/useCancelTransaction.js
+++ b/ui/hooks/useCancelTransaction.js
@@ -5,10 +5,7 @@ import { isBalanceSufficient } from '../pages/send/send.utils';
 import { getSelectedAccount, getIsMainnet } from '../selectors';
 import { getConversionRate } from '../ducks/metamask/metamask';
 
-import {
-  setCustomGasLimit,
-  setCustomGasPriceForRetry,
-} from '../ducks/gas/gas.duck';
+import { setCustomGasLimit, setCustomGasPrice } from '../ducks/gas/gas.duck';
 import { GAS_LIMITS } from '../../shared/constants/gas';
 import { isLegacyTransaction } from '../../shared/modules/transaction.utils';
 import { getMaximumGasTotalInHexWei } from '../../shared/modules/gas.utils';
@@ -51,7 +48,7 @@ export function useCancelTransaction(transactionGroup) {
         // To support the current process of cancelling or speeding up
         // a transaction, we have to inform the custom gas state of the new
         // gasPrice/gasLimit to start at.
-        dispatch(setCustomGasPriceForRetry(customGasSettings.gasPrice));
+        dispatch(setCustomGasPrice(customGasSettings.gasPrice));
         dispatch(setCustomGasLimit(GAS_LIMITS.SIMPLE));
       }
       const tx = {
diff --git a/ui/hooks/useGasFeeEstimates.js b/ui/hooks/useGasFeeEstimates.js
index 82ae44f7b..ec378b134 100644
--- a/ui/hooks/useGasFeeEstimates.js
+++ b/ui/hooks/useGasFeeEstimates.js
@@ -44,11 +44,17 @@ export function useGasFeeEstimates() {
   const gasFeeEstimates = useSelector(getGasFeeEstimates);
   const estimatedGasFeeTimeBounds = useSelector(getEstimatedGasFeeTimeBounds);
   useEffect(() => {
+    let active = true;
     let pollToken;
     getGasFeeEstimatesAndStartPolling().then((newPollToken) => {
-      pollToken = newPollToken;
+      if (active) {
+        pollToken = newPollToken;
+      } else {
+        disconnectGasFeeEstimatePoller(newPollToken);
+      }
     });
     return () => {
+      active = false;
       if (pollToken) {
         disconnectGasFeeEstimatePoller(pollToken);
       }
diff --git a/ui/hooks/useRetryTransaction.js b/ui/hooks/useRetryTransaction.js
index f19c1000a..9f6b1680c 100644
--- a/ui/hooks/useRetryTransaction.js
+++ b/ui/hooks/useRetryTransaction.js
@@ -2,11 +2,7 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import { useCallback, useState } from 'react';
 import { showSidebar } from '../store/actions';
-import {
-  fetchBasicGasEstimates,
-  setCustomGasPriceForRetry,
-  setCustomGasLimit,
-} from '../ducks/gas/gas.duck';
+import { setCustomGasLimit, setCustomGasPrice } from '../ducks/gas/gas.duck';
 import { getIsMainnet } from '../selectors';
 import { isLegacyTransaction } from '../../shared/modules/transaction.utils';
 import { useMetricEvent } from './useMetricEvent';
@@ -29,6 +25,7 @@ import { useIncrementedGasFees } from './useIncrementedGasFees';
 export function useRetryTransaction(transactionGroup) {
   const { primaryTransaction } = transactionGroup;
   const isMainnet = useSelector(getIsMainnet);
+
   const hideBasic = !(isMainnet || process.env.IN_TEST);
   const customGasSettings = useIncrementedGasFees(transactionGroup);
   const trackMetricsEvent = useMetricEvent({
@@ -51,12 +48,11 @@ export function useRetryTransaction(transactionGroup) {
       if (process.env.SHOW_EIP_1559_UI) {
         setShowRetryEditGasPopover(true);
       } else {
-        await dispatch(fetchBasicGasEstimates);
         if (isLegacyTransaction(primaryTransaction)) {
           // To support the current process of cancelling or speeding up
           // a transaction, we have to inform the custom gas state of the new
           // gasPrice to start at.
-          dispatch(setCustomGasPriceForRetry(customGasSettings.gasPrice));
+          dispatch(setCustomGasPrice(customGasSettings.gasPrice));
           dispatch(setCustomGasLimit(primaryTransaction.txParams.gas));
         }
 
diff --git a/ui/hooks/useRetryTransaction.test.js b/ui/hooks/useRetryTransaction.test.js
index b6b554a75..2f5ec0be9 100644
--- a/ui/hooks/useRetryTransaction.test.js
+++ b/ui/hooks/useRetryTransaction.test.js
@@ -8,6 +8,10 @@ import * as methodDataHook from './useMethodData';
 import * as metricEventHook from './useMetricEvent';
 import { useRetryTransaction } from './useRetryTransaction';
 
+jest.mock('./useGasFeeEstimates', () => ({
+  useGasFeeEstimates: jest.fn(),
+}));
+
 describe('useRetryTransaction', () => {
   describe('when transaction meets retry enabled criteria', () => {
     let useSelector;
diff --git a/ui/pages/confirm-send-ether/confirm-send-ether.component.js b/ui/pages/confirm-send-ether/confirm-send-ether.component.js
index cbdbebb91..a1166fb03 100644
--- a/ui/pages/confirm-send-ether/confirm-send-ether.component.js
+++ b/ui/pages/confirm-send-ether/confirm-send-ether.component.js
@@ -16,8 +16,9 @@ export default class ConfirmSendEther extends Component {
 
   handleEdit({ txData }) {
     const { editTransaction, history } = this.props;
-    editTransaction(txData);
-    history.push(SEND_ROUTE);
+    editTransaction(txData).then(() => {
+      history.push(SEND_ROUTE);
+    });
   }
 
   shouldHideData() {
diff --git a/ui/pages/confirm-send-ether/confirm-send-ether.container.js b/ui/pages/confirm-send-ether/confirm-send-ether.container.js
index 5f7527226..a637fbb12 100644
--- a/ui/pages/confirm-send-ether/confirm-send-ether.container.js
+++ b/ui/pages/confirm-send-ether/confirm-send-ether.container.js
@@ -17,9 +17,9 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    editTransaction: (txData) => {
+    editTransaction: async (txData) => {
       const { id } = txData;
-      dispatch(editTransaction(ASSET_TYPES.NATIVE, id.toString()));
+      await dispatch(editTransaction(ASSET_TYPES.NATIVE, id.toString()));
       dispatch(clearConfirmTransaction());
     },
   };
diff --git a/ui/pages/confirm-transaction/confirm-transaction.component.js b/ui/pages/confirm-transaction/confirm-transaction.component.js
index 5bc374edc..2988739e6 100644
--- a/ui/pages/confirm-transaction/confirm-transaction.component.js
+++ b/ui/pages/confirm-transaction/confirm-transaction.component.js
@@ -25,6 +25,10 @@ import {
   ENCRYPTION_PUBLIC_KEY_REQUEST_PATH,
   DEFAULT_ROUTE,
 } from '../../helpers/constants/routes';
+import {
+  disconnectGasFeeEstimatePoller,
+  getGasFeeEstimatesAndStartPolling,
+} from '../../store/actions';
 import ConfTx from './conf-tx';
 
 export default class ConfirmTransaction extends Component {
@@ -38,7 +42,6 @@ export default class ConfirmTransaction extends Component {
     sendTo: PropTypes.string,
     setTransactionToConfirm: PropTypes.func,
     clearConfirmTransaction: PropTypes.func,
-    fetchBasicGasEstimates: PropTypes.func,
     mostRecentOverviewPage: PropTypes.string.isRequired,
     transaction: PropTypes.object,
     getContractMethodData: PropTypes.func,
@@ -49,14 +52,19 @@ export default class ConfirmTransaction extends Component {
     setDefaultHomeActiveTabName: PropTypes.func,
   };
 
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
   componentDidMount() {
+    this._isMounted = true;
     const {
       totalUnapprovedCount = 0,
       sendTo,
       history,
       mostRecentOverviewPage,
       transaction: { txParams: { data, to } = {} } = {},
-      fetchBasicGasEstimates,
       getContractMethodData,
       transactionId,
       paramsTransactionId,
@@ -64,12 +72,19 @@ export default class ConfirmTransaction extends Component {
       isTokenMethodAction,
     } = this.props;
 
+    getGasFeeEstimatesAndStartPolling().then((pollingToken) => {
+      if (this._isMounted) {
+        this.setState({ pollingToken });
+      } else {
+        disconnectGasFeeEstimatePoller(pollingToken);
+      }
+    });
+
     if (!totalUnapprovedCount && !sendTo) {
       history.replace(mostRecentOverviewPage);
       return;
     }
 
-    fetchBasicGasEstimates();
     getContractMethodData(data);
     if (isTokenMethodAction) {
       getTokenParams(to);
@@ -80,6 +95,13 @@ export default class ConfirmTransaction extends Component {
     }
   }
 
+  componentWillUnmount() {
+    this._isMounted = false;
+    if (this.state.pollingToken) {
+      disconnectGasFeeEstimatePoller(this.state.pollingToken);
+    }
+  }
+
   componentDidUpdate(prevProps) {
     const {
       setTransactionToConfirm,
diff --git a/ui/pages/confirm-transaction/confirm-transaction.container.js b/ui/pages/confirm-transaction/confirm-transaction.container.js
index bf0020c64..da7b04f18 100644
--- a/ui/pages/confirm-transaction/confirm-transaction.container.js
+++ b/ui/pages/confirm-transaction/confirm-transaction.container.js
@@ -6,7 +6,6 @@ import {
   clearConfirmTransaction,
 } from '../../ducks/confirm-transaction/confirm-transaction.duck';
 import { isTokenMethodAction } from '../../helpers/utils/transactions.util';
-import { fetchBasicGasEstimates } from '../../ducks/gas/gas.duck';
 
 import {
   getContractMethodData,
@@ -54,7 +53,6 @@ const mapDispatchToProps = (dispatch) => {
       dispatch(setTransactionToConfirm(transactionId));
     },
     clearConfirmTransaction: () => dispatch(clearConfirmTransaction()),
-    fetchBasicGasEstimates: () => dispatch(fetchBasicGasEstimates()),
     getContractMethodData: (data) => dispatch(getContractMethodData(data)),
     getTokenParams: (tokenAddress) => dispatch(getTokenParams(tokenAddress)),
     setDefaultHomeActiveTabName: (tabName) =>
diff --git a/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.test.js b/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.test.js
index 7f4482517..a163a13a0 100644
--- a/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.test.js
+++ b/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.test.js
@@ -5,6 +5,7 @@ import thunk from 'redux-thunk';
 import { fireEvent } from '@testing-library/react';
 import { initialState, SEND_STATUSES } from '../../../../../ducks/send';
 import { renderWithProvider } from '../../../../../../test/jest';
+import { GAS_ESTIMATE_TYPES } from '../../../../../../shared/constants/gas';
 import AmountMaxButton from './amount-max-button';
 
 const middleware = [thunk];
@@ -15,8 +16,13 @@ describe('AmountMaxButton Component', () => {
       const { getByText } = renderWithProvider(
         <AmountMaxButton />,
         configureMockStore(middleware)({
+          metamask: {
+            gasEstimateType: GAS_ESTIMATE_TYPES.NONE,
+            networkDetails: {
+              EIPS: {},
+            },
+          },
           send: initialState,
-          gas: { basicEstimateStatus: 'LOADING' },
         }),
       );
       expect(getByText('Max')).toBeTruthy();
@@ -24,8 +30,13 @@ describe('AmountMaxButton Component', () => {
 
     it('should dispatch action to set mode to MAX', () => {
       const store = configureMockStore(middleware)({
+        metamask: {
+          gasEstimateType: GAS_ESTIMATE_TYPES.ETH_GASPRICE,
+          networkDetails: {
+            EIPS: {},
+          },
+        },
         send: { ...initialState, status: SEND_STATUSES.VALID },
-        gas: { basicEstimateStatus: 'READY' },
       });
       const { getByText } = renderWithProvider(<AmountMaxButton />, store);
 
@@ -40,12 +51,17 @@ describe('AmountMaxButton Component', () => {
 
     it('should dispatch action to set amount mode to INPUT', () => {
       const store = configureMockStore(middleware)({
+        metamask: {
+          gasEstimateType: GAS_ESTIMATE_TYPES.ETH_GASPRICE,
+          networkDetails: {
+            EIPS: {},
+          },
+        },
         send: {
           ...initialState,
           status: SEND_STATUSES.VALID,
           amount: { ...initialState.amount, mode: 'MAX' },
         },
-        gas: { basicEstimateStatus: 'READY' },
       });
       const { getByText } = renderWithProvider(<AmountMaxButton />, store);
 
diff --git a/ui/pages/send/send.test.js b/ui/pages/send/send.test.js
index 07bef5b26..65276d864 100644
--- a/ui/pages/send/send.test.js
+++ b/ui/pages/send/send.test.js
@@ -8,6 +8,7 @@ import { initialState, SEND_STAGES } from '../../ducks/send';
 import { ensInitialState } from '../../ducks/ens';
 import { renderWithProvider } from '../../../test/jest';
 import { RINKEBY_CHAIN_ID } from '../../../shared/constants/network';
+import { GAS_ESTIMATE_TYPES } from '../../../shared/constants/gas';
 import Send from './send';
 
 const middleware = [thunk];
@@ -37,12 +38,19 @@ const baseStore = {
   send: initialState,
   ENS: ensInitialState,
   gas: {
-    basicEstimateStatus: 'READY',
-    basicEstimates: { slow: '0x0', average: '0x1', fast: '0x2' },
     customData: { limit: null, price: null },
   },
   history: { mostRecentOverviewPage: 'activity' },
   metamask: {
+    gasEstimateType: GAS_ESTIMATE_TYPES.LEGACY,
+    gasFeeEstimates: {
+      low: '0',
+      medium: '1',
+      fast: '2',
+    },
+    networkDetails: {
+      EIPS: {},
+    },
     tokens: [],
     preferences: {
       useNativeCurrencyAsPrimaryCurrency: false,
@@ -82,12 +90,6 @@ describe('Send Page', () => {
           expect.objectContaining({
             type: 'send/initializeSendState/pending',
           }),
-          expect.objectContaining({
-            type: 'metamask/gas/BASIC_GAS_ESTIMATE_STATUS',
-          }),
-          expect.objectContaining({
-            type: 'metamask/gas/SET_ESTIMATE_SOURCE',
-          }),
         ]),
       );
     });
@@ -105,12 +107,6 @@ describe('Send Page', () => {
           expect.objectContaining({
             type: 'send/initializeSendState/pending',
           }),
-          expect.objectContaining({
-            type: 'metamask/gas/BASIC_GAS_ESTIMATE_STATUS',
-          }),
-          expect.objectContaining({
-            type: 'metamask/gas/SET_ESTIMATE_SOURCE',
-          }),
           expect.objectContaining({
             type: 'UI_MODAL_OPEN',
             payload: { name: 'QR_SCANNER' },
diff --git a/ui/selectors/custom-gas.js b/ui/selectors/custom-gas.js
index 5b0647ffe..ea72bf9ae 100644
--- a/ui/selectors/custom-gas.js
+++ b/ui/selectors/custom-gas.js
@@ -8,10 +8,17 @@ import { decEthToConvertedCurrency as ethTotalToConvertedCurrency } from '../hel
 import { formatETHFee } from '../helpers/utils/formatters';
 import { calcGasTotal } from '../pages/send/send.utils';
 
-import { GAS_ESTIMATE_TYPES } from '../helpers/constants/common';
 import { getGasPrice } from '../ducks/send';
-import { BASIC_ESTIMATE_STATES, GAS_SOURCE } from '../ducks/gas/gas.duck';
-import { GAS_LIMITS } from '../../shared/constants/gas';
+import {
+  GAS_ESTIMATE_TYPES as GAS_FEE_CONTROLLER_ESTIMATE_TYPES,
+  GAS_LIMITS,
+} from '../../shared/constants/gas';
+import {
+  getGasEstimateType,
+  getGasFeeEstimates,
+  isEIP1559Network,
+} from '../ducks/metamask/metamask';
+import { GAS_ESTIMATE_TYPES } from '../helpers/constants/common';
 import { getCurrentCurrency, getIsMainnet, getShouldShowFiat } from '.';
 
 const NUMBER_OF_DECIMALS_SM_BTNS = 5;
@@ -25,13 +32,12 @@ export function getCustomGasPrice(state) {
 }
 
 export function getBasicGasEstimateLoadingStatus(state) {
-  return state.gas.basicEstimateStatus === 'LOADING';
+  return getIsGasEstimatesFetched(state) === false;
 }
 
 export function getAveragePriceEstimateInHexWEI(state) {
-  const averagePriceEstimate = state.gas.basicEstimates
-    ? state.gas.basicEstimates.average
-    : '0x0';
+  const averagePriceEstimate = getAverageEstimate(state);
+
   return getGasPriceInHexWei(averagePriceEstimate);
 }
 
@@ -51,23 +57,31 @@ export function getDefaultActiveButtonIndex(
 }
 
 export function getSafeLowEstimate(state) {
-  const {
-    gas: {
-      basicEstimates: { safeLow },
-    },
-  } = state;
+  const gasFeeEstimates = getGasFeeEstimates(state);
+  const gasEstimateType = getGasEstimateType(state);
 
-  return safeLow;
+  return gasEstimateType === GAS_FEE_CONTROLLER_ESTIMATE_TYPES.LEGACY
+    ? gasFeeEstimates?.low
+    : null;
+}
+
+export function getAverageEstimate(state) {
+  const gasFeeEstimates = getGasFeeEstimates(state);
+  const gasEstimateType = getGasEstimateType(state);
+
+  return gasEstimateType === GAS_FEE_CONTROLLER_ESTIMATE_TYPES.LEGACY
+    ? gasFeeEstimates?.medium
+    : null;
 }
 
 export function getFastPriceEstimate(state) {
-  const {
-    gas: {
-      basicEstimates: { fast },
-    },
-  } = state;
+  const gasFeeEstimates = getGasFeeEstimates(state);
 
-  return fast;
+  const gasEstimateType = getGasEstimateType(state);
+
+  return gasEstimateType === GAS_FEE_CONTROLLER_ESTIMATE_TYPES.LEGACY
+    ? gasFeeEstimates?.high
+    : null;
 }
 
 export function isCustomPriceSafe(state) {
@@ -97,7 +111,7 @@ export function isCustomPriceSafe(state) {
 }
 
 export function isCustomPriceSafeForCustomNetwork(state) {
-  const estimatedPrice = state.gas.basicEstimates.average;
+  const estimatedPrice = getAverageEstimate(state);
 
   const customGasPrice = getCustomGasPrice(state);
 
@@ -219,61 +233,56 @@ export function getRenderableGasButtonData(
   currentCurrency,
   nativeCurrency,
 ) {
-  const { safeLow, average, fast } = estimates;
+  const { low, medium, high } = estimates;
 
   const slowEstimateData = {
     gasEstimateType: GAS_ESTIMATE_TYPES.SLOW,
-    feeInPrimaryCurrency: getRenderableEthFee(
-      safeLow,
-      gasLimit,
-      9,
-      nativeCurrency,
-    ),
+    feeInPrimaryCurrency: getRenderableEthFee(low, gasLimit, 9, nativeCurrency),
     feeInSecondaryCurrency: showFiat
       ? getRenderableConvertedCurrencyFee(
-          safeLow,
+          low,
           gasLimit,
           currentCurrency,
           conversionRate,
         )
       : '',
-    priceInHexWei: getGasPriceInHexWei(safeLow),
+    priceInHexWei: getGasPriceInHexWei(low),
   };
   const averageEstimateData = {
     gasEstimateType: GAS_ESTIMATE_TYPES.AVERAGE,
     feeInPrimaryCurrency: getRenderableEthFee(
-      average,
+      medium,
       gasLimit,
       9,
       nativeCurrency,
     ),
     feeInSecondaryCurrency: showFiat
       ? getRenderableConvertedCurrencyFee(
-          average,
+          medium,
           gasLimit,
           currentCurrency,
           conversionRate,
         )
       : '',
-    priceInHexWei: getGasPriceInHexWei(average),
+    priceInHexWei: getGasPriceInHexWei(medium),
   };
   const fastEstimateData = {
     gasEstimateType: GAS_ESTIMATE_TYPES.FAST,
     feeInPrimaryCurrency: getRenderableEthFee(
-      fast,
+      high,
       gasLimit,
       9,
       nativeCurrency,
     ),
     feeInSecondaryCurrency: showFiat
       ? getRenderableConvertedCurrencyFee(
-          fast,
+          high,
           gasLimit,
           currentCurrency,
           conversionRate,
         )
       : '',
-    priceInHexWei: getGasPriceInHexWei(fast),
+    priceInHexWei: getGasPriceInHexWei(high),
   };
 
   return {
@@ -297,7 +306,7 @@ export function getRenderableBasicEstimateData(state, gasLimit) {
     averageEstimateData,
     fastEstimateData,
   } = getRenderableGasButtonData(
-    state.gas.basicEstimates,
+    getGasFeeEstimates(state),
     gasLimit,
     showFiat,
     conversionRate,
@@ -308,7 +317,7 @@ export function getRenderableBasicEstimateData(state, gasLimit) {
 }
 
 export function getRenderableEstimateDataForSmallButtonsFromGWEI(state) {
-  if (getBasicGasEstimateLoadingStatus(state)) {
+  if (getIsGasEstimatesFetched(state) === false) {
     return [];
   }
   const showFiat = getShouldShowFiat(state);
@@ -316,94 +325,88 @@ export function getRenderableEstimateDataForSmallButtonsFromGWEI(state) {
     state.send.gas.gasLimit || getCustomGasLimit(state) || GAS_LIMITS.SIMPLE;
   const { conversionRate } = state.metamask;
   const currentCurrency = getCurrentCurrency(state);
-  const {
-    gas: {
-      basicEstimates: { safeLow, average, fast },
-    },
-  } = state;
+  const gasFeeEstimates = getGasFeeEstimates(state);
 
   return [
     {
       gasEstimateType: GAS_ESTIMATE_TYPES.SLOW,
       feeInSecondaryCurrency: showFiat
         ? getRenderableConvertedCurrencyFee(
-            safeLow,
+            gasFeeEstimates.low,
             gasLimit,
             currentCurrency,
             conversionRate,
           )
         : '',
       feeInPrimaryCurrency: getRenderableEthFee(
-        safeLow,
+        gasFeeEstimates.low,
         gasLimit,
         NUMBER_OF_DECIMALS_SM_BTNS,
       ),
-      priceInHexWei: getGasPriceInHexWei(safeLow, true),
+      priceInHexWei: getGasPriceInHexWei(gasFeeEstimates.low, true),
     },
     {
       gasEstimateType: GAS_ESTIMATE_TYPES.AVERAGE,
       feeInSecondaryCurrency: showFiat
         ? getRenderableConvertedCurrencyFee(
-            average,
+            gasFeeEstimates.medium,
             gasLimit,
             currentCurrency,
             conversionRate,
           )
         : '',
       feeInPrimaryCurrency: getRenderableEthFee(
-        average,
+        gasFeeEstimates.medium,
         gasLimit,
         NUMBER_OF_DECIMALS_SM_BTNS,
       ),
-      priceInHexWei: getGasPriceInHexWei(average, true),
+      priceInHexWei: getGasPriceInHexWei(gasFeeEstimates.medium, true),
     },
     {
       gasEstimateType: GAS_ESTIMATE_TYPES.FAST,
       feeInSecondaryCurrency: showFiat
         ? getRenderableConvertedCurrencyFee(
-            fast,
+            gasFeeEstimates.high,
             gasLimit,
             currentCurrency,
             conversionRate,
           )
         : '',
       feeInPrimaryCurrency: getRenderableEthFee(
-        fast,
+        gasFeeEstimates.high,
         gasLimit,
         NUMBER_OF_DECIMALS_SM_BTNS,
       ),
-      priceInHexWei: getGasPriceInHexWei(fast, true),
+      priceInHexWei: getGasPriceInHexWei(gasFeeEstimates.high, true),
     },
   ];
 }
 
 export function getIsEthGasPriceFetched(state) {
-  const gasState = state.gas;
-  return Boolean(
-    gasState.estimateSource === GAS_SOURCE.ETHGASPRICE &&
-      gasState.basicEstimateStatus === BASIC_ESTIMATE_STATES.READY &&
-      getIsMainnet(state),
+  const gasEstimateType = getGasEstimateType(state);
+  return (
+    gasEstimateType === GAS_FEE_CONTROLLER_ESTIMATE_TYPES.ETH_GASPRICE &&
+    getIsMainnet(state)
   );
 }
 
 export function getIsCustomNetworkGasPriceFetched(state) {
-  const gasState = state.gas;
-  return Boolean(
-    gasState.estimateSource === GAS_SOURCE.ETHGASPRICE &&
-      gasState.basicEstimateStatus === BASIC_ESTIMATE_STATES.READY &&
-      !getIsMainnet(state),
+  const gasEstimateType = getGasEstimateType(state);
+  return (
+    gasEstimateType === GAS_FEE_CONTROLLER_ESTIMATE_TYPES.ETH_GASPRICE &&
+    !getIsMainnet(state)
   );
 }
 
 export function getNoGasPriceFetched(state) {
-  const gasState = state.gas;
-  return Boolean(gasState.basicEstimateStatus === BASIC_ESTIMATE_STATES.FAILED);
+  const gasEstimateType = getGasEstimateType(state);
+  return gasEstimateType === GAS_FEE_CONTROLLER_ESTIMATE_TYPES.NONE;
 }
 
 export function getIsGasEstimatesFetched(state) {
-  const gasState = state.gas;
-  return Boolean(
-    gasState.estimateSource === GAS_SOURCE.METASWAPS &&
-      gasState.basicEstimateStatus === BASIC_ESTIMATE_STATES.READY,
-  );
+  const gasEstimateType = getGasEstimateType(state);
+  if (isEIP1559Network(state)) {
+    return false;
+  }
+  return gasEstimateType !== GAS_FEE_CONTROLLER_ESTIMATE_TYPES.NONE;
 }
diff --git a/ui/selectors/custom-gas.test.js b/ui/selectors/custom-gas.test.js
index fb383248d..b20a9ad57 100644
--- a/ui/selectors/custom-gas.test.js
+++ b/ui/selectors/custom-gas.test.js
@@ -1,4 +1,4 @@
-import { GAS_LIMITS } from '../../shared/constants/gas';
+import { GAS_ESTIMATE_TYPES, GAS_LIMITS } from '../../shared/constants/gas';
 import {
   getCustomGasLimit,
   getCustomGasPrice,
@@ -18,36 +18,68 @@ describe('custom-gas selectors', () => {
   describe('isCustomGasPriceSafe()', () => {
     it('should return true for gas.customData.price 0x77359400', () => {
       const mockState = {
+        metamask: {
+          gasEstimateType: GAS_ESTIMATE_TYPES.LEGACY,
+          gasFeeEstimates: {
+            low: '1',
+          },
+          networkDetails: {
+            EIPS: {},
+          },
+        },
         gas: {
           customData: { price: '0x77359400' },
-          basicEstimates: { safeLow: 1 },
         },
       };
       expect(isCustomPriceSafe(mockState)).toStrictEqual(true);
     });
     it('should return true for gas.customData.price null', () => {
       const mockState = {
+        metamask: {
+          gasEstimateType: GAS_ESTIMATE_TYPES.LEGACY,
+          gasFeeEstimates: {
+            low: '1',
+          },
+          networkDetails: {
+            EIPS: {},
+          },
+        },
         gas: {
           customData: { price: null },
-          basicEstimates: { safeLow: 1 },
         },
       };
       expect(isCustomPriceSafe(mockState)).toStrictEqual(true);
     });
     it('should return true gas.customData.price undefined', () => {
       const mockState = {
+        metamask: {
+          gasEstimateType: GAS_ESTIMATE_TYPES.LEGACY,
+          gasFeeEstimates: {
+            low: '1',
+          },
+          networkDetails: {
+            EIPS: {},
+          },
+        },
         gas: {
           customData: { price: undefined },
-          basicEstimates: { safeLow: 1 },
         },
       };
       expect(isCustomPriceSafe(mockState)).toStrictEqual(true);
     });
     it('should return false gas.basicEstimates.safeLow undefined', () => {
       const mockState = {
+        metamask: {
+          gasEstimateType: GAS_ESTIMATE_TYPES.NONE,
+          gasFeeEstimates: {
+            low: undefined,
+          },
+          networkDetails: {
+            EIPS: {},
+          },
+        },
         gas: {
           customData: { price: '0x77359400' },
-          basicEstimates: { safeLow: undefined },
         },
       };
       expect(isCustomPriceSafe(mockState)).toStrictEqual(false);
@@ -57,60 +89,117 @@ describe('custom-gas selectors', () => {
   describe('isCustomPriceExcessive()', () => {
     it('should return false for gas.customData.price null', () => {
       const mockState = {
+        metamask: {
+          gasEstimateType: GAS_ESTIMATE_TYPES.LEGACY,
+          gasFeeEstimates: {
+            high: '150',
+          },
+          networkDetails: {
+            EIPS: {},
+          },
+        },
         gas: {
           customData: { price: null },
-          basicEstimates: { fast: 150 },
         },
       };
       expect(isCustomPriceExcessive(mockState)).toStrictEqual(false);
     });
     it('should return false gas.basicEstimates.fast undefined', () => {
       const mockState = {
+        metamask: {
+          gasEstimateType: GAS_ESTIMATE_TYPES.LEGACY,
+          gasFeeEstimates: {
+            high: undefined,
+          },
+          networkDetails: {
+            EIPS: {},
+          },
+        },
         gas: {
           customData: { price: '0x77359400' },
-          basicEstimates: { fast: undefined },
         },
       };
       expect(isCustomPriceExcessive(mockState)).toStrictEqual(false);
     });
     it('should return false gas.basicEstimates.price 0x205d0bae00 (139)', () => {
       const mockState = {
+        metamask: {
+          gasEstimateType: GAS_ESTIMATE_TYPES.LEGACY,
+          gasFeeEstimates: {
+            high: '139',
+          },
+          networkDetails: {
+            EIPS: {},
+          },
+        },
         gas: {
           customData: { price: '0x205d0bae00' },
-          basicEstimates: { fast: 139 },
         },
       };
       expect(isCustomPriceExcessive(mockState)).toStrictEqual(false);
     });
     it('should return false gas.basicEstimates.price 0x1bf08eb000 (120)', () => {
       const mockState = {
+        metamask: {
+          gasEstimateType: GAS_ESTIMATE_TYPES.LEGACY,
+          gasFeeEstimates: {
+            high: '139',
+          },
+          networkDetails: {
+            EIPS: {},
+          },
+        },
         gas: {
           customData: { price: '0x1bf08eb000' },
-          basicEstimates: { fast: 139 },
         },
       };
       expect(isCustomPriceExcessive(mockState)).toStrictEqual(false);
     });
     it('should return false gas.basicEstimates.price 0x28bed01600 (175)', () => {
       const mockState = {
+        metamask: {
+          gasEstimateType: GAS_ESTIMATE_TYPES.LEGACY,
+          gasFeeEstimates: {
+            high: '139',
+          },
+          networkDetails: {
+            EIPS: {},
+          },
+        },
         gas: {
           customData: { price: '0x28bed01600' },
-          basicEstimates: { fast: 139 },
         },
       };
       expect(isCustomPriceExcessive(mockState)).toStrictEqual(false);
     });
     it('should return true gas.basicEstimates.price 0x30e4f9b400 (210)', () => {
       const mockState = {
+        metamask: {
+          gasEstimateType: GAS_ESTIMATE_TYPES.LEGACY,
+          gasFeeEstimates: {
+            high: '139',
+          },
+          networkDetails: {
+            EIPS: {},
+          },
+        },
         gas: {
           customData: { price: '0x30e4f9b400' },
-          basicEstimates: { fast: 139 },
         },
       };
       expect(isCustomPriceExcessive(mockState)).toStrictEqual(true);
     });
     it('should return false gas.basicEstimates.price 0x28bed01600 (175) (checkSend=true)', () => {
       const mockState = {
+        metamask: {
+          gasEstimateType: GAS_ESTIMATE_TYPES.LEGACY,
+          gasFeeEstimates: {
+            high: '139',
+          },
+          networkDetails: {
+            EIPS: {},
+          },
+        },
         send: {
           gas: {
             gasPrice: '0x28bed0160',
@@ -118,13 +207,21 @@ describe('custom-gas selectors', () => {
         },
         gas: {
           customData: { price: null },
-          basicEstimates: { fast: 139 },
         },
       };
       expect(isCustomPriceExcessive(mockState, true)).toStrictEqual(false);
     });
     it('should return true gas.basicEstimates.price 0x30e4f9b400 (210) (checkSend=true)', () => {
       const mockState = {
+        metamask: {
+          gasEstimateType: GAS_ESTIMATE_TYPES.LEGACY,
+          gasFeeEstimates: {
+            high: '139',
+          },
+          networkDetails: {
+            EIPS: {},
+          },
+        },
         send: {
           gas: {
             gasPrice: '0x30e4f9b400',
@@ -132,7 +229,6 @@ describe('custom-gas selectors', () => {
         },
         gas: {
           customData: { price: null },
-          basicEstimates: { fast: 139 },
         },
       };
       expect(isCustomPriceExcessive(mockState, true)).toStrictEqual(true);
@@ -171,6 +267,15 @@ describe('custom-gas selectors', () => {
         ],
         mockState: {
           metamask: {
+            gasEstimateType: GAS_ESTIMATE_TYPES.LEGACY,
+            gasFeeEstimates: {
+              low: '2.5',
+              medium: '4',
+              high: '5',
+            },
+            networkDetails: {
+              EIPS: {},
+            },
             conversionRate: 255.71,
             currentCurrency: 'usd',
             preferences: {
@@ -181,19 +286,6 @@ describe('custom-gas selectors', () => {
               chainId: '0x1',
             },
           },
-          gas: {
-            basicEstimates: {
-              blockTime: 14.16326530612245,
-              safeLow: 2.5,
-              safeLowWait: 6.6,
-              average: 4,
-              avgWait: 5.3,
-              fast: 5,
-              fastWait: 3.3,
-              fastest: 10,
-              fastestWait: 0.5,
-            },
-          },
         },
       },
       {
@@ -219,6 +311,15 @@ describe('custom-gas selectors', () => {
         ],
         mockState: {
           metamask: {
+            gasEstimateType: GAS_ESTIMATE_TYPES.LEGACY,
+            gasFeeEstimates: {
+              low: '5',
+              medium: '7',
+              high: '10',
+            },
+            networkDetails: {
+              EIPS: {},
+            },
             conversionRate: 2557.1,
             currentCurrency: 'usd',
             preferences: {
@@ -234,19 +335,6 @@ describe('custom-gas selectors', () => {
               gasLimit: GAS_LIMITS.SIMPLE,
             },
           },
-          gas: {
-            basicEstimates: {
-              blockTime: 14.16326530612245,
-              safeLow: 5,
-              safeLowWait: 13.2,
-              average: 7,
-              avgWait: 10.1,
-              fast: 10,
-              fastWait: 6.6,
-              fastest: 20,
-              fastestWait: 1.0,
-            },
-          },
         },
       },
       {
@@ -272,6 +360,15 @@ describe('custom-gas selectors', () => {
         ],
         mockState: {
           metamask: {
+            gasEstimateType: GAS_ESTIMATE_TYPES.LEGACY,
+            gasFeeEstimates: {
+              low: '5',
+              medium: '7',
+              high: '10',
+            },
+            networkDetails: {
+              EIPS: {},
+            },
             conversionRate: 2557.1,
             currentCurrency: 'usd',
             preferences: {
@@ -287,19 +384,6 @@ describe('custom-gas selectors', () => {
               gasLimit: GAS_LIMITS.SIMPLE,
             },
           },
-          gas: {
-            basicEstimates: {
-              blockTime: 14.16326530612245,
-              safeLow: 5,
-              safeLowWait: 13.2,
-              average: 7,
-              avgWait: 10.1,
-              fast: 10,
-              fastWait: 6.6,
-              fastest: 20,
-              fastestWait: 1.0,
-            },
-          },
         },
       },
       {
@@ -325,6 +409,15 @@ describe('custom-gas selectors', () => {
         ],
         mockState: {
           metamask: {
+            gasEstimateType: GAS_ESTIMATE_TYPES.LEGACY,
+            gasFeeEstimates: {
+              low: '5',
+              medium: '7',
+              high: '10',
+            },
+            networkDetails: {
+              EIPS: {},
+            },
             conversionRate: 2557.1,
             currentCurrency: 'usd',
             preferences: {
@@ -340,13 +433,6 @@ describe('custom-gas selectors', () => {
               gasLimit: GAS_LIMITS.SIMPLE,
             },
           },
-          gas: {
-            basicEstimates: {
-              safeLow: 5,
-              average: 7,
-              fast: 10,
-            },
-          },
         },
       },
       {
@@ -372,6 +458,15 @@ describe('custom-gas selectors', () => {
         ],
         mockState: {
           metamask: {
+            gasEstimateType: GAS_ESTIMATE_TYPES.LEGACY,
+            gasFeeEstimates: {
+              low: '5',
+              medium: '7',
+              high: '10',
+            },
+            networkDetails: {
+              EIPS: {},
+            },
             conversionRate: 2557.1,
             currentCurrency: 'usd',
             preferences: {
@@ -387,13 +482,6 @@ describe('custom-gas selectors', () => {
               gasLimit: GAS_LIMITS.SIMPLE,
             },
           },
-          gas: {
-            basicEstimates: {
-              safeLow: 5,
-              average: 7,
-              fast: 10,
-            },
-          },
         },
       },
     ];
@@ -435,6 +523,15 @@ describe('custom-gas selectors', () => {
         ],
         mockState: {
           metamask: {
+            gasEstimateType: GAS_ESTIMATE_TYPES.LEGACY,
+            gasFeeEstimates: {
+              low: '25',
+              medium: '30',
+              high: '50',
+            },
+            networkDetails: {
+              EIPS: {},
+            },
             conversionRate: 255.71,
             currentCurrency: 'usd',
             preferences: {
@@ -450,13 +547,6 @@ describe('custom-gas selectors', () => {
               gasLimit: GAS_LIMITS.SIMPLE,
             },
           },
-          gas: {
-            basicEstimates: {
-              safeLow: 25,
-              average: 30,
-              fast: 50,
-            },
-          },
         },
       },
       {
@@ -482,6 +572,15 @@ describe('custom-gas selectors', () => {
         ],
         mockState: {
           metamask: {
+            gasEstimateType: GAS_ESTIMATE_TYPES.LEGACY,
+            gasFeeEstimates: {
+              low: '50',
+              medium: '75',
+              high: '100',
+            },
+            networkDetails: {
+              EIPS: {},
+            },
             conversionRate: 2557.1,
             currentCurrency: 'usd',
             preferences: {
@@ -497,19 +596,6 @@ describe('custom-gas selectors', () => {
               gasLimit: GAS_LIMITS.SIMPLE,
             },
           },
-          gas: {
-            basicEstimates: {
-              blockTime: 14.16326530612245,
-              safeLow: 50,
-              safeLowWait: 13.2,
-              average: 75,
-              avgWait: 9.6,
-              fast: 100,
-              fastWait: 6.6,
-              fastest: 200,
-              fastestWait: 1.0,
-            },
-          },
         },
       },
       {
@@ -535,6 +621,15 @@ describe('custom-gas selectors', () => {
         ],
         mockState: {
           metamask: {
+            gasEstimateType: GAS_ESTIMATE_TYPES.LEGACY,
+            gasFeeEstimates: {
+              low: '50',
+              medium: '75',
+              high: '100',
+            },
+            networkDetails: {
+              EIPS: {},
+            },
             conversionRate: 2557.1,
             currentCurrency: 'usd',
             preferences: {
@@ -550,19 +645,6 @@ describe('custom-gas selectors', () => {
               gasLimit: GAS_LIMITS.SIMPLE,
             },
           },
-          gas: {
-            basicEstimates: {
-              blockTime: 14.16326530612245,
-              safeLow: 50,
-              safeLowWait: 13.2,
-              average: 75,
-              avgWait: 9.6,
-              fast: 100,
-              fastWait: 6.6,
-              fastest: 200,
-              fastestWait: 1.0,
-            },
-          },
         },
       },
       {
@@ -588,6 +670,15 @@ describe('custom-gas selectors', () => {
         ],
         mockState: {
           metamask: {
+            gasEstimateType: GAS_ESTIMATE_TYPES.LEGACY,
+            gasFeeEstimates: {
+              low: '50',
+              medium: '75',
+              high: '100',
+            },
+            networkDetails: {
+              EIPS: {},
+            },
             conversionRate: 2557.1,
             currentCurrency: 'usd',
             preferences: {
@@ -603,13 +694,6 @@ describe('custom-gas selectors', () => {
               gasLimit: GAS_LIMITS.SIMPLE,
             },
           },
-          gas: {
-            basicEstimates: {
-              safeLow: 50,
-              average: 75,
-              fast: 100,
-            },
-          },
         },
       },
       {
@@ -635,6 +719,15 @@ describe('custom-gas selectors', () => {
         ],
         mockState: {
           metamask: {
+            gasEstimateType: GAS_ESTIMATE_TYPES.LEGACY,
+            gasFeeEstimates: {
+              low: '50',
+              medium: '75',
+              high: '100',
+            },
+            networkDetails: {
+              EIPS: {},
+            },
             conversionRate: 2557.1,
             currentCurrency: 'usd',
             preferences: {
@@ -650,13 +743,6 @@ describe('custom-gas selectors', () => {
               gasLimit: GAS_LIMITS.SIMPLE,
             },
           },
-          gas: {
-            basicEstimates: {
-              safeLow: 50,
-              average: 75,
-              fast: 100,
-            },
-          },
         },
       },
     ];

From 493448c96e4ebdbd350c6603dbd3208616b13b9f Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Fri, 16 Jul 2021 11:19:09 -0500
Subject: [PATCH 139/141] EIP-1559 - Don't show submit button  when in
 education mode, don't duplicate title (#11541)

---
 .../edit-gas-display-education.component.js   |  7 -----
 .../edit-gas-popover.component.js             | 30 ++++++++++---------
 2 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/ui/components/app/edit-gas-display-education/edit-gas-display-education.component.js b/ui/components/app/edit-gas-display-education/edit-gas-display-education.component.js
index 3b0ce0c17..ab2fd2104 100644
--- a/ui/components/app/edit-gas-display-education/edit-gas-display-education.component.js
+++ b/ui/components/app/edit-gas-display-education/edit-gas-display-education.component.js
@@ -14,13 +14,6 @@ export default function EditGasDisplayEducation() {
 
   return (
     <div className="edit-gas-display-education">
-      <Typography
-        color={COLORS.BLACK}
-        variant={TYPOGRAPHY.H4}
-        fontWeight={FONT_WEIGHT.BOLD}
-      >
-        {t('editGasEducationModalTitle')}
-      </Typography>
       <Typography tag="p" color={COLORS.UI4} variant={TYPOGRAPHY.H6}>
         {t('editGasEducationModalIntro')}
       </Typography>
diff --git a/ui/components/app/edit-gas-popover/edit-gas-popover.component.js b/ui/components/app/edit-gas-popover/edit-gas-popover.component.js
index 6bbf5eede..5f48b16d0 100644
--- a/ui/components/app/edit-gas-popover/edit-gas-popover.component.js
+++ b/ui/components/app/edit-gas-popover/edit-gas-popover.component.js
@@ -168,20 +168,22 @@ export default function EditGasPopover({
         showEducationContent ? () => setShowEducationContent(false) : undefined
       }
       footer={
-        <>
-          <Button
-            type="primary"
-            onClick={onSubmit}
-            disabled={
-              isMaxFeeError ||
-              isMaxPriorityFeeError ||
-              isGasTooLow ||
-              isGasEstimatesLoading
-            }
-          >
-            {footerButtonText}
-          </Button>
-        </>
+        showEducationContent ? null : (
+          <>
+            <Button
+              type="primary"
+              onClick={onSubmit}
+              disabled={
+                isMaxFeeError ||
+                isMaxPriorityFeeError ||
+                isGasTooLow ||
+                isGasEstimatesLoading
+              }
+            >
+              {footerButtonText}
+            </Button>
+          </>
+        )
       }
     >
       <div style={{ padding: '0 20px 20px 20px' }}>

From 6f0e54aa26cf1769b488b9bbce0722c63514ef1c Mon Sep 17 00:00:00 2001
From: Dan J Miller <dmiller@kyokan.io>
Date: Fri, 16 Jul 2021 15:36:48 -0230
Subject: [PATCH 140/141] Implement modern design for error messages (#11521)

---
 .../ui/error-message/error-message.component.js       |  2 +-
 .../ui/error-message/error-message.component.test.js  |  4 ++--
 .../ui/error-message/error-message.stories.js         | 11 +++++++++++
 ui/components/ui/error-message/index.scss             | 10 +++++-----
 4 files changed, 19 insertions(+), 8 deletions(-)
 create mode 100644 ui/components/ui/error-message/error-message.stories.js

diff --git a/ui/components/ui/error-message/error-message.component.js b/ui/components/ui/error-message/error-message.component.js
index 542ecc47b..1786e332a 100644
--- a/ui/components/ui/error-message/error-message.component.js
+++ b/ui/components/ui/error-message/error-message.component.js
@@ -12,7 +12,7 @@ const ErrorMessage = (props, context) => {
         alt=""
         className="error-message__icon"
       />
-      <div className="error-message__text">{`ALERT: ${error}`}</div>
+      <div className="error-message__text">{error}</div>
     </div>
   );
 };
diff --git a/ui/components/ui/error-message/error-message.component.test.js b/ui/components/ui/error-message/error-message.component.test.js
index 5e1f0669a..94c16de27 100644
--- a/ui/components/ui/error-message/error-message.component.test.js
+++ b/ui/components/ui/error-message/error-message.component.test.js
@@ -14,7 +14,7 @@ describe('ErrorMessage Component', () => {
     expect(wrapper.find('.error-message')).toHaveLength(1);
     expect(wrapper.find('.error-message__icon')).toHaveLength(1);
     expect(wrapper.find('.error-message__text').text()).toStrictEqual(
-      'ALERT: This is an error.',
+      'This is an error.',
     );
   });
 
@@ -27,7 +27,7 @@ describe('ErrorMessage Component', () => {
     expect(wrapper.find('.error-message')).toHaveLength(1);
     expect(wrapper.find('.error-message__icon')).toHaveLength(1);
     expect(wrapper.find('.error-message__text').text()).toStrictEqual(
-      'ALERT: translate testKey',
+      'translate testKey',
     );
   });
 });
diff --git a/ui/components/ui/error-message/error-message.stories.js b/ui/components/ui/error-message/error-message.stories.js
new file mode 100644
index 000000000..64114ea0f
--- /dev/null
+++ b/ui/components/ui/error-message/error-message.stories.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import { text } from '@storybook/addon-knobs';
+import ErrorMessage from '.';
+
+export default {
+  title: 'ErrorMessage',
+};
+
+export const primaryType = () => (
+  <ErrorMessage errorMessage={text('Error Message:', 'There was an error!')} />
+);
diff --git a/ui/components/ui/error-message/index.scss b/ui/components/ui/error-message/index.scss
index eba500931..e355d9939 100644
--- a/ui/components/ui/error-message/index.scss
+++ b/ui/components/ui/error-message/index.scss
@@ -2,14 +2,14 @@
   @include H7;
 
   min-height: 32px;
-  border: 1px solid $monzo;
-  color: $monzo;
-  background: lighten($monzo, 56%);
-  border-radius: 4px;
+  border: 1px solid $Red-300;
+  color: $ui-black;
+  background: $error-2;
+  border-radius: 8px;
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  padding: 8px 16px;
+  padding: 8px 10px;
 
   &__icon {
     margin-right: 8px;

From ff521fe210af50e0f32394fb00995b41c4f0411f Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Fri, 16 Jul 2021 11:23:31 -0700
Subject: [PATCH 141/141] Making bundle viz links collapsable (#11542)

---
 development/metamaskbot-build-announce.js | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/development/metamaskbot-build-announce.js b/development/metamaskbot-build-announce.js
index f8ec42f0a..8403a4843 100755
--- a/development/metamaskbot-build-announce.js
+++ b/development/metamaskbot-build-announce.js
@@ -50,18 +50,11 @@ async function start() {
     const bundleName = fileName.split(fileType)[0];
     const url = `${BUILD_LINK_BASE}${sourceMapRoot}${fileName}`;
     let fileRoot = bundleName;
-    let fileIndex;
+    let fileIndex = bundleName.match(/-[0-9]{1,}$/u)?.index;
 
-    if (bundleName.indexOf('-') > -1) {
-      const split = bundleName.split('-');
-      // Handle bundles that have hyphens in their name
-      if (split.length === 2 && !isNaN(parseInt(split[1], 10))) {
-        fileRoot = split[0];
-        fileIndex = split[1];
-      } else if (split.length === 3) {
-        fileRoot = [split[0], split[1]].join('-');
-        fileIndex = split[2];
-      }
+    if (fileIndex) {
+      fileRoot = bundleName.slice(0, fileIndex);
+      fileIndex = bundleName.slice(fileIndex + 1, bundleName.length);
     }
 
     const link = `<a href="${url}">${fileIndex || fileRoot}</a>`;
@@ -92,11 +85,14 @@ async function start() {
 
   const contentRows = [
     `builds: ${buildLinks}`,
-    `bundle viz: ${bundleMarkup}`,
     `build viz: ${depVizLink}`,
     `code coverage: ${coverageLink}`,
     `storybook: ${storybookLink}`,
     `<a href="${allArtifactsUrl}">all artifacts</a>`,
+    `<details>
+       <summary>bundle viz:</summary>
+       ${bundleMarkup}
+     </details>`,
   ];
   const hiddenContent = `<ul>${contentRows
     .map((row) => `<li>${row}</li>`)