Skip to content

Commit b86dfe8

Browse files
0xdevcollins0xdevcollins
committed
feat: enhance project submission flow with new components and UI updates
- Updated primary color in globals.css for better visibility. - Refactored UserPage to dynamically greet users based on authentication state. - Introduced Loading component for improved user experience during data fetching. - Enhanced ProjectCard to utilize project sheet store for better state management. - Added new components for project initialization, milestone management, and validation flow. - Improved ProjectSubmissionForm to handle new data structure and validation. - Updated stepper and UI elements for a more cohesive design across the project submission process.
1 parent 23c15f3 commit b86dfe8

28 files changed

Lines changed: 1425 additions & 2578 deletions

‎STELLAR_WALLETS_KIT_IMPLEMENTATION.md‎

Lines changed: 0 additions & 456 deletions
This file was deleted.

‎app/globals.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
--card-foreground: oklch(0.145 0 0);
5757
--popover: oklch(1 0 0);
5858
--popover-foreground: oklch(0.145 0 0);
59-
--primary: oklch(0.95 0.24 125);
59+
--primary: #a7f950;
6060
--primary-foreground: #020502;
6161
--secondary: oklch(0.97 0 0);
6262
--secondary-foreground: oklch(0.205 0 0);

‎app/user/page.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,26 @@
11
'use client';
22
import { PriceDisplay } from '@/components/PriceDisplay';
3-
import { Coins, History } from 'lucide-react';
43
import Card from '@/components/card';
54
import RecentProjects from '@/components/overview/RecentProjects';
65
import { mockProjects } from '@/lib/mock';
76
import RecentContributions from '@/components/overview/ReecntContributions';
87
import GrantHistory from '@/components/overview/GrantHistory';
9-
import { BoundlessButton } from '@/components/buttons';
10-
import { getMe } from '@/lib/api/auth';
118
import PageTransition from '@/components/PageTransition';
9+
import { Coins, History } from 'lucide-react';
10+
import { useAuth } from '@/hooks/use-auth';
1211

