feat: user account page

packages/nextjs/app/(app)/account/page.client.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { Address } from "viem";
+import { useAccount } from "wagmi";
+import { Balance } from "~~/components/scaffold-eth";
+import { AddressQRCodeModal } from "~~/components/scaffold-eth/RainbowKitCustomConnectButton/AddressQRCodeModal";
+
+export const AccountPageClient: React.FC = () => {
+  const { address: connectedAddress } = useAccount();
+
+  return (
+    <div>
+      <AddressQRCodeModal address={connectedAddress as Address} modalId="qr-code modal" />
+      <div className="flex justify-center flex-col items-center">
+        <p className="font-medium text-lg">Account Balance</p>
+        <Balance address={connectedAddress as Address} />
+      </div>
+    </div>
+  );
+};

packages/nextjs/app/(app)/account/page.tsx

@@ -1,11 +1,12 @@
+import { AccountPageClient } from "./page.client";
 import { Metadata } from "next";
 
 export const metadata: Metadata = { title: "Account" };
 
 export default function AccountPage() {
   return (
-    <div>
-      <p>Account</p>
+    <div className="py-6 px-4">
+      <AccountPageClient />
     </div>
   );
 }

packages/nextjs/app/(app)/layout.tsx

@@ -22,16 +22,18 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
   }, [replace, connectedAddress]);
 
   return (
-    <main className="w-full max-w-4xl mx-auto">
+    <main className="w-full max-w-4xl mx-auto sm:px-0 px-3">
       <div className="py-5 flex justify-between">
-        <Link href={`/`} className="sm:block hidden">
+        <Link href={`/dashboard`} className="sm:block hidden">
           <Image src={`/logo_dark.svg`} alt="Stoneproof" width={160} height={52} />
         </Link>
-        <Link href={`/`} className="sm:hidden block">
+        <Link href={`/dashboard`} className="sm:hidden block">
           <Image src={`/logo_small.svg`} alt="Stoneproof" width={50} height={40} />
         </Link>
         <div>
-          <BlockieAvatar address={connectedAddress || ""} size={36} ensImage={result.data} />
+          <Link href={`/account`}>
+            <BlockieAvatar address={connectedAddress || ""} size={36} ensImage={result.data} />
+          </Link>
         </div>
       </div>
       {children}

packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressQRCodeModal.tsx

@@ -11,14 +11,8 @@ export const AddressQRCodeModal = ({ address, modalId }: AddressQRCodeModalProps
   return (
     <>
       <div>
-        <input type="checkbox" id={`${modalId}`} className="modal-toggle" />
         <label htmlFor={`${modalId}`} className="modal cursor-pointer">
           <label className="modal-box relative">
-            {/* dummy input to capture event onclick on modal box */}
-            <input className="h-0 w-0 absolute top-0 left-0" />
-            <label htmlFor={`${modalId}`} className="btn btn-ghost btn-sm btn-circle absolute right-3 top-3">
-              ✕
-            </label>
             <div className="space-y-3 py-6">
               <div className="flex flex-col items-center gap-6">
                 <QRCodeSVG value={address} size={256} />