fix: railway connect form

Author: jog1t

frontend/package.json

@@ -81,6 +81,7 @@
 		"@tanstack/store": "^0.7.5",
 		"@tanstack/zod-adapter": "^1.131.36",
 		"@types/bcryptjs": "^2.4.6",
+		"@types/canvas-confetti": "^1.9.0",
 		"@types/escape-html": "^1.0.4",
 		"@types/file-saver": "^2.0.7",
 		"@types/lodash": "^4.17.20",
@@ -95,6 +96,7 @@
 		"actor-core": "^0.6.3",
 		"autoprefixer": "^10.4.21",
 		"bcryptjs": "^2.4.3",
+		"canvas-confetti": "^1.9.3",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
 		"cmdk": "^1.1.1",

frontend/src/app/dialogs/connect-railway-frame.tsx

@@ -12,16 +12,13 @@ import {
 import { useEngineCompatDataProvider } from "@/components/actors";
 import { defineStepper } from "@/components/ui/stepper";
 import { cloudEnv, engineEnv } from "@/lib/env";
+import { NeedHelp } from "../forms/connect-vercel-form";
 
 const { Stepper } = defineStepper(
 	{
 		id: "step-1",
 		title: "Deploy to Railway",
 	},
-	{
-		id: "step-2",
-		title: "Set Environment Variables",
-	},
 	{
 		id: "step-3",
 		title: "Wait for a Runner to connect",
@@ -43,11 +40,6 @@ export default function ConnectRailwayFrameContent({
 					<div>
 						Add <Icon icon={faRailway} className="ml-0.5" /> Railway
 					</div>
-					<HelpDropdown>
-						<Button variant="ghost" size="icon">
-							<Icon icon={faQuestionCircle} />
-						</Button>
-					</HelpDropdown>
 				</Frame.Title>
 			</Frame.Header>
 			<Frame.Content>
@@ -91,12 +83,8 @@ function FormStepper({ onClose }: { onClose?: () => void }) {
 													</p>
 													<a
 														href={`https://railway.com/new/template/rivet-cloud-starter?referralCode=RC7bza&utm_medium=integration&utm_source=template&utm_campaign=generic&RIVET_TOKEN=${data}&RIVET_ENDPOINT=${
-															__APP_TYPE__ ===
-															"engine"
-																? engineEnv()
-																		.VITE_APP_API_URL
-																: cloudEnv()
-																		.VITE_APP_CLOUD_ENGINE_URL
+															engineEnv()
+																.VITE_APP_API_URL
 														}&RIVET_NAMESPACE=${
 															dataProvider.engineNamespace
 														}`}
@@ -111,22 +99,18 @@ function FormStepper({ onClose }: { onClose?: () => void }) {
 														/>
 													</a>
 
-													<p>
-														After deploying your app
-														to Railway, return here
-														to add the endpoint.
-													</p>
+													<EnvVariablesStep />
 												</>
 											)}
-											{step.id === "step-2" && (
-												<EnvVariablesStep />
-											)}
 											{step.id === "step-3" && (
 												<div>
 													<ConnectRailwayForm.ConnectionCheck />
 												</div>
 											)}
 											<Stepper.Controls>
+												{step.id === "step-3" ? (
+													<NeedHelp />
+												) : null}
 												<Button
 													type="button"
 													variant="secondary"
@@ -173,12 +157,8 @@ function EnvVariablesStep() {
 				settings.
 			</p>
 			<div className="gap-1 items-center grid grid-cols-2">
-				{__APP_TYPE__ === "engine" ? (
-					<>
-						<DiscreteInput value="RIVET_ENDPOINT" show />
-						<DiscreteInput value={engineEnv().VITE_APP_API_URL} />
-					</>
-				) : null}
+				<DiscreteInput value="RIVET_ENDPOINT" show />
+				<DiscreteInput value={engineEnv().VITE_APP_API_URL} />
 				<DiscreteInput value="RIVET_TOKEN" show />
 				{isLoading ? (
 					<Skeleton className="w-56 h-10" />

frontend/src/app/forms/connect-railway-form.tsx

@@ -1,12 +1,11 @@
 import { faCheck, faSpinnerThird, Icon } from "@rivet-gg/icons";
 import { useInfiniteQuery } from "@tanstack/react-query";
-import { motion } from "framer-motion";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import type { UseFormReturn } from "react-hook-form";
 import z from "zod";
 import { cn, createSchemaForm } from "@/components";
 import { useEngineCompatDataProvider } from "@/components/actors";
-import { NeedHelp } from "./connect-vercel-form";
+import confetti from "canvas-confetti";
 
 export const formSchema = z.object({});
 
@@ -37,15 +36,27 @@ export const ConnectionCheck = function ConnectionCheck() {
 	const success =
 		data !== undefined && data > 0 && data !== lastCount.current;
 
+	useEffect(() => {
+		if(success){
+			confetti({
+				angle: 60,
+				spread: 55,
+				origin: { x: 0 },
+			});
+			confetti({
+				angle: 120,
+				spread: 55,
+				origin: { x: 1 },
+			});
+		}
+	}, [success])
+
 	return (
-		<motion.div
-			layoutId="msg"
+		<div
 			className={cn(
-				"text-center text-muted-foreground text-sm overflow-hidden flex items-center justify-center",
+				"text-center h-24 text-muted-foreground text-sm overflow-hidden flex items-center justify-center",
 				success && "text-primary-foreground",
 			)}
-			initial={{ height: 0, opacity: 0.5 }}
-			animate={{ height: "6rem", opacity: 1 }}
 		>
 			{success ? (
 				<>
@@ -61,9 +72,8 @@ export const ConnectionCheck = function ConnectionCheck() {
 						/>{" "}
 						Waiting for Runner to connect...
 					</div>
-					<NeedHelp />
 				</div>
 			)}
-		</motion.div>
+		</div>
 	);
 };

frontend/src/app/forms/connect-vercel-form.tsx

@@ -230,7 +230,7 @@ export function NeedHelp() {
 
 	return (
 		<HelpDropdown>
-			<Button variant="outline">Need help?</Button>
+			<Button variant="ghost">Need help?</Button>
 		</HelpDropdown>
 	);
 }