From 81ef6dbce2493adab9cc87b7d655db95c2ae3183 Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Tue, 3 Sep 2024 18:48:53 +0900
Subject: [PATCH 01/19] WIP: initial hacky version

---
 .../components/scaffold-eth/Address.tsx       | 155 ++++++++++++------
 1 file changed, 104 insertions(+), 51 deletions(-)

diff --git a/packages/nextjs/components/scaffold-eth/Address.tsx b/packages/nextjs/components/scaffold-eth/Address.tsx
index f24b4597a..ce0391a1a 100644
--- a/packages/nextjs/components/scaffold-eth/Address.tsx
+++ b/packages/nextjs/components/scaffold-eth/Address.tsx
@@ -12,11 +12,45 @@ import { BlockieAvatar } from "~~/components/scaffold-eth";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
 import { getBlockExplorerAddressLink } from "~~/utils/scaffold-eth";
 
+const CopyIcon = ({ className, address }: { className?: string; address: string }) => {
+  const [addressCopied, setAddressCopied] = useState(false);
+  return (
+    <CopyToClipboard
+      text={address}
+      onCopy={() => {
+        setAddressCopied(true);
+        setTimeout(() => {
+          setAddressCopied(false);
+        }, 800);
+      }}
+    >
+      <button onClick={e => e.stopPropagation()}>
+        {addressCopied ? (
+          <CheckCircleIcon className={className} aria-hidden="true" />
+        ) : (
+          <DocumentDuplicateIcon className={className} aria-hidden="true" />
+        )}
+      </button>
+    </CopyToClipboard>
+  );
+};
+
 type AddressProps = {
   address?: AddressType;
   disableAddressLink?: boolean;
   format?: "short" | "long";
   size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
+  showBoth?: boolean;
+};
+
+const sizeMap = {
+  xs: 0,
+  sm: 1,
+  base: 2,
+  lg: 3,
+  xl: 4,
+  "2xl": 5,
+  "3xl": 6,
 };
 
 const blockieSizeMap = {
@@ -29,13 +63,32 @@ const blockieSizeMap = {
   "3xl": 15,
 };
 
-/**
- * Displays an address (or ENS) with a Blockie image and option to copy address.
- */
-export const Address = ({ address, disableAddressLink, format, size = "base" }: AddressProps) => {
-  const [ens, setEns] = useState<string | null>();
-  const [ensAvatar, setEnsAvatar] = useState<string | null>();
-  const [addressCopied, setAddressCopied] = useState(false);
+const copyIconSizeMap = {
+  xs: "h-[14px] w-[14px]",
+  sm: "h-[16px] w-[16px]",
+  base: "h-[18px] w-[18px]",
+  lg: "h-[20px] w-[20px]",
+  xl: "h-[22px] w-[22px]",
+  "2xl": "h-[24px] w-[24px]",
+  "3xl": "h-[26px] w-[26px]",
+};
+
+const getCopyIconSize = (currentSize: keyof typeof copyIconSizeMap) => {
+  return copyIconSizeMap[currentSize];
+};
+
+const getNextSize = (currentSize: keyof typeof sizeMap, step = 1): keyof typeof sizeMap => {
+  const sizes = Object.keys(sizeMap) as Array<keyof typeof sizeMap>;
+  const currentIndex = sizes.indexOf(currentSize);
+  const nextIndex = Math.min(currentIndex + step, sizes.length - 1);
+  return sizes[nextIndex];
+};
+
+export const Address = ({ address, disableAddressLink, format, size, showBoth = false }: AddressProps) => {
+  const ens = "austingriffith.eth";
+  const ensAvatar = "/logo.svg";
+  const [_ens, setEns] = useState<string | null>();
+  const [_ensAvatar, setEnsAvatar] = useState<string | null>();
   const checkSumAddress = address ? getAddress(address) : undefined;
 
   const { targetNetwork } = useTargetNetwork();
@@ -56,7 +109,6 @@ export const Address = ({ address, disableAddressLink, format, size = "base" }:
     },
   });
 
-  // We need to apply this pattern to avoid Hydration errors.
   useEffect(() => {
     setEns(fetchedEns);
   }, [fetchedEns]);
@@ -65,7 +117,6 @@ export const Address = ({ address, disableAddressLink, format, size = "base" }:
     setEnsAvatar(fetchedEnsAvatar);
   }, [fetchedEnsAvatar]);
 
