fix(explorer): show address below alias consistently for validators and known addresses

apps/core/src/components/address-alias/AddressAlias.tsx

@@ -15,7 +15,11 @@ interface AddressAliasProps {
     noTruncate?: boolean;
     truncateUnknown?: boolean;
     onCopy?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    renderAddress?: (addressToDisplay: string, copyButton: React.ReactNode) => React.ReactNode;
+    renderAddress?: (
+        addressToDisplay: string,
+        copyButton: React.ReactNode,
+        hasAlias: boolean,
+    ) => React.ReactNode;
     renderAlias?: (addressAlias: string) => React.ReactNode;
     hideAlias?: boolean;
 }
@@ -37,8 +41,8 @@ export function AddressAlias({
         noTruncate || !truncateUnknown ? address : trimOrFormatAddress(address);
 
     const copyButton = onCopy && (
-        <ButtonUnstyled onClick={onCopy} className="ms-xxs inline-flex h-4 w-4 align-middle">
-            <Copy className="h-full w-full hover:text-opacity-80 transition-colors cursor-pointer text-iota-neutral-60 dark:text-iota-neutral-40" />
+        <ButtonUnstyled onClick={onCopy} className="ms-xxs inline-flex align-middle text-body-md">
+            <Copy className="hover:text-opacity-80 transition-colors cursor-pointer text-iota-neutral-60 dark:text-iota-neutral-40" />
         </ButtonUnstyled>
     );
 
@@ -50,27 +54,31 @@ export function AddressAlias({
             {!hideAlias && addressAlias && (
                 <div
                     className={cx(
-                        'flex items-center gap-xs text-iota-neutral-40 dark:text-iota-neutral-60',
+                        'flex min-w-0 items-center gap-xs text-iota-neutral-40 dark:text-iota-neutral-60',
                     )}
                 >
-                    {addressAlias.imageUrl ? (
-                        <ImageIcon
-                            src={addressAlias.imageUrl}
-                            label={addressAlias.alias}
-                            fallback={addressAlias.alias}
-                            size={ImageIconSize.Small}
-                            rounded
-                        />
-                    ) : (
-                        <IotaLogoMark className="h-full aspect-square shrink-0" />
-                    )}
-                    {renderAlias?.(addressAlias.alias) ?? addressAlias.alias}
+                    <div className="h-5 w-5 shrink-0">
+                        {addressAlias.imageUrl ? (
+                            <ImageIcon
+                                src={addressAlias.imageUrl}
+                                label={addressAlias.alias}
+                                fallback={addressAlias.alias}
+                                size={ImageIconSize.Small}
+                                rounded
+                            />
+                        ) : (
+                            <IotaLogoMark className="h-full w-full" />
+                        )}
+                    </div>
+                    <span className="min-w-0 flex-1 truncate">
+                        {renderAlias?.(addressAlias.alias) ?? addressAlias.alias}
+                    </span>
                 </div>
             )}
 
-            <div className="break-all">
+            <div className={cx('break-all', { 'text-body-sm': !!addressAlias })}>
                 {renderAddress ? (
-                    renderAddress(addressToDisplay, copyButton)
+                    renderAddress(addressToDisplay, copyButton, !!addressAlias)
                 ) : (
                     <>
                         {addressHead}

apps/explorer/src/components/ui/InternalLink.tsx

@@ -9,21 +9,17 @@ import {
     AddressAlias,
     useGetDefaultIotaName,
     useCopyToClipboard,
-    ImageIcon,
-    ImageIconSize,
 } from '@iota/core';
 import { isValidIotaName } from '@iota/iota-names-sdk';
 import { formatAddress, formatDigest, formatType, isValidIotaAddress } from '@iota/iota-sdk/utils';
 import clsx from 'clsx';
 import React, { type ReactNode } from 'react';
 
-import { useValidatorByAddress } from '~/hooks';
 import { Link, type LinkProps } from '~/components/ui';
 
 interface BaseInternalLinkProps extends LinkProps {
     showAddressAlias?: boolean;
     hideAlias?: boolean;
-    showValidatorImage?: boolean;
     noTruncate?: boolean;
     label?: string | ReactNode;
     renderAddressAlias?: (alias: string) => ReactNode;
@@ -32,29 +28,6 @@ interface BaseInternalLinkProps extends LinkProps {
     onCopyError?: (e: unknown, text: string) => void;
 }
 
-function ValidatorIdentityLabel({
-    name,
-    imageUrl,
-}: {
-    name: string;
-    imageUrl?: string | null;
-}): ReactNode {
-    return (
-        <div className="flex items-center gap-x-xs text-iota-neutral-40 dark:text-iota-neutral-60">
-            <div className="h-5 w-5 shrink-0">
-                <ImageIcon
-                    src={imageUrl}
-                    label={name}
-                    fallback={name}
-                    size={ImageIconSize.Small}
-                    rounded
-                />
-            </div>
-            <span className="truncate text-label-lg">{name}</span>
-        </div>
-    );
-}
-
 function createInternalLink<T extends string>(
     base: string,
     propName: T,
@@ -70,7 +43,6 @@ function createInternalLink<T extends string>(
         renderAddressAlias,
         showAddressAlias = ['address', 'object', 'validator'].includes(base),
         hideAlias = false,
-        showValidatorImage = false,
         className,
         ...props
     }: BaseInternalLinkProps & Record<T, string>) => {
@@ -82,9 +54,6 @@ function createInternalLink<T extends string>(
 
         const isResolveIotaName = base === 'address' && isValidIotaAddress(id);
         const { data: iotaName } = useGetDefaultIotaName(isResolveIotaName ? id : null);
-        const validator = useValidatorByAddress(
-            showValidatorImage && base === 'address' ? id : undefined,
-        );
         const copyToClipboard = useCopyToClipboard();
 
         async function handleCopyClick(event: React.MouseEvent<HTMLButtonElement>) {
@@ -97,19 +66,15 @@ function createInternalLink<T extends string>(
             }
         }
 
-        const validatorLabel = validator ? (
-            <ValidatorIdentityLabel name={validator.name} imageUrl={validator.imageUrl} />
-        ) : null;
-
-        if (showAddressAlias && !validatorLabel) {
+        if (showAddressAlias) {
             return (
                 <AddressAlias
                     address={id}
                     onCopy={copyText ? handleCopyClick : undefined}
                     noTruncate={noTruncate}
                     truncateUnknown={!noTruncate}
                     hideAlias={hideAlias}
-                    renderAddress={(address, copyButton) => (
+                    renderAddress={(address, copyButton, hasAlias) => (
                         <NamedAddressTooltip name={iotaName} address={address}>
                             <span className="inline-flex max-w-full items-center whitespace-nowrap">
                                 <Link
@@ -118,10 +83,11 @@ function createInternalLink<T extends string>(
                                         className,
                                     )}
                                     variant="mono"
+                                    size={hasAlias ? 'sm' : undefined}
                                     to={to}
                                     {...props}
                                 >
-                                    {iotaName || label || address}
+                                    {hasAlias ? label || address : iotaName || label || address}
                                 </Link>
                                 {copyButton}
                             </span>
@@ -140,7 +106,7 @@ function createInternalLink<T extends string>(
                     to={to}
                     {...props}
                 >
-                    {validatorLabel || label || truncatedAddress}
+                    {label || truncatedAddress}
                 </Link>
                 {copyText && (
                     <ButtonUnstyled onClick={handleCopyClick} aria-label="Copy to clipboard">

apps/explorer/src/lib/ui/utils/generateActivityTableColumns.tsx

@@ -133,7 +133,6 @@ export function generateActivityTableColumns(
                             address={sender}
                             copyText={sender}
                             className="[&>div]:max-w-[200px] [&>div]:truncate"
-                            showValidatorImage
                         />
                     </TableCellBase>
                 );
@@ -160,7 +159,6 @@ export function generateActivityTableColumns(
                             address={counterparty}
                             copyText={counterparty}
                             className="[&>div]:max-w-[200px] [&>div]:truncate"
-                            showValidatorImage
                         />
                     </TableCellBase>
                 );
@@ -203,7 +201,7 @@ export function generateActivityTableColumns(
                     <TableCellBase>
                         <div className="flex flex-col">
                             <span
-                                className={`text-label-lg ${getBalanceChangeColorClass(isPositive)}`}
+                                className={`text-body-md ${getBalanceChangeColorClass(isPositive)}`}
                             >
                                 {sign + formatted} IOTA
                             </span>

apps/explorer/src/lib/ui/utils/generateTransactionsTableColumns.tsx

@@ -188,7 +188,6 @@ export function generateTransactionsTableColumns(
                             address={address}
                             copyText={address}
                             className="[&>div]:max-w-[200px] [&>div]:truncate"
-                            showValidatorImage
                         />
                     </TableCellBase>
                 );