Show tx hash instead of server ledger index in deploy log.

components/Accounts.tsx

@@ -469,7 +469,7 @@ const Accounts: FC<AccountProps> = (props) => {
                       e.stopPropagation();
                     }}
                   >
-                    <SetHookDialog accountAddress={account.address} />
+                    <SetHookDialog account={account} />
                   </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 { prepareDeployHookTx, sha256 } from "../state/actions/deployHook";
+import { sha256 } from "../state/actions/deployHook";
-import estimateFee from "../utils/estimateFee";
 
 const transactionOptions = Object.keys(tts).map((key) => ({
   label: key,
@@ -37,7 +37,6 @@ export type SetHookData = {
     value: keyof TTS;
     label: string;
   }[];
-  Fee: string;
   HookNamespace: string;
   HookParameters: {
     HookParameter: {
@@ -53,11 +52,8 @@ export type SetHookData = {
   // }[];
 };
 
-export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
+export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
-  ({ accountAddress }) => {
   const snap = useSnapshot(state);
-    const account = snap.accounts.find((acc) => acc.address === accountAddress);
-
   const [isSetHookDialogOpen, setIsSetHookDialogOpen] = useState(false);
   const {
     register,
@@ -65,21 +61,16 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
     control,
     watch,
     setValue,
-      getValues,
     formState: { errors },
   } = useForm<SetHookData>({
     defaultValues: {
-        HookNamespace:
+      HookNamespace: snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || "",
-          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(() => {
@@ -87,7 +78,6 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
       "HookNamespace",
       snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || ""
     );
-      setFormInitialized(true);
   }, [snap.activeWat, snap.files, setValue]);
   // const {
   //   fields: grantFields,
@@ -110,24 +100,6 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
     calculateHashedValue();
   }, [namespace, calculateHashedValue]);
 
-    // Calcucate initial fee estimate when modal opens
-    useEffect(() => {
-      if (formInitialized && account) {
-        (async () => {
-          const formValues = getValues();
-          const tx = await prepareDeployHookTx(account, formValues);
-          if (!tx) {
-            return;
-          }
-          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;
   }
@@ -146,6 +118,7 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
     }
     toast.error(`Transaction failed! (${res?.engine_result_message})`);
   };
+
   return (
     <Dialog open={isSetHookDialogOpen} onOpenChange={setIsSetHookDialogOpen}>
       <DialogTrigger asChild>
@@ -205,7 +178,6 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
                   <Input readOnly value={hashedNamespace} />
                 </Box>
               </Box>
-
               <Box css={{ width: "100%" }}>
                 <Label style={{ marginBottom: "10px", display: "block" }}>
                   Hook parameters
@@ -249,69 +221,6 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
                   </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
@@ -392,9 +301,6 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
       </DialogContent>
     </Dialog>
   );
-  }
+};
-);
-
-SetHookDialog.displayName = "SetHookDialog";
 
 export default SetHookDialog;

state/actions/deployHook.tsx

@@ -50,7 +50,11 @@ function arrayBufferToHex(arrayBuffer?: ArrayBuffer | null) {
   return result;
 }
 
-export const prepareDeployHookTx = async (
+/* 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
 ) => {
@@ -89,12 +93,13 @@ export const prepareDeployHookTx = async (
   //     }
   //   }
   // });
+
   if (typeof window !== "undefined") {
     const tx = {
       Account: account.address,
       TransactionType: "SetHook",
       Sequence: account.sequence,
-      Fee: data.Fee,
+      Fee: "100000",
       Hooks: [
         {
           Hook: {
@@ -113,28 +118,15 @@ export const prepareDeployHookTx = async (
         },
       ],
     };
-    return tx;
-  }
-};
 
-/* 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);
-
+    try {
+      // Update tx Fee value with network estimation
+      await estimateFee(tx, keypair);
+    } catch (err) {
+      // use default value what you defined earlier
+      console.log(err);
+    }
     const { signedTransaction } = sign(tx, keypair);
     const currentAccount = state.accounts.find(
       (acc) => acc.address === account.address
@@ -145,7 +137,7 @@ export const deployHook = async (
     let submitRes;
 
     try {
-      submitRes = await state.client?.send({
+      submitRes = await state.client.send({
         command: "submit",
         tx_blob: signedTransaction,
       });
@@ -160,14 +152,14 @@ export const deployHook = async (
           message: ref(
             <>
               [{submitRes.engine_result}] {submitRes.engine_result_message}{" "}
-              Validated ledger index:{" "}
+              Transaction hash:{" "}
               <Link
                 as="a"
-                href={`https://${process.env.NEXT_PUBLIC_EXPLORER_URL}/${submitRes.validated_ledger_index}`}
+                href={`https://${process.env.NEXT_PUBLIC_EXPLORER_URL}/${submitRes.tx_json?.hash}`}
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                {submitRes.validated_ledger_index}
+                {submitRes.tx_json?.hash}
               </Link>
             </>
           ),
@@ -224,8 +216,7 @@ export const deleteHook = async (account: IAccount & { name?: string }) => {
     const keypair = derive.familySeed(account.secret);
     try {
       // Update tx Fee value with network estimation
-      const res = await estimateFee(tx, account);
+      await estimateFee(tx, keypair);
-      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,24 +1,19 @@
-import { derive, sign } from "xrpl-accountlib"
+import { sign, XRPL_Account } from "xrpl-accountlib"
-import state, { IAccount } from "../state"
+import state from "../state"
 
-const estimateFee = async (tx: Record<string, unknown>, account: IAccount): Promise<null | { base_fee: string, median_fee: string; minimum_fee: string; open_ledger_fee: string; }> => {
+// 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 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 res.drops;
+      return tx['Fee'] = res.drops.base_fee;
     }
     return null
   } catch (err) {
-    console.log(err)
+    throw Error('Cannot estimate fee')
-    return null
-
   }
 }