Paddings: icons + amount/text in interpretation

Fixes #1997

mocks/txs/tx.ts

@@ -391,3 +391,8 @@ export const withRecipientNameTag = {
   ...withRecipientEns,
   to: addressMock.withNameTag,
 };
+
+export const withRecipientContract = {
+  ...withRecipientEns,
+  to: addressMock.contract,
+};

types/api/addressParams.ts

@@ -2,7 +2,7 @@ import type { AddressMetadataTagApi } from './addressMetadata';
 
 export interface AddressImplementation {
   address: string;
-  name: string | null;
+  name?: string | null;
 }
 
 export interface AddressTag {

ui/address/ensDomains/AddressEnsDomains.tsx

@@ -42,7 +42,7 @@ const DomainsGrid = ({ data }: { data: Array<bens.Domain> }) => {
       rowGap={ 4 }
       mt={ 2 }
     >
-      { data.slice(0, 9).map((domain) => <EnsEntity key={ domain.id } name={ domain.name } protocol={ domain.protocol } noCopy/>) }
+      { data.slice(0, 9).map((domain) => <EnsEntity key={ domain.id } domain={ domain.name } protocol={ domain.protocol } noCopy/>) }
     </Grid>
   );
 };
@@ -126,7 +126,7 @@ const AddressEnsDomains = ({ query, addressHash, mainDomainName }: Props) => {
             <Box w="100%">
               <chakra.span color="text_secondary" fontSize="xs">Primary*</chakra.span>
               <Flex alignItems="center" fontSize="md" mt={ 2 }>
-                <EnsEntity name={ mainDomain.name } protocol={ mainDomain.protocol } fontWeight={ 600 } noCopy/>
+                <EnsEntity domain={ mainDomain.name } protocol={ mainDomain.protocol } fontWeight={ 600 } noCopy/>
                 { mainDomain.expiry_date &&
                     <chakra.span color="text_secondary" whiteSpace="pre"> (expires { dayjs(mainDomain.expiry_date).fromNow() })</chakra.span> }
               </Flex>

ui/nameDomains/NameDomainsListItem.tsx

@@ -25,7 +25,7 @@ const NameDomainsListItem = ({
     <ListItemMobileGrid.Container>
       <ListItemMobileGrid.Label isLoading={ isLoading }>Domain</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <EnsEntity name={ name } protocol={ protocol } isLoading={ isLoading } fontWeight={ 500 }/>
+        <EnsEntity domain={ name } protocol={ protocol } isLoading={ isLoading } fontWeight={ 500 }/>
       </ListItemMobileGrid.Value>
 
       { resolvedAddress && (

ui/nameDomains/NameDomainsTableItem.tsx

@@ -24,7 +24,7 @@ const NameDomainsTableItem = ({
   return (
     <Tr>
       <Td verticalAlign="middle">
-        <EnsEntity name={ name } protocol={ protocol } isLoading={ isLoading } fontWeight={ 600 }/>
+        <EnsEntity domain={ name } protocol={ protocol } isLoading={ isLoading } fontWeight={ 600 }/>
       </Td>
       <Td verticalAlign="middle">
         { resolvedAddress && <AddressEntity address={ resolvedAddress } isLoading={ isLoading } fontWeight={ 500 }/> }

ui/pages/Address.tsx

@@ -270,7 +270,11 @@ const AddressPageContent = () => {
   const titleContentAfter = (
     <EntityTags
       tags={ tags }
-      isLoading={ isLoading || (config.features.addressMetadata.isEnabled && addressMetadataQuery.isPending) }
+      isLoading={
+        isLoading ||
+        (config.features.userOps.isEnabled && userOpsAccountQuery.isPlaceholderData) ||
+        (config.features.addressMetadata.isEnabled && addressMetadataQuery.isPending)
+      }
     />
   );
 
@@ -300,7 +304,7 @@ const AddressPageContent = () => {
     <Flex alignItems="center" w="100%" columnGap={ 2 } rowGap={ 2 } flexWrap={{ base: 'wrap', lg: 'nowrap' }}>
       { addressQuery.data?.ens_domain_name && (
         <EnsEntity
-          name={ addressQuery.data?.ens_domain_name }
+          domain={ addressQuery.data?.ens_domain_name }
           protocol={ !addressEnsDomainsQuery.isPending ? addressMainDomain?.protocol : null }
           fontFamily="heading"
           fontSize="lg"
@@ -317,7 +321,7 @@ const AddressPageContent = () => {
         fontWeight={ 500 }
         noLink
         isSafeAddress={ isSafeAddress }
-        iconColor={ isSafeAddress ? safeIconColor : undefined }
+        icon={{ color: isSafeAddress ? safeIconColor : undefined }}
         mr={ 4 }
       />
       { !isLoading && addressQuery.data?.is_contract && addressQuery.data.token &&

ui/pages/Block.tsx

@@ -167,7 +167,7 @@ const BlockPageContent = () => {
   })();
   const titleSecondRow = (
     <>
-      { !config.UI.views.block.hiddenFields?.miner && (
+      { !config.UI.views.block.hiddenFields?.miner && blockQuery.data?.miner && (
         <Skeleton
           isLoaded={ !blockQuery.isPlaceholderData }
           fontFamily="heading"
@@ -179,7 +179,7 @@ const BlockPageContent = () => {
           <chakra.span flexShrink={ 0 }>
             { `${ capitalize(getNetworkValidationActionText()) } by` }
           </chakra.span>
-          <AddressEntity address={ blockQuery.data?.miner }/>
+          <AddressEntity address={ blockQuery.data.miner }/>
         </Skeleton>
       ) }
       <NetworkExplorers type="block" pathParam={ heightOrHash } ml={{ base: config.UI.views.block.hiddenFields?.miner ? 0 : 3, lg: 'auto' }}/>

ui/pages/CsvExport.tsx

@@ -155,7 +155,7 @@ const CsvExport = () => {
 
     const limit = (configQuery.data?.limit || 10_000).toLocaleString(undefined, { maximumFractionDigits: 3, notation: 'compact' });
 
-    if (exportTypeParam === 'holders') {
+    if (exportTypeParam === 'holders' && tokenQuery.data) {
       return (
         <Flex mb={ 10 } whiteSpace="pre-wrap" flexWrap="wrap">
           <span>Export { exportType.text } for token </span>
@@ -173,6 +173,10 @@ const CsvExport = () => {
       );
     }
 
+    if (!addressQuery.data) {
+      return null;
+    }
+
     return (
       <Flex mb={ 10 } whiteSpace="pre-wrap" flexWrap="wrap">
         <span>Export { exportType.text } for address </span>

ui/pages/NameDomain.tsx

@@ -57,7 +57,7 @@ const NameDomain = () => {
       flexWrap={{ base: 'wrap', lg: 'nowrap' }}
     >
       <EnsEntity
-        name={ domainName }
+        domain={ domainName }
         protocol={ infoQuery.data?.protocol }
         isLoading={ isLoading }
         noLink

ui/shared/Page/specs/DefaultView.tsx

@@ -60,7 +60,7 @@ const DefaultView = () => {
       beforeTitle={ (
         <TokenEntity.Icon
           token={ tokenData }
-          iconSize="lg"
+          size="lg"
         />
       ) }
       backLink={ backLink }

ui/shared/Page/specs/LongNameAndManyTags.tsx

@@ -52,7 +52,7 @@ const LongNameAndManyTags = () => {
       beforeTitle={ (
         <TokenEntity.Icon
           token={ tokenData }
-          iconSize="lg"
+          size="lg"
         />
       ) }
       contentAfter={ contentAfter }

ui/shared/TokenTransferSnippet/TokenTransferSnippetNft.tsx

@@ -29,7 +29,7 @@ const NftTokenTransferSnippet = ({ value, token, tokenId }: Props) => {
         hash={ token.address }
         id={ tokenId }
         fontWeight={ 600 }
-        iconSize="md"
+        icon={{ size: 'md' }}
         maxW={{ base: '100%', lg: '150px' }}
         w="auto"
         flexShrink={ 0 }

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

@@ -9,7 +9,7 @@ import { test, expect } from 'playwright/lib';
 
 import AddressEntity from './AddressEntity';
 
-const iconSizes = [ 'md', 'lg' ];
+const iconSizes = [ 'md', 'lg' ] as const;
 
 test.use({ viewport: { width: 180, height: 140 } });
 
@@ -19,7 +19,7 @@ test.describe('icon size', () => {
       const component = await render(
         <AddressEntity
           address={ addressMock.withoutName }
-          iconSize={ size }
+          icon={{ size }}
         />,
       );
 
@@ -69,7 +69,7 @@ test.describe('proxy contract', () => {
   test('without implementation name', async({ render, page }) => {
     const component = await render(
       <AddressEntity
-        address={{ ...addressMock.contract, implementations: [ { address: addressMock.contract.implementations?.[0].address } ] }}
+        address={{ ...addressMock.contract, implementations: [ { address: addressMock.contract.implementations?.[0].address as string } ] }}
       />,
     );
 
@@ -81,7 +81,7 @@ test.describe('proxy contract', () => {
   test('without any name', async({ render, page }) => {
     const component = await render(
       <AddressEntity
-        address={{ ...addressMock.contract, name: undefined, implementations: [ { address: addressMock.contract.implementations?.[0].address } ] }}
+        address={{ ...addressMock.contract, name: undefined, implementations: [ { address: addressMock.contract.implementations?.[0].address as string } ] }}
       />,
     );
 

ui/shared/entities/address/AddressEntity.tsx

@@ -1,6 +1,5 @@
 import type { As } from '@chakra-ui/react';
 import { Box, Flex, Skeleton, Tooltip, chakra, VStack } from '@chakra-ui/react';
-import _omit from 'lodash/omit';
 import React from 'react';
 
 import type { AddressParam } from 'types/api/addressParams';
@@ -10,7 +9,7 @@ import { route } from 'nextjs-routes';
 import { useAddressHighlightContext } from 'lib/contexts/addressHighlight';
 import * as EntityBase from 'ui/shared/entities/base/components';
 
-import { getIconProps } from '../base/utils';
+import { distributeEntityProps, getIconProps } from '../base/utils';
 import AddressEntityContentProxy from './AddressEntityContentProxy';
 import AddressIdenticon from './AddressIdenticon';
 
@@ -29,19 +28,16 @@ const Link = chakra((props: LinkProps) => {
   );
 });
 
-type IconProps = Omit<EntityBase.IconBaseProps, 'name'> & Pick<EntityProps, 'address' | 'isSafeAddress'> & {
-  asProp?: As;
-  name?: EntityBase.IconBaseProps['name'];
-};
+type IconProps = Pick<EntityProps, 'address' | 'isSafeAddress'> & EntityBase.IconBaseProps;
 
 const Icon = (props: IconProps) => {
   if (props.noIcon) {
     return null;
   }
 
   const styles = {
-    ...getIconProps(props.iconSize),
-    marginRight: 2,
+    ...getIconProps(props.size),
+    marginRight: props.marginRight ?? 2,
   };
 
   if (props.isLoading) {
@@ -80,7 +76,7 @@ const Icon = (props: IconProps) => {
   return (
     <Flex marginRight={ styles.marginRight }>
       <AddressIdenticon
-        size={ props.iconSize === 'lg' ? 30 : 20 }
+        size={ props.size === 'lg' ? 30 : 20 }
         hash={ props.address.hash }
       />
     </Flex>
@@ -137,18 +133,18 @@ const Copy = (props: CopyProps) => {
 
 const Container = EntityBase.Container;
 
+interface AddressProp extends Partial<AddressParam> {
+  hash: string;
+}
+
 export interface EntityProps extends EntityBase.EntityBaseProps {
-  address: Pick<AddressParam,
-  'hash' | 'name' | 'is_contract' | 'is_verified' | 'implementations' | 'ens_domain_name' | 'metadata'
-  >;
+  address: AddressProp;
   isSafeAddress?: boolean;
   noHighlight?: boolean;
 }
 
 const AddressEntry = (props: EntityProps) => {
-  const linkProps = _omit(props, [ 'className' ]);
-  const partsProps = _omit(props, [ 'className', 'onClick' ]);
-
+  const partsProps = distributeEntityProps(props);
   const context = useAddressHighlightContext(props.noHighlight);
 
   return (
@@ -162,16 +158,16 @@ const AddressEntry = (props: EntityProps) => {
       position="relative"
       zIndex={ 0 }
     >
-      <Icon { ...partsProps } color={ props.iconColor }/>
-      <Link { ...linkProps }>
-        <Content { ...partsProps }/>
+      <Icon { ...partsProps.icon }/>
+      <Link { ...partsProps.link }>
+        <Content { ...partsProps.content }/>
       </Link>
-      <Copy { ...partsProps }/>
+      <Copy { ...partsProps.copy }/>
     </Container>
   );
 };
 
-export default React.memo(chakra(AddressEntry));
+export default React.memo(chakra<As, EntityProps>(AddressEntry));
 
 export {
   Container,

ui/shared/entities/base/components.tsx

@@ -18,9 +18,7 @@ export type Truncation = 'constant' | 'constant_long' | 'dynamic' | 'tail' | 'no
 export interface EntityBaseProps {
   className?: string;
   href?: string;
-  iconName?: IconName;
-  iconSize?: IconSize;
-  iconColor?: IconProps['color'];
+  icon?: EntityIconProps;
   isExternal?: boolean;
   isLoading?: boolean;
   noCopy?: boolean;
@@ -81,28 +79,30 @@ const Link = chakra(({ isLoading, children, isExternal, onClick, href, noLink }:
   );
 });
 
-export interface IconBaseProps extends Pick<EntityBaseProps, 'isLoading' | 'iconSize' | 'noIcon'> {
-  name: IconName;
-  color?: IconProps['color'];
-  borderRadius?: IconProps['borderRadius'];
+interface EntityIconProps extends Pick<IconProps, 'color' | 'borderRadius' | 'marginRight' | 'boxSize'> {
+  name?: IconName;
+  size?: IconSize;
 }
 
-const Icon = ({ isLoading, iconSize, noIcon, name, color, borderRadius }: IconBaseProps) => {
+export interface IconBaseProps extends Pick<EntityBaseProps, 'isLoading' | 'noIcon'>, EntityIconProps {
+}
+
+const Icon = ({ isLoading, noIcon, size, name, color, borderRadius, marginRight, boxSize }: IconBaseProps) => {
   const defaultColor = useColorModeValue('gray.500', 'gray.400');
 
-  if (noIcon) {
+  if (noIcon || !name) {
     return null;
   }
 
-  const styles = getIconProps(iconSize);
+  const styles = getIconProps(size);
   return (
     <IconSvg
       name={ name }
-      boxSize={ styles.boxSize }
+      boxSize={ boxSize ?? styles.boxSize }
       isLoading={ isLoading }
       borderRadius={ borderRadius ?? 'base' }
       display="block"
-      mr={ 2 }
+      mr={ marginRight ?? 2 }
       color={ color ?? defaultColor }
       minW={ 0 }
       flexShrink={ 0 }

ui/shared/entities/base/utils.ts

@@ -1,3 +1,5 @@
+import type { EntityBaseProps } from './components';
+
 export type IconSize = 'md' | 'lg';
 
 export function getIconProps(size: IconSize = 'md') {
@@ -14,3 +16,16 @@ export function getIconProps(size: IconSize = 'md') {
     }
   }
 }
+
+export function distributeEntityProps<Props extends EntityBaseProps>(props: Props) {
+  const { className, onClick, icon, ...restProps } = props;
+
+  return {
+    container: { className },
+    icon: { ...restProps, ...icon },
+    link: { ...restProps, onClick },
+    content: restProps,
+    symbol: restProps,
+    copy: restProps,
+  };
+}