feat: improve error message on wasm errors

Author: mateuszjasiuk

apps/namadillo/src/App/Staking/ClaimRewardsSubmitModalStage.tsx

@@ -18,7 +18,7 @@ type ClaimRewardsPanelProps = {
   rewardsToClaim: ClaimRewardsMsgValue[];
   isClaimAndStake: boolean;
   feeProps: TransactionFeeProps;
-  onClaim: () => void;
+  onClaim: () => Promise<void>;
   isClaiming: boolean;
   isEnabled: boolean;
   error?: string;

apps/namadillo/src/App/Staking/IncrementBonding.tsx

@@ -115,9 +115,9 @@ const IncrementBonding = (): JSX.Element => {
     return getTopValidatorsAddresses(validators?.data ?? []);
   }, [validators]);
 
-  const onSubmit = (e: React.FormEvent): void => {
+  const onSubmit = async (e: React.FormEvent): Promise<void> => {
     e.preventDefault();
-    performBonding();
+    await performBonding();
   };
 
   const errorMessage = ((): string => {

apps/namadillo/src/App/Staking/ReDelegate.tsx

@@ -87,7 +87,7 @@ export const ReDelegate = (): JSX.Element => {
     });
   };
 
-  const onSubmit = (e: React.FormEvent): void => {
+  const onSubmit = async (e: React.FormEvent): Promise<void> => {
     e.preventDefault();
     // Go to next page or do nothing
     if (step === "remove" && totalToRedelegate) {
@@ -96,7 +96,7 @@ export const ReDelegate = (): JSX.Element => {
       }
       return;
     }
-    performRedelegate();
+    await performRedelegate();
   };
 
   const totalAssignedAmounts = BigNumber.sum(

apps/namadillo/src/App/Staking/StakingRewards.tsx

@@ -91,11 +91,11 @@ export const StakingRewards = (): JSX.Element => {
     return "Confirm Claim";
   }, [shouldClaimAndStake, rewardsToClaim]);
 
-  const onSubmitClaim = (): void => {
+  const onSubmitClaim = async (): Promise<void> => {
     if (shouldClaimAndStake) {
-      claimRewardsAndStake();
+      await claimRewardsAndStake();
     } else {
-      claimRewards();
+      await claimRewards();
     }
   };
 

apps/namadillo/src/App/Staking/StakingWithdrawModal.tsx

@@ -108,7 +108,7 @@ export const StakingWithdrawModal = (): JSX.Element => {
             <ActionButton
               outlineColor="pink"
               textColor="pink"
-              onClick={() => withdraw()}
+              onClick={async () => await withdraw()}
               disabled={
                 totalWithdrawableAmount.eq(0) ||
                 !withdrawTxEnabled ||

apps/namadillo/src/App/Staking/Unstake.tsx

@@ -82,9 +82,9 @@ export const Unstake = (): JSX.Element => {
     );
   };
 
-  const onSubmit = (e: FormEvent): void => {
+  const onSubmit = async (e: FormEvent): Promise<void> => {
     e.preventDefault();
-    performUnbond();
+    await performUnbond();
   };
 
   const validationMessage = ((): string => {

apps/namadillo/src/utils/index.ts

@@ -124,6 +124,10 @@ export const toBaseAmount = (
   return displayAmount.shiftedBy(displayUnit.exponent);
 };
 
+const toGasMsg = (error: string, gasLimit: BigNumber): string => {
+  return `${error.toString()} Please raise the Gas Amount above the previously provided ${gasLimit} in the fee options for your transaction.`;
+};
+
 /**
  * Returns formatted error message based on tx props and error code
  */
@@ -132,14 +136,21 @@ export const toErrorDetail = (
   error: BroadcastTxError
 ): string => {
   try {
-    const { code } = error.toProps();
+    const { code, info } = error.toProps();
+    const { args } = tx[0];
     // TODO: Over time we may expand this to format errors for more result codes
     switch (code) {
       case ResultCode.TxGasLimit:
-        const { gasLimit } = tx[0].args;
-        return `${error.toString()} Please raise the Gas Amount above the previously provided ${gasLimit} in the fee options for your transaction.`;
+        return toGasMsg(error.toString(), args.gasLimit);
+      case ResultCode.WasmRuntimeError:
+        // We can only check error type by reading the error message
+        if (info.includes("Gas error:")) {
+          return toGasMsg(error.toString(), args.gasLimit);
+        }
+        return error.toString() + ` ${info}`;
+
       default:
-        return error.toString();
+        return error.toString() + ` ${info}`;
     }
   } catch (_e) {
     return `${error.toString()}`;

packages/shared/lib/src/sdk/mod.rs

@@ -40,7 +40,7 @@ use namada_sdk::string_encoding::Format;
 use namada_sdk::tendermint_rpc::Url;
 use namada_sdk::token::{Amount, DenominatedAmount, MaspEpoch};
 use namada_sdk::token::{MaspTxId, OptionExt};
-use namada_sdk::tx::data::TxType;
+use namada_sdk::tx::data::{ResultCode, TxType};
 use namada_sdk::tx::Section;
 use namada_sdk::tx::{
     build_batch, build_bond, build_claim_rewards, build_ibc_transfer, build_redelegation,
@@ -338,6 +338,11 @@ impl Sdk {
     }
 
     pub async fn broadcast_tx(&self, tx_bytes: &[u8], deadline: u64) -> Result<JsValue, JsValue> {
+        #[derive(serde::Serialize)]
+        struct TxErrResponse {
+            pub code: u32,
+            pub info: String,
+        }
         let tx = Tx::try_from_slice(tx_bytes).expect("Should be able to deserialize a Tx");
         let cmts = tx.commitments().clone();
         let wrapper_hash = tx.wrapper_hash();
@@ -349,8 +354,10 @@ impl Sdk {
             Ok(res) => {
                 if res.clone().code != 0.into() {
                     return Err(JsValue::from(
-                        &serde_json::to_string(&res)
-                            .map_err(|e| JsValue::from_str(&e.to_string()))?,
+                        &serde_json::to_string(&TxErrResponse {
+                            code: res.code.into(),
+                            info: String::from(""),
+                        }).map_err(|e| JsValue::from_str(&e.to_string()))?,
                     ));
                 }
 
@@ -361,6 +368,15 @@ impl Sdk {
                     .map_err(|e| JsValue::from_str(&e.to_string()))?;
                 let tx_response = TxResponse::from_event(event);
 
+                if tx_response.code != ResultCode::Ok {
+                    return Err(JsValue::from(
+                        &serde_json::to_string(&TxErrResponse {
+                            code: tx_response.code.into(),
+                            info: tx_response.info,
+                        }).map_err(|e| JsValue::from_str(&e.to_string()))?,
+                    ));
+                }
+
                 let mut batch_tx_results: Vec<tx::BatchTxResult> = vec![];
                 let code =
                     u8::try_from(tx_response.code.to_usize()).expect("Code should fit in u8");

packages/types/src/errors.ts

@@ -1,4 +1,9 @@
-import { ResultCode, ResultCodes, TxResponseProps } from "./tx";
+import { ResultCode, ResultCodes } from "./tx";
+
+export type BroadcastTxErrorProps = {
+  code: ResultCode;
+  info: string;
+};
 
 /**
  * Custom error for Broadcast Tx
@@ -32,9 +37,9 @@ export class BroadcastTxError extends Error {
   /**
    * @returns TxResponseProps
    */
-  toProps(): TxResponseProps {
+  toProps(): BroadcastTxErrorProps {
     try {
-      const props = JSON.parse(this.message) as TxResponseProps;
+      const props = JSON.parse(this.message) as BroadcastTxErrorProps;
       return props;
     } catch (e) {
       throw new Error(`${e}`);