noLink prop for entities

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

@@ -95,6 +95,19 @@ test('external link', async({ mount }) => {
   await expect(component).toHaveScreenshot();
 });
 
+test('no link', async({ mount }) => {
+  const component = await mount(
+    <TestApp>
+      <AddressEntity
+        address={ addressMock.withoutName }
+        noLink
+      />
+    </TestApp>,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
 test('customization', async({ mount }) => {
   const component = await mount(
     <TestApp>

ui/shared/entities/address/AddressEntity.tsx

@@ -14,9 +14,7 @@ import * as EntityBase from 'ui/shared/entities/base/components';
 
 import { getIconProps } from '../base/utils';
 
-interface LinkProps extends Pick<EntityProps, 'className' | 'address' | 'onClick' | 'isLoading' | 'isExternal' | 'href' | 'query'> {
-  children: React.ReactNode;
-}
+type LinkProps = EntityBase.LinkBaseProps & Pick<EntityProps, 'address'>;
 
 const Link = chakra((props: LinkProps) => {
   const defaultHref = route({ pathname: '/address/[hash]', query: { ...props.query, hash: props.address.hash } });

ui/shared/entities/base/components.tsx

@@ -14,17 +14,17 @@ import { getIconProps, type IconSize } from './utils';
 
 export type Truncation = 'constant' | 'dynamic' | 'tail' | 'none';
 
-// TODO @tom2drum add disabled link props
 export interface EntityBaseProps {
   className?: string;
-  isLoading?: boolean;
+  href?: string;
   iconSize?: IconSize;
-  onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
   isExternal?: boolean;
-  href?: string;
-  query?: Record<string, string>;
-  noIcon?: boolean;
+  isLoading?: boolean;
   noCopy?: boolean;
+  noIcon?: boolean;
+  noLink?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+  query?: Record<string, string>;
   tailLength?: number;
   truncation?: Truncation;
 }
@@ -45,21 +45,29 @@ const Container = chakra(({ className, children }: ContainerBaseProps) => {
   );
 });
 
-export interface LinkBaseProps extends Pick<EntityBaseProps, 'className' | 'onClick' | 'isLoading' | 'isExternal' | 'href'> {
+export interface LinkBaseProps extends Pick<EntityBaseProps, 'className' | 'onClick' | 'isLoading' | 'isExternal' | 'href' | 'noLink' | 'query'> {
   children: React.ReactNode;
 }
 
-const Link = chakra(({ isLoading, children, isExternal, onClick, href }: LinkBaseProps) => {
+const Link = chakra(({ isLoading, children, isExternal, onClick, href, noLink }: LinkBaseProps) => {
+  const styles = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    minWidth: 0, // for content truncation - https://css-tricks.com/flexbox-truncated-text/
+  };
+
+  if (noLink) {
+    return <Skeleton isLoaded={ !isLoading } { ...styles }>{ children }</Skeleton>;
+  }
+
   const Component = isExternal ? LinkExternal : LinkInternal;
 
   return (
     <Component
+      { ...styles }
       href={ href }
       isLoading={ isLoading }
       onClick={ onClick }
-      display="inline-flex"
-      alignItems="center"
-      minWidth={ 0 } // for content truncation - https://css-tricks.com/flexbox-truncated-text/
     >
       { children }
     </Component>

ui/shared/entities/token/TokenEntity.tsx

@@ -13,9 +13,7 @@ import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
 
 import { getIconProps } from '../base/utils';
 
-interface LinkProps extends Pick<EntityProps, 'className' | 'token' | 'onClick' | 'isLoading' | 'isExternal' | 'href' | 'query'> {
-  children: React.ReactNode;
-}
+type LinkProps = EntityBase.LinkBaseProps & Pick<EntityProps, 'token'>;
 
 const Link = chakra((props: LinkProps) => {
   const defaultHref = route({ pathname: '/token/[hash]', query: { ...props.query, hash: props.token.address } });

ui/shared/entities/tx/TxEntity.tsx

@@ -8,9 +8,7 @@ import { route } from 'nextjs-routes';
 import transactionIcon from 'icons/transactions_slim.svg';
 import * as EntityBase from 'ui/shared/entities/base/components';
 
-interface LinkProps extends Pick<EntityProps, 'className' | 'hash' | 'onClick' | 'isLoading' | 'isExternal' | 'href'> {
-  children: React.ReactNode;
-}
+type LinkProps = EntityBase.LinkBaseProps & Pick<EntityProps, 'hash'>;
 
 const Link = chakra((props: LinkProps) => {
   const defaultHref = route({ pathname: '/tx/[hash]', query: { hash: props.hash } });