chores: fixed alot of issues

frontend/nextjs/src/app/(with wallet)/_components/navbar.tsx

@@ -20,24 +20,28 @@ import {
   primaryNavigationLinks,
   resourcesLinks,
   HOME_PAGE,
+  CREATE_A_POST_PAGE,
 } from "./page-links";
 import { SignInButton } from "./signInButton";
 import { useUser } from "@/lib/hooks/user";
 import { Separator } from "@/components/ui/separator";
+import { useConnectModal } from "@rainbow-me/rainbowkit"
+
 
 export const Navbar = () => {
   const [showSearch, setShowSearch] = useState(false);
   const { user } = useUser();
   const [mobileMenu, setMobileMenu] = useState(false)
-
+  const { openConnectModal } = useConnectModal();
+
 
   return (
     <>
       <header>
         <div className=" flex-col md:flex">
           <div className="container flex items-center justify-between py-4 md:h-16">
             <Link href={HOME_PAGE}>
-            <h2 className="text-lg font-semibold text-accent-3">MEMM!</h2>
+              <h2 className="text-lg font-semibold text-accent-3">MEMM!</h2>
             </Link>
             <div className="ml-auto flex items-center space-x-2 sm:justify-end">
               <div className="hidden md:block">
@@ -77,57 +81,58 @@ export const Navbar = () => {
                     {/* TODO @od41 change the hamburger menut to an avatar badge and show an indicator when signed in */}
                     <Popover open={mobileMenu}>
                       <PopoverTrigger asChild>
-                          {mobileMenu ? <Button
+                        {mobileMenu ? <Button
+                          variant="ghost"
+                          size="icon"
+                          aria-label="close-mobile-menu"
+                          onClick={() => setMobileMenu(false)}
+                          className="" >
+                          <X className="h-5 w-6" />
+                        </Button>
+                          : <Button
                             variant="ghost"
                             size="icon"
-                            aria-label="close-mobile-menu"
-                            onClick={() => setMobileMenu(false)}
-                            className="" >
-                            <X className="h-5 w-6" />
+                            aria-label="mobile-menu"
+                            onClick={() => setMobileMenu(true)}
+                            className="">
+                            <HiBars3 className="h-6 w-6" />
                           </Button>
-                            : <Button
-                              variant="ghost"
-                              size="icon"
-                              aria-label="mobile-menu"
-                              onClick={() => setMobileMenu(true)}
-                              className="">
-                              <HiBars3 className="h-6 w-6" />
-                            </Button>
-                          }
+                        }
                       </PopoverTrigger>
                       <PopoverContent onInteractOutside={() => setMobileMenu(false)} sideOffset={12} alignOffset={0} align="end" className="w-[80vw] md:w-[240px] bg-accent-shade right-[calc(50%-160px)] top-12">
                         <div className="space-y-2">
                           <div className="w-full">
                             {user ? (
+                              <>
                               <PopoverClose className="w-full">
-                                <SignInButton mobile label="Sign Out" style={{width: "100%"}}/>
+                                <SignInButton mobile label="Sign Out" style={{ width: "100%" }} />
                               </PopoverClose>
+                                  <Button onClick={user ? undefined : (e) => { e.stopPropagation(); openConnectModal?.() }} variant="gradient" className="w-full mt-4" asChild>
+                                    <Link href={user ? CREATE_A_POST_PAGE : ''}>Create a Post</Link>
+                                  </Button>
+                              </>
                             ) : (
                               <PopoverClose className="w-full">
-                                <SignInButton mobile label="Sign In" style={{width: "100%"}} />
+                                <SignInButton mobile label="Sign In" style={{ width: "100%" }} />
                               </PopoverClose>
                             )}
                           </div>
-                          <div className=" py-2">
+                          <div className="py-2">
                             <div className="space-y-1">
                               {primaryNavigationLinks.map((link) => (
-                                link.needsAuth && !user?.uid ? null : 
+                                link.needsAuth && !user?.uid ? null :
                                   <Button
                                     variant="ghost"
                                     key={`primary-nav-${link}`}
                                     className="w-full justify-start px-0"
                                     onClick={() => setMobileMenu(false)}
                                     asChild>
-                                  <Link
-                                    href={
-                                      typeof link.href === "function"
-                                        ? link.href(user?.uid!)
-                                        : link.href
-                                    }>
-                                    <link.icon className="mr-2 h-4 w-4 text-accent-2" />
-                                    {link.title}
-                                  </Link>
-                                </Button>
+                                    <Link
+                                      href={link.href}>
+                                      <link.icon className="mr-2 h-4 w-4 text-accent-2" />
+                                      {link.title}
+                                    </Link>
+                                  </Button>
                               ))}
                             </div>
                           </div>

frontend/nextjs/src/app/(with wallet)/_components/page-links.ts

@@ -2,11 +2,12 @@ import {HiOutlineHome, HiOutlineUser, HiOutlineUsers, HiOutlineCalendarDays, HiO
 
 export const POST_PAGE = (permalink:string) => `/dapp/p/${permalink}`
 export const EXPERT_TICKET_PAGE = (permalink:string) => `/dapp/expert-hub/${permalink}`
-export const PROFILE_EDIT_PAGE = `/dapp/profile/edit`
+export const PROFILE_EDIT_PAGE = `/dapp/my-profile/edit`
 export const HOME_PAGE = "/dapp"
 export const EXPERT_HUB_PAGE = "/dapp/expert-hub"
 export const BOOKINGS_PAGE = "/dapp/bookings"
 export const PROFILE_PAGE = (uid:string) => `/dapp/profile/${uid}`
+export const MY_PROFILE_PAGE = `/dapp/my-profile`
 export const NOTIFICATIONS_PAGE = "/dapp/notifications"
 export const CREATE_A_POST_PAGE = "/dapp/p/create"
 
@@ -42,7 +43,7 @@ export const primaryNavigationLinks = [
         title: "My Profile",
         icon: HiOutlineUser,
         isActive: false,
-        href: PROFILE_PAGE,
+        href: MY_PROFILE_PAGE,
         needsAuth: true
     },
     {
@@ -81,6 +82,7 @@ export const hasBackButtonList = [
 export const PROTECTED_ROUTES = [
     BOOKINGS_PAGE,
     PROFILE_EDIT_PAGE,
+    MY_PROFILE_PAGE,
     CREATE_A_POST_PAGE,
     NOTIFICATIONS_PAGE
 ]

frontend/nextjs/src/app/(with wallet)/_components/sidebar.tsx

@@ -28,14 +28,13 @@ export function Sidebar({ className }: SidebarProps) {
       }
     }, [pathname])
 
-    const isPageActive = (path: string, substring: any, uid: any, title: string): boolean => {
-
+    const isPageActive = (path: string, substring: any, title: string): boolean => {
         if (pathname.endsWith(HOME_PAGE) && title === "Home") {
             return pathname.endsWith(path);
         } else if (pathname.endsWith('/') && title === "Welcome") {
             return true;
         } else if (path != HOME_PAGE && title != 'Home' && path != '/' && title != 'Welcome'){
-            return path.includes(typeof(substring)==="function" ? substring(uid!) : substring)
+            return path.includes(substring)
         }
         return false;
     }
@@ -55,8 +54,8 @@ export function Sidebar({ className }: SidebarProps) {
                         {primaryNavigationLinks.map((link, key)=> (
                             link.needsAuth && !user?.uid ? null :
                             <Button variant="ghost" key={`primary-nav-${key}`} className="w-full justify-start font-normal" asChild>
-                                <Link href={typeof(link.href)==="function" ? link.href(user?.uid!) : link.href} className={`${ isPageActive(pathname, link.href, user?.uid, link.title) ? "text-accent-3 font-semibold": "text-muted"}`}>
-                                    <link.icon className={`mr-2 h-4 w-4  ${isPageActive(pathname, link.href, user?.uid, link.title) ? "text-accent-3": "text-accent-2"}`} />
+                                <Link href={link.href} className={`${ isPageActive(pathname, link.href, link.title) ? "text-accent-3 font-semibold": "text-muted"}`}>
+                                    <link.icon className={`mr-2 h-4 w-4  ${isPageActive(pathname, link.href, link.title) ? "text-accent-3": "text-accent-2"}`} />
                                     {link.title}
                                 </Link>
                             </Button>
@@ -74,7 +73,7 @@ export function Sidebar({ className }: SidebarProps) {
                         <div className="space-y-0">
                             {resourcesLinks.map((link, key) => (
                                 <Button variant="link" key={`primary-nav-${key}`} className="w-full text-sm font-normal py-0 h-9 justify-start" asChild>
-                                    <Link href={link.href} className={`${ isPageActive(pathname, link.href, user?.uid, link.title) ? "!text-accent-3 font-semibold" : "text-muted"}`}>
+                                    <Link href={link.href} className={`${ isPageActive(pathname, link.href, link.title) ? "!text-accent-3 font-semibold" : "text-muted"}`}>
                                         {link.title}
                                     </Link>
                                 </Button>

frontend/nextjs/src/app/(with wallet)/dapp/expert-hub/[slug]/page.tsx

@@ -100,7 +100,7 @@ const ExpertDetails = ({ params }: { params: { slug: string } }) => {
         <div className="w-full mt-4">
           <div className="grid grid-cols-1 md:grid-cols-5 lg:grid-cols-7 justify-between gap-4">
             <div className="col-span-1 md:col-span-3 lg:col-span-5 border-3">
-              <div className="flex items-end gap-10">
+              <div className="flex items-center gap-4">
                 <h3 className="text-2xl">
                   {listing.authorProfile.displayName}
                 </h3>
@@ -142,7 +142,9 @@ const ExpertDetails = ({ params }: { params: { slug: string } }) => {
                   </div>
                 </TabsContent>
                 <TabsContent value="reviews" className='pt-2'>
-                  {dummyReviews.map((review, key) => (<ReviewItem key={`review-${key}`} review={review} />))}
+                  {/* TODO: connect reviews to backend */}
+                  {/* {dummyReviews.map((review, key) => (<ReviewItem key={`review-${key}`} review={review} />))} */}
+                  <NoData message='No reviews found.'/>
                 </TabsContent>
               </Tabs>
             </div>
@@ -153,7 +155,7 @@ const ExpertDetails = ({ params }: { params: { slug: string } }) => {
           </div>
         </div>
 
-        <div className="w-full mt-24">
+        {/* <div className="w-full mt-24">
           <h3 className="text-lg mb-4">
             Similar Expert Profiles
           </h3>
@@ -163,7 +165,7 @@ const ExpertDetails = ({ params }: { params: { slug: string } }) => {
               return <ExpertHubCard key={`expertsss-${key}`} data={expert} />
             })}
           </div>
-        </div>
+        </div> */}
       </div>
     </div>
   )

frontend/nextjs/src/app/(with wallet)/dapp/expert-hub/page.tsx

@@ -14,7 +14,7 @@ const ExpertHub = () => {
 
   return (
     <div className="col-span-4">
-      <div className="flex justify-between items-center w-full mb-12">
+      {/* <div className="flex justify-between items-center w-full mb-12">
         <Search
           className="w-auto lg:w-2/3"
           placeholder="Search by name or expert category"
@@ -23,7 +23,7 @@ const ExpertHub = () => {
           <HiMiniAdjustmentsVertical className="mr-1" />
           Filter
         </Button>
-      </div>
+      </div> */}
       <InfiniteScroll
         className="w-full flex flex-wrap gap-4 flex-grow"
         fetcher={fetchExptListings}

frontend/nextjs/src/app/(with wallet)/dapp/profile/[uid]/_components/claim-expt-card.tsx → frontend/nextjs/src/app/(with wallet)/dapp/my-profile/_components/claim-expt-card.tsx

@@ -41,7 +41,7 @@ import { useUser } from '@/lib/hooks/user'
 import { EXPERT_TICKET_PAGE } from '@/app/(with wallet)/_components/page-links'
 import { serverTimestamp } from 'firebase/firestore'
 const PLACEHOLDER_COVER_PHOTO = require('@/assets/default-photo.png')
-
+import { MAX_MINT_WITHIN_GAS_LIMIT } from '@/lib/contants'
 
 // Form Schema
 
@@ -60,8 +60,7 @@ const ClaimExptCard = ({profile}: {profile: UserProfile}) => {
             .custom<File>((v) => v instanceof File, {
                 message: 'Only images allowed e.g JPG, JPEG or PNG are allowed.',
             }),
-        //TODO: @od41 Error message doesn't show up in form
-        collectionSize: z.coerce.number().max(profile.ownedExptIds?.length || 0, "Number exceeds owned expts"), // the tokenIds that are meant to be minted
+        collectionSize: z.coerce.number().max(MAX_MINT_WITHIN_GAS_LIMIT, `You can only list ${MAX_MINT_WITHIN_GAS_LIMIT} at a time`), // the tokenIds that are meant to be minted
         collectionName: z.string(),
         price: z.coerce.number().gte(1, {
             message: "Price is required",
@@ -73,6 +72,7 @@ const ClaimExptCard = ({profile}: {profile: UserProfile}) => {
 
     const form = useForm<z.infer<typeof FormSchema>>({
         resolver: zodResolver(FormSchema),
+        mode: 'onBlur',
         defaultValues: {
             collectionName: "",
             collectionSize: 1,
@@ -165,7 +165,7 @@ const [coverPhotoPreview, setCoverPhotoPreview] = useState<string | null>(null);
                 <div className="ml-1 flex items-center text-muted">Unclaimed EXPT: <span className="ml-1 text-foreground">{unclaimedExpt}</span></div>
             </div>
             <div className="flex items-center gap-4 w-full md:w-auto">
-                <Button size="sm" onClick={()=>handleClaimExpt()} className="w-full md:w-auto px-5">Claim EXPT</Button>
+                <Button size="sm" onClick={()=>handleClaimExpt()} className="w-full md:w-auto px-5">Claim all EXPT</Button>
                 <Dialog>
                     <DialogTrigger>
                         <Button size="sm" variant="gradient" className="w-full md:w-auto px-5">List EXPT</Button>
@@ -258,7 +258,14 @@ const [coverPhotoPreview, setCoverPhotoPreview] = useState<string | null>(null);
                                                     <FormItem>
                                                         <FormLabel>Collection Size (Expts Owned : {profile.ownedExptIds?.length})</FormLabel>
                                                         <FormControl>
-                                                            <Input placeholder="Number of EXPT to list" type="number" min={1} max={profile.ownedExptIds?.length} {...field} />
+                                                            <Input 
+                                                                placeholder="Number of EXPT to list" 
+                                                                type="number" 
+                                                                min={1} 
+                                                                max={MAX_MINT_WITHIN_GAS_LIMIT}
+                                                                // max={profile.ownedExptIds?.length} 
+                                                                {...field}
+                                                            />
                                                         </FormControl>
                                                         <FormMessage />
                                                     </FormItem>

frontend/nextjs/src/app/(with wallet)/dapp/profile/[uid]/_components/expt-bookings-history.tsx → frontend/nextjs/src/app/(with wallet)/dapp/my-profile/_components/expt-bookings-history.tsx

@@ -41,7 +41,7 @@ import {
 import { toast } from "@/components/ui/use-toast";
 import { Globe2Icon } from "lucide-react";
 import { Textarea } from "@/components/ui/textarea";
-import SessionReviewForm from "../../../bookings/_components/session-review-form";
+import SessionReviewForm from "../../bookings/_components/session-review-form";
 import InfiniteScroll from "@/components/ui/infinite-scroller";
 import useBackend from "@/lib/hooks/useBackend";
 import { useUser } from "@/lib/hooks/user";

frontend/nextjs/src/app/(with wallet)/dapp/profile/[uid]/_components/my-wallet.tsx → frontend/nextjs/src/app/(with wallet)/dapp/my-profile/_components/my-wallet.tsx

@@ -88,7 +88,7 @@ const { mutateAsync: handleClaimMent}=useMutation({
                       <div className="ml-1 flex items-center text-muted">Unclaimed MENT: <span className="ml-1 text-foreground">{unclaimedMent}</span></div>
                     </div>
                   </div>
-                  <Button onClick={() => handleClaimMent()} size="sm">Claim MENT</Button>
+                  <Button onClick={() => handleClaimMent()} size="sm">Claim all MENT</Button>
                 </div>
 
                 <ClaimExptCard profile={profile} />

frontend/nextjs/src/app/(with wallet)/dapp/my-profile/layout.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Metadata } from 'next'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { RightSidebar } from '../../_components/right-sidebar'
+
+export const metadata: Metadata = {
+    title: 'My Profile',
+  }
+
+type Props = {
+    children: React.ReactNode
+}
+
+const ProfileLayout = ({ children }: Props) => {
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-6 col-span-4">
+            <div className="h-full px-4 py-6 lg:px-6 col-span-1 md:col-span-4 md:border-x">
+                <ScrollArea className="h-[90vh] w-full">
+                    {children}
+                </ScrollArea>
+            </div>
+            <RightSidebar className="hidden md:block min-h-[94vh] col-span-2 lg:col-span-2" >
+                {/* leave empty */}
+            </RightSidebar>
+        </div>
+    )
+}
+
+export default ProfileLayout