fix: show error message correctly (#2705)

apps/token/src/routes/staking/node/stake-failure.tsx

@@ -5,12 +5,14 @@ interface StakeFailureProps {
   nodeName: string;
   isDialogVisible: boolean;
   toggleDialog: () => void;
+  error: Error | null;
 }
 
 export const StakeFailure = ({
   nodeName,
   isDialogVisible,
   toggleDialog,
+  error,
 }: StakeFailureProps) => {
   const { t } = useTranslation();
   return (
@@ -20,11 +22,15 @@ export const StakeFailure = ({
       open={isDialogVisible}
       onChange={toggleDialog}
     >
-      <p>
-        {t('stakeFailed', {
-          node: nodeName,
-        })}
-      </p>
+      {error ? (
+        <p>{error.message}</p>
+      ) : (
+        <p>
+          {t('stakeFailed', {
+            node: nodeName,
+          })}
+        </p>
+      )}
     </Dialog>
   );
 };

apps/token/src/routes/staking/node/staking-form-tx-statuses.tsx

@@ -13,6 +13,7 @@ interface StakeFormTxStatusesProps {
   removeType: RemoveType;
   isDialogVisible: boolean;
   toggleDialog: () => void;
+  error: Error | null;
 }
 
 export const StakingFormTxStatuses = ({
@@ -23,6 +24,7 @@ export const StakingFormTxStatuses = ({
   removeType,
   isDialogVisible,
   toggleDialog,
+  error,
 }: StakeFormTxStatusesProps) => {
   switch (formState) {
     case FormState.Requested:
@@ -59,6 +61,7 @@ export const StakingFormTxStatuses = ({
           nodeName={nodeName}
           isDialogVisible={isDialogVisible}
           toggleDialog={toggleDialog}
+          error={error}
         />
       );
     default:

apps/token/src/routes/staking/node/staking-form.tsx

@@ -70,6 +70,7 @@ export const StakingForm = ({
   const { appState } = useAppState();
   const { sendTx } = useVegaWallet();
   const [formState, setFormState] = React.useState(FormState.Default);
+  const [error, setError] = useState<Error | null>(null);
   const [isDialogVisible, setIsDialogVisible] = useState(false);
   const { t } = useTranslation();
   const [action, setAction] = React.useState<StakeAction>(
@@ -135,12 +136,15 @@ export const StakingForm = ({
 
       // await success via poll
     } catch (err) {
+      if (err instanceof Error) {
+        setError(err);
+      }
       setFormState(FormState.Failure);
       Sentry.captureException(err);
     }
   }
 
-  const [delegationSearch, { data, error }] = usePartyDelegationsLazyQuery({
+  const [delegationSearch, { data }] = usePartyDelegationsLazyQuery({
     variables: {
       partyId: pubKey,
     },
@@ -170,10 +174,6 @@ export const StakingForm = ({
             clearInterval(interval);
           }
         }
-
-        if (error) {
-          Sentry.captureException(error);
-        }
       }, 1000);
     }
 
@@ -306,6 +306,7 @@ export const StakingForm = ({
         removeType={removeType}
         isDialogVisible={isDialogVisible}
         toggleDialog={toggleDialog}
+        error={error}
       />
     </>
   );