feat: improve error message on wasm errors (#2025)

Author: mateuszjasiuk

apps/namadillo/src/App/Common/Toast.tsx

@@ -117,8 +117,7 @@ const Toast = ({ notification, onClose }: ToastProps): JSX.Element => {
       >
         <strong className="block text-sm">{notification.title}</strong>
         <div className="leading-tight text-xs">{notification.description}</div>
-        {notification.type !== "partialSuccess" &&
-          notification.type !== "error" &&
+        {notification.type !== "error" &&
           notification.details &&
           !viewDetails && (
             <button
@@ -129,9 +128,7 @@ const Toast = ({ notification, onClose }: ToastProps): JSX.Element => {
             </button>
           )}
         {notification.details &&
-          (viewDetails ||
-            notification.type === "partialSuccess" ||
-            notification.type === "error") && (
+          (viewDetails || notification.type === "error") && (
             <div className="w-full text-xs text-white block">
               {notification.details}
             </div>

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/hooks/useTransaction.tsx

@@ -81,10 +81,15 @@ export const useTransaction = <T,>({
   const { mutateAsync: performBuildTx } = useAtomValue(createTxAtom);
 
   // Claim & Stake is the only array of tx kinds. The rest are single tx kinds.
+  const arr = new Array(Math.max(1, params.length));
   const kinds =
     Array.isArray(eventType) ?
-      [...eventType]
-    : new Array(Math.max(1, params.length)).fill(eventType); // Don't display zeroed value when params are not set yet.
+      // **IMPORTANT**
+      // If eventType is an array, we set kinds by multiplying each kind by params length
+      // i.e. (["ClaimRewards", "Bond"] AND params.length == 2) => ["ClaimRewards", "Bond", "ClaimRewards", "Bond"]
+      arr.fill(eventType).flat()
+    : arr.fill(eventType); // Don't display zeroed value when params are not set yet.
+
   const feeProps = useTransactionFee(
     kinds,
     kinds.some((k) => ["ShieldedTransfer", "UnshieldingTransfer"].includes(k))

apps/namadillo/src/hooks/useTransactionNotifications.tsx

@@ -1,5 +1,5 @@
 import { Stack } from "@namada/components";
-import { RedelegateMsgValue, TxProps } from "@namada/types";
+import { ClaimRewardsProps, RedelegateMsgValue, TxProps } from "@namada/types";
 import { mapUndefined, shortenAddress } from "@namada/utils";
 import { NamCurrency } from "App/Common/NamCurrency";
 import { TokenCurrency } from "App/Common/TokenCurrency";
@@ -34,6 +34,25 @@ const parseTxsData = <T extends TxWithAmount>(
   return { total, id };
 };
 
+const getClaimingFailedDetails = (
+  data: { error?: string; value: ClaimRewardsProps }[]
+): React.ReactNode => {
+  const withErrors = data.filter((d) => typeof d.error === "string");
+  return (
+    <Stack>
+      <Stack as="ul" gap={1}>
+        {withErrors.map((d, idx) => {
+          return (
+            <li className="flex justify-between" key={idx}>
+              <b>{d.error}</b>
+            </li>
+          );
+        })}
+      </Stack>
+    </Stack>
+  );
+};
+
 const getAmountByValidatorList = <T extends AmountByValidator>(
   data: T[]
 ): React.ReactNode => {
@@ -51,6 +70,25 @@ const getAmountByValidatorList = <T extends AmountByValidator>(
   );
 };
 
+const getAmountByValidatorListWithErr = <T extends AmountByValidator>(
+  data: { value: T; error?: string }[]
+): React.ReactNode => {
+  return (
+    <Stack gap={2}>
+      {getAmountByValidatorList(data.map((d) => d.value))}
+      <Stack as="ul" gap={1}>
+        {data.map((d) => {
+          return (
+            <li className="flex justify-between" key={d.value.validator}>
+              <b>{d.error}</b>
+            </li>
+          );
+        })}
+      </Stack>
+    </Stack>
+  );
+};
+
 const getReDelegateDetailList = (
   data: RedelegateMsgValue[]
 ): React.ReactNode => {
@@ -70,6 +108,25 @@ const getReDelegateDetailList = (
   );
 };
 
+const getReDelegateDetailListWithErr = (
+  data: { value: RedelegateMsgValue; error?: string }[]
+): React.ReactNode => {
+  return (
+    <Stack gap={2}>
+      {getReDelegateDetailList(data.map((d) => d.value))}
+      <Stack as="ul" gap={1}>
+        {data.map((d) => {
+          return (
+            <li className="flex justify-between" key={d.value.sourceValidator}>
+              <b>{d.error}</b>
+            </li>
+          );
+        })}
+      </Stack>
+    </Stack>
+  );
+};
+
 const partialSuccessDetails = (detail: {
   details: React.ReactNode;
   failedDescription: React.ReactNode;
@@ -112,7 +169,7 @@ export const useTransactionNotifications = (): void => {
       ),
       details:
         e.detail.failedData ?
-          failureDetails(getAmountByValidatorList(e.detail.failedData))
+          failureDetails(getAmountByValidatorListWithErr(e.detail.failedData))
         : e.detail.error?.message,
     });
   });
@@ -149,7 +206,7 @@ export const useTransactionNotifications = (): void => {
         failedDescription: (
           <>The following staking transactions were not applied:</>
         ),
-        failedDetails: getAmountByValidatorList(e.detail.failedData!),
+        failedDetails: getAmountByValidatorListWithErr(e.detail.failedData!),
       }),
       type: "partialSuccess",
     });
@@ -185,7 +242,7 @@ export const useTransactionNotifications = (): void => {
         failedDescription: (
           <>The following unstaking transactions were not applied:</>
         ),
-        failedDetails: getAmountByValidatorList(e.detail.failedData!),
+        failedDetails: getAmountByValidatorListWithErr(e.detail.failedData!),
       }),
       type: "partialSuccess",
     });
@@ -204,7 +261,7 @@ export const useTransactionNotifications = (): void => {
       ),
       details:
         e.detail.failedData ?
-          failureDetails(getAmountByValidatorList(e.detail.failedData))
+          failureDetails(getAmountByValidatorListWithErr(e.detail.failedData!))
         : e.detail.error?.message,
     });
   });