1312
export default function UserPage() {
13+
const { user } = useAuth();
1414
return (
1515
<PageTransition>
1616
<div className='min-h-screen'>
1717
<div className='p-4 sm:p-6 lg:p-8 max-w-7xl mx-auto'>
1818
{/* Header Section */}
1919
<div className='mb-8'>
20-
<h1 className='text-2xl sm:text-3xl lg:text-[32px] font-medium leading-[120%] tracking-[-0.64px] text-white'>
21-
Hello, Collins
20+
<h1 className='text-2xl sm:text-3xl lg:text-[32px] font-medium leading-[120%] tracking-[-0.64px] text-white '>
21+
Hello, {user?.name?.split(' ')[0]}
2222
</h1>
2323
</div>
24-
<BoundlessButton onClick={() => getMe()}>
25-
Get user data
26-
</BoundlessButton>
2724
{/* Stats Cards Grid */}
2825
<div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8'>
2926
<Card

‎components/Loading.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react';
2+
import LoadingSpinner from './LoadingSpinner';
3+
4+
const Loading = () => {
5+
return (
6+
<div className='flex justify-center items-center h-screen absolute -top-8 -left-16 -right-16 -bottom-8 bg-[rgba(28,28,28,0.64)] backdrop-blur-[7px]'>
7+
<LoadingSpinner size='xl' className='text-white' />
8+
</div>
9+
);
10+
};
11+
12+
export default Loading;

‎components/buttons/BoundlessButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const boundlessButtonVariants = cva(
1616
destructive:
1717
'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
1818
outline:
19-
'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
19+
'border border-[#2B2B2B] text-white bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
2020
secondary:
2121
'bg-white/30 text-white shadow-xs hover:bg-white/40 border-[0.5px] border-[#484848]',
2222
ghost:

‎components/layout/header.tsx‎

Lines changed: 81 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -6,74 +6,77 @@ import { BoundlessButton } from '../buttons';
66
import { Plus, Search, Menu } from 'lucide-react';
77
import { SidebarTrigger } from '../ui/sidebar';
88
import Image from 'next/image';
9-
import BoundlessSheet from '../sheet/boundless-sheet';
9+
// import BoundlessSheet from '../sheet/boundless-sheet';
1010
import { motion } from 'framer-motion';
1111
import { fadeInUp, slideInFromLeft, slideInFromRight } from '@/lib/motion';
1212
import WalletConnectButton from '../wallet/WalletConnectButton';
13-
import ProjectSubmissionForm from '../project/ProjectSubmissionForm';
14-
import ProjectSubmissionLoading from '../project/ProjectSubmissionLoading';
15-
import ProjectSubmissionSuccess from '../project/ProjectSubmissionSuccess';
16-
import { Stepper } from '../stepper';
13+
// import ProjectSubmissionForm from '../project/ProjectSubmissionForm';
14+
// import ProjectSubmissionLoading from '../project/ProjectSubmissionLoading';
15+
// import ProjectSubmissionSuccess from '../project/ProjectSubmissionSuccess';
16+
// import { Stepper } from '../stepper';
17+
import { ProjectSheetFlow } from '../project';
18+
import { useProjectSheetStore } from '@/lib/stores/project-sheet-store';
1719

18-
type Step = {
19-
title: string;
20-
description: string;
21-
state: 'pending' | 'active' | 'completed';
22-
};
20+
// type Step = {
21+
// title: string;
22+
// description: string;
23+
// state: 'pending' | 'active' | 'completed';
24+
// };
2325

24-
const initialSteps: Step[] = [
25-
{
26-
title: 'Initialize',
27-
description: 'Submit your project idea to kickstart your campaign journey.',
28-
state: 'active',
29-
},
30-
{
31-
title: 'Project Details',
32-
description: 'Provide detailed information about your project.',
33-
state: 'pending',
34-
},
35-
{
36-
title: 'Review & Submit',
37-
description: 'Review your submission and finalize your entry.',
38-
state: 'pending',
39-
},
40-
];
26+
// const initialSteps: Step[] = [
27+
// {
28+
// title: 'Initialize',
29+
// description: 'Submit your project idea to kickstart your campaign journey.',
30+
// state: 'active',
31+
// },
32+
// {
33+
// title: 'Project Details',
34+
// description: 'Provide detailed information about your project.',
35+
// state: 'pending',
36+
// },
37+
// {
38+
// title: 'Review & Submit',
39+
// description: 'Review your submission and finalize your entry.',
40+
// state: 'pending',
41+
// },
42+
// ];
4143

4244
const Header = () => {
4345
const [open, setOpen] = useState(false);
44-
const [submissionStatus, setSubmissionStatus] = useState('idle');
45-
const [steps, setSteps] = useState<Step[]>(initialSteps);
46+
const sheet = useProjectSheetStore();
47+
// const [submissionStatus, setSubmissionStatus] = useState('idle');
48+
// const [steps, setSteps] = useState<Step[]>(initialSteps);
4649

47-
const handleSuccess = () => {
48-
setSubmissionStatus('success');
49-
setSteps(prevSteps =>
50-
prevSteps.map((step, index) => {
51-
if (index === 0) {
52-
return { ...step, state: 'completed' };
53-
}
54-
if (index === 1) {
55-
return { ...step, state: 'active' };
56-
}
57-
return step;
58-
})
59-
);
60-
};
50+
// const handleSuccess = () => {
51+
// setSubmissionStatus('success');
52+
// setSteps(prevSteps =>
53+
// prevSteps.map((step, index) => {
54+
// if (index === 0) {
55+
// return { ...step, state: 'completed' };
56+
// }
57+
// if (index === 1) {
58+
// return { ...step, state: 'active' };
59+
// }
60+
// return step;
61+
// })
62+
// );
63+
// };
6164

62-
const renderContent = () => {
63-
switch (submissionStatus) {
64-
case 'submitting':
65-
return <ProjectSubmissionLoading />;
66-
case 'success':
67-
return <ProjectSubmissionSuccess />;
68-
default:
69-
return (
70-
<ProjectSubmissionForm
71-
onSuccess={handleSuccess}
72-
setSubmissionStatus={setSubmissionStatus}
73-
/>
74-
);
75-
}
76-
};
65+
// const renderContent = () => {
66+
// switch (submissionStatus) {
67+
// case 'submitting':
68+
// return <ProjectSubmissionLoading />;
69+
// case 'success':
70+
// return <ProjectSubmissionSuccess />;
71+
// default:
72+
// return (
73+
// <ProjectSubmissionForm
74+
// onSuccess={handleSuccess}
75+
// setSubmissionStatus={setSubmissionStatus}
76+
// />
77+
// );
78+
// }
79+
// };
7780

7881
return (
7982
<motion.header
@@ -141,7 +144,10 @@ const Header = () => {
141144
size='default'
142145
icon={<Plus className='w-4 h-4 sm:w-5 sm:h-5' />}
143146
iconPosition='right'
144-
onClick={() => setOpen(true)}
147+
onClick={() => {
148+
sheet.openInitialize();
149+
setOpen(true);
150+
}}
145151
>
146152
New Project
147153
</BoundlessButton>
@@ -156,13 +162,23 @@ const Header = () => {
156162
/>
157163
</motion.div>
158164
</motion.div>
159-
160-
<BoundlessSheet open={open} setOpen={setOpen}>
161-
<div className='flex'>
162-
<Stepper steps={steps} />
163-
<div className='flex-1'>{renderContent()}</div>
165+
<ProjectSheetFlow
166+
open={open || sheet.open}
167+
onOpenChange={o => {
168+
setOpen(o);
169+
sheet.setOpen(o);
170+
}}
171+
/>
172+
{/* <BoundlessSheet open={open} setOpen={setOpen}>
173+
<div className='flex justify-between'>
174+
<div className='flex-1'>
175+
<Stepper steps={steps} />
176+
</div>
177+
<div className='flex-1'>
178+
<div className='flex-1'>{renderContent()}</div>
179+
</div>
164180
</div>
165-
</BoundlessSheet>
181+
</BoundlessSheet> */}
166182
</motion.header>
167183
);
168184
};

‎components/project-card.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import React from 'react';
33
import { Project } from '@/types/project';
44
import { BoundlessButton } from '@/components/buttons';
5+
import { useProjectSheetStore } from '@/lib/stores/project-sheet-store';
56
import {
67
ThumbsUp,
78
UserIcon,
@@ -48,6 +49,7 @@ const ProjectCard: React.FC<ProjectCardProps> = ({
4849
showCreatorName = false,
4950
showEllipsisMenu = false,
5051
}) => {
52+
const sheet = useProjectSheetStore();
5153
const getStatusColor = (status: string) => {
5254
switch (status.toLowerCase()) {
5355
case 'pending':
@@ -308,7 +310,7 @@ const ProjectCard: React.FC<ProjectCardProps> = ({
308310
variant='secondary'
309311
size='sm'
310312
className='flex-1 border-[1.4px] border-[#2B2B2B] rounded-[10px] bg-[#212121] hover:bg-[#2A2A2A] disabled:bg-[#212121] disabled:border-[#2B2B2B] disabled:text-[#484848]'
311-
onClick={() => onVote?.(project.id)}
313+
onClick={() => sheet.openValidate(project)}
312314
disabled={
313315
project.status === 'under_review' ||
314316
project.status === 'rejected' ||

0 commit comments

Comments
 (0)