chore: add address bar

frontend/src/assets/icons.tsx

@@ -287,6 +287,23 @@ export const BarcodeIcon = (props: any) => (
   </svg>
 );
 
+export const UserIcon = (props: any) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    width="24"
+    height="24"
+  >
+    <circle cx="12" cy="8" r="4"></circle>
+    <path d="M16 16c0-2-4-3-4-3s-4 1-4 3v4h8v-4z"></path>
+  </svg>
+);
+
 export const NoticeIcon = (props: any) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"

frontend/src/components/ConnectModal.tsx

@@ -84,7 +84,7 @@ const ConnectModal = ({ isOpen, onClose }: Props) => {
       <div className="flex p-4 w-full lg:p-0 ">
         <div className="basis-5/6 lg:col-span-2  l lg:py-4 lg:pl-8">
           <h2 className="text-center my-4 lg:text-start font-bold text-white text-[1.125em]">
-            Connect  Wallet
+            Connect Wallet
           </h2>
         </div>
         <div className="ml-auto lg:col-span-3 lg:py-4 lg:pr-8">
@@ -122,7 +122,6 @@ const ConnectModal = ({ isOpen, onClose }: Props) => {
             ))}
           </div>
         </div>
-
       </div>
     </GenericModal>
   );

frontend/src/components/ConnectWallet.tsx

@@ -1,25 +1,28 @@
 import { roboto } from '@/app/fonts';
 import { useState } from 'react';
 import ConnectModal from './ConnectModal';
+import { WalletIcon } from '@heroicons/react/24/outline';
 
 const ConnectWallet = (props: any) => {
-  const [isOpen, setisOpen] = useState<boolean>(false)
+  const [isOpen, setisOpen] = useState<boolean>(false);
   return (
     <div>
       <button
         onClick={() => setisOpen(!isOpen)}
-        className={`w-[12.5rem] h-14 grid py-2 px-[1.25rem]
-          place-items-center rounded-2xl gap-2 text-textPrimary
+        className={` flex items-center  py-3 px-[1.25rem]
+          place-items-center rounded-full gap-2 text-textPrimary
           font-medium text-base bg-primary ${roboto.variable} font-roboto`}
         {...props}
       >
+        <div>
+          <WalletIcon className="text-white w-6 h-6" />
+        </div>
         CONNECT WALLET
       </button>
 
-      {
-        isOpen && <ConnectModal isOpen={isOpen} onClose={() => setisOpen(false)} />
-      }
-
+      {isOpen && (
+        <ConnectModal isOpen={isOpen} onClose={() => setisOpen(false)} />
+      )}
     </div>
   );
 };

frontend/src/components/GenericModal.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { useEffect } from "react";
-import ReactPortal from "./react-portal";
+import { useEffect } from 'react';
+import ReactPortal from './react-portal';
 
 const GenericModal = ({
   isOpen,
@@ -18,31 +18,27 @@ const GenericModal = ({
   className?: string;
   position?: string;
 }) => {
-
   useEffect(() => {
     const closeOnEscapeKey = (e: KeyboardEvent) =>
-      e.key === "Escape" ? onClose() : null;
-    document.body.addEventListener("keydown", closeOnEscapeKey);
+      e.key === 'Escape' ? onClose() : null;
+    document.body.addEventListener('keydown', closeOnEscapeKey);
     return (): void => {
-      document.body.removeEventListener("keydown", closeOnEscapeKey);
+      document.body.removeEventListener('keydown', closeOnEscapeKey);
     };
   }, [onClose]);
 
   useEffect(() => {
-    document.body.style.overflow = "hidden";
+    document.body.style.overflow = 'hidden';
     return (): void => {
-      document.body.style.overflow = "unset";
+      document.body.style.overflow = 'unset';
     };
   }, [isOpen]);
 
   if (!isOpen) {
     return null;
   }
   return (
-
-
     <>
-
       <ReactPortal containerId="react-portal-modal-container">
         <div className="w-full">
           <div

frontend/src/components/Navbar.tsx

@@ -5,9 +5,13 @@ import Link from 'next/link';
 import ConnectWallet from './ConnectWallet';
 import { roboto } from '@/app/fonts';
 import { useAlert } from '@/hooks/useAlert';
+import { useAccount } from '@starknet-react/core';
+import WalletBar from './WalletBar';
 
 const NavBar = (props: any) => {
   const { showAlert } = useAlert();
+  const { account, address } = useAccount();
+
   return (
     <nav
       className={`flex items-center justify-between px-4 lg:px-20
@@ -24,9 +28,7 @@ const NavBar = (props: any) => {
         </Link>
         <NavLinks />
       </div>
-      <div>
-        <ConnectWallet />
-      </div>
+      <div>{address ? <WalletBar /> : <ConnectWallet />}</div>
     </nav>
   );
 };

frontend/src/components/WalletBar.tsx

@@ -1,5 +1,6 @@
 'use client';
-import { useAccount, useConnect, useDisconnect } from '@starknet-react/core';
+import { UserCircleIcon } from '@heroicons/react/24/outline';
+import { useAccount, useDisconnect } from '@starknet-react/core';
 import { useMemo } from 'react';
 
 function WalletConnected() {
@@ -12,16 +13,19 @@ function WalletConnected() {
   }, [address]);
 
   return (
-    <div>
-      <span>Connected: {shortenedAddress}</span>
-      <button onClick={() => disconnect()}>Disconnect</button>
+    <div
+      onClick={() => disconnect()}
+      className="bg-primary cursor-pointer flex items-center gap-x-2 rounded-full px-5 py-3"
+    >
+      <div>
+        <UserCircleIcon className="text-white w-6 h-6" />
+      </div>
+      <span className="text-white">{shortenedAddress}</span>
     </div>
   );
 }
 
 function ConnectWallet() {
-  const { connectors, connect } = useConnect();
-
   return (
     <div>
       <span>Choose a wallet: </span>

frontend/src/components/react-portal.tsx

@@ -1,7 +1,7 @@
-"use client";
+'use client';
 
-import { useLayoutEffect, useState } from "react";
-import { createPortal } from "react-dom";
+import { useLayoutEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
 
 interface ReactPortalProps {
   children: React.ReactElement;
@@ -10,8 +10,8 @@ interface ReactPortalProps {
 
 const createContainerAndAppendToBody = (containerId: string) => {
   if (!document) return null;
-  const wrapperElement = document.createElement("div");
-  wrapperElement.setAttribute("id", containerId);
+  const wrapperElement = document.createElement('div');
+  wrapperElement.setAttribute('id', containerId);
   document.body.appendChild(wrapperElement);
   return wrapperElement;
 };