Consolidate /create and /templates

src/pages/CreateApp/index.tsx → 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<TemplateFlowProps> = ({ 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<Set<number>>(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<Set<number>>(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 (
+      <div className="[&>*]:md:max-h-none [&>*]:md:h-auto">
+        <Layout headerContent={<Header />} footerContent={<Footer />}>
+          <div className="mx-auto px-8 py-12">
+            <div className="mb-10">
+              <h1 className="text-2xl font-white font-bold text-center mb-8">
+                Create your app from a template
+              </h1>
+              <div className="text-center">
+                <RainbowKitConnectButton>
+                  {({ openConnectModal }) => {
+                    return isConnected ? (
+                      <Button size="lg" asChild>
+                        <Link to="/create">
+                          Get started
+                          <ArrowRight />
+                        </Link>
+                      </Button>
+                    ) : (
+                      <Button
+                        onClick={() => {
+                          openConnectModal()
+                        }}
+                        className="max-md:w-full"
+                      >
+                        Connect Wallet
+                        <ArrowRight />
+                      </Button>
+                    )
+                  }}
+                </RainbowKitConnectButton>
+              </div>
+            </div>
+            <Separator className="my-8" />
+            <TemplatesList />
+          </div>
+        </Layout>
+      </div>
+    )
+  }
+
   return (
     <div className="[&>*]:md:max-h-none [&>*]:md:h-auto">
       {currentStep === 0 && <TemplateStep handleNext={handleNext} setAppDataForm={setAppDataForm} />}

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: <LandingTemplates />,
+        element: <TemplateFlow mode="browse" />,
       },
       {
         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 <Create key={location.key} />
+              return <TemplateFlow key={location.key} mode="create" />
             },
           },
         ],

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