From 4ed0e569386d1121d18c40e176a4fb720bdc8efb Mon Sep 17 00:00:00 2001
From: adrianvrj <adrivargas48@gmail.com>
Date: Fri, 4 Oct 2024 12:44:21 -0600
Subject: [PATCH] [feat] navigating using local storage with wallet address

---
 .../app/app/myfunds/{[useraddr] => }/page.tsx |  26 ++--
 .../app/app/myprofile/[useraddr]/page.tsx     | 103 ----------------
 .../gostarkme-web/app/app/myprofile/page.tsx  | 112 ++++++++++++++++++
 frontend/gostarkme-web/app/app/page.tsx       |   4 +-
 .../components/modules/myfunds/UserFunds.tsx  |  22 +++-
 .../components/ui/ConnectWalletButton.tsx     |  17 +--
 frontend/gostarkme-web/package.json           |   3 +-
 7 files changed, 156 insertions(+), 131 deletions(-)
 rename frontend/gostarkme-web/app/app/myfunds/{[useraddr] => }/page.tsx (52%)
 delete mode 100644 frontend/gostarkme-web/app/app/myprofile/[useraddr]/page.tsx
 create mode 100644 frontend/gostarkme-web/app/app/myprofile/page.tsx

diff --git a/frontend/gostarkme-web/app/app/myfunds/[useraddr]/page.tsx b/frontend/gostarkme-web/app/app/myfunds/page.tsx
similarity index 52%
rename from frontend/gostarkme-web/app/app/myfunds/[useraddr]/page.tsx
rename to frontend/gostarkme-web/app/app/myfunds/page.tsx
index a65ea8a..79ca7db 100644
--- a/frontend/gostarkme-web/app/app/myfunds/[useraddr]/page.tsx
+++ b/frontend/gostarkme-web/app/app/myfunds/page.tsx
@@ -1,22 +1,24 @@
-import React from 'react';
+'use client'
+
 import UserFunds from '@/components/modules/myfunds/UserFunds';
 import Navbar from '@/components/ui/Navbar';
 import Footer from '@/components/ui/Footer';
+import { useState } from 'react';
+import { useEventListener, useLocalStorage } from 'usehooks-ts'
 
-interface MyFundsPageProps {
-  params: { useraddr: string };
-}
+const MyFundsPage = () => { 
+  const [storedAddress, setStoredAddress] = useState<string | null>(typeof window !== 'undefined' ? localStorage.getItem('walletAddress') : null);
 
-export function generateStaticParams() {
-  return [{ useraddr: '1' }]
-}
+  const handleWalletChange = () => {
+    const addr = localStorage.getItem("walletAddress");
+    setStoredAddress(addr);
+  } 
 
-const MyFundsPage: React.FC<MyFundsPageProps> = ({ params }) => {
-  const { useraddr } = params;
+  useEventListener("local-storage", handleWalletChange);
 
   const navItems = [
-    { label: 'My Profile', href: `/app/myprofile/${useraddr}` },
-    { label: 'My funds', href: `/app/myfunds/${useraddr}` }
+    { label: 'My Profile', href: `/app/myprofile` },
+    { label: 'My funds', href: `/app/myfunds` }
   ];
 
   return (
@@ -32,7 +34,7 @@ const MyFundsPage: React.FC<MyFundsPageProps> = ({ params }) => {
         }}
       />
       <main className="flex flex-grow w-full justify-center bg-white p-8">
-        <UserFunds userAddress={useraddr} />
+        <UserFunds userAddress={storedAddress} />
       </main>
       <Footer />
     </div>
diff --git a/frontend/gostarkme-web/app/app/myprofile/[useraddr]/page.tsx b/frontend/gostarkme-web/app/app/myprofile/[useraddr]/page.tsx
deleted file mode 100644
index 387acdb..0000000
--- a/frontend/gostarkme-web/app/app/myprofile/[useraddr]/page.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import ProgressBar from '@/components/ui/ProgressBar';
-import Divider from '@/components/ui/Divider';
-import Image from 'next/image';
-import Footer from '@/components/ui/Footer';
-import Navbar from '@/components/ui/Navbar';
-
-interface UserProfilePageProps {
-  params: {
-    useraddr: string;
-  };
-}
-
-export function generateStaticParams() {
-  return [{ useraddr: '1' }]
-}
-
-const UserProfilePage: React.FC<UserProfilePageProps> = ({ params }) => {
-  const { useraddr } = params;
-
-  const navItems = [
-    { label: 'My Profile', href: `/app/myprofile/${useraddr}` },
-    { label: 'My funds', href: `/app/myfunds/${useraddr}` }
-  ];
-
-  // Mock data for design purposes
-  const totalDonations = 20000;
-  const currentLevel = 10;
-  const currentPoints = 200;
-  const totalPoints = 500;
-
-  // Calculate progress percentage
-  const progress = (currentPoints / totalPoints) * 100;
-
-  return (
-    <div className="min-h-screen flex flex-col">
-      <Navbar
-        logoSrc={process.env.NEXT_PUBLIC_APP_ROOT + "icons/starklogo.png"}
-        logoAlt="Go Stark Me logo"
-        title="Go Stark Me"
-        navItems={navItems}
-        ctaButton={{
-          label: "Connect wallet",
-          href: "/"
-        }}
-      />
-
-      <main className="flex flex-grow w-full items-center justify-center bg-white p-8">
-        {/* Profile Section */}
-        <section className="w-full max-w-6xl">
-          {/* Profile Header */}
-          <h2 className="text-4xl font-bold text-gray-900 mb-2">
-            <span className="font-extrabold">
-              {useraddr.slice(0, 5)}...{useraddr.slice(-4)}
-            </span>
-            {"'s Profile "} {'\u2728'}
-          </h2>
-
-          <Divider />
-
-          {/* Total Donations and Current Level */}
-          <p className="text-2xl text-gray-700 mb-3 flex items-center">
-            Total donations:
-            <span className="font-semibold ml-2">
-              {totalDonations.toLocaleString()}
-            </span>
-            <Image
-              src="/icons/starklogo.png"
-              alt="STRKs"
-              width={28}
-              height={28}
-              className="ml-2"
-            />
-          </p>
-
-          <p className="text-2xl text-gray-700 mb-5">
-            Current level: <span className="font-semibold">{currentLevel}</span>
-          </p>
-          <h2 className="text-2xl font-extrabold text-gray-600 mb-3">
-            Your progress to next level
-          </h2>
-
-          <Divider />
-
-          <ProgressBar progress={progress} />
-
-          <div className="flex justify-center mt-3 text-xl text-gray-700">
-            {currentPoints} / {totalPoints}
-            <Image
-              src="/icons/starklogo.png"
-              alt="STRKs"
-              width={28}
-              height={28}
-              className="ml-2"
-            />
-          </div>
-        </section>
-      </main>
-      <Footer />
-    </div>
-  );
-};
-
-export default UserProfilePage;
diff --git a/frontend/gostarkme-web/app/app/myprofile/page.tsx b/frontend/gostarkme-web/app/app/myprofile/page.tsx
new file mode 100644
index 0000000..5178fe1
--- /dev/null
+++ b/frontend/gostarkme-web/app/app/myprofile/page.tsx
@@ -0,0 +1,112 @@
+'use client'
+
+import ProgressBar from '@/components/ui/ProgressBar';
+import Divider from '@/components/ui/Divider';
+import Image from 'next/image';
+import Footer from '@/components/ui/Footer';
+import Navbar from '@/components/ui/Navbar';
+import { useEventListener } from 'usehooks-ts';
+import { useState } from 'react';
+
+const UserProfilePage = () => {
+
+  const [storedAddress, setStoredAddress] = useState<string | null>(typeof window !== 'undefined' ? localStorage.getItem('walletAddress') : null);
+
+  const handleWalletChange = () => {
+    const addr = localStorage.getItem("walletAddress");
+    setStoredAddress(addr);
+  }
+
+  useEventListener("local-storage", handleWalletChange);
+
+  const navItems = [
+    { label: 'My Profile', href: `/app/myprofile` },
+    { label: 'My funds', href: `/app/myfunds` }
+  ];
+
+  // Mock data for design purposes
+  const totalDonations = 20000;
+  const currentLevel = 10;
+  const currentPoints = 200;
+  const totalPoints = 500;
+
+  // Calculate progress percentage
+  const progress = (currentPoints / totalPoints) * 100;
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Navbar
+        logoSrc={process.env.NEXT_PUBLIC_APP_ROOT + "icons/starklogo.png"}
+        logoAlt="Go Stark Me logo"
+        title="Go Stark Me"
+        navItems={navItems}
+        ctaButton={{
+          label: "Connect wallet",
+          href: "/"
+        }}
+      />
+      {storedAddress !== null ? (
+        <main className="flex flex-grow w-full items-center justify-center bg-white p-8">
+          {/* Profile Section */}
+          <section className="w-full max-w-6xl">
+            {/* Profile Header */}
+            <h2 className="text-4xl font-bold text-gray-900 mb-2">
+              <span className="font-extrabold">
+                {storedAddress.slice(0, 5)}...{storedAddress.slice(-4)}
+              </span>
+              {"'s Profile "} {'\u2728'}
+            </h2>
+
+            <Divider />
+
+            {/* Total Donations and Current Level */}
+            <p className="text-2xl text-gray-700 mb-3 flex items-center">
+              Total donations:
+              <span className="font-semibold ml-2">
+                {totalDonations.toLocaleString()}
+              </span>
+              <Image
+                src="/icons/starklogo.png"
+                alt="STRKs"
+                width={28}
+                height={28}
+                className="ml-2"
+              />
+            </p>
+
+            <p className="text-2xl text-gray-700 mb-5">
+              Current level: <span className="font-semibold">{currentLevel}</span>
+            </p>
+            <h2 className="text-2xl font-extrabold text-gray-600 mb-3">
+              Your progress to next level
+            </h2>
+
+            <Divider />
+
+            <ProgressBar progress={progress} />
+
+            <div className="flex justify-center mt-3 text-xl text-gray-700">
+              {currentPoints} / {totalPoints}
+              <Image
+                src="/icons/starklogo.png"
+                alt="STRKs"
+                width={28}
+                height={28}
+                className="ml-2"
+              />
+            </div>
+          </section>
+        </main>
+      ) : (
+        <div className="flex justify-center items-center h-64">
+          <div className="text-center text-gray-500">
+            Please connect your wallet to see your profile.
+          </div>
+        </div>
+      )}
+      <Footer />
+    </div>
+  );
+};
+
+export default UserProfilePage;
diff --git a/frontend/gostarkme-web/app/app/page.tsx b/frontend/gostarkme-web/app/app/page.tsx
index d8497e7..855a557 100644
--- a/frontend/gostarkme-web/app/app/page.tsx
+++ b/frontend/gostarkme-web/app/app/page.tsx
@@ -5,8 +5,8 @@ import React from "react";
 
 const Dashboard = () => {
   const navItems = [
-    { label: 'My Profile', href: 'app/myprofile/1' },
-    { label: 'My funds', href: '/app/myfunds/1' }
+    { label: 'My Profile', href: 'app/myprofile' },
+    { label: 'My funds', href: '/app/myfunds' }
   ];
 
   const funds = [
diff --git a/frontend/gostarkme-web/components/modules/myfunds/UserFunds.tsx b/frontend/gostarkme-web/components/modules/myfunds/UserFunds.tsx
index 7f44e4a..030c07d 100644
--- a/frontend/gostarkme-web/components/modules/myfunds/UserFunds.tsx
+++ b/frontend/gostarkme-web/components/modules/myfunds/UserFunds.tsx
@@ -6,7 +6,7 @@ import { Button } from '@/components/ui/Button';
 import { LinkButton } from '@/components/ui/LinkButton';
 
 interface UserFundsProps {
-  userAddress: string;
+  userAddress: string | null;
 }
 
 const UserFunds: React.FC<UserFundsProps> = ({ userAddress }) => {
@@ -54,16 +54,28 @@ const UserFunds: React.FC<UserFundsProps> = ({ userAddress }) => {
         <div className="flex items-center">
           <h1 className="text-2xl font-bold mr-2">My Funds &#10024;</h1>
         </div>
-        <LinkButton label="New" href="/app/newfunding" />
+        {userAddress !== null ? (
+          <LinkButton label="New" href="/app/newfunding" />
+        ) : null}
       </div>
 
-      {funds.length === 0 ? (
+      {userAddress === null ? (
+        <div className="flex justify-center items-center h-64">
+          <div className="text-center text-gray-500">
+            Please connect your wallet to see your funds.
+          </div>
+        </div>
+      ) : null}
+
+      {funds.length === 0 && userAddress !== null ? (
         <div className="flex justify-center items-center h-64">
           <div className="text-center text-gray-500">
             No funds found for address {userAddress.slice(0, 5)}...{userAddress.slice(-4)}
           </div>
         </div>
-      ) : (
+      ) : null}
+
+      {funds.length !== 0 && userAddress !== null ? (
         <div className="grid grid-cols-1 md:grid-cols-2 gap-y-10 gap-x-16">
           {funds.map((fund: any, index: number) => (
             <FundCard
@@ -75,7 +87,7 @@ const UserFunds: React.FC<UserFundsProps> = ({ userAddress }) => {
             />
           ))}
         </div>
-      )}
+      ) : null}
     </div>
   );
 };
diff --git a/frontend/gostarkme-web/components/ui/ConnectWalletButton.tsx b/frontend/gostarkme-web/components/ui/ConnectWalletButton.tsx
index b18fb06..181c1ca 100644
--- a/frontend/gostarkme-web/components/ui/ConnectWalletButton.tsx
+++ b/frontend/gostarkme-web/components/ui/ConnectWalletButton.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useEffect, useState } from "react";
 import { connect, disconnect } from "starknetkit";
+import { useLocalStorage } from "usehooks-ts";
 
 interface IWalletConnection {
   wallet?: any;
@@ -9,12 +10,12 @@ interface IWalletConnection {
 
 export default function WalletConnector() {
   const [walletConnection, setWalletConnection] = useState<IWalletConnection | null>(null);
-
+  const [storedAddress, setValue, removeValue] = useLocalStorage<any>('walletAddress', typeof window !== 'undefined' ? localStorage.getItem('walletAddress') : null);
   useEffect(() => {
     if (typeof window !== 'undefined') {
-      const storedAddress = localStorage.getItem("walletAddress");
-      if (storedAddress) {
-        setWalletConnection({ address: storedAddress });
+      const addr = localStorage.getItem("walletAddress");
+      if (addr) {
+        setWalletConnection({ address: addr });
       }
     }
   }, []);
@@ -30,7 +31,8 @@ export default function WalletConnector() {
           address: address,
         });
         localStorage.setItem("walletAddress", address || '');
-        console.log("Wallet connected:", result, "Address:", address);
+        setValue(address);
+        console.log(address);
       } else {
         console.error("No wallet found in connection result.");
       }
@@ -45,8 +47,7 @@ export default function WalletConnector() {
       await disconnect();
       setWalletConnection(null);
       localStorage.removeItem("walletAddress");
-      localStorage.removeItem("nftSrc");
-      console.log("Wallet disconnected");
+      removeValue();
     } catch (error) {
       console.error("Failed to disconnect wallet:", error);
     }
@@ -59,7 +60,7 @@ export default function WalletConnector() {
           className="self-center bg-darkblue text-white py-2 px-6 md:py-3 md:px-10 rounded-md text-xs md:text-sm shadow-xl hover:bg-starkorange active:bg-darkblue ease-in-out duration-500 active:duration-0 shadow-gray-400"
           onClick={handleDisconnect}
         >
-          {walletConnection.address.slice(0, 6)}...{walletConnection.address.slice(-4)}
+          Log Out
         </button>
       ) : (
         <button
diff --git a/frontend/gostarkme-web/package.json b/frontend/gostarkme-web/package.json
index 8bea331..04e81e1 100644
--- a/frontend/gostarkme-web/package.json
+++ b/frontend/gostarkme-web/package.json
@@ -18,7 +18,8 @@
     "react": "^18",
     "react-dom": "^18",
     "starknet": "^6.7.0",
-    "starknetkit": "^1.1.5"
+    "starknetkit": "^1.1.5",
+    "usehooks-ts": "^3.1.0"
   },
   "devDependencies": {
     "@types/node": "^20",