Web: Error Handling (#314)

Co-authored-by: Hugo Marques <[email protected]>

src/helpers/handleKnownErrors.ts

@@ -0,0 +1,17 @@
+import { toast } from '../components/Toaster/Toaster';
+
+export const handleKnownErrors = (error: any, defaultError: any) => {
+    const errorMessage = error.toString().toLowerCase();
+
+    if (errorMessage.includes('insufficient funds')) {
+        toast.error(
+            `You don't have enough balance to complete the transaction. Please fund your wallet with some cUSD to complete the transaction.`
+        );
+    }
+
+    if (errorMessage.includes('exceeds the configured cap')) {
+        toast.error(`Tx fee exceeds the configured cap`);
+    }
+
+    toast.error(defaultError);
+};

src/slices/Pact/Deposit/Deposit.tsx

@@ -4,6 +4,7 @@ import { Box, Button, Icon, Input } from '@impact-market/ui';
 import { TLink, Text } from '../../../theme/components';
 import { colors } from '../../../theme';
 import { getCookie } from 'cookies-next';
+import { handleKnownErrors } from '../../../helpers/handleKnownErrors';
 import { handleSignature } from '../../../helpers/handleSignature';
 import { toast } from '../../../components/Toaster/Toaster';
 import { useDepositRedirect } from '@impact-market/utils/useDepositRedirect';
@@ -95,8 +96,8 @@ export const Deposit = ({ token, funds, setFunds, setOpenDeposit, translations }
 
             return toast.success(depositTransactionApproved);
         } catch (error) {
+            handleKnownErrors(error, t('somethingWrong'));
             setApproveIsLoading(false);
-            toast.error(t('somethingWrong'));
 
             console.log('Approve Error: ', error);
         }
@@ -147,8 +148,8 @@ export const Deposit = ({ token, funds, setFunds, setOpenDeposit, translations }
 
             return toast.success(t(toastMessagesDepositSuccess, { amount: depositAmount }));
         } catch (error) {
+            handleKnownErrors(error, t('somethingWrong'));
             setDepositIsLoading(false);
-            toast.error(t('somethingWrong'));
 
             console.log('Deposit Error: ', error);
         }

src/slices/Pact/Deposit/Summary.tsx

@@ -2,6 +2,7 @@ import { AlertStyled, FlexWrapperStyled } from './Deposit.style.ts';
 import { Box, Button } from '@impact-market/ui';
 import { Div, Img, TLink, Text } from '../../../theme/components';
 import { colors } from '../../../theme';
+import { handleKnownErrors } from '../../../helpers/handleKnownErrors';
 import { toast } from '../../../components/Toaster/Toaster';
 import { useDepositRedirect } from '@impact-market/utils/useDepositRedirect';
 import { useTranslation } from '../../../components/TranslationProvider/TranslationProvider';
@@ -64,8 +65,8 @@ export const Summary = ({
 
             return toast.success(t(toastMessagesDonateSuccess, { amount: funds?.availableInterest }));
         } catch (error) {
+            handleKnownErrors(error, t('somethingWrong'));
             setDonateInterestIsLoading(false);
-            toast.error(t('somethingWrong'));
 
             console.log(error);
         }

src/slices/Pact/Deposit/Withdraw.tsx

@@ -2,6 +2,7 @@ import { Box, Icon, Input } from '@impact-market/ui';
 import { ButtonStyled, WithdrawAmountStyled, WithdrawLabelStyled } from './Deposit.style.ts';
 import { TLink, Text } from '../../../theme/components';
 import { colors } from '../../../theme';
+import { handleKnownErrors } from '../../../helpers/handleKnownErrors';
 import { toast } from '../../../components/Toaster/Toaster';
 import { useDepositRedirect } from '@impact-market/utils/useDepositRedirect';
 import { useTranslation } from '../../../components/TranslationProvider/TranslationProvider';
@@ -48,8 +49,8 @@ export const Withdraw = ({ funds, setFunds, setOpenWithdraw, token, translations
 
             return toast.success(t(toastMessagesWithdrawSuccess, { amount: withdrawAmount }));
         } catch (error) {
+            handleKnownErrors(error, t('somethingWrong'));
             setWithdrawIsLoading(false);
-            toast.error(t('somethingWrong'));
 
             console.log(error);
         }

src/slices/Pact/Donate.tsx

@@ -16,6 +16,7 @@ import { WrongNetwork } from '../../components/WrongNetwork/WrongNetwork';
 import { colors } from '../../theme';
 import { currencyValue } from '../../helpers/currencyValue';
 import { dateHelpers } from '../../helpers/dateHelpers';
+import { handleKnownErrors } from '../../helpers/handleKnownErrors';
 import { modal } from 'react-modal-handler';
 import { mq } from 'styled-gen';
 import { toast } from '../../components/Toaster/Toaster';
@@ -122,8 +123,8 @@ const AirgrabContent = (props: {
 
             return toast.success(toastMessagesClaimSuccess);
         } catch (error) {
+            handleKnownErrors(error, toastMessagesClaimError);
             setAirgrabClaimIsLoading(false);
-            toast.error(toastMessagesClaimError);
         }
     };
 
@@ -232,8 +233,8 @@ const Rewards = (props: { onUpdate: Function; translations: any }) => {
 
             return toast.success(toastMessagesClaimSuccess);
         } catch (error) {
+            handleKnownErrors(error, toastMessagesClaimError);
             setClaimIsLoading(false);
-            toast.error(toastMessagesClaimError);
         }
     }, [claim, claimIsLoading]);
 

src/slices/Pact/Stake/StakeTab.tsx

@@ -4,6 +4,7 @@ import { String } from '../../../components';
 import { colors } from '../../../theme';
 import { currencyValue } from '../../../helpers/currencyValue';
 import { dateHelpers } from '../../../helpers/dateHelpers';
+import { handleKnownErrors } from '../../../helpers/handleKnownErrors';
 import { toast } from '../../../components/Toaster/Toaster';
 import { usePACTBalance, useStaking } from '@impact-market/utils';
 import { useTranslation } from '../../../components/TranslationProvider/TranslationProvider';
@@ -93,7 +94,7 @@ const Stake = ({ translations }: any) => {
             setIsLoading(false);
             console.log(error);
 
-            return toast.error(<RichText content={toastMessagesStakeApproveError} />);
+            return handleKnownErrors(error, <RichText content={toastMessagesStakeApproveError} />);
         }
     };
 
