diff --git a/frontend/src/app/dialogs/connect-quick-railway-frame.tsx b/frontend/src/app/dialogs/connect-quick-railway-frame.tsx
new file mode 100644
index 0000000000..074491890e
--- /dev/null
+++ b/frontend/src/app/dialogs/connect-quick-railway-frame.tsx
@@ -0,0 +1,186 @@
+import { faRailway, Icon } from "@rivet-gg/icons";
+import {
+ useMutation,
+ usePrefetchInfiniteQuery,
+ useSuspenseInfiniteQuery,
+} from "@tanstack/react-query";
+import confetti from "canvas-confetti";
+import z from "zod";
+import * as ConnectRailwayForm from "@/app/forms/connect-railway-form";
+import {
+ Accordion,
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+ type DialogContentProps,
+ ExternalLinkCard,
+ Frame,
+} from "@/components";
+import { useEngineCompatDataProvider } from "@/components/actors";
+import { defineStepper } from "@/components/ui/stepper";
+import { queryClient } from "@/queries/global";
+import { useRailwayTemplateLink } from "@/utils/use-railway-template-link";
+import { StepperForm } from "../forms/stepper-form";
+
+const stepper = defineStepper(
+ {
+ id: "step-1",
+ title: "Deploy to Railway",
+ assist: false,
+ next: "Next",
+ schema: z.object({
+ runnerName: z.string().min(1, "Runner name is required"),
+ datacenter: z.string().min(1, "Please select a region"),
+ }),
+ },
+ {
+ id: "step-2",
+ title: "Wait for the Runner to connect",
+ assist: true,
+ schema: z.object({
+ success: z.boolean().refine((v) => v === true, {
+ message: "Runner must be connected to proceed",
+ }),
+ }),
+ next: "Add",
+ },
+);
+
+interface ConnectQuickRailwayFrameContentProps extends DialogContentProps {}
+
+export default function ConnectQuickRailwayFrameContent({
+ onClose,
+}: ConnectQuickRailwayFrameContentProps) {
+ usePrefetchInfiniteQuery({
+ ...useEngineCompatDataProvider().regionsQueryOptions(),
+ pages: Infinity,
+ });
+ const { data } = useSuspenseInfiniteQuery(
+ useEngineCompatDataProvider().regionsQueryOptions(),
+ );
+
+ const prefferedRegionForRailway =
+ data.find((region) => region.name.toLowerCase().includes("us-west"))
+ ?.id ||
+ data.find((region) => region.name.toLowerCase().includes("us-east"))
+ ?.id ||
+ data.find((region) => region.name.toLowerCase().includes("ore"))?.id ||
+ "auto";
+
+ return (
+ <>
+
+
+
+ Add Railway
+
+
+
+
+
+
+
+ );
+}
+
+function FormStepper({
+ onClose,
+ defaultDatacenter,
+}: {
+ onClose?: () => void;
+ defaultDatacenter: string;
+}) {
+ const provider = useEngineCompatDataProvider();
+ const { mutateAsync } = useMutation({
+ ...provider.upsertRunnerConfigMutationOptions(),
+ onSuccess: async () => {
+ confetti({
+ angle: 60,
+ spread: 55,
+ origin: { x: 0 },
+ });
+ confetti({
+ angle: 120,
+ spread: 55,
+ origin: { x: 1 },
+ });
+
+ await queryClient.invalidateQueries(
+ provider.runnerConfigsQueryOptions(),
+ );
+ onClose?.();
+ },
+ });
+ return (
+
{
+ await mutateAsync({
+ name: values.runnerName,
+ config: {
+ [values.datacenter]: {
+ normal: {},
+ metadata: { provider: "railway" },
+ },
+ },
+ });
+ }}
+ defaultValues={{
+ runnerName: "default",
+ success: true,
+ datacenter: defaultDatacenter,
+ }}
+ content={{
+ "step-1": () => ,
+ "step-2": () => ,
+ }}
+ />
+ );
+}
+
+function Step1({ datacenter }: { datacenter: string }) {
+ return (
+ <>
+
+
+ Deploy the Rivet Railway template to get started quickly.
+
+
+
- Set the following environment variables in your Vercel project
- settings.
-
-
+
+
+ Deploy the Rivet Vercel template to get started quickly.
+
+
+
+
+ Set the following environment variables:
+
+
+
-
- Deploy your project to Vercel using your preferred method
-
- . After deployment, return here to add the endpoint.
-
-
+
+
+
+ Advanced
+
+
+
+
+
+
+
+
+
+
+
+
+
);
}
diff --git a/frontend/src/app/dialogs/connect-railway-frame.tsx b/frontend/src/app/dialogs/connect-railway-frame.tsx
index 71ca84a483..717aa9e3df 100644
--- a/frontend/src/app/dialogs/connect-railway-frame.tsx
+++ b/frontend/src/app/dialogs/connect-railway-frame.tsx
@@ -177,8 +177,8 @@ export function EnvVariablesStep() {
Value
-
+