support ENS in AddressEntity

mocks/address/address.ts

@@ -15,6 +15,19 @@ export const withName: AddressParam = {
   private_tags: [],
   watchlist_names: [],
   public_tags: [],
+  ens_domain_name: null,
+};
+
+export const withEns: AddressParam = {
+  hash: hash,
+  implementation_name: null,
+  is_contract: false,
+  is_verified: null,
+  name: 'ArianeeStore',
+  private_tags: [],
+  watchlist_names: [],
+  public_tags: [],
+  ens_domain_name: 'kitty.kitty.kitty.cat.eth',
 };
 
 export const withoutName: AddressParam = {
@@ -26,6 +39,7 @@ export const withoutName: AddressParam = {
   private_tags: [],
   watchlist_names: [],
   public_tags: [],
+  ens_domain_name: null,
 };
 
 export const token: Address = {

mocks/blocks/block.ts

@@ -22,6 +22,7 @@ export const base: Block = {
     private_tags: [],
     public_tags: [],
     watchlist_names: [],
+    ens_domain_name: null,
   },
   nonce: '0x0000000000000000',
   parent_hash: '0x44125f0eb36a9d942e0c23bb4e8117f7ba86a9537a69b59c0025986ed2b7500f',
@@ -71,6 +72,7 @@ export const genesis: Block = {
     private_tags: [],
     public_tags: [],
     watchlist_names: [],
+    ens_domain_name: 'kitty.kitty.cat.eth',
   },
   nonce: '0x0000000000000000',
   parent_hash: '0x0000000000000000000000000000000000000000000000000000000000000000',
@@ -99,6 +101,7 @@ export const base2: Block = {
     private_tags: [],
     public_tags: [],
     watchlist_names: [],
+    ens_domain_name: null,
   },
   timestamp: '2022-11-11T11:46:05Z',
   tx_count: 253,

mocks/contracts/index.ts

@@ -10,6 +10,7 @@ export const contract1: VerifiedContract = {
     private_tags: [],
     public_tags: [],
     watchlist_names: [],
+    ens_domain_name: null,
   },
   coin_balance: '2346534676900000008',
   compiler_version: 'v0.8.17+commit.8df45f5f',
@@ -31,6 +32,7 @@ export const contract2: VerifiedContract = {
     private_tags: [],
     public_tags: [],
     watchlist_names: [],
+    ens_domain_name: null,
   },
   coin_balance: '9078234570352343999',
   compiler_version: 'v0.3.1+commit.0463ea4c',

mocks/tokens/tokenTransfer.ts

@@ -10,6 +10,7 @@ export const erc20: TokenTransfer = {
     private_tags: [],
     public_tags: [],
     watchlist_names: [],
+    ens_domain_name: null,
   },
   to: {
     hash: '0x7d20a8D54F955b4483A66aB335635ab66e151c51',
@@ -20,6 +21,7 @@ export const erc20: TokenTransfer = {
     private_tags: [],
     public_tags: [],
     watchlist_names: [],
+    ens_domain_name: 'kitty.kitty.cat.eth',
   },
   token: {
     address: '0x55d536e4d6c1993d8ef2e2a4ef77f02088419420',
@@ -55,6 +57,7 @@ export const erc721: TokenTransfer = {
     private_tags: [],
     public_tags: [],
     watchlist_names: [],
+    ens_domain_name: 'kitty.kitty.cat.eth',
   },
   to: {
     hash: '0x47eE48AEBc4ab9Ed908b805b8c8dAAa71B31Db1A',
@@ -65,6 +68,7 @@ export const erc721: TokenTransfer = {
     private_tags: [],
     public_tags: [],
     watchlist_names: [],
+    ens_domain_name: null,
   },
   token: {
     address: '0x363574E6C5C71c343d7348093D84320c76d5Dd29',
@@ -99,6 +103,7 @@ export const erc1155A: TokenTransfer = {
     private_tags: [],
     public_tags: [],
     watchlist_names: [],
+    ens_domain_name: null,
   },
   to: {
     hash: '0xBb36c792B9B45Aaf8b848A1392B0d6559202729E',
@@ -109,6 +114,7 @@ export const erc1155A: TokenTransfer = {
     private_tags: [],
     public_tags: [],
     watchlist_names: [],
+    ens_domain_name: 'kitty.kitty.cat.eth',
   },
   token: {
     address: '0xF56b7693E4212C584de4a83117f805B8E89224CB',

mocks/txs/internalTxs.ts

@@ -13,6 +13,7 @@ export const base: InternalTransaction = {
     private_tags: [],
     public_tags: [],
     watchlist_names: [],
+    ens_domain_name: null,
   },
   gas_limit: '757586',
   index: 1,
@@ -27,6 +28,7 @@ export const base: InternalTransaction = {
     private_tags: [],
     public_tags: [],
     watchlist_names: [],
+    ens_domain_name: null,
   },
   transaction_hash: '0xe9e27dfeb183066e26cfe556f74b7219b08df6951e25d14003d4fc7af8bbff61',
   type: 'call',
@@ -61,6 +63,7 @@ export const withContractCreated: InternalTransaction = {
     private_tags: [],
     public_tags: [],
     watchlist_names: [],
+    ens_domain_name: null,
   },
   value: '1420000000000000000',
   gas_limit: '5433',

mocks/txs/state.ts

@@ -10,6 +10,7 @@ export const mintToken: TxStateChange = {
     private_tags: [],
     public_tags: [],
     watchlist_names: [],
+    ens_domain_name: null,
   },
   balance_after: null,
   balance_before: null,
@@ -47,6 +48,7 @@ export const receiveMintedToken: TxStateChange = {
     private_tags: [],
     public_tags: [],
     watchlist_names: [],
+    ens_domain_name: null,
   },
   balance_after: '1',
   balance_before: '0',
@@ -84,6 +86,7 @@ export const transfer1155Token: TxStateChange = {
     private_tags: [],
     public_tags: [],
     watchlist_names: [],
+    ens_domain_name: null,
   },
   balance_after: '1',
   balance_before: '0',
@@ -115,6 +118,7 @@ export const receiveCoin: TxStateChange = {
     private_tags: [],
     public_tags: [],
     watchlist_names: [],
+    ens_domain_name: null,
   },
   balance_after: '443787514723917012805',
   balance_before: '443787484997510408745',
@@ -134,6 +138,7 @@ export const sendCoin: TxStateChange = {
     private_tags: [],
     public_tags: [],
     watchlist_names: [],
+    ens_domain_name: null,
   },
   balance_after: '828282622733717191',
   balance_before: '832127467556437753',

mocks/txs/tx.ts

@@ -29,6 +29,7 @@ export const base: Transaction = {
     private_tags: [ ],
     public_tags: [ publicTag ],
     watchlist_names: [],
+    ens_domain_name: 'kitty.kitty.cat.eth',
   },
   gas_limit: '800000',
   gas_price: '48000000000',
@@ -54,6 +55,7 @@ export const base: Transaction = {
     private_tags: [ privateTag ],
     public_tags: [],
     watchlist_names: [ watchlistName ],
+    ens_domain_name: null,
   },
   token_transfers: [],
   token_transfers_overflow: false,
@@ -97,6 +99,7 @@ export const withContractCreation: Transaction = {
     private_tags: [],
     public_tags: [],
     watchlist_names: [],
+    ens_domain_name: null,
   },
   tx_types: [
     'contract_creation',
@@ -115,6 +118,7 @@ export const withTokenTransfer: Transaction = {
     private_tags: [ privateTag ],
     public_tags: [],
     watchlist_names: [ watchlistName ],
+    ens_domain_name: null,
   },
   token_transfers: [
     tokenTransferMock.erc20,
@@ -168,6 +172,7 @@ export const withRawRevertReason: Transaction = {
     private_tags: [ ],
     public_tags: [],
     watchlist_names: [ ],
+    ens_domain_name: null,
   },
 };
 
@@ -283,6 +288,7 @@ export const stabilityTx: Transaction = {
       private_tags: [],
       public_tags: [],
       watchlist_names: [],
+      ens_domain_name: null,
     },
     dapp_fee: '34381250000000',
     token: {
@@ -307,6 +313,7 @@ export const stabilityTx: Transaction = {
       private_tags: [],
       public_tags: [],
       watchlist_names: [],
+      ens_domain_name: null,
     },
     validator_fee: '34381250000000',
   },

stubs/address.ts

@@ -71,6 +71,7 @@ export const TOP_ADDRESS: AddressesItem = {
   private_tags: [],
   public_tags: [ ],
   watchlist_names: [],
+  ens_domain_name: null,
 };
 
 export const ADDRESS_COIN_BALANCE: AddressCoinBalanceHistoryItem = {

stubs/addressParams.ts

@@ -11,4 +11,5 @@ export const ADDRESS_PARAMS: AddressParam = {
   private_tags: [],
   public_tags: [],
   watchlist_names: [],
+  ens_domain_name: null,
 };

types/api/addressParams.ts

@@ -21,4 +21,5 @@ export interface AddressParam extends UserTags {
   name: string | null;
   is_contract: boolean;
   is_verified: boolean | null;
+  ens_domain_name: string | null;
 }

ui/l2Deposits/DepositsListItem.tsx

@@ -65,7 +65,7 @@ const DepositsListItem = ({ item, isLoading }: Props) => {
       <ListItemMobileGrid.Label isLoading={ isLoading }>L1 txn origin</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         <AddressEntityL1
-          address={{ hash: item.l1_tx_origin, name: '', is_contract: false, is_verified: false, implementation_name: '' }}
+          address={{ hash: item.l1_tx_origin, name: '', is_contract: false, is_verified: false, implementation_name: '', ens_domain_name: null }}
           isLoading={ isLoading }
           noCopy
         />

ui/l2Deposits/DepositsTableItem.tsx

@@ -56,7 +56,7 @@ const WithdrawalsTableItem = ({ item, isLoading }: Props) => {
       </Td>
       <Td verticalAlign="middle">
         <AddressEntityL1
-          address={{ hash: item.l1_tx_origin, name: '', is_contract: false, is_verified: false, implementation_name: '' }}
+          address={{ hash: item.l1_tx_origin, name: '', is_contract: false, is_verified: false, implementation_name: '', ens_domain_name: null }}
           isLoading={ isLoading }
           truncation="constant"
           noCopy

ui/pages/Accounts.pw.tsx

@@ -21,6 +21,7 @@ const addresses: AddressesResponse = {
       ...addressMocks.token,
       tx_count: '109123890123',
       coin_balance: '22222345678901234567890000',
+      ens_domain_name: null,
     }, {
       ...addressMocks.withoutName,
       tx_count: '11',

ui/searchResults/SearchResultListItem.tsx

@@ -82,6 +82,7 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
           is_verified: data.is_smart_contract_verified,
           name: null,
           implementation_name: null,
+          ens_domain_name: null,
         };
 
         return (

ui/searchResults/SearchResultTableItem.tsx

@@ -101,6 +101,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
             is_verified: data.is_smart_contract_verified,
             name: null,
             implementation_name: null,
+            ens_domain_name: null,
           };
 
           return (
@@ -136,6 +137,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
           is_verified: data.is_smart_contract_verified,
           name: null,
           implementation_name: null,
+          ens_domain_name: null,
         };
 
         return (

ui/shared/entities/address/AddressEntity.pw.tsx

@@ -80,6 +80,18 @@ test.describe('loading', () => {
 
     await expect(component).toHaveScreenshot();
   });
+
+  test('with ENS', async({ mount }) => {
+    const component = await mount(
+      <TestApp>
+        <AddressEntity
+          address={ addressMock.withEns }
+        />
+      </TestApp>,
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
 });
 
 test('external link', async({ mount }) => {

ui/shared/entities/address/AddressEntity.tsx

@@ -101,10 +101,11 @@ const Icon = (props: IconProps) => {
 type ContentProps = Omit<EntityBase.ContentBaseProps, 'text'> & Pick<EntityProps, 'address'>;
 
 const Content = chakra((props: ContentProps) => {
-  if (props.address.name) {
+  if (props.address.name || props.address.ens_domain_name) {
+    const text = props.address.ens_domain_name || props.address.name;
     const label = (
       <VStack gap={ 0 } py={ 1 } color="inherit">
-        <Box fontWeight={ 600 } whiteSpace="pre-wrap" wordBreak="break-word">{ props.address.name }</Box>
+        <Box fontWeight={ 600 } whiteSpace="pre-wrap" wordBreak="break-word">{ text }</Box>
         <Box whiteSpace="pre-wrap" wordBreak="break-word">{ props.address.hash }</Box>
       </VStack>
     );
@@ -112,7 +113,7 @@ const Content = chakra((props: ContentProps) => {
     return (
       <Tooltip label={ label } maxW="100vw">
         <Skeleton isLoaded={ !props.isLoading } overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap" as="span">
-          { props.address.name }
+          { text }
         </Skeleton>
       </Tooltip>
     );
@@ -140,7 +141,7 @@ const Copy = (props: CopyProps) => {
 const Container = EntityBase.Container;
 
 export interface EntityProps extends EntityBase.EntityBaseProps {
-  address: Pick<AddressParam, 'hash' | 'name' | 'is_contract' | 'is_verified' | 'implementation_name'>;
+  address: Pick<AddressParam, 'hash' | 'name' | 'is_contract' | 'is_verified' | 'implementation_name' | 'ens_domain_name'>;
   isSafeAddress?: boolean;
 }
 

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx

@@ -17,7 +17,14 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
   const shouldHighlightHash = data.address.toLowerCase() === searchTerm.toLowerCase();
   const icon = (
     <AddressEntity.Icon
-      address={{ hash: data.address, is_contract: data.type === 'contract', name: '', is_verified: data.is_smart_contract_verified, implementation_name: null }}
+      address={{
+        hash: data.address,
+        is_contract: data.type === 'contract',
+        name: '',
+        is_verified: data.is_smart_contract_verified,
+        implementation_name: null,
+        ens_domain_name: null,
+      }}
     />
   );
   const name = data.name && (

ui/tokens/TokensTableItem.tsx

@@ -48,6 +48,7 @@ const TokensTableItem = ({
     implementation_name: null,
     is_contract: true,
     is_verified: false,
+    ens_domain_name: null,
   };
 
   return (