Merge pull request #998 from gabrielbazan7/fix/highfeewarn

[FEAT] adding high fee warning on paypro confirm view
bitpay · Dec 8, 2023 · 2f83a68 · 2f83a68
2 parents ba099b7 + 68ac5f5
commit 2f83a68
Showing 1 changed file with 65 additions and 7 deletions.
diff --git a/src/navigation/wallet/screens/send/confirm/PayProConfirm.tsx b/src/navigation/wallet/screens/send/confirm/PayProConfirm.tsx
@@ -9,6 +9,7 @@ import {
   Recipient,
   TransactionProposal,
   TxDetails,
+  TxDetailsFee,
   Wallet,
 } from '../../../../../store/wallet/wallet.models';
 import SwipeButton from '../../../../../components/swipe-button/SwipeButton';
@@ -25,6 +26,17 @@ import {sleep} from '../../../../../utils/helper-methods';
 import {startOnGoingProcessModal} from '../../../../../store/app/app.effects';
 import {dismissOnGoingProcessModal} from '../../../../../store/app/app.actions';
 import {BuildPayProWalletSelectorList} from '../../../../../store/wallet/utils/wallet';
+import {GetFeeUnits} from '../../../../../store/wallet/utils/currency';
+import {
+  InfoDescription,
+  InfoHeader,
+  InfoTitle,
+} from '../../../../../components/styled/Text';
+import {
+  Info,
+  InfoImageContainer,
+  InfoTriangle,
+} from '../../../../../components/styled/Containers';
 import {
   Amount,
   ConfirmContainer,
@@ -42,7 +54,10 @@ import {AppActions} from '../../../../../store/app';
 import {CustomErrorMessage} from '../../../components/ErrorMessages';
 import {Analytics} from '../../../../../store/analytics/analytics.effects';
 import {PayProOptions} from '../../../../../store/wallet/effects/paypro/paypro';
-import {GetFeeOptions} from '../../../../../store/wallet/effects/fee/fee';
+import {
+  GetFeeOptions,
+  getFeeRatePerKb,
+} from '../../../../../store/wallet/effects/fee/fee';
 import {WalletRowProps} from '../../../../../components/list/WalletRow';
 import {Invoice} from '../../../../../store/shop/shop.models';
 import {startGetRates} from '../../../../../store/wallet/effects';
@@ -52,6 +67,8 @@ import {
 } from '../../../../../api/coinbase/coinbase.types';
 import {coinbasePayInvoice} from '../../../../../store/coinbase';
 import {Memo} from './Memo';
+import {HIGH_FEE_LIMIT} from '../../../../../constants/wallet';
+import WarningSvg from '../../../../../../assets/img/warning.svg';
 
 export interface PayProConfirmParamList {
   wallet?: Wallet;
@@ -92,6 +109,9 @@ const PayProConfirm = () => {
   const {fee, sendingFrom, subTotal, total} = txDetails || {};
   const [resetSwipeButton, setResetSwipeButton] = useState(false);
   const [disableSwipeSendButton, setDisableSwipeSendButton] = useState(false);
+  const [showHighFeeWarningMessage, setShowHighFeeWarningMessage] =
+    useState(false);
+
   const payProHost = payProOptions.payProUrl
     .replace('https://', '')
     .split('/')[0];
@@ -136,6 +156,7 @@ const PayProConfirm = () => {
       setRecipient({address: newTxDetails.sendingTo.recipientAddress} as {
         address: string;
       });
+      checkHighFees(selectedWallet, newTxp, fee);
       dispatch(
         Analytics.track('BitPay App - Start Merchant Purchase', {
           merchantBrand: invoice.merchantName,
@@ -310,6 +331,20 @@ const PayProConfirm = () => {
     );
   };
 
+  const checkHighFees = async (wallet: Wallet, txp: any, fee: TxDetailsFee) => {
+    const {feeUnitAmount} = GetFeeUnits(wallet.chain);
+    let feePerKb: number;
+    if (txp.feePerKb) {
+      feePerKb = txp.feePerKb;
+    } else {
+      feePerKb = await getFeeRatePerKb({wallet, feeLevel: fee.feeLevel});
+    }
+    setShowHighFeeWarningMessage(
+      feePerKb / feeUnitAmount >= HIGH_FEE_LIMIT[wallet.chain] &&
+        txp.amount !== 0,
+    );
+  };
+
   return (
     <ConfirmContainer>
       <ConfirmScrollView
@@ -367,12 +402,35 @@ const PayProConfirm = () => {
                 }}
               />
               {wallet && fee ? (
-                <Fee
-                  fee={fee}
-                  hideFeeOptions
-                  feeOptions={GetFeeOptions(wallet.chain)}
-                  hr
-                />
+                <>
+                  <Fee
+                    fee={fee}
+                    hideFeeOptions
+                    feeOptions={GetFeeOptions(wallet.chain)}
+                    hr={!showHighFeeWarningMessage}
+                  />
+                  {showHighFeeWarningMessage ? (
+                    <>
+                      <Info>
+                        <InfoTriangle />
+                        <InfoHeader>
+                          <InfoImageContainer infoMargin={'0 8px 0 0'}>
+                            <WarningSvg />
+                          </InfoImageContainer>
+
+                          <InfoTitle>
+                            {t('Transaction fees are currently high')}
+                          </InfoTitle>
+                        </InfoHeader>
+                        <InfoDescription>
+                          {t(
+                            'Due to high demand, miner fees are high. Fees are paid to miners who process transactions and are not paid to BitPay.',
+                          )}
+                        </InfoDescription>
+                      </Info>
+                    </>
+                  ) : null}
+                </>
               ) : null}
               <Amount
                 description={'Total'}