From 4d2eb6e094490086457dec08907a409e8ed49341 Mon Sep 17 00:00:00 2001
From: Pedro Rezende <xpedrorezende@gmail.com>
Date: Wed, 26 Jun 2024 03:42:59 -0300
Subject: [PATCH 1/3] feat(namadillo): updating transaction fees components

---
 .../namadillo/src/App/Common/TransactionFees.tsx | 16 +++++++++++-----
 apps/namadillo/src/App/Governance/SubmitVote.tsx |  1 +
 .../src/App/Staking/IncrementBonding.tsx         | 13 +++++++++----
 .../src/App/Staking/ReDelegateAssignStake.tsx    |  1 +
 apps/namadillo/src/App/Staking/Unstake.tsx       |  1 +
 5 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/apps/namadillo/src/App/Common/TransactionFees.tsx b/apps/namadillo/src/App/Common/TransactionFees.tsx
index 6369d27bf..56b461c92 100644
--- a/apps/namadillo/src/App/Common/TransactionFees.tsx
+++ b/apps/namadillo/src/App/Common/TransactionFees.tsx
@@ -1,27 +1,33 @@
 import clsx from "clsx";
-import { useGasEstimate } from "hooks/useGasEstimate";
+import { useAtomValue } from "jotai";
+import { TxKind, gasLimitsAtom, minimumGasPriceAtom } from "slices/fees";
 import { NamCurrency } from "./NamCurrency";
 import { TextLink } from "./TextLink";
+
 type TransactionFeesProps = {
+  txKind: TxKind;
   numberOfTransactions: number;
   className?: string;
 };
 
 export const TransactionFees = ({
+  txKind,
   numberOfTransactions,
   className,
 }: TransactionFeesProps): JSX.Element => {
-  const { calculateMinGasRequired } = useGasEstimate();
-  const minimumGas = calculateMinGasRequired(numberOfTransactions);
+  const gasLimits = useAtomValue(gasLimitsAtom);
+  const gasPrice = useAtomValue(minimumGasPriceAtom);
 
-  if (!minimumGas || minimumGas.eq(0)) return <></>;
+  if (!gasLimits.isSuccess || !gasPrice.isSuccess) return <></>;
   return (
     <div className={clsx("text-white text-sm", className)}>
       <TextLink>Transaction fee:</TextLink>{" "}
       <NamCurrency
         className="font-medium"
-        amount={minimumGas}
         forceBalanceDisplay={true}
+        amount={gasLimits.data[txKind].native.multipliedBy(
+          numberOfTransactions
+        )}
       />
     </div>
   );
diff --git a/apps/namadillo/src/App/Governance/SubmitVote.tsx b/apps/namadillo/src/App/Governance/SubmitVote.tsx
index be7c1d668..5eca097f5 100644
--- a/apps/namadillo/src/App/Governance/SubmitVote.tsx
+++ b/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}
               />
diff --git a/apps/namadillo/src/App/Staking/IncrementBonding.tsx b/apps/namadillo/src/App/Staking/IncrementBonding.tsx
index 195737036..ca8f7acee 100644
--- a/apps/namadillo/src/App/Staking/IncrementBonding.tsx
+++ b/apps/namadillo/src/App/Staking/IncrementBonding.tsx
@@ -264,10 +264,15 @@ 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 right-4 top-1/2 -translate-y-1/2"
+                numberOfTransactions={
+                  Object.keys(updatedAmountByAddress).length
+                }
+              />
+            )}
           </div>
         </form>
       </ModalContainer>
