From a4fa157d89103e238c0c9b8605f24d21a0f97c9d Mon Sep 17 00:00:00 2001 From: lubej Date: Mon, 25 Aug 2025 12:27:05 +0200 Subject: [PATCH] Consolidate /create and /templates --- .../TemplateFlow}/index.tsx | 89 ++++++++++++++++--- src/main.tsx | 9 +- src/pages/CreateApp/templates.tsx | 2 +- src/pages/LandingTemplates/index.tsx | 55 ------------ 4 files changed, 81 insertions(+), 74 deletions(-) rename src/{pages/CreateApp => components/TemplateFlow}/index.tsx (55%) delete mode 100644 src/pages/LandingTemplates/index.tsx diff --git a/src/pages/CreateApp/index.tsx b/src/components/TemplateFlow/index.tsx similarity index 55% rename from src/pages/CreateApp/index.tsx rename to src/components/TemplateFlow/index.tsx index 15f1c3ed..6d1ff7b9 100644 --- a/src/pages/CreateApp/index.tsx +++ b/src/components/TemplateFlow/index.tsx @@ -1,16 +1,38 @@ import { type FC, useEffect, useRef } from 'react' -import { useCreate } from './useCreate' -import { TemplateStep } from './TemplateStep' -import { MetadataStep } from './MetadataStep' -import { AgentStep } from './AgentStep' -import { BuildStep } from './BuildStep' -import { PaymentStep } from './PaymentStep' -import { BootstrapStep } from './BootstrapStep' -import { getTemplateById } from './templates' +import { useLocation } from 'react-router-dom' +import { Layout } from '@oasisprotocol/ui-library/src/components/ui/layout' +import { Button } from '@oasisprotocol/ui-library/src/components/ui/button' +import { Separator } from '@oasisprotocol/ui-library/src/components/ui/separator' +import { ArrowRight } from 'lucide-react' +import { Link } from 'react-router-dom' +import { useAccount } from 'wagmi' import { trackEvent } from 'fathom-client' +import { Header } from '../Layout/Header' +import { Footer } from '../Layout/Footer' +import { TemplatesList } from '../TemplatesList' +import { RainbowKitConnectButton } from '../RainbowKitConnectButton' +import { useCreate } from '../../pages/CreateApp/useCreate' +import { TemplateStep } from '../../pages/CreateApp/TemplateStep' +import { MetadataStep } from '../../pages/CreateApp/MetadataStep' +import { AgentStep } from '../../pages/CreateApp/AgentStep' +import { BuildStep } from '../../pages/CreateApp/BuildStep' +import { PaymentStep } from '../../pages/CreateApp/PaymentStep' +import { BootstrapStep } from '../../pages/CreateApp/BootstrapStep' +import { getTemplateById } from '../../pages/CreateApp/templates' + +interface TemplateFlowProps { + mode?: 'browse' | 'create' +} + +export const TemplateFlow: FC = ({ mode }) => { + const location = useLocation() + const { isConnected } = useAccount() + + const flowMode = mode || (location.pathname.startsWith('/create') ? 'create' : 'browse') -export const Create: FC = () => { const { currentStep, setCurrentStep, appData, setAppDataForm } = useCreate() + const trackedEvents = useRef>(new Set()) + const steps = [ { component: TemplateStep }, { component: MetadataStep }, @@ -19,12 +41,13 @@ export const Create: FC = () => { { component: PaymentStep }, { component: BootstrapStep }, ] + const selectedTemplate = getTemplateById(appData?.template) - const trackedEvents = useRef>(new Set()) useEffect(() => { + if (flowMode !== 'create') return + if (currentStep === 1 && !trackedEvents.current.has(1)) { - // Filter out just visiting create app page, hence step=1 trackEvent(`Create app flow/1/start/${appData?.template}`) trackedEvents.current.add(1) } else if (currentStep === 2 && !trackedEvents.current.has(2)) { @@ -37,7 +60,7 @@ export const Create: FC = () => { trackEvent(`Create app flow/4/payment/${appData?.template}`) trackedEvents.current.add(4) } - }, [currentStep, appData?.template]) + }, [flowMode, currentStep, appData?.template]) const handleNext = () => { if (currentStep < steps.length - 1) { @@ -51,6 +74,48 @@ export const Create: FC = () => { } } + if (flowMode === 'browse') { + return ( +
+ } footerContent={
}> +
+
+

+ Create your app from a template +

+
+ + {({ openConnectModal }) => { + return isConnected ? ( + + ) : ( + + ) + }} + +
+
+ + +
+ +
+ ) + } + return (
{currentStep === 0 && } diff --git a/src/main.tsx b/src/main.tsx index f62b0a78..c2e78be8 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -7,16 +7,15 @@ import { MyApps } from './pages/Dashboard/MyApps' import { AppDetails } from './pages/Dashboard/AppDetails' import { Machines } from './pages/Dashboard/Machines' import { MachinesDetails } from './pages/Dashboard/MachinesDetails' -import { Create } from './pages/CreateApp' import { Explore } from './pages/Explore' import { NotFound } from './components/NotFound' import { wagmiConfig } from './constants/wagmi-config.ts' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import { MainLayout } from './components/Layout/MainLayout' import { RootLayout } from './components/RootLayout' -import { LandingTemplates } from './pages/LandingTemplates' import { MachineTopUp } from './pages/Dashboard/MachinesDetails/MachineTopUp' import { ProtectedLayout } from './components/ProtectedLayout' +import { TemplateFlow } from './components/TemplateFlow' import './index.css' import '@rainbow-me/rainbowkit/styles.css' @@ -35,7 +34,7 @@ const router = createBrowserRouter([ }, { path: 'templates', - element: , + element: , }, { path: 'explore', @@ -125,9 +124,7 @@ const router = createBrowserRouter([ index: true, Component: () => { const location = useLocation() - // Key is used to reset state on every navigation to this route. Even - // if inside create flow and user clicks "Create +" in Header bar. - return + return }, }, ], diff --git a/src/pages/CreateApp/templates.tsx b/src/pages/CreateApp/templates.tsx index d6db2b73..45a30124 100644 --- a/src/pages/CreateApp/templates.tsx +++ b/src/pages/CreateApp/templates.tsx @@ -21,7 +21,7 @@ const parsedTgbotTemplate = parse(tgbotTemplate) const parsedXagentTemplate = parse(xagentTemplate) const parsedHlTemplate = parse(hlCopyTraderTemplate) -type ParsedTemplate = { +export type ParsedTemplate = { name?: string author?: string description?: string diff --git a/src/pages/LandingTemplates/index.tsx b/src/pages/LandingTemplates/index.tsx deleted file mode 100644 index bbee5240..00000000 --- a/src/pages/LandingTemplates/index.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import { type FC } from 'react' -import { Layout } from '@oasisprotocol/ui-library/src/components/ui/layout' -import { Header } from '../../components/Layout/Header' -import { Footer } from '../../components/Layout/Footer' -import { Button } from '@oasisprotocol/ui-library/src/components/ui/button' -import { Separator } from '@oasisprotocol/ui-library/src/components/ui/separator' -import { TemplatesList } from '../../components/TemplatesList' -import { ArrowRight } from 'lucide-react' -import { Link } from 'react-router-dom' -import { RainbowKitConnectButton } from '../../components/RainbowKitConnectButton' -import { useAccount } from 'wagmi' - -export const LandingTemplates: FC = () => { - const { isConnected } = useAccount() - - return ( -
- } footerContent={
- ) -}