From 3401ef01c48343f9d2c6e6a16c36757f20f5e577 Mon Sep 17 00:00:00 2001 From: Pedro Figueiredo Date: Thu, 7 Nov 2024 12:21:19 +0000 Subject: [PATCH] fix: Updates to the simulations component (#28107) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** Updates the copy, layout and text color for 3 scenarios: No changes, Generic Error and Fiat value not available as per design review. [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/28107?quickstart=1) ## **Related issues** Fixes: https://github.com/MetaMask/metamask-extension/issues/27072 ## **Manual testing steps** 1. Go to this page... 2. 3. ## **Screenshots/Recordings** ### **Before** ### **After** Screenshot 2024-10-25 at 14 52 54 Screenshot 2024-10-30 at 16 31 01 Screenshot 2024-10-25 at 14 14 19 ## **Pre-merge author checklist** - [ ] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've completed the PR template to the best of my ability - [ ] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. --- app/_locales/de/messages.json | 9 -- app/_locales/el/messages.json | 9 -- app/_locales/en/messages.json | 13 +-- app/_locales/en_GB/messages.json | 9 -- app/_locales/es/messages.json | 9 -- app/_locales/fr/messages.json | 9 -- app/_locales/hi/messages.json | 9 -- app/_locales/id/messages.json | 9 -- app/_locales/ja/messages.json | 9 -- app/_locales/ko/messages.json | 9 -- app/_locales/pt/messages.json | 9 -- app/_locales/ru/messages.json | 9 -- app/_locales/tl/messages.json | 9 -- app/_locales/tr/messages.json | 9 -- app/_locales/vi/messages.json | 9 -- app/_locales/zh_CN/messages.json | 9 -- .../simulation-details.spec.ts | 4 +- .../info/personal-sign/personal-sign.tsx | 92 ++++++++++++++++--- .../simulation-details/fiat-display.test.tsx | 3 - .../simulation-details/fiat-display.tsx | 2 +- .../simulation-details.test.tsx | 8 +- .../simulation-details/simulation-details.tsx | 30 ++++-- .../confirm-transaction-base.test.js.snap | 10 +- 23 files changed, 116 insertions(+), 181 deletions(-) diff --git a/app/_locales/de/messages.json b/app/_locales/de/messages.json index 771deef4c28c..19c7731c778f 100644 --- a/app/_locales/de/messages.json +++ b/app/_locales/de/messages.json @@ -4540,18 +4540,12 @@ "signingInWith": { "message": "Anmelden mit" }, - "simulationDetailsFailed": { - "message": "Es ist ein Fehler beim Laden Ihrer Schätzung aufgetreten." - }, "simulationDetailsFiatNotAvailable": { "message": "Nicht verfügbar" }, "simulationDetailsIncomingHeading": { "message": "Sie erhalten" }, - "simulationDetailsNoBalanceChanges": { - "message": "Keine Änderungen für Ihre Wallet prognostiziert." - }, "simulationDetailsOutgoingHeading": { "message": "Sie senden" }, @@ -4589,9 +4583,6 @@ "siweResources": { "message": "Ressourcen" }, - "siweSignatureSimulationDetailInfo": { - "message": "Sie melden sich bei einer Website an und es sind keine Änderungen an Ihrem Konto vorgesehen." - }, "siweURI": { "message": "URL" }, diff --git a/app/_locales/el/messages.json b/app/_locales/el/messages.json index 7ae594c8b9b8..ac4542893959 100644 --- a/app/_locales/el/messages.json +++ b/app/_locales/el/messages.json @@ -4540,18 +4540,12 @@ "signingInWith": { "message": "Σύνδεση με" }, - "simulationDetailsFailed": { - "message": "Υπήρξε σφάλμα στη φόρτωση της εκτίμησής σας." - }, "simulationDetailsFiatNotAvailable": { "message": "Μη διαθέσιμο" }, "simulationDetailsIncomingHeading": { "message": "Λαμβάνετε" }, - "simulationDetailsNoBalanceChanges": { - "message": "Δεν προβλέπονται αλλαγές για το πορτοφόλι σας" - }, "simulationDetailsOutgoingHeading": { "message": "Στέλνετε" }, @@ -4589,9 +4583,6 @@ "siweResources": { "message": "Πόροι" }, - "siweSignatureSimulationDetailInfo": { - "message": "Συνδέεστε σε έναν ιστότοπο και δεν προβλέπονται αλλαγές στον λογαριασμό σας." - }, "siweURI": { "message": "Διεύθυνση URL" }, diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index ab6b06411731..62dda6c29ef0 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -4961,17 +4961,14 @@ "simulationDetailsERC20ApproveDesc": { "message": "You're giving someone else permission to spend this amount from your account." }, - "simulationDetailsFailed": { - "message": "There was an error loading your estimation." - }, "simulationDetailsFiatNotAvailable": { "message": "Not Available" }, "simulationDetailsIncomingHeading": { "message": "You receive" }, - "simulationDetailsNoBalanceChanges": { - "message": "No changes predicted for your wallet" + "simulationDetailsNoChanges": { + "message": "No changes" }, "simulationDetailsOutgoingHeading": { "message": "You send" @@ -4995,6 +4992,9 @@ "simulationDetailsTransactionReverted": { "message": "This transaction is likely to fail" }, + "simulationDetailsUnavailable": { + "message": "Unavailable" + }, "simulationErrorMessageV2": { "message": "We were not able to estimate gas. There might be an error in the contract and this transaction may fail." }, @@ -5016,9 +5016,6 @@ "siweResources": { "message": "Resources" }, - "siweSignatureSimulationDetailInfo": { - "message": "You’re signing into a site and there are no predicted changes to your account." - }, "siweURI": { "message": "URL" }, diff --git a/app/_locales/en_GB/messages.json b/app/_locales/en_GB/messages.json index e8eb1e58ea71..8dd2e32dac39 100644 --- a/app/_locales/en_GB/messages.json +++ b/app/_locales/en_GB/messages.json @@ -4711,18 +4711,12 @@ "signingInWith": { "message": "Signing in with" }, - "simulationDetailsFailed": { - "message": "There was an error loading your estimation." - }, "simulationDetailsFiatNotAvailable": { "message": "Not Available" }, "simulationDetailsIncomingHeading": { "message": "You receive" }, - "simulationDetailsNoBalanceChanges": { - "message": "No changes predicted for your wallet" - }, "simulationDetailsOutgoingHeading": { "message": "You send" }, @@ -4760,9 +4754,6 @@ "siweResources": { "message": "Resources" }, - "siweSignatureSimulationDetailInfo": { - "message": "You’re signing into a site and there are no predicted changes to your account." - }, "siweURI": { "message": "URL" }, diff --git a/app/_locales/es/messages.json b/app/_locales/es/messages.json index 0f774d8f6ba2..1d23b736fbfd 100644 --- a/app/_locales/es/messages.json +++ b/app/_locales/es/messages.json @@ -4537,18 +4537,12 @@ "signingInWith": { "message": "Iniciar sesión con" }, - "simulationDetailsFailed": { - "message": "Se produjo un error al cargar su estimación." - }, "simulationDetailsFiatNotAvailable": { "message": "No disponible" }, "simulationDetailsIncomingHeading": { "message": "Usted recibe" }, - "simulationDetailsNoBalanceChanges": { - "message": "No se prevén cambios para su monedero" - }, "simulationDetailsOutgoingHeading": { "message": "Envía" }, @@ -4586,9 +4580,6 @@ "siweResources": { "message": "Recursos" }, - "siweSignatureSimulationDetailInfo": { - "message": "Está iniciando sesión en un sitio y no se prevén cambios en su cuenta." - }, "siweURI": { "message": "URL" }, diff --git a/app/_locales/fr/messages.json b/app/_locales/fr/messages.json index 985dfd44c9dd..e9b8fd588b89 100644 --- a/app/_locales/fr/messages.json +++ b/app/_locales/fr/messages.json @@ -4540,18 +4540,12 @@ "signingInWith": { "message": "Se connecter avec" }, - "simulationDetailsFailed": { - "message": "Une erreur s’est produite lors du chargement de l’estimation." - }, "simulationDetailsFiatNotAvailable": { "message": "Non disponible" }, "simulationDetailsIncomingHeading": { "message": "Vous recevez" }, - "simulationDetailsNoBalanceChanges": { - "message": "Aucun changement prévu pour votre portefeuille" - }, "simulationDetailsOutgoingHeading": { "message": "Vous envoyez" }, @@ -4589,9 +4583,6 @@ "siweResources": { "message": "Ressources" }, - "siweSignatureSimulationDetailInfo": { - "message": "Vous êtes en train de vous connecter à un site, aucun changement ne devrait être apporté à votre compte." - }, "siweURI": { "message": "URL" }, diff --git a/app/_locales/hi/messages.json b/app/_locales/hi/messages.json index 540023a75fac..9b2c06f96c11 100644 --- a/app/_locales/hi/messages.json +++ b/app/_locales/hi/messages.json @@ -4540,18 +4540,12 @@ "signingInWith": { "message": "के साथ साइन इन करना" }, - "simulationDetailsFailed": { - "message": "आपका एस्टीमेशन लोड करने में गड़बड़ी हुई।" - }, "simulationDetailsFiatNotAvailable": { "message": "उपलब्ध नहीं है" }, "simulationDetailsIncomingHeading": { "message": "आप पाते हैं" }, - "simulationDetailsNoBalanceChanges": { - "message": "आपके वॉलेट के लिए किसी बदलाव का प्रेडिक्शन नहीं किया गया है" - }, "simulationDetailsOutgoingHeading": { "message": "आप भेजते हैं" }, @@ -4589,9 +4583,6 @@ "siweResources": { "message": "संसाधन" }, - "siweSignatureSimulationDetailInfo": { - "message": "आप किसी साइट पर साइन इन कर रहे हैं और आपके अकाउंट में कोई अनुमानित परिवर्तन नहीं हैं।" - }, "siweURI": { "message": "URL" }, diff --git a/app/_locales/id/messages.json b/app/_locales/id/messages.json index 81f7d2a9c633..1331d7b9c482 100644 --- a/app/_locales/id/messages.json +++ b/app/_locales/id/messages.json @@ -4540,18 +4540,12 @@ "signingInWith": { "message": "Masuk dengan" }, - "simulationDetailsFailed": { - "message": "Terjadi kesalahan saat memuat estimasi Anda." - }, "simulationDetailsFiatNotAvailable": { "message": "Tidak Tersedia" }, "simulationDetailsIncomingHeading": { "message": "Anda menerima" }, - "simulationDetailsNoBalanceChanges": { - "message": "Tidak ada perubahan yang terprediksi untuk dompet Anda" - }, "simulationDetailsOutgoingHeading": { "message": "Anda mengirim" }, @@ -4589,9 +4583,6 @@ "siweResources": { "message": "Sumber daya" }, - "siweSignatureSimulationDetailInfo": { - "message": "Anda masuk ke sebuah situs dan tidak ada perkiraan perubahan pada akun Anda." - }, "siweURI": { "message": "URL" }, diff --git a/app/_locales/ja/messages.json b/app/_locales/ja/messages.json index 5787bb88c397..3107eb3cb152 100644 --- a/app/_locales/ja/messages.json +++ b/app/_locales/ja/messages.json @@ -4540,18 +4540,12 @@ "signingInWith": { "message": "サインイン方法:" }, - "simulationDetailsFailed": { - "message": "予測結果の読み込み中にエラーが発生しました。" - }, "simulationDetailsFiatNotAvailable": { "message": "利用できません" }, "simulationDetailsIncomingHeading": { "message": "受取額" }, - "simulationDetailsNoBalanceChanges": { - "message": "ウォレット残高の増減は予測されていません" - }, "simulationDetailsOutgoingHeading": { "message": "送金額" }, @@ -4589,9 +4583,6 @@ "siweResources": { "message": "リソース" }, - "siweSignatureSimulationDetailInfo": { - "message": "サイトにサインインしようとしていて、予想されるアカウントの変更はありません。" - }, "siweURI": { "message": "URL" }, diff --git a/app/_locales/ko/messages.json b/app/_locales/ko/messages.json index 32d7bd4399b5..6dc468cdd5ef 100644 --- a/app/_locales/ko/messages.json +++ b/app/_locales/ko/messages.json @@ -4540,18 +4540,12 @@ "signingInWith": { "message": "다음으로 로그인:" }, - "simulationDetailsFailed": { - "message": "추정치를 불러오는 동안 오류가 발생했습니다." - }, "simulationDetailsFiatNotAvailable": { "message": "이용할 수 없음" }, "simulationDetailsIncomingHeading": { "message": "받음:" }, - "simulationDetailsNoBalanceChanges": { - "message": "지갑에 예상 변동 사항 없음" - }, "simulationDetailsOutgoingHeading": { "message": "보냄:" }, @@ -4589,9 +4583,6 @@ "siweResources": { "message": "리소스" }, - "siweSignatureSimulationDetailInfo": { - "message": "사이트에 로그인 중이며 계정에 예상되는 변경 사항이 없습니다." - }, "siweURI": { "message": "URL" }, diff --git a/app/_locales/pt/messages.json b/app/_locales/pt/messages.json index 4eecb941d36f..03f41c1c62b8 100644 --- a/app/_locales/pt/messages.json +++ b/app/_locales/pt/messages.json @@ -4540,18 +4540,12 @@ "signingInWith": { "message": "Assinando com" }, - "simulationDetailsFailed": { - "message": "Houve um erro ao carregar sua estimativa." - }, "simulationDetailsFiatNotAvailable": { "message": "Não disponível" }, "simulationDetailsIncomingHeading": { "message": "Você recebe" }, - "simulationDetailsNoBalanceChanges": { - "message": "Nenhuma alteração prevista para sua carteira" - }, "simulationDetailsOutgoingHeading": { "message": "Você envia" }, @@ -4589,9 +4583,6 @@ "siweResources": { "message": "Recursos" }, - "siweSignatureSimulationDetailInfo": { - "message": "Você está fazendo login em um site e não há alterações previstas em sua conta." - }, "siweURI": { "message": "URL" }, diff --git a/app/_locales/ru/messages.json b/app/_locales/ru/messages.json index ce53cc239de5..e56afc418785 100644 --- a/app/_locales/ru/messages.json +++ b/app/_locales/ru/messages.json @@ -4540,18 +4540,12 @@ "signingInWith": { "message": "Вход с помощью" }, - "simulationDetailsFailed": { - "message": "Не удалось загрузить прогноз." - }, "simulationDetailsFiatNotAvailable": { "message": "Недоступно" }, "simulationDetailsIncomingHeading": { "message": "Вы получаете" }, - "simulationDetailsNoBalanceChanges": { - "message": "Никаких изменений в вашем кошельке не прогнозируется" - }, "simulationDetailsOutgoingHeading": { "message": "Вы отправляете" }, @@ -4589,9 +4583,6 @@ "siweResources": { "message": "Ресурсы" }, - "siweSignatureSimulationDetailInfo": { - "message": "Вы входите на сайт, и в вашем счете не происходит никаких прогнозируемых изменений." - }, "siweURI": { "message": "URL-адрес" }, diff --git a/app/_locales/tl/messages.json b/app/_locales/tl/messages.json index 8909ac662e34..af56d958c313 100644 --- a/app/_locales/tl/messages.json +++ b/app/_locales/tl/messages.json @@ -4540,18 +4540,12 @@ "signingInWith": { "message": "Nagsa-sign in gamit ang" }, - "simulationDetailsFailed": { - "message": "Mayroong error sa pag-load ng iyong pagtataya." - }, "simulationDetailsFiatNotAvailable": { "message": "Hindi Available" }, "simulationDetailsIncomingHeading": { "message": "Natanggap mo" }, - "simulationDetailsNoBalanceChanges": { - "message": "Walang pagbabagong nahulaan para sa iyong wallet" - }, "simulationDetailsOutgoingHeading": { "message": "Nagpadala ka" }, @@ -4589,9 +4583,6 @@ "siweResources": { "message": "Mga Mapagkukunan" }, - "siweSignatureSimulationDetailInfo": { - "message": "Ikaw ay nagsa-sign in sa isang site at walang mga inaasahang pagbabago sa iyong account." - }, "siweURI": { "message": "URL" }, diff --git a/app/_locales/tr/messages.json b/app/_locales/tr/messages.json index 8c4e44d3192e..6732513395d8 100644 --- a/app/_locales/tr/messages.json +++ b/app/_locales/tr/messages.json @@ -4540,18 +4540,12 @@ "signingInWith": { "message": "Şununla giriş yap:" }, - "simulationDetailsFailed": { - "message": "Tahmininiz yüklenirken bir hata oldu." - }, "simulationDetailsFiatNotAvailable": { "message": "Mevcut Değil" }, "simulationDetailsIncomingHeading": { "message": "Aldığınız" }, - "simulationDetailsNoBalanceChanges": { - "message": "Cüzdanınız için değişiklik öngörülmüyor" - }, "simulationDetailsOutgoingHeading": { "message": "Gönderdiğiniz" }, @@ -4589,9 +4583,6 @@ "siweResources": { "message": "Kaynaklar" }, - "siweSignatureSimulationDetailInfo": { - "message": "Bir siteye giriş yapıyorsunuz ve hesabınızda öngörülen herhangi bir değişiklik yok." - }, "siweURI": { "message": "URL adresi" }, diff --git a/app/_locales/vi/messages.json b/app/_locales/vi/messages.json index b741fe6eb536..9f6ff5119366 100644 --- a/app/_locales/vi/messages.json +++ b/app/_locales/vi/messages.json @@ -4540,18 +4540,12 @@ "signingInWith": { "message": "Đăng nhập bằng" }, - "simulationDetailsFailed": { - "message": "Đã xảy ra lỗi khi tải kết quả ước tính." - }, "simulationDetailsFiatNotAvailable": { "message": "Không có sẵn" }, "simulationDetailsIncomingHeading": { "message": "Bạn nhận được" }, - "simulationDetailsNoBalanceChanges": { - "message": "Ví của bạn dự kiến không có thay đổi nào" - }, "simulationDetailsOutgoingHeading": { "message": "Bạn gửi" }, @@ -4589,9 +4583,6 @@ "siweResources": { "message": "Tài nguyên" }, - "siweSignatureSimulationDetailInfo": { - "message": "Bạn đang đăng nhập vào một trang web và dự kiến không có thay đổi nào đối với tài khoản của bạn." - }, "siweURI": { "message": "URL" }, diff --git a/app/_locales/zh_CN/messages.json b/app/_locales/zh_CN/messages.json index e5695cdfaecf..eef758dacdad 100644 --- a/app/_locales/zh_CN/messages.json +++ b/app/_locales/zh_CN/messages.json @@ -4540,18 +4540,12 @@ "signingInWith": { "message": "使用以下登录方式" }, - "simulationDetailsFailed": { - "message": "加载估算时出错。" - }, "simulationDetailsFiatNotAvailable": { "message": "不可用" }, "simulationDetailsIncomingHeading": { "message": "您收到" }, - "simulationDetailsNoBalanceChanges": { - "message": "预计您的钱包不会发生变化" - }, "simulationDetailsOutgoingHeading": { "message": "您发送" }, @@ -4589,9 +4583,6 @@ "siweResources": { "message": "资源" }, - "siweSignatureSimulationDetailInfo": { - "message": "您正在登录某个网站，并且您的账户没有预期变化。" - }, "siweURI": { "message": "URL" }, diff --git a/test/e2e/tests/simulation-details/simulation-details.spec.ts b/test/e2e/tests/simulation-details/simulation-details.spec.ts index 46f4cdb5860a..bbac41b5a1a1 100644 --- a/test/e2e/tests/simulation-details/simulation-details.spec.ts +++ b/test/e2e/tests/simulation-details/simulation-details.spec.ts @@ -215,7 +215,7 @@ describe('Simulation Details', () => { await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); await driver.findElement({ css: '[data-testid="simulation-details-layout"]', - text: 'No changes predicted for your wallet', + text: 'No changes', }); }, ); @@ -276,7 +276,7 @@ describe('Simulation Details', () => { await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); await driver.findElement({ css: '[data-testid="simulation-details-layout"]', - text: 'There was an error loading your estimation', + text: 'Unavailable', }); }, ); diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx b/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx index 5eb798439ca8..5c0af68742c5 100644 --- a/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx +++ b/ui/pages/confirmations/components/confirm/info/personal-sign/personal-sign.tsx @@ -2,24 +2,42 @@ import React from 'react'; import { useSelector } from 'react-redux'; import { - ConfirmInfoRow, ConfirmInfoRowAddress, ConfirmInfoRowText, ConfirmInfoRowUrl, } from '../../../../../../components/app/confirm/info/row'; +import { ConfirmInfoAlertRow } from '../../../../../../components/app/confirm/info/row/alert-row/alert-row'; import { RowAlertKey } from '../../../../../../components/app/confirm/info/row/constants'; -import { useI18nContext } from '../../../../../../hooks/useI18nContext'; -import { useConfirmContext } from '../../../../context/confirm'; +import { ConfirmInfoSection } from '../../../../../../components/app/confirm/info/row/section'; +import { + Box, + Icon, + IconName, + IconSize, + Text, +} from '../../../../../../components/component-library'; +import Tooltip from '../../../../../../components/ui/tooltip'; +import { + AlignItems, + BorderColor, + BorderRadius, + Display, + FlexDirection, + IconColor, + JustifyContent, + TextColor, + TextVariant, +} from '../../../../../../helpers/constants/design-system'; +import { isSnapId } from '../../../../../../helpers/utils/snaps'; import { hexToText, sanitizeString, } from '../../../../../../helpers/utils/util'; -import { SignatureRequestType } from '../../../../types/confirm'; +import { useI18nContext } from '../../../../../../hooks/useI18nContext'; +import { useConfirmContext } from '../../../../context/confirm'; import { selectUseTransactionSimulations } from '../../../../selectors/preferences'; +import { SignatureRequestType } from '../../../../types/confirm'; import { isSIWESignatureRequest } from '../../../../utils'; -import { ConfirmInfoAlertRow } from '../../../../../../components/app/confirm/info/row/alert-row/alert-row'; -import { ConfirmInfoSection } from '../../../../../../components/app/confirm/info/row/section'; -import { isSnapId } from '../../../../../../helpers/utils/snaps'; import { SIWESignInfo } from './siwe-sign'; const PersonalSignInfo: React.FC = () => { @@ -49,16 +67,66 @@ const PersonalSignInfo: React.FC = () => { } } + const SimulationDetailsKey = ( + + + {t('simulationDetailsTitle')} + + + + + + ); + + const SimulationDetailsValue = ( + + {t('simulationDetailsNoChanges')} + + ); + return ( <> {isSIWE && useTransactionSimulations && ( - - - + + {SimulationDetailsKey} + {SimulationDetailsValue} + + )} diff --git a/ui/pages/confirmations/components/simulation-details/fiat-display.test.tsx b/ui/pages/confirmations/components/simulation-details/fiat-display.test.tsx index 922a2e414916..7a91ba129d6b 100644 --- a/ui/pages/confirmations/components/simulation-details/fiat-display.test.tsx +++ b/ui/pages/confirmations/components/simulation-details/fiat-display.test.tsx @@ -58,7 +58,6 @@ describe('FiatDisplay', () => { describe('IndividualFiatDisplay', () => { // @ts-expect-error This is missing from the Mocha type definitions it.each([ - [FIAT_UNAVAILABLE, 'Not Available'], [100, '$100'], [-100, '$100'], ])( @@ -84,8 +83,6 @@ describe('FiatDisplay', () => { describe('TotalFiatDisplay', () => { // @ts-expect-error This is missing from the Mocha type definitions it.each([ - [[FIAT_UNAVAILABLE, FIAT_UNAVAILABLE], 'Not Available'], - [[], 'Not Available'], [[100, 200, FIAT_UNAVAILABLE, 300], 'Total = $600'], [[-100, -200, FIAT_UNAVAILABLE, -300], 'Total = $600'], ])( diff --git a/ui/pages/confirmations/components/simulation-details/fiat-display.tsx b/ui/pages/confirmations/components/simulation-details/fiat-display.tsx index ac3fcebcc159..d7ec958f2a5b 100644 --- a/ui/pages/confirmations/components/simulation-details/fiat-display.tsx +++ b/ui/pages/confirmations/components/simulation-details/fiat-display.tsx @@ -50,7 +50,7 @@ export const IndividualFiatDisplay: React.FC<{ } if (fiatAmount === FIAT_UNAVAILABLE) { - return ; + return null; } const absFiat = Math.abs(fiatAmount); const fiatDisplayValue = fiatFormatter(absFiat, { shorten }); diff --git a/ui/pages/confirmations/components/simulation-details/simulation-details.test.tsx b/ui/pages/confirmations/components/simulation-details/simulation-details.test.tsx index 339ffbdd6a1a..9294f7d1b5b5 100644 --- a/ui/pages/confirmations/components/simulation-details/simulation-details.test.tsx +++ b/ui/pages/confirmations/components/simulation-details/simulation-details.test.tsx @@ -101,17 +101,13 @@ describe('SimulationDetails', () => { renderSimulationDetails({ error: { message: 'Unknown error' }, }); - expect( - screen.getByText(/error loading your estimation/u), - ).toBeInTheDocument(); + expect(screen.getByText(/Unavailable/u)).toBeInTheDocument(); }); it('renders empty content when there are no balance changes', () => { renderSimulationDetails({}); - expect( - screen.getByText(/No changes predicted for your wallet/u), - ).toBeInTheDocument(); + expect(screen.getByText(/No changes/u)).toBeInTheDocument(); }); it('passes the correct properties to BalanceChangeList components', () => { diff --git a/ui/pages/confirmations/components/simulation-details/simulation-details.tsx b/ui/pages/confirmations/components/simulation-details/simulation-details.tsx index 382fcb180f82..57ee1f2ff3fb 100644 --- a/ui/pages/confirmations/components/simulation-details/simulation-details.tsx +++ b/ui/pages/confirmations/components/simulation-details/simulation-details.tsx @@ -62,17 +62,23 @@ const ErrorContent: React.FC<{ error: SimulationError }> = ({ error }) => { function getMessage() { return error.code === SimulationErrorCode.Reverted ? t('simulationDetailsTransactionReverted') - : t('simulationDetailsFailed'); + : t('simulationDetailsUnavailable'); } return ( - + {error.code === SimulationErrorCode.Reverted && ( + + )} {getMessage()} ); @@ -84,8 +90,8 @@ const ErrorContent: React.FC<{ error: SimulationError }> = ({ error }) => { const EmptyContent: React.FC = () => { const t = useI18nContext(); return ( - - {t('simulationDetailsNoBalanceChanges')} + + {t('simulationDetailsNoChanges')} ); }; @@ -260,12 +266,19 @@ export const SimulationDetails: React.FC = ({ } if (error) { + const inHeaderProp = error.code !== SimulationErrorCode.Reverted && { + inHeader: , + }; + return ( - + {error.code === SimulationErrorCode.Reverted && ( + + )} ); } @@ -277,9 +290,8 @@ export const SimulationDetails: React.FC = ({ - - + inHeader={} + /> ); } diff --git a/ui/pages/confirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap b/ui/pages/confirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap index 3bd2313850a4..5cdbdd5de6a5 100644 --- a/ui/pages/confirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap +++ b/ui/pages/confirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap @@ -337,12 +337,12 @@ exports[`Confirm Transaction Base should match snapshot 1`] = ` +

+ No changes +

-

- No changes predicted for your wallet -