Add computed sha256 field to sethook form

components/Input.tsx

@@ -59,6 +59,8 @@ export const Input = styled("input", {
   },
   "&:read-only": {
     backgroundColor: "$mauve2",
+    color: "$text",
+    opacity: 0.8,
     "&:focus": {
       boxShadow: "inset 0px 0px 0px 1px $colors$mauve7",
     },

components/SetHookDialog.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { Plus, Trash, X } from "phosphor-react";
 import Button from "./Button";
 import Box from "./Box";
@@ -25,6 +25,7 @@ import type { IAccount } from "../state";
 import { useSnapshot } from "valtio";
 import state from "../state";
 import toast from "react-hot-toast";
+import { sha256 } from "../state/actions/deployHook";
 
 const transactionOptions = Object.keys(tts).map((key) => ({
   label: key,
@@ -58,6 +59,7 @@ export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
     register,
     handleSubmit,
     control,
+    watch,
     formState: { errors },
   } = useForm<SetHookData>();
   const { fields, append, remove } = useFieldArray({
@@ -72,6 +74,16 @@ export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
   //   control,
   //   name: "HookGrants", // unique name for your Field Array
   // });
+  const [hashedNamespace, setHashedNamespace] = useState("");
+  const namespace = watch("HookNamespace");
+  const calculateHashedValue = useCallback(async () => {
+    const hashedVal = await sha256(namespace);
+    setHashedNamespace(hashedVal.toUpperCase());
+  }, [namespace]);
+  useEffect(() => {
+    calculateHashedValue();
+  }, [namespace, calculateHashedValue]);
+
   if (!account) {
     return null;
   }
@@ -90,6 +102,7 @@ export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
     }
     toast.error(`Transaction failed! (${res?.engine_result_message})`);
   };
+
   return (
     <Dialog open={isSetHookDialogOpen} onOpenChange={setIsSetHookDialogOpen}>
       <DialogTrigger asChild>
@@ -143,6 +156,10 @@ export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
                     Namespace is required
                   </Box>
                 )}
+                <Box css={{ mt: "$3" }}>
+                  <label>Hook Namespace (sha256)</label>
+                  <Input readOnly value={hashedNamespace} />
+                </Box>
               </Box>
               <Box css={{ width: "100%" }}>
                 <label style={{ marginBottom: "10px", display: "block" }}>