remove AddressLink

ui/shared/address/AddressIcon.tsx

@@ -12,6 +12,7 @@ type Props = {
   isLoading?: boolean;
 }
 
+// TODO @tom2drum - remove this component
 /**
  * @deprecated use `ui/shared/entities/**` instead
  */

ui/shared/address/AddressLink.tsx

-import { chakra, shouldForwardProp, Tooltip, Box, Skeleton } from '@chakra-ui/react';
-import type { HTMLAttributeAnchorTarget } from 'react';
-import React from 'react';
-
-import { route } from 'nextjs-routes';
-
-import useIsMobile from 'lib/hooks/useIsMobile';
-import HashStringShorten from 'ui/shared/HashStringShorten';
-import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
-import LinkInternal from 'ui/shared/LinkInternal';
-import TruncatedValue from 'ui/shared/TruncatedValue';
-
-type CommonProps = {
-  className?: string;
-  truncation?: 'constant' | 'dynamic'| 'none';
-  target?: HTMLAttributeAnchorTarget;
-  isDisabled?: boolean;
-  fontWeight?: string;
-  alias?: string | null;
-  isLoading?: boolean;
-  onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
-  query?: Record<string, string>;
-  tailLength?: number;
-}
-
-type AddressTokenTxProps = {
-  type: 'token';
-  hash: 'hash';
-}
-
-type AddressTokenProps = {
-  type: 'address_token';
-  hash: string;
-  tokenHash: string;
-}
-
-type Props = CommonProps & (AddressTokenTxProps | AddressTokenProps);
-
-/**
- * @deprecated use `ui/shared/entities/**` instead
- */
-const AddressLink = (props: Props) => {
-  const { alias, type, className, truncation = 'dynamic', hash, fontWeight, target = '_self', isDisabled, isLoading } = props;
-  const isMobile = useIsMobile();
-
-  let url;
-  if (type === 'token') {
-    url = route({ pathname: '/token/[hash]', query: { ...props.query, hash } });
-  } else if (type === 'address_token') {
-    url = route({ pathname: '/address/[hash]', query: { ...props.query, hash, tab: 'token_transfers', token: props.tokenHash, scroll_to_tabs: 'true' } });
-  }
-
-  const content = (() => {
-    if (alias) {
-      const text = <Box overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap">{ alias }</Box>;
-      if (type === 'token' || type === 'address_token') {
-        return <TruncatedValue value={ alias } display="block"/>;
-      }
-      return (
-        <Tooltip label={ hash } isDisabled={ isMobile }>
-          { text }
-        </Tooltip>
-      );
-    }
-    switch (truncation) {
-      case 'constant':
-        return <HashStringShorten hash={ hash } isTooltipDisabled={ isMobile }/>;
-      case 'dynamic':
-        return <HashStringShortenDynamic hash={ hash } fontWeight={ fontWeight } isTooltipDisabled={ isMobile } tailLength={ props.tailLength }/>;
-      case 'none':
-        return <span>{ hash }</span>;
-    }
-  })();
-
-  if (isLoading) {
-    return <Skeleton className={ className } overflow="hidden" whiteSpace="nowrap">{ content }</Skeleton>;
-  }
-
-  if (isDisabled) {
-    return (
-      <chakra.span
-        className={ className }
-        overflow="hidden"
-        whiteSpace="nowrap"
-      >
-        { content }
-      </chakra.span>
-    );
-  }
-
-  return (
-    <LinkInternal
-      className={ className }
-      href={ url }
-      target={ target }
-      overflow="hidden"
-      whiteSpace="nowrap"
-      onClick={ props.onClick }
-    >
-      { content }
-    </LinkInternal>
-  );
-};
-
-const AddressLinkChakra = chakra(AddressLink, {
-  shouldForwardProp: (prop) => {
-    const isChakraProp = !shouldForwardProp(prop);
-
-    // forward fontWeight to the AddressLink since it's needed for underlying HashStringShortenDynamic component
-    if (isChakraProp && prop !== 'fontWeight') {
-      return false;
-    }
-
-    return true;
-  },
-});
-
-export default React.memo(AddressLinkChakra);

ui/shared/entities/token/TokenEntity.tsx

