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] 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>