fixing simulation details width

MetaMask · Oct 1, 2024 · e2a4003 · e2a4003
1 parent 7dd0cfb
commit e2a4003
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 9 deletions.
diff --git a/ui/pages/confirmations/components/simulation-details/useSimulationMetrics.ts b/ui/pages/confirmations/components/simulation-details/useSimulationMetrics.ts
@@ -67,13 +67,14 @@ export function useSimulationMetrics({
     setLoadingComplete();
   }
 
-  const displayNameRequests: UseDisplayNameRequest[] = balanceChanges.map(
-    ({ asset }) => ({
-      value: asset.address ?? '',
+  const displayNameRequests: UseDisplayNameRequest[] = balanceChanges
+    // Filter out changes with no address (e.g. ETH)
+    .filter(({ asset }) => Boolean(asset.address))
+    .map(({ asset }) => ({
+      value: asset.address as string,
       type: NameType.ETHEREUM_ADDRESS,
       preferContractSymbol: true,
-    }),
-  );
+    }));
 
   const displayNames = useDisplayNames(displayNameRequests);
 

diff --git a/ui/pages/smart-transactions/smart-transaction-status-page/smart-transaction-status-page.tsx b/ui/pages/smart-transactions/smart-transaction-status-page/smart-transaction-status-page.tsx
@@ -385,10 +385,12 @@ export const SmartTransactionStatusPage = ({
           />
         </Box>
         {canShowSimulationDetails && (
-          <SimulationDetails
-            simulationData={fullTxData.simulationData}
-            transactionId={fullTxData.id}
-          />
+          <Box width={BlockSize.Full}>
+            <SimulationDetails
+              simulationData={fullTxData.simulationData}
+              transactionId={fullTxData.id}
+            />
+          </Box>
         )}
       </Box>
       <SmartTransactionsStatusPageFooter

diff --git a/...art-transactions/smart-transaction-status-page/smart-transactions-status-page.stories.tsx b/...art-transactions/smart-transaction-status-page/smart-transactions-status-page.stories.tsx
@@ -1,10 +1,45 @@
 import React from 'react';
+import { Provider } from 'react-redux';
+import configureStore from '../../../store/store';
 import SmartTransactionStatusPage from './smart-transaction-status-page';
 import { Meta, StoryObj } from '@storybook/react';
+import { SimulationData } from '@metamask/transaction-controller';
+import { mockNetworkState } from '../../../../test/stub/networks';
+
+// Mock data
+const CHAIN_ID_MOCK = '0x1';
+
+const simulationData: SimulationData = {
+  nativeBalanceChange: {
+    previousBalance: '0x0',
+    newBalance: '0x0',
+    difference: '0x12345678912345678',
+    isDecrease: true,
+  },
+  tokenBalanceChanges: [],
+};
+
+const TX_MOCK = {
+  id: 'txId',
+  simulationData,
+  chainId: CHAIN_ID_MOCK,
+};
+
+const storeMock = configureStore({
+  metamask: {
+    preferences: {
+      useNativeCurrencyAsPrimaryCurrency: false,
+    },
+    ...mockNetworkState({ chainId: CHAIN_ID_MOCK }),
+    transactions: [TX_MOCK],
+    currentNetworkTxList: [TX_MOCK],
+  },
+});
 
 const meta: Meta<typeof SmartTransactionStatusPage> = {
   title: 'Pages/SmartTransactions/SmartTransactionStatusPage',
   component: SmartTransactionStatusPage,
+  decorators: [(story) => <Provider store={storeMock}>{story()}</Provider>],
 };
 
 export default meta;