Add custom fee warning

GemWallet · Nov 24, 2023 · 940325e · 940325e
1 parent ca4b8d9
commit 940325e
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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';