[feat] Add connect wallet functionality

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

@@ -0,0 +1,68 @@
+"use client";
+import React, { useState } from "react";
+import { connect, disconnect } from "starknetkit";
+
+interface IWalletConnection {
+  wallet?: any;
+  address?: string;
+}
+
+export default function WalletConnector() {
+  const storedAddress = localStorage.getItem("walletAddress");
+  const [walletConnection, setWalletConnection] = useState<IWalletConnection | null>(
+    storedAddress ? { address: storedAddress } : null
+  );
+
+  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 || '');
+        console.log("Wallet connected:", result, "Address:", address);
+      } else {
+        console.error("No wallet found in connection result.");
+      }
+    } catch (error) {
+      console.error("Failed to connect wallet:", error);
+    }
+  };
+
+  const handleDisconnect = async (event:any) => {
+    event.preventDefault();
+    try {
+      await disconnect();
+      setWalletConnection(null);
+      localStorage.removeItem("walletAddress");
+      localStorage.removeItem("nftSrc");
+      console.log("Wallet disconnected");
+    } catch (error) {
+      console.error("Failed to disconnect wallet:", error);
+    }
+  };
+
+  return (
+    <>
+      {walletConnection?.address ? (
+        <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}
+        >
+          {walletConnection.address.slice(0, 6)}...{walletConnection.address.slice(-4)}
+        </button>
+      ) : (
+        <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={handleConnect}
+        >
+          Connect wallet
+        </button>
+      )}
+    </>
+  );
+}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import Image from "next/image";
 import Link from 'next/link';
-import { LinkButton } from "../ui/LinkButton";
+import ConnectWallet from "../ui/ConnectWalletButton"
 
 interface NavItem {
   label: string;
@@ -50,10 +50,9 @@ export const Navbar = ({
                         ))}
                     </div>
                 </div>
-                <LinkButton
-                    label={ctaButton.label}
-                    href={ctaButton.href}
-                />
+                <div className="flex items-center space-x-4">
+                    <ConnectWallet />
+                </div>
             </div>
         </nav>
     );

frontend/gostarkme-web/next.config.mjs

@@ -1,30 +1,30 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-    /**
-     * Enable static exports for the App Router.
-     *
-     * @see https://nextjs.org/docs/app/building-your-application/deploying/static-exports
-     */
-    output: "export",
+///** @type {import('next').NextConfig} */
+//const nextConfig = {
+    //**
+    // * Enable static exports for the App Router.
+    // *
+//  //   * @see https://nextjs.org/docs/app/building-your-application/deploying/static-exports
+    // */
+//    output: "export",
 
-    /**
-     * Set base path. This is the slug of your GitHub repository.
-     *
-     * @see https://nextjs.org/docs/app/api-reference/next-config-js/basePath
-     */
-    basePath: "/gostarkme",
+    ///**
+    // * Set base path. This is the slug of your GitHub repository.
+    // *
+//  //   * @see https://nextjs.org/docs/app/api-reference/next-config-js/basePath
+    //*/
+//    basePath: "/gostarkme",
 
-    assetPrefix: 'https://web3wagers.github.io/gostarkme',
+//    assetPrefix: 'https://web3wagers.github.io/gostarkme',
 
-    /**
-     * Disable server-based image optimization. Next.js does not support
-     * dynamic features with static exports.
-     *
-     * @see https://nextjs.org/docs/app/api-reference/components/image#unoptimized
-     */
-    images: {
-      unoptimized: true,
-    },
-  };
+    ///**
+    //* Disable server-based image optimization. Next.js does not support
+    // * dynamic features with static exports.
+    //*
+    // * @see https://nextjs.org/docs/app/api-reference/components/image#unoptimized
+    // */
+    //images: {
+    //  unoptimized: true,
+    //},
+  //};
 
-  export default nextConfig;
+  //export default nextConfig;

frontend/gostarkme-web/package.json

@@ -9,10 +9,17 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@chakra-ui/react": "^2.9.1",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
     "dotenv": "^16.4.5",
+    "framer-motion": "^11.9.0",
+    "get-starknet": "^4.0.0",
     "next": "14.2.10",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "starknet": "^6.7.0",
+    "starknetkit": "^1.1.5"
   },
   "devDependencies": {
     "@types/node": "^20",