@@ -129,7 +130,7 @@ const Stake = ({ translations }: any) => {
             setIsLoading(false);
             console.log(error);
 
-            return toast.error(<RichText content={toastMessagesStakeError} />);
+            return handleKnownErrors(error, <RichText content={toastMessagesStakeError} />);
         }
     };
 
@@ -169,7 +170,7 @@ const Stake = ({ translations }: any) => {
             setRewardIsLoading(false);
             console.log(error);
 
-            return toast.error(<RichText content={toastMessagesAllocatedStakeError} />);
+            return handleKnownErrors(error, <RichText content={toastMessagesAllocatedStakeError} />);
         }
     };
 

src/slices/Pact/Stake/UnstakeTab.tsx

@@ -2,6 +2,7 @@ import { BoldInput, String } from '../../../components';
 import { Button, Div, Text } from '../../../theme/components';
 import { colors } from '../../../theme';
 import { currencyValue } from '../../../helpers/currencyValue';
+import { handleKnownErrors } from '../../../helpers/handleKnownErrors';
 import { toast } from '../../../components/Toaster/Toaster';
 import { useStaking } from '@impact-market/utils';
 import { useTranslation } from '../../../components/TranslationProvider/TranslationProvider';
@@ -56,7 +57,7 @@ const Unstake = ({ translations }: any) => {
             setIsLoading(false);
             console.log(error);
 
-            return toast.error(<RichText content={toastMessagesUnstakeError} />);
+            return handleKnownErrors(error, <RichText content={toastMessagesUnstakeError} />);
         }
     };
 
@@ -90,7 +91,7 @@ const Unstake = ({ translations }: any) => {
             setClaimIsLoading(false);
             console.log(error);
 
-            return toast.error(<RichText content={toastMessagesClaimError} />);
+            return handleKnownErrors(error, <RichText content={toastMessagesClaimError} />);
         }
     };