Feat/abstract wallet

app/(landing)/about/page.tsx

@@ -8,7 +8,6 @@ import Timeline from '@/components/landing-page/about/timeline/Timeline';
 import TestimonialsSection from '@/components/testimonials/TestimonialsSection';
 import { testimonials } from '@/components/testimonials/data/testimonial';
 import AboutUsHero2 from './AboutUsHero2';
-// import OurTeam from './OurTeam';
 import Partners from './Partners';
 
 export const metadata: Metadata = generatePageMetadata('about');
@@ -21,7 +20,6 @@ const AboutPage = () => {
         <Missionpage />
         <AboutUsDifferent />
         <Timeline />
-        {/* <OurTeam /> */}
         <Partners />
       </div>
       <TestimonialsSection testimonials={testimonials} />

app/(landing)/layout.tsx

@@ -3,6 +3,7 @@ import { ReactNode } from 'react';
 import { Footer, Navbar } from '@/components/landing-page';
 import { generatePageMetadata } from '@/lib/metadata';
 import { GoogleOneTap } from '@/components/auth/GoogleOneTap';
+import { LandingWalletWrapper } from '@/components/wallet/LandingWalletWrapper';
 
 export const metadata: Metadata = generatePageMetadata('home');
 
@@ -17,6 +18,7 @@ export default function LandingLayout({ children }: LandingLayoutProps) {
       <main className='flex-1'>{children}</main>
       <Footer />
       <GoogleOneTap />
+      <LandingWalletWrapper />
     </div>
   );
 }

app/me/projects/page.tsx

@@ -8,7 +8,6 @@ import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Package, ArrowLeft } from 'lucide-react';
 import { useAuthStatus } from '@/hooks/use-auth';
-import { mapProjectToCardData } from '@/features/projects/utils/card-mappers';
 import ProjectCard from '@/features/projects/components/ProjectCard';
 
 // ... (existing imports)
@@ -106,10 +105,26 @@ export default function MyProjectsPage() {
             <ProjectCard
               isFullWidth
               key={project.id}
-              data={mapProjectToCardData(project, {
-                name: authUser?.name || 'You',
-                image: authUser?.image || '/user.png',
-              })}
+              data={
+                {
+                  id: project.id,
+                  slug: project.id,
+                  project: {
+                    ...project,
+                    creator: {
+                      name: authUser?.name || 'You',
+                      image: authUser?.image || '/user.png',
+                    },
+                  },
+                  fundingGoal: 0,
+                  fundingRaised: 0,
+                  fundingCurrency: 'USDC',
+                  fundingEndDate: null,
+                  milestones: [],
+                  voteGoal: 0,
+                  voteProgress: 0,
+                } as any
+              }
             />
           ))}
         </div>

components/dashboard-content.tsx

@@ -8,10 +8,17 @@ import { SiteHeader } from '@/components/site-header';
 import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
 import { useAuthStatus } from '@/hooks/use-auth';
 import data from '../app/dashboard/data.json';
-import React from 'react';
+import React, { useState } from 'react';
+import { FamilyWalletButton } from '@/components/wallet/FamilyWalletButton';
+import {
+  FamilyWalletDrawer,
+  DrawerView,
+} from '@/components/wallet/FamilyWalletDrawer';
 
 export function DashboardContent() {
   const { user, isLoading } = useAuthStatus();
+  const [familyDrawerOpen, setFamilyDrawerOpen] = useState(false);
+  const [drawerView, setDrawerView] = useState<DrawerView>('main');
 
   if (isLoading) {
     return <div>Loading...</div>;
@@ -47,6 +54,19 @@ export function DashboardContent() {
             </div>
           </div>
         </div>
+
+        {/* Family Wallet Components */}
+        <FamilyWalletButton
+          onOpenDrawer={view => {
+            if (view) setDrawerView(view);
+            setFamilyDrawerOpen(true);
+          }}
+        />
+        <FamilyWalletDrawer
+          open={familyDrawerOpen}
+          initialView={drawerView}
+          onOpenChange={setFamilyDrawerOpen}
+        />
       </SidebarInset>
     </SidebarProvider>
   );

components/landing-page/Explore.tsx

@@ -11,7 +11,6 @@ import type { Hackathon } from '@/lib/api/hackathons';
 import { Skeleton } from '@/components/ui/skeleton';
 import { useProjects } from '@/features/projects/hooks/use-project';
 import ProjectCard from '@/features/projects/components/ProjectCard';
-import { mapCrowdfundingToCardData } from '@/features/projects/utils/card-mappers';
 
 const ProjectCardSkeleton = () => (
   <div className='font-inter flex w-full max-w-full flex-col gap-4 rounded-[8px] border border-gray-900 bg-[#030303] p-4 sm:p-5'>
@@ -209,7 +208,7 @@ export default function Explore() {
                 <ProjectCard
                   isFullWidth={true}
                   key={project.id}
-                  data={mapCrowdfundingToCardData(project)}
+                  data={project}
                 />
               ))
             )}

