fix(nym-wallet): bonding, enhance error handling (#1543)

open a dialog for user feedback when error occurs
add some better error logging

nym-wallet/src/context/bonding.tsx

@@ -118,7 +118,6 @@ export const BondingContextProvider = ({ children }: { children?: React.ReactNod
       stakeSaturation: 0,
       numberOfDelegators: 0,
     };
-
     try {
       const statusResponse = await getMixnodeStatus(identityKey);
       additionalDetails.status = statusResponse.status;
@@ -163,7 +162,7 @@ export const BondingContextProvider = ({ children }: { children?: React.ReactNod
         try {
           operatorRewards = await getOperatorRewards(clientDetails?.client_address);
         } catch (e) {
-          console.warn(`get_operator_rewards request failed: ${e}`);
+          Console.warn(`get_operator_rewards request failed: ${e}`);
         }
         if (data) {
           const { status, stakeSaturation, numberOfDelegators } = await getAdditionalMixnodeDetails(
@@ -186,7 +185,7 @@ export const BondingContextProvider = ({ children }: { children?: React.ReactNod
           } as TBondedMixnode);
         }
       } catch (e: any) {
-        console.warn(e);
+        Console.warn(e);
         setError(`While fetching current bond state, an error occurred: ${e}`);
       }
     }
@@ -207,6 +206,7 @@ export const BondingContextProvider = ({ children }: { children?: React.ReactNod
           } as TBondedGateway);
         }
       } catch (e: any) {
+        Console.warn(e);
         setError(`While fetching current bond state, an error occurred: ${e}`);
       }
     }
@@ -235,6 +235,7 @@ export const BondingContextProvider = ({ children }: { children?: React.ReactNod
       }
       return tx;
     } catch (e: any) {
+      Console.warn(e);
       setError(`an error occurred: ${e}`);
     } finally {
       setIsLoading(false);
@@ -256,6 +257,7 @@ export const BondingContextProvider = ({ children }: { children?: React.ReactNod
       }
       return tx;
     } catch (e: any) {
+      Console.warn(e);
       setError(`an error occurred: ${e}`);
     } finally {
       setIsLoading(false);
@@ -272,6 +274,7 @@ export const BondingContextProvider = ({ children }: { children?: React.ReactNod
       if (bondedNode && isGateway(bondedNode) && bondedNode.proxy) tx = await vestingUnbondGateway(fee?.fee);
       if (bondedNode && isGateway(bondedNode) && !bondedNode.proxy) tx = await unbondGatewayRequest(fee?.fee);
     } catch (e) {
+      Console.warn(e);
       setError(`an error occurred: ${e as string}`);
     } finally {
       setIsLoading(false);
@@ -286,6 +289,7 @@ export const BondingContextProvider = ({ children }: { children?: React.ReactNod
       if (bondedNode?.proxy) tx = await updateMixnodeVestingRequest(pm, fee?.fee);
       else tx = await updateMixnodeRequest(pm, fee?.fee);
     } catch (e: any) {
+      Console.warn(e);
       setError(`an error occurred: ${e}`);
     } finally {
       setIsLoading(false);

nym-wallet/src/pages/bonding/index.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { FeeDetails } from '@nymproject/types';
 import { TPoolOption } from 'src/components';
 import { Bond } from 'src/components/Bonding/Bond';
@@ -16,9 +16,8 @@ import { isGateway, isMixnode, TBondGatewayArgs, TBondMixNodeArgs } from 'src/ty
 import { BondedGateway } from 'src/components/Bonding/BondedGateway';
 import { RedeemRewardsModal } from 'src/components/Bonding/modals/RedeemRewardsModal';
 import { CompoundRewardsModal } from 'src/components/Bonding/modals/CompoundRewardsModal';
-import { PageLayout } from '../../layouts';
-import { BondingContextProvider, useBondingContext } from '../../context';
 import { Box } from '@mui/material';
+import { BondingContextProvider, useBondingContext } from '../../context';
 
 const Bonding = () => {
   const [showModal, setShowModal] = useState<
@@ -42,19 +41,31 @@ const Bonding = () => {
     compoundRewards,
     isLoading,
     checkOwnership,
+    error,
   } = useBondingContext();
 
+  useEffect(() => {
+    if (error) {
+      setShowModal(undefined);
+      setConfirmationDetails({
+        status: 'error',
+        title: 'An error occurred',
+        subtitle: error,
+      });
+    }
+  }, [error]);
+
   const handleCloseModal = async () => {
     setShowModal(undefined);
     await checkOwnership();
   };
 
-  const handleError = (error: string) => {
+  const handleError = (e: string) => {
     setShowModal(undefined);
     setConfirmationDetails({
       status: 'error',
       title: 'An error occurred',
-      subtitle: error,
+      subtitle: e,
     });
   };