feat: improving masp transactions feedback for users and other gas es…

…timation fixes (#1594)

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

@@ -9,7 +9,6 @@ export const TransactionFeeButton = ({
   feeProps: TransactionFeeProps;
 }): JSX.Element => {
   const [modalOpen, setModalOpen] = useState(false);
-
   return (
     <>
       <button

apps/namadillo/src/App/Masp/MaspShield.tsx

@@ -26,9 +26,10 @@ import { Address, TransferTransactionData } from "types";
 export const MaspShield: React.FC = () => {
   const navigate = useNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
+  const { storeTransaction } = useTransactionActions();
   const [displayAmount, setDisplayAmount] = useState<BigNumber | undefined>();
   const [generalErrorMessage, setGeneralErrorMessage] = useState("");
-
+  const [currentStep, setCurrentStep] = useState("");
   const rpcUrl = useAtomValue(rpcUrlAtom);
   const chainParameters = useAtomValue(chainParametersAtom);
   const defaultAccounts = useAtomValue(allDefaultAccountsAtom);
@@ -37,8 +38,6 @@ export const MaspShield: React.FC = () => {
     namadaTransparentAssetsAtom
   );
 
-  const { storeTransaction } = useTransactionActions();
-
   const chainId = chainParameters.data?.chainId;
   const sourceAddress = defaultAccounts.data?.find(
     (account) => account.type !== AccountType.ShieldedKeys
@@ -61,6 +60,7 @@ export const MaspShield: React.FC = () => {
     target: destinationAddress ?? "",
     token: selectedAsset?.originalAddress ?? "",
     displayAmount: displayAmount ?? new BigNumber(0),
+    onUpdateStatus: setCurrentStep,
   });
 
   const onChangeSelectedAsset = (address?: Address): void => {
@@ -88,6 +88,7 @@ export const MaspShield: React.FC = () => {
   }: OnSubmitTransferParams): Promise<void> => {
     try {
       setGeneralErrorMessage("");
+      setCurrentStep("");
 
       invariant(sourceAddress, "Source address is not defined");
       invariant(chainId, "Chain ID is undefined");
@@ -120,7 +121,7 @@ export const MaspShield: React.FC = () => {
   };
 
   return (
-    <Panel className="relative min-h-[600px]">
+    <Panel className="relative min-h-[600px] flex-1">
       <header className="flex flex-col items-center text-center mb-3 gap-6">
         <h1 className="mt-6 text-lg text-yellow">Shield</h1>
         <NamadaTransferTopHeader
@@ -154,6 +155,7 @@ export const MaspShield: React.FC = () => {
         isSubmitting={isPerformingTransfer}
         errorMessage={generalErrorMessage}
         onSubmitTransfer={onSubmitTransfer}
+        submittingText={isPerformingTransfer ? currentStep : "Shield"}
         buttonTextErrors={{
           NoAmount: "Define an amount to shield",
         }}

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

@@ -80,10 +80,6 @@ const IncrementBonding = (): JSX.Element => {
         </>
       ),
     }),
-    parseErrorTxNotification: () => ({
-      title: "Staking transaction failed",
-      description: "",
-    }),
     onBroadcasted: () => {
       onCloseModal();
     },

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

@@ -65,10 +65,6 @@ export const ReDelegate = (): JSX.Element => {
       title: "Staking redelegation in progress",
       description: <>Your redelegation transaction is being processed</>,
     }),
-    parseErrorTxNotification: () => ({
-      title: "Staking redelegation failed",
-      description: "",
-    }),
     onBroadcasted: () => {
       onCloseModal();
     },

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

@@ -67,10 +67,6 @@ export const Unstake = (): JSX.Element => {
         </>
       ),
     }),
-    parseErrorTxNotification: () => ({
-      title: "Unstake transaction failed",
-      description: "",
-    }),
     onBroadcasted: () => {
       onCloseModal();
     },

apps/namadillo/src/App/Transfer/TransferModule.tsx

@@ -107,8 +107,6 @@ export const TransferModule = ({
   errorMessage,
   buttonTextErrors = {},
 }: TransferModuleProps): JSX.Element => {
-  const gasConfig = gasConfigProp ?? feeProps?.gasConfig;
-
   const [walletSelectorModalOpen, setWalletSelectorModalOpen] = useState(false);
   const [sourceChainModalOpen, setSourceChainModalOpen] = useState(false);
   const [destinationChainModalOpen, setDestinationChainModalOpen] =
@@ -117,17 +115,16 @@ export const TransferModule = ({
   const [customAddressActive, setCustomAddressActive] = useState(
     destination.enableCustomAddress && !destination.availableWallets
   );
-
   const [memo, setMemo] = useState<undefined | string>();
 
+  const gasConfig = gasConfigProp ?? feeProps?.gasConfig;
   const selectedAsset = mapUndefined(
     (address) => source.availableAssets?.[address],
     source.selectedAssetAddress
   );
 
   const availableAmountMinusFees = useMemo(() => {
     const { selectedAssetAddress, availableAmount } = source;
-
     if (
       typeof selectedAssetAddress === "undefined" ||
       typeof availableAmount === "undefined"

apps/namadillo/src/atoms/fees/atoms.ts

@@ -37,7 +37,8 @@ export const gasEstimateFamily = atomFamily(
           }
           const counter = (kind: TxKind): number | undefined =>
             txKinds.filter((i) => i === kind).length || undefined;
-          return fetchGasEstimate(api, [
+
+          const gasEstimate = await fetchGasEstimate(api, [
             counter("Bond"),
             counter("ClaimRewards"),
             counter("Unbond"),
@@ -51,6 +52,18 @@ export const gasEstimateFamily = atomFamily(
             counter("RevealPk"),
             counter("Redelegate"),
           ]);
+
+          // TODO: we need to improve this estimate API. Currently, gasEstimate.min returns
+          // the minimum gas limit ever used for a TX, and avg is failing in most of the transactions.
+          // So we estabilish the average value between gasEstimate.avg and gasEstimate.max as the min value.
+          // The other values derive from this one.
+          const newMin = Math.ceil((gasEstimate.avg + gasEstimate.max) / 2);
+          return {
+            min: newMin,
+            avg: Math.ceil(newMin * 1.25),
+            max: Math.ceil(newMin * 1.5),
+            totalEstimates: gasEstimate.totalEstimates,
+          };
         },
       };
     }),

apps/namadillo/src/atoms/integrations/atoms.ts

@@ -14,7 +14,7 @@ import invariant from "invariant";
 import { atom } from "jotai";
 import { atomWithMutation, atomWithQuery } from "jotai-tanstack-query";
 import { atomFamily, atomWithStorage } from "jotai/utils";
-import { TransactionPair } from "lib/query";
+import { EncodedTxData } from "lib/query";
 import {
   AddressWithAssetAndAmountMap,
   BuildTxAtomParams,
@@ -164,7 +164,7 @@ export const createIbcTxAtom = atomWithMutation((get) => {
       account,
       gasConfig,
     }: BuildTxAtomParams<IbcTransferMsgValue>): Promise<
-      TransactionPair<IbcTransferProps> | undefined
+      EncodedTxData<IbcTransferProps> | undefined
     > => {
       if (typeof account === "undefined") {
         throw new Error("no account");

apps/namadillo/src/atoms/integrations/functions.ts

@@ -17,7 +17,7 @@ import * as elysTestnet from "chain-registry/testnet/elystestnet";
 import * as osmosisTestnet from "chain-registry/testnet/osmosistestnet";
 import * as stargazeTestnet from "chain-registry/testnet/stargazetestnet";
 import { DenomTrace } from "cosmjs-types/ibc/applications/transfer/v1/transfer";
-import { TransactionPair, buildTxPair } from "lib/query";
+import { EncodedTxData, buildTx } from "lib/query";
 import {
   Address,
   AddressWithAssetAndAmount,
@@ -365,9 +365,8 @@ export const createIbcTx = async (
   gasConfig: GasConfig,
   chain: ChainSettings,
   memo?: string
-): Promise<TransactionPair<IbcTransferProps>> => {
-  const { tx } = await getSdkInstance();
-
+): Promise<EncodedTxData<IbcTransferProps>> => {
+  const sdk = await getSdkInstance();
   const ibcTransferProps = {
     source: account.address,
     receiver: destinationAddress,
@@ -377,17 +376,15 @@ export const createIbcTx = async (
     channelId,
     memo,
   };
-
-  const transactionPair = await buildTxPair(
+  return await buildTx(
+    sdk,
     account,
     gasConfig,
     chain,
     [ibcTransferProps],
-    tx.buildIbcTransfer,
-    account.address
+    sdk.tx.buildIbcTransfer,
+    memo
   );
-
-  return transactionPair;
 };
 
 export const namadaLocal = (chainId: string): Chain => {

apps/namadillo/src/atoms/proposals/functions.ts

@@ -27,7 +27,7 @@ import { assertNever, mapUndefined } from "@namada/utils";
 import BigNumber from "bignumber.js";
 import * as E from "fp-ts/Either";
 import * as t from "io-ts";
-import { TransactionPair, buildTxPair } from "lib/query";
+import { TransactionPair, buildTx, signEncodedTx } from "lib/query";
 import { GasConfig } from "types";
 
 import { fromHex } from "@cosmjs/encoding";
@@ -373,23 +373,21 @@ export const createVoteProposalTx = async (
   chain: ChainSettings
 ): Promise<TransactionPair<VoteProposalProps>> => {
   try {
-    const { tx } = await getSdkInstance();
-
+    const sdk = await getSdkInstance();
     const voteProposalProps = {
       signer: account.address,
       proposalId,
       vote,
     };
-
-    const transactionPair = await buildTxPair(
+    const encodedTx = await buildTx(
+      sdk,
       account,
       gasConfig,
       chain,
       [voteProposalProps],
-      tx.buildVoteProposal,
-      account.address
+      sdk.tx.buildVoteProposal
     );
-    return transactionPair;
+    return await signEncodedTx(encodedTx, account.address);
   } catch (err) {
     console.error(err);
     throw err;