@@ -58,12 +58,13 @@ const Icon = chakra((props: IconProps) => {
   );
 });
 
-type ContentProps = Omit<EntityBase.ContentBaseProps, 'text'> & Pick<EntityProps, 'token' | 'jointSymbol'>;
+type ContentProps = Omit<EntityBase.ContentBaseProps, 'text'> & Pick<EntityProps, 'token' | 'jointSymbol' | 'onlySymbol'>;
 
 const Content = chakra((props: ContentProps) => {
   const nameString = [
-    props.token.name ?? 'Unnamed token',
-    props.token.symbol && props.jointSymbol && `(${ props.token.symbol })`,
+    !props.onlySymbol && (props.token.name ?? 'Unnamed token'),
+    props.onlySymbol && (props.token.symbol ?? ''),
+    props.token.symbol && props.jointSymbol && !props.onlySymbol && `(${ props.token.symbol })`,
   ].filter(Boolean).join(' ');
 
   return (
@@ -82,12 +83,12 @@ const Content = chakra((props: ContentProps) => {
   );
 });
 
-type SymbolProps = Pick<EntityProps, 'token' | 'isLoading' | 'noSymbol' | 'jointSymbol'>;
+type SymbolProps = Pick<EntityProps, 'token' | 'isLoading' | 'noSymbol' | 'jointSymbol' | 'onlySymbol'>;
 
 const Symbol = (props: SymbolProps) => {
   const symbol = props.token.symbol;
 
-  if (!symbol || props.noSymbol || props.jointSymbol) {
+  if (!symbol || props.noSymbol || props.jointSymbol || props.onlySymbol) {
     return null;
   }
 
@@ -134,6 +135,7 @@ export interface EntityProps extends EntityBase.EntityBaseProps {
   token: Pick<TokenInfo, 'address' | 'icon_url' | 'name' | 'symbol'>;
   noSymbol?: boolean;
   jointSymbol?: boolean;
+  onlySymbol?: boolean;
 }
 
 const TokenEntity = (props: EntityProps) => {

ui/tx/state/utils.tsx

@@ -8,8 +8,8 @@ import config from 'configs/app';
 import { ZERO_ADDRESS } from 'lib/consts';
 import { nbsp, space } from 'lib/html-entities';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
-import AddressLink from 'ui/shared/address/AddressLink';
 import Tag from 'ui/shared/chakra/Tag';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import TokenTransferNft from 'ui/shared/TokenTransfer/TokenTransferNft';
 
 import TxStateTokenIdList from './TxStateTokenIdList';
@@ -77,11 +77,13 @@ export function getStateElements(data: TxStateChange, isLoading?: boolean) {
     }
     case 'token': {
       const tokenLink = (
-        <AddressLink
-          type="token"
-          hash={ data.token.address }
-          alias={ data.token?.symbol || data.token.address }
+        <TokenEntity
+          token={ data.token }
           isLoading={ isLoading }
+          noIcon
+          noCopy
+          onlySymbol
+          w="auto"
         />
       );
       const beforeBn = BigNumber(data.balance_before || '0').div(BigNumber(10 ** (Number(data.token.decimals))));
@@ -130,14 +132,14 @@ export function getStateElements(data: TxStateChange, isLoading?: boolean) {
 
       return {
         before: data.balance_before ? (
-          <Flex whiteSpace="pre-wrap" justifyContent={{ base: 'flex-start', lg: 'flex-end' }}>
+          <Flex whiteSpace="pre-wrap" justifyContent={{ base: 'flex-start', lg: 'flex-end' }} flexWrap="wrap">
             <Skeleton isLoaded={ !isLoading }>{ beforeBn.toFormat() }</Skeleton>
             <span>{ space }</span>
             { tokenLink }
           </Flex>
         ) : null,
         after: data.balance_after ? (
-          <Flex whiteSpace="pre-wrap" justifyContent={{ base: 'flex-start', lg: 'flex-end' }}>
+          <Flex whiteSpace="pre-wrap" justifyContent={{ base: 'flex-start', lg: 'flex-end' }} flexWrap="wrap">
             <Skeleton isLoaded={ !isLoading }>{ afterBn.toFormat() }</Skeleton>
             <span>{ space }</span>
             { tokenLink }

ui/verifiedAddresses/VerifiedAddressesListItem.tsx

@@ -7,10 +7,10 @@ import editIcon from 'icons/edit.svg';
 import dayjs from 'lib/date/dayjs';
 import Icon from 'ui/shared/chakra/Icon';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 
 import VerifiedAddressesStatus from './VerifiedAddressesStatus';
-import VerifiedAddressesTokenSnippet from './VerifiedAddressesTokenSnippet';
 
 interface Props {
   item: VerifiedAddress;
@@ -48,9 +48,21 @@ const VerifiedAddressesListItem = ({ item, application, onAdd, onEdit, isLoading
       return <Link onClick={ handleAddClick }>Add details</Link>;
     }
 
+    const token = {
+      icon_url: application.iconUrl,
+      address: application.tokenAddress,
+      name: item.metadata.tokenName,
+      symbol: '',
+    };
+
     return (
       <>
-        <VerifiedAddressesTokenSnippet application={ application } name={ item.metadata.tokenName }/>
+        <TokenEntity
+          token={ token }
+          noLink={ application.status === 'IN_PROCESS' }
+          noCopy
+          noSymbol
+        />
         <Tooltip label="Edit">
           <IconButton
             aria-label="edit"
@@ -80,7 +92,7 @@ const VerifiedAddressesListItem = ({ item, application, onAdd, onEdit, isLoading
       { item.metadata.tokenName && (
         <>
           <ListItemMobileGrid.Label isLoading={ isLoading }>Token Info</ListItemMobileGrid.Label>
-          <ListItemMobileGrid.Value py={ application ? '3px' : '5px' } display="flex" alignItems="center">
+          <ListItemMobileGrid.Value display="flex" alignItems="center">
             { tokenInfo }
           </ListItemMobileGrid.Value>
         </>

ui/verifiedAddresses/VerifiedAddressesTableItem.tsx

@@ -7,9 +7,9 @@ import editIcon from 'icons/edit.svg';
 import dayjs from 'lib/date/dayjs';
 import Icon from 'ui/shared/chakra/Icon';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 
 import VerifiedAddressesStatus from './VerifiedAddressesStatus';
-import VerifiedAddressesTokenSnippet from './VerifiedAddressesTokenSnippet';
 
 interface Props {
   item: VerifiedAddress;
@@ -48,7 +48,21 @@ const VerifiedAddressesTableItem = ({ item, application, onAdd, onEdit, isLoadin
       return <Link onClick={ handleAddClick }>Add details</Link>;
     }
 
-    return <VerifiedAddressesTokenSnippet application={ application } name={ item.metadata.tokenName }/>;
+    const token = {
+      icon_url: application.iconUrl,
+      address: application.tokenAddress,
+      name: item.metadata.tokenName,
+      symbol: '',
+    };
+
+    return (
+      <TokenEntity
+        token={ token }
+        noLink={ application.status === 'IN_PROCESS' }
+        noCopy
+        noSymbol
+      />
+    );
   })();
 
   return (

ui/verifiedAddresses/VerifiedAddressesTokenSnippet.tsx

-import { Image, Flex } from '@chakra-ui/react';
-import React from 'react';
-
-import type { TokenInfoApplication } from 'types/api/account';
-
-import AddressLink from 'ui/shared/address/AddressLink';
-import TokenLogoPlaceholder from 'ui/shared/TokenLogoPlaceholder';
-
-interface Props {
-  application: TokenInfoApplication;
-  name: string;
-}
-
-const VerifiedAddressesTokenSnippet = ({ application, name }: Props) => {
-  return (
-    <Flex alignItems="center" columnGap={ 2 } w="100%">
-      <Image
-        borderRadius="base"
-        boxSize={ 6 }
-        objectFit="cover"
-        src={ application.iconUrl }
-        alt="Token logo"
-        fallback={ <TokenLogoPlaceholder boxSize={ 6 }/> }
-      />
-      <AddressLink
-        hash={ application.tokenAddress }
-        alias={ name }
-        type="token"
-        isDisabled={ application.status === 'IN_PROCESS' }
-        fontWeight={ 500 }
-      />
-    </Flex>
-  );
-};
-
-export default React.memo(VerifiedAddressesTokenSnippet);