Skip to content

Commit 40e4d1d

Browse files
whevalwheval
authored
feat: implement create project modal (#305)
* feat: implement create project modal * feat: implement steps
1 parent 5b18cfd commit 40e4d1d

12 files changed

Lines changed: 2155 additions & 149 deletions

File tree

‎app/test/page.tsx‎

Lines changed: 29 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,41 @@
11
'use client';
2-
32
import { useState } from 'react';
4-
import LaunchCampaignFlow from '@/components/project/LaunchCampaignFlow';
5-
import BoundlessSheet from '@/components/sheet/boundless-sheet';
6-
import { Button } from '@/components/ui/button';
7-
import { Rocket } from 'lucide-react';
8-
import { useWalletProtection } from '@/hooks/use-wallet-protection';
9-
import WalletRequiredModal from '@/components/wallet/WalletRequiredModal';
10-
11-
export default function TestPage() {
12-
const [showLaunchFlow, setShowLaunchFlow] = useState(false);
13-
14-
// Wallet protection hook
15-
const {
16-
requireWallet,
17-
showWalletModal,
18-
handleWalletConnected,
19-
closeWalletModal,
20-
} = useWalletProtection({
21-
actionName: 'test launch campaign',
22-
});
23-
24-
const handleOpenModal = () => {
25-
requireWallet(() => setShowLaunchFlow(true));
26-
};
27-
28-
const handleCloseModal = () => {
29-
setShowLaunchFlow(false);
3+
import AuthLoadingState from '@/components/auth/AuthLoadingState';
4+
import { BoundlessButton } from '@/components/buttons';
5+
6+
export default function TestLoadingPage() {
7+
const [showLoading, setShowLoading] = useState(false);
8+
9+
const handleShowLoading = () => {
10+
setShowLoading(true);
11+
// Simulate loading for 3 seconds
12+
setTimeout(() => {
13+
setShowLoading(false);
14+
}, 3000);
3015
};
3116

3217
return (
33-
<div className='flex min-h-screen items-center justify-center bg-gray-900'>
34-
<div className='space-y-6 text-center'>
35-
<h1 className='mb-8 text-4xl font-bold text-white'>
36-
Launch Campaign Test
37-
</h1>
38-
39-
<p className='mb-8 text-gray-300'>
40-
Click the button below to test the Launch Campaign feature
18+
<div className='flex min-h-screen items-center justify-center bg-gray-900 p-4'>
19+
<div className='space-y-4 text-center'>
20+
<h1 className='text-2xl font-bold text-white'>Loading State Test</h1>
21+
<p className='text-gray-300'>
22+
Test the animated loading state across different screen sizes
4123
</p>
4224

43-
<Button
44-
onClick={handleOpenModal}
45-
size='lg'
46-
className='bg-green-600 px-8 py-4 text-lg text-white hover:bg-green-700'
47-
>
48-
<Rocket className='mr-2 h-6 w-6' />
49-
Test Launch Campaign
50-
</Button>
25+
<BoundlessButton onClick={handleShowLoading} className='mt-4'>
26+
Test Loading State
27+
</BoundlessButton>
5128

52-
{/* Debug info */}
53-
<div className='text-sm text-white'>
54-
Modal state: {showLaunchFlow ? 'Open' : 'Closed'}
55-
</div>
29+
{showLoading && <AuthLoadingState message='Testing loading...' />}
5630

57-
{/* Launch Campaign Flow Modal */}
58-
<BoundlessSheet
59-
open={showLaunchFlow}
60-
setOpen={handleCloseModal}
61-
contentClassName='h-full'
62-
title='Review Campaign'
63-
>
64-
<LaunchCampaignFlow
65-
projectId='test-project-123'
66-
onBack={handleCloseModal}
67-
onComplete={handleCloseModal}
68-
/>
69-
</BoundlessSheet>
70-
71-
{/* Wallet Required Modal */}
72-
<WalletRequiredModal
73-
open={showWalletModal}
74-
onOpenChange={closeWalletModal}
75-
actionName='test launch campaign'
76-
onWalletConnected={handleWalletConnected}
77-
/>
31+
<div className='mt-8 text-sm text-gray-400'>
32+
<p>Test on different screen sizes:</p>
33+
<ul className='mt-2 list-inside list-disc space-y-1'>
34+
<li>Mobile (320px - 768px)</li>
35+
<li>Tablet (768px - 1024px)</li>
36+
<li>Desktop (1024px+)</li>
37+
</ul>
38+
</div>
7839
</div>
7940
</div>
8041
);

‎components/form/FormHint.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
'use client';
2+
3+
import { Info } from 'lucide-react';
4+
import {
5+
Tooltip,
6+
TooltipTrigger,
7+
TooltipContent,
8+
} from '@/components/ui/tooltip';
9+
import { cn } from '@/lib/utils';
10+
11+
type FormHintProps = {
12+
hint: React.ReactNode;
13+
className?: string;
14+
side?: 'top' | 'right' | 'bottom' | 'left';
15+
sideOffset?: number;
16+
iconClassName?: string;
17+
};
18+
19+
export default function FormHint({
20+
hint,
21+
className,
22+
side = 'top',
23+
sideOffset = 6,
24+
iconClassName,
25+
}: FormHintProps) {
26+
return (
27+
<Tooltip>
28+
<TooltipTrigger asChild>
29+
<button
30+
type='button'
31+
aria-label='Field help'
32+
className={cn(
33+
'inline-flex items-center justify-center rounded text-[#B5B5B5] hover:text-white focus:outline-none',
34+
className
35+
)}
36+
>
37+
<Info className={cn('mt-[3px] h-4 w-4', iconClassName)} />
38+
</button>
39+
</TooltipTrigger>
40+
<TooltipContent
41+
side={side}
42+
sideOffset={sideOffset}
43+
className='max-w-sm whitespace-normal'
44+
>
45+
{hint}
46+
</TooltipContent>
47+
</Tooltip>
48+
);
49+
}

‎components/landing-page/navbar.tsx‎

Lines changed: 39 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -199,9 +199,7 @@ export function Navbar() {
199199
) : isAuthenticated ? (
200200
<AuthenticatedNav user={user} />
201201
) : (
202-
<BoundlessButton>
203-
<Link href='/auth'>Get Started</Link>
204-
</BoundlessButton>
202+
<UnauthenticatedNav />
205203
)}
206204
</div>
207205
<MobileMenu
@@ -360,6 +358,44 @@ function AuthenticatedNav({
360358
);
361359
}
362360

361+
// In development, show a lightweight CTA that opens CreateProjectModal
362+
// even for unauthenticated users, so designers/QA can test the flow.
363+
function UnauthenticatedNav() {
364+
const [createProjectModalOpen, setCreateProjectModalOpen] = useState(false);
365+
366+
const showDevAddProject =
367+
process.env.NODE_ENV !== 'production' &&
368+
(process.env.NEXT_PUBLIC_SHOW_ADD_PROJECT_FOR_GUESTS === 'true' || true);
369+
370+
if (!showDevAddProject) {
371+
return (
372+
<BoundlessButton>
373+
<Link href='/auth'>Get Started</Link>
374+
</BoundlessButton>
375+
);
376+
}
377+
378+
return (
379+
<div className='flex items-center space-x-3'>
380+
<BoundlessButton
381+
variant='outline'
382+
onClick={() => setCreateProjectModalOpen(true)}
383+
className='border-white/20 text-white hover:bg-white/10'
384+
>
385+
<Plus className='mr-2 h-4 w-4' />
386+
Add Project
387+
</BoundlessButton>
388+
<BoundlessButton>
389+
<Link href='/auth'>Sign in</Link>
390+
</BoundlessButton>
391+
<CreateProjectModal
392+
open={createProjectModalOpen}
393+
setOpen={setCreateProjectModalOpen}
394+
/>
395+
</div>
396+
);
397+
}
398+
363399
function MobileMenu({
364400
isAuthenticated,
365401
isLoading,

0 commit comments

Comments
 (0)