diff --git a/apps/namadillo/src/App/Staking/ReDelegateAssignStake.tsx b/apps/namadillo/src/App/Staking/ReDelegateAssignStake.tsx
index 3fd6ce9ef..caa753914 100644
--- a/apps/namadillo/src/App/Staking/ReDelegateAssignStake.tsx
+++ b/apps/namadillo/src/App/Staking/ReDelegateAssignStake.tsx
@@ -135,6 +135,7 @@ export const ReDelegateAssignStake = ({
           : "Re-Delegate"}
         </ActionButton>
         <TransactionFees
+          txKind="Redelegation"
           className="absolute right-4 top-1/2 -translate-y-1/2"
           numberOfTransactions={numberOfTransactions}
         />
diff --git a/apps/namadillo/src/App/Staking/Unstake.tsx b/apps/namadillo/src/App/Staking/Unstake.tsx
index edee1d459..87b37c5e5 100644
--- a/apps/namadillo/src/App/Staking/Unstake.tsx
+++ b/apps/namadillo/src/App/Staking/Unstake.tsx
@@ -253,6 +253,7 @@ const Unstake = (): JSX.Element => {
               : validationMessage || "Unstake"}
             </ActionButton>
             <TransactionFees
+              txKind="Unbond"
               className="absolute right-4 top-1/2 -translate-y-1/2"
               numberOfTransactions={Object.keys(updatedAmountByAddress).length}
             />

From be50b4a09d43e35706823a184365c2f29fd621ef Mon Sep 17 00:00:00 2001
From: Pedro Rezende <xpedrorezende@gmail.com>
Date: Tue, 2 Jul 2024 21:16:14 -0300
Subject: [PATCH 2/3] feat(namadillo): improving fee component

---
 apps/namadillo/src/App/Common/TransactionFees.tsx | 14 ++++++++------
 apps/namadillo/src/atoms/fees/services.ts         |  3 ++-
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/apps/namadillo/src/App/Common/TransactionFees.tsx b/apps/namadillo/src/App/Common/TransactionFees.tsx
index 56b461c92..0a5f3341f 100644
--- a/apps/namadillo/src/App/Common/TransactionFees.tsx
+++ b/apps/namadillo/src/App/Common/TransactionFees.tsx
@@ -1,8 +1,8 @@
+import { gasLimitsAtom, minimumGasPriceAtom } from "atoms/fees";
 import clsx from "clsx";
 import { useAtomValue } from "jotai";
-import { TxKind, gasLimitsAtom, minimumGasPriceAtom } from "slices/fees";
+import { TxKind } from "types";
 import { NamCurrency } from "./NamCurrency";
-import { TextLink } from "./TextLink";
 
 type TransactionFeesProps = {
   txKind: TxKind;
@@ -18,15 +18,17 @@ export const TransactionFees = ({
   const gasLimits = useAtomValue(gasLimitsAtom);
   const gasPrice = useAtomValue(minimumGasPriceAtom);
 
-  if (!gasLimits.isSuccess || !gasPrice.isSuccess) return <></>;
+  if (!gasLimits.isSuccess || !gasPrice.isSuccess || numberOfTransactions === 0)
+    return <></>;
+
   return (
     <div className={clsx("text-white text-sm", className)}>
-      <TextLink>Transaction fee:</TextLink>{" "}
+      Transaction fee:{" "}
       <NamCurrency
         className="font-medium"
         forceBalanceDisplay={true}
-        amount={gasLimits.data[txKind].native.multipliedBy(
-          numberOfTransactions
+        amount={gasPrice.data.multipliedBy(
+          gasLimits.data[txKind].native.multipliedBy(numberOfTransactions)
         )}
       />
     </div>
diff --git a/apps/namadillo/src/atoms/fees/services.ts b/apps/namadillo/src/atoms/fees/services.ts
index 657dad217..06a827d32 100644
--- a/apps/namadillo/src/atoms/fees/services.ts
+++ b/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"

From 5fc7381eb4e8b9859878be36b156fc6a633600eb Mon Sep 17 00:00:00 2001
From: Pedro Rezende <xpedrorezende@gmail.com>
Date: Tue, 2 Jul 2024 22:10:15 -0300
Subject: [PATCH 3/3] feat(namadillo): adding fee warning

---
 apps/namadillo/src/App/Common/FeeWarning.tsx  | 12 ++++++++++
 .../src/App/Common/TransactionFees.tsx        | 24 ++++++++++++-------
 .../src/App/Staking/IncrementBonding.tsx      |  3 ++-
 .../src/App/Staking/ReDelegateAssignStake.tsx |  3 ++-
 apps/namadillo/src/App/Staking/Unstake.tsx    |  3 ++-
 5 files changed, 33 insertions(+), 12 deletions(-)
 create mode 100644 apps/namadillo/src/App/Common/FeeWarning.tsx

diff --git a/apps/namadillo/src/App/Common/FeeWarning.tsx b/apps/namadillo/src/App/Common/FeeWarning.tsx
new file mode 100644
index 000000000..221159c17
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/apps/namadillo/src/App/Common/TransactionFees.tsx b/apps/namadillo/src/App/Common/TransactionFees.tsx
index 0a5f3341f..306107291 100644
--- a/apps/namadillo/src/App/Common/TransactionFees.tsx
+++ b/apps/namadillo/src/App/Common/TransactionFees.tsx
@@ -2,17 +2,20 @@ import { gasLimitsAtom, minimumGasPriceAtom } from "atoms/fees";
 import clsx from "clsx";
 import { useAtomValue } from "jotai";
 import { TxKind } from "types";
+import { FeeWarning } from "./FeeWarning";
 import { NamCurrency } from "./NamCurrency";
 
 type TransactionFeesProps = {
   txKind: TxKind;
   numberOfTransactions: number;
+  displayWarning?: boolean;
   className?: string;
 };
 
 export const TransactionFees = ({
   txKind,
   numberOfTransactions,
+  displayWarning,
   className,
 }: TransactionFeesProps): JSX.Element => {
   const gasLimits = useAtomValue(gasLimitsAtom);
@@ -22,15 +25,18 @@ export const TransactionFees = ({
     return <></>;
 
   return (
-    <div className={clsx("text-white text-sm", className)}>
-      Transaction fee:{" "}
-      <NamCurrency
-        className="font-medium"
-        forceBalanceDisplay={true}
-        amount={gasPrice.data.multipliedBy(
-          gasLimits.data[txKind].native.multipliedBy(numberOfTransactions)
-        )}
-      />
+    <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>
   );
 };
diff --git a/apps/namadillo/src/App/Staking/IncrementBonding.tsx b/apps/namadillo/src/App/Staking/IncrementBonding.tsx
index ca8f7acee..cae4b8538 100644
--- a/apps/namadillo/src/App/Staking/IncrementBonding.tsx
+++ b/apps/namadillo/src/App/Staking/IncrementBonding.tsx
@@ -267,7 +267,8 @@ const IncrementBonding = (): JSX.Element => {
             {gasLimits.isSuccess && (
               <TransactionFees
                 txKind="Bond"
-                className="absolute right-4 top-1/2 -translate-y-1/2"
+                className="absolute text-right right-4 top-1/2 -translate-y-1/2"
+                displayWarning={true}
                 numberOfTransactions={
                   Object.keys(updatedAmountByAddress).length
                 }
diff --git a/apps/namadillo/src/App/Staking/ReDelegateAssignStake.tsx b/apps/namadillo/src/App/Staking/ReDelegateAssignStake.tsx
index caa753914..0f39399e5 100644
--- a/apps/namadillo/src/App/Staking/ReDelegateAssignStake.tsx
+++ b/apps/namadillo/src/App/Staking/ReDelegateAssignStake.tsx
@@ -136,7 +136,8 @@ export const ReDelegateAssignStake = ({
         </ActionButton>
         <TransactionFees
           txKind="Redelegation"
-          className="absolute right-4 top-1/2 -translate-y-1/2"
+          displayWarning={true}
+          className="absolute text-right right-4 top-1/2 -translate-y-1/2"
           numberOfTransactions={numberOfTransactions}
         />
       </div>
diff --git a/apps/namadillo/src/App/Staking/Unstake.tsx b/apps/namadillo/src/App/Staking/Unstake.tsx
index 87b37c5e5..34e2f4e40 100644
--- a/apps/namadillo/src/App/Staking/Unstake.tsx
+++ b/apps/namadillo/src/App/Staking/Unstake.tsx
@@ -254,7 +254,8 @@ const Unstake = (): JSX.Element => {
             </ActionButton>
             <TransactionFees
               txKind="Unbond"
-              className="absolute right-4 top-1/2 -translate-y-1/2"
+              displayWarning={true}
+              className="absolute text-right right-4 top-1/2 -translate-y-1/2"
               numberOfTransactions={Object.keys(updatedAmountByAddress).length}
             />
           </div>