Merge pull request #416 from alleslabs/fix/use-simulate-query

Fix/use simulate query

CHANGELOG.md

@@ -59,6 +59,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#416](https://github.com/alleslabs/celatone-frontend/pull/416) Remove the old redundant useSimulateFee hook
 - [#413](https://github.com/alleslabs/celatone-frontend/pull/413) Add jest test cases for date utils
 - [#404](https://github.com/alleslabs/celatone-frontend/pull/404) Use internal navigate instead of app link for block navigation
 - [#396](https://github.com/alleslabs/celatone-frontend/pull/396) Refactor useConfig, disable wasm related tabs on the public project page

src/lib/app-fns/tx/instantiate.tsx

@@ -23,6 +23,7 @@ interface InstantiateTxParams {
   funds: Coin[];
   client: SigningCosmWasmClient;
   onTxSucceed?: (txInfo: InstantiateResult, contractLabel: string) => void;
+  onTxFailed?: () => void;
 }
 
 export const instantiateContractTx = ({
@@ -35,6 +36,7 @@ export const instantiateContractTx = ({
   funds,
   client,
   onTxSucceed,
+  onTxFailed,
 }: InstantiateTxParams): Observable<TxResultRendering> => {
   return pipe(
     sendingTx(fee),
@@ -51,5 +53,5 @@ export const instantiateContractTx = ({
       // TODO: this is type hack
       return null as unknown as TxResultRendering;
     }
-  )().pipe(catchTxError());
+  )().pipe(catchTxError(onTxFailed));
 };

src/lib/app-provider/hooks/index.ts

@@ -8,7 +8,6 @@ export * from "./useMediaQuery";
 export * from "./useNetworkChange";
 export * from "./useRestrictedInput";
 export * from "./useSelectChain";
-export * from "./useSimulateFee";
 export * from "./useTokensInfo";
 export * from "./useChainRecordAsset";
 export * from "./useBaseApiRoute";

src/lib/app-provider/tx/instantiate.ts

@@ -6,27 +6,29 @@ import { useCurrentChain } from "../hooks";
 import { instantiateContractTx } from "lib/app-fns/tx/instantiate";
 
 export interface InstantiateStreamParams {
-  onTxSucceed?: (txResult: InstantiateResult, contractLabel: string) => void;
   estimatedFee: StdFee | undefined;
   codeId: number;
   initMsg: object;
   label: string;
   admin: string;
   funds: Coin[];
+  onTxSucceed?: (txResult: InstantiateResult, contractLabel: string) => void;
+  onTxFailed?: () => void;
 }
 
 export const useInstantiateTx = () => {
   const { address, getSigningCosmWasmClient } = useCurrentChain();
 
   return useCallback(
     async ({
-      onTxSucceed,
       estimatedFee,
       codeId,
       initMsg,
       label,
       admin,
       funds,
+      onTxSucceed,
+      onTxFailed,
     }: InstantiateStreamParams) => {
       const client = await getSigningCosmWasmClient();
       if (!address || !client)
@@ -43,6 +45,7 @@ export const useInstantiateTx = () => {
         funds,
         client,
         onTxSucceed,
+        onTxFailed,
       });
     },
     [address, getSigningCosmWasmClient]

src/lib/components/button/ResendButton.tsx

@@ -2,10 +2,14 @@ import { Button } from "@chakra-ui/react";
 import type { EncodeObject } from "@cosmjs/proto-signing";
 import { useCallback, useState } from "react";
 
-import { useFabricateFee, useResendTx, useSimulateFee } from "lib/app-provider";
+import {
+  useFabricateFee,
+  useResendTx,
+  useSimulateFeeQuery,
+} from "lib/app-provider";
 import { useTxBroadcast } from "lib/providers/tx-broadcast";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
-import type { Message, Msg } from "lib/types";
+import type { Gas, Message, Msg, Option } from "lib/types";
 import { camelToSnake, encode } from "lib/utils";
 
 interface ResendButtonProps {
@@ -29,27 +33,34 @@ const formatMsgs = (messages: Message[]) =>
 
 export const ResendButton = ({ messages }: ResendButtonProps) => {
   const fabricateFee = useFabricateFee();
-  const { simulate } = useSimulateFee();
   const resendTx = useResendTx();
   const { broadcast } = useTxBroadcast();
 
   const [isProcessing, setIsProcessing] = useState(false);
+  const composedMsgs = formatMsgs(messages);
 
-  const proceed = useCallback(async () => {
-    AmpTrack(AmpEvent.ACTION_RESEND);
-    const formatedMsgs = formatMsgs(messages);
-    const estimatedGasUsed = await simulate(formatedMsgs);
+  const proceed = useCallback(
+    async (estimatedGasUsed: Option<Gas<number>>) => {
+      AmpTrack(AmpEvent.ACTION_RESEND);
+      const stream = await resendTx({
+        onTxSucceed: () => setIsProcessing(false),
+        onTxFailed: () => setIsProcessing(false),
+        estimatedFee: estimatedGasUsed
+          ? fabricateFee(estimatedGasUsed)
+          : undefined,
+        messages: composedMsgs,
+      });
+      if (stream) broadcast(stream);
+    },
+    [broadcast, composedMsgs, fabricateFee, resendTx]
+  );
 
-    const stream = await resendTx({
-      onTxSucceed: () => setIsProcessing(false),
-      onTxFailed: () => setIsProcessing(false),
-      estimatedFee: estimatedGasUsed
-        ? fabricateFee(estimatedGasUsed)
-        : undefined,
-      messages: formatedMsgs,
-    });
-    if (stream) broadcast(stream);
-  }, [broadcast, fabricateFee, messages, resendTx, simulate]);
+  const { isFetching: isSimulating } = useSimulateFeeQuery({
+    enabled: isProcessing,
+    messages: composedMsgs,
+    onSuccess: (estimatedGasUsed) => proceed(estimatedGasUsed),
+    onError: () => setIsProcessing(false),
+  });
 
   return (
     <Button
@@ -59,8 +70,8 @@ export const ResendButton = ({ messages }: ResendButtonProps) => {
       onClick={(e) => {
         e.stopPropagation();
         setIsProcessing(true);
-        proceed();
       }}
+      isLoading={isSimulating}
       isDisabled={isProcessing}
     >
       Resend

src/lib/pages/instantiate/completed.tsx

@@ -9,7 +9,7 @@ import type { ContractAddr } from "lib/types";
 import { formatUFee } from "lib/utils";
 
 import type { InstantiateTxInfo } from ".";
-import { InstantiateOffChainForm } from "./component/InstantiateOffchainForm";
+import { InstantiateOffChainForm } from "./component";
 
 interface CompletedProps {
   txInfo: InstantiateTxInfo;

src/lib/pages/instantiate/component/index.ts

@@ -1,2 +1,2 @@
-export * from "./FailedModal";
 export * from "./Footer";
+export * from "./InstantiateOffchainForm";