components/landing-page/Hero2.tsx

@@ -12,6 +12,7 @@ import Image from 'next/image';
 import { BoundlessButton } from '../buttons';
 import HackathonCard from '@/components/landing-page/hackathon/HackathonCard';
 import ProjectCard from '@/features/projects/components/ProjectCard';
+import { Crowdfunding } from '@/features/projects/types';
 
 const BRAND_COLOR = '#a7f950';
 
@@ -217,54 +218,62 @@ export default function Hero2() {
 
           <div className='absolute top-0 left-1/2 z-20 w-80 -translate-x-1/2 transform cursor-pointer rounded-2xl shadow-xl transition-transform duration-300 hover:scale-105'>
             <ProjectCard
-              data={{
-                id: 'project-1',
-                slug: 'solar-power-initiative',
-                title: 'Solar Power Initiative',
-                vision:
-                  'Revolutionary solar energy solution for rural communities',
-                banner: '/banner.png',
-                logo: '/bitmed.png',
-                category: 'Sustainability',
-                creator: {
-                  name: 'Green Energy Team',
-                  image: '/bitmed.png',
-                },
-                status: 'Funding',
-                stats: {
-                  funding: {
-                    raised: 25000,
-                    goal: 100000,
-                    currency: 'USD',
+              data={
+                {
+                  id: 'project-1',
+                  slug: 'solar-power-initiative',
+                  fundingGoal: 100000,
+                  fundingRaised: 25000,
+                  fundingCurrency: 'USD',
+                  fundingEndDate: new Date(
+                    Date.now() + 15 * 24 * 60 * 60 * 1000
+                  ).toISOString(),
+                  voteGoal: 500,
+                  _count: { votes: 450 },
+                  project: {
+                    title: 'Solar Power Initiative',
+                    vision:
+                      'Revolutionary solar energy solution for rural communities',
+                    banner: '/banner.png',
+                    logo: '/bitmed.png',
+                    category: 'Sustainability',
+                    status: 'ACTIVE',
+                    creator: {
+                      name: 'Green Energy Team',
+                      image: '/bitmed.png',
+                    },
                   },
-                  votes: { current: 450, goal: 500 },
-                  daysLeft: 15,
-                },
-              }}
+                } as any as Crowdfunding
+              }
             />
           </div>
 
           <div className='absolute top-20 right-0 z-10 w-72 rotate-3 transform cursor-pointer rounded-2xl shadow-xl transition-transform duration-300 hover:rotate-0'>
             <ProjectCard
-              data={{
-                id: 'project-2',
-                slug: 'ai-learning-platform',
-                title: 'AI Learning Platform',
-                vision:
-                  'Democratizing AI education through interactive learning',
-                banner: '/banner.png',
-                logo: '/bitmed.png',
-                category: 'Education',
-                creator: {
-                  name: 'AI Research Lab',
-                  image: '/bitmed.png',
-                },
-                status: 'Validation',
-                stats: {
-                  votes: { current: 320, goal: 500 },
-                  daysLeft: 8,
-                },
-              }}
+              data={
+                {
+                  id: 'project-2',
+                  slug: 'ai-learning-platform',
+                  voteGoal: 500,
+                  _count: { votes: 320 },
+                  fundingEndDate: new Date(
+                    Date.now() + 8 * 24 * 60 * 60 * 1000
+                  ).toISOString(),
+                  project: {
+                    title: 'AI Learning Platform',
+                    vision:
+                      'Democratizing AI education through interactive learning',
+                    banner: '/banner.png',
+                    logo: '/bitmed.png',
+                    category: 'Education',
+                    status: 'IDEA',
+                    creator: {
+                      name: 'AI Research Lab',
+                      image: '/bitmed.png',
+                    },
+                  },
+                } as any as Crowdfunding
+              }
             />
           </div>
 

components/landing-page/navbar.tsx

@@ -29,7 +29,7 @@ import { cn } from '@/lib/utils';
 import { BoundlessButton } from '../buttons';
 import { useProtectedAction } from '@/hooks/use-protected-action';
 import WalletRequiredModal from '@/components/wallet/WalletRequiredModal';
-import { WalletButton } from '../wallet/WalletButton';
+import { WalletTrigger } from '../wallet/WalletTrigger';
 import { NotificationBell } from '../notifications/NotificationBell';
 import CreateProjectModal from '@/features/projects/components/CreateProjectModal';
 
@@ -73,7 +73,7 @@ export function Navbar() {
 
   return (
     <nav className='sticky top-0 z-50 border-b border-white/10 bg-[#030303]/95 shadow-lg shadow-black/20 backdrop-blur-xl'>
-      <div className='mx-auto max-w-[1440px] px-5 md:px-[50px] lg:px-[100px]'>
+      <div className='mx-auto px-5 md:px-[50px]'>
         <div className='flex h-16 items-center justify-between gap-4'>
           {/* Logo */}
           <Logo />
@@ -209,7 +209,7 @@ function AuthenticatedActions() {
   return (
     <>
       <div className='flex items-center gap-2'>
-        <WalletButton />
+        <WalletTrigger variant='icon' drawerType='sheet' />
 
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
@@ -448,7 +448,7 @@ const MobileMenu = ({
                   <LoadingSkeleton />
                 ) : (
                   <>
-                    <WalletButton />
+                    <WalletTrigger variant='icon' drawerType='family' />
                     {user?.username && (
                       <Link
                         href={`/profile/${user.username}`}

components/profile/ProjectList.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { mapCrowdfundingProjectToCardData } from '@/features/projects/utils/card-mappers';
 import ProjectCard from '@/features/projects/components/ProjectCard';
 import { CrowdfundingProject } from '@/features/projects/types';
 
@@ -24,7 +23,24 @@ export function ProjectList({ projects, activeTab }: ProjectListProps) {
         <ProjectCard
           key={project.id}
           isFullWidth={true}
-          data={mapCrowdfundingProjectToCardData(project)}
+          data={
+            {
+              id: project.id,
+              slug: project.id,
+              project: project,
+              fundingGoal: project.funding?.goal || 0,
+              fundingRaised: project.funding?.raised || 0,
+              fundingCurrency: project.funding?.currency || 'USDC',
+              fundingEndDate: project.funding?.endDate || null,
+              milestones:
+                project.milestones?.map(m => ({
+                  ...m,
+                  reviewStatus: m.status,
+                })) || [],
+              voteGoal: project.voting?.goal || 0,
+              voteProgress: project.voting?.current || 0,
+            } as any
+          }
         />
       ))}
     </div>

components/profile/ProjectsTab.tsx

@@ -7,7 +7,6 @@ import { useWindowSize } from '@/hooks/use-window-size';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import Link from 'next/link';
 import { GetMeResponse } from '@/lib/api/types';
-import { mapProjectToCardData } from '@/features/projects/utils/card-mappers';
 import ProjectCard from '@/features/projects/components/ProjectCard';
 
 interface ProjectsTabProps {
@@ -110,11 +109,26 @@ export default function ProjectsTab({ user }: ProjectsTabProps) {
               <ProjectCard
                 newTab={true}
                 isFullWidth={true}
-                data={mapProjectToCardData(project, {
-                  // Yes, `ProjectsTab` is for "Your Projects", so creator is the user.
-                  name: user.user.name || 'User',
-                  image: user.user.image || '/avatar.png',
-                })}
+                data={
+                  {
+                    id: project.id,
+                    slug: project.id,
+                    project: {
+                      ...project,
+                      creator: {
+                        name: user.user.name || 'User',
+                        image: user.user.image || '/avatar.png',
+                      },
+                    } as any,
+                    fundingGoal: 0,
+                    fundingRaised: 0,
+                    fundingCurrency: 'USDC',
+                    fundingEndDate: null,
+                    milestones: [],
+                    voteGoal: 0,
+                    voteProgress: 0,
+                  } as any
+                }
               />
             </Link>
           ))}

components/profile/ProjectsTabPublic.tsx

@@ -4,7 +4,6 @@ import React from 'react';
 import { PublicUserProfile } from '@/features/projects/types';
 import Link from 'next/link';
 import ProjectCard from '@/features/projects/components/ProjectCard';
-import { mapProjectToCardData } from '@/features/projects/utils/card-mappers';
 
 interface ProjectsTabProps {
   user: PublicUserProfile;
@@ -38,10 +37,26 @@ export default function ProjectsTabPublic({ user }: ProjectsTabProps) {
           <Link key={project.id} href={`/projects/${project.id}`}>
             <ProjectCard
               isFullWidth={true}
-              data={mapProjectToCardData(project, {
-                name: user.name,
-                image: user.image,
-              })}
+              data={
+                {
+                  id: project.id,
+                  slug: project.id,
+                  project: {
+                    ...project,
+                    creator: {
+                      name: user.name,
+                      image: user.image,
+                    },
+                  },
+                  fundingGoal: 0,
+                  fundingRaised: 0,
+                  fundingCurrency: 'USDC',
+                  fundingEndDate: null,
+                  milestones: [],
+                  voteGoal: 0,
+                  voteProgress: 0,
+                } as any
+              }
             />
           </Link>
         ))}