Add fee estimate button to fee and update the deploying
This commit is contained in:
Valtteri Karesto
@@ -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,263 @@ 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<{ accountIndex: number }> = React.memo(
|
||||
({ accountIndex }) => {
|
||||
const snap = useSnapshot(state);
|
||||
const account = snap.accounts[accountIndex];
|
||||
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] || ""
|
||||
);
|
||||
}, [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]);
|
||||
|
||||
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
|
||||
// Update value if activeWat changes
|
||||
useEffect(() => {
|
||||
setValue(
|
||||
"HookNamespace",
|
||||
snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || ""
|
||||
);
|
||||
setFormInitialized(true);
|
||||
}, [snap.activeWat, snap.files, setValue]);
|
||||
// Calcucate initial fee estimate when modal opens
|
||||
useEffect(() => {
|
||||
if (formInitialized) {
|
||||
(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);
|
||||
}
|
||||
})();
|
||||
}
|
||||
}, [formInitialized]);
|
||||
// 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]);
|
||||
|
||||
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 +357,39 @@ 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>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default SetHookDialog;
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user