deep-stack/laconic-deployer-frontend
3
0
Fork 0
forked from NasSharaf/laconic-deployer-frontend
Code Pull Requests Activity

working

Browse Source
This commit is contained in:
Your Name 2025-08-21 16:20:52 +00:00
parent ace6f04064
commit 7cb0a0048b
9 changed files with 903 additions and 452 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

310
apps/deploy-fe/src/app/(web3-authenticated)/(dashboard)/projects/[provider]/ps/(create)/cr/page.tsx
View File

@ -1,15 +1,15 @@
'use client'
import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import { X } from 'lucide-react'
import { useTheme } from 'next-themes'
import { useOnboarding } from '@/components/onboarding/store'
import { ConnectStep } from '@/components/onboarding/connect-step/connect-step'
import { LaconicMark } from '@/components/assets/laconic-mark'
import { ConfigureStep } from '@/components/onboarding/configure-step/configure-step'
import { ConnectStep } from '@/components/onboarding/connect-step/connect-step'
import { DeployStep } from '@/components/onboarding/deploy-step/deploy-step'
import { SuccessStep } from '@/components/onboarding/success-step/success-step'
import { LaconicMark } from '@/components/assets/laconic-mark'
import { useOnboarding } from '@/components/onboarding/useOnboarding'
import { X } from 'lucide-react'
import { useTheme } from 'next-themes'
import { useRouter } from 'next/navigation'
import { useEffect, useState } from 'react'
/**
* Parent component for the onboarding flow
@ -19,26 +19,26 @@ export default function CreateProjectFlow() {
const router = useRouter()
const { resolvedTheme } = useTheme()
const [mounted, setMounted] = useState(false)
const { currentStep, setCurrentStep, resetOnboarding } = useOnboarding()
// Handle hydration mismatch by waiting for mount
useEffect(() => {
setMounted(true)
}, [])
// Reset onboarding state when the component unmounts (optional)
useEffect(() => {
return () => {
// Optional cleanup actions
}
}, [resetOnboarding])
// Handle closing the modal
const handleClose = () => {
router.push('/projects')
}
// Navigate directly to a specific step
const navigateToStep = (step: 'connect' | 'configure' | 'deploy') => {
setCurrentStep(step)
@ -48,102 +48,216 @@ export default function CreateProjectFlow() {
if (!mounted) {
return null
}
// Determine if dark mode is active
const isDarkMode = resolvedTheme === 'dark'
return (
<div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4">
{/* Fixed dimensions modal container */}
<div className={`${isDarkMode ? 'bg-black' : 'bg-white'} rounded-xl overflow-hidden flex shadow-2xl w-[1000px] h-[620px]`}>
<div
className={`${isDarkMode ? 'bg-black' : 'bg-white'} rounded-xl overflow-hidden flex shadow-2xl w-[1000px] h-[620px]`}
>
{/* Left sidebar with fixed width */}
<div className={`w-[280px] min-w-[280px] ${isDarkMode ? 'bg-zinc-900' : 'bg-zinc-50'} p-8 relative overflow-hidden border-r ${isDarkMode ? 'border-zinc-800' : 'border-zinc-200'}`}>
<div
className={`w-[280px] min-w-[280px] ${isDarkMode ? 'bg-zinc-900' : 'bg-zinc-50'} p-8 relative overflow-hidden border-r ${isDarkMode ? 'border-zinc-800' : 'border-zinc-200'}`}
>
{/* Laconic logo */}
<div className="flex items-center gap-2 mb-12">
<LaconicMark className="h-8 w-8" />
<span className={`${isDarkMode ? 'text-white' : 'text-zinc-900'} text-xl font-bold`}>LACONIC</span>
<span
className={`${isDarkMode ? 'text-white' : 'text-zinc-900'} text-xl font-bold`}
>
LACONIC
</span>
</div>
{/* Steps - clickable */}
<div className="space-y-6">
{/* Connect step */}
<button
<button
className="flex w-full text-left"
onClick={() => navigateToStep('connect')}
>
<div className="mr-4">
<div className={`w-10 h-10 rounded-lg ${currentStep === 'connect'
? (isDarkMode ? 'bg-white' : 'bg-black')
: (isDarkMode ? 'bg-zinc-800' : 'bg-zinc-200')
} flex items-center justify-center`}>
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" className={currentStep === 'connect'
? (isDarkMode ? 'text-black' : 'text-white')
: (isDarkMode ? 'text-zinc-400' : 'text-zinc-600')
}>
<div
className={`w-10 h-10 rounded-lg ${
currentStep === 'connect'
? isDarkMode
? 'bg-white'
: 'bg-black'
: isDarkMode
? 'bg-zinc-800'
: 'bg-zinc-200'
} flex items-center justify-center`}
>
<svg
viewBox="0 0 24 24"
width="20"
height="20"
stroke="currentColor"
strokeWidth="2"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
className={
currentStep === 'connect'
? isDarkMode
? 'text-black'
: 'text-white'
: isDarkMode
? 'text-zinc-400'
: 'text-zinc-600'
}
>
<path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path>
<line x1="8" y1="12" x2="16" y2="12"></line>
</svg>
</div>
<div className={`w-px h-10 ${isDarkMode ? 'bg-zinc-800' : 'bg-zinc-200'} mx-auto mt-2`}></div>
<div
className={`w-px h-10 ${isDarkMode ? 'bg-zinc-800' : 'bg-zinc-200'} mx-auto mt-2`}
></div>
</div>
<div>
<h3 className={`font-medium text-base ${currentStep === 'connect'
? (isDarkMode ? 'text-white' : 'text-zinc-900')
: (isDarkMode ? 'text-zinc-400' : 'text-zinc-600')
}`}>Connect</h3>
<p className={`text-sm ${currentStep === 'connect'
? (isDarkMode ? 'text-zinc-300' : 'text-zinc-700')
: (isDarkMode ? 'text-zinc-500' : 'text-zinc-500')
}`}>Connect and import a GitHub repo</p>
<h3
className={`font-medium text-base ${
currentStep === 'connect'
? isDarkMode
? 'text-white'
: 'text-zinc-900'
: isDarkMode
? 'text-zinc-400'
: 'text-zinc-600'
}`}
>
Connect
</h3>
<p
className={`text-sm ${
currentStep === 'connect'
? isDarkMode
? 'text-zinc-300'
: 'text-zinc-700'
: isDarkMode
? 'text-zinc-500'
: 'text-zinc-500'
}`}
>
Connect and import a GitHub repo
</p>
</div>
</button>
{/* Configure step */}
<button
<button
className="flex w-full text-left"
onClick={() => navigateToStep('configure')}
>
<div className="mr-4">
<div className={`w-10 h-10 rounded-lg ${currentStep === 'configure'
? (isDarkMode ? 'bg-white' : 'bg-black')
: (isDarkMode ? 'bg-zinc-800' : 'bg-zinc-200')
} flex items-center justify-center`}>
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" className={currentStep === 'configure'
? (isDarkMode ? 'text-black' : 'text-white')
: (isDarkMode ? 'text-zinc-400' : 'text-zinc-600')
}>
<div
className={`w-10 h-10 rounded-lg ${
currentStep === 'configure'
? isDarkMode
? 'bg-white'
: 'bg-black'
: isDarkMode
? 'bg-zinc-800'
: 'bg-zinc-200'
} flex items-center justify-center`}
>
<svg
viewBox="0 0 24 24"
width="20"
height="20"
stroke="currentColor"
strokeWidth="2"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
className={
currentStep === 'configure'
? isDarkMode
? 'text-black'
: 'text-white'
: isDarkMode
? 'text-zinc-400'
: 'text-zinc-600'
}
>
<path d="M12 20h9"></path>
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
</svg>
</div>
<div className={`w-px h-10 ${isDarkMode ? 'bg-zinc-800' : 'bg-zinc-200'} mx-auto mt-2`}></div>
<div
className={`w-px h-10 ${isDarkMode ? 'bg-zinc-800' : 'bg-zinc-200'} mx-auto mt-2`}
></div>
</div>
<div>
<h3 className={`font-medium text-base ${currentStep === 'configure'
? (isDarkMode ? 'text-white' : 'text-zinc-900')
: (isDarkMode ? 'text-zinc-400' : 'text-zinc-600')
}`}>Configure</h3>
<p className={`text-sm ${currentStep === 'configure'
? (isDarkMode ? 'text-zinc-300' : 'text-zinc-700')
: (isDarkMode ? 'text-zinc-500' : 'text-zinc-500')
}`}>Define the deployment type</p>
<h3
className={`font-medium text-base ${
currentStep === 'configure'
? isDarkMode
? 'text-white'
: 'text-zinc-900'
: isDarkMode
? 'text-zinc-400'
: 'text-zinc-600'
}`}
>
Configure
</h3>
<p
className={`text-sm ${
currentStep === 'configure'
? isDarkMode
? 'text-zinc-300'
: 'text-zinc-700'
: isDarkMode
? 'text-zinc-500'
: 'text-zinc-500'
}`}
>
Define the deployment type
</p>
</div>
</button>
{/* Deploy step */}
<button
<button
className="flex w-full text-left"
onClick={() => navigateToStep('deploy')}
>
<div className="mr-4">
<div className={`w-10 h-10 rounded-lg ${currentStep === 'deploy' || currentStep === 'success'
? (isDarkMode ? 'bg-white' : 'bg-black')
: (isDarkMode ? 'bg-zinc-800' : 'bg-zinc-200')
} flex items-center justify-center`}>
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" className={currentStep === 'deploy' || currentStep === 'success'
? (isDarkMode ? 'text-black' : 'text-white')
: (isDarkMode ? 'text-zinc-400' : 'text-zinc-600')
}>
<div
className={`w-10 h-10 rounded-lg ${
currentStep === 'deploy' || currentStep === 'success'
? isDarkMode
? 'bg-white'
: 'bg-black'
: isDarkMode
? 'bg-zinc-800'
: 'bg-zinc-200'
} flex items-center justify-center`}
>
<svg
viewBox="0 0 24 24"
width="20"
height="20"
stroke="currentColor"
strokeWidth="2"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
className={
currentStep === 'deploy' || currentStep === 'success'
? isDarkMode
? 'text-black'
: 'text-white'
: isDarkMode
? 'text-zinc-400'
: 'text-zinc-600'
}
>
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
<polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline>
<polyline points="7.5 19.79 7.5 14.6 3 12"></polyline>
@ -154,34 +268,56 @@ export default function CreateProjectFlow() {
</div>
</div>
<div>
<h3 className={`font-medium text-base ${currentStep === 'deploy' || currentStep === 'success'
? (isDarkMode ? 'text-white' : 'text-zinc-900')
: (isDarkMode ? 'text-zinc-400' : 'text-zinc-600')
}`}>Deploy</h3>
<p className={`text-sm ${currentStep === 'deploy' || currentStep === 'success'
? (isDarkMode ? 'text-zinc-300' : 'text-zinc-700')
: (isDarkMode ? 'text-zinc-500' : 'text-zinc-500')
}`}>Review and confirm deployment</p>
<h3
className={`font-medium text-base ${
currentStep === 'deploy' || currentStep === 'success'
? isDarkMode
? 'text-white'
: 'text-zinc-900'
: isDarkMode
? 'text-zinc-400'
: 'text-zinc-600'
}`}
>
Deploy
</h3>
<p
className={`text-sm ${
currentStep === 'deploy' || currentStep === 'success'
? isDarkMode
? 'text-zinc-300'
: 'text-zinc-700'
: isDarkMode
? 'text-zinc-500'
: 'text-zinc-500'
}`}
>
Review and confirm deployment
</p>
</div>
</button>
</div>
{/* Laconic mark (larger, bottom left) */}
<div className="absolute -bottom-2 -left-2 opacity-10">
<LaconicMark className={`w-40 h-40 ${isDarkMode ? 'text-zinc-300' : 'text-zinc-700'}`} />
<LaconicMark
className={`w-40 h-40 ${isDarkMode ? 'text-zinc-300' : 'text-zinc-700'}`}
/>
</div>
</div>
{/* Main content with fixed dimensions and scrolling */}
<div className={`flex-1 ${isDarkMode ? 'bg-black' : 'bg-white'} relative`}>
<div
className={`flex-1 ${isDarkMode ? 'bg-black' : 'bg-white'} relative`}
>
{/* Close button */}
<button
<button
className={`absolute top-4 right-4 ${isDarkMode ? 'text-zinc-400 hover:text-white' : 'text-zinc-600 hover:text-zinc-900'} z-10`}
onClick={handleClose}
>
<X size={24} />
</button>
{/* Scrollable content container */}
<div className="w-full h-full overflow-y-auto">
{currentStep === 'connect' && <ConnectStep />}
@ -189,15 +325,21 @@ export default function CreateProjectFlow() {
{currentStep === 'deploy' && <DeployStep />}
{currentStep === 'success' && <SuccessStep />}
</div>
{/* Progress indicator */}
<div className="absolute bottom-6 left-0 right-0 flex justify-center gap-3">
<div className={`w-12 h-1 rounded-full ${currentStep === 'connect' ? 'bg-blue-600' : (isDarkMode ? 'bg-zinc-700' : 'bg-zinc-300')}`}></div>
<div className={`w-12 h-1 rounded-full ${currentStep === 'configure' ? 'bg-blue-600' : (isDarkMode ? 'bg-zinc-700' : 'bg-zinc-300')}`}></div>
<div className={`w-12 h-1 rounded-full ${currentStep === 'deploy' || currentStep === 'success' ? 'bg-blue-600' : (isDarkMode ? 'bg-zinc-700' : 'bg-zinc-300')}`}></div>
<div
className={`w-12 h-1 rounded-full ${currentStep === 'connect' ? 'bg-blue-600' : isDarkMode ? 'bg-zinc-700' : 'bg-zinc-300'}`}
></div>
<div
className={`w-12 h-1 rounded-full ${currentStep === 'configure' ? 'bg-blue-600' : isDarkMode ? 'bg-zinc-700' : 'bg-zinc-300'}`}
></div>
<div
className={`w-12 h-1 rounded-full ${currentStep === 'deploy' || currentStep === 'success' ? 'bg-blue-600' : isDarkMode ? 'bg-zinc-700' : 'bg-zinc-300'}`}
></div>
</div>
</div>
</div>
</div>
)
}
}

