Merge pull request #2134 from blockscout/ens-in-tx-interpretation

Display ENS in tx interpretation

ui/shared/tx/interpretation/TxInterpretation.tsx

@@ -23,12 +23,15 @@ import { extractVariables, getStringChunks, fillStringVariables, checkSummary, N
 type Props = {
  summary?: TxInterpretationSummary;
  isLoading?: boolean;
+ ensDomainNames?: Record<string, string>;
  className?: string;
 }
 
 type NonStringTxInterpretationVariable = Exclude<TxInterpretationVariable, TxInterpretationVariableString>
 
-const TxInterpretationElementByType = ({ variable }: { variable?: NonStringTxInterpretationVariable }) => {
+const TxInterpretationElementByType = (
+ { variable, ensDomainNames }: { variable?: NonStringTxInterpretationVariable; ensDomainNames?: Record<string, string> },
+) => {
  const onAddressClick = React.useCallback(() => {
  mixpanel.logEvent(mixpanel.EventTypes.TX_INTERPRETATION_INTERACTION, { Type: 'Address click' });
  }, []);
@@ -48,10 +51,14 @@ const TxInterpretationElementByType = ({ variable }: { variable?: NonStringTxInt
  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 (
  <chakra.span display="inline-block" verticalAlign="top" _notFirst={{ marginLeft: 1 }}>
  <AddressEntity
- address={ value }
+ address={ address }
  truncation="constant"
  onClick={ onAddressClick }
  whiteSpace="initial"
@@ -122,7 +129,7 @@ const TxInterpretationElementByType = ({ variable }: { variable?: NonStringTxInt
  }
 };
 
-const TxInterpretation = ({ summary, isLoading, className }: Props) => {
+const TxInterpretation = ({ summary, isLoading, ensDomainNames, className }: Props) => {
  if (!summary) {
  return null;
  }
@@ -151,7 +158,12 @@ const TxInterpretation = ({ summary, isLoading, className }: Props) => {
  { index < variablesNames.length && (
  variablesNames[index] === NATIVE_COIN_SYMBOL_VAR_NAME ?
  <chakra.span>{ currencyUnits.ether + ' ' }</chakra.span> :
- <TxInterpretationElementByType variable={ variables[variablesNames[index]] as NonStringTxInterpretationVariable }/>
+ (
+ <TxInterpretationElementByType
+ variable={ variables[variablesNames[index]] as NonStringTxInterpretationVariable }
+ ensDomainNames={ ensDomainNames }
+ />
+ )
  ) }
  </chakra.span>
  );

ui/tx/TxSubHeading.pw.tsx

@@ -1,6 +1,7 @@
 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';
@@ -64,6 +65,25 @@ 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;
+ await mockApiResponse('tx_interpretation', txInterpretation, { pathParams: { hash } });
+ const component = await render(<TxSubHeading hash={ hash } hasTag={ false } txQuery={ txWithEnsQuery }/>);
+ await expect(component).toHaveScreenshot();
+ });
+
  test('with interpretation and view all link +@mobile', async({ render, mockApiResponse }) => {
  await mockApiResponse(
  'tx_interpretation',

ui/tx/TxSubHeading.tsx

@@ -59,14 +59,21 @@ const TxSubHeading = ({ hash, hasTag, txQuery }: Props) => {
  (hasNovesInterpretation && novesInterpretationQuery.data && !novesInterpretationQuery.isPlaceholderData) ||
  (hasInternalInterpretation && !txInterpretationQuery.isPlaceholderData);
 
+ const ensDomainNames: Record<string, string> = {};
+ [ txQuery.data?.from, txQuery.data?.to ].forEach(data => {
+ if (data?.hash && data?.ens_domain_name) {
+ ensDomainNames[data.hash] = data.ens_domain_name;
+ }
+ });
+
  const content = (() => {
  if (hasNovesInterpretation && novesInterpretationQuery.data) {
  const novesSummary = createNovesSummaryObject(novesInterpretationQuery.data);
-
  return (
  <TxInterpretation
  summary={ novesSummary }
- isLoading={ novesInterpretationQuery.isPlaceholderData }
+ isLoading={ novesInterpretationQuery.isPlaceholderData || txQuery.isPlaceholderData }
+ ensDomainNames={ ensDomainNames }
  fontSize="lg"
  mr={{ base: 0, lg: 6 }}
  />
@@ -76,7 +83,8 @@ const TxSubHeading = ({ hash, hasTag, txQuery }: Props) => {
  <Flex mr={{ base: 0, lg: 6 }} flexWrap="wrap" alignItems="center">
  <TxInterpretation
  summary={ txInterpretationQuery.data?.data.summaries[0] }
- isLoading={ txInterpretationQuery.isPlaceholderData }
+ isLoading={ txInterpretationQuery.isPlaceholderData || txQuery.isPlaceholderData }
+ ensDomainNames={ ensDomainNames }
  fontSize="lg"
  mr={ hasViewAllInterpretationsLink ? 3 : 0 }
  />
@@ -114,6 +122,11 @@ const TxSubHeading = ({ hash, hasTag, txQuery }: Props) => {
  }
  })();
 
+ const isLoading =
+ txQuery.isPlaceholderData ||
+ (hasNovesInterpretation && novesInterpretationQuery.isPlaceholderData) ||
+ (hasInternalInterpretation && txInterpretationQuery.isPlaceholderData);
+
  return (
  <Box display={{ base: 'block', lg: 'flex' }} alignItems="center" w="100%">
  { content }
@@ -124,7 +137,7 @@ const TxSubHeading = ({ hash, hasTag, txQuery }: Props) => {
  gap={ 3 }
  mt={{ base: 3, lg: 0 }}
  >
- { !hasTag && <AccountActionsMenu/> }
+ { !hasTag && <AccountActionsMenu isLoading={ isLoading }/> }
  { (appActionData && hasAnyInterpretation) && (
  <AppActionButton data={ appActionData } txHash={ hash } source="Txn"/>
  ) }