fixed address card

ATXDAO · Feb 1, 2024 · 5efd597 · 5efd597
1 parent ba91d65
commit 5efd597
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 12 deletions.
diff --git a/packages/nextjs/app/debug/_components/contract/ContractUI.tsx b/packages/nextjs/app/debug/_components/contract/ContractUI.tsx
@@ -47,7 +47,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 props={{ value: deployedContractData.address }} />
                 <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/components/rep-tokens-demo/MainTokensCardConfig.tsx b/packages/nextjs/components/rep-tokens-demo/MainTokensCardConfig.tsx
@@ -48,7 +48,7 @@ export const addressProps = {
   isRendering: true,
   classes: {
     card: "flex items-center justify-center bg-slate-300",
-    value: "rounded mx-auto text-cyan-800",
+    value: "ml-1.5 text-base font-normal text-cyan-800",
   },
   isPrettyLoading: true,
 } as ValueCardConfigProps;
@@ -77,7 +77,7 @@ export const tokenGroupCardConfigProps = {
     isRendering: true,
     classes: {
       card: "my-5 flex items-center justify-center bg-slate-300",
-      value: "rounded mx-auto text-cyan-800",
+      value: "ml-1.5 text-base font-normal text-cyan-800",
     },
     isPrettyLoading: true,
   } as ValueCardConfigProps,

diff --git a/packages/nextjs/components/scaffold-eth/Address.tsx b/packages/nextjs/components/scaffold-eth/Address.tsx
@@ -33,14 +33,26 @@ const blockieSizeMap = {
 /**
  * Displays an address (or ENS) with a Blockie image and option to copy address.
  */
-export const Address = ({ address, disableAddressLink, format, size = "base", props }: AddressProps) => {
+export const Address = ({ disableAddressLink, format, size = "base", props }: AddressProps) => {
+  if (props) {
+    if (props.classes) {
+      if (!props.classes.value) {
+        props.classes.value = `ml-1.5 text-base font-normal`;
+      }
+    } else {
+      props.classes = {};
+    }
+  } else {
+    props = {};
+  }
+
   const [ens, setEns] = useState<string | null>();
   const [ensAvatar, setEnsAvatar] = useState<string | null>();
   const [addressCopied, setAddressCopied] = useState(false);
 
   const { targetNetwork } = useTargetNetwork();
 
-  const { data: fetchedEns } = useEnsName({ address, enabled: isAddress(address ?? ""), chainId: 1 });
+  const { data: fetchedEns } = useEnsName({ address: props.value, enabled: isAddress(props.value ?? ""), chainId: 1 });
   const { data: fetchedEnsAvatar } = useEnsAvatar({
     name: fetchedEns,
     enabled: Boolean(fetchedEns),
@@ -58,7 +70,7 @@ export const Address = ({ address, disableAddressLink, format, size = "base", pr
   }, [fetchedEnsAvatar]);
 
   // Skeleton UI
-  if (!props?.value) {
+  if (!props.value) {
     return (
       <div className="animate-pulse flex space-x-4">
         <div className="rounded-md bg-slate-300 h-6 w-6"></div>
@@ -69,25 +81,25 @@ export const Address = ({ address, disableAddressLink, format, size = "base", pr
     );
   }
 
-  if (!isAddress(props?.value)) {
+  if (!isAddress(props.value)) {
     return <span className="text-error">Wrong address</span>;
   }
 
-  const blockExplorerAddressLink = getBlockExplorerAddressLink(targetNetwork, props?.value);
-  let displayAddress = props?.value?.slice(0, 5) + "..." + props?.value.slice(-4);
+  const blockExplorerAddressLink = getBlockExplorerAddressLink(targetNetwork, props.value);
+  let displayAddress = props?.value?.slice(0, 5) + "..." + props.value.slice(-4);
 
   if (ens) {
     displayAddress = ens;
   } else if (format === "long") {
-    displayAddress = props?.value;
+    displayAddress = props.value;
   }
 
   return (
     <div className={props?.classes?.card}>
       <div className="flex items-center">
         <div className="flex-shrink-0">
           <BlockieAvatar
-            address={props?.value}
+            address={props.value}
             ensImage={ensAvatar}
             size={(blockieSizeMap[size] * 24) / blockieSizeMap["base"]}
           />
@@ -115,7 +127,7 @@ export const Address = ({ address, disableAddressLink, format, size = "base", pr
           />
         ) : (
           <CopyToClipboard
-            text={props?.value}
+            text={props.value}
             onCopy={() => {
               setAddressCopied(true);
               setTimeout(() => {