@@ -243,7 +300,9 @@ export const useTransactionNotifications = (): void => {
       ),
       details:
         e.detail.failedData ?
-          failureDetails(getReDelegateDetailList(e.detail.failedData))
+          failureDetails(
+            getReDelegateDetailList(e.detail.failedData.map((fd) => fd.value))
+          )
         : e.detail.error?.message,
       type: "error",
     });
@@ -279,7 +338,7 @@ export const useTransactionNotifications = (): void => {
       details: partialSuccessDetails({
         details: getReDelegateDetailList(e.detail.successData!),
         failedDescription: <>The following redelegations were not applied:</>,
-        failedDetails: getReDelegateDetailList(e.detail.failedData!),
+        failedDetails: getReDelegateDetailListWithErr(e.detail.failedData!),
       }),
       type: "partialSuccess",
     });
@@ -295,6 +354,30 @@ export const useTransactionNotifications = (): void => {
     });
   });
 
+  useTransactionEventListener("ClaimRewards.PartialSuccess", (e) => {
+    const { tx } = e.detail;
+    const id = createNotificationId(tx.map((t) => t.hash));
+    const successes = e.detail.successData?.length || 0;
+    const failures = e.detail.failedData?.length || 0;
+    dispatchNotification({
+      id,
+      title: <>Some claim rewards transactions were not successful</>,
+      description: (
+        <>
+          Successful transactions: {successes}
+          <br />
+          Unsuccessful transactions: {failures}
+        </>
+      ),
+      details: partialSuccessDetails({
+        details: <>Inner transaction failed</>,
+        failedDescription: <></>,
+        failedDetails: getClaimingFailedDetails(e.detail.failedData!),
+      }),
+      type: "partialSuccess",
+    });
+  });
+
   useTransactionEventListener("ClaimRewards.Error", (e) => {
     const id = createNotificationId(e.detail.tx.map((t) => t.hash));
     dispatchNotification({

apps/namadillo/src/lib/query.ts

@@ -2,7 +2,6 @@ import { Sdk } from "@namada/sdk/web";
 import {
   Account,
   AccountType,
-  BatchTxResultMsgValue,
   TxMsgValue,
   TxProps,
   TxResponseMsgValue,
@@ -18,7 +17,7 @@ import {
   TransactionEventsClasses,
   TransactionEventsStatus,
 } from "types/events";
-import { toErrorDetail } from "utils";
+import { textToErrorDetail, toErrorDetail } from "utils";
 import { getSdkInstance } from "utils/sdk";
 
 export type TransactionPair<T> = {
@@ -199,10 +198,16 @@ export const signEncodedTx = async <T>(
 export const broadcastTransaction = async <T>(
   encodedTx: EncodedTxData<T>,
   signedTxs: Uint8Array[]
-): Promise<PromiseSettledResult<TxResponseMsgValue>[]> => {
+): Promise<PromiseSettledResult<[EncodedTxData<T>, TxResponseMsgValue]>[]> => {
   const { rpc } = await getSdkInstance();
   const response = await Promise.allSettled(
-    encodedTx.txs.map((_, i) => rpc.broadcastTx(signedTxs[i]))
+    encodedTx.txs.map((_, i) =>
+      rpc
+        .broadcastTx(signedTxs[i])
+        .then(
+          (res) => [encodedTx, res] as [EncodedTxData<T>, TxResponseMsgValue]
+        )
+    )
   );
 
   return response;
@@ -231,16 +236,16 @@ export const broadcastTxWithEvents = async <T>(
     .flat();
 
   try {
-    const commitments = results.map((result) => {
+    const resolvedResults = results.map((result) => {
       if (result.status === "fulfilled") {
-        return result.value.commitments;
+        return result.value;
       } else {
         throw new Error(toErrorDetail(encodedTx.txs, result.reason));
       }
     });
 
     const { status, successData, failedData } = parseTxAppliedErrors(
-      commitments.flat(),
+      resolvedResults,
       hashes,
       data!
     );
@@ -274,36 +279,45 @@ export const broadcastTxWithEvents = async <T>(
 type TxAppliedResults<T> = {
   status: TransactionEventsStatus;
   successData?: T[];
-  failedData?: T[];
+  failedData?: { value: T; error?: string }[];
 };
 
+type Hash = string;
+type Error = string | undefined;
 // Given an array of broadcasted Tx results,
 // collect any errors
 const parseTxAppliedErrors = <T>(
-  results: BatchTxResultMsgValue[],
-  txHashes: string[],
+  results: [EncodedTxData<T>, TxResponseMsgValue][],
+  txHashes: Hash[],
   data: T[]
 ): TxAppliedResults<T> => {
-  const txErrors: string[] = [];
+  const txErrors: [Hash, Error][] = [];
   const dataWithHash = data?.map((d, i) => ({
     ...d,
     hash: txHashes[i],
   }));
 
-  results.forEach((result) => {
-    const { hash, isApplied } = result;
-    if (!isApplied) {
-      txErrors.push(hash);
-    }
+  results.forEach(([encodedTx, result]) => {
+    result.commitments.forEach((batchTxResult) => {
+      const { hash, isApplied, error } = batchTxResult;
+      if (!isApplied) {
+        txErrors.push([
+          hash,
+          error && textToErrorDetail(error, encodedTx.txs[0]),
+        ]);
+      }
+    });
   });
 
   if (txErrors.length) {
     const successData = dataWithHash?.filter((data) => {
-      return !txErrors.includes(data.hash);
+      return !txErrors.find(([hash]) => hash === data.hash);
     });
 
-    const failedData = dataWithHash?.filter((data) => {
-      return txErrors.includes(data.hash);
+    // flatMap because js does not have filterMap
+    const failedData = dataWithHash?.flatMap((data) => {
+      const err = txErrors.find(([hash]) => hash === data.hash);
+      return err ? [{ value: data, error: err[1] }] : [];
     });
 
     if (successData?.length) {