feat: add build and deploy buttons

app/deployments/page.tsx

@@ -26,7 +26,7 @@ export default function Page() {
       <Table className="mb-8">
         <TableHeader>
           <TableRow>
-            <TableHead>Date and time</TableHead>
+            <TableHead className="w-1/3">Date and time</TableHead>
             <TableHead>Contract Address</TableHead>
           </TableRow>
         </TableHeader>

app/workspace/[id]/page.tsx

@@ -1,6 +1,8 @@
 "use client";
 
+import { BuildDeployPanel } from "@/components/build-deploy-panel";
 import TopBottom from "@/components/top-bottom";
+import { Button } from "@/components/ui/button";
 import {
   ResizablePanelGroup,
   ResizablePanel,
@@ -14,20 +16,16 @@ import { TerminalContextProvider } from "react-terminal";
 export default function Page() {
   return (
     <ResizablePanelGroup direction="horizontal" className="border">
-      <ResizablePanel defaultSize={25}>
-        <TopBottom top={<FileExplorer />} bottom={<p>Chat component</p>} />
-      </ResizablePanel>
-      <ResizableHandle />
-      <ResizablePanel defaultSize={75}>
-        <TopBottom
-          top={<Editor />}
-          bottom={
-            <TerminalContextProvider>
-              <Cli />
-            </TerminalContextProvider>
-          }
-        />
-      </ResizablePanel>
+      <TerminalContextProvider>
+        <ResizablePanel defaultSize={25}>
+          <BuildDeployPanel />
+          <FileExplorer />
+        </ResizablePanel>
+        <ResizableHandle />
+        <ResizablePanel defaultSize={75}>
+          <TopBottom top={<Editor />} bottom={<Cli />} />
+        </ResizablePanel>
+      </TerminalContextProvider>
     </ResizablePanelGroup>
   );
 }

components/build-deploy-panel.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "./ui/button";
+import { useCliCommands } from "./workspace/use-cli-commands";
+import useSWR from "swr";
+import { useParams } from "next/navigation";
+import { db } from "@/data/db";
+
+export function BuildDeployPanel() {
+  const commands = useCliCommands();
+  const [isBuilding, setIsBuilding] = useState(false);
+  const [isDeploying, setIsDeploying] = useState(false);
+
+  const { id } = useParams<{ id: string }>();
+  const { data: isDeployable } = useSWR(
+    id ? `deployable-${id}` : undefined,
+    async () => {
+      const ws = await db.workspaces.get(id);
+      return typeof ws?.dll === "string";
+    }
+  );
+
+  return (
+    <div className="p-4 border-b-2 flex gap-2">
+      <Button
+        disabled={isBuilding}
+        onClick={async () => {
+          try {
+            setIsDeploying(false);
+            setIsBuilding(true);
+            await commands.build();
+          } catch (err) {
+          } finally {
+            setIsBuilding(false);
+          }
+        }}
+      >
+        Build
+      </Button>
+      <Button
+        disabled={isBuilding || !isDeployable || isDeploying}
+        onClick={async () => {
+          try {
+            setIsDeploying(true);
+            await commands.deploy();
+          } catch (err) {
+          } finally {
+            setIsDeploying(false);
+          }
+        }}
+      >
+        Deploy
+      </Button>
+    </div>
+  );
+}

components/workspace/cli.tsx

@@ -1,116 +1,11 @@
 "use client";
 
-import { build } from "@/data/build";
-import { db } from "@/data/db";
-import { useWallet } from "@/data/wallet";
 import { useTheme } from "next-themes";
-import { useParams } from "next/navigation";
 import { ReactTerminal } from "react-terminal";
-import { z } from "zod";
+import { useCliCommands } from "./use-cli-commands";
 
 export default function Cli() {
-  const { id } = useParams();
-  const wallet = useWallet();
-  const commands = {
-    help: () => (
-      <div>
-        <p>These are the available commands:</p>
-        <ol>
-          <li className="ml-8">clear - clears the terminal</li>
-          <li className="ml-8">build - builds the current workspace</li>
-          <li className="ml-8">deploy - deploys the built smart contract</li>
-          <li className="ml-8">
-            check txID - checks the result of transaction
-          </li>
-        </ol>
-      </div>
-    ),
-    build: async () => {
-      if (typeof id !== "string") throw new Error("id is not string");
-      const start = `/workspace/${id}/`;
-      const files = await db.files
-        .filter((file) => file.path.startsWith(start))
-        .toArray();
-      const params = files
-        .map((file) => ({
-          path: decodeURIComponent(file.path.replace(start, "")),
-          contents: file.contents,
-        }))
-        .filter((i) => i.path.startsWith("src"));
-
-      const str = await build(params);
-      await db.workspaces.update(id, { dll: str });
-
-      return "Build successful.";
-    },
-    deploy: async () => {
-      if (typeof id !== "string") return "Workspace id not found.";
-      const { dll } = (await db.workspaces.get(id)) || {};
-      if (!dll) return "Contract not built. Please build first.";
-      if (!wallet) return "Wallet not ready.";
-      try {
-        await wallet.faucet();
-      } catch (err) {}
-      const { TransactionId } = await wallet.deploy(dll);
-      try {
-        const result = await wallet.getTxResult(TransactionId);
-        return `TransactionId: ${TransactionId}, Status: ${result.Status}`;
-      } catch (err) {
-        return JSON.stringify(err, undefined, 2);
-      }
-    },
-    check: async (id: string) => {
-      if (!id) return `Please enter the Transaction ID.`;
-      if (!wallet) return "Wallet not ready.";
-      try {
-        const result = await wallet.getTxResult(id);
-        const logs = await wallet.getLogs(id);
-        const { data } = z.object({ proposalId: z.string() }).safeParse(logs);
-        if (!data?.proposalId) return "Missing proposalId.";
-        const proposalInfo = await wallet.getProposalInfo(data?.proposalId);
-        const releasedTxId = proposalInfo?.data.proposal.releasedTxId;
-        const releasedTxLogs = releasedTxId
-          ? await wallet.getLogs(releasedTxId)
-          : undefined;
-        const { data: contractAddressData } = z
-          .object({ address: z.string() })
-          .safeParse(releasedTxLogs);
-
-        return (
-          <>
-            <table className="mt-4">
-              <tr>
-                <td className="pr-4">TransactionId:</td>
-                <td>{id}</td>
-              </tr>
-              <tr>
-                <td>Status:</td>
-                <td>{result.Status}</td>
-              </tr>
-              <tr>
-                <td>ProposalId:</td>
-                <td>{data?.proposalId}</td>
-              </tr>
-              <tr>
-                <td>Proposal Status:</td>
-                <td>{proposalInfo?.data.proposal.status}</td>
-              </tr>
-              <tr>
-                <td>Contract Address:</td>
-                <td>
-                  {proposalInfo?.data.proposal.status === "released"
-                    ? contractAddressData?.address
-                    : "-"}
-                </td>
-              </tr>
-            </table>
-          </>
-        );
-      } catch (err) {
-        return JSON.stringify(err, undefined, 2);
-      }
-    },
-  };
+  const commands = useCliCommands();
 
   const { theme, systemTheme } = useTheme();