Merge pull request #11855 from MetaMask/Version-v10.0.2

Version v10.0.2 RC

CHANGELOG.md

@@ -6,6 +6,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [10.0.2]
+### Added
+- [#11818](https://github.com/MetaMask/metamask-extension/pull/11818): Add gas recommendation options to cancel and speed up popovers
+
+### Changed
+- [#11853](https://github.com/MetaMask/metamask-extension/pull/11853): Allow editing custom gas while estimate is loading
+- [#11862](https://github.com/MetaMask/metamask-extension/pull/11862): Increase saliency of mobile sync warning text
+- [#11872](https://github.com/MetaMask/metamask-extension/pull/11872): Default gas limit in edit gas popover to 0 when estimates are unavailable
+- [#11873](https://github.com/MetaMask/metamask-extension/pull/11873): Update copy on tooltip shown when dapp suggests gas fees
+
+### Fixed
+- [#11852](https://github.com/MetaMask/metamask-extension/pull/11852): Improve flashing behavior for loading gas estimates (Confirmation Screen)
+- [#11874](https://github.com/MetaMask/metamask-extension/pull/11874): Fixes Trezor pairing integration
+
 ## [10.0.1]
 ### Fixed
 - [#11813](https://github.com/MetaMask/metamask-extension/pull/11813): Fix error reporting version configuration
@@ -2399,7 +2413,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Uncategorized
 - Added the ability to restore accounts from seed words.
 
-[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v10.0.1...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v10.0.2...HEAD
+[10.0.2]: https://github.com/MetaMask/metamask-extension/compare/v10.0.1...v10.0.2
 [10.0.1]: https://github.com/MetaMask/metamask-extension/compare/v10.0.0...v10.0.1
 [10.0.0]: https://github.com/MetaMask/metamask-extension/compare/v9.8.4...v10.0.0
 [9.8.4]: https://github.com/MetaMask/metamask-extension/compare/v9.8.3...v9.8.4

app/_locales/am/messages.json

@@ -582,9 +582,6 @@
   "metamaskVersion": {
     "message": "የ MetaMask ስሪት"
   },
-  "mobileSyncText": {
-    "message": "እርስዎ መሆንዎትን ለማረጋገጥ እባከዎ የይለፍ ቃልዎን ያስገቡ!"
-  },
   "mustSelectOne": {
     "message": "ቢያንስ 1 ተለዋጭ ስም መምረጥ አለብዎ።"
   },

app/_locales/ar/messages.json

@@ -578,9 +578,6 @@
   "metamaskVersion": {
     "message": "إصدار MetaMask "
   },
-  "mobileSyncText": {
-    "message": "يرجى إدخال كلمة مرورك لتأكيد هويتك!"
-  },
   "mustSelectOne": {
     "message": "يجب تحديد عملة رمزية واحدة على الأقل."
   },

app/_locales/bg/messages.json

@@ -581,9 +581,6 @@
   "metamaskVersion": {
     "message": "Версия на MetaMask"
   },
-  "mobileSyncText": {
-    "message": "Моля, въведете вашата парола, за да потвърдите, че сте вие!"
-  },
   "mustSelectOne": {
     "message": "Трябва да изберете поне 1 жетон."
   },

app/_locales/bn/messages.json

@@ -585,9 +585,6 @@
   "metamaskVersion": {
     "message": "MetaMask সংস্করণ"
   },
-  "mobileSyncText": {
-    "message": "এটি যে আপনি তা নিশ্চিত করতে অনুগ্রহ করে আপনার পাসওয়ার্ড লিখুন!"
-  },
   "mustSelectOne": {
     "message": "অবশ্যই অন্তত 1টি টোকেন নির্বাচন করতে হবে।"
   },

app/_locales/ca/messages.json

@@ -569,9 +569,6 @@
   "metamaskVersion": {
     "message": "Versió MetaMask"
   },
-  "mobileSyncText": {
-    "message": "Si us plau, introdueix la teva contrasenya per confirmar que ets tu!"
-  },
   "mustSelectOne": {
     "message": "Has de seleccionar "
   },

app/_locales/da/messages.json

@@ -569,9 +569,6 @@
   "metamaskDescription": {
     "message": "Som forbinder dig til Ethereum og de decentraliserede internet."
   },
-  "mobileSyncText": {
-    "message": "Indtast din adgangskode for at bekræfte, at det er dig!"
-  },
   "mustSelectOne": {
     "message": "Skal vælge mindst 1 token."
   },

app/_locales/de/messages.json

@@ -564,9 +564,6 @@
   "metamaskVersion": {
     "message": "MetaMask-Version"
   },
-  "mobileSyncText": {
-    "message": "Bitte geben Sie Ihr Passwort ein, um Ihre Identität zu verifizieren!"
-  },
   "mustSelectOne": {
     "message": "Du musst mindestens 1 Token auswählen."
   },

app/_locales/el/messages.json

@@ -582,9 +582,6 @@
   "metamaskVersion": {
     "message": "Έκδοση MetaMask "
   },
-  "mobileSyncText": {
-    "message": "Παρακαλούμε δώστε τον κωδικό πρόσβασής σας για να επιβεβαιώσετε ότι είστε εσείς!"
-  },
   "mustSelectOne": {
     "message": "Πρέπει να επιλέξετε 1 τουλάχιστον διακριτικό."
   },

app/_locales/en/messages.json

@@ -1298,8 +1298,8 @@
     "message": "verify the network details",
     "description": "Serves as link text for the 'mismatchedChain' key. This text will be embedded inside the translation for that key."
   },
-  "mobileSyncText": {
+  "mobileSyncWarning": {
-    "message": "Please enter your password to confirm it's you!"
+    "message": "⚠️ Proceeding will display a secret QR code that allows access to your accounts. Do not share it with anyone. Support staff will never ask your for it."
   },
   "mustSelectOne": {
     "message": "Must select at least 1 token."
@@ -2515,7 +2515,7 @@
     "description": "$1 represents a dapp origin"
   },
   "transactionDetailDappGasTooltip": {
-    "message": "This gas fee suggestion is using legacy gas estimation which may be inaccurate."
+    "message": "Edit to use MetaMask's recommended gas fee based on the latest block."
   },
   "transactionDetailGasHeading": {
     "message": "Estimated gas fee"

app/_locales/es/messages.json

@@ -1127,9 +1127,6 @@
     "message": "verifique los detalles de la red",
     "description": "Serves as link text for the 'mismatchedChain' key. This text will be embedded inside the translation for that key."
   },
-  "mobileSyncText": {
-    "message": "Escriba su contraseña para confirmar que es usted."
-  },
   "mustSelectOne": {
     "message": "Debe seleccionar al menos 1 token."
   },

app/_locales/es_419/messages.json

@@ -1127,9 +1127,6 @@
     "message": "verifique los detalles de la red",
     "description": "Serves as link text for the 'mismatchedChain' key. This text will be embedded inside the translation for that key."
   },
-  "mobileSyncText": {
-    "message": "Escriba su contraseña para confirmar que es usted."
-  },
   "mustSelectOne": {
     "message": "Debe seleccionar al menos 1 token."
   },

app/_locales/et/messages.json

@@ -575,9 +575,6 @@
   "metamaskVersion": {
     "message": "MetaMaski versioon"
   },
-  "mobileSyncText": {
-    "message": "Sisestage parool, et saaksime teid tuvastada!"
-  },
   "mustSelectOne": {
     "message": "Peate valima vähemalt 1 loa."
   },

app/_locales/fa/messages.json

@@ -585,9 +585,6 @@
   "metamaskVersion": {
     "message": "نسخه MetaMask"
   },
-  "mobileSyncText": {
-    "message": "لطفًا رمز عبور را وارد نمایید تا تأیید شود که خود شما هستید!"
-  },
   "mustSelectOne": {
     "message": "باید حداقل 1 رمزیاب را انتخاب کنید."
   },

app/_locales/fi/messages.json

@@ -585,9 +585,6 @@
   "metamaskVersion": {
     "message": "MetaMask-versio"
   },
-  "mobileSyncText": {
-    "message": "Vahvista henkilöllisyytesi antamalla salasanasi!"
-  },
   "mustSelectOne": {
     "message": "Valittava vähintään 1 poletti."
   },

app/_locales/fil/messages.json

@@ -523,9 +523,6 @@
   "metamaskVersion": {
     "message": "Bersyon ng MetaMask"
   },
-  "mobileSyncText": {
-    "message": "Pakilagay ang iyong password para kumpirmahing ikaw ito!"
-  },
   "mustSelectOne": {
     "message": "Dapat pumili ng kahit 1 token."
   },

app/_locales/fr/messages.json

@@ -570,9 +570,6 @@
   "metamaskVersion": {
     "message": "Version de MetaMask"
   },
-  "mobileSyncText": {
-    "message": "Veuillez entrer votre mot de passe pour confirmer que c'est bien vous !"
-  },
   "mustSelectOne": {
     "message": "Vous devez selectionner au moins 1 jeton."
   },

app/_locales/he/messages.json

@@ -582,9 +582,6 @@
   "metamaskVersion": {
     "message": "גרסת MetaMask"
   },
-  "mobileSyncText": {
-    "message": "נא להזין את הססמה שלך כדי לאשר שזה/זו אכן את/ה!"
-  },
   "mustSelectOne": {
     "message": "חובה לבחור לפחות אסימון אחד."
   },

app/_locales/hi/messages.json

@@ -1127,9 +1127,6 @@
     "message": "नेटवर्क विवरण सत्यापित करें",
     "description": "Serves as link text for the 'mismatchedChain' key. This text will be embedded inside the translation for that key."
   },
-  "mobileSyncText": {
-    "message": "कृपया यह पुष्टि करने के लिए अपना पासवर्ड दर्ज करें कि यह आप ही हैं!"
-  },
   "mustSelectOne": {
     "message": "कम से कम 1 टोकन का चयन करना चाहिए।"
   },

app/_locales/hr/messages.json

@@ -578,9 +578,6 @@
   "metamaskVersion": {
     "message": "Inačica usluge MetaMask"
   },
-  "mobileSyncText": {
-    "message": "Upišite svoju lozinku kako biste potvrdili da ste to vi!"
-  },
   "mustSelectOne": {
     "message": "Mora se odabrati barem jedan token."
   },

app/_locales/hu/messages.json

@@ -578,9 +578,6 @@
   "metamaskVersion": {
     "message": "MetaMask verzió"
   },
-  "mobileSyncText": {
-    "message": "Kérünk írd be jelszavad, hogy igazold kiléted!"
-  },
   "mustSelectOne": {
     "message": "Legalább 1 tokent ki kell választania."
   },

app/_locales/id/messages.json

@@ -1127,9 +1127,6 @@
     "message": "verifikasi detail jaringan",
     "description": "Serves as link text for the 'mismatchedChain' key. This text will be embedded inside the translation for that key."
   },
-  "mobileSyncText": {
-    "message": "Masukkan kata sandi Anda untuk memastikan ini adalah Anda!"
-  },
   "mustSelectOne": {
     "message": "Harus memilih sekurangnya 1 token."
   },

app/_locales/it/messages.json

@@ -966,9 +966,6 @@
   "metametricsOptInDescription": {
     "message": "MetaMask vorrebbe raccogliere dati di utilizzo per capire meglio come gli utenti interagiscono con l'estensione. Questi dati verranno usati continuamente per migliorare l'usabilità e l'esperienza utente dei nostri prodotti e dell'ecosistema Ethereum."
   },
-  "mobileSyncText": {
-    "message": "Per favore inserisci la password per confermare che sei te!"
-  },
   "mustSelectOne": {
     "message": "Devi selezionare almeno un token."
   },

app/_locales/ja/messages.json

@@ -1127,9 +1127,6 @@
     "message": "ネットワークの詳細を確認します",
     "description": "Serves as link text for the 'mismatchedChain' key. This text will be embedded inside the translation for that key."
   },
-  "mobileSyncText": {
-    "message": "本人であることを確認するためにパスワードを入力してください!"
-  },
   "mustSelectOne": {
     "message": "トークンを 1 つ以上選択する必要があります。"
   },

app/_locales/kn/messages.json

@@ -585,9 +585,6 @@
   "metamaskVersion": {
     "message": "MetaMask ಆವೃತ್ತಿ"
   },
-  "mobileSyncText": {
-    "message": "ಇದು ನೀವೇ ಎಂಬುದನ್ನು ಖಚಿತಪಡಿಸಲು ದಯವಿಟ್ಟು ನಿಮ್ಮ ಪಾಸ್‌ವರ್ಡ್ ಅನ್ನು ನಮೂದಿಸಿ!"
-  },
   "mustSelectOne": {
     "message": "ಕನಿಷ್ಟ 1 ಟೋಕನ್ ಅನ್ನು ಆಯ್ಕೆಮಾಡಬೇಕು."
   },

app/_locales/ko/messages.json

@@ -1127,9 +1127,6 @@
     "message": "네트워크 세부 정보 검증",
     "description": "Serves as link text for the 'mismatchedChain' key. This text will be embedded inside the translation for that key."
   },
-  "mobileSyncText": {
-    "message": "암호를 입력하여 본인임을 인증하세요."
-  },
   "mustSelectOne": {
     "message": "토큰을 1개 이상 선택해야 합니다."
   },

app/_locales/lt/messages.json

@@ -585,9 +585,6 @@
   "metamaskVersion": {
     "message": "„MetaMask“ versija"
   },
-  "mobileSyncText": {
-    "message": "Įveskite savo slaptažodį, kad patvirtintumėte, jog tai tikrai jūs!"
-  },
   "mustSelectOne": {
     "message": "Turite pasirinkti bent 1 žetoną."
   },

app/_locales/lv/messages.json

@@ -581,9 +581,6 @@
   "metamaskVersion": {
     "message": "MetaMask versija"
   },
-  "mobileSyncText": {
-    "message": "Lūdzu, ievadiet paroli, lai apstiprinātu, ka tas esat jūs."
-  },
   "mustSelectOne": {
     "message": "Jāatlasa vismaz 1 marķieris."
   },

app/_locales/ms/messages.json

@@ -565,9 +565,6 @@
   "metamaskVersion": {
     "message": "Versi MetaMask"
   },
-  "mobileSyncText": {
-    "message": "Sila masukkan kata laluan anda untuk mengesahkan ini memang anda!"
-  },
   "mustSelectOne": {
     "message": "Mesti memilih sekurang-kurangnya 1 token."
   },

app/_locales/no/messages.json

@@ -572,9 +572,6 @@
   "metamaskVersion": {
     "message": "MetaMask-versjon "
   },
-  "mobileSyncText": {
-    "message": "Vennligst skriv inn passordet ditt for å bekrefte at det er deg!"
-  },
   "mustSelectOne": {
     "message": "Må velge minst 1 token. "
   },

app/_locales/ph/messages.json

@@ -1127,9 +1127,6 @@
     "message": "i-verify ang mga detalye ng network",
     "description": "Serves as link text for the 'mismatchedChain' key. This text will be embedded inside the translation for that key."
   },
-  "mobileSyncText": {
-    "message": "Pakilagay ang iyong password para makumpirmang ikaw nga ito!"
-  },
   "mustSelectOne": {
     "message": "Dapat pumili ng kahit 1 token lang."
   },

app/_locales/pl/messages.json

@@ -582,9 +582,6 @@
   "metamaskVersion": {
     "message": "Wersja MetaMask"
   },
-  "mobileSyncText": {
-    "message": "Wpisz hasło, aby potwierdzić, że to Ty!"
-  },
   "mustSelectOne": {
     "message": "Należy wybrać co najmniej 1 token."
   },

app/_locales/pt_BR/messages.json

@@ -1127,9 +1127,6 @@
     "message": "Verifique os detalhes da rede",
     "description": "Serves as link text for the 'mismatchedChain' key. This text will be embedded inside the translation for that key."
   },
-  "mobileSyncText": {
-    "message": "Informe sua senha para confirmar que é você mesmo!"
-  },
   "mustSelectOne": {
     "message": "Selecione pelo menos 1 token."
   },

app/_locales/ro/messages.json

@@ -572,9 +572,6 @@
   "metamaskVersion": {
     "message": "Versiune MetaMask"
   },
-  "mobileSyncText": {
-    "message": "Vă rugăm introduceți parola pentru a vă confirma identitatea!"
-  },
   "mustSelectOne": {
     "message": "Trebuie să selectați cel puțin 1 simbol."
   },

app/_locales/ru/messages.json

@@ -1127,9 +1127,6 @@
     "message": "проверить сведения о сети",
     "description": "Serves as link text for the 'mismatchedChain' key. This text will be embedded inside the translation for that key."
   },
-  "mobileSyncText": {
-    "message": "Введите свой пароль, чтобы подтвердить ваш личность!"
-  },
   "mustSelectOne": {
     "message": "Необходимо выбрать хотя бы 1 токен."
   },

app/_locales/sk/messages.json

@@ -557,9 +557,6 @@
   "metamaskVersion": {
     "message": "Verzia MetaMask"
   },
-  "mobileSyncText": {
-    "message": "Zadajte svoje heslo a potvrďte, že ste to vy!"
-  },
   "mustSelectOne": {
     "message": "Musíte zvolit aspoň 1 token."
   },

app/_locales/sl/messages.json

@@ -573,9 +573,6 @@
   "metamaskVersion": {
     "message": "Različica"
   },
-  "mobileSyncText": {
-    "message": "Vnesite geslo in potrdite, da ste to vi."
-  },
   "mustSelectOne": {
     "message": "Izbran mora biti vsaj 1 žeton."
   },

app/_locales/sr/messages.json

@@ -576,9 +576,6 @@
   "metamaskVersion": {
     "message": "MetaMask verzija"
   },
-  "mobileSyncText": {
-    "message": "Molimo vas unesite šifru kako biste potvrdili da ste to vi!"
-  },
   "mustSelectOne": {
     "message": "Morate izabrati najmanje 1 token."
   },

app/_locales/sv/messages.json

@@ -569,9 +569,6 @@
   "metamaskVersion": {
     "message": "MetaMask-version"
   },
-  "mobileSyncText": {
-    "message": "Var vänlig ange ditt lösenord för att bekräfta att det är du!"
-  },
   "mustSelectOne": {
     "message": "Minst 1 token måste väljas."
   },

app/_locales/sw/messages.json

@@ -563,9 +563,6 @@
   "metamaskVersion": {
     "message": "Toleo la MetaMask"
   },
-  "mobileSyncText": {
-    "message": "Tafadhali ingiza nenosiri lako ili kuthibitisha kuwa ni wewe!"
-  },
   "mustSelectOne": {
     "message": "Lazima uchague angalau kianzio 1."
   },

app/_locales/tl/messages.json

@@ -960,9 +960,6 @@
   "metametricsOptInDescription": {
     "message": "Gustong kunin ng MetaMask ang data ng paggamit para mas maunawaan kung paano ginagamit ng mga user namin ang extension. Gagamitin ang data na ito para patuloy na mapahusay ang kakayahang magamit at karanasan ng user sa paggamit ng produkto namin at Ethereum ecosystem."
   },
-  "mobileSyncText": {
-    "message": "Pakilagay ang iyong password para makumpirmang ikaw nga ito!"
-  },
   "mustSelectOne": {
     "message": "Dapat pumili ng kahit 1 token lang."
   },

app/_locales/uk/messages.json

@@ -585,9 +585,6 @@
   "metamaskVersion": {
     "message": "Версія MetaMask"
   },
-  "mobileSyncText": {
-    "message": "Введіть пароль, щоб підтвердити свою особу!"
-  },
   "mustSelectOne": {
     "message": "Слід вибрати хоча б 1 токен."
   },

app/_locales/vi/messages.json

@@ -1127,9 +1127,6 @@
     "message": "xác minh thông tin về mạng",
     "description": "Serves as link text for the 'mismatchedChain' key. This text will be embedded inside the translation for that key."
   },
