Merge pull request #2357 from blockscout/issue-2298

Remove deps from interpretator for an action button

ui/tx/TxSubHeading.pw.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type { AddressMetadataInfo, AddressMetadataTagApi } from 'types/api/addressMetadata';
 
 import config from 'configs/app';
+import * as addressMock from 'mocks/address/address';
 import { protocolTagWithMeta } from 'mocks/metadata/address';
 import * as txMock from 'mocks/txs/tx';
 import { txInterpretation } from 'mocks/txs/txInterpretation';
@@ -111,22 +112,28 @@ test.describe('blockscout provider', () => {
     await expect(component).toHaveScreenshot();
   });
 
-  test('no interpretation, has method called', async({ render, mockApiResponse }) => {
-    // the action button should not render if there is no interpretation
+  test('no interpretation, has method called', async({ render, mockApiResponse, mockAssetResponse }) => {
     const newTxQuery = { ...txQuery, data: txMock.withRecipientContract } as TxQuery;
     const metadataResponse = generateAddressMetadataResponse(protocolTagWithMeta);
     await mockApiResponse('address_metadata_info', metadataResponse, { queryParams: addressMetadataQueryParams });
+    await mockAssetResponse(protocolTagWithMeta?.meta?.appLogoURL as string, './playwright/mocks/image_s.jpg');
     await mockApiResponse('tx_interpretation', { data: { summaries: [] } }, { pathParams: { hash } });
 
     const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ newTxQuery }/>);
     await expect(component).toHaveScreenshot();
   });
 
-  test('no interpretation', async({ render, mockApiResponse }) => {
-    // the action button should not render if there is no interpretation
+  test('no interpretation, with action button', async({ render, mockApiResponse, mockAssetResponse }) => {
     const metadataResponse = generateAddressMetadataResponse(protocolTagWithMeta);
     await mockApiResponse('address_metadata_info', metadataResponse, { queryParams: addressMetadataQueryParams });
+    await mockAssetResponse(protocolTagWithMeta?.meta?.appLogoURL as string, './playwright/mocks/image_s.jpg');
+
+    const newTxQuery = { ...txQuery, data: { ...txMock.pending, to: addressMock.contract } } as TxQuery;
+    const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ newTxQuery }/>);
+    await expect(component).toHaveScreenshot();
+  });
 
+  test('no interpretation (pending)', async({ render, mockApiResponse }) => {
     const txPendingQuery = {
       data: txMock.pending,
       isPlaceholderData: false,

ui/tx/TxSubHeading.tsx

@@ -57,10 +57,6 @@ const TxSubHeading = ({ hash, hasTag, txQuery }: Props) => {
   const hasViewAllInterpretationsLink =
     !txInterpretationQuery.isPlaceholderData && txInterpretationQuery.data?.data.summaries && txInterpretationQuery.data?.data.summaries.length > 1;
 
-  const hasAnyInterpretation =
-    (hasNovesInterpretation && novesInterpretationQuery.data && !novesInterpretationQuery.isPlaceholderData) ||
-    (hasInternalInterpretation && !txInterpretationQuery.isPlaceholderData);
-
   const addressDataMap: Record<string, AddressParam> = {};
   [ txQuery.data?.from, txQuery.data?.to ]
     .filter((data): data is AddressParam => Boolean(data && data.hash))
@@ -140,7 +136,7 @@ const TxSubHeading = ({ hash, hasTag, txQuery }: Props) => {
         mt={{ base: 3, lg: 0 }}
       >
         { !hasTag && <AccountActionsMenu isLoading={ isLoading }/> }
-        { (appActionData && hasAnyInterpretation) && (
+        { appActionData && (
           <AppActionButton data={ appActionData } txHash={ hash } source="Txn"/>
         ) }
         <NetworkExplorers type="tx" pathParam={ hash } ml={{ base: 0, lg: 'auto' }}/>