11
apps/deploy-fe/src/app/layout.tsx
View File

@ -1,10 +1,10 @@
import { Providers } from '@/components/providers'
import { ClerkProvider } from '@clerk/nextjs'
import '@workspace/ui/globals.css'
import { AutoSignInIFrameModal } from '@/components/iframe/auto-sign-in'
import { CheckBalanceWrapper } from '@/components/iframe/check-balance-iframe/CheckBalanceWrapper'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import { CheckBalanceWrapper } from '@/components/iframe/check-balance-iframe/CheckBalanceWrapper'
import { AutoSignInIFrameModal } from '@/components/iframe/auto-sign-in'
// Add root metadata with template pattern
export const metadata: Metadata = {
@ -25,14 +25,17 @@ export default function RootLayout({
children
}: Readonly<{ children: React.ReactNode }>) {
return (
<ClerkProvider signInFallbackRedirectUrl="/home">
<ClerkProvider
publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}
signInFallbackRedirectUrl="/home"
>
<html lang="en" suppressHydrationWarning>
<body className={`${inter.className} `} suppressHydrationWarning>
<main>
<Providers>{children}</Providers>
<div style={{ display: 'none' }}>
<AutoSignInIFrameModal />
</div>
</div>
<CheckBalanceWrapper />
</main>
</body>

2
apps/deploy-fe/src/components/onboarding/Onboarding.tsx
View File

@ -10,7 +10,7 @@
import { ConfigureStep } from '@/components/onboarding/configure-step'
import { ConnectStep } from '@/components/onboarding/connect-step'
import { DeployStep } from '@/components/onboarding/deploy-step'
import { useOnboarding } from '@/components/onboarding/store'
import { useOnboarding } from '@/components/onboarding/useOnboarding'
import { ScrollArea } from '@workspace/ui/components/scroll-area'
import { SidebarNav } from './sidebar'

358
apps/deploy-fe/src/components/onboarding/configure-step/configure-step.tsx
View File

@ -1,22 +1,33 @@
// src/components/onboarding/configure-step/configure-step.tsx
'use client'
import { useState, useEffect } from 'react'
import { PlusCircle, Loader2, AlertTriangle, Info } from 'lucide-react'
import { useTheme } from 'next-themes'
import { useOnboarding } from '@/components/onboarding/store'
import { useOnboarding } from '@/components/onboarding/useOnboarding'
import { useGQLClient } from '@/context'
import { useWallet } from '@/context/WalletContext'
import { Button } from '@workspace/ui/components/button'
import { Input } from '@workspace/ui/components/input'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@workspace/ui/components/select'
import { Checkbox } from '@workspace/ui/components/checkbox'
import { Label } from '@workspace/ui/components/label'
import { Alert, AlertDescription } from '@workspace/ui/components/alert'
import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card'
import { Badge } from '@workspace/ui/components/badge'
import { Button } from '@workspace/ui/components/button'
import {
Card,
CardContent,
CardHeader,
CardTitle
} from '@workspace/ui/components/card'
import { Checkbox } from '@workspace/ui/components/checkbox'
import { Input } from '@workspace/ui/components/input'
import { Label } from '@workspace/ui/components/label'
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue
} from '@workspace/ui/components/select'
import { AlertTriangle, Info, Loader2, PlusCircle } from 'lucide-react'
import { useTheme } from 'next-themes'
import { useEffect, useState } from 'react'
import { toast } from 'sonner'
import { adaptDeployers } from '../../../utils/typeAdapters';
import { adaptDeployers } from '../../../utils/typeAdapters'
interface Deployer {
deployerLrn: string
@ -35,42 +46,40 @@ export function ConfigureStep() {
const { nextStep, previousStep, setFormData, formData } = useOnboarding()
const { resolvedTheme } = useTheme()
const [mounted, setMounted] = useState(false)
// Backend data
const [deployers, setDeployers] = useState<Deployer[]>([])
const [organizations, setOrganizations] = useState<Organization[]>([])
const [isLoadingDeployers, setIsLoadingDeployers] = useState(true)
const [isLoadingOrgs, setIsLoadingOrgs] = useState(true)
// Form state
const [deployOption, setDeployOption] = useState<'auction' | 'lrn'>(
formData.deploymentType as ('auction' | 'lrn') || 'lrn' // Default to LRN for simplicity
(formData.deploymentType as 'auction' | 'lrn') || 'lrn' // Default to LRN for simplicity
)
const [numberOfDeployers, setNumberOfDeployers] = useState<string>(
formData.deployerCount || "1"
)
const [maxPrice, setMaxPrice] = useState<string>(
formData.maxPrice || "1000"
formData.deployerCount || '1'
)
const [maxPrice, setMaxPrice] = useState<string>(formData.maxPrice || '1000')
const [selectedLrn, setSelectedLrn] = useState<string>(
formData.selectedLrn || ""
formData.selectedLrn || ''
)
const [selectedOrg, setSelectedOrg] = useState<string>(
formData.selectedOrg || ""
formData.selectedOrg || ''
)
const [envVars, setEnvVars] = useState<{ key: string; value: string; environments: string[] }[]>([
{ key: '', value: '', environments: ['Production'] }
])
const [envVars, setEnvVars] = useState<
{ key: string; value: string; environments: string[] }[]
>([{ key: '', value: '', environments: ['Production'] }])
// Contexts
const gqlClient = useGQLClient()
const { wallet } = useWallet()
// Handle hydration mismatch by waiting for mount
useEffect(() => {
setMounted(true)
}, [])
// Fetch deployers and organizations on mount
useEffect(() => {
if (mounted) {
@ -78,26 +87,35 @@ export function ConfigureStep() {
fetchOrganizations()
}
}, [mounted])
// Initialize environment variables from formData if available
useEffect(() => {
if (formData.environmentVariables && Array.isArray(formData.environmentVariables)) {
setEnvVars(formData.environmentVariables.length > 0 ? formData.environmentVariables : [
{ key: '', value: '', environments: ['Production'] }
])
if (
formData.environmentVariables &&
Array.isArray(formData.environmentVariables)
) {
setEnvVars(
formData.environmentVariables.length > 0
? formData.environmentVariables
: [{ key: '', value: '', environments: ['Production'] }]
)
}
}, [formData.environmentVariables])
// Fetch deployers from backend
const fetchDeployers = async () => {
try {
setIsLoadingDeployers(true)
const deployersData = await gqlClient.getDeployers()
console.log('Available deployers:', deployersData)
setDeployers(adaptDeployers(deployersData.deployers || []));
setDeployers(adaptDeployers(deployersData.deployers || []))
// Auto-select first deployer if available and none selected
if (deployersData.deployers && deployersData.deployers.length > 0 && !selectedLrn) {
if (
deployersData.deployers &&
deployersData.deployers.length > 0 &&
!selectedLrn
) {
setSelectedLrn(deployersData.deployers[0]!.deployerLrn)
}
} catch (error) {
@ -107,7 +125,7 @@ export function ConfigureStep() {
setIsLoadingDeployers(false)
}
}
// Fetch organizations from backend
const fetchOrganizations = async () => {
try {
@ -115,9 +133,13 @@ export function ConfigureStep() {
const orgsData = await gqlClient.getOrganizations()
console.log('Available organizations:', orgsData)
setOrganizations(orgsData.organizations || [])
// Auto-select first organization if available and none selected
if (orgsData.organizations && orgsData.organizations.length > 0 && !selectedOrg) {
if (
orgsData.organizations &&
orgsData.organizations.length > 0 &&
!selectedOrg
) {
setSelectedOrg(orgsData.organizations[0]!.slug)
}
} catch (error) {
@ -127,58 +149,66 @@ export function ConfigureStep() {
setIsLoadingOrgs(false)
}
}
// Add an empty environment variable row
const addEnvVar = () => {
setEnvVars([...envVars, { key: '', value: '', environments: ['Production'] }])
setEnvVars([
...envVars,
{ key: '', value: '', environments: ['Production'] }
])
}
// Remove environment variable row
const removeEnvVar = (index: number) => {
if (envVars.length > 1) {
setEnvVars(envVars.filter((_, i) => i !== index))
}
}
// Update environment variable
const updateEnvVar = (index: number, field: 'key' | 'value', value: string) => {
const updateEnvVar = (
index: number,
field: 'key' | 'value',
value: string
) => {
const newEnvVars = [...envVars]
if (newEnvVars[index]) {
newEnvVars[index][field] = value
}
setEnvVars(newEnvVars)
}
// Toggle environment for variable
const toggleEnvironment = (index: number, environment: string) => {
const newEnvVars = [...envVars]
if (newEnvVars[index]?.environments) {
const currentEnvs = newEnvVars[index].environments
if (currentEnvs.includes(environment)) {
newEnvVars[index].environments = currentEnvs.filter(env => env !== environment)
newEnvVars[index].environments = currentEnvs.filter(
(env) => env !== environment
)
} else {
newEnvVars[index].environments = [...currentEnvs, environment]
}
// Ensure at least one environment is selected
if (newEnvVars[index].environments.length === 0) {
newEnvVars[index].environments = ['Production']
}
setEnvVars(newEnvVars)
}
}
// Toggle deployment option
const toggleDeployOption = (option: 'auction' | 'lrn') => {
setDeployOption(option)
}
// Get selected deployer details
const selectedDeployer = deployers.find(d => d.deployerLrn === selectedLrn)
const selectedDeployer = deployers.find((d) => d.deployerLrn === selectedLrn)
// Validate form
const canProceed = () => {
if (deployOption === 'lrn' && !selectedLrn) return false
@ -186,17 +216,19 @@ export function ConfigureStep() {
if (!wallet?.address) return false
return true
}
// Handle next step
const handleNext = () => {
if (!canProceed()) {
toast.error('Please complete all required fields')
return
}
// Filter out empty environment variables
const validEnvVars = envVars.filter(env => env.key.trim() && env.value.trim())
const validEnvVars = envVars.filter(
(env) => env.key.trim() && env.value.trim()
)
// Save configuration to form data
setFormData({
deploymentType: deployOption,
@ -207,33 +239,58 @@ export function ConfigureStep() {
paymentAddress: wallet?.address,
environmentVariables: validEnvVars
})
nextStep()
}
// Don't render UI until after mount to prevent hydration mismatch
if (!mounted) {
return null
}
// Determine if dark mode is active
const isDarkMode = resolvedTheme === 'dark'
// Get deployment mode info
const isTemplateMode = formData.deploymentMode === 'template'
const selectedItem = isTemplateMode ? formData.template?.name : formData.githubRepo
const selectedItem = isTemplateMode
? formData.template?.name
: formData.githubRepo
return (
<div className="w-full h-full flex flex-col p-8 overflow-y-auto">
{/* Configure icon and header */}
<div className="flex flex-col items-center justify-center mb-8">
<div className="mb-4">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={isDarkMode ? "text-white" : "text-black"}>
<path d="M12 20h9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<svg
width="40"
height="40"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={isDarkMode ? 'text-white' : 'text-black'}
>
<path
d="M12 20h9"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
<h2 className={`text-2xl font-medium text-center mb-2 ${isDarkMode ? "text-white" : "text-zinc-900"}`}>Configure</h2>
<h2
className={`text-2xl font-medium text-center mb-2 ${isDarkMode ? 'text-white' : 'text-zinc-900'}`}
>
Configure
</h2>
<p className={`text-center text-zinc-500 max-w-md`}>
Define the deployment type
</p>
@ -252,7 +309,9 @@ export function ConfigureStep() {
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span className="text-muted-foreground">Type:</span>
<Badge variant="secondary">{isTemplateMode ? 'Template' : 'Repository'}</Badge>
<Badge variant="secondary">
{isTemplateMode ? 'Template' : 'Repository'}
</Badge>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">Source:</span>
@ -268,24 +327,33 @@ export function ConfigureStep() {
{/* Organization Selection */}
<div className="mb-6">
<Label htmlFor="organization" className={`text-sm mb-2 block ${isDarkMode ? 'text-zinc-400' : 'text-zinc-700'}`}>
<Label
htmlFor="organization"
className={`text-sm mb-2 block ${isDarkMode ? 'text-zinc-400' : 'text-zinc-700'}`}
>
Organization *
</Label>
{isLoadingOrgs ? (
<div className="flex items-center justify-center p-3 border rounded-md">
<Loader2 className="h-4 w-4 animate-spin mr-2" />
<span className="text-sm text-muted-foreground">Loading organizations...</span>
<span className="text-sm text-muted-foreground">
Loading organizations...
</span>
</div>
) : organizations.length === 0 ? (
<Alert>
<AlertTriangle className="h-4 w-4" />
<AlertDescription>
No organizations found. You need to be part of at least one organization.
No organizations found. You need to be part of at least one
organization.
</AlertDescription>
</Alert>
) : (
<Select value={selectedOrg} onValueChange={setSelectedOrg}>
<SelectTrigger id="organization" className={isDarkMode ? 'border-zinc-700' : 'border-zinc-300'}>
<SelectTrigger
id="organization"
className={isDarkMode ? 'border-zinc-700' : 'border-zinc-300'}
>
<SelectValue placeholder="Select organization" />
</SelectTrigger>
<SelectContent>
@ -301,41 +369,60 @@ export function ConfigureStep() {
{/* Deployment options */}
<div className="mb-6">
<Label className={`text-sm mb-3 block ${isDarkMode ? 'text-zinc-400' : 'text-zinc-700'}`}>
<Label
className={`text-sm mb-3 block ${isDarkMode ? 'text-zinc-400' : 'text-zinc-700'}`}
>
Deployment Type
</Label>
<div className="grid grid-cols-2 gap-2">
<Button
variant={deployOption === 'lrn' ? "default" : "outline"}
className={`py-3 ${deployOption === 'lrn'
? (isDarkMode ? 'bg-zinc-800 text-white' : 'bg-zinc-800 text-white')
: (isDarkMode ? 'bg-transparent border-zinc-700 text-zinc-400' : 'bg-transparent border-zinc-300 text-zinc-600')}`}
variant={deployOption === 'lrn' ? 'default' : 'outline'}
className={`py-3 ${
deployOption === 'lrn'
? isDarkMode
? 'bg-zinc-800 text-white'
: 'bg-zinc-800 text-white'
: isDarkMode
? 'bg-transparent border-zinc-700 text-zinc-400'
: 'bg-transparent border-zinc-300 text-zinc-600'
}`}
onClick={() => toggleDeployOption('lrn')}
>
Deployer LRN
</Button>
<Button
variant={deployOption === 'auction' ? "default" : "outline"}
className={`py-3 ${deployOption === 'auction'
? (isDarkMode ? 'bg-zinc-800 text-white' : 'bg-zinc-800 text-white')
: (isDarkMode ? 'bg-transparent border-zinc-700 text-zinc-400' : 'bg-transparent border-zinc-300 text-zinc-600')}`}
variant={deployOption === 'auction' ? 'default' : 'outline'}
className={`py-3 ${
deployOption === 'auction'
? isDarkMode
? 'bg-zinc-800 text-white'
: 'bg-zinc-800 text-white'
: isDarkMode
? 'bg-transparent border-zinc-700 text-zinc-400'
: 'bg-transparent border-zinc-300 text-zinc-600'
}`}
onClick={() => toggleDeployOption('auction')}
>
Create Auction
</Button>
</div>
</div>
{deployOption === 'lrn' ? (
/* LRN Deployment Settings */
<div className="mb-6">
<Label htmlFor="lrn" className={`text-sm mb-2 block ${isDarkMode ? 'text-zinc-400' : 'text-zinc-700'}`}>
<Label
htmlFor="lrn"
className={`text-sm mb-2 block ${isDarkMode ? 'text-zinc-400' : 'text-zinc-700'}`}
>
Select Deployer LRN *
</Label>
{isLoadingDeployers ? (
<div className="flex items-center justify-center p-3 border rounded-md">
<Loader2 className="h-4 w-4 animate-spin mr-2" />
<span className="text-sm text-muted-foreground">Loading deployers...</span>
<span className="text-sm text-muted-foreground">
Loading deployers...
</span>
</div>
) : deployers.length === 0 ? (
<Alert>
@ -347,12 +434,20 @@ export function ConfigureStep() {
) : (
<>
<Select value={selectedLrn} onValueChange={setSelectedLrn}>
<SelectTrigger id="lrn" className={isDarkMode ? 'border-zinc-700' : 'border-zinc-300'}>
<SelectTrigger
id="lrn"
className={
isDarkMode ? 'border-zinc-700' : 'border-zinc-300'
}
>
<SelectValue placeholder="Select a deployer" />
</SelectTrigger>
<SelectContent>
{deployers.map((deployer) => (
<SelectItem key={deployer.deployerLrn} value={deployer.deployerLrn}>
<SelectItem
key={deployer.deployerLrn}
value={deployer.deployerLrn}
>
<div className="flex flex-col">
<span>{deployer.deployerLrn}</span>
{deployer.minimumPayment && (
@ -365,15 +460,24 @@ export function ConfigureStep() {
))}
</SelectContent>
</Select>
{/* Deployer Details */}
{selectedDeployer && (
<div className="mt-3 p-3 bg-muted rounded-md">
<div className="text-sm space-y-1">
<div><strong>API URL:</strong> {selectedDeployer.deployerApiUrl}</div>
<div><strong>Base Domain:</strong> {selectedDeployer.baseDomain}</div>
<div>
<strong>API URL:</strong>{' '}
{selectedDeployer.deployerApiUrl}
</div>
<div>
<strong>Base Domain:</strong>{' '}
{selectedDeployer.baseDomain}
</div>
{selectedDeployer.minimumPayment && (
<div><strong>Minimum Payment:</strong> {selectedDeployer.minimumPayment}</div>
<div>
<strong>Minimum Payment:</strong>{' '}
{selectedDeployer.minimumPayment}
</div>
)}
</div>
</div>
@ -385,11 +489,20 @@ export function ConfigureStep() {
/* Auction Settings */
<div className="grid grid-cols-2 gap-4 mb-6">
<div>
<Label htmlFor="deployers" className={`text-sm mb-2 block ${isDarkMode ? 'text-zinc-400' : 'text-zinc-700'}`}>
<Label
htmlFor="deployers"
className={`text-sm mb-2 block ${isDarkMode ? 'text-zinc-400' : 'text-zinc-700'}`}
>
Number of Deployers
</Label>
<Select value={numberOfDeployers} onValueChange={setNumberOfDeployers}>
<SelectTrigger id="deployers" className={isDarkMode ? 'border-zinc-700' : 'border-zinc-300'}>
<Select
value={numberOfDeployers}
onValueChange={setNumberOfDeployers}
>
<SelectTrigger
id="deployers"
className={isDarkMode ? 'border-zinc-700' : 'border-zinc-300'}
>
<SelectValue placeholder="Select number" />
</SelectTrigger>
<SelectContent>
@ -402,11 +515,17 @@ export function ConfigureStep() {
</Select>
</div>
<div>
<Label htmlFor="maxPrice" className={`text-sm mb-2 block ${isDarkMode ? 'text-zinc-400' : 'text-zinc-700'}`}>
<Label
htmlFor="maxPrice"
className={`text-sm mb-2 block ${isDarkMode ? 'text-zinc-400' : 'text-zinc-700'}`}
>
Maximum Price (aint)
</Label>
<Select value={maxPrice} onValueChange={setMaxPrice}>
<SelectTrigger id="maxPrice" className={isDarkMode ? 'border-zinc-700' : 'border-zinc-300'}>
<SelectTrigger
id="maxPrice"
className={isDarkMode ? 'border-zinc-700' : 'border-zinc-300'}
>
<SelectValue placeholder="Select price" />
</SelectTrigger>
<SelectContent>
@ -419,43 +538,58 @@ export function ConfigureStep() {
</div>
</div>
)}
{/* Payment Address */}
<div className="mb-6">
<Label className={`text-sm mb-2 block ${isDarkMode ? 'text-zinc-400' : 'text-zinc-700'}`}>
<Label
className={`text-sm mb-2 block ${isDarkMode ? 'text-zinc-400' : 'text-zinc-700'}`}
>
Payment Address
</Label>
<div className={`p-3 border rounded-md bg-muted ${isDarkMode ? 'border-zinc-700' : 'border-zinc-300'}`}>
<div
className={`p-3 border rounded-md bg-muted ${isDarkMode ? 'border-zinc-700' : 'border-zinc-300'}`}
>
<div className="text-sm font-mono break-all">
{wallet?.address || 'No wallet connected'}
</div>
</div>
</div>
{/* Environment Variables */}
<div className="mb-6">
<Label className={`text-sm font-medium mb-2 block ${isDarkMode ? 'text-white' : 'text-zinc-900'}`}>
<Label
className={`text-sm font-medium mb-2 block ${isDarkMode ? 'text-white' : 'text-zinc-900'}`}
>
Environment Variables
</Label>
<div className={`border rounded-md p-4 ${isDarkMode ? 'border-zinc-700' : 'border-zinc-300'}`}>
<div
className={`border rounded-md p-4 ${isDarkMode ? 'border-zinc-700' : 'border-zinc-300'}`}
>
{envVars.map((envVar, index) => (
<div key={index} className="space-y-2 mb-4 pb-4 border-b border-muted last:border-b-0 last:mb-0 last:pb-0">
<div
key={index}
className="space-y-2 mb-4 pb-4 border-b border-muted last:border-b-0 last:mb-0 last:pb-0"
>
<div className="grid grid-cols-2 gap-2">
<Input
<Input
placeholder="KEY"
value={envVar.key}
onChange={(e) => updateEnvVar(index, 'key', e.target.value)}
className={`bg-transparent ${isDarkMode ? 'border-zinc-700' : 'border-zinc-300'}`}
/>
<Input
<Input
placeholder="VALUE"
value={envVar.value}
onChange={(e) => updateEnvVar(index, 'value', e.target.value)}
onChange={(e) =>
updateEnvVar(index, 'value', e.target.value)
}
className={`bg-transparent ${isDarkMode ? 'border-zinc-700' : 'border-zinc-300'}`}
/>
</div>
<div className="flex items-center gap-4">
<span className="text-xs text-muted-foreground">Environments:</span>
<span className="text-xs text-muted-foreground">
Environments:
</span>
{['Production', 'Preview', 'Development'].map((env) => (
<div key={env} className="flex items-center gap-1">
<Checkbox
@ -481,8 +615,8 @@ export function ConfigureStep() {
</div>
</div>
))}
<Button
variant="outline"
<Button
variant="outline"
className={`w-full mt-2 ${isDarkMode ? 'text-zinc-400 border-zinc-700' : 'text-zinc-600 border-zinc-300'}`}
onClick={addEnvVar}
>
@ -491,17 +625,17 @@ export function ConfigureStep() {
</Button>
</div>
</div>
{/* Navigation buttons */}
<div className="flex justify-between items-center mt-4">
<Button
variant="outline"
<Button
variant="outline"
className={`bg-transparent ${isDarkMode ? 'text-zinc-400 border-zinc-700' : 'text-zinc-600 border-zinc-300'}`}
onClick={previousStep}
>
Previous
</Button>
<Button
<Button
variant="default"
className={`${isDarkMode ? 'bg-zinc-800' : 'bg-zinc-800'} text-white hover:bg-zinc-700`}
onClick={handleNext}
@ -513,4 +647,4 @@ export function ConfigureStep() {
</div>
</div>
)
}
}

310
apps/deploy-fe/src/components/onboarding/connect-step/connect-step.tsx
View File

@ -1,24 +1,36 @@
// src/components/onboarding/connect-step/connect-step.tsx
'use client'
import { useState, useEffect } from 'react'
import { Github, Wallet, CheckCircle2, AlertTriangle, Loader2, ExternalLink, ChevronDown } from 'lucide-react'
import { useTheme } from 'next-themes'
import { SignIn } from '@clerk/nextjs'
import { useOnboarding } from '@/components/onboarding/store'
import { GitHubBackendAuth } from '@/components/GitHubBackendAuth'
import { useOnboarding } from '@/components/onboarding/useOnboarding'
import { AVAILABLE_TEMPLATES, type TemplateDetail } from '@/constants/templates'
import { useAuthStatus } from '@/hooks/useAuthStatus'
import { useRepoData } from '@/hooks/useRepoData'
import type { Template } from '@/types/onboarding'
import { adaptOptionalTemplate } from '@/utils/typeAdapters'
import { SignIn } from '@clerk/nextjs'
import { Alert, AlertDescription } from '@workspace/ui/components/alert'
import { Button } from '@workspace/ui/components/button'
import { Card, CardContent } from '@workspace/ui/components/card'
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger
} from '@workspace/ui/components/collapsible'
import { Input } from '@workspace/ui/components/input'
import { Label } from '@workspace/ui/components/label'
import { Alert, AlertDescription } from '@workspace/ui/components/alert'
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@workspace/ui/components/collapsible'
import {
AlertTriangle,
CheckCircle2,
ChevronDown,
ExternalLink,
Github,
Loader2,
Wallet
} from 'lucide-react'
import { useTheme } from 'next-themes'
import { useEffect, useState } from 'react'
import { toast } from 'sonner'
import { GitHubBackendAuth } from '@/components/GitHubBackendAuth'
import { AVAILABLE_TEMPLATES, type TemplateDetail } from '@/constants/templates'
import { Template } from '@/types/onboarding'
import { adaptOptionalTemplate } from '@/utils/typeAdapters'
interface Repository {
id: string | number
@ -31,18 +43,22 @@ export function ConnectStep() {
const { nextStep, setFormData, formData } = useOnboarding()
const { resolvedTheme } = useTheme()
const [mounted, setMounted] = useState(false)
// Repository vs Template selection
const [selectedRepo, setSelectedRepo] = useState<string>(formData.githubRepo || '')
const [selectedRepo, setSelectedRepo] = useState<string>(
formData.githubRepo || ''
)
const [selectedTemplate, setSelectedTemplate] = useState(
adaptOptionalTemplate(formData.template)
)
const [projectName, setProjectName] = useState<string>(formData.projectName || '')
const [projectName, setProjectName] = useState<string>(
formData.projectName || ''
)
const [isImportMode, setIsImportMode] = useState(true)
// Auth status and warning display
const [showAuthWarning, setShowAuthWarning] = useState(false)
// Auth status hook
const {
clerk,
@ -53,34 +69,34 @@ export function ConnectStep() {
connectWallet,
checkGithubBackendAuth
} = useAuthStatus()
// Repository data
const { repoData: repositories, isLoading: isLoadingRepos } = useRepoData('')
// Handle hydration mismatch by waiting for mount
useEffect(() => {
setMounted(true)
}, [])
// Auto-hide auth warning when fully authenticated
useEffect(() => {
if (isFullyAuthenticated) {
setShowAuthWarning(false)
}
}, [isFullyAuthenticated])
// Handle repository selection
const handleRepoSelect = (repo: string) => {
setSelectedRepo(repo)
setSelectedTemplate(undefined)
setFormData({
setFormData({
githubRepo: repo,
template: undefined,
deploymentMode: 'repository',
projectName
})
}
// Handle template selection
const handleTemplateSelect = (template: TemplateDetail) => {
setSelectedTemplate(template)
@ -90,41 +106,43 @@ export function ConnectStep() {
const suggestedName = `my-${template.name.toLowerCase().replace(/[^a-z0-9]/g, '-')}`
setProjectName(suggestedName)
}
setFormData({
setFormData({
template: template,
githubRepo: '',
deploymentMode: 'template',
projectName: projectName || `my-${template.name.toLowerCase().replace(/[^a-z0-9]/g, '-')}`
projectName:
projectName ||
`my-${template.name.toLowerCase().replace(/[^a-z0-9]/g, '-')}`
})
}
// Handle mode toggle between import and template
const toggleMode = (mode: 'import' | 'template') => {
setIsImportMode(mode === 'import')
// Clear selections when switching modes
if (mode === 'import') {
setSelectedTemplate(undefined)
setFormData({
setFormData({
template: undefined,
deploymentMode: 'repository',
projectName
})
} else {
setSelectedRepo('')
setFormData({
setFormData({
githubRepo: '',
deploymentMode: 'template',
projectName
})
}
}
// Handle project name change
const handleProjectNameChange = (value: string) => {
setProjectName(value)
setFormData({ projectName: value })
}
// Handle wallet connection
const handleConnectWallet = async () => {
try {
@ -135,7 +153,7 @@ export function ConnectStep() {
toast.error('Failed to connect wallet')
}
}
// Handle GitHub backend auth status change
const handleGithubAuthChange = async (isAuthenticated: boolean) => {
await checkGithubBackendAuth()
@ -143,7 +161,7 @@ export function ConnectStep() {
toast.success('GitHub backend authentication completed!')
}
}
// Handle next step
const handleNext = () => {
if (!isFullyAuthenticated) {
@ -163,7 +181,8 @@ export function ConnectStep() {
}
// For repository import, project name is optional but we'll use repo name as fallback
const finalProjectName = projectName.trim() || (isImportMode ? selectedRepo.split('/')[1] : '')
const finalProjectName =
projectName.trim() || (isImportMode ? selectedRepo.split('/')[1] : '')
// Set final form data and proceed
setFormData({
@ -175,48 +194,55 @@ export function ConnectStep() {
nextStep()
}
// Don't render UI until after mount to prevent hydration mismatch
if (!mounted || !isReady) {
return (
<div className="w-full h-full flex items-center justify-center">
<div className="text-center">
<Loader2 className="h-8 w-8 animate-spin mx-auto mb-4" />
<p className="text-sm text-zinc-500">Loading authentication status...</p>
<p className="text-sm text-zinc-500">
Loading authentication status...
</p>
</div>
</div>
)
}
// Determine if dark mode is active
const isDarkMode = resolvedTheme === 'dark'
return (
<div className="w-full h-full flex flex-col p-8 overflow-y-auto">
<div className="max-w-2xl w-full mx-auto">
{/* Header */}
<div className="text-center mb-8">
<h2 className={`text-2xl font-medium ${isDarkMode ? "text-white" : "text-zinc-900"} mb-2`}>
<h2
className={`text-2xl font-medium ${isDarkMode ? 'text-white' : 'text-zinc-900'} mb-2`}
>
Connect
</h2>
<p className="text-zinc-500 mb-6">
Connect and import a GitHub repo or start from a template
</p>
{/* GitHub Account Selector - Only show if multiple accounts */}
{clerk.user?.externalAccounts && clerk.user.externalAccounts.length > 1 && (
<div className="flex items-center justify-center mb-6">
<div className="flex items-center gap-2 px-4 py-2 bg-zinc-100 dark:bg-zinc-800 rounded-md cursor-pointer hover:bg-zinc-200 dark:hover:bg-zinc-700">
<Github className="h-4 w-4" />
<span className="text-sm font-medium">
{clerk.user?.externalAccounts?.find((acc: any) => acc.provider === 'github')?.username || 'git-account'}
</span>
<ChevronDown className="h-4 w-4" />
{clerk.user?.externalAccounts &&
clerk.user.externalAccounts.length > 1 && (
<div className="flex items-center justify-center mb-6">
<div className="flex items-center gap-2 px-4 py-2 bg-zinc-100 dark:bg-zinc-800 rounded-md cursor-pointer hover:bg-zinc-200 dark:hover:bg-zinc-700">
<Github className="h-4 w-4" />
<span className="text-sm font-medium">
{clerk.user?.externalAccounts?.find(
(acc: any) => acc.provider === 'github'
)?.username || 'git-account'}
</span>
<ChevronDown className="h-4 w-4" />
</div>
</div>
</div>
)}
)}
</div>
{/* Authentication Warning - Only show if not fully authenticated */}
{!isFullyAuthenticated && (
<Collapsible open={showAuthWarning} onOpenChange={setShowAuthWarning}>
@ -224,7 +250,10 @@ export function ConnectStep() {
<Alert className="mb-6 cursor-pointer hover:bg-amber-50 dark:hover:bg-amber-950/20">
<AlertTriangle className="h-4 w-4" />
<AlertDescription className="flex items-center justify-between w-full">
<span>Authentication required to continue ({progress.completed}/{progress.total} complete)</span>
<span>
Authentication required to continue ({progress.completed}/
{progress.total} complete)
</span>
<ChevronDown className="h-4 w-4" />
</AlertDescription>
</Alert>
@ -236,7 +265,9 @@ export function ConnectStep() {
<CardContent className="p-4">
<div className="flex items-center gap-3 mb-3">
<Github className="h-4 w-4" />
<span className="text-sm font-medium">Sign in with Clerk</span>
<span className="text-sm font-medium">
Sign in with Clerk
</span>
</div>
<div className="scale-90 origin-top-left">
<SignIn routing="hash" />
@ -244,28 +275,36 @@ export function ConnectStep() {
</CardContent>
</Card>
)}
{missing.clerkGithub && !missing.clerkSignIn && (
<Card className="border-amber-200 bg-amber-50/50 dark:bg-amber-950/20">
<CardContent className="p-4">
<div className="flex items-center gap-3 mb-3">
<Github className="h-4 w-4" />
<span className="text-sm font-medium">Connect GitHub Account</span>
<span className="text-sm font-medium">
Connect GitHub Account
</span>
</div>
<Button size="sm" variant="outline" onClick={() => window.open('/user-profile', '_blank')}>
<Button
size="sm"
variant="outline"
onClick={() => window.open('/user-profile', '_blank')}
>
<ExternalLink className="h-3 w-3 mr-2" />
Connect GitHub
</Button>
</CardContent>
</Card>
)}
{missing.walletConnection && (
<Card className="border-amber-200 bg-amber-50/50 dark:bg-amber-950/20">
<CardContent className="p-4">
<div className="flex items-center gap-3 mb-3">
<Wallet className="h-4 w-4" />
<span className="text-sm font-medium">Connect Wallet</span>
<span className="text-sm font-medium">
Connect Wallet
</span>
</div>
<Button size="sm" onClick={handleConnectWallet}>
Connect Wallet
@ -273,46 +312,54 @@ export function ConnectStep() {
</CardContent>
</Card>
)}
{missing.githubBackendSync && !missing.walletConnection && !missing.clerkGithub && (
<Card className="border-amber-200 bg-amber-50/50 dark:bg-amber-950/20">
<CardContent className="p-4">
<div className="flex items-center gap-3 mb-3">
<Github className="h-4 w-4" />
<span className="text-sm font-medium">Sync GitHub Access</span>
</div>
<GitHubBackendAuth onAuthStatusChange={handleGithubAuthChange} />
</CardContent>
</Card>
)}
{missing.githubBackendSync &&
!missing.walletConnection &&
!missing.clerkGithub && (
<Card className="border-amber-200 bg-amber-50/50 dark:bg-amber-950/20">
<CardContent className="p-4">
<div className="flex items-center gap-3 mb-3">
<Github className="h-4 w-4" />
<span className="text-sm font-medium">
Sync GitHub Access
</span>
</div>
<GitHubBackendAuth
onAuthStatusChange={handleGithubAuthChange}
/>
</CardContent>
</Card>
)}
</CollapsibleContent>
</Collapsible>
)}
{/* Mode Selection Tabs */}
<div className="grid grid-cols-2 gap-1 p-1 bg-zinc-100 dark:bg-zinc-800 rounded-lg mb-6">
<Button
variant={isImportMode ? "default" : "ghost"}
className={`${isImportMode
? 'bg-white dark:bg-zinc-700 shadow-sm'
: 'bg-transparent hover:bg-white/50 dark:hover:bg-zinc-700/50'
variant={isImportMode ? 'default' : 'ghost'}
className={`${
isImportMode
? 'bg-white dark:bg-zinc-700 shadow-sm'
: 'bg-transparent hover:bg-white/50 dark:hover:bg-zinc-700/50'
}`}
onClick={() => toggleMode('import')}
>
Import a repository
</Button>
<Button
variant={!isImportMode ? "default" : "ghost"}
className={`${!isImportMode
? 'bg-white dark:bg-zinc-700 shadow-sm'
: 'bg-transparent hover:bg-white/50 dark:hover:bg-zinc-700/50'
variant={!isImportMode ? 'default' : 'ghost'}
className={`${
!isImportMode
? 'bg-white dark:bg-zinc-700 shadow-sm'
: 'bg-transparent hover:bg-white/50 dark:hover:bg-zinc-700/50'
}`}
onClick={() => toggleMode('template')}
>
Start with a template
</Button>
</div>
{/* Content Area */}
{isImportMode ? (
/* Repository Selection */
@ -327,7 +374,8 @@ export function ConnectStep() {
<Alert>
<AlertTriangle className="h-4 w-4" />
<AlertDescription>
No repositories found. Make sure your GitHub account has repositories.
No repositories found. Make sure your GitHub account has
repositories.
</AlertDescription>
</Alert>
</div>
@ -335,20 +383,24 @@ export function ConnectStep() {
<>
<div className="space-y-2 max-h-60 overflow-y-auto">
{repositories.map((repo: Repository) => (
<div
key={repo.id}
<div
key={repo.id}
className={`flex items-center p-4 rounded-lg border cursor-pointer transition-all ${
selectedRepo === repo.full_name
? 'border-blue-500 bg-blue-50 dark:bg-blue-950/20'
selectedRepo === repo.full_name
? 'border-blue-500 bg-blue-50 dark:bg-blue-950/20'
: 'border-zinc-200 dark:border-zinc-700 hover:border-zinc-300 dark:hover:border-zinc-600'
}`}
onClick={() => handleRepoSelect(repo.full_name)}
>
<Github className="h-5 w-5 mr-3 text-zinc-500 flex-shrink-0" />
<div className="flex-1 min-w-0">
<div className="font-medium text-sm">{repo.full_name}</div>
<div className="font-medium text-sm">
{repo.full_name}
</div>
{repo.description && (
<div className="text-xs text-zinc-500 truncate">{repo.description}</div>
<div className="text-xs text-zinc-500 truncate">
{repo.description}
</div>
)}
</div>
{selectedRepo === repo.full_name && (
@ -357,11 +409,14 @@ export function ConnectStep() {
</div>
))}
</div>
{/* Project Name Input for Repository Import */}
{selectedRepo && (
<div className="mt-6 space-y-2">
<Label htmlFor="projectName" className="text-sm font-medium">
<Label
htmlFor="projectName"
className="text-sm font-medium"
>
Project Name
</Label>
<Input
@ -382,39 +437,47 @@ export function ConnectStep() {
) : (
/* Template Selection */
<div className="space-y-4">
{AVAILABLE_TEMPLATES.filter(t => !t.isComingSoon).map((template) => (
<div
key={template.id}
className={`flex items-center p-4 rounded-lg border cursor-pointer transition-all ${
selectedTemplate?.id === template.id
? 'border-blue-500 bg-blue-50 dark:bg-blue-950/20'
: 'border-zinc-200 dark:border-zinc-700 hover:border-zinc-300 dark:hover:border-zinc-600'
}`}
onClick={() => handleTemplateSelect(template)}
>
{/* Template Icon */}
<div className="flex items-center justify-center w-10 h-10 rounded-lg bg-zinc-100 dark:bg-zinc-800 mr-4">
<div className="w-6 h-6 bg-zinc-600 dark:bg-zinc-400 rounded flex items-center justify-center text-xs font-bold text-white">
{template.icon === 'web' ? 'PWA' : template.icon === 'nextjs' ? 'N' : 'IMG'}
{AVAILABLE_TEMPLATES.filter((t) => !t.isComingSoon).map(
(template) => (
<div
key={template.id}
className={`flex items-center p-4 rounded-lg border cursor-pointer transition-all ${
selectedTemplate?.id === template.id
? 'border-blue-500 bg-blue-50 dark:bg-blue-950/20'
: 'border-zinc-200 dark:border-zinc-700 hover:border-zinc-300 dark:hover:border-zinc-600'
}`}
onClick={() => handleTemplateSelect(template)}
>
{/* Template Icon */}
<div className="flex items-center justify-center w-10 h-10 rounded-lg bg-zinc-100 dark:bg-zinc-800 mr-4">
<div className="w-6 h-6 bg-zinc-600 dark:bg-zinc-400 rounded flex items-center justify-center text-xs font-bold text-white">
{template.icon === 'web'
? 'PWA'
: template.icon === 'nextjs'
? 'N'
: 'IMG'}
</div>
</div>
</div>
{/* Template Info */}
<div className="flex-1 min-w-0">
<div className="font-medium text-sm mb-1">{template.name}</div>
<div className="flex items-center text-xs text-zinc-500">
<Github className="h-3 w-3 mr-1" />
{template.repoFullName}
{/* Template Info */}
<div className="flex-1 min-w-0">
<div className="font-medium text-sm mb-1">
{template.name}
</div>
<div className="flex items-center text-xs text-zinc-500">
<Github className="h-3 w-3 mr-1" />
{template.repoFullName}
</div>
</div>
{/* Selection Indicator */}
{selectedTemplate?.id === template.id && (
<CheckCircle2 className="h-5 w-5 text-blue-500 flex-shrink-0" />
)}
</div>
{/* Selection Indicator */}
{selectedTemplate?.id === template.id && (
<CheckCircle2 className="h-5 w-5 text-blue-500 flex-shrink-0" />
)}
</div>
))}
)
)}
{/* Project Name Input for Templates */}
{selectedTemplate && (
<div className="mt-6 space-y-2">
@ -435,15 +498,20 @@ export function ConnectStep() {
)}
</div>
)}
{/* Navigation */}
<div className="flex justify-between items-center mt-8">
<Button variant="outline" disabled>
Previous
</Button>
<Button
<Button
onClick={handleNext}
disabled={!isFullyAuthenticated || (isImportMode ? !selectedRepo : (!selectedTemplate || !projectName.trim()))}
disabled={
!isFullyAuthenticated ||
(isImportMode
? !selectedRepo
: !selectedTemplate || !projectName.trim())
}
>
Next
</Button>
@ -451,4 +519,4 @@ export function ConnectStep() {
</div>
</div>
)
}
}

306
apps/deploy-fe/src/components/onboarding/deploy-step/deploy-step.tsx
View File

@ -1,45 +1,57 @@
// src/components/onboarding/deploy-step/deploy-step.tsx
'use client'
import { useState, useEffect } from 'react'
import { useTheme } from 'next-themes'
import { Github, Loader2, AlertTriangle, CheckCircle2 } from 'lucide-react'
import { useOnboarding } from '@/components/onboarding/store'
import { useOnboarding } from '@/components/onboarding/useOnboarding'
import { useWallet } from '@/context/WalletContext'
import { useDeployment } from '@/hooks/useDeployment'
import { useTemplateDeployment } from '@/hooks/useTemplate'
import { Button } from '@workspace/ui/components/button'
import { Progress } from '@workspace/ui/components/progress'
import { Dialog, DialogContent, DialogTitle, DialogDescription, DialogFooter } from '@workspace/ui/components/dialog'
import { Alert, AlertDescription } from '@workspace/ui/components/alert'
import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card'
import { Badge } from '@workspace/ui/components/badge'
import { Button } from '@workspace/ui/components/button'
import {
Card,
CardContent,
CardHeader,
CardTitle
} from '@workspace/ui/components/card'
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogTitle
} from '@workspace/ui/components/dialog'
import { Progress } from '@workspace/ui/components/progress'
import { AlertTriangle, CheckCircle2, Github, Loader2 } from 'lucide-react'
import { useTheme } from 'next-themes'
import { useEffect, useState } from 'react'
import { toast } from 'sonner'
export function DeployStep() {
const { previousStep, nextStep, formData, setFormData } = useOnboarding()
const { resolvedTheme } = useTheme()
const [mounted, setMounted] = useState(false)
// State
const [showConfirmDialog, setShowConfirmDialog] = useState(false)
const [deploymentError, setDeploymentError] = useState<string | null>(null)
const [deploymentSuccess, setDeploymentSuccess] = useState(false)
// Contexts and hooks
const { wallet } = useWallet()
const { deployRepository, isDeploying: isRepoDeploying } = useDeployment()
const { deployTemplate, isDeploying: isTemplateDeploying } = useTemplateDeployment()
const { deployTemplate, isDeploying: isTemplateDeploying } =
useTemplateDeployment()
// Determine deployment type and get the right deploying state
const isTemplateMode = formData.deploymentMode === 'template'
const isDeploying = isTemplateMode ? isTemplateDeploying : isRepoDeploying
// Handle hydration mismatch by waiting for mount
useEffect(() => {
setMounted(true)
}, [])
// Get deployment info
const getDeploymentInfo = () => {
if (isTemplateMode) {
@ -53,50 +65,53 @@ export function DeployStep() {
return {
name: formData.githubRepo?.split('/').pop() || 'Repository',
source: formData.githubRepo || 'Unknown Repository',
projectName: formData.projectName || formData.githubRepo?.split('/').pop() || 'New Project',
projectName:
formData.projectName ||
formData.githubRepo?.split('/').pop() ||
'New Project',
type: 'Repository'
}
}
}
const deploymentInfo = getDeploymentInfo()
// Open the confirmation modal
const handlePayAndDeploy = () => {
if (!wallet?.address) {
toast.error('Wallet not connected')
return
}
if (!formData.selectedOrg) {
toast.error('No organization selected')
return
}
if (isTemplateMode && (!formData.template || !formData.projectName)) {
toast.error('Template or project name missing')
return
}
if (!isTemplateMode && !formData.githubRepo) {
toast.error('Repository not selected')
return
}
setShowConfirmDialog(true)
}
// Close the confirmation modal
const handleCancelConfirm = () => {
setShowConfirmDialog(false)
}
// Handle confirmed deployment
const handleConfirmDeploy = async () => {
setShowConfirmDialog(false)
setDeploymentError(null)
setDeploymentSuccess(false)
try {
if (isTemplateMode) {
await deployTemplateProject()
@ -105,16 +120,18 @@ export function DeployStep() {
}
} catch (error) {
console.error('Deployment failed:', error)
setDeploymentError(error instanceof Error ? error.message : 'Deployment failed')
setDeploymentError(
error instanceof Error ? error.message : 'Deployment failed'
)
}
}
// Deploy template project
const deployTemplateProject = async () => {
if (!formData.template || !formData.projectName || !formData.selectedOrg) {
throw new Error('Missing required template deployment data')
}
const config = {
template: {
...formData.template,
@ -125,9 +142,9 @@ export function DeployStep() {
organizationSlug: formData.selectedOrg,
environmentVariables: formData.environmentVariables || [],
deployerLrn: formData.selectedLrn
};
const result = await deployTemplate(config);
}
const result = await deployTemplate(config)
// Save deployment results
setFormData({
deploymentId: result.deploymentId,
@ -135,85 +152,136 @@ export function DeployStep() {
projectId: result.projectId,
repositoryUrl: result.repositoryUrl
})
setDeploymentSuccess(true)
toast.success('Template deployed successfully!')
// Move to success step after short delay
setTimeout(() => {
nextStep()
}, 2000)
}
// Deploy repository project
const deployRepositoryProject = async () => {
if (!formData.githubRepo || !formData.selectedOrg) {
throw new Error('Missing required repository deployment data')
}
const config = {
projectId: '', // Will be generated by backend
organizationSlug: formData.selectedOrg,
repository: formData.githubRepo,
branch: 'main', // Default branch
name: formData.projectName || formData.githubRepo.split('/').pop() || 'New Project',
name:
formData.projectName ||
formData.githubRepo.split('/').pop() ||
'New Project',
environmentVariables: formData.environmentVariables || []
}
console.log('Deploying repository with config:', config)
const result = await deployRepository(config)
// Save deployment results
setFormData({
deploymentId: result.id,
deploymentUrl: result.url,
projectId: result.id
})
setDeploymentSuccess(true)
toast.success('Repository deployed successfully!')
// Move to success step after short delay
setTimeout(() => {
nextStep()
}, 2000)
}
// Don't render UI until after mount to prevent hydration mismatch
if (!mounted) {
return null
}
// Determine if dark mode is active
const isDarkMode = resolvedTheme === 'dark'
return (
<>
<div className="w-full h-full flex flex-col items-center justify-center p-8">
<div className="max-w-md w-full mx-auto">
{/* Deploy icon */}
<div className="mx-auto mb-6 flex justify-center">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={isDarkMode ? "text-white" : "text-black"}>
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<polyline points="7.5 4.21 12 6.81 16.5 4.21" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<polyline points="7.5 19.79 7.5 14.6 3 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<polyline points="21 12 16.5 14.6 16.5 19.79" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<polyline points="3.27 6.96 12 12.01 20.73 6.96" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<line x1="12" y1="22.08" x2="12" y2="12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<svg
width="48"
height="48"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={isDarkMode ? 'text-white' : 'text-black'}
>
<path
d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<polyline
points="7.5 4.21 12 6.81 16.5 4.21"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<polyline
points="7.5 19.79 7.5 14.6 3 12"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<polyline
points="21 12 16.5 14.6 16.5 19.79"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<polyline
points="3.27 6.96 12 12.01 20.73 6.96"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<line
x1="12"
y1="22.08"
x2="12"
y2="12"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
{/* Deploy header */}
<h2 className={`text-2xl font-medium ${isDarkMode ? "text-white" : "text-zinc-900"} text-center mb-2`}>
<h2
className={`text-2xl font-medium ${isDarkMode ? 'text-white' : 'text-zinc-900'} text-center mb-2`}
>
{isDeploying ? 'Deploying...' : 'Deploy'}
</h2>
<p className="text-center text-zinc-500 mb-8">
{isDeploying
? 'Your project is being deployed. This may take a few minutes.'
{isDeploying
? 'Your project is being deployed. This may take a few minutes.'
: 'Review and confirm deployment'}
</p>
{/* Deployment Summary */}
<Card className="mb-6">
<CardHeader className="pb-3">
@ -226,13 +294,15 @@ export function DeployStep() {
<div className="flex items-center gap-3">
<Github className="h-4 w-4 text-muted-foreground" />
<div className="flex-1 min-w-0">
<div className="font-medium text-sm">{deploymentInfo.projectName}</div>
<div className="font-medium text-sm">
{deploymentInfo.projectName}
</div>
<div className="text-xs text-muted-foreground font-mono">
{deploymentInfo.source}
</div>
</div>
</div>
<div className="grid grid-cols-2 gap-4 pt-2 text-xs">
<div>
<div className="text-muted-foreground">Organization</div>
@ -240,21 +310,28 @@ export function DeployStep() {
</div>
<div>
<div className="text-muted-foreground">Deployer</div>
<div className="font-medium">{formData.selectedLrn ? 'LRN' : 'Auction'}</div>
</div>
</div>
{formData.environmentVariables && formData.environmentVariables.length > 0 && (
<div className="pt-2">
<div className="text-xs text-muted-foreground mb-1">Environment Variables</div>
<div className="text-xs">
{formData.environmentVariables.length} variable{formData.environmentVariables.length !== 1 ? 's' : ''} configured
<div className="font-medium">
{formData.selectedLrn ? 'LRN' : 'Auction'}
</div>
</div>
)}
</div>
{formData.environmentVariables &&
formData.environmentVariables.length > 0 && (
<div className="pt-2">
<div className="text-xs text-muted-foreground mb-1">
Environment Variables
</div>
<div className="text-xs">
{formData.environmentVariables.length} variable
{formData.environmentVariables.length !== 1 ? 's' : ''}{' '}
configured
</div>
</div>
)}
</CardContent>
</Card>
{/* Error Display */}
{deploymentError && (
<Alert className="mb-6" variant="destructive">
@ -265,7 +342,7 @@ export function DeployStep() {
</AlertDescription>
</Alert>
)}
{/* Success Display */}
{deploymentSuccess && (
<Alert className="mb-6">
@ -273,40 +350,49 @@ export function DeployStep() {
<AlertDescription>
<div className="font-medium">Deployment Successful!</div>
<div className="text-sm mt-1">
Your project has been deployed successfully. You'll be redirected to the project dashboard.
Your project has been deployed successfully. You'll be
redirected to the project dashboard.
</div>
</AlertDescription>
</Alert>
)}
{/* Deployment Progress - Only show while deploying */}
{isDeploying && (
<div className="mb-8">
<div className="flex justify-between items-center mb-2">
<div className={`${isDarkMode ? "text-white" : "text-zinc-900"} text-sm`}>
{isTemplateMode ? 'Creating repository from template...' : 'Deploying repository...'}
<div
className={`${isDarkMode ? 'text-white' : 'text-zinc-900'} text-sm`}
>
{isTemplateMode
? 'Creating repository from template...'
: 'Deploying repository...'}
</div>
</div>
<Progress value={undefined} className={`h-2 ${isDarkMode ? "bg-zinc-800" : "bg-zinc-200"}`} />
<Progress
value={undefined}
className={`h-2 ${isDarkMode ? 'bg-zinc-800' : 'bg-zinc-200'}`}
/>
<div className="text-xs text-muted-foreground mt-2">
This process may take several minutes. Please do not close this window.
This process may take several minutes. Please do not close this
window.
</div>
</div>
)}
{/* Navigation buttons */}
<div className="flex justify-between items-center mt-4">
<Button
variant="outline"
className={`${isDarkMode ? "text-zinc-400 border-zinc-700" : "text-zinc-600 border-zinc-300"} bg-transparent`}
<Button
variant="outline"
className={`${isDarkMode ? 'text-zinc-400 border-zinc-700' : 'text-zinc-600 border-zinc-300'} bg-transparent`}
onClick={previousStep}
disabled={isDeploying || deploymentSuccess}
>
Previous
</Button>
{deploymentSuccess ? (
<Button
<Button
className="bg-green-600 hover:bg-green-700 text-white"
onClick={nextStep}
>
@ -314,29 +400,42 @@ export function DeployStep() {
Continue
</Button>
) : isDeploying ? (
<Button
className={`${isDarkMode ? "bg-zinc-700 text-zinc-300" : "bg-zinc-300 text-zinc-600"}`}
<Button
className={`${isDarkMode ? 'bg-zinc-700 text-zinc-300' : 'bg-zinc-300 text-zinc-600'}`}
disabled
>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Deploying...
</Button>
) : (
<Button
<Button
className="bg-blue-600 hover:bg-blue-700 text-white flex items-center"
onClick={handlePayAndDeploy}
disabled={deploymentError !== null}
>
{formData.deploymentType === 'auction' ? 'Pay and Deploy' : 'Deploy'}
<svg className="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M5 12H19M19 12L13 6M19 12L13 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
{formData.deploymentType === 'auction'
? 'Pay and Deploy'
: 'Deploy'}
<svg
className="ml-2 h-4 w-4"
fill="none"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 12H19M19 12L13 6M19 12L13 18"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Button>
)}
</div>
</div>
</div>
{/* Transaction Confirmation Dialog */}
<Dialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
<DialogContent className="bg-background border max-w-md">
@ -344,7 +443,7 @@ export function DeployStep() {
<DialogDescription>
Review the deployment details before proceeding.
</DialogDescription>
<div className="space-y-4 py-4">
{/* Project Info */}
<div className="space-y-2">
@ -360,11 +459,13 @@ export function DeployStep() {
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">Source:</span>
<span className="font-mono text-xs">{deploymentInfo.source}</span>
<span className="font-mono text-xs">
{deploymentInfo.source}
</span>
</div>
</div>
</div>
{/* Wallet Info */}
<div className="space-y-2">
<h3 className="text-sm font-medium">Payment Address</h3>
@ -372,17 +473,19 @@ export function DeployStep() {
{wallet?.address}
</div>
</div>
{/* Deployer Info */}
{formData.selectedLrn && (
<div className="space-y-2">
<h3 className="text-sm font-medium">Deployer</h3>
<div className="text-sm">
<div className="font-mono text-xs">{formData.selectedLrn}</div>
<div className="font-mono text-xs">
{formData.selectedLrn}
</div>
</div>
</div>
)}
{/* Cost Info */}
{formData.deploymentType === 'auction' && (
<div className="space-y-2">
@ -400,22 +503,15 @@ export function DeployStep() {
</div>
)}
</div>
<DialogFooter className="flex justify-end space-x-2">
<Button
variant="outline"
onClick={handleCancelConfirm}
>
<Button variant="outline" onClick={handleCancelConfirm}>
Cancel
</Button>
<Button
onClick={handleConfirmDeploy}
>
Confirm Deployment
</Button>
<Button onClick={handleConfirmDeploy}>Confirm Deployment</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</>
)
}
}

6
apps/deploy-fe/src/components/onboarding/index.ts
View File

@ -10,9 +10,7 @@
// Main component
export { default as Onboarding } from './Onboarding'
export {
default as OnboardingDialog,
} from './OnboardingDialog'
export { default as OnboardingDialog } from './OnboardingDialog'
// Step components
export { ConfigureStep } from './configure-step'
@ -27,7 +25,7 @@ export * from './common'
export * from './sidebar'
// Store and hooks
export { useOnboarding } from './store'
export { useOnboarding } from './useOnboarding'
// Types
export * from './types'

2
apps/deploy-fe/src/components/onboarding/types.ts
View File

@ -7,7 +7,7 @@
/**
* Available steps in the onboarding flow
*/
export type Step = 'connect' | 'configure' | 'deploy'
export type Step = 'connect' | 'configure' | 'deploy' | 'success'
/**
* Form data collected during the onboarding process

50
pnpm-lock.yaml generated
View File

@ -127,8 +127,8 @@ importers:
specifier: ^10.9.2
version: 10.9.2(@types/node@20.17.23)(typescript@5.8.2)
typeorm:
specifier: ^0.3.19
version: 0.3.21(better-sqlite3@9.6.0)(reflect-metadata@0.2.2)(ts-node@10.9.2(@types/node@20.17.23)(typescript@5.8.2))
specifier: ^0.3.26
version: 0.3.26(better-sqlite3@12.2.0)(reflect-metadata@0.2.2)(ts-node@10.9.2(@types/node@20.17.23)(typescript@5.8.2))
typescript:
specifier: ^5.3.3
version: 5.8.2
@ -152,8 +152,8 @@ importers:
specifier: ^11.0.4
version: 11.0.4
better-sqlite3:
specifier: ^9.2.2
version: 9.6.0
specifier: ^12.2.0
version: 12.2.0
copyfiles:
specifier: ^2.4.1
version: 2.4.1
@ -2892,8 +2892,9 @@ packages:
before-after-hook@3.0.2:
resolution: {integrity: sha512-Nik3Sc0ncrMK4UUdXQmAnRtzmNQTAAXmXIopizwZ1W1t8QmfJj+zL4OA2I7XPTPW5z5TDqv4hRo/JzouDJnX3A==}
better-sqlite3@9.6.0:
resolution: {integrity: sha512-yR5HATnqeYNVnkaUTf4bOP2dJSnyhP4puJN/QPRyx4YkBEEUxib422n2XzPqDEHjQQqazoYoADdAm5vE15+dAQ==}
better-sqlite3@12.2.0:
resolution: {integrity: sha512-eGbYq2CT+tos1fBwLQ/tkBt9J5M3JEHjku4hbvQUePCckkvVf14xWj+1m7dGoK81M/fOjFT7yM9UMeKT/+vFLQ==}
engines: {node: 20.x || 22.x || 23.x || 24.x}
big-integer@1.6.36:
resolution: {integrity: sha512-t70bfa7HYEA1D9idDbmuv7YbsbVkQ+Hp+8KFSul4aE5e/i1bjCNIRYJZlA8Q8p0r9T8cF/RVvwUgRA//FydEyg==}
@ -3323,6 +3324,14 @@ packages:
resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
engines: {node: '>=10'}
dedent@1.6.0:
resolution: {integrity: sha512-F1Z+5UCFpmQUzJa11agbyPVMbpgT/qA3/SKyJ1jyBgm7dUcUEa8v9JwDkerSQXfakBwFljIxhOJqGkjUwZ9FSA==}
peerDependencies:
babel-plugin-macros: ^3.1.0
peerDependenciesMeta:
babel-plugin-macros:
optional: true
deep-extend@0.6.0:
resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
engines: {node: '>=4.0.0'}
@ -5374,29 +5383,28 @@ packages:
typeforce@1.18.0:
resolution: {integrity: sha512-7uc1O8h1M1g0rArakJdf0uLRSSgFcYexrVoKo+bzJd32gd4gDy2L/Z+8/FjPnU9ydY3pEnVPtr9FyscYY60K1g==}
typeorm@0.3.21:
resolution: {integrity: sha512-lh4rUWl1liZGjyPTWpwcK8RNI5x4ekln+/JJOox1wCd7xbucYDOXWD+1cSzTN3L0wbTGxxOtloM5JlxbOxEufA==}
typeorm@0.3.26:
resolution: {integrity: sha512-o2RrBNn3lczx1qv4j+JliVMmtkPSqEGpG0UuZkt9tCfWkoXKu8MZnjvp2GjWPll1SehwemQw6xrbVRhmOglj8Q==}
engines: {node: '>=16.13.0'}
hasBin: true
peerDependencies:
'@google-cloud/spanner': ^5.18.0
'@sap/hana-client': ^2.12.25
better-sqlite3: ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0
hdb-pool: ^0.1.6
'@google-cloud/spanner': ^5.18.0 || ^6.0.0 || ^7.0.0
'@sap/hana-client': ^2.14.22
better-sqlite3: ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0
ioredis: ^5.0.4
mongodb: ^5.8.0
mongodb: ^5.8.0 || ^6.0.0
mssql: ^9.1.1 || ^10.0.1 || ^11.0.1
mysql2: ^2.2.5 || ^3.0.1
oracledb: ^6.3.0
pg: ^8.5.1
pg-native: ^3.0.0
pg-query-stream: ^4.0.0
redis: ^3.1.1 || ^4.0.0
redis: ^3.1.1 || ^4.0.0 || ^5.0.14
reflect-metadata: ^0.1.14 || ^0.2.0
sql.js: ^1.4.0
sqlite3: ^5.0.3
ts-node: ^10.7.0
typeorm-aurora-data-api-driver: ^2.0.0
typeorm-aurora-data-api-driver: ^2.0.0 || ^3.0.0
peerDependenciesMeta:
'@google-cloud/spanner':
optional: true
@ -5404,8 +5412,6 @@ packages:
optional: true
better-sqlite3:
optional: true
hdb-pool:
optional: true
ioredis:
optional: true
mongodb:
@ -8454,7 +8460,7 @@ snapshots:
before-after-hook@3.0.2: {}
better-sqlite3@9.6.0:
better-sqlite3@12.2.0:
dependencies:
bindings: 1.5.0
prebuild-install: 7.1.3
@ -8925,6 +8931,8 @@ snapshots:
dependencies:
mimic-response: 3.1.0
dedent@1.6.0: {}
deep-extend@0.6.0: {}
defaults@1.0.4:
@ -11206,7 +11214,7 @@ snapshots:
typeforce@1.18.0: {}
typeorm@0.3.21(better-sqlite3@9.6.0)(reflect-metadata@0.2.2)(ts-node@10.9.2(@types/node@20.17.23)(typescript@5.8.2)):
typeorm@0.3.26(better-sqlite3@12.2.0)(reflect-metadata@0.2.2)(ts-node@10.9.2(@types/node@20.17.23)(typescript@5.8.2)):
dependencies:
'@sqltools/formatter': 1.2.5
ansis: 3.17.0
@ -11214,6 +11222,7 @@ snapshots:
buffer: 6.0.3
dayjs: 1.11.13
debug: 4.4.0
dedent: 1.6.0
dotenv: 16.4.7
glob: 10.4.5
reflect-metadata: 0.2.2
@ -11223,9 +11232,10 @@ snapshots:
uuid: 11.1.0
yargs: 17.7.2
optionalDependencies:
better-sqlite3: 9.6.0
better-sqlite3: 12.2.0
ts-node: 10.9.2(@types/node@20.17.23)(typescript@5.8.2)
transitivePeerDependencies:
- babel-plugin-macros
- supports-color
typescript@5.8.2: {}