-  "mobileSyncText": {
-    "message": "Vui lòng nhập mật khẩu để xác nhận đây là bạn!"
-  },
   "mustSelectOne": {
     "message": "Phải chọn ít nhất 1 token."
   },

app/_locales/zh_CN/messages.json

@@ -963,9 +963,6 @@
   "metametricsOptInDescription": {
     "message": "MetaMask 希望收集使用数据，以更好地了解我们的用户如何与扩展进行互动。这些数据将被用于持续改进我们产品和 Ethereum 生态系统的可用性和用户体验。"
   },
-  "mobileSyncText": {
-    "message": "请输入密码确认个人身份！"
-  },
   "mustSelectOne": {
     "message": "至少选择 1 种代币。"
   },

app/_locales/zh_TW/messages.json

@@ -591,9 +591,6 @@
   "metamaskVersion": {
     "message": "MetaMask 版本"
   },
-  "mobileSyncText": {
-    "message": "請輸入密碼確認身份！"
-  },
   "mustSelectOne": {
     "message": "必須選擇至少 1 代幣"
   },

development/build/scripts.js

@@ -74,13 +74,21 @@ function createScriptTasks({ browserPlatforms, livereload }) {
   return { dev, test, testDev, prod };
 
   function createTasksForBuildJsExtension({ taskPrefix, devMode, testing }) {
-    const standardEntryPoints = ['background', 'ui', 'phishing-detect'];
+    const standardEntryPoints = [
+      'background',
+      'ui',
+      'phishing-detect',
+      'content-script',
+    ];
     const standardSubtask = createTask(
       `${taskPrefix}:standardEntryPoints`,
       createFactoredBuild({
-        entryFiles: standardEntryPoints.map(
+        entryFiles: standardEntryPoints.map((label) => {
-          (label) => `./app/scripts/${label}.js`,
+          if (label === 'content-script') {
-        ),
+            return './app/vendor/trezor/content-script.js';
+          }
+          return `./app/scripts/${label}.js`;
+        }),
         devMode,
         testing,
         browserPlatforms,
@@ -277,6 +285,15 @@ function createFactoredBuild({
             renderHtmlFile('background', groupSet, commonSet, browserPlatforms);
             break;
           }
+          case 'content-script': {
+            renderHtmlFile(
+              'trezor-usb-permissions',
+              groupSet,
+              commonSet,
+              browserPlatforms,
+            );
+            break;
+          }
           default: {
             throw new Error(`buildsys - unknown groupLabel "${groupLabel}"`);
           }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "metamask-crx",
-  "version": "10.0.1",
+  "version": "10.0.2",
   "private": true,
   "repository": {
     "type": "git",

shared/modules/transaction.utils.js

@@ -38,3 +38,23 @@ export function isLegacyTransaction(transaction) {
       isHexString(transaction.txParams.gasPrice))
   );
 }
+
+/**
+ * Determine if a transactions gas fees in txParams match those in its dappSuggestedGasFees property
+ * @param {import("../constants/transaction").TransactionMeta} transaction -
+ *  the transaction to check
+ * @returns {boolean} true if both the txParams and dappSuggestedGasFees are objects with truthy gas fee properties,
+ *   and those properties are strictly equal
+ */
+export function txParamsAreDappSuggested(transaction) {
+  const { gasPrice, maxPriorityFeePerGas, maxFeePerGas } =
+    transaction?.txParams || {};
+  return (
+    (gasPrice && gasPrice === transaction?.dappSuggestedGasFees?.gasPrice) ||
+    (maxPriorityFeePerGas &&
+      maxFeePerGas &&
+      transaction?.dappSuggestedGasFees?.maxPriorityFeePerGas ===
+        maxPriorityFeePerGas &&
+      transaction?.dappSuggestedGasFees?.maxFeePerGas === maxFeePerGas)
+  );
+}

ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js

@@ -8,7 +8,6 @@ import { GAS_ESTIMATE_TYPES } from '../../../../shared/constants/gas';
 import { getGasFormErrorText } from '../../../helpers/constants/gas';
 import { checkNetworkAndAccountSupports1559 } from '../../../selectors';
 import { getIsGasEstimatesLoading } from '../../../ducks/metamask/metamask';
-import { getGasLoadingAnimationIsShowing } from '../../../ducks/app/app';
 
 export default function AdvancedGasControls({
   gasEstimateType,
@@ -31,11 +30,6 @@ export default function AdvancedGasControls({
     checkNetworkAndAccountSupports1559,
   );
   const isGasEstimatesLoading = useSelector(getIsGasEstimatesLoading);
-  const isGasLoadingAnimationIsShowing = useSelector(
-    getGasLoadingAnimationIsShowing,
-  );
-  const disableFormFields =
-    isGasEstimatesLoading || isGasLoadingAnimationIsShowing;
 
   const showFeeMarketFields =
     networkAndAccountSupport1559 &&
@@ -80,7 +74,6 @@ export default function AdvancedGasControls({
                 ? getGasFormErrorText(gasErrors.maxPriorityFee, t)
                 : null
             }
-            disabled={disableFormFields}
           />
           <FormField
             titleText={t('maxFee')}
@@ -98,7 +91,6 @@ export default function AdvancedGasControls({
                 ? getGasFormErrorText(gasErrors.maxFee, t)
                 : null
             }
-            disabled={disableFormFields}
           />
         </>
       ) : (
@@ -118,7 +110,6 @@ export default function AdvancedGasControls({
                 ? getGasFormErrorText(gasErrors.gasPrice, t)
                 : null
             }
-            disabled={disableFormFields}
           />
         </>
       )}

ui/components/app/confirm-page-container/confirm-page-container-content/index.scss

@@ -88,4 +88,8 @@
   .page-container__footer {
     margin-top: auto;
   }
+
+  &__currency-container {
+    position: relative;
+  }
 }

ui/components/app/edit-gas-display/edit-gas-display.component.js

@@ -67,6 +67,7 @@ export default function EditGasDisplay({
   balanceError,
   estimatesUnavailableWarning,
   hasGasErrors,
+  txParamsHaveBeenCustomized,
 }) {
   const t = useContext(I18nContext);
   const isMainnet = useSelector(getIsMainnet);
@@ -96,12 +97,13 @@ export default function EditGasDisplay({
       dappSuggestedAndTxParamGasFeesAreTheSame,
   );
 
-  const showTopError = balanceError || estimatesUnavailableWarning;
+  const showTopError =
+    (balanceError || estimatesUnavailableWarning) &&
+    (!isGasEstimatesLoading || txParamsHaveBeenCustomized);
   const radioButtonsEnabled =
     networkAndAccountSupport1559 &&
     gasEstimateType === GAS_ESTIMATE_TYPES.FEE_MARKET &&
-    !requireDappAcknowledgement &&
+    !requireDappAcknowledgement;
-    ![EDIT_GAS_MODES.SPEED_UP, EDIT_GAS_MODES.CANCEL].includes(mode);
 
   let errorKey;
   if (balanceError) {
@@ -121,7 +123,7 @@ export default function EditGasDisplay({
             />
           </div>
         )}
-        {showTopError && !isGasEstimatesLoading && (
+        {showTopError && (
           <div className="edit-gas-display__warning">
             <ErrorMessage errorKey={errorKey} />
           </div>
@@ -249,6 +251,7 @@ export default function EditGasDisplay({
         {!requireDappAcknowledgement &&
           (showAdvancedForm ||
             hasGasErrors ||
+            estimatesUnavailableWarning ||
             showAdvancedInlineGasIfPossible) && (
             <AdvancedGasControls
               gasEstimateType={gasEstimateType}
@@ -316,4 +319,5 @@ EditGasDisplay.propTypes = {
   balanceError: PropTypes.bool,
   estimatesUnavailableWarning: PropTypes.bool,
   hasGasErrors: PropTypes.bool,
+  txParamsHaveBeenCustomized: PropTypes.bool,
 };

ui/components/app/edit-gas-display/index.scss

@@ -64,5 +64,7 @@
 
   &__warning {
     margin-bottom: 24px;
+    position: relative;
+    margin-top: 4px;
   }
 }

ui/components/app/edit-gas-popover/edit-gas-popover.component.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useGasFeeInputs } from '../../../hooks/useGasFeeInputs';
 import { getGasLoadingAnimationIsShowing } from '../../../ducks/app/app';
-
+import { txParamsAreDappSuggested } from '../../../../shared/modules/transaction.utils';
 import { EDIT_GAS_MODES, GAS_LIMITS } from '../../../../shared/constants/gas';
 
 import {
@@ -93,6 +93,9 @@ export default function EditGasPopover({
     estimatedBaseFee,
   } = useGasFeeInputs(defaultEstimateToUse, transaction, minimumGasLimit, mode);
 
+  const txParamsHaveBeenCustomized =
+    estimateToUse === 'custom' || txParamsAreDappSuggested(transaction);
+
   /**
    * Temporary placeholder, this should be managed by the parent component but
    * we will be extracting this component from the hard to maintain modal/
@@ -129,11 +132,17 @@ export default function EditGasPopover({
           gasPrice: decGWEIToHexWEI(gasPrice),
         };
 
+    const cleanTransactionParams = { ...transaction.txParams };
+
+    if (networkAndAccountSupport1559) {
+      delete cleanTransactionParams.gasPrice;
+    }
+
     const updatedTxMeta = {
       ...transaction,
       userFeeLevel: estimateToUse || 'custom',
       txParams: {
-        ...transaction.txParams,
+        ...cleanTransactionParams,
         ...newGasSettings,
       },
     };
@@ -210,9 +219,9 @@ export default function EditGasPopover({
               onClick={onSubmit}
               disabled={
                 hasGasErrors ||
-                isGasEstimatesLoading ||
                 balanceError ||
-                gasLoadingAnimationIsShowing
+                ((isGasEstimatesLoading || gasLoadingAnimationIsShowing) &&
+                  !txParamsHaveBeenCustomized)
               }
             >
               {footerButtonText}
@@ -262,6 +271,7 @@ export default function EditGasPopover({
               balanceError={balanceError}
               estimatesUnavailableWarning={estimatesUnavailableWarning}
               hasGasErrors={hasGasErrors}
+              txParamsHaveBeenCustomized={txParamsHaveBeenCustomized}
               {...editGasDisplayProps}
             />
           </>

ui/components/app/transaction-detail/transaction-detail.component.js

@@ -1,33 +1,18 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
-
-import { getIsGasEstimatesLoading } from '../../../ducks/metamask/metamask';
-import { getGasLoadingAnimationIsShowing } from '../../../ducks/app/app';
 
 import { I18nContext } from '../../../contexts/i18n';
 
 import TransactionDetailItem from '../transaction-detail-item/transaction-detail-item.component';
-import LoadingHeartBeat from '../../ui/loading-heartbeat';
 
 export default function TransactionDetail({ rows = [], onEdit }) {
   const t = useContext(I18nContext);
-  const isGasEstimatesLoading = useSelector(getIsGasEstimatesLoading);
-  const gasLoadingAnimationIsShowing = useSelector(
-    getGasLoadingAnimationIsShowing,
-  );
 
   return (
     <div className="transaction-detail">
-      {process.env.IN_TEST === 'true' ? null : <LoadingHeartBeat />}
       {onEdit && (
         <div className="transaction-detail-edit">
-          <button
+          <button onClick={onEdit}>{t('edit')}</button>
-            onClick={onEdit}
-            disabled={isGasEstimatesLoading || gasLoadingAnimationIsShowing}
-          >
-            {t('edit')}
-          </button>
         </div>
       )}
       <div className="transaction-detail-rows">{rows}</div>

ui/components/ui/loading-heartbeat/index.scss

@@ -19,9 +19,7 @@
 }
 
 @keyframes heartbeat {
-  0% { opacity: 0; }
+  0% { opacity: 0.2; }
-  25% { opacity: 1; }
+  50% { opacity: 1; }
-  50% { opacity: 0.5; }
+  100% { opacity: 0.2; }
-  75% { opacity: 1; }
-  100% { opacity: 0; }
 }

ui/helpers/utils/util.js

@@ -16,6 +16,9 @@ import { toChecksumHexAddress } from '../../../shared/modules/hexstring-utils';
 
 // formatData :: ( date: <Unix Timestamp> ) -> String
 export function formatDate(date, format = "M/d/y 'at' T") {
+  if (!date) {
+    return '';
+  }
   return DateTime.fromMillis(date).toFormat(format);
 }
 
@@ -24,6 +27,9 @@ export function formatDateWithYearContext(
   formatThisYear = 'MMM d',
   fallback = 'MMM d, y',
 ) {
+  if (!date) {
+    return '';
+  }
   const dateTime = DateTime.fromMillis(date);
   const now = DateTime.local();
   return dateTime.toFormat(

ui/hooks/useGasFeeInputs.js

@@ -229,7 +229,7 @@ export function useGasFeeInputs(
     initialGasPrice && initialFeeParamsAreCustom ? initialGasPrice : null,
   );
   const [gasLimit, setGasLimit] = useState(
-    Number(hexToDecimal(transaction?.txParams?.gas ?? minimumGasLimit)),
+    Number(hexToDecimal(transaction?.txParams?.gas ?? '0x0')),
   );
 
   const userPrefersAdvancedGas = useSelector(getAdvancedInlineGasShown);
@@ -456,7 +456,10 @@ export function useGasFeeInputs(
       if (networkAndAccountSupports1559) {
         estimatesUnavailableWarning = true;
       }
-      if (bnLessThanEqualTo(gasPriceToUse, 0)) {
+      if (
+        (!networkAndAccountSupports1559 || transaction?.txParams?.gasPrice) &&
+        bnLessThanEqualTo(gasPriceToUse, 0)
+      ) {
         gasErrors.gasPrice = GAS_FORM_ERRORS.GAS_PRICE_TOO_LOW;
       }
       break;

ui/hooks/useGasFeeInputs.test.js

@@ -323,7 +323,12 @@ describe('useGasFeeInputs', () => {
     });
 
     it('should return true', () => {
-      const { result } = renderHook(() => useGasFeeInputs());
+      const { result } = renderHook(() =>
+        useGasFeeInputs(null, {
+          userFeeLevel: 'medium',
+          txParams: { gas: '0x5208' },
+        }),
+      );
       expect(result.current.balanceError).toBe(true);
     });
   });

ui/hooks/useShouldAnimateGasEstimations.js

@@ -40,9 +40,15 @@ export function useShouldAnimateGasEstimations() {
       showLoadingAnimation === true
     ) {
       dispatch(toggleGasLoadingAnimation(true));
+    }
+  }, [dispatch, isGasLoadingAnimationActive, showLoadingAnimation]);
 
+  useEffect(() => {
+    if (
+      isGasLoadingAnimationActive === true &&
+      showLoadingAnimation === false
+    ) {
       setTimeout(() => {
-        console.log('Killing the toggleGasLoadingAnimation to false');
         dispatch(toggleGasLoadingAnimation(false));
       }, 2000);
     }

ui/hooks/useTransactionDisplayData.js

@@ -80,7 +80,7 @@ export function useTransactionDisplayData(transactionGroup) {
 
   const primaryValue = primaryTransaction.txParams?.value;
   let prefix = '-';
-  const date = formatDateWithYearContext(initialTransaction.time || 0);
+  const date = formatDateWithYearContext(initialTransaction.time);
   let subtitle;
   let subtitleContainsOrigin = false;
   let recipientAddress = to;

ui/pages/confirm-transaction-base/confirm-transaction-base.component.js

@@ -33,6 +33,7 @@ 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';
+import LoadingHeartBeat from '../../components/ui/loading-heartbeat';
 import GasTiming from '../../components/app/gas-timing/gas-timing.component';
 
 import { COLORS } from '../../helpers/constants/design-system';
@@ -43,6 +44,9 @@ import {
   removePollingTokenFromAppState,
 } from '../../store/actions';
 
+const renderHeartBeatIfNotInTest = () =>
+  process.env.IN_TEST === 'true' ? null : <LoadingHeartBeat />;
+
 export default class ConfirmTransactionBase extends Component {
   static contextTypes = {
     t: PropTypes.func,
@@ -112,6 +116,7 @@ export default class ConfirmTransactionBase extends Component {
     maxFeePerGas: PropTypes.string,
     maxPriorityFeePerGas: PropTypes.string,
     baseFeePerGas: PropTypes.string,
+    gasFeeIsCustom: PropTypes.bool,
   };
 
   state = {
@@ -196,6 +201,7 @@ export default class ConfirmTransactionBase extends Component {
       txData: { simulationFails, txParams: { value: amount } = {} } = {},
       customGas,
       noGasPrice,
+      gasFeeIsCustom,
     } = this.props;
 
     const insufficientBalance =
@@ -230,7 +236,7 @@ export default class ConfirmTransactionBase extends Component {
       };
     }
 
-    if (noGasPrice) {
+    if (noGasPrice && !gasFeeIsCustom) {
       return {
         valid: false,
         errorKey: GAS_PRICE_FETCH_FAILURE_ERROR_KEY,
@@ -437,29 +443,41 @@ export default class ConfirmTransactionBase extends Component {
                 txData.dappSuggestedGasFees ? COLORS.SECONDARY1 : COLORS.BLACK
               }
               detailText={
-                <UserPreferencedCurrencyDisplay
+                <div className="confirm-page-container-content__currency-container">
-                  type={SECONDARY}
+                  {renderHeartBeatIfNotInTest()}
-                  value={hexMinimumTransactionFee}
+                  <UserPreferencedCurrencyDisplay
-                  hideLabel={Boolean(useNativeCurrencyAsPrimaryCurrency)}
+                    type={SECONDARY}
-                />
+                    value={hexMinimumTransactionFee}
+                    hideLabel={Boolean(useNativeCurrencyAsPrimaryCurrency)}
+                  />
+                </div>
               }
               detailTotal={
-                <UserPreferencedCurrencyDisplay
+                <div className="confirm-page-container-content__currency-container">
-                  type={PRIMARY}
+                  {renderHeartBeatIfNotInTest()}
-                  value={hexMinimumTransactionFee}
+                  <UserPreferencedCurrencyDisplay
-                  hideLabel={!useNativeCurrencyAsPrimaryCurrency}
+                    type={PRIMARY}
-                />
+                    value={hexMinimumTransactionFee}
+                    hideLabel={!useNativeCurrencyAsPrimaryCurrency}
+                  />
+                </div>
               }
               subText={t('editGasSubTextFee', [
                 <b key="editGasSubTextFeeLabel">
                   {t('editGasSubTextFeeLabel')}
                 </b>,
-                <UserPreferencedCurrencyDisplay
+                <div
-                  key="editGasSubTextFeeAmount"
+                  key="editGasSubTextFeeValue"
-                  type={PRIMARY}
+                  className="confirm-page-container-content__currency-container"
-                  value={hexMaximumTransactionFee}
+                >
-                  hideLabel={!useNativeCurrencyAsPrimaryCurrency}
+                  {renderHeartBeatIfNotInTest()}
-                />,
+                  <UserPreferencedCurrencyDisplay
+                    key="editGasSubTextFeeAmount"
+                    type={PRIMARY}
+                    value={hexMaximumTransactionFee}
+                    hideLabel={!useNativeCurrencyAsPrimaryCurrency}
+                  />
+                </div>,
               ])}
               subTitle={
                 <GasTiming
@@ -829,6 +847,7 @@ export default class ConfirmTransactionBase extends Component {
       showAccountInHeader,
       txData,
       gasIsLoading,
+      gasFeeIsCustom,
     } = this.props;
     const {
       submitting,
@@ -895,7 +914,7 @@ export default class ConfirmTransactionBase extends Component {
         lastTx={lastTx}
         ofText={ofText}
         requestsWaitingText={requestsWaitingText}
-        disabled={!valid || submitting || gasIsLoading}
+        disabled={!valid || submitting || (gasIsLoading && !gasFeeIsCustom)}
         onEdit={() => this.handleEdit()}
         onCancelAll={() => this.handleCancelAll()}
         onCancel={() => this.handleCancel()}

ui/pages/confirm-transaction-base/confirm-transaction-base.container.js

@@ -31,7 +31,10 @@ import {
   getPreferences,
 } from '../../selectors';
 import { getMostRecentOverviewPage } from '../../ducks/history/history';
-import { transactionMatchesNetwork } from '../../../shared/modules/transaction.utils';
+import {
+  transactionMatchesNetwork,
+  txParamsAreDappSuggested,
+} from '../../../shared/modules/transaction.utils';
 import { toChecksumHexAddress } from '../../../shared/modules/hexstring-utils';
 import {
   updateTransactionGasFees,
@@ -155,6 +158,9 @@ const mapStateToProps = (state, ownProps) => {
   const isEthGasPrice = getIsEthGasPriceFetched(state);
   const noGasPrice = !supportsEIP1599 && getNoGasPriceFetched(state);
   const { useNativeCurrencyAsPrimaryCurrency } = getPreferences(state);
+  const gasFeeIsCustom =
+    fullTxData.userFeeLevel === 'custom' ||
+    txParamsAreDappSuggested(fullTxData);
 
   return {
     balance,
@@ -201,6 +207,7 @@ const mapStateToProps = (state, ownProps) => {
     maxFeePerGas: gasEstimationObject.maxFeePerGas,
     maxPriorityFeePerGas: gasEstimationObject.maxPriorityFeePerGas,
     baseFeePerGas: gasEstimationObject.baseFeePerGas,
+    gasFeeIsCustom,
   };
 };
 

ui/pages/mobile-sync/mobile-sync.component.js

@@ -317,7 +317,7 @@ export default class MobileSyncPage extends Component {
 
     return screen === PASSWORD_PROMPT_SCREEN ? (
       <div>
-        {this.renderWarning(this.context.t('mobileSyncText'))}
+        {this.renderWarning(this.context.t('mobileSyncWarning'))}
         <div className="reveal-seed__content">
           {this.renderPasswordPromptContent()}
         </div>
@@ -404,7 +404,10 @@ export default class MobileSyncPage extends Component {
     const { password } = this.state;
 
     return (
-      <div className="new-account-import-form__buttons" style={{ padding: 30 }}>
+      <div
+        className="new-account-import-form__buttons"
+        style={{ padding: 30, marginTop: 0 }}
+      >
         <Button
           type="default"
           large

ui/pages/swaps/build-quote/build-quote.js

@@ -52,7 +52,10 @@ import {
   isSwapsDefaultTokenAddress,
   isSwapsDefaultTokenSymbol,
 } from '../../../../shared/modules/swaps.utils';
-import { SWAPS_CHAINID_DEFAULT_BLOCK_EXPLORER_URL_MAP } from '../../../../shared/constants/swaps';
+import {
+  SWAPS_CHAINID_DEFAULT_BLOCK_EXPLORER_URL_MAP,
+  SWAPS_CHAINID_DEFAULT_TOKEN_MAP,
+} from '../../../../shared/constants/swaps';
 
 import { resetSwapsPostFetchState, removeToken } from '../../../store/actions';
 import { fetchTokenPrice, fetchTokenBalance } from '../swaps.util';
@@ -370,7 +373,7 @@ export default function BuildQuote({
 
   const swapYourTokenBalance = t('swapYourTokenBalance', [
     fromTokenString || '0',
-    fromTokenSymbol,
+    fromTokenSymbol || SWAPS_CHAINID_DEFAULT_TOKEN_MAP[chainId]?.symbol || '',
   ]);
 
   return (