Updated based on feedback

Fix/fix sequence number

components/Accounts.tsx

@@ -469,7 +469,7 @@ const Accounts: FC<AccountProps> = (props) => {
                       e.stopPropagation();
                     }}
                   >
-                    <SetHookDialog account={account} />
+                    <SetHookDialog accountAddress={account.address} />
                   </div>
                 )}
               </Flex>

components/SetHookDialog.tsx

@@ -21,11 +21,11 @@ import {
 
 import { TTS, tts } from "../utils/hookOnCalculator";
 import { deployHook } from "../state/actions";
-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";
+import { prepareDeployHookTx, sha256 } from "../state/actions/deployHook";
+import estimateFee from "../utils/estimateFee";
 
 const transactionOptions = Object.keys(tts).map((key) => ({
   label: key,
@@ -37,6 +37,7 @@ export type SetHookData = {
     value: keyof TTS;
     label: string;
   }[];
+  Fee: string;
   HookNamespace: string;
   HookParameters: {
     HookParameter: {
@@ -52,176 +53,266 @@ export type SetHookData = {
   // }[];
 };
 
-export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
-  const snap = useSnapshot(state);
-  const [isSetHookDialogOpen, setIsSetHookDialogOpen] = useState(false);
-  const {
-    register,
-    handleSubmit,
-    control,
-    watch,
-    setValue,
-    formState: { errors },
-  } = useForm<SetHookData>({
-    defaultValues: {
-      HookNamespace: snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || "",
-    },
-  });
-  const { fields, append, remove } = useFieldArray({
-    control,
-    name: "HookParameters", // unique name for your Field Array
-  });
+export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
+  ({ accountAddress }) => {
+    const snap = useSnapshot(state);
+    const account = snap.accounts.find((acc) => acc.address === accountAddress);
 
-  // Update value if activeWat changes
-  useEffect(() => {
-    setValue(
+    const [isSetHookDialogOpen, setIsSetHookDialogOpen] = useState(false);
+    const {
+      register,
+      handleSubmit,
+      control,
+      watch,
+      setValue,
+      getValues,
+      formState: { errors },
+    } = useForm<SetHookData>({
+      defaultValues: {
+        HookNamespace:
+          snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || "",
+        Invoke: transactionOptions.filter((to) => to.label === "ttPAYMENT"),
+      },
+    });
+    const { fields, append, remove } = useFieldArray({
+      control,
+      name: "HookParameters", // unique name for your Field Array
+    });
+    const [formInitialized, setFormInitialized] = useState(false);
+    const [estimateLoading, setEstimateLoading] = useState(false);
+
+    // Update value if activeWat changes
+    useEffect(() => {
+      setValue(
+        "HookNamespace",
+        snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || ""
+      );
+      setFormInitialized(true);
+    }, [snap.activeWat, snap.files, setValue]);
+    // const {
+    //   fields: grantFields,
+    //   append: grantAppend,
+    //   remove: grantRemove,
+    // } = useFieldArray({
+    //   control,
+    //   name: "HookGrants", // unique name for your Field Array
+    // });
+    const [hashedNamespace, setHashedNamespace] = useState("");
+    const namespace = watch(
       "HookNamespace",
-      snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || ""
+      snap.files?.[snap.active]?.name?.split(".")?.[0] || ""
     );
-  }, [snap.activeWat, snap.files, setValue]);
-  // const {
-  //   fields: grantFields,
-  //   append: grantAppend,
-  //   remove: grantRemove,
-  // } = useFieldArray({
-  //   control,
-  //   name: "HookGrants", // unique name for your Field Array
-  // });
-  const [hashedNamespace, setHashedNamespace] = useState("");
-  const namespace = watch(
-    "HookNamespace",
-    snap.files?.[snap.active]?.name?.split(".")?.[0] || ""
-  );
-  const calculateHashedValue = useCallback(async () => {
-    const hashedVal = await sha256(namespace);
-    setHashedNamespace(hashedVal.toUpperCase());
-  }, [namespace]);
-  useEffect(() => {
-    calculateHashedValue();
-  }, [namespace, calculateHashedValue]);
+    const calculateHashedValue = useCallback(async () => {
+      const hashedVal = await sha256(namespace);
+      setHashedNamespace(hashedVal.toUpperCase());
+    }, [namespace]);
+    useEffect(() => {
+      calculateHashedValue();
+    }, [namespace, calculateHashedValue]);
 
-  if (!account) {
-    return null;
-  }
-
-  const onSubmit: SubmitHandler<SetHookData> = async (data) => {
-    const currAccount = state.accounts.find(
-      (acc) => acc.address === account.address
-    );
-    if (currAccount) currAccount.isLoading = true;
-    const res = await deployHook(account, data);
-    if (currAccount) currAccount.isLoading = false;
-
-    if (res && res.engine_result === "tesSUCCESS") {
-      toast.success("Transaction succeeded!");
-      return setIsSetHookDialogOpen(false);
-    }
-    toast.error(`Transaction failed! (${res?.engine_result_message})`);
-  };
-
-  return (
-    <Dialog open={isSetHookDialogOpen} onOpenChange={setIsSetHookDialogOpen}>
-      <DialogTrigger asChild>
-        <Button
-          ghost
-          size="xs"
-          uppercase
-          variant={"secondary"}
-          disabled={
-            account.isLoading ||
-            !snap.files.filter((file) => file.compiledWatContent).length
+    // Calcucate initial fee estimate when modal opens
+    useEffect(() => {
+      if (formInitialized && account) {
+        (async () => {
+          const formValues = getValues();
+          const tx = await prepareDeployHookTx(account, formValues);
+          if (!tx) {
+            return;
           }
-        >
-          Set Hook
-        </Button>
-      </DialogTrigger>
-      <DialogContent>
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <DialogTitle>Deploy configuration</DialogTitle>
-          <DialogDescription as="div">
-            <Stack css={{ width: "100%", flex: 1 }}>
-              <Box css={{ width: "100%" }}>
-                <Label>Invoke on transactions</Label>
-                <Controller
-                  name="Invoke"
-                  control={control}
-                  defaultValue={transactionOptions.filter(
-                    (to) => to.label === "ttPAYMENT"
-                  )}
-                  render={({ field }) => (
-                    <Select
-                      {...field}
-                      closeMenuOnSelect={false}
-                      isMulti
-                      menuPosition="fixed"
-                      options={transactionOptions}
-                    />
-                  )}
-                />
-              </Box>
-              <Box css={{ width: "100%" }}>
-                <Label>Hook Namespace Seed</Label>
-                <Input
-                  {...register("HookNamespace", { required: true })}
-                  autoComplete={"off"}
-                  defaultValue={
-                    snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || ""
-                  }
-                />
-                {errors.HookNamespace?.type === "required" && (
-                  <Box css={{ display: "inline", color: "$red11" }}>
-                    Namespace is required
-                  </Box>
-                )}
-                <Box css={{ mt: "$3" }}>
-                  <Label>Hook Namespace (sha256)</Label>
-                  <Input readOnly value={hashedNamespace} />
+          const res = await estimateFee(tx, account);
+          if (res && res.base_fee) {
+            setValue("Fee", res.base_fee);
+          }
+        })();
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [formInitialized]);
+
+    if (!account) {
+      return null;
+    }
+
+    const onSubmit: SubmitHandler<SetHookData> = async (data) => {
+      const currAccount = state.accounts.find(
+        (acc) => acc.address === account.address
+      );
+      if (currAccount) currAccount.isLoading = true;
+      const res = await deployHook(account, data);
+      if (currAccount) currAccount.isLoading = false;
+
+      if (res && res.engine_result === "tesSUCCESS") {
+        toast.success("Transaction succeeded!");
+        return setIsSetHookDialogOpen(false);
+      }
+      toast.error(`Transaction failed! (${res?.engine_result_message})`);
+    };
+    return (
+      <Dialog open={isSetHookDialogOpen} onOpenChange={setIsSetHookDialogOpen}>
+        <DialogTrigger asChild>
+          <Button
+            ghost
+            size="xs"
+            uppercase
+            variant={"secondary"}
+            disabled={
+              account.isLoading ||
+              !snap.files.filter((file) => file.compiledWatContent).length
+            }
+          >
+            Set Hook
+          </Button>
+        </DialogTrigger>
+        <DialogContent>
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <DialogTitle>Deploy configuration</DialogTitle>
+            <DialogDescription as="div">
+              <Stack css={{ width: "100%", flex: 1 }}>
+                <Box css={{ width: "100%" }}>
+                  <Label>Invoke on transactions</Label>
+                  <Controller
+                    name="Invoke"
+                    control={control}
+                    defaultValue={transactionOptions.filter(
+                      (to) => to.label === "ttPAYMENT"
+                    )}
+                    render={({ field }) => (
+                      <Select
+                        {...field}
+                        closeMenuOnSelect={false}
+                        isMulti
+                        menuPosition="fixed"
+                        options={transactionOptions}
+                      />
+                    )}
+                  />
                 </Box>
-              </Box>
-              <Box css={{ width: "100%" }}>
-                <Label style={{ marginBottom: "10px", display: "block" }}>
-                  Hook parameters
-                </Label>
-                <Stack>
-                  {fields.map((field, index) => (
-                    <Stack key={field.id}>
-                      <Input
-                        // important to include key with field's id
-                        placeholder="Parameter name"
-                        {...register(
-                          `HookParameters.${index}.HookParameter.HookParameterName`
-                        )}
-                      />
-                      <Input
-                        placeholder="Value (hex-quoted)"
-                        {...register(
-                          `HookParameters.${index}.HookParameter.HookParameterValue`
-                        )}
-                      />
-                      <Button onClick={() => remove(index)} variant="destroy">
-                        <Trash weight="regular" size="16px" />
-                      </Button>
-                    </Stack>
-                  ))}
-                  <Button
-                    outline
-                    fullWidth
-                    type="button"
-                    onClick={() =>
-                      append({
-                        HookParameter: {
-                          HookParameterName: "",
-                          HookParameterValue: "",
-                        },
-                      })
+                <Box css={{ width: "100%" }}>
+                  <Label>Hook Namespace Seed</Label>
+                  <Input
+                    {...register("HookNamespace", { required: true })}
+                    autoComplete={"off"}
+                    defaultValue={
+                      snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || ""
                     }
-                  >
-                    <Plus size="16px" />
-                    Add Hook Parameter
-                  </Button>
-                </Stack>
-              </Box>
-              {/* <Box css={{ width: "100%" }}>
+                  />
+                  {errors.HookNamespace?.type === "required" && (
+                    <Box css={{ display: "inline", color: "$red11" }}>
+                      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" }}>
+                    Hook parameters
+                  </Label>
+                  <Stack>
+                    {fields.map((field, index) => (
+                      <Stack key={field.id}>
+                        <Input
+                          // important to include key with field's id
+                          placeholder="Parameter name"
+                          {...register(
+                            `HookParameters.${index}.HookParameter.HookParameterName`
+                          )}
+                        />
+                        <Input
+                          placeholder="Value (hex-quoted)"
+                          {...register(
+                            `HookParameters.${index}.HookParameter.HookParameterValue`
+                          )}
+                        />
+                        <Button onClick={() => remove(index)} variant="destroy">
+                          <Trash weight="regular" size="16px" />
+                        </Button>
+                      </Stack>
+                    ))}
+                    <Button
+                      outline
+                      fullWidth
+                      type="button"
+                      onClick={() =>
+                        append({
+                          HookParameter: {
+                            HookParameterName: "",
+                            HookParameterValue: "",
+                          },
+                        })
+                      }
+                    >
+                      <Plus size="16px" />
+                      Add Hook Parameter
+                    </Button>
+                  </Stack>
+                </Box>
+                <Box css={{ width: "100%", position: "relative" }}>
+                  <Label>Fee</Label>
+                  <Box css={{ display: "flex", alignItems: "center" }}>
+                    <Input
+                      type="number"
+                      {...register("Fee", { required: true })}
+                      autoComplete={"off"}
+                      defaultValue={10000}
+                      css={{
+                        "-moz-appearance": "textfield",
+                        "&::-webkit-outer-spin-button": {
+                          "-webkit-appearance": "none",
+                          margin: 0,
+                        },
+                        "&::-webkit-inner-spin-button ": {
+                          "-webkit-appearance": "none",
+                          margin: 0,
+                        },
+                      }}
+                    />
+                    <Button
+                      size="xs"
+                      variant="primary"
+                      outline
+                      isLoading={estimateLoading}
+                      css={{
+                        position: "absolute",
+                        right: "$2",
+                        fontSize: "$xs",
+                        cursor: "pointer",
+                        alignContent: "center",
+                        display: "flex",
+                      }}
+                      onClick={async (e) => {
+                        e.preventDefault();
+                        setEstimateLoading(true);
+                        const formValues = getValues();
+                        try {
+                          const tx = await prepareDeployHookTx(
+                            account,
+                            formValues
+                          );
+                          if (tx) {
+                            const res = await estimateFee(tx, account);
+
+                            if (res && res.base_fee) {
+                              setValue("Fee", res.base_fee);
+                            }
+                          }
+                        } catch (err) {}
+
+                        setEstimateLoading(false);
+                      }}
+                    >
+                      Suggest
+                    </Button>
+                  </Box>
+                  {errors.Fee?.type === "required" && (
+                    <Box css={{ display: "inline", color: "$red11" }}>
+                      Fee is required
+                    </Box>
+                  )}
+                </Box>
+                {/* <Box css={{ width: "100%" }}>
                 <label style={{ marginBottom: "10px", display: "block" }}>
                   Hook Grants
                 </label>
@@ -269,38 +360,41 @@ export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
                   </Button>
                 </Stack>
               </Box> */}
-            </Stack>
-          </DialogDescription>
+              </Stack>
+            </DialogDescription>
 
-          <Flex
-            css={{
-              marginTop: 25,
-              justifyContent: "flex-end",
-              gap: "$3",
-            }}
-          >
-            <DialogClose asChild>
-              <Button outline>Cancel</Button>
-            </DialogClose>
-            {/* <DialogClose asChild> */}
-            <Button
-              variant="primary"
-              type="submit"
-              isLoading={account.isLoading}
+            <Flex
+              css={{
+                marginTop: 25,
+                justifyContent: "flex-end",
+                gap: "$3",
+              }}
             >
-              Set Hook
-            </Button>
-            {/* </DialogClose> */}
-          </Flex>
-          <DialogClose asChild>
-            <Box css={{ position: "absolute", top: "$3", right: "$3" }}>
-              <X size="20px" />
-            </Box>
-          </DialogClose>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-};
+              <DialogClose asChild>
+                <Button outline>Cancel</Button>
+              </DialogClose>
+              {/* <DialogClose asChild> */}
+              <Button
+                variant="primary"
+                type="submit"
+                isLoading={account.isLoading}
+              >
+                Set Hook
+              </Button>
+              {/* </DialogClose> */}
+            </Flex>
+            <DialogClose asChild>
+              <Box css={{ position: "absolute", top: "$3", right: "$3" }}>
+                <X size="20px" />
+              </Box>
+            </DialogClose>
+          </form>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+);
+
+SetHookDialog.displayName = "SetHookDialog";
 
 export default SetHookDialog;

state/actions/deployHook.tsx

@@ -50,11 +50,7 @@ function arrayBufferToHex(arrayBuffer?: ArrayBuffer | null) {
   return result;
 }
 
-/* deployHook function turns the wasm binary into
- * hex string, signs the transaction and deploys it to
- * Hooks testnet.
- */
-export const deployHook = async (
+export const prepareDeployHookTx = async (
   account: IAccount & { name?: string },
   data: SetHookData
 ) => {
@@ -93,13 +89,12 @@ export const deployHook = async (
   //     }
   //   }
   // });
-
   if (typeof window !== "undefined") {
     const tx = {
       Account: account.address,
       TransactionType: "SetHook",
       Sequence: account.sequence,
-      Fee: "100000",
+      Fee: data.Fee,
       Hooks: [
         {
           Hook: {
@@ -118,15 +113,28 @@ export const deployHook = async (
         },
       ],
     };
+    return tx;
+  }
+};
 
-    const keypair = derive.familySeed(account.secret);
-    try {
-      // Update tx Fee value with network estimation
-      await estimateFee(tx, keypair);
-    } catch (err) {
-      // use default value what you defined earlier
-      console.log(err);
+/* deployHook function turns the wasm binary into
+ * hex string, signs the transaction and deploys it to
+ * Hooks testnet.
+ */
+export const deployHook = async (
+  account: IAccount & { name?: string },
+  data: SetHookData
+) => {
+  if (typeof window !== "undefined") {
+    const tx = await prepareDeployHookTx(account, data);
+    if (!tx) {
+      return;
     }
+    if (!state.client) {
+      return;
+    }
+    const keypair = derive.familySeed(account.secret);
+
     const { signedTransaction } = sign(tx, keypair);
     const currentAccount = state.accounts.find(
       (acc) => acc.address === account.address
@@ -137,7 +145,7 @@ export const deployHook = async (
     let submitRes;
 
     try {
-      submitRes = await state.client.send({
+      submitRes = await state.client?.send({
         command: "submit",
         tx_blob: signedTransaction,
       });
@@ -216,7 +224,8 @@ export const deleteHook = async (account: IAccount & { name?: string }) => {
     const keypair = derive.familySeed(account.secret);
     try {
       // Update tx Fee value with network estimation
-      await estimateFee(tx, keypair);
+      const res = await estimateFee(tx, account);
+      tx["Fee"] = res?.base_fee ? res?.base_fee : "1000";
     } catch (err) {
       // use default value what you defined earlier
       console.log(err);

utils/estimateFee.ts

@@ -1,19 +1,24 @@
-import { sign, XRPL_Account } from "xrpl-accountlib"
-import state from "../state"
+import { derive, sign } from "xrpl-accountlib"
+import state, { IAccount } from "../state"
 
-// Mutate tx object with network estimated fee value
-const estimateFee = async (tx: Record<string, unknown>, keypair: XRPL_Account): Promise<null | { base_fee: string, median_fee: string; minimum_fee: string; open_ledger_fee: string; }> => {
+const estimateFee = async (tx: Record<string, unknown>, account: IAccount): Promise<null | { base_fee: string, median_fee: string; minimum_fee: string; open_ledger_fee: string; }> => {
   const copyTx = JSON.parse(JSON.stringify(tx))
   delete copyTx['SigningPubKey']
+  if (!copyTx.Fee) {
+    copyTx.Fee = '1000'
+  }
+  const keypair = derive.familySeed(account.secret)
   const { signedTransaction } = sign(copyTx, keypair);
   try {
     const res = await state.client?.send({ command: 'fee', tx_blob: signedTransaction })
     if (res && res.drops) {
-      return tx['Fee'] = res.drops.base_fee;
+      return res.drops;
     }
     return null
   } catch (err) {
-    throw Error('Cannot estimate fee')
+    console.log(err)
+    return null
+
   }
 }