-  // Skeleton UI
   if (!checkSumAddress) {
     return (
       <div className="animate-pulse flex space-x-4">
@@ -82,13 +133,27 @@ export const Address = ({ address, disableAddressLink, format, size = "base" }:
   }
 
   const blockExplorerAddressLink = getBlockExplorerAddressLink(targetNetwork, checkSumAddress);
-  let displayAddress = checkSumAddress?.slice(0, 6) + "..." + checkSumAddress?.slice(-4);
+  const shortAddress = checkSumAddress?.slice(0, 6) + "..." + checkSumAddress?.slice(-4);
+  const displayAddress = ens || (format === "long" ? checkSumAddress : shortAddress);
 
-  if (ens) {
-    displayAddress = ens;
-  } else if (format === "long") {
-    displayAddress = checkSumAddress;
-  }
+  size = size ?? (showBoth && ens ? "xs" : "base");
+  const addressSize = size;
+  const blockieSize = showBoth && ens ? getNextSize(size, 4) : size;
+  const ensSize = showBoth && ens ? getNextSize(size) : size;
+
+  const LinkWrapper = ({ children }: { children: React.ReactNode }) => {
+    return disableAddressLink ? (
+      <>{children}</>
+    ) : (
+      <Link
+        href={blockExplorerAddressLink}
+        target={targetNetwork.id === hardhat.id ? undefined : "_blank"}
+        rel={targetNetwork.id === hardhat.id ? undefined : "noopener noreferrer"}
+      >
+        {children}
+      </Link>
+    );
+  };
 
   return (
     <div className="flex items-center flex-shrink-0">
@@ -96,45 +161,33 @@ export const Address = ({ address, disableAddressLink, format, size = "base" }:
         <BlockieAvatar
           address={checkSumAddress}
           ensImage={ensAvatar}
-          size={(blockieSizeMap[size] * 24) / blockieSizeMap["base"]}
+          size={(blockieSizeMap[blockieSize] * 24) / blockieSizeMap["base"]}
         />
       </div>
-      {disableAddressLink ? (
-        <span className={`ml-1.5 text-${size} font-normal`}>{displayAddress}</span>
-      ) : targetNetwork.id === hardhat.id ? (
-        <span className={`ml-1.5 text-${size} font-normal`}>
-          <Link href={blockExplorerAddressLink}>{displayAddress}</Link>
-        </span>
-      ) : (
-        <a
-          className={`ml-1.5 text-${size} font-normal`}
-          target="_blank"
-          href={blockExplorerAddressLink}
-          rel="noopener noreferrer"
-        >
-          {displayAddress}
-        </a>
-      )}
-      {addressCopied ? (
-        <CheckCircleIcon
-          className="ml-1.5 text-xl font-normal text-sky-600 h-5 w-5 cursor-pointer flex-shrink-0"
-          aria-hidden="true"
-        />
+      {showBoth && ens ? (
+        <div className="flex flex-col">
+          <span className={`ml-1.5 text-${ensSize} font-bold`}>
+            <LinkWrapper>{ens}</LinkWrapper>
+          </span>
+          <div className="flex">
+            <span className={`ml-1.5 text-${addressSize} font-normal`}>
+              <LinkWrapper>{shortAddress}</LinkWrapper>
+            </span>
+            <CopyIcon
+              className={`ml-1 text-sky-600 ${getCopyIconSize(size)} ${getCopyIconSize(size)} cursor-pointer`}
+              address={checkSumAddress}
+            />
+          </div>
+        </div>
       ) : (
-        <CopyToClipboard
-          text={checkSumAddress}
-          onCopy={() => {
-            setAddressCopied(true);
-            setTimeout(() => {
-              setAddressCopied(false);
-            }, 800);
-          }}
-        >
-          <DocumentDuplicateIcon
-            className="ml-1.5 text-xl font-normal text-sky-600 h-5 w-5 cursor-pointer flex-shrink-0"
-            aria-hidden="true"
-          />
-        </CopyToClipboard>
+        <>
+          <span className={`ml-1.5 text-${addressSize} font-normal`}>
+            <LinkWrapper>{displayAddress}</LinkWrapper>
+          </span>
+          {!(showBoth && ens) && (
+            <CopyIcon address={checkSumAddress} className="ml-1.5 text-sky-600 h-5 w-5 cursor-pointer" />
+          )}
+        </>
       )}
     </div>
   );

From fb95311b4b75656ed78c68813548d354dfe8f877 Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Wed, 4 Sep 2024 21:55:57 +0530
Subject: [PATCH 02/19] remove constants varible

---
 packages/nextjs/components/scaffold-eth/Address.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/nextjs/components/scaffold-eth/Address.tsx b/packages/nextjs/components/scaffold-eth/Address.tsx
index ce0391a1a..e8a94e226 100644
--- a/packages/nextjs/components/scaffold-eth/Address.tsx
+++ b/packages/nextjs/components/scaffold-eth/Address.tsx
@@ -85,10 +85,8 @@ const getNextSize = (currentSize: keyof typeof sizeMap, step = 1): keyof typeof
 };
 
 export const Address = ({ address, disableAddressLink, format, size, showBoth = false }: AddressProps) => {
-  const ens = "austingriffith.eth";
-  const ensAvatar = "/logo.svg";
-  const [_ens, setEns] = useState<string | null>();
-  const [_ensAvatar, setEnsAvatar] = useState<string | null>();
+  const [ens, setEns] = useState<string | null>();
+  const [ensAvatar, setEnsAvatar] = useState<string | null>();
   const checkSumAddress = address ? getAddress(address) : undefined;
 
   const { targetNetwork } = useTargetNetwork();

From 1310b789582d9e178c5b44a3a0da3a18a587e407 Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Wed, 4 Sep 2024 22:13:49 +0530
Subject: [PATCH 03/19] move address component inside its own dir

---
 .../scaffold-eth/{ => Address}/Address.tsx    | 84 +++++++------------
 .../scaffold-eth/Address/AddressCopyIcon.tsx  | 26 ++++++
 .../Address/AddressLinkWrapper.tsx            | 29 +++++++
 .../nextjs/components/scaffold-eth/index.tsx  |  2 +-
 4 files changed, 86 insertions(+), 55 deletions(-)
 rename packages/nextjs/components/scaffold-eth/{ => Address}/Address.tsx (73%)
 create mode 100644 packages/nextjs/components/scaffold-eth/Address/AddressCopyIcon.tsx
 create mode 100644 packages/nextjs/components/scaffold-eth/Address/AddressLinkWrapper.tsx

diff --git a/packages/nextjs/components/scaffold-eth/Address.tsx b/packages/nextjs/components/scaffold-eth/Address/Address.tsx
similarity index 73%
rename from packages/nextjs/components/scaffold-eth/Address.tsx
rename to packages/nextjs/components/scaffold-eth/Address/Address.tsx
index e8a94e226..22029a2da 100644
--- a/packages/nextjs/components/scaffold-eth/Address.tsx
+++ b/packages/nextjs/components/scaffold-eth/Address/Address.tsx
@@ -1,48 +1,15 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import Link from "next/link";
-import { CopyToClipboard } from "react-copy-to-clipboard";
+import { AddressCopyIcon } from "./AddressCopyIcon";
+import { AddressLinkWrapper } from "./AddressLinkWrapper";
 import { Address as AddressType, getAddress, isAddress } from "viem";
-import { hardhat } from "viem/chains";
 import { normalize } from "viem/ens";
 import { useEnsAvatar, useEnsName } from "wagmi";
-import { CheckCircleIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline";
 import { BlockieAvatar } from "~~/components/scaffold-eth";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
 import { getBlockExplorerAddressLink } from "~~/utils/scaffold-eth";
 
-const CopyIcon = ({ className, address }: { className?: string; address: string }) => {
-  const [addressCopied, setAddressCopied] = useState(false);
-  return (
-    <CopyToClipboard
-      text={address}
-      onCopy={() => {
-        setAddressCopied(true);
-        setTimeout(() => {
-          setAddressCopied(false);
-        }, 800);
-      }}
-    >
-      <button onClick={e => e.stopPropagation()}>
-        {addressCopied ? (
-          <CheckCircleIcon className={className} aria-hidden="true" />
-        ) : (
-          <DocumentDuplicateIcon className={className} aria-hidden="true" />
-        )}
-      </button>
-    </CopyToClipboard>
-  );
-};
-
-type AddressProps = {
-  address?: AddressType;
-  disableAddressLink?: boolean;
-  format?: "short" | "long";
-  size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
-  showBoth?: boolean;
-};
-
 const sizeMap = {
   xs: 0,
   sm: 1,
@@ -84,6 +51,14 @@ const getNextSize = (currentSize: keyof typeof sizeMap, step = 1): keyof typeof
   return sizes[nextIndex];
 };
 
+type AddressProps = {
+  address?: AddressType;
+  disableAddressLink?: boolean;
+  format?: "short" | "long";
+  size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
+  showBoth?: boolean;
+};
+
 export const Address = ({ address, disableAddressLink, format, size, showBoth = false }: AddressProps) => {
   const [ens, setEns] = useState<string | null>();
   const [ensAvatar, setEnsAvatar] = useState<string | null>();
@@ -139,20 +114,6 @@ export const Address = ({ address, disableAddressLink, format, size, showBoth =
   const blockieSize = showBoth && ens ? getNextSize(size, 4) : size;
   const ensSize = showBoth && ens ? getNextSize(size) : size;
 
-  const LinkWrapper = ({ children }: { children: React.ReactNode }) => {
-    return disableAddressLink ? (
-      <>{children}</>
-    ) : (
-      <Link
-        href={blockExplorerAddressLink}
-        target={targetNetwork.id === hardhat.id ? undefined : "_blank"}
-        rel={targetNetwork.id === hardhat.id ? undefined : "noopener noreferrer"}
-      >
-        {children}
-      </Link>
-    );
-  };
-
   return (
     <div className="flex items-center flex-shrink-0">
       <div className="flex-shrink-0">
@@ -165,13 +126,23 @@ export const Address = ({ address, disableAddressLink, format, size, showBoth =
       {showBoth && ens ? (
         <div className="flex flex-col">
           <span className={`ml-1.5 text-${ensSize} font-bold`}>
-            <LinkWrapper>{ens}</LinkWrapper>
+            <AddressLinkWrapper
+              disableAddressLink={disableAddressLink}
+              blockExplorerAddressLink={blockExplorerAddressLink}
+            >
+              {ens}
+            </AddressLinkWrapper>
           </span>
           <div className="flex">
             <span className={`ml-1.5 text-${addressSize} font-normal`}>
-              <LinkWrapper>{shortAddress}</LinkWrapper>
+              <AddressLinkWrapper
+                disableAddressLink={disableAddressLink}
+                blockExplorerAddressLink={blockExplorerAddressLink}
+              >
+                {shortAddress}
+              </AddressLinkWrapper>
             </span>
-            <CopyIcon
+            <AddressCopyIcon
               className={`ml-1 text-sky-600 ${getCopyIconSize(size)} ${getCopyIconSize(size)} cursor-pointer`}
               address={checkSumAddress}
             />
@@ -180,10 +151,15 @@ export const Address = ({ address, disableAddressLink, format, size, showBoth =
       ) : (
         <>
           <span className={`ml-1.5 text-${addressSize} font-normal`}>
-            <LinkWrapper>{displayAddress}</LinkWrapper>
+            <AddressLinkWrapper
+              disableAddressLink={disableAddressLink}
+              blockExplorerAddressLink={blockExplorerAddressLink}
+            >
+              {displayAddress}
+            </AddressLinkWrapper>
           </span>
           {!(showBoth && ens) && (
-            <CopyIcon address={checkSumAddress} className="ml-1.5 text-sky-600 h-5 w-5 cursor-pointer" />
+            <AddressCopyIcon address={checkSumAddress} className="ml-1.5 text-sky-600 h-5 w-5 cursor-pointer" />
           )}
         </>
       )}
diff --git a/packages/nextjs/components/scaffold-eth/Address/AddressCopyIcon.tsx b/packages/nextjs/components/scaffold-eth/Address/AddressCopyIcon.tsx
new file mode 100644
index 000000000..fdac917b9
--- /dev/null
+++ b/packages/nextjs/components/scaffold-eth/Address/AddressCopyIcon.tsx
@@ -0,0 +1,26 @@
+import { useState } from "react";
+import { CopyToClipboard } from "react-copy-to-clipboard";
+import { CheckCircleIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline";
+
+export const AddressCopyIcon = ({ className, address }: { className?: string; address: string }) => {
+  const [addressCopied, setAddressCopied] = useState(false);
+  return (
+    <CopyToClipboard
+      text={address}
+      onCopy={() => {
+        setAddressCopied(true);
+        setTimeout(() => {
+          setAddressCopied(false);
+        }, 800);
+      }}
+    >
+      <button onClick={e => e.stopPropagation()}>
+        {addressCopied ? (
+          <CheckCircleIcon className={className} aria-hidden="true" />
+        ) : (
+          <DocumentDuplicateIcon className={className} aria-hidden="true" />
+        )}
+      </button>
+    </CopyToClipboard>
+  );
+};
diff --git a/packages/nextjs/components/scaffold-eth/Address/AddressLinkWrapper.tsx b/packages/nextjs/components/scaffold-eth/Address/AddressLinkWrapper.tsx
new file mode 100644
index 000000000..50e2ec0bb
--- /dev/null
+++ b/packages/nextjs/components/scaffold-eth/Address/AddressLinkWrapper.tsx
@@ -0,0 +1,29 @@
+import Link from "next/link";
+import { hardhat } from "viem/chains";
+import { useTargetNetwork } from "~~/hooks/scaffold-eth";
+
+type AddressLinkWrapperProps = {
+  children: React.ReactNode;
+  disableAddressLink?: boolean;
+  blockExplorerAddressLink: string;
+};
+
+export const AddressLinkWrapper = ({
+  children,
+  disableAddressLink,
+  blockExplorerAddressLink,
+}: AddressLinkWrapperProps) => {
+  const { targetNetwork } = useTargetNetwork();
+
+  return disableAddressLink ? (
+    <>{children}</>
+  ) : (
+    <Link
+      href={blockExplorerAddressLink}
+      target={targetNetwork.id === hardhat.id ? undefined : "_blank"}
+      rel={targetNetwork.id === hardhat.id ? undefined : "noopener noreferrer"}
+    >
+      {children}
+    </Link>
+  );
+};
diff --git a/packages/nextjs/components/scaffold-eth/index.tsx b/packages/nextjs/components/scaffold-eth/index.tsx
index bf1e8a749..650a0854a 100644
--- a/packages/nextjs/components/scaffold-eth/index.tsx
+++ b/packages/nextjs/components/scaffold-eth/index.tsx
@@ -1,4 +1,4 @@
-export * from "./Address";
+export * from "./Address//Address";
 export * from "./Balance";
 export * from "./BlockieAvatar";
 export * from "./Faucet";

From 5217a38107f3667a2a170400798d25945dd2d44d Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Wed, 4 Sep 2024 22:36:36 +0530
Subject: [PATCH 04/19] remove getCopyIconSize func use map directly

---
 .../components/scaffold-eth/Address/Address.tsx    | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/packages/nextjs/components/scaffold-eth/Address/Address.tsx b/packages/nextjs/components/scaffold-eth/Address/Address.tsx
index 22029a2da..800a9ce22 100644
--- a/packages/nextjs/components/scaffold-eth/Address/Address.tsx
+++ b/packages/nextjs/components/scaffold-eth/Address/Address.tsx
@@ -31,19 +31,15 @@ const blockieSizeMap = {
 };
 
 const copyIconSizeMap = {
-  xs: "h-[14px] w-[14px]",
-  sm: "h-[16px] w-[16px]",
+  xs: "h-3.5 w-3.5",
+  sm: "h-4 w-4",
   base: "h-[18px] w-[18px]",
-  lg: "h-[20px] w-[20px]",
+  lg: "h-5 w-5",
   xl: "h-[22px] w-[22px]",
-  "2xl": "h-[24px] w-[24px]",
+  "2xl": "h-6 w-6",
   "3xl": "h-[26px] w-[26px]",
 };
 
-const getCopyIconSize = (currentSize: keyof typeof copyIconSizeMap) => {
-  return copyIconSizeMap[currentSize];
-};
-
 const getNextSize = (currentSize: keyof typeof sizeMap, step = 1): keyof typeof sizeMap => {
   const sizes = Object.keys(sizeMap) as Array<keyof typeof sizeMap>;
   const currentIndex = sizes.indexOf(currentSize);
@@ -143,7 +139,7 @@ export const Address = ({ address, disableAddressLink, format, size, showBoth =
               </AddressLinkWrapper>
             </span>
             <AddressCopyIcon
-              className={`ml-1 text-sky-600 ${getCopyIconSize(size)} ${getCopyIconSize(size)} cursor-pointer`}
+              className={`ml-1 text-sky-600 ${copyIconSizeMap[size]} cursor-pointer`}
               address={checkSumAddress}
             />
           </div>

From fc306070fe5001aa9c61af5a542e5e88834a6ac2 Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Wed, 4 Sep 2024 22:41:08 +0530
Subject: [PATCH 05/19] use copyIconSizeMap for normal address too

---
 packages/nextjs/components/scaffold-eth/Address/Address.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/nextjs/components/scaffold-eth/Address/Address.tsx b/packages/nextjs/components/scaffold-eth/Address/Address.tsx
index 800a9ce22..8c8f69f97 100644
--- a/packages/nextjs/components/scaffold-eth/Address/Address.tsx
+++ b/packages/nextjs/components/scaffold-eth/Address/Address.tsx
@@ -155,7 +155,10 @@ export const Address = ({ address, disableAddressLink, format, size, showBoth =
             </AddressLinkWrapper>
           </span>
           {!(showBoth && ens) && (
-            <AddressCopyIcon address={checkSumAddress} className="ml-1.5 text-sky-600 h-5 w-5 cursor-pointer" />
+            <AddressCopyIcon
+              address={checkSumAddress}
+              className={`ml-1.5 text-sky-600 ${copyIconSizeMap[size]} cursor-pointer`}
+            />
           )}
         </>
       )}

From 9a5dea9ac0c946a7ffd54207e7745f746fdf3eb3 Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Thu, 5 Sep 2024 12:25:32 +0530
Subject: [PATCH 06/19] remove extra slash from export of Address component

---
 packages/nextjs/components/scaffold-eth/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nextjs/components/scaffold-eth/index.tsx b/packages/nextjs/components/scaffold-eth/index.tsx
index 650a0854a..333cdf74b 100644
--- a/packages/nextjs/components/scaffold-eth/index.tsx
+++ b/packages/nextjs/components/scaffold-eth/index.tsx
@@ -1,4 +1,4 @@
-export * from "./Address//Address";
+export * from "./Address/Address";
 export * from "./Balance";
 export * from "./BlockieAvatar";
 export * from "./Faucet";

From c50ec9f189ebd3fadde828ae00c814831f43512e Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Fri, 6 Sep 2024 22:48:30 +0530
Subject: [PATCH 07/19] remove unreachable condition

---
 .../nextjs/components/scaffold-eth/Address/Address.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/nextjs/components/scaffold-eth/Address/Address.tsx b/packages/nextjs/components/scaffold-eth/Address/Address.tsx
index 8c8f69f97..77975354b 100644
--- a/packages/nextjs/components/scaffold-eth/Address/Address.tsx
+++ b/packages/nextjs/components/scaffold-eth/Address/Address.tsx
@@ -154,12 +154,10 @@ export const Address = ({ address, disableAddressLink, format, size, showBoth =
               {displayAddress}
             </AddressLinkWrapper>
           </span>
-          {!(showBoth && ens) && (
-            <AddressCopyIcon
-              address={checkSumAddress}
-              className={`ml-1.5 text-sky-600 ${copyIconSizeMap[size]} cursor-pointer`}
-            />
-          )}
+          <AddressCopyIcon
+            address={checkSumAddress}
+            className={`ml-1.5 text-sky-600 ${copyIconSizeMap[size]} cursor-pointer`}
+          />
         </>
       )}
     </div>

From b0844a1cf8c5ed766e034dd5be7c1cccfef6d656 Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Fri, 6 Sep 2024 22:56:40 +0530
Subject: [PATCH 08/19] use full text classNames instead of size values

---
 .../scaffold-eth/Address/Address.tsx          | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/nextjs/components/scaffold-eth/Address/Address.tsx b/packages/nextjs/components/scaffold-eth/Address/Address.tsx
index 77975354b..46b32e8a2 100644
--- a/packages/nextjs/components/scaffold-eth/Address/Address.tsx
+++ b/packages/nextjs/components/scaffold-eth/Address/Address.tsx
@@ -10,14 +10,14 @@ import { BlockieAvatar } from "~~/components/scaffold-eth";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
 import { getBlockExplorerAddressLink } from "~~/utils/scaffold-eth";
 
-const sizeMap = {
-  xs: 0,
-  sm: 1,
-  base: 2,
-  lg: 3,
-  xl: 4,
-  "2xl": 5,
-  "3xl": 6,
+const textSizeMap = {
+  xs: "text-xs",
+  sm: "text-sm",
+  base: "text-base",
+  lg: "text-lg",
+  xl: "text-xl",
+  "2xl": "text-2xl",
+  "3xl": "text-3xl",
 };
 
 const blockieSizeMap = {
@@ -40,8 +40,8 @@ const copyIconSizeMap = {
   "3xl": "h-[26px] w-[26px]",
 };
 
-const getNextSize = (currentSize: keyof typeof sizeMap, step = 1): keyof typeof sizeMap => {
-  const sizes = Object.keys(sizeMap) as Array<keyof typeof sizeMap>;
+const getNextSize = (currentSize: keyof typeof textSizeMap, step = 1): keyof typeof textSizeMap => {
+  const sizes = Object.keys(textSizeMap) as Array<keyof typeof textSizeMap>;
   const currentIndex = sizes.indexOf(currentSize);
   const nextIndex = Math.min(currentIndex + step, sizes.length - 1);
   return sizes[nextIndex];
@@ -121,7 +121,7 @@ export const Address = ({ address, disableAddressLink, format, size, showBoth =
       </div>
       {showBoth && ens ? (
         <div className="flex flex-col">
-          <span className={`ml-1.5 text-${ensSize} font-bold`}>
+          <span className={`ml-1.5 ${textSizeMap[ensSize]} font-bold`}>
             <AddressLinkWrapper
               disableAddressLink={disableAddressLink}
               blockExplorerAddressLink={blockExplorerAddressLink}
@@ -130,7 +130,7 @@ export const Address = ({ address, disableAddressLink, format, size, showBoth =
             </AddressLinkWrapper>
           </span>
           <div className="flex">
-            <span className={`ml-1.5 text-${addressSize} font-normal`}>
+            <span className={`ml-1.5 ${textSizeMap[addressSize]} font-normal`}>
               <AddressLinkWrapper
                 disableAddressLink={disableAddressLink}
                 blockExplorerAddressLink={blockExplorerAddressLink}
@@ -146,7 +146,7 @@ export const Address = ({ address, disableAddressLink, format, size, showBoth =
         </div>
       ) : (
         <>
-          <span className={`ml-1.5 text-${addressSize} font-normal`}>
+          <span className={`ml-1.5 ${textSizeMap[addressSize]} font-normal`}>
             <AddressLinkWrapper
               disableAddressLink={disableAddressLink}
               blockExplorerAddressLink={blockExplorerAddressLink}

From 1df372944b8bc2adc2e4fb32460732ab6c9e14cd Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Sat, 7 Sep 2024 18:32:39 +0530
Subject: [PATCH 09/19] increase size after lg when showBoth and ens are true

---
 .../scaffold-eth/Address/Address.tsx          | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/nextjs/components/scaffold-eth/Address/Address.tsx b/packages/nextjs/components/scaffold-eth/Address/Address.tsx
index 46b32e8a2..12d5ee697 100644
--- a/packages/nextjs/components/scaffold-eth/Address/Address.tsx
+++ b/packages/nextjs/components/scaffold-eth/Address/Address.tsx
@@ -18,7 +18,7 @@ const textSizeMap = {
   xl: "text-xl",
   "2xl": "text-2xl",
   "3xl": "text-3xl",
-};
+} as const;
 
 const blockieSizeMap = {
   xs: 6,
@@ -28,7 +28,11 @@ const blockieSizeMap = {
   xl: 10,
   "2xl": 12,
   "3xl": 15,
-};
+  "4xl": 17,
+  "5xl": 19,
+  "6xl": 21,
+  "7xl": 23,
+} as const;
 
 const copyIconSizeMap = {
   xs: "h-3.5 w-3.5",
@@ -38,10 +42,12 @@ const copyIconSizeMap = {
   xl: "h-[22px] w-[22px]",
   "2xl": "h-6 w-6",
   "3xl": "h-[26px] w-[26px]",
-};
+} as const;
+
+type SizeMap = typeof textSizeMap | typeof blockieSizeMap;
 
-const getNextSize = (currentSize: keyof typeof textSizeMap, step = 1): keyof typeof textSizeMap => {
-  const sizes = Object.keys(textSizeMap) as Array<keyof typeof textSizeMap>;
+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];
@@ -107,8 +113,8 @@ export const Address = ({ address, disableAddressLink, format, size, showBoth =
 
   size = size ?? (showBoth && ens ? "xs" : "base");
   const addressSize = size;
-  const blockieSize = showBoth && ens ? getNextSize(size, 4) : size;
-  const ensSize = showBoth && ens ? getNextSize(size) : size;
+  const blockieSize = showBoth && ens ? getNextSize(blockieSizeMap, size, 4) : size;
+  const ensSize = showBoth && ens ? getNextSize(textSizeMap, size) : size;
 
   return (
     <div className="flex items-center flex-shrink-0">

From 9e49276d19e01072bcf8802d7d849e3c03003696 Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Sat, 7 Sep 2024 18:56:54 +0530
Subject: [PATCH 10/19] show loading skeleton when ens is loading and showBoth
 is true

---
 .../scaffold-eth/Address/Address.tsx          | 32 ++++++++++++-------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/packages/nextjs/components/scaffold-eth/Address/Address.tsx b/packages/nextjs/components/scaffold-eth/Address/Address.tsx
index 12d5ee697..9d5cae420 100644
--- a/packages/nextjs/components/scaffold-eth/Address/Address.tsx
+++ b/packages/nextjs/components/scaffold-eth/Address/Address.tsx
@@ -68,7 +68,7 @@ export const Address = ({ address, disableAddressLink, format, size, showBoth =
 
   const { targetNetwork } = useTargetNetwork();
 
-  const { data: fetchedEns } = useEnsName({
+  const { data: fetchedEns, isLoading: isEnsNameLoading } = useEnsName({
     address: checkSumAddress,
     chainId: 1,
     query: {
@@ -113,8 +113,10 @@ export const Address = ({ address, disableAddressLink, format, size, showBoth =
 
   size = size ?? (showBoth && ens ? "xs" : "base");
   const addressSize = size;
-  const blockieSize = showBoth && ens ? getNextSize(blockieSizeMap, size, 4) : size;
-  const ensSize = showBoth && ens ? getNextSize(textSizeMap, size) : size;
+
+  const isShowBothAndEnsOrLoading = showBoth && (ens || isEnsNameLoading);
+  const blockieSize = isShowBothAndEnsOrLoading ? getNextSize(blockieSizeMap, size, 4) : size;
+  const ensSize = isShowBothAndEnsOrLoading ? getNextSize(textSizeMap, size) : size;
 
   return (
     <div className="flex items-center flex-shrink-0">
@@ -125,16 +127,22 @@ export const Address = ({ address, disableAddressLink, format, size, showBoth =
           size={(blockieSizeMap[blockieSize] * 24) / blockieSizeMap["base"]}
         />
       </div>
-      {showBoth && ens ? (
+      {isShowBothAndEnsOrLoading ? (
         <div className="flex flex-col">
-          <span className={`ml-1.5 ${textSizeMap[ensSize]} font-bold`}>
-            <AddressLinkWrapper
-              disableAddressLink={disableAddressLink}
-              blockExplorerAddressLink={blockExplorerAddressLink}
-            >
-              {ens}
-            </AddressLinkWrapper>
-          </span>
+          {isEnsNameLoading ? (
+            <div className={`ml-1.5 skeleton rounded-lg ${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

From 5d55ee74fe6060627e9a995cc77dbc6962a5906e Mon Sep 17 00:00:00 2001
From: Rinat <rinat@hey.com>
Date: Sat, 7 Sep 2024 17:43:30 +0300
Subject: [PATCH 11/19] chore: add 4xl

---
 packages/nextjs/components/scaffold-eth/Address/Address.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nextjs/components/scaffold-eth/Address/Address.tsx b/packages/nextjs/components/scaffold-eth/Address/Address.tsx
index 9d5cae420..73b772a2f 100644
--- a/packages/nextjs/components/scaffold-eth/Address/Address.tsx
+++ b/packages/nextjs/components/scaffold-eth/Address/Address.tsx
@@ -18,6 +18,7 @@ const textSizeMap = {
   xl: "text-xl",
   "2xl": "text-2xl",
   "3xl": "text-3xl",
+  "4xl": "text-4xl",
 } as const;
 
 const blockieSizeMap = {

From becf129031de75038cacea5219e6d6b60bdba987 Mon Sep 17 00:00:00 2001
From: Rinat <rinat@hey.com>
Date: Sat, 7 Sep 2024 18:19:22 +0300
Subject: [PATCH 12/19] feat: possibility to use long format with showBoth

---
 .../scaffold-eth/Address/Address.tsx          | 41 ++++++-------------
 1 file changed, 13 insertions(+), 28 deletions(-)

diff --git a/packages/nextjs/components/scaffold-eth/Address/Address.tsx b/packages/nextjs/components/scaffold-eth/Address/Address.tsx
index 73b772a2f..806dc3fdc 100644
--- a/packages/nextjs/components/scaffold-eth/Address/Address.tsx
+++ b/packages/nextjs/components/scaffold-eth/Address/Address.tsx
@@ -110,7 +110,8 @@ export const Address = ({ address, disableAddressLink, format, size, showBoth =
 
   const blockExplorerAddressLink = getBlockExplorerAddressLink(targetNetwork, checkSumAddress);
   const shortAddress = checkSumAddress?.slice(0, 6) + "..." + checkSumAddress?.slice(-4);
-  const displayAddress = ens || (format === "long" ? checkSumAddress : shortAddress);
+  const displayAddress = format === "long" ? checkSumAddress : shortAddress;
+  const displayEnsOrAddress = ens || displayAddress;
 
   size = size ?? (showBoth && ens ? "xs" : "base");
   const addressSize = size;
@@ -128,10 +129,10 @@ export const Address = ({ address, disableAddressLink, format, size, showBoth =
           size={(blockieSizeMap[blockieSize] * 24) / blockieSizeMap["base"]}
         />
       </div>
-      {isShowBothAndEnsOrLoading ? (
-        <div className="flex flex-col">
-          {isEnsNameLoading ? (
-            <div className={`ml-1.5 skeleton rounded-lg ${textSizeMap[ensSize]}`}>
+      <div className="flex flex-col">
+        {isShowBothAndEnsOrLoading &&
+          (isEnsNameLoading ? (
+            <div className={`ml-1.5 skeleton rounded-lg font-bold self-start ${textSizeMap[ensSize]}`}>
               <span className="invisible">{shortAddress}</span>
             </div>
           ) : (
@@ -140,41 +141,25 @@ export const Address = ({ address, disableAddressLink, format, size, showBoth =
                 disableAddressLink={disableAddressLink}
                 blockExplorerAddressLink={blockExplorerAddressLink}
               >
-                {ens}
+                {isEnsNameLoading ? shortAddress : ens}
               </AddressLinkWrapper>
             </span>
-          )}
-          <div className="flex">
-            <span className={`ml-1.5 ${textSizeMap[addressSize]} font-normal`}>
-              <AddressLinkWrapper
-                disableAddressLink={disableAddressLink}
-                blockExplorerAddressLink={blockExplorerAddressLink}
-              >
-                {shortAddress}
-              </AddressLinkWrapper>
-            </span>
-            <AddressCopyIcon
-              className={`ml-1 text-sky-600 ${copyIconSizeMap[size]} cursor-pointer`}
-              address={checkSumAddress}
-            />
-          </div>
-        </div>
-      ) : (
-        <>
+          ))}
+        <div className="flex">
           <span className={`ml-1.5 ${textSizeMap[addressSize]} font-normal`}>
             <AddressLinkWrapper
               disableAddressLink={disableAddressLink}
               blockExplorerAddressLink={blockExplorerAddressLink}
             >
-              {displayAddress}
+              {showBoth ? displayAddress : displayEnsOrAddress}
             </AddressLinkWrapper>
           </span>
           <AddressCopyIcon
+            className={`ml-1 text-sky-600 ${copyIconSizeMap[size]} cursor-pointer`}
             address={checkSumAddress}
-            className={`ml-1.5 text-sky-600 ${copyIconSizeMap[size]} cursor-pointer`}
           />
-        </>
-      )}
+        </div>
+      </div>
     </div>
   );
 };

From f2df90f5b7ab4dec8701f59f5ef199b1e7a255ce Mon Sep 17 00:00:00 2001
From: Rinat <rinat@hey.com>
Date: Sat, 7 Sep 2024 18:22:13 +0300
Subject: [PATCH 13/19] fix: remove useEffects and small jump

---
 .../scaffold-eth/Address/Address.tsx          | 19 ++++---------------
 1 file changed, 4 insertions(+), 15 deletions(-)

diff --git a/packages/nextjs/components/scaffold-eth/Address/Address.tsx b/packages/nextjs/components/scaffold-eth/Address/Address.tsx
index 806dc3fdc..2135e1d3b 100644
--- a/packages/nextjs/components/scaffold-eth/Address/Address.tsx
+++ b/packages/nextjs/components/scaffold-eth/Address/Address.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { useEffect, useState } from "react";
 import { AddressCopyIcon } from "./AddressCopyIcon";
 import { AddressLinkWrapper } from "./AddressLinkWrapper";
 import { Address as AddressType, getAddress, isAddress } from "viem";
@@ -63,36 +62,26 @@ type AddressProps = {
 };
 
 export const Address = ({ address, disableAddressLink, format, size, showBoth = false }: AddressProps) => {
-  const [ens, setEns] = useState<string | null>();
-  const [ensAvatar, setEnsAvatar] = useState<string | null>();
   const checkSumAddress = address ? getAddress(address) : undefined;
 
   const { targetNetwork } = useTargetNetwork();
 
-  const { data: fetchedEns, isLoading: isEnsNameLoading } = useEnsName({
+  const { data: ens, isLoading: isEnsNameLoading } = useEnsName({
     address: checkSumAddress,
     chainId: 1,
     query: {
       enabled: isAddress(checkSumAddress ?? ""),
     },
   });
-  const { data: fetchedEnsAvatar } = useEnsAvatar({
-    name: fetchedEns ? normalize(fetchedEns) : undefined,
+  const { data: ensAvatar } = useEnsAvatar({
+    name: ens ? normalize(ens) : undefined,
     chainId: 1,
     query: {
-      enabled: Boolean(fetchedEns),
+      enabled: Boolean(ens),
       gcTime: 30_000,
     },
   });
 
-  useEffect(() => {
-    setEns(fetchedEns);
-  }, [fetchedEns]);
-
-  useEffect(() => {
-    setEnsAvatar(fetchedEnsAvatar);
-  }, [fetchedEnsAvatar]);
-
   if (!checkSumAddress) {
     return (
       <div className="animate-pulse flex space-x-4">

From eb91c3e9ea90aa17d768bca000b8088dabe12e62 Mon Sep 17 00:00:00 2001
From: Rinat <rinat@hey.com>
Date: Sat, 7 Sep 2024 18:32:16 +0300
Subject: [PATCH 14/19] fix: revert to ens

---
 packages/nextjs/components/scaffold-eth/Address/Address.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nextjs/components/scaffold-eth/Address/Address.tsx b/packages/nextjs/components/scaffold-eth/Address/Address.tsx
index 2135e1d3b..5d92b2b64 100644
--- a/packages/nextjs/components/scaffold-eth/Address/Address.tsx
+++ b/packages/nextjs/components/scaffold-eth/Address/Address.tsx
@@ -121,7 +121,7 @@ export const Address = ({ address, disableAddressLink, format, size, showBoth =
       <div className="flex flex-col">
         {isShowBothAndEnsOrLoading &&
           (isEnsNameLoading ? (
-            <div className={`ml-1.5 skeleton rounded-lg font-bold self-start ${textSizeMap[ensSize]}`}>
+            <div className={`ml-1.5 skeleton rounded-lg font-bold ${textSizeMap[ensSize]}`}>
               <span className="invisible">{shortAddress}</span>
             </div>
           ) : (
@@ -130,7 +130,7 @@ export const Address = ({ address, disableAddressLink, format, size, showBoth =
                 disableAddressLink={disableAddressLink}
                 blockExplorerAddressLink={blockExplorerAddressLink}
               >
-                {isEnsNameLoading ? shortAddress : ens}
+                {ens}
               </AddressLinkWrapper>
             </span>
           ))}

From 7293ec4ac0d53e81b85133cab0244f3acda78717 Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Fri, 13 Sep 2024 14:05:01 +0530
Subject: [PATCH 15/19] remove showBoth prop and instead use onlyEnsOrAddress

---
 .../_components/AddressComponent.tsx             |  2 +-
 .../_components/TransactionsTable.tsx            |  6 +++---
 .../transaction/_components/TransactionComp.tsx  |  6 +++---
 .../debug/_components/contract/ContractUI.tsx    |  2 +-
 .../debug/_components/contract/utilsDisplay.tsx  |  2 +-
 .../components/scaffold-eth/Address/Address.tsx  | 16 ++++++++--------
 .../nextjs/components/scaffold-eth/Faucet.tsx    |  2 +-
 .../AddressQRCodeModal.tsx                       |  2 +-
 8 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages/nextjs/app/blockexplorer/_components/AddressComponent.tsx b/packages/nextjs/app/blockexplorer/_components/AddressComponent.tsx
index c0c14d60e..2c42eea97 100644
--- a/packages/nextjs/app/blockexplorer/_components/AddressComponent.tsx
+++ b/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" />
diff --git a/packages/nextjs/app/blockexplorer/_components/TransactionsTable.tsx b/packages/nextjs/app/blockexplorer/_components/TransactionsTable.tsx
index b91892cb8..118d912d6 100644
--- a/packages/nextjs/app/blockexplorer/_components/TransactionsTable.tsx
+++ b/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>
                       )}
diff --git a/packages/nextjs/app/blockexplorer/transaction/_components/TransactionComp.tsx b/packages/nextjs/app/blockexplorer/transaction/_components/TransactionComp.tsx
index 848f2e99f..ed9b7ee78 100644
--- a/packages/nextjs/app/blockexplorer/transaction/_components/TransactionComp.tsx
+++ b/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>
diff --git a/packages/nextjs/app/debug/_components/contract/ContractUI.tsx b/packages/nextjs/app/debug/_components/contract/ContractUI.tsx
index 31fcc7faa..8fcec9d38 100644
--- a/packages/nextjs/app/debug/_components/contract/ContractUI.tsx
+++ b/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]" />
diff --git a/packages/nextjs/app/debug/_components/contract/utilsDisplay.tsx b/packages/nextjs/app/debug/_components/contract/utilsDisplay.tsx
index 3148affdf..4c5ab2007 100644
--- a/packages/nextjs/app/debug/_components/contract/utilsDisplay.tsx
+++ b/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)) {
diff --git a/packages/nextjs/components/scaffold-eth/Address/Address.tsx b/packages/nextjs/components/scaffold-eth/Address/Address.tsx
index 5d92b2b64..e678df733 100644
--- a/packages/nextjs/components/scaffold-eth/Address/Address.tsx
+++ b/packages/nextjs/components/scaffold-eth/Address/Address.tsx
@@ -58,10 +58,10 @@ type AddressProps = {
   disableAddressLink?: boolean;
   format?: "short" | "long";
   size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
-  showBoth?: boolean;
+  onlyEnsOrAddress?: boolean;
 };
 
-export const Address = ({ address, disableAddressLink, format, size, showBoth = false }: AddressProps) => {
+export const Address = ({ address, disableAddressLink, format, size, onlyEnsOrAddress = false }: AddressProps) => {
   const checkSumAddress = address ? getAddress(address) : undefined;
 
   const { targetNetwork } = useTargetNetwork();
@@ -102,12 +102,12 @@ export const Address = ({ address, disableAddressLink, format, size, showBoth =
   const displayAddress = format === "long" ? checkSumAddress : shortAddress;
   const displayEnsOrAddress = ens || displayAddress;
 
-  size = size ?? (showBoth && ens ? "xs" : "base");
+  size = size ?? (onlyEnsOrAddress || !ens ? "base" : "xs");
   const addressSize = size;
 
-  const isShowBothAndEnsOrLoading = showBoth && (ens || isEnsNameLoading);
-  const blockieSize = isShowBothAndEnsOrLoading ? getNextSize(blockieSizeMap, size, 4) : size;
-  const ensSize = isShowBothAndEnsOrLoading ? getNextSize(textSizeMap, size) : size;
+  const shouldTryEnsWithAddress = !onlyEnsOrAddress && (ens || isEnsNameLoading);
+  const blockieSize = shouldTryEnsWithAddress ? getNextSize(blockieSizeMap, size, 4) : size;
+  const ensSize = shouldTryEnsWithAddress ? getNextSize(textSizeMap, size) : size;
 
   return (
     <div className="flex items-center flex-shrink-0">
@@ -119,7 +119,7 @@ export const Address = ({ address, disableAddressLink, format, size, showBoth =
         />
       </div>
       <div className="flex flex-col">
-        {isShowBothAndEnsOrLoading &&
+        {shouldTryEnsWithAddress &&
           (isEnsNameLoading ? (
             <div className={`ml-1.5 skeleton rounded-lg font-bold ${textSizeMap[ensSize]}`}>
               <span className="invisible">{shortAddress}</span>
@@ -140,7 +140,7 @@ export const Address = ({ address, disableAddressLink, format, size, showBoth =
               disableAddressLink={disableAddressLink}
               blockExplorerAddressLink={blockExplorerAddressLink}
             >
-              {showBoth ? displayAddress : displayEnsOrAddress}
+              {onlyEnsOrAddress ? displayEnsOrAddress : displayAddress}
             </AddressLinkWrapper>
           </span>
           <AddressCopyIcon
diff --git a/packages/nextjs/components/scaffold-eth/Faucet.tsx b/packages/nextjs/components/scaffold-eth/Faucet.tsx
index a55e7fb1f..569a923f1 100644
--- a/packages/nextjs/components/scaffold-eth/Faucet.tsx
+++ b/packages/nextjs/components/scaffold-eth/Faucet.tsx
@@ -98,7 +98,7 @@ export const Faucet = () => {
             <div className="flex space-x-4">
               <div>
                 <span className="text-sm font-bold">From:</span>
-                <Address address={faucetAddress} />
+                <Address address={faucetAddress} onlyEnsOrAddress />
               </div>
               <div>
                 <span className="text-sm font-bold pl-3">Available:</span>
diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressQRCodeModal.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressQRCodeModal.tsx
index b5bb2efb8..a46356b10 100644
--- a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressQRCodeModal.tsx
+++ b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressQRCodeModal.tsx
@@ -22,7 +22,7 @@ export const AddressQRCodeModal = ({ address, modalId }: AddressQRCodeModalProps
             <div className="space-y-3 py-6">
               <div className="flex flex-col items-center gap-6">
                 <QRCodeSVG value={address} size={256} />
-                <Address address={address} format="long" disableAddressLink />
+                <Address address={address} format="long" disableAddressLink onlyEnsOrAddress />
               </div>
             </div>
           </label>

From 8df4dbcedea25c8317433e33542e502e6557ee8f Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Fri, 13 Sep 2024 14:43:27 +0530
Subject: [PATCH 16/19] update size to fallback to onlyEnsOrAddress if there is
 no ens

---
 packages/nextjs/components/scaffold-eth/Address/Address.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nextjs/components/scaffold-eth/Address/Address.tsx b/packages/nextjs/components/scaffold-eth/Address/Address.tsx
index e678df733..21270d0d5 100644
--- a/packages/nextjs/components/scaffold-eth/Address/Address.tsx
+++ b/packages/nextjs/components/scaffold-eth/Address/Address.tsx
@@ -102,7 +102,7 @@ export const Address = ({ address, disableAddressLink, format, size, onlyEnsOrAd
   const displayAddress = format === "long" ? checkSumAddress : shortAddress;
   const displayEnsOrAddress = ens || displayAddress;
 
-  size = size ?? (onlyEnsOrAddress || !ens ? "base" : "xs");
+  size = size ?? (onlyEnsOrAddress || (!ens && !isEnsNameLoading) ? "base" : "xs");
   const addressSize = size;
 
   const shouldTryEnsWithAddress = !onlyEnsOrAddress && (ens || isEnsNameLoading);

From 16e06d4760882041df9f46f25d755f97c4b0e9e1 Mon Sep 17 00:00:00 2001
From: Rinat <rinat@hey.com>
Date: Tue, 17 Sep 2024 23:23:19 +0300
Subject: [PATCH 17/19] fix: font size on loading

---
 .../scaffold-eth/Address/Address.tsx          | 35 ++++++++++++++-----
 1 file changed, 27 insertions(+), 8 deletions(-)

diff --git a/packages/nextjs/components/scaffold-eth/Address/Address.tsx b/packages/nextjs/components/scaffold-eth/Address/Address.tsx
index 21270d0d5..7d1a7aa08 100644
--- a/packages/nextjs/components/scaffold-eth/Address/Address.tsx
+++ b/packages/nextjs/components/scaffold-eth/Address/Address.tsx
@@ -10,6 +10,8 @@ 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",
@@ -21,6 +23,8 @@ const textSizeMap = {
 } as const;
 
 const blockieSizeMap = {
+  "3xs": 4,
+  "2xs": 5,
   xs: 6,
   sm: 7,
   base: 8,
@@ -35,6 +39,8 @@ const blockieSizeMap = {
 } 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]",
@@ -42,6 +48,7 @@ const copyIconSizeMap = {
   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;
@@ -53,6 +60,13 @@ const getNextSize = <T extends SizeMap>(sizeMap: T, currentSize: keyof T, step =
   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;
@@ -61,7 +75,13 @@ type AddressProps = {
   onlyEnsOrAddress?: boolean;
 };
 
-export const Address = ({ address, disableAddressLink, format, size, onlyEnsOrAddress = false }: AddressProps) => {
+export const Address = ({
+  address,
+  disableAddressLink,
+  format,
+  size = "base",
+  onlyEnsOrAddress = false,
+}: AddressProps) => {
   const checkSumAddress = address ? getAddress(address) : undefined;
 
   const { targetNetwork } = useTargetNetwork();
@@ -102,12 +122,11 @@ export const Address = ({ address, disableAddressLink, format, size, onlyEnsOrAd
   const displayAddress = format === "long" ? checkSumAddress : shortAddress;
   const displayEnsOrAddress = ens || displayAddress;
 
-  size = size ?? (onlyEnsOrAddress || (!ens && !isEnsNameLoading) ? "base" : "xs");
-  const addressSize = size;
+  const showAddressWithEnsOrEnsSkeleton = !onlyEnsOrAddress && (ens || isEnsNameLoading);
 
-  const shouldTryEnsWithAddress = !onlyEnsOrAddress && (ens || isEnsNameLoading);
-  const blockieSize = shouldTryEnsWithAddress ? getNextSize(blockieSizeMap, size, 4) : size;
-  const ensSize = shouldTryEnsWithAddress ? getNextSize(textSizeMap, size) : size;
+  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">
@@ -119,7 +138,7 @@ export const Address = ({ address, disableAddressLink, format, size, onlyEnsOrAd
         />
       </div>
       <div className="flex flex-col">
-        {shouldTryEnsWithAddress &&
+        {showAddressWithEnsOrEnsSkeleton &&
           (isEnsNameLoading ? (
             <div className={`ml-1.5 skeleton rounded-lg font-bold ${textSizeMap[ensSize]}`}>
               <span className="invisible">{shortAddress}</span>
@@ -144,7 +163,7 @@ export const Address = ({ address, disableAddressLink, format, size, onlyEnsOrAd
             </AddressLinkWrapper>
           </span>
           <AddressCopyIcon
-            className={`ml-1 text-sky-600 ${copyIconSizeMap[size]} cursor-pointer`}
+            className={`ml-1 text-sky-600 ${copyIconSizeMap[addressSize]} cursor-pointer`}
             address={checkSumAddress}
           />
         </div>

From dd45f543dd74b0f54d61935f5d6341cd934c7733 Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Wed, 18 Sep 2024 12:03:32 +0800
Subject: [PATCH 18/19] update to loading state to match new default

---
 .../scaffold-eth/Address/Address.tsx          | 42 ++++++++++++-------
 1 file changed, 28 insertions(+), 14 deletions(-)

diff --git a/packages/nextjs/components/scaffold-eth/Address/Address.tsx b/packages/nextjs/components/scaffold-eth/Address/Address.tsx
index 7d1a7aa08..f53bc7daa 100644
--- a/packages/nextjs/components/scaffold-eth/Address/Address.tsx
+++ b/packages/nextjs/components/scaffold-eth/Address/Address.tsx
@@ -102,12 +102,35 @@ export const Address = ({
     },
   });
 
+  const shortAddress = checkSumAddress?.slice(0, 6) + "..." + checkSumAddress?.slice(-4);
+  const displayAddress = format === "long" ? checkSumAddress : shortAddress;
+  const displayEnsOrAddress = ens || displayAddress;
+
+  const showSkeleton = !checkSumAddress || (!onlyEnsOrAddress && (ens || isEnsNameLoading));
+
+  const addressSize = showSkeleton ? getPrevSize(textSizeMap, size, 2) : size;
+  const ensSize = getNextSize(textSizeMap, addressSize);
+  const blockieSize = showSkeleton ? getNextSize(blockieSizeMap, addressSize, 4) : addressSize;
+
   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 className="flex items-center">
+        <div
+          className="flex-shrink-0 skeleton rounded-full"
+          style={{
+            width: (blockieSizeMap[blockieSize] * 24) / blockieSizeMap["base"],
+            height: (blockieSizeMap[blockieSize] * 24) / blockieSizeMap["base"],
+          }}
+        ></div>
+        <div className="flex flex-col space-y-1">
+          {!onlyEnsOrAddress && (
+            <div className={`ml-1.5 skeleton rounded-lg font-bold ${textSizeMap[ensSize]}`}>
+              <span className="invisible">0x1234...56789</span>
+            </div>
+          )}
+          <div className={`ml-1.5 skeleton rounded-lg ${textSizeMap[addressSize]}`}>
+            <span className="invisible">0x1234...56789</span>
+          </div>
         </div>
       </div>
     );
@@ -118,15 +141,6 @@ export const Address = ({
   }
 
   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">
@@ -138,7 +152,7 @@ export const Address = ({
         />
       </div>
       <div className="flex flex-col">
-        {showAddressWithEnsOrEnsSkeleton &&
+        {showSkeleton &&
           (isEnsNameLoading ? (
             <div className={`ml-1.5 skeleton rounded-lg font-bold ${textSizeMap[ensSize]}`}>
               <span className="invisible">{shortAddress}</span>

From da2bdb880d895a41c285c8a61a6bf4853a436fa0 Mon Sep 17 00:00:00 2001
From: Rinat <rinat@hey.com>
Date: Wed, 18 Sep 2024 13:56:03 +0300
Subject: [PATCH 19/19] fix: skeleton

---
 packages/nextjs/components/scaffold-eth/Address/Address.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nextjs/components/scaffold-eth/Address/Address.tsx b/packages/nextjs/components/scaffold-eth/Address/Address.tsx
index f53bc7daa..28011d51b 100644
--- a/packages/nextjs/components/scaffold-eth/Address/Address.tsx
+++ b/packages/nextjs/components/scaffold-eth/Address/Address.tsx
@@ -108,9 +108,9 @@ export const Address = ({
 
   const showSkeleton = !checkSumAddress || (!onlyEnsOrAddress && (ens || isEnsNameLoading));
 
-  const addressSize = showSkeleton ? getPrevSize(textSizeMap, size, 2) : size;
+  const addressSize = showSkeleton && !onlyEnsOrAddress ? getPrevSize(textSizeMap, size, 2) : size;
   const ensSize = getNextSize(textSizeMap, addressSize);
-  const blockieSize = showSkeleton ? getNextSize(blockieSizeMap, addressSize, 4) : addressSize;
+  const blockieSize = showSkeleton && !onlyEnsOrAddress ? getNextSize(blockieSizeMap, addressSize, 4) : addressSize;
 
   if (!checkSumAddress) {
     return (