From 940325e875d8040d2dc4dbf3c6063508f4c8154a Mon Sep 17 00:00:00 2001
From: thibautbremand <thibaut.bremand@gmail.com>
Date: Fri, 24 Nov 2023 17:46:43 +0100
Subject: [PATCH] Add custom fee warning

---
 .../BaseTransaction/BaseTransaction.tsx       | 23 +++++++++++++++++--
 .../TransactionDetails/TransactionDetails.tsx |  1 +
 packages/extension/src/constants/colors.ts    |  1 +
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/packages/extension/src/components/organisms/BaseTransaction/BaseTransaction.tsx b/packages/extension/src/components/organisms/BaseTransaction/BaseTransaction.tsx
index eee32b593..f0546a6a2 100644
--- a/packages/extension/src/components/organisms/BaseTransaction/BaseTransaction.tsx
+++ b/packages/extension/src/components/organisms/BaseTransaction/BaseTransaction.tsx
@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { FC, useMemo, useState } from 'react';
 
 import ErrorIcon from '@mui/icons-material/Error';
 import { IconButton, Paper, Tooltip, Typography } from '@mui/material';
@@ -16,7 +16,7 @@ import {
   getMaxFeeInDrops
 } from '@gemwallet/constants';
 
-import { ERROR_RED } from '../../../constants';
+import { ERROR_RED, WARNING_ORANGE } from '../../../constants';
 import { useNetwork } from '../../../contexts';
 import { formatAmount, formatFlags, formatToken } from '../../../utils';
 import { TileLoader } from '../../atoms';
@@ -115,6 +115,16 @@ export const Fee: FC<FeeProps> = ({
     setIsEditing(false);
   };
 
+  const warningFee = useMemo(() => {
+    if (estimatedFees === DEFAULT_FEES || fee === null) {
+      return null;
+    }
+
+    if (fee < Number(estimatedFees)) {
+      return 'The fee is lower than the estimated fee, the transaction may fail';
+    }
+  }, [estimatedFees, fee]);
+
   if (useLegacy) {
     return (
       <Paper elevation={24} style={{ padding: '10px', marginBottom: '5px' }}>
@@ -200,6 +210,15 @@ export const Fee: FC<FeeProps> = ({
           </span>
         )}
       </Typography>
+      {warningFee ? (
+        <Typography
+          variant="caption"
+          style={{ color: WARNING_ORANGE, cursor: 'pointer' }}
+          onClick={handleFeeClick}
+        >
+          {warningFee}
+        </Typography>
+      ) : null}
     </>
   );
 };
diff --git a/packages/extension/src/components/organisms/TransactionDetails/TransactionDetails.tsx b/packages/extension/src/components/organisms/TransactionDetails/TransactionDetails.tsx
index 38891fe33..3d4aa6078 100644
--- a/packages/extension/src/components/organisms/TransactionDetails/TransactionDetails.tsx
+++ b/packages/extension/src/components/organisms/TransactionDetails/TransactionDetails.tsx
@@ -70,6 +70,7 @@ export const TransactionDetails: FC<TransactionDetailsProps> = ({
               onFeeChange={onFeeChange}
             />
           }
+          alwaysExpand={true}
           isExpanded={isFeeExpanded}
           setIsExpanded={setIsFeeExpanded}
           paddingTop={10}
diff --git a/packages/extension/src/constants/colors.ts b/packages/extension/src/constants/colors.ts
index 4d48c4592..d21f96d79 100644
--- a/packages/extension/src/constants/colors.ts
+++ b/packages/extension/src/constants/colors.ts
@@ -1,4 +1,5 @@
 export const SECONDARY_GRAY = '#797A7F';
 export const ERROR_RED = '#F44336';
+export const WARNING_ORANGE = '#FF9800';
 export const GEMWALLET_BLUE = '#87CEEB';
 export const GEMWALLET_HALLOWEEN_ORANGE = '#FFA500';