diff --git a/mocks/txs/tx.ts b/mocks/txs/tx.ts index 595af11b47..a84c35fa2c 100644 --- a/mocks/txs/tx.ts +++ b/mocks/txs/tx.ts @@ -1,6 +1,7 @@ /* eslint-disable max-len */ import type { Transaction } from 'types/api/transaction'; +import * as addressMock from 'mocks/address/address'; import { publicTag, privateTag, watchlistName } from 'mocks/address/tag'; import * as tokenTransferMock from 'mocks/tokens/tokenTransfer'; import * as decodedInputDataMock from 'mocks/txs/decodedInputData'; @@ -47,7 +48,7 @@ export const base: Transaction = { status: 'ok', timestamp: '2022-10-10T14:34:30.000000Z', to: { - hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859', + hash: addressMock.hash, implementations: null, is_contract: false, is_verified: true, @@ -110,7 +111,7 @@ export const withTokenTransfer: Transaction = { ...base, hash: '0x62d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3196', to: { - hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859', + hash: addressMock.hash, implementations: null, is_contract: true, is_verified: true, @@ -166,7 +167,7 @@ export const withRawRevertReason: Transaction = { raw: '4f6e6c79206368616972706572736f6e2063616e206769766520726967687420746f20766f74652e', }, to: { - hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859', + hash: addressMock.hash, implementations: null, is_verified: true, is_contract: true, @@ -344,7 +345,7 @@ export const base2 = { hash: '0x02d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3193', from: { ...base.from, - hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859', + hash: addressMock.hash, }, }; @@ -353,7 +354,7 @@ export const base3 = { hash: '0x12d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3193', from: { ...base.from, - hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859', + hash: addressMock.hash, }, }; @@ -375,3 +376,18 @@ export const withBlob = { tx_types: [ 'blob_transaction' as const ], type: 3, }; + +export const withRecipientName = { + ...base, + to: addressMock.withName, +}; + +export const withRecipientEns = { + ...base, + to: addressMock.withEns, +}; + +export const withRecipientNameTag = { + ...withRecipientEns, + to: addressMock.withNameTag, +}; diff --git a/mocks/txs/txInterpretation.ts b/mocks/txs/txInterpretation.ts index 061164088d..764d697a6b 100644 --- a/mocks/txs/txInterpretation.ts +++ b/mocks/txs/txInterpretation.ts @@ -1,5 +1,7 @@ import type { TxInterpretationResponse } from 'types/api/txInterpretation'; +import { hash } from 'mocks/address/address'; + export const txInterpretation: TxInterpretationResponse = { data: { summaries: [ { @@ -25,7 +27,7 @@ export const txInterpretation: TxInterpretationResponse = { to_address: { type: 'address', value: { - hash: '0x48c04ed5691981C42154C6167398f95e8f38a7fF', + hash: hash, implementations: null, is_contract: false, is_verified: false, diff --git a/ui/shared/tx/interpretation/TxInterpretation.tsx b/ui/shared/tx/interpretation/TxInterpretation.tsx index cc708fda36..88302f4794 100644 --- a/ui/shared/tx/interpretation/TxInterpretation.tsx +++ b/ui/shared/tx/interpretation/TxInterpretation.tsx @@ -2,6 +2,7 @@ import { Skeleton, Tooltip, chakra } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; +import type { AddressParam } from 'types/api/addressParams'; import type { TxInterpretationSummary, TxInterpretationVariable, @@ -23,14 +24,14 @@ import { extractVariables, getStringChunks, fillStringVariables, checkSummary, N type Props = { summary?: TxInterpretationSummary; isLoading?: boolean; - ensDomainNames?: Record; + addressDataMap?: Record; className?: string; } type NonStringTxInterpretationVariable = Exclude const TxInterpretationElementByType = ( - { variable, ensDomainNames }: { variable?: NonStringTxInterpretationVariable; ensDomainNames?: Record }, + { variable, addressDataMap }: { variable?: NonStringTxInterpretationVariable; addressDataMap?: Record }, ) => { const onAddressClick = React.useCallback(() => { mixpanel.logEvent(mixpanel.EventTypes.TX_INTERPRETATION_INTERACTION, { Type: 'Address click' }); @@ -51,14 +52,10 @@ const TxInterpretationElementByType = ( const { type, value } = variable; switch (type) { case 'address': { - let address = value; - if (!address.ens_domain_name && ensDomainNames?.[address.hash]) { - address = { ...address, ens_domain_name: ensDomainNames[address.hash] }; - } return ( { +const TxInterpretation = ({ summary, isLoading, addressDataMap, className }: Props) => { if (!summary) { return null; } @@ -161,7 +158,7 @@ const TxInterpretation = ({ summary, isLoading, ensDomainNames, className }: Pro ( ) ) } diff --git a/ui/tx/TxSubHeading.pw.tsx b/ui/tx/TxSubHeading.pw.tsx index bc85ff183a..185af30071 100644 --- a/ui/tx/TxSubHeading.pw.tsx +++ b/ui/tx/TxSubHeading.pw.tsx @@ -1,7 +1,6 @@ import React from 'react'; import type { AddressMetadataInfo, AddressMetadataTagApi } from 'types/api/addressMetadata'; -import type { AddressParam } from 'types/api/addressParams'; import config from 'configs/app'; import { protocolTagWithMeta } from 'mocks/metadata/address'; @@ -65,22 +64,24 @@ test.describe('blockscout provider', () => { await expect(component).toHaveScreenshot(); }); - test('with interpretation and recipient ENS domain', async({ render, mockApiResponse }) => { - const txData = { - ...txMock.base, - to: { - ...txMock.base.to, - hash: (txInterpretation.data.summaries[0].summary_template_variables.to_address.value as AddressParam).hash, - ens_domain_name: 'duckduck.eth', - }, - }; - const txWithEnsQuery = { - data: txData, - isPlaceholderData: false, - isError: false, - } as TxQuery; + test('with interpretation and recipient name +@mobile', async({ render, mockApiResponse }) => { + const newTxQuery = { ...txQuery, data: txMock.withRecipientName } as TxQuery; + await mockApiResponse('tx_interpretation', txInterpretation, { pathParams: { hash } }); + const component = await render(); + await expect(component).toHaveScreenshot(); + }); + + test('with interpretation and recipient ENS domain +@mobile', async({ render, mockApiResponse }) => { + const newTxQuery = { ...txQuery, data: txMock.withRecipientEns } as TxQuery; + await mockApiResponse('tx_interpretation', txInterpretation, { pathParams: { hash } }); + const component = await render(); + await expect(component).toHaveScreenshot(); + }); + + test('with interpretation and recipient name tag +@mobile', async({ render, mockApiResponse }) => { + const newTxQuery = { ...txQuery, data: txMock.withRecipientNameTag } as TxQuery; await mockApiResponse('tx_interpretation', txInterpretation, { pathParams: { hash } }); - const component = await render(); + const component = await render(); await expect(component).toHaveScreenshot(); }); diff --git a/ui/tx/TxSubHeading.tsx b/ui/tx/TxSubHeading.tsx index 68424a833a..bad11afe00 100644 --- a/ui/tx/TxSubHeading.tsx +++ b/ui/tx/TxSubHeading.tsx @@ -1,6 +1,8 @@ import { Box, Flex, Link } from '@chakra-ui/react'; import React from 'react'; +import type { AddressParam } from 'types/api/addressParams'; + import config from 'configs/app'; import useApiQuery from 'lib/api/useApiQuery'; import { NOVES_TRANSLATE } from 'stubs/noves/NovesTranslate'; @@ -59,12 +61,12 @@ const TxSubHeading = ({ hash, hasTag, txQuery }: Props) => { (hasNovesInterpretation && novesInterpretationQuery.data && !novesInterpretationQuery.isPlaceholderData) || (hasInternalInterpretation && !txInterpretationQuery.isPlaceholderData); - const ensDomainNames: Record = {}; - [ txQuery.data?.from, txQuery.data?.to ].forEach(data => { - if (data?.hash && data?.ens_domain_name) { - ensDomainNames[data.hash] = data.ens_domain_name; - } - }); + const addressDataMap: Record = {}; + [ txQuery.data?.from, txQuery.data?.to ] + .filter((data): data is AddressParam => Boolean(data && data.hash)) + .forEach(data => { + addressDataMap[data.hash] = data; + }); const content = (() => { if (hasNovesInterpretation && novesInterpretationQuery.data) { @@ -73,7 +75,7 @@ const TxSubHeading = ({ hash, hasTag, txQuery }: Props) => { @@ -84,7 +86,7 @@ const TxSubHeading = ({ hash, hasTag, txQuery }: Props) => { diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png index 4898441373..efe150dc41 100644 Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png differ diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_blockscout-provider-with-interpretation-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_blockscout-provider-with-interpretation-mobile-dark-mode-1.png index d87e1bcea8..d0fdb5abc6 100644 Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_blockscout-provider-with-interpretation-mobile-dark-mode-1.png and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_blockscout-provider-with-interpretation-mobile-dark-mode-1.png differ diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png index 7149f1a584..7e16a3ab45 100644 Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png differ diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-ENS-domain-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-ENS-domain-mobile-1.png new file mode 100644 index 0000000000..43600deed4 Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-ENS-domain-mobile-1.png differ diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-name-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-name-mobile-1.png new file mode 100644 index 0000000000..a3542c18bb Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-name-mobile-1.png differ diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-name-tag-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-name-tag-mobile-1.png new file mode 100644 index 0000000000..8974f71138 Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-name-tag-mobile-1.png differ diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-vi-ee08a-k-and-action-button-external-link-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-vi-ee08a-k-and-action-button-external-link-mobile-1.png index fc019b5e0d..f3ff08dabb 100644 Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-vi-ee08a-k-and-action-button-external-link-mobile-1.png and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-vi-ee08a-k-and-action-button-external-link-mobile-1.png differ diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png index 6660b6a1ad..6c9afa3175 100644 Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png differ diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-mobile-dark-mode-1.png index 96cc6bf0d6..9f058ef1d3 100644 Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-mobile-dark-mode-1.png and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-mobile-dark-mode-1.png differ diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png index 05d4fa8e58..38a8ace2b3 100644 Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png differ diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-ENS-domain-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-ENS-domain-mobile-1.png new file mode 100644 index 0000000000..e5860bfc55 Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-ENS-domain-mobile-1.png differ diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-name-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-name-mobile-1.png new file mode 100644 index 0000000000..70bed47263 Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-name-mobile-1.png differ diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-name-tag-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-name-tag-mobile-1.png new file mode 100644 index 0000000000..23bfd0e59f Binary files /dev/null and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-name-tag-mobile-1.png differ diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-vi-ee08a-k-and-action-button-external-link-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-vi-ee08a-k-and-action-button-external-link-mobile-1.png index f2008af04e..9b17b588f1 100644 Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-vi-ee08a-k-and-action-button-external-link-mobile-1.png and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-vi-ee08a-k-and-action-button-external-link-mobile-1.png differ diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png index d2ab3aa40d..bd069fab92 100644 Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png differ diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-mobile-dark-mode-1.png index aa2a6801ce..6d8efad2d8 100644 Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-mobile-dark-mode-1.png and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-mobile-dark-mode-1.png differ