Remove 'Verify contract details' link on Sig Req screen when 'verifyingContract' is absent (#17128)

* Remove 'Verify contract details' link on Sig Req screen when 'verifyingContract' is not provided

* Adding tests

ui/components/app/signature-request/signature-request.component.js

@@ -134,9 +134,11 @@ export default class SignatureRequest extends PureComponent {
       nativeCurrency,
     } = this.props;
     const { trackEvent } = this.context;
-    const { sanitizedMessage, domain, primaryType } =
+    const {
-      this.memoizedParseMessage(data);
+      sanitizedMessage,
-
+      domain: { verifyingContract },
+      primaryType,
+    } = this.memoizedParseMessage(data);
     const currentNetwork = this.getNetworkName();
 
     const balanceInBaseAsset = conversionUtil(balance, {
@@ -223,20 +225,23 @@ export default class SignatureRequest extends PureComponent {
           >
             {this.context.t('signatureRequestGuidance')}
           </Typography>
-          <div>
+          {verifyingContract ? (
-            <Button
+            <div>
-              type="link"
+              <Button
-              onClick={() => this.setState({ showContractDetails: true })}
+                type="link"
-              className="signature-request-content__verify-contract-details"
+                onClick={() => this.setState({ showContractDetails: true })}
-            >
+                className="signature-request-content__verify-contract-details"
-              <Typography
+                data-testid="verify-contract-details"
-                variant={TYPOGRAPHY.H7}
-                color={COLORS.PRIMARY_DEFAULT}
               >
-                {this.context.t('verifyContractDetails')}
+                <Typography
-              </Typography>
+                  variant={TYPOGRAPHY.H7}
-            </Button>
+                  color={COLORS.PRIMARY_DEFAULT}
-          </div>
+                >
+                  {this.context.t('verifyContractDetails')}
+                </Typography>
+              </Button>
+            </div>
+          ) : null}
         </div>
         {isLedgerWallet ? (
           <div className="confirm-approve-content__ledger-instruction-wrapper">
@@ -261,7 +266,7 @@ export default class SignatureRequest extends PureComponent {
         />
         {this.state.showContractDetails && (
           <ContractDetailsModal
-            toAddress={domain.verifyingContract}
+            toAddress={verifyingContract}
             chainId={chainId}
             rpcPrefs={rpcPrefs}
             origin={origin}

ui/components/app/signature-request/signature-request.container.test.js

@@ -91,8 +91,13 @@ describe('Signature Request', () => {
     },
   };
 
+  let rerender;
+
   beforeEach(() => {
-    renderWithProvider(<SignatureRequest.WrappedComponent {...props} />, store);
+    rerender = renderWithProvider(
+      <SignatureRequest.WrappedComponent {...props} />,
+      store,
+    ).rerender;
   });
 
   afterEach(() => {
@@ -122,4 +127,30 @@ describe('Signature Request', () => {
 
     expect(warningText).toBeInTheDocument();
   });
+
+  it('shows verify contract details link when verifyingContract is set', () => {
+    const verifyingContractLink = screen.getByTestId('verify-contract-details');
+
+    expect(verifyingContractLink).toBeInTheDocument();
+  });
+
+  it('does not show verify contract details link when verifyingContract is not set', () => {
+    const newData = JSON.parse(props.txData.msgParams.data);
+    delete newData.domain.verifyingContract;
+
+    const newProps = {
+      ...props,
+      txData: {
+        ...props.txData,
+        msgParams: {
+          ...props.txData.msgParams,
+          data: JSON.stringify(newData),
+        },
+      },
+    };
+
+    rerender(<SignatureRequest.WrappedComponent {...newProps} />, store);
+
+    expect(screen.queryByTestId('verify-contract-details')).toBeNull();
+  });
 });

ui/pages/send/send.utils.js

@@ -182,5 +182,9 @@ function getAssetTransferData({ sendToken, fromAddress, toAddress, amount }) {
 }
 
 function ellipsify(text, first = 6, last = 4) {
+  if (!text) {
+    return '';
+  }
+
   return `${text.slice(0, first)}...${text.slice(-last)}`;
 }

ui/pages/send/send.utils.test.js

@@ -12,6 +12,7 @@ import {
   generateERC20TransferData,
   isBalanceSufficient,
   isTokenBalanceSufficient,
+  ellipsify,
 } from './send.utils';
 
 jest.mock('../../../shared/modules/conversion.utils', () => ({
@@ -154,4 +155,16 @@ describe('send utils', () => {
       expect(result).toStrictEqual(false);
     });
   });
+
+  describe('ellipsify()', () => {
+    it('should ellipsify a contract address', () => {
+      expect(
+        ellipsify('0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC'),
+      ).toStrictEqual('0xCcCC...cccC');
+    });
+
+    it('should return an empty string if the passed text is not defined', () => {
+      expect(ellipsify(undefined)).toStrictEqual('');
+    });
+  });
 });