Standardize displaying of address and follow ERC-55 (#734)

Co-authored-by: Shiv Bhonde <[email protected]>
scaffold-eth · Feb 20, 2024 · edb6c10 · edb6c10
1 parent 7c34f62
commit edb6c10
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 13 deletions.
diff --git a/packages/nextjs/components/scaffold-eth/Address.tsx b/packages/nextjs/components/scaffold-eth/Address.tsx
@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react";
 import Link from "next/link";
 import { CopyToClipboard } from "react-copy-to-clipboard";
-import { Address as AddressType, isAddress } from "viem";
+import { Address as AddressType, getAddress, isAddress } from "viem";
 import { hardhat } from "viem/chains";
 import { useEnsAvatar, useEnsName } from "wagmi";
 import { CheckCircleIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline";
@@ -35,10 +35,15 @@ export const Address = ({ address, disableAddressLink, format, size = "base" }:
   const [ens, setEns] = useState<string | null>();
   const [ensAvatar, setEnsAvatar] = useState<string | null>();
   const [addressCopied, setAddressCopied] = useState(false);
+  const checkSumAddress = address ? getAddress(address) : undefined;
 
   const { targetNetwork } = useTargetNetwork();
 
-  const { data: fetchedEns } = useEnsName({ address, enabled: isAddress(address ?? ""), chainId: 1 });
+  const { data: fetchedEns } = useEnsName({
+    address: checkSumAddress,
+    enabled: isAddress(checkSumAddress ?? ""),
+    chainId: 1,
+  });
   const { data: fetchedEnsAvatar } = useEnsAvatar({
     name: fetchedEns,
     enabled: Boolean(fetchedEns),
@@ -56,7 +61,7 @@ export const Address = ({ address, disableAddressLink, format, size = "base" }:
   }, [fetchedEnsAvatar]);
 
   // Skeleton UI
-  if (!address) {
+  if (!checkSumAddress) {
     return (
       <div className="animate-pulse flex space-x-4">
         <div className="rounded-md bg-slate-300 h-6 w-6"></div>
@@ -67,24 +72,24 @@ export const Address = ({ address, disableAddressLink, format, size = "base" }:
     );
   }
 
-  if (!isAddress(address)) {
+  if (!isAddress(checkSumAddress)) {
     return <span className="text-error">Wrong address</span>;
   }
 
-  const blockExplorerAddressLink = getBlockExplorerAddressLink(targetNetwork, address);
-  let displayAddress = address?.slice(0, 5) + "..." + address?.slice(-4);
+  const blockExplorerAddressLink = getBlockExplorerAddressLink(targetNetwork, checkSumAddress);
+  let displayAddress = checkSumAddress?.slice(0, 6) + "..." + checkSumAddress?.slice(-4);
 
   if (ens) {
     displayAddress = ens;
   } else if (format === "long") {
-    displayAddress = address;
+    displayAddress = checkSumAddress;
   }
 
   return (
     <div className="flex items-center">
       <div className="flex-shrink-0">
         <BlockieAvatar
-          address={address}
+          address={checkSumAddress}
           ensImage={ensAvatar}
           size={(blockieSizeMap[size] * 24) / blockieSizeMap["base"]}
         />
@@ -112,7 +117,7 @@ export const Address = ({ address, disableAddressLink, format, size = "base" }:
         />
       ) : (
         <CopyToClipboard
-          text={address}
+          text={checkSumAddress}
           onCopy={() => {
             setAddressCopied(true);
             setTimeout(() => {

diff --git a/...ages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx b/...ages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx
@@ -1,6 +1,7 @@
 import { useRef, useState } from "react";
 import { NetworkOptions } from "./NetworkOptions";
 import CopyToClipboard from "react-copy-to-clipboard";
+import { getAddress } from "viem";
 import { Address, useDisconnect } from "wagmi";
 import {
   ArrowLeftOnRectangleIcon,
@@ -11,7 +12,7 @@ import {
   DocumentDuplicateIcon,
   QrCodeIcon,
 } from "@heroicons/react/24/outline";
-import { BlockieAvatar } from "~~/components/scaffold-eth";
+import { BlockieAvatar, isENS } from "~~/components/scaffold-eth";
 import { useOutsideClick } from "~~/hooks/scaffold-eth";
 import { getTargetNetworks } from "~~/utils/scaffold-eth";
 
@@ -31,6 +32,7 @@ export const AddressInfoDropdown = ({
   blockExplorerAddressLink,
 }: AddressInfoDropdownProps) => {
   const { disconnect } = useDisconnect();
+  const checkSumAddress = getAddress(address);
 
   const [addressCopied, setAddressCopied] = useState(false);
 
@@ -46,8 +48,10 @@ export const AddressInfoDropdown = ({
     <>
       <details ref={dropdownRef} className="dropdown dropdown-end leading-3">
         <summary tabIndex={0} className="btn btn-secondary btn-sm pl-0 pr-2 shadow-md dropdown-toggle gap-0 !h-auto">
-          <BlockieAvatar address={address} size={30} ensImage={ensAvatar} />
-          <span className="ml-2 mr-1">{displayName}</span>
+          <BlockieAvatar address={checkSumAddress} size={30} ensImage={ensAvatar} />
+          <span className="ml-2 mr-1">
+            {isENS(displayName) ? displayName : checkSumAddress?.slice(0, 6) + "..." + checkSumAddress?.slice(-4)}
+          </span>
           <ChevronDownIcon className="h-6 w-4 ml-2 sm:ml-0" />
         </summary>
         <ul
@@ -66,7 +70,7 @@ export const AddressInfoDropdown = ({
               </div>
             ) : (
               <CopyToClipboard
-                text={address}
+                text={checkSumAddress}
                 onCopy={() => {
                   setAddressCopied(true);
                   setTimeout(() => {