fix: fix fees and redelegating to same validator (#1043)

- Add default gas config and use it to display correct transaction fees

- Disallow redelegating when it would result in no transactions
  (e.g. redelegating to the same validator)

- Refactor redelegate validation and display clearer error message in
  submit button

Fixes #975.

Author: emccorson

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

@@ -1,24 +1,23 @@
 import clsx from "clsx";
-import { useGasEstimate } from "hooks/useGasEstimate";
+import { GasConfig } from "types";
 import { NamCurrency } from "./NamCurrency";
 import { TextLink } from "./TextLink";
+
 type TransactionFeesProps = {
-  numberOfTransactions: number;
+  gasConfig: GasConfig;
   className?: string;
 };
 
 export const TransactionFees = ({
-  numberOfTransactions,
+  gasConfig,
   className,
 }: TransactionFeesProps): JSX.Element => {
-  const { calculateMinGasRequired } = useGasEstimate();
-  const minimumGas = calculateMinGasRequired(numberOfTransactions);
+  const fee = gasConfig.gasPrice.times(gasConfig.gasLimit);
 
-  if (!minimumGas || minimumGas.eq(0)) return <></>;
   return (
     <div className={clsx("text-white text-sm", className)}>
       <TextLink>Transaction fee:</TextLink>{" "}
-      <NamCurrency className="font-medium" amount={minimumGas} />
+      <NamCurrency className="font-medium" amount={fee} />
     </div>
   );
 };

apps/namadillo/src/App/Governance/SubmitVote.tsx

@@ -13,7 +13,7 @@ import {
   voteTypes,
 } from "@namada/types";
 import { TransactionFees } from "App/Common/TransactionFees";
-import { gasLimitsAtom, minimumGasPriceAtom } from "atoms/fees";
+import { defaultGasConfigFamily } from "atoms/fees";
 import {
   createNotificationId,
   dispatchToastNotificationAtom,
@@ -59,8 +59,8 @@ export const WithProposalId: React.FC<{ proposalId: bigint }> = ({
     error: voteTxError,
   } = useAtomValue(createVoteTxAtom);
   const dispatchNotification = useSetAtom(dispatchToastNotificationAtom);
-  const minimumGasPrice = useAtomValue(minimumGasPriceAtom);
-  const gasLimits = useAtomValue(gasLimitsAtom);
+
+  const gasConfig = useAtomValue(defaultGasConfigFamily(["VoteProposal"]));
 
   useEffect(() => {
     if (isSuccess) {
@@ -108,15 +108,13 @@ export const WithProposalId: React.FC<{ proposalId: bigint }> = ({
       typeof selectedVoteType !== "undefined",
       "There is no selected vote type"
     );
-    invariant(minimumGasPrice.isSuccess, "Gas price loading is still pending");
-    invariant(gasLimits.isSuccess, "Gas limit loading is still pending");
+    if (!gasConfig.isSuccess) {
+      throw new Error("Gas config is still pending");
+    }
     createVoteTx({
       proposalId,
       vote: selectedVoteType,
-      gasConfig: {
-        gasPrice: minimumGasPrice.data!,
-        gasLimit: gasLimits.data!.VoteProposal.native,
-      },
+      gasConfig: gasConfig.data,
     });
   };
 
@@ -182,10 +180,12 @@ export const WithProposalId: React.FC<{ proposalId: bigint }> = ({
               />
             </Stack>
             <footer>
-              <TransactionFees
-                className="flex justify-between"
-                numberOfTransactions={1}
-              />
+              {gasConfig.isSuccess && (
+                <TransactionFees
+                  className="flex justify-between"
+                  gasConfig={gasConfig.data}
+                />
+              )}
             </footer>
             <ActionButton
               type="submit"

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

@@ -7,7 +7,7 @@ import { NamCurrency } from "App/Common/NamCurrency";
 import { TableRowLoading } from "App/Common/TableRowLoading";
 import { TransactionFees } from "App/Common/TransactionFees";
 import { accountBalanceAtom, defaultAccountAtom } from "atoms/accounts";
-import { gasLimitsAtom, minimumGasPriceAtom } from "atoms/fees";
+import { defaultGasConfigFamily } from "atoms/fees";
 import {
   createNotificationId,
   dispatchToastNotificationAtom,
@@ -34,8 +34,7 @@ const IncrementBonding = (): JSX.Element => {
   const [onlyMyValidators, setOnlyMyValidators] = useState(false);
   const navigate = useNavigate();
   const accountBalance = useAtomValue(accountBalanceAtom);
-  const gasPrice = useAtomValue(minimumGasPriceAtom);
-  const gasLimits = useAtomValue(gasLimitsAtom);
+
   const { data: account } = useAtomValue(defaultAccountAtom);
   const validators = useAtomValue(allValidatorsAtom);
   const dispatchNotification = useSetAtom(dispatchToastNotificationAtom);
@@ -62,6 +61,12 @@ const IncrementBonding = (): JSX.Element => {
     parseUpdatedAmounts,
   } = useStakeModule({ account });
 
+  const gasConfig = useAtomValue(
+    defaultGasConfigFamily(
+      Array(Object.keys(updatedAmountByAddress).length).fill("Bond")
+    )
+  );
+
   const filteredValidators = useValidatorFilter({
     validators: validators.isSuccess ? validators.data : [],
     myValidatorsAddresses: Array.from(
@@ -89,16 +94,15 @@ const IncrementBonding = (): JSX.Element => {
       "Extension is not connected or you don't have an account"
     );
     const changes = parseUpdatedAmounts();
-    invariant(gasPrice.data, "Gas price loading is still pending");
-    invariant(gasLimits.isSuccess, "Gas limit loading is still pending");
-    const bondGasLimit = gasLimits.data!.Bond.native;
+
+    if (!gasConfig.isSuccess) {
+      throw new Error("Gas config is still pending");
+    }
+
     createBondTransaction({
       changes,
       account,
-      gasConfig: {
-        gasPrice: gasPrice.data!,
-        gasLimit: bondGasLimit.multipliedBy(changes.length),
-      },
+      gasConfig: gasConfig.data,
     });
   };
 
@@ -266,10 +270,12 @@ const IncrementBonding = (): JSX.Element => {
             >
               {isPerformingBond ? "Processing..." : errorMessage || "Stake"}
             </ActionButton>
-            <TransactionFees
-              className="justify-self-end px-4"
-              numberOfTransactions={Object.keys(updatedAmountByAddress).length}
-            />
+            {gasConfig.isSuccess && (
+              <TransactionFees
+                className="justify-self-end px-4"
+                gasConfig={gasConfig.data}
+              />
+            )}
           </div>
         </form>
       </ModalContainer>

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

@@ -3,7 +3,7 @@ import { RedelegateMsgValue } from "@namada/types";
 import { Info } from "App/Common/Info";
 import { ModalContainer } from "App/Common/ModalContainer";
 import { defaultAccountAtom } from "atoms/accounts";
-import { gasLimitsAtom } from "atoms/fees";
+import { defaultGasConfigFamily } from "atoms/fees";
 import {
   createNotificationId,
   dispatchToastNotificationAtom,
@@ -12,7 +12,6 @@ import { createReDelegateTxAtom } from "atoms/staking";
 import { allValidatorsAtom } from "atoms/validators";
 import BigNumber from "bignumber.js";
 import clsx from "clsx";
-import { useGasEstimate } from "hooks/useGasEstimate";
 import { useStakeModule } from "hooks/useStakeModule";
 import invariant from "invariant";
 import { useAtomValue, useSetAtom } from "jotai";
@@ -33,8 +32,6 @@ export const ReDelegate = (): JSX.Element => {
     Record<string, BigNumber>
   >({});
 
-  const { gasPrice } = useGasEstimate();
-  const gasLimits = useAtomValue(gasLimitsAtom);
   const navigate = useNavigate();
   const dispatchNotification = useSetAtom(dispatchToastNotificationAtom);
   const { data: account } = useAtomValue(defaultAccountAtom);
@@ -49,6 +46,15 @@ export const ReDelegate = (): JSX.Element => {
     myValidators,
   } = useStakeModule({ account });
 
+  const changes = getAmountDistribution(
+    amountsRemovedByAddress,
+    amountsToAssignByAddress
+  );
+
+  const gasConfig = useAtomValue(
+    defaultGasConfigFamily(Array(changes.length).fill("Redelegate"))
+  );
+
   const {
     mutate: createRedelegateTx,
     isPending: isCreatingTx,
@@ -127,19 +133,18 @@ export const ReDelegate = (): JSX.Element => {
 
   const performRedelegate = (): void => {
     invariant(account, `Extension is connected but you don't have an account`);
-    invariant(gasPrice, "Gas price loading is still pending");
-    invariant(gasLimits.isSuccess, "Gas limit loading is still pending");
-    const redelegateGasLimit = gasLimits.data!.Redelegation.native;
-    const changes = getAmountDistribution(
-      amountsRemovedByAddress,
-      amountsToAssignByAddress
-    );
+
+    if (changes.length === 0) {
+      throw new Error("No redelegation changes to make");
+    }
+
+    if (!gasConfig.isSuccess) {
+      throw new Error("Gas config loading is still pending");
+    }
+
     createRedelegateTx({
       changes,
-      gasConfig: {
-        gasPrice: gasPrice,
-        gasLimit: redelegateGasLimit.multipliedBy(changes.length),
-      },
+      gasConfig: gasConfig.data,
       account,
     });
   };
@@ -250,6 +255,8 @@ export const ReDelegate = (): JSX.Element => {
                 totalAssignedAmounts={totalAssignedAmounts}
                 onChangeAssignedAmount={onAssignAmount}
                 isPerformingRedelegation={isCreatingTx}
+                redelegateChanges={changes}
+                gasConfig={gasConfig}
               />
             )}
         </form>