From dacdaefd925c7cd2e71f28b6294b797c6d9a2bf1 Mon Sep 17 00:00:00 2001
From: Kacper Wojciechowski <39823706+jog1t@users.noreply.github.com>
Date: Wed, 8 Oct 2025 02:16:43 +0200
Subject: [PATCH] fix: railway connect form

---
 frontend/package.json                         |  2 +
 .../src/app/dialogs/connect-railway-frame.tsx | 38 +++++--------------
 .../src/app/forms/connect-railway-form.tsx    | 30 ++++++++++-----
 .../src/app/forms/connect-vercel-form.tsx     |  2 +-
 pnpm-lock.yaml                                | 22 +++++++++--
 5 files changed, 51 insertions(+), 43 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index eead94e7ba..98585d4ade 100644
--- a/frontend/package.json
+++ b/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",
diff --git a/frontend/src/app/dialogs/connect-railway-frame.tsx b/frontend/src/app/dialogs/connect-railway-frame.tsx
index db7bda46a3..2c349fffc4 100644
--- a/frontend/src/app/dialogs/connect-railway-frame.tsx
+++ b/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" />
diff --git a/frontend/src/app/forms/connect-railway-form.tsx b/frontend/src/app/forms/connect-railway-form.tsx
index b4baf7be9c..f4e4caa215 100644
--- a/frontend/src/app/forms/connect-railway-form.tsx
+++ b/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>
 	);
 };
diff --git a/frontend/src/app/forms/connect-vercel-form.tsx b/frontend/src/app/forms/connect-vercel-form.tsx
index 9d8bc978c1..eb5170a6de 100644
--- a/frontend/src/app/forms/connect-vercel-form.tsx
+++ b/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>
 	);
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6d8c28e60a..72464974c6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -245,6 +245,9 @@ importers:
       '@types/bcryptjs':
         specifier: ^2.4.6
         version: 2.4.6
+      '@types/canvas-confetti':
+        specifier: ^1.9.0
+        version: 1.9.0
       '@types/escape-html':
         specifier: ^1.0.4
         version: 1.0.4
@@ -287,6 +290,9 @@ importers:
       bcryptjs:
         specifier: ^2.4.3
         version: 2.4.3
+      canvas-confetti:
+        specifier: ^1.9.3
+        version: 1.9.3
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -3699,6 +3705,9 @@ packages:
   '@types/bcryptjs@2.4.6':
     resolution: {integrity: sha512-9xlo6R2qDs5uixm0bcIqCeMCE6HiQsIyel9KQySStiyqNl2tnj2mP3DX1Nf56MD6KMenNNlBBsy3LJ7gUEQPXQ==}
 
+  '@types/canvas-confetti@1.9.0':
+    resolution: {integrity: sha512-aBGj/dULrimR1XDZLtG9JwxX1b4HPRF6CX9Yfwh3NvstZEm1ZL7RBnel4keCPSqs1ANRu1u2Aoz9R+VmtjYuTg==}
+
   '@types/cors@2.8.19':
     resolution: {integrity: sha512-mFNylyeyqN93lfe/9CSxOGREz8cpzAhH+E93xJ4xWQf62V8sQ/24reV2nyzUWM6H6Xji+GGHpkbLe7pVoUEskg==}
 
@@ -4410,6 +4419,9 @@ packages:
   caniuse-lite@1.0.30001741:
     resolution: {integrity: sha512-QGUGitqsc8ARjLdgAfxETDhRbJ0REsP6O3I96TAth/mVjh2cYzN2u+3AzPP3aVSm2FehEItaJw1xd+IGBXWeSw==}
 
+  canvas-confetti@1.9.3:
+    resolution: {integrity: sha512-rFfTURMvmVEX1gyXFgn5QMn81bYk70qa0HLzcIOSVEyl57n6o9ItHeBtUSWdvKAPY0xlvBHno4/v3QPrT83q9g==}
+
   cbor-extract@2.2.0:
     resolution: {integrity: sha512-Ig1zM66BjLfTXpNgKpvBePq271BPOvu8MR0Jl080yG7Jsl+wAZunfrwiwA+9ruzm/WEdIV5QF/bjDZTqyAIVHA==}
     hasBin: true
@@ -11100,6 +11112,8 @@ snapshots:
 
   '@types/bcryptjs@2.4.6': {}
 
+  '@types/canvas-confetti@1.9.0': {}
+
   '@types/cors@2.8.19':
     dependencies:
       '@types/node': 24.3.1
@@ -11895,6 +11909,8 @@ snapshots:
 
   caniuse-lite@1.0.30001741: {}
 
+  canvas-confetti@1.9.3: {}
+
   cbor-extract@2.2.0:
     dependencies:
       node-gyp-build-optional-packages: 5.1.1
@@ -12543,7 +12559,7 @@ snapshots:
       eslint: 8.26.0
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 2.7.1(eslint-plugin-import@2.32.0(eslint@8.26.0))(eslint@8.26.0)
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@5.62.0(eslint@8.26.0)(typescript@5.9.2))(eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.32.0(eslint@8.26.0))(eslint@8.26.0))(eslint@8.26.0)
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@5.62.0(eslint@8.26.0)(typescript@5.9.2))(eslint-import-resolver-typescript@2.7.1)(eslint@8.26.0)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@8.26.0)
       eslint-plugin-react: 7.37.5(eslint@8.26.0)
       eslint-plugin-react-hooks: 4.6.2(eslint@8.26.0)
@@ -12565,7 +12581,7 @@ snapshots:
     dependencies:
       debug: 4.4.1
       eslint: 8.26.0
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@5.62.0(eslint@8.26.0)(typescript@5.9.2))(eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.32.0(eslint@8.26.0))(eslint@8.26.0))(eslint@8.26.0)
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@5.62.0(eslint@8.26.0)(typescript@5.9.2))(eslint-import-resolver-typescript@2.7.1)(eslint@8.26.0)
       glob: 7.2.3
       is-glob: 4.0.3
       resolve: 1.22.10
@@ -12584,7 +12600,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.32.0(@typescript-eslint/parser@5.62.0(eslint@8.26.0)(typescript@5.9.2))(eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.32.0(eslint@8.26.0))(eslint@8.26.0))(eslint@8.26.0):
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@5.62.0(eslint@8.26.0)(typescript@5.9.2))(eslint-import-resolver-typescript@2.7.1)(eslint@8.26.0):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.9