fix: fix contract address display in confirmation page

MetaMask · Oct 2, 2023 · b52ccad · b52ccad
1 parent 0a215ca
commit b52ccad
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 7 deletions.
diff --git a/test/data/mock-state.json b/test/data/mock-state.json
@@ -20,6 +20,14 @@
     "warning": null,
     "customTokenAmount": "10"
   },
+  "confirmTransaction": {
+    "txData": {
+      "txParams": {
+        "gas": "0x153e2",
+        "value": "0x0"
+      }
+    }
+  },
   "history": {
     "mostRecentOverviewPage": "/mostRecentOverviewPage"
   },

diff --git a/ui/components/app/confirm-page-container/confirm-page-container-container.test.js b/ui/components/app/confirm-page-container/confirm-page-container-container.test.js
@@ -319,6 +319,8 @@ describe('Confirm Page Container Container Test', () => {
       };
 
       mockState.metamask.addressBook = addressBook;
+      mockState.confirmTransaction.txData.txParams.to =
+        '0x7a1A4Ad9cc746a70ee58568466f7996dD0aCE4E8';
 
       const store = configureMockStore()(mockState);
 

diff --git a/...container/confirm-page-container-content/confirm-page-container-content.component.test.js b/...container/confirm-page-container-content/confirm-page-container-content.component.test.js
@@ -7,6 +7,7 @@ import {
   INSUFFICIENT_FUNDS_ERROR_KEY,
   TRANSACTION_ERROR_KEY,
 } from '../../../../helpers/constants/error-keys';
+import { shortenAddress } from '../../../../helpers/utils/util';
 import ConfirmPageContainerContent from './confirm-page-container-content.component';
 
 describe('Confirm Page Container Content', () => {
@@ -25,6 +26,17 @@ describe('Confirm Page Container Content', () => {
           },
         },
       },
+      identities: {},
+      tokenList: {},
+    },
+    confirmTransaction: {
+      txData: {
+        txParams: {
+          gas: '0x153e2',
+          value: '0x0',
+          to: '0x0BC30598F0F386371eB3d2195AcAA14C7566534b',
+        },
+      },
     },
   };
 
@@ -106,16 +118,19 @@ describe('Confirm Page Container Content', () => {
     expect(props.onCancel).toHaveBeenCalledTimes(1);
   });
 
-  it('render contract address name from addressBook in title for contract', async () => {
+  it('render contract address in the content component', async () => {
     props.disabled = false;
     props.toAddress = '0x06195827297c7A80a443b6894d3BDB8824b43896';
     props.transactionType = TransactionType.contractInteraction;
     const { queryByText } = renderWithProvider(
       <ConfirmPageContainerContent {...props} />,
       store,
     );
+    const expectedAddress = shortenAddress(
+      mockStore.confirmTransaction.txData.txParams.to,
+    );
 
-    expect(queryByText('Address Book Account 1')).toBeInTheDocument();
+    expect(queryByText(`${expectedAddress}`)).toBeInTheDocument();
   });
 
   it('render simple title without address name for simple send', async () => {

diff --git a/...tainer-content/confirm-page-container-summary/confirm-page-container-summary.component.js b/...tainer-content/confirm-page-container-summary/confirm-page-container-summary.component.js
@@ -9,7 +9,7 @@ import { TransactionType } from '../../../../../../shared/constants/transaction'
 import { toChecksumHexAddress } from '../../../../../../shared/modules/hexstring-utils';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
 import useAddressDetails from '../../../../../hooks/useAddressDetails';
-import { getIpfsGateway } from '../../../../../selectors';
+import { getIpfsGateway, txDataSelector } from '../../../../../selectors';
 
 import Identicon from '../../../../ui/identicon';
 import InfoTooltip from '../../../../ui/info-tooltip';
@@ -25,7 +25,6 @@ const ConfirmPageContainerSummary = (props) => {
     subtitleComponent,
     className,
     tokenAddress,
-    toAddress,
     nonce,
     origin,
     image,
@@ -36,6 +35,10 @@ const ConfirmPageContainerSummary = (props) => {
   const t = useI18nContext();
   const ipfsGateway = useSelector(getIpfsGateway);
 
+  const txData = useSelector(txDataSelector);
+  const { txParams = {} } = txData;
+  const { to: txParamsToAddress } = txParams;
+
   const contractInitiatedTransactionType = [
     TransactionType.contractInteraction,
     TransactionType.tokenMethodTransfer,
@@ -48,14 +51,15 @@ const ConfirmPageContainerSummary = (props) => {
   if (isContractTypeTransaction) {
     // If the transaction is TOKEN_METHOD_TRANSFER or TOKEN_METHOD_TRANSFER_FROM
     // the contract address is passed down as tokenAddress, if it is anyother
-    // type of contract interaction it is passed as toAddress
+    // type of contract interaction it is "to" from txParams
+
     contractAddress =
       transactionType === TransactionType.tokenMethodTransfer ||
       transactionType === TransactionType.tokenMethodTransferFrom ||
       transactionType === TransactionType.tokenMethodSafeTransferFrom ||
       transactionType === TransactionType.tokenMethodSetApprovalForAll
         ? tokenAddress
-        : toAddress;
+        : txParamsToAddress;
   }
 
   const { toName, isTrusted } = useAddressDetails(contractAddress);
@@ -146,7 +150,6 @@ ConfirmPageContainerSummary.propTypes = {
   subtitleComponent: PropTypes.node,
   className: PropTypes.string,
   tokenAddress: PropTypes.string,
-  toAddress: PropTypes.string,
   nonce: PropTypes.string,
   origin: PropTypes.string.isRequired,
   transactionType: PropTypes.string,