placed the constants outside of the component and also addressed other comments

Author: Mrwicks00

packages/nextjs/app/builders/0xB24023434c3670E100068C925A87fE8F500d909a/page.tsx

@@ -1,29 +1,28 @@
-"use client";
-
 import Image from "next/image";
 import Link from "next/link";
-import { AddressCopyIcon } from "../../../components/scaffold-eth/Address/AddressCopyIcon";
+import { Address } from "../../../components/scaffold-eth/Address/Address";
 import type { NextPage } from "next";
 import { CodeBracketIcon, UserCircleIcon } from "@heroicons/react/24/outline";
 
-const MRWICKSProfile: NextPage = () => {
-  const walletAddress = "0xB24023434c3670E100068C925A87fE8F500d909a";
+const walletAddress = "0xB24023434c3670E100068C925A87fE8F500d909a";
 
-  const socialLinks = [
-    { href: "https://x.com/mrrwiicks", label: "X", icon: CodeBracketIcon },
-    { href: "https://github.com/mrwicks00", label: "GitHub", icon: CodeBracketIcon },
-    { href: "https://discord.com/users/987567935503597578", label: "Discord", icon: UserCircleIcon },
-  ];
+const socialLinks = [
+  { href: "https://x.com/mrrwiicks", label: "X", icon: CodeBracketIcon },
+  { href: "https://github.com/mrwicks00", label: "GitHub", icon: CodeBracketIcon },
+  { href: "https://discord.com/users/987567935503597578", label: "Discord", icon: UserCircleIcon },
+];
 
+const MRWICKSProfile: NextPage = () => {
   return (
     <div className="min-h-screen bg-base-100 px-4 pt-16 pb-12">
       <div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">
         <div className="flex flex-col items-center md:items-start">
-          <div className="relative w-48 h-48 mb-6 transform transition-transform hover:scale-105">
+          <div className="relative w-48 h-48 mb-6">
             <Image
               src="/596.avif"
               alt="MRWICKS Avatar"
-              fill
+              width={192}
+              height={192}
               className="rounded-full object-cover border-4 border-primary shadow-center"
               priority
             />
@@ -44,9 +43,14 @@ const MRWICKSProfile: NextPage = () => {
         <div className="flex flex-col items-center md:items-start">
           <div className="mb-6 w-full">
             <h2 className="text-xl font-semibold text-primary-content mb-2">Wallet</h2>
-            <div className="flex items-center gap-2 bg-base-200 p-4 rounded-xl">
-              <span className="text-primary-content font-mono text-sm truncate max-w-xs">{walletAddress}</span>
-              <AddressCopyIcon address={walletAddress} className="h-6 w-6 text-primary" />
+            <div className="bg-base-200 p-4 rounded-xl">
+              <Address
+                address={walletAddress}
+                size="sm"
+                format="short"
+                disableAddressLink={true}
+                onlyEnsOrAddress={true}
+              />
             </div>
           </div>