address component showBoth prop

packages/nextjs/app/blockexplorer/_components/AddressComponent.tsx

@@ -19,7 +19,7 @@ export const AddressComponent = ({
           <div className="bg-base-100 border-base-300 border shadow-md shadow-secondary rounded-3xl px-6 lg:px-8 mb-6 space-y-1 py-4 overflow-x-auto">
             <div className="flex">
               <div className="flex flex-col gap-1">
-                <Address address={address} format="long" />
+                <Address address={address} format="long" onlyEnsOrAddress />
                 <div className="flex gap-1 items-center">
                   <span className="font-bold text-sm">Balance:</span>
                   <Balance address={address} className="text" />

packages/nextjs/app/blockexplorer/_components/TransactionsTable.tsx

@@ -44,14 +44,14 @@ export const TransactionsTable = ({ blocks, transactionReceipts }: TransactionsT
                     <td className="w-1/12 md:py-4">{block.number?.toString()}</td>
                     <td className="w-2/1 md:py-4">{timeMined}</td>
                     <td className="w-2/12 md:py-4">
-                      <Address address={tx.from} size="sm" />
+                      <Address address={tx.from} size="sm" onlyEnsOrAddress />
                     </td>
                     <td className="w-2/12 md:py-4">
                       {!receipt?.contractAddress ? (
-                        tx.to && <Address address={tx.to} size="sm" />
+                        tx.to && <Address address={tx.to} size="sm" onlyEnsOrAddress />
                       ) : (
                         <div className="relative">
-                          <Address address={receipt.contractAddress} size="sm" />
+                          <Address address={receipt.contractAddress} size="sm" onlyEnsOrAddress />
                           <small className="absolute top-4 left-4">(Contract Creation)</small>
                         </div>
                       )}

packages/nextjs/app/blockexplorer/transaction/_components/TransactionComp.tsx

@@ -64,7 +64,7 @@ const TransactionComp = ({ txHash }: { txHash: Hash }) => {
                   <strong>From:</strong>
                 </td>
                 <td>
-                  <Address address={transaction.from} format="long" />
+                  <Address address={transaction.from} format="long" onlyEnsOrAddress />
                 </td>
               </tr>
               <tr>
@@ -73,11 +73,11 @@ const TransactionComp = ({ txHash }: { txHash: Hash }) => {
                 </td>
                 <td>
                   {!receipt?.contractAddress ? (
-                    transaction.to && <Address address={transaction.to} format="long" />
+                    transaction.to && <Address address={transaction.to} format="long" onlyEnsOrAddress />
                   ) : (
                     <span>
                       Contract Creation:
-                      <Address address={receipt.contractAddress} format="long" />
+                      <Address address={receipt.contractAddress} format="long" onlyEnsOrAddress />
                     </span>
                   )}
                 </td>

packages/nextjs/app/debug/_components/contract/ContractUI.tsx

@@ -48,7 +48,7 @@ export const ContractUI = ({ contractName, className = "" }: ContractUIProps) =>
             <div className="flex">
               <div className="flex flex-col gap-1">
                 <span className="font-bold">{contractName}</span>
-                <Address address={deployedContractData.address} />
+                <Address address={deployedContractData.address} onlyEnsOrAddress />
                 <div className="flex gap-1 items-center">
                   <span className="font-bold text-sm">Balance:</span>
                   <Balance address={deployedContractData.address} className="px-0 h-1.5 min-h-[0.375rem]" />

packages/nextjs/app/debug/_components/contract/utilsDisplay.tsx

@@ -30,7 +30,7 @@ export const displayTxResult = (
 
   if (typeof displayContent === "string") {
     if (isAddress(displayContent)) {
-      return <Address address={displayContent} size={fontSize} />;
+      return <Address address={displayContent} size={fontSize} onlyEnsOrAddress />;
     }
 
     if (isHex(displayContent)) {

packages/nextjs/components/scaffold-eth/Address/Address.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+import { AddressCopyIcon } from "./AddressCopyIcon";
+import { AddressLinkWrapper } from "./AddressLinkWrapper";
+import { Address as AddressType, getAddress, isAddress } from "viem";
+import { normalize } from "viem/ens";
+import { useEnsAvatar, useEnsName } from "wagmi";
+import { BlockieAvatar } from "~~/components/scaffold-eth";
+import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
+import { getBlockExplorerAddressLink } from "~~/utils/scaffold-eth";
+
+const textSizeMap = {
+  "3xs": "text-[10px]",
+  "2xs": "text-[11px]",
+  xs: "text-xs",
+  sm: "text-sm",
+  base: "text-base",
+  lg: "text-lg",
+  xl: "text-xl",
+  "2xl": "text-2xl",
+  "3xl": "text-3xl",
+  "4xl": "text-4xl",
+} as const;
+
+const blockieSizeMap = {
+  "3xs": 4,
+  "2xs": 5,
+  xs: 6,
+  sm: 7,
+  base: 8,
+  lg: 9,
+  xl: 10,
+  "2xl": 12,
+  "3xl": 15,
+  "4xl": 17,
+  "5xl": 19,
+  "6xl": 21,
+  "7xl": 23,
+} as const;
+
+const copyIconSizeMap = {
+  "3xs": "h-2.5 w-2.5",
+  "2xs": "h-3 w-3",
+  xs: "h-3.5 w-3.5",
+  sm: "h-4 w-4",
+  base: "h-[18px] w-[18px]",
+  lg: "h-5 w-5",
+  xl: "h-[22px] w-[22px]",
+  "2xl": "h-6 w-6",
+  "3xl": "h-[26px] w-[26px]",
+  "4xl": "h-7 w-7",
+} as const;
+
+type SizeMap = typeof textSizeMap | typeof blockieSizeMap;
+
+const getNextSize = <T extends SizeMap>(sizeMap: T, currentSize: keyof T, step = 1): keyof T => {
+  const sizes = Object.keys(sizeMap) as Array<keyof T>;
+  const currentIndex = sizes.indexOf(currentSize);
+  const nextIndex = Math.min(currentIndex + step, sizes.length - 1);
+  return sizes[nextIndex];
+};
+
+const getPrevSize = <T extends SizeMap>(sizeMap: T, currentSize: keyof T, step = 1): keyof T => {
+  const sizes = Object.keys(sizeMap) as Array<keyof T>;
+  const currentIndex = sizes.indexOf(currentSize);
+  const prevIndex = Math.max(currentIndex - step, 0);
+  return sizes[prevIndex];
+};
+
+type AddressProps = {
+  address?: AddressType;
+  disableAddressLink?: boolean;
+  format?: "short" | "long";
+  size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
+  onlyEnsOrAddress?: boolean;
+};
+
+export const Address = ({
+  address,
+  disableAddressLink,
+  format,
+  size = "base",
+  onlyEnsOrAddress = false,
+}: AddressProps) => {
+  const checkSumAddress = address ? getAddress(address) : undefined;
+
+  const { targetNetwork } = useTargetNetwork();
+
+  const { data: ens, isLoading: isEnsNameLoading } = useEnsName({
+    address: checkSumAddress,
+    chainId: 1,
+    query: {
+      enabled: isAddress(checkSumAddress ?? ""),
+    },
+  });
+  const { data: ensAvatar } = useEnsAvatar({
+    name: ens ? normalize(ens) : undefined,
+    chainId: 1,
+    query: {
+      enabled: Boolean(ens),
+      gcTime: 30_000,
+    },
+  });
+
+  if (!checkSumAddress) {
+    return (
+      <div className="animate-pulse flex space-x-4">
+        <div className="rounded-md bg-slate-300 h-6 w-6"></div>
+        <div className="flex items-center space-y-6">
+          <div className="h-2 w-28 bg-slate-300 rounded"></div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!isAddress(checkSumAddress)) {
+    return <span className="text-error">Wrong address</span>;
+  }
+
+  const blockExplorerAddressLink = getBlockExplorerAddressLink(targetNetwork, checkSumAddress);
+  const shortAddress = checkSumAddress?.slice(0, 6) + "..." + checkSumAddress?.slice(-4);
+  const displayAddress = format === "long" ? checkSumAddress : shortAddress;
+  const displayEnsOrAddress = ens || displayAddress;
+
+  const showAddressWithEnsOrEnsSkeleton = !onlyEnsOrAddress && (ens || isEnsNameLoading);
+
+  const addressSize = showAddressWithEnsOrEnsSkeleton ? getPrevSize(textSizeMap, size, 2) : size;
+  const ensSize = getNextSize(textSizeMap, addressSize);
+  const blockieSize = showAddressWithEnsOrEnsSkeleton ? getNextSize(blockieSizeMap, addressSize, 4) : addressSize;
+
+  return (
+    <div className="flex items-center flex-shrink-0">
+      <div className="flex-shrink-0">
+        <BlockieAvatar
+          address={checkSumAddress}
+          ensImage={ensAvatar}
+          size={(blockieSizeMap[blockieSize] * 24) / blockieSizeMap["base"]}
+        />
+      </div>
+      <div className="flex flex-col">
+        {showAddressWithEnsOrEnsSkeleton &&
+          (isEnsNameLoading ? (
+            <div className={`ml-1.5 skeleton rounded-lg font-bold ${textSizeMap[ensSize]}`}>
+              <span className="invisible">{shortAddress}</span>
+            </div>
+          ) : (
+            <span className={`ml-1.5 ${textSizeMap[ensSize]} font-bold`}>
+              <AddressLinkWrapper
+                disableAddressLink={disableAddressLink}
+                blockExplorerAddressLink={blockExplorerAddressLink}
+              >
+                {ens}
+              </AddressLinkWrapper>
+            </span>
+          ))}
+        <div className="flex">
+          <span className={`ml-1.5 ${textSizeMap[addressSize]} font-normal`}>
+            <AddressLinkWrapper
+              disableAddressLink={disableAddressLink}
+              blockExplorerAddressLink={blockExplorerAddressLink}
+            >
+              {onlyEnsOrAddress ? displayEnsOrAddress : displayAddress}
+            </AddressLinkWrapper>
+          </span>
+          <AddressCopyIcon
+            className={`ml-1 text-sky-600 ${copyIconSizeMap[addressSize]} cursor-pointer`}
+            address={checkSumAddress}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};