feat: deployment status

components/workspace/use-cli-commands.tsx

@@ -1,11 +1,10 @@
+import { useLogs, useProposalInfo, useTransactionResult } from "@/data/client";
 import { db } from "@/data/db";
 import { useWallet } from "@/data/wallet";
 import { Loader2 } from "lucide-react";
-import Link from "next/link";
 import { useParams } from "next/navigation";
 import { useContext } from "react";
 import { TerminalContext } from "react-terminal";
-import { z } from "zod";
 
 export function useCliCommands() {
   const terminalContext = useContext(TerminalContext);
@@ -111,80 +110,73 @@ export function useCliCommands() {
         return;
       }
       const { TransactionId } = await wallet.deploy(dll);
-      try {
-        const result = await wallet.getTxResult(TransactionId);
-        terminalContext.setBufferedContent(
-          <>
-            <p>TransactionId: {TransactionId}</p>
-            <p>Status: {result.Status}</p>
-            <p>
-              <Link href="/deployments">See all deployments</Link>
-            </p>
-          </>
-        );
-        return;
-      } catch (err) {
-        terminalContext.setBufferedContent(
-          <>
-            {JSON.stringify(err, undefined, 2)}
-            <br />
-          </>
-        );
-        return;
-      }
+      terminalContext.setBufferedContent(
+        <>
+          <p>TransactionId: {TransactionId}</p>
+          <Deployment id={TransactionId} />
+        </>
+      );
     },
     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);
-      }
+      terminalContext.setBufferedContent(
+        <>
+          <p>TransactionId: {id}</p>
+          <Deployment id={id} />
+        </>
+      );
     },
   };
 
   return commands;
 }
+
+function Deploying() {
+  return (
+    <p>
+      <Loader2 className="h-4 w-4 animate-spin inline" /> Deploying...
+    </p>
+  );
+}
+
+function Deployment({ id }: { id: string }) {
+  const { data } = useTransactionResult(id);
+
+  if (!data)
+    return (
+      <>
+        <Deploying />
+      </>
+    );
+  if (data.Status === "PENDING") return <Deploying />;
+
+  return <CheckProposalInfo id={id} />;
+}
+
+function CheckProposalInfo({ id }: { id: string }) {
+  const { data } = useLogs(id);
+  const { proposalId } = data || {};
+
+  const { data: proposalInfo } = useProposalInfo(proposalId);
+  const { status, releasedTxId } = proposalInfo?.proposal || {};
+
+  return (
+    <>
+      <p>Proposal status: {status || "pending"}</p>
+      {status === "released" ? (
+        <DeployedContractDetails id={releasedTxId} />
+      ) : (
+        <Deploying />
+      )}
+    </>
+  );
+}
+
+function DeployedContractDetails({ id }: { id?: string }) {
+  const { data } = useLogs(id);
+
+  if (!data) return <Deploying />;
+
+  return <p>Contract Address: {data.address}</p>;
+}

data/client.ts

@@ -1,8 +1,59 @@
 import useSWR from "swr";
 import { db } from "./db";
+import { aelf } from "./wallet";
+import { ProposalInfo } from "./proposal-info-types";
+import AElf from "aelf-sdk";
+const { deserializeLog } = AElf.pbUtils;
 
 export function useWorkspaces() {
   return useSWR("workspaces", async () => {
     return await db.workspaces.toArray();
   });
 }
+
+export function useTransactionResult(id?: string) {
+  return useSWR(
+    id ? `tx-${id}` : undefined,
+    async () => await aelf.chain.getTxResult(id),
+    { refreshInterval: 1000 }
+  );
+}
+
+export function useProposalInfo(id?: string) {
+  return useSWR(
+    id ? `get-proposal-info-${id}` : undefined,
+    async () => {
+      const res = await fetch(`/api/get-proposal-info?id=${id}`);
+      const { data }: ProposalInfo = await res.json();
+
+      return data;
+    },
+    { refreshInterval: 1000 }
+  );
+}
+
+export function useLogs(id?: string) {
+  return useSWR(
+    id ? `get-logs-${id}` : undefined,
+    async () => {
+      const txResult = await aelf.chain.getTxResult(id);
+
+      const services = await Promise.all(
+        txResult.Logs.map(async ({ Address }: { Address: string }) =>
+          AElf.pbjs.Root.fromDescriptor(
+            await aelf.chain.getContractFileDescriptorSet(Address)
+          )
+        )
+      );
+
+      const deserializedLogs: Array<{ proposalId: string }> =
+        await deserializeLog(txResult.Logs, services);
+
+      return deserializedLogs.reduce(
+        (acc, cur) => ({ ...acc, ...cur }),
+        {} as Record<string, string>
+      );
+    },
+    { refreshInterval: 1000 }
+  );
+}

data/wallet.ts

@@ -2,14 +2,13 @@
 
 import useSWR from "swr";
 import { db } from "./db";
-// @ts-ignore
 import AElf from "aelf-sdk";
 import BigNumber from "bignumber.js";
 import { ProposalInfo } from "./proposal-info-types";
 import { Transactions } from "./transactions-types";
 const { deserializeLog } = AElf.pbUtils;
 
-const aelf = new AElf(
+export const aelf = new AElf(
   new AElf.providers.HttpProvider("https://tdvw-test-node.aelf.io")
 );
 

index.d.ts

@@ -0,0 +1 @@
+declare module "aelf-sdk";