fix: Updates to the simulations component

MetaMask · Oct 25, 2024 · f211561 · f211561
1 parent b7a79d0
commit f211561
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 29 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
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
@@ -20,6 +20,25 @@ 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 { SIWESignInfo } from './siwe-sign';
+import {
+  Box,
+  Icon,
+  IconName,
+  IconSize,
+  Text,
+} from '../../../../../../components/component-library';
+import {
+  AlignItems,
+  BorderColor,
+  BorderRadius,
+  Display,
+  FlexDirection,
+  IconColor,
+  JustifyContent,
+  TextColor,
+  TextVariant,
+} from '../../../../../../helpers/constants/design-system';
+import Tooltip from '../../../../../../components/ui/tooltip';
 
 const PersonalSignInfo: React.FC = () => {
   const t = useI18nContext();
@@ -40,12 +59,57 @@ const PersonalSignInfo: React.FC = () => {
     <>
       {isSIWE && useTransactionSimulations && (
         <ConfirmInfoSection>
-          <ConfirmInfoRow
-            label={t('simulationDetailsTitle')}
-            tooltip={t('simulationDetailsTitleTooltip')}
+          <Box
+            data-testid="simulation-details-layout"
+            className="simulation-details-layout"
+            display={Display.Flex}
+            flexDirection={FlexDirection.Column}
+            borderRadius={BorderRadius.LG}
+            borderColor={BorderColor.transparent}
+            padding={2}
+            gap={3}
           >
-            <ConfirmInfoRowText text={t('siweSignatureSimulationDetailInfo')} />
-          </ConfirmInfoRow>
+            <Box
+              display={Display.Flex}
+              flexDirection={FlexDirection.Row}
+              alignItems={AlignItems.center}
+              justifyContent={JustifyContent.spaceBetween}
+            >
+              <Box
+                display={Display.Flex}
+                flexDirection={FlexDirection.Row}
+                alignItems={AlignItems.center}
+                gap={1}
+              >
+                <Text variant={TextVariant.bodyMdMedium}>
+                  {t('simulationDetailsTitle')}
+                </Text>
+                <Tooltip
+                  interactive
+                  position="top"
+                  containerClassName="info-tooltip__tooltip-container"
+                  tooltipInnerClassName="info-tooltip__tooltip-content"
+                  tooltipArrowClassName="info-tooltip__top-tooltip-arrow"
+                  html={t('simulationDetailsTitleTooltip')}
+                  theme="tippy-tooltip-info"
+                  style={{ display: Display.Flex }}
+                >
+                  <Icon
+                    name={IconName.Question}
+                    marginLeft={1}
+                    color={IconColor.iconMuted}
+                    size={IconSize.Sm}
+                  />
+                </Tooltip>
+              </Box>
+              <Text
+                color={TextColor.textAlternative}
+                variant={TextVariant.bodyMd}
+              >
+                {t('simulationDetailsNoChanges')}
+              </Text>
+            </Box>
+          </Box>
         </ConfirmInfoSection>
       )}
       <ConfirmInfoSection>

diff --git 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
@@ -50,7 +50,7 @@ export const IndividualFiatDisplay: React.FC<{
   }
 
   if (fiatAmount === FIAT_UNAVAILABLE) {
-    return <FiatNotAvailableDisplay />;
+    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
@@ -84,17 +84,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
@@ -61,17 +61,23 @@ const ErrorContent: React.FC<{ error: SimulationError }> = ({ error }) => {
   function getMessage() {
     return error.code === SimulationErrorCode.Reverted
       ? t('simulationDetailsTransactionReverted')
-      : t('simulationDetailsFailed');
+      : t('simulationDetailsUnavailable');
   }
 
   return (
     <Text
-      color={TextColor.warningDefault}
+      color={
+        error.code === SimulationErrorCode.Reverted
+          ? TextColor.warningDefault
+          : TextColor.textDefault
+      }
       variant={TextVariant.bodyMd}
       display={Display.Flex}
       alignItems={AlignItems.center}
     >
-      <Icon name={IconName.Warning} marginInlineEnd={1} />
+      {error.code === SimulationErrorCode.Reverted && (
+        <Icon name={IconName.Warning} marginInlineEnd={1} />
+      )}
       {getMessage()}
     </Text>
   );
@@ -84,7 +90,7 @@ const EmptyContent: React.FC = () => {
   const t = useI18nContext();
   return (
     <Text color={TextColor.textAlternative} variant={TextVariant.bodyMd}>
-      {t('simulationDetailsNoBalanceChanges')}
+      {t('simulationDetailsNoChanges')}
     </Text>
   );
 };
@@ -217,9 +223,18 @@ export const SimulationDetails: React.FC<SimulationDetailsProps> = ({
   }
 
   if (error) {
+    const inHeaderProp = error.code !== SimulationErrorCode.Reverted && {
+      inHeader: <ErrorContent error={error} />,
+    };
+
     return (
-      <SimulationDetailsLayout isTransactionsRedesign={isTransactionsRedesign}>
-        <ErrorContent error={error} />
+      <SimulationDetailsLayout
+        isTransactionsRedesign={isTransactionsRedesign}
+        {...inHeaderProp}
+      >
+        {error.code === SimulationErrorCode.Reverted && (
+          <ErrorContent error={error} />
+        )}
       </SimulationDetailsLayout>
     );
   }
@@ -228,9 +243,10 @@ export const SimulationDetails: React.FC<SimulationDetailsProps> = ({
   const empty = balanceChanges.length === 0;
   if (empty) {
     return (
-      <SimulationDetailsLayout isTransactionsRedesign={isTransactionsRedesign}>
-        <EmptyContent />
-      </SimulationDetailsLayout>
+      <SimulationDetailsLayout
+        isTransactionsRedesign={isTransactionsRedesign}
+        inHeader={<EmptyContent />}
+      />
     );
   }
 

diff --git a/...onfirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap b/...onfirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
@@ -336,12 +336,12 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                     </div>
                   </div>
                 </div>
+                <p
+                  class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
+                >
+                  No changes
+                </p>
               </div>
-              <p
-                class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
-              >
-                No changes predicted for your wallet
-              </p>
             </div>
             <div
               class="transaction-detail"