Namadillo: Fees

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

@@ -0,0 +1,12 @@
+import { IoWarningOutline } from "react-icons/io5";
+
+export const FeeWarning = (): JSX.Element => {
+  return (
+    <div className="flex text-xs items-center gap-1 text-yellow">
+      <i className="text-sm">
+        <IoWarningOutline />
+      </i>
+      Remember to keep a small amount of NAM for fees
+    </div>
+  );
+};

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

@@ -1,28 +1,42 @@
+import { gasLimitsAtom, minimumGasPriceAtom } from "atoms/fees";
 import clsx from "clsx";
-import { useGasEstimate } from "hooks/useGasEstimate";
+import { useAtomValue } from "jotai";
+import { TxKind } from "types";
+import { FeeWarning } from "./FeeWarning";
 import { NamCurrency } from "./NamCurrency";
-import { TextLink } from "./TextLink";
+
 type TransactionFeesProps = {
+  txKind: TxKind;
   numberOfTransactions: number;
+  displayWarning?: boolean;
   className?: string;
 };
 
 export const TransactionFees = ({
+  txKind,
   numberOfTransactions,
+  displayWarning,
   className,
 }: TransactionFeesProps): JSX.Element => {
-  const { calculateMinGasRequired } = useGasEstimate();
-  const minimumGas = calculateMinGasRequired(numberOfTransactions);
+  const gasLimits = useAtomValue(gasLimitsAtom);
+  const gasPrice = useAtomValue(minimumGasPriceAtom);
+
+  if (!gasLimits.isSuccess || !gasPrice.isSuccess || numberOfTransactions === 0)
+    return <></>;
 
-  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}
-        forceBalanceDisplay={true}
-      />
+    <div className={clsx("flex flex-col", className)}>
+      <div className="text-white text-sm">
+        Transaction fee:{" "}
+        <NamCurrency
+          className="font-medium"
+          forceBalanceDisplay={true}
+          amount={gasPrice.data.multipliedBy(
+            gasLimits.data[txKind].native.multipliedBy(numberOfTransactions)
+          )}
+        />
+      </div>
+      {displayWarning && <FeeWarning />}
     </div>
   );
 };

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

@@ -175,6 +175,7 @@ export const WithProposalId: React.FC<{ proposalId: bigint }> = ({
             </Stack>
             <footer>
               <TransactionFees
+                txKind="VoteProposal"
                 className="flex justify-between"
                 numberOfTransactions={1}
               />

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

@@ -264,10 +264,16 @@ const IncrementBonding = (): JSX.Element => {
             >
               {isPerformingBond ? "Processing..." : errorMessage || "Stake"}
             </ActionButton>
-            <TransactionFees
-              className="absolute right-4 top-1/2 -translate-y-1/2"
-              numberOfTransactions={Object.keys(updatedAmountByAddress).length}
-            />
+            {gasLimits.isSuccess && (
+              <TransactionFees
+                txKind="Bond"
+                className="absolute text-right right-4 top-1/2 -translate-y-1/2"
+                displayWarning={true}
+                numberOfTransactions={
+                  Object.keys(updatedAmountByAddress).length
+                }
+              />
+            )}
           </div>
         </form>
       </ModalContainer>

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

@@ -135,7 +135,9 @@ export const ReDelegateAssignStake = ({
           : "Re-Delegate"}
         </ActionButton>
         <TransactionFees
-          className="absolute right-4 top-1/2 -translate-y-1/2"
+          txKind="Redelegation"
+          displayWarning={true}
+          className="absolute text-right right-4 top-1/2 -translate-y-1/2"
           numberOfTransactions={numberOfTransactions}
         />
       </div>

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

@@ -253,7 +253,9 @@ const Unstake = (): JSX.Element => {
               : validationMessage || "Unstake"}
             </ActionButton>
             <TransactionFees
-              className="absolute right-4 top-1/2 -translate-y-1/2"
+              txKind="Unbond"
+              displayWarning={true}
+              className="absolute text-right right-4 top-1/2 -translate-y-1/2"
               numberOfTransactions={Object.keys(updatedAmountByAddress).length}
             />
           </div>

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

@@ -30,7 +30,8 @@ export const fetchMinimumGasPrice = async (
     ({ token }) => token === nativeToken
   );
   invariant(!!nativeTokenCost, "Error querying minimum gas price");
-  const asBigNumber = new BigNumber(nativeTokenCost.amount);
+  // TODO: this should be removed after indexer error is fixed!
+  const asBigNumber = new BigNumber(nativeTokenCost.amount).dividedBy(100000);
   invariant(
     !asBigNumber.isNaN(),
     "Error converting minimum gas price to BigNumber"