chore: Update version flow updates deployment

Author: arcoraven

apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts

@@ -25,6 +25,7 @@ export type EngineInstance = {
     | "deploying"
     | "paymentFailed"
     | "deploymentFailed";
+  deploymentId: string;
 };
 
 // Not checking for null token because the token is required the tanstack useQuery hook
@@ -188,23 +189,26 @@ export function useEngineLatestVersion() {
 
 interface UpdateVersionInput {
   engineId: string;
+  serverVersion: string;
 }
 
-export function useEngineUpdateVersion() {
+export function useEngineUpdateServerVersion() {
   return useMutation({
     mutationFn: async (input: UpdateVersionInput) => {
       invariant(input.engineId, "engineId is required");
 
-      const res = await fetch(`${THIRDWEB_API_HOST}/v1/engine/update-version`, {
-        method: "POST",
-
-        headers: {
-          "Content-Type": "application/json",
+      const res = await fetch(
+        `${THIRDWEB_API_HOST}/v2/engine/${input.engineId}/infrastructure`,
+        {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            serverVersion: input.serverVersion,
+          }),
         },
-        body: JSON.stringify({
-          engineId: input.engineId,
-        }),
-      });
+      );
       // we never use the response body
       res.body?.cancel();
       if (!res.ok) {

apps/dashboard/src/components/engine/badges/version.tsx

@@ -4,7 +4,7 @@ import {
   type EngineInstance,
   useEngineLatestVersion,
   useEngineSystemHealth,
-  useEngineUpdateVersion,
+  useEngineUpdateServerVersion,
 } from "@3rdweb-sdk/react/hooks/useEngine";
 import { CircleArrowDownIcon, CloudDownloadIcon } from "lucide-react";
 import { useState } from "react";
@@ -30,15 +30,17 @@ export const EngineVersionBadge = ({
   const latestVersionQuery = useEngineLatestVersion();
   const [isModalOpen, setModalOpen] = useState(false);
 
-  const current = healthQuery.data?.engineVersion ?? "...";
-  const latest = latestVersionQuery.data ?? "...";
-  const isStale = current !== latest;
+  const currentVersion = healthQuery.data?.engineVersion ?? "...";
+  const latestVersion = "v2.0.17";
+  // DEBUG
+  // const latestVersion = latestVersionQuery.data;
+  const isStale = latestVersion && currentVersion !== latestVersion;
 
   if (!isStale) {
     return (
       <ToolTipLabel label="Latest Version">
         <Button variant="outline" asChild className="hover:bg-transparent">
-          <div>{current}</div>
+          <div>{currentVersion}</div>
         </Button>
       </ToolTipLabel>
     );
@@ -57,7 +59,7 @@ export const EngineVersionBadge = ({
           className="relative"
           onClick={() => setModalOpen(true)}
         >
-          {current}
+          {currentVersion}
 
           {/* Notification Dot */}
           <span className="-top-1 -right-1 absolute">
@@ -66,24 +68,26 @@ export const EngineVersionBadge = ({
         </Button>
       </ToolTipLabel>
 
-      <UpdateVersionModal
-        open={isModalOpen}
-        onOpenChange={setModalOpen}
-        latest={latest ?? ""}
-        instance={instance}
-      />
+      {latestVersion && (
+        <UpdateVersionModal
+          open={isModalOpen}
+          onOpenChange={setModalOpen}
+          latestVersion={latestVersion}
+          instance={instance}
+        />
+      )}
     </>
   );
 };
 
 const UpdateVersionModal = (props: {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  latest: string;
+  latestVersion: string;
   instance: EngineInstance;
 }) => {
-  const { open, onOpenChange, latest, instance } = props;
-  const updateEngine = useEngineUpdateVersion();
+  const { open, onOpenChange, latestVersion, instance } = props;
+  const updateEngineServerMutation = useEngineUpdateServerVersion();
 
   if (!instance.cloudDeployedAt) {
     // For self-hosted, show a prompt to the Github release page.
@@ -95,19 +99,20 @@ const UpdateVersionModal = (props: {
         >
           <DialogHeader>
             <DialogTitle className="mb-6 pr-4 font-semibold text-2xl tracking-tight">
-              Update your self-hosted Engine to {latest}
+              Update your self-hosted Engine to {latestVersion}
             </DialogTitle>
             <DialogDescription>
-              View the changelog in the
+              View the{" "}
               <TrackedLinkTW
                 href="https://github.com/thirdweb-dev/engine/releases"
                 category="engine"
                 label="clicked-engine-releases"
                 target="_blank"
                 className="text-link-foreground hover:text-foreground"
               >
-                Engine Github repository
+                latest changelog
               </TrackedLinkTW>
+              .
             </DialogDescription>
           </DialogHeader>
         </DialogContent>
@@ -117,11 +122,13 @@ const UpdateVersionModal = (props: {
 
   const onClick = async () => {
     try {
-      const promise = updateEngine.mutateAsync({ engineId: instance.id });
+      const promise = updateEngineServerMutation.mutateAsync({
+        engineId: instance.id,
+        serverVersion: latestVersion,
+      });
       toast.promise(promise, {
-        success:
-          "Submitted a request to update your Engine instance. Please allow 1-2 business days for this process.",
-        error: "Unexpected error updating your Engine instance.",
+        success: `Upgrading your Engine to ${latestVersion}. Please confirm after a few minutes.`,
+        error: "Unexpected error updating your Engine.",
       });
       await promise;
     } finally {
@@ -136,7 +143,12 @@ const UpdateVersionModal = (props: {
         dialogOverlayClassName="z-[10000]"
       >
         <DialogHeader>
-          <DialogTitle>Update Engine to {latest}?</DialogTitle>
+          <DialogTitle>Update Engine to {latestVersion}?</DialogTitle>
+
+          <DialogDescription>
+            {`It is recommended to pause traffic to Engine before performing this
+            upgrade. There is < 1 minute of expected downtime.`}
+          </DialogDescription>
         </DialogHeader>
 
         <DialogFooter className="mt-5">
@@ -153,7 +165,7 @@ const UpdateVersionModal = (props: {
             variant="primary"
             className="gap-2"
           >
-            {updateEngine.isPending ? (
+            {updateEngineServerMutation.isPending ? (
               <Spinner className="size-4" />
             ) : (
               <CloudDownloadIcon className="size-4" />

apps/dashboard/src/components/engine/configuration/ip-allowlist.tsx

@@ -84,7 +84,7 @@ export const EngineIpAllowlistConfig: React.FC<
       </Flex>
 
       <Textarea
-        placeholder="8.8.8.8\nff06:0:0:0:0:0:0:c3"
+        placeholder={"8.8.8.8\nff06:0:0:0:0:0:0:c3"}
         rows={4}
         {...form.register("raw")}
       />

apps/dashboard/src/components/engine/create/CreateEnginePage.tsx

@@ -115,7 +115,7 @@ export const CreateEnginePage = () => {
       </h1>
 
       <p className="mb-7 text-muted-foreground">
-        Host Engine on thirdweb with no setup or maintenance required
+        Host Engine on thirdweb with no setup or maintenance required.
       </p>
 
       <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">

apps/dashboard/src/components/engine/engine-instances-table.tsx

@@ -266,11 +266,7 @@ const EditModal = (props: {
               className="gap-2"
               disabled={!form.formState.isDirty}
             >
-              {editInstance.isPending ? (
-                <Spinner className="size-4" />
-              ) : (
-                <SendIcon className="size-4" />
-              )}
+              {editInstance.isPending && <Spinner className="size-4" />}
               Update
             </Button>
           </DialogFooter>

apps/dashboard/src/components/engine/import/EngineImportPage.tsx

@@ -114,7 +114,7 @@ export const EngineImportPage = () => {
             <div className="mt-2 flex items-center gap-2">
               <CircleAlertIcon className="!static size-3 text-warning-foreground" />
               <p className="text-muted-foreground text-sm">
-                Do not import a URL you do not recognize
+                Do not import a URL you do not recognize.
               </p>
             </div>
           </FormControl>