Merge pull request #152 from adrianvrj/dev

[feat] use jotai to store wallet address

frontend/gostarkme-web/app/app/myfunds/page.tsx

@@ -5,16 +5,11 @@ import Navbar from '@/components/ui/Navbar';
 import Footer from '@/components/ui/Footer';
 import { useState } from 'react';
 import { useEventListener, useLocalStorage } from 'usehooks-ts'
+import { useAtomValue } from 'jotai';
+import { walletStarknetkitLatestAtom } from '@/state/connectedWallet';
 
 const MyFundsPage = () => { 
-  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 wallet = useAtomValue(walletStarknetkitLatestAtom);
 
   const navItems = [
     { label: 'My Profile', href: `/app/myprofile` },
@@ -34,7 +29,7 @@ const MyFundsPage = () => {
         }}
       />
       <main className="flex flex-grow w-full justify-center bg-white p-8">
-        <UserFunds userAddress={storedAddress} />
+        <UserFunds/>
       </main>
       <Footer />
     </div>

frontend/gostarkme-web/app/app/myprofile/page.tsx

@@ -7,17 +7,12 @@ import Footer from '@/components/ui/Footer';
 import Navbar from '@/components/ui/Navbar';
 import { useEventListener } from 'usehooks-ts';
 import { useState } from 'react';
+import { walletStarknetkitLatestAtom } from '@/state/connectedWallet';
+import { useAtomValue } from 'jotai';
 
 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 wallet = useAtomValue(walletStarknetkitLatestAtom);
 
   const navItems = [
     { label: 'My Profile', href: `/app/myprofile` },
@@ -45,14 +40,14 @@ const UserProfilePage = () => {
           href: "/"
         }}
       />
-      {storedAddress !== null ? (
+      {wallet !== 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)}
+                {wallet?.account?.address.slice(0, 5)}...{wallet?.account?.address.slice(-4)}
               </span>
               {"'s Profile "} {'\u2728'}
             </h2>

frontend/gostarkme-web/components/modules/myfunds/UserFunds.tsx

@@ -4,12 +4,12 @@ import React, { useEffect, useState } from 'react';
 import FundCard from '@/components/modules/myfunds/FundCard';
 import { Button } from '@/components/ui/Button';
 import { LinkButton } from '@/components/ui/LinkButton';
+import { useAtomValue } from 'jotai';
+import { walletStarknetkitLatestAtom } from '@/state/connectedWallet';
 
-interface UserFundsProps {
-  userAddress: string | null;
-}
+const UserFunds = () => {
+  const wallet = useAtomValue(walletStarknetkitLatestAtom);
 
-const UserFunds: React.FC<UserFundsProps> = ({ userAddress }) => {
   const [funds, setFunds] = useState<object[]>([]);
 
   useEffect(() => {
@@ -54,28 +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>
-        {userAddress !== null ? (
+        {wallet !== null ? (
           <LinkButton label="New" href="/app/newfunding" />
         ) : null}
       </div>
 
-      {userAddress === null ? (
+      {wallet === 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 ? (
+      {funds.length === 0 && wallet !== 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)}
+            No funds found for address {wallet?.account?.address.slice(0, 5)}...{wallet?.account?.address.slice(-4)}
           </div>
         </div>
       ) : null}
 
-      {funds.length !== 0 && userAddress !== null ? (
+      {funds.length !== 0 && wallet !== null ? (
         <div className="grid grid-cols-1 md:grid-cols-2 gap-y-10 gap-x-16">
           {funds.map((fund: any, index: number) => (
             <FundCard

frontend/gostarkme-web/components/ui/ConnectWalletButton.tsx

@@ -1,4 +1,7 @@
 "use client";
+import { ARGENT_WEBWALLET_URL, CHAIN_ID, provider } from "@/constants";
+import { walletStarknetkitLatestAtom } from "@/state/connectedWallet";
+import { useAtom, useSetAtom } from "jotai";
 import React, { useEffect, useState } from "react";
 import { connect, disconnect } from "starknetkit";
 import { useLocalStorage } from "usehooks-ts";
@@ -9,53 +12,42 @@ 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 addr = localStorage.getItem("walletAddress");
-      if (addr) {
-        setWalletConnection({ address: addr });
-      }
-    }
-  }, []);
+  const [wallet, setWallet] = useAtom(walletStarknetkitLatestAtom)
 
   const handleConnect = async (event:any) => {
-    event.preventDefault();
     try {
-      const result = await connect();
-      if (result.wallet) {
-        const address = result.wallet.selectedAddress;
-        setWalletConnection({
-          wallet: result.wallet,
-          address: address,
-        });
-        localStorage.setItem("walletAddress", address || '');
-        setValue(address);
-        console.log(address);
-      } else {
-        console.error("No wallet found in connection result.");
-      }
-    } catch (error) {
-      console.error("Failed to connect wallet:", error);
+      const { wallet } = await connect({
+        provider,
+        modalMode: "alwaysAsk",
+        webWalletUrl: ARGENT_WEBWALLET_URL,
+        argentMobileOptions: {
+          dappName: "Starknetkit example dapp",
+          url: window.location.hostname,
+          chainId: CHAIN_ID,
+          icons: [],
+        },
+      })
+
+      setWallet(wallet)
+    } catch (e) {
+      console.error(e)
+      alert((e as any).message)
     }
   };
 
   const handleDisconnect = async (event:any) => {
     event.preventDefault();
     try {
       await disconnect();
-      setWalletConnection(null);
-      localStorage.removeItem("walletAddress");
-      removeValue();
+      setWallet(null);
     } catch (error) {
       console.error("Failed to disconnect wallet:", error);
     }
   };
 
   return (
     <>
-      {walletConnection?.address ? (
+      {wallet ? (
         <button
           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}

frontend/gostarkme-web/constants/index.ts

@@ -0,0 +1,37 @@
+import { RpcProvider, constants } from "starknet"
+
+export const ETHTokenAddress =
+  "0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7"
+
+export const DAITokenAddress =
+  "0x00da114221cb83fa859dbdb4c44beeaa0bb37c7537ad5ae66fe5e0efd20e6eb3"
+
+export const ARGENT_DUMMY_CONTRACT_ADDRESS =
+  "0x001c515f991f706039696a54f6f33730e9b0e8cc5d04187b13c2c714401acfd4"
+
+export const CHAIN_ID =
+  process.env.NEXT_PUBLIC_CHAIN_ID === constants.NetworkName.SN_MAIN
+    ? constants.NetworkName.SN_MAIN
+    : constants.NetworkName.SN_SEPOLIA
+
+const NODE_URL =
+  process.env.NEXT_PUBLIC_CHAIN_ID === constants.NetworkName.SN_MAIN
+    ? "https://starknet-mainnet.public.blastapi.io"
+    : "https://starknet-sepolia.public.blastapi.io/rpc/v0_7"
+
+const STARKNET_CHAIN_ID =
+  process.env.NEXT_PUBLIC_CHAIN_ID === constants.NetworkName.SN_MAIN
+    ? constants.StarknetChainId.SN_MAIN
+    : constants.StarknetChainId.SN_SEPOLIA
+
+export const provider = new RpcProvider({
+  nodeUrl: NODE_URL,
+  chainId: STARKNET_CHAIN_ID,
+})
+
+export const ARGENT_SESSION_SERVICE_BASE_URL =
+  process.env.NEXT_PUBLIC_ARGENT_SESSION_SERVICE_BASE_URL ||
+  "https://cloud.argent-api.com/v1"
+
+export const ARGENT_WEBWALLET_URL =
+  process.env.NEXT_PUBLIC_ARGENT_WEBWALLET_URL || "https://web.argent.xyz"

frontend/gostarkme-web/package.json

@@ -14,6 +14,7 @@
     "@emotion/styled": "^11.13.0",
     "dotenv": "^16.4.5",
     "framer-motion": "^11.9.0",
+    "jotai": "^2.10.1",
     "next": "14.2.10",
     "react": "^18",
     "react-dom": "^18",

frontend/gostarkme-web/state/connectedWallet.ts

@@ -0,0 +1,6 @@
+import { atomWithReset } from "jotai/utils"
+import { StarknetWindowObject } from "starknetkit"
+
+export const walletStarknetkitLatestAtom = atomWithReset<
+  StarknetWindowObject | null | undefined
+>(undefined)