feat(namadillo): adding fee warning

anoma · Jul 3, 2024 · 5fc7381 · 5fc7381
1 parent be50b4a
commit 5fc7381
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 12 deletions.
diff --git a/apps/namadillo/src/App/Common/FeeWarning.tsx 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
@@ -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
@@ -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
@@ -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
@@ -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>