add tests for action button

configs/envs/.env.pw

@@ -51,5 +51,6 @@ NEXT_PUBLIC_AUTH0_CLIENT_ID=xxx
 NEXT_PUBLIC_STATS_API_HOST=http://localhost:3004
 NEXT_PUBLIC_CONTRACT_INFO_API_HOST=http://localhost:3005
 NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=http://localhost:3006
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=http://localhost:3007
 NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY=xxx
-NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=xxx
+NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=xxx
\ No newline at end of file

mocks/metadata/address.ts

@@ -61,3 +61,18 @@ export const protocolTag: AddressMetadataTagApi = {
   ordinal: 0,
   meta: null,
 };
+
+export const protocolTagWithMeta: AddressMetadataTagApi = {
+  slug: 'furucombo',
+  name: 'Furucombo',
+  tagType: 'protocol',
+  ordinal: 0,
+  meta: {
+    appID: 'furucombo',
+    appMarketplaceURL: 'https://furucombo.app/decombo?chainId={chainId}&txHash={txHash}&utm_source=Blockscout',
+    appLogoURL: 'https://blockscout-content.s3.amazonaws.com/furucombo-action-btn.svg',
+    appActionButtonText: 'Decombo',
+    textColor: '#FFFFFF',
+    bgColor: '#1B1B21',
+  },
+};

ui/tx/TxSubHeading.pw.tsx

 import React from 'react';
 
+import type { AddressMetadataInfo, AddressMetadataTagApi } from 'types/api/addressMetadata';
+
+import config from 'configs/app';
+import { protocolTagWithMeta } from 'mocks/metadata/address';
 import * as txMock from 'mocks/txs/tx';
 import { txInterpretation } from 'mocks/txs/txInterpretation';
 import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
@@ -16,6 +20,25 @@ const txQuery = {
   isError: false,
 } as TxQuery;
 
+const addressMetadataQueryParams = {
+  addresses: [ txMock.base.to?.hash as string ],
+  chainId: config.chain.id,
+  tagsLimit: '20',
+};
+
+function generateAddressMetadataResponse(tag: AddressMetadataTagApi) {
+  return {
+    addresses: {
+      [ txMock.base.to?.hash?.toLowerCase() as string ]: {
+        tags: [ {
+          ...tag,
+          meta: JSON.stringify(tag.meta),
+        } ],
+      },
+    },
+  } as AddressMetadataInfo;
+}
+
 test('no interpretation +@mobile', async({ render }) => {
   const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>);
   await expect(component).toHaveScreenshot();
@@ -32,6 +55,16 @@ test.describe('blockscout provider', () => {
     await expect(component).toHaveScreenshot();
   });
 
+  test('with interpretation and action button +@mobile +@dark-mode', async({ render, mockApiResponse, mockAssetResponse, mockFeatures }) => {
+    await mockFeatures([ [ 'action_button_exp', true ] ]);
+    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', txInterpretation, { pathParams: { hash } });
+    const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>);
+    await expect(component).toHaveScreenshot();
+  });
+
   test('with interpretation and view all link +@mobile', async({ render, mockApiResponse }) => {
     await mockApiResponse(
       'tx_interpretation',
@@ -42,13 +75,40 @@ test.describe('blockscout provider', () => {
     await expect(component).toHaveScreenshot();
   });
 
-  test('no interpretation, has method called', async({ render, mockApiResponse }) => {
+  test('with interpretation and view all link, and action button (external link) +@mobile', async({
+    render, mockApiResponse, mockAssetResponse, mockFeatures,
+  }) => {
+    await mockFeatures([ [ 'action_button_exp', true ] ]);
+    delete protocolTagWithMeta?.meta?.appID;
+    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: [ ...txInterpretation.data.summaries, ...txInterpretation.data.summaries ] } },
+      { pathParams: { hash } },
+    );
+    const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>);
+    await expect(component).toHaveScreenshot();
+  });
+
+  test('no interpretation, has method called', async({ render, mockApiResponse, mockFeatures }) => {
+    // the action button should not render if there is no interpretation
+    await mockFeatures([ [ 'action_button_exp', true ] ]);
+    const metadataResponse = generateAddressMetadataResponse(protocolTagWithMeta);
+    await mockApiResponse('address_metadata_info', metadataResponse, { queryParams: addressMetadataQueryParams });
+
     await mockApiResponse('tx_interpretation', { data: { summaries: [] } }, { pathParams: { hash } });
     const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ txQuery }/>);
     await expect(component).toHaveScreenshot();
   });
 
-  test('no interpretation', async({ render, mockApiResponse }) => {
+  test('no interpretation', async({ render, mockApiResponse, mockFeatures }) => {
+    // the action button should not render if there is no interpretation
+    await mockFeatures([ [ 'action_button_exp', true ] ]);
+    const metadataResponse = generateAddressMetadataResponse(protocolTagWithMeta);
+    await mockApiResponse('address_metadata_info', metadataResponse, { queryParams: addressMetadataQueryParams });
+
     const txPendingQuery = {
       data: txMock.pending,
       isPlaceholderData: false,