feat(installBundle): add :bundles follower to confirm installation

package.json

@@ -21,6 +21,7 @@
     "ts:check": "tsc --noEmit"
   },
   "dependencies": {
+    "@agoric/casting": "^0.4.3-u13.0",
     "@agoric/cosmic-proto": "dev",
     "@agoric/eventual-send": "^0.14.1",
     "@agoric/notifier": "^0.6.2",

src/components/BundleFollowerToastMessage.tsx

@@ -0,0 +1,45 @@
+import { toast } from "react-toastify";
+import { ClipboardDocumentIcon } from "@heroicons/react/20/solid";
+import { XMarkIcon } from "@heroicons/react/20/solid";
+
+export const BundleFollowerToastMessage = ({
+  endoZipBase64Sha512,
+  closeToast = () => {},
+}: {
+  endoZipBase64Sha512: string;
+  closeToast: () => void;
+}) => (
+  <div className="flex items-start pointer-events-auto">
+    <div className="ml-3 w-0 flex-1 pt-0.5">
+      <p className="text-sm font-medium text-gray-900">
+        Bundle Successfully Installed!
+      </p>
+      <span className="mt-1 text-sm text-gray-500">
+        <span
+          className="text-sm text-blue-500 hover:text-blue-700 underline cursor-pointer"
+          onClick={async () => {
+            await window.navigator.clipboard.writeText(endoZipBase64Sha512);
+            toast.info("Copied to clipboard!", {
+              position: "bottom-center",
+              autoClose: 3000,
+              hideProgressBar: true,
+            });
+          }}
+        >
+          EndoZipBase64Sha512{" "}
+          <ClipboardDocumentIcon className="inline-block w-4 h-4" />
+        </span>
+      </span>
+    </div>
+    <div className="ml-4 flex flex-shrink-0">
+      <button
+        type="button"
+        className="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2"
+        onClick={closeToast}
+      >
+        <span className="sr-only">Close</span>
+        <XMarkIcon className="h-5 w-5" aria-hidden="true" />
+      </button>
+    </div>
+  </div>
+);

src/config/agoric/agoric.tsx

@@ -15,13 +15,15 @@ import {
 } from "../../lib/messageBuilder";
 import { isValidBundle } from "../../utils/validate";
 import { makeSignAndBroadcast } from "../../lib/signAndBroadcast";
+import { useWatchBundle } from "../../hooks/useWatchBundle";
 
 const Agoric = () => {
   const { netName } = useNetwork();
   const { walletAddress, stargateClient } = useWallet();
   const proposalFormRef = useRef<HTMLFormElement>(null);
   const corEvalFormRef = useRef<HTMLFormElement>(null);
   const bundleFormRef = useRef<HTMLFormElement>(null);
+  const watchBundle = useWatchBundle();
 
   const signAndBroadcast = useMemo(
     () => makeSignAndBroadcast(stargateClient, walletAddress, netName),
@@ -46,8 +48,12 @@ const Agoric = () => {
       submitter: walletAddress,
     });
     try {
-      await signAndBroadcast(proposalMsg, "bundle");
-      bundleFormRef.current?.reset();
+      const txResponse = await signAndBroadcast(proposalMsg, "bundle");
+      if (txResponse) {
+        const endoZipBase64Sha512 = JSON.parse(vals.bundle).endoZipBase64Sha512;
+        await watchBundle(endoZipBase64Sha512, txResponse);
+        bundleFormRef.current?.reset();
+      }
     } catch (e) {
       console.error(e);
     }

src/hooks/useWatchBundle.tsx

@@ -0,0 +1,61 @@
+import {
+  iterateEach,
+  makeCastingSpec,
+  makeFollower,
+  makeLeader,
+} from "@agoric/casting";
+import { toast } from "react-toastify";
+import { useNetwork } from "./useNetwork";
+import { BundleFollowerToastMessage } from "../components/BundleFollowerToastMessage";
+
+type IteratorEnvelope = {
+  value?: {
+    endoZipBase64Sha512: string;
+    installed: boolean;
+    error: unknown;
+  };
+  error?: { message: string; stack: string };
+};
+
+export const useWatchBundle = () => {
+  const { networkConfig } = useNetwork();
+  const leader = networkConfig ? makeLeader(networkConfig.rpc) : undefined;
+
+  const watchBundle = async (
+    expectedEndoZipBase64Sha512: string,
+    { height }: { height: number },
+  ) => {
+    if (!leader) throw Error("Unexpected error: leader not found.");
+    const castingSpec = makeCastingSpec(":bundles");
+    const follower = makeFollower(castingSpec, leader);
+    for await (const envelope of iterateEach(follower, { height })) {
+      const { value, error } = envelope as IteratorEnvelope;
+      if (!value && error) {
+        toast.error(`Bundle installation failed.\nSee console for details.`);
+        console.log(envelope);
+        throw error;
+      }
+      if (value) {
+        const { endoZipBase64Sha512, installed, error } = value;
+        if (endoZipBase64Sha512 === expectedEndoZipBase64Sha512) {
+          if (!installed) {
+            toast.error(
+              `Bundle installation failed.\nSee console for details.`,
+            );
+            throw error;
+          } else {
+            toast.success(({ closeToast }) => (
+              <BundleFollowerToastMessage
+                endoZipBase64Sha512={endoZipBase64Sha512}
+                closeToast={closeToast as () => void}
+              />
+            ));
+            return;
+          }
+        }
+      }
+    }
+  };
+
+  return watchBundle;
+};