Better contribution error displays (#314)

* Handle blockchain_get failures better.

* tsc

backend/grant/app.py

@@ -48,6 +48,10 @@ def create_app(config_objects=["grant.settings"]):
             return jsonify({"message": error_message}), err.code, headers
         else:
             return jsonify({"message": error_message}), err.code
+    
+    @app.errorhandler(Exception)
+    def handle_exception(err):
+        return jsonify({"message": "Something went wrong"}), 500
 
     for conf in config_objects:
         app.config.from_object(conf)

backend/grant/proposal/models.py

@@ -286,7 +286,10 @@ class Proposal(db.Model):
                 raise ValidationException("Proposal must have a {}".format(field))
 
         # Check with node that the address is kosher
-        res = blockchain_get('/validate/address', {'address': self.payout_address})
+        try:
+            res = blockchain_get('/validate/address', {'address': self.payout_address})
+        except:
+            raise ValidationException("Could not validate your payout address due to an internal server error, please try again later")
         if not res['valid']:
             raise ValidationException("Payout address is not a valid Zcash address")
 

frontend/client/components/ContributionModal/index.tsx

@@ -66,11 +66,12 @@ export default class ContributionModal extends React.Component<Props, State> {
     if (contribution !== this.props.contribution) {
       this.setState({ contribution: contribution || null });
     }
-    // When the modal is closed, clear out the contribution and anonymous check
+    // When the modal is closed, clear out the contribution, error, and anonymous check
     if (this.props.isVisible && !isVisible) {
       this.setState({
         contribution: null,
         hasConfirmedAnonymous: false,
+        error: null,
       });
     }
   }
@@ -133,7 +134,16 @@ export default class ContributionModal extends React.Component<Props, State> {
       if (error) {
         okText = 'Done';
         onOk = handleClose;
-        content = error;
+        content = (
+          <Result
+            type="error"
+            title="Something went wrong"
+            description={`
+              We were unable to get your contribution started. Please check back
+              soon, we're working to fix the problem as soon as possible.
+            `}
+          />
+        );
       } else {
         okText = 'I’ve sent it';
         onOk = this.confirmSend;

frontend/client/components/CreateFlow/Final.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { Icon } from 'antd';
 import { Link } from 'react-router-dom';
+import Result from 'ant-design-pro/lib/Result';
 import Loader from 'components/Loader';
 import { createActions } from 'modules/create';
 import { AppState } from 'store/reducers';
@@ -28,6 +29,7 @@ type Props = OwnProps & StateProps & DispatchProps;
 
 const STATE = {
   contribution: null as null | ContributionWithAddresses,
+  contributionError: null as null | Error,
 };
 
 type State = typeof STATE;
@@ -49,7 +51,7 @@ class CreateFinal extends React.Component<Props, State> {
 
   render() {
     const { submittedProposal, submitError, goBack } = this.props;
-    const { contribution } = this.state;
+    const { contribution, contributionError } = this.state;
 
     const ready = submittedProposal && (submittedProposal.isStaked || contribution);
     const staked = submittedProposal && submittedProposal.isStaked;
@@ -120,6 +122,20 @@ class CreateFinal extends React.Component<Props, State> {
           )}
         </>
       );
+    } else if (contributionError) {
+      content = (
+        <Result
+          type="error"
+          title="Something went wrong"
+          description={
+            <>
+              We were unable to get your staking contribution started. You can finish
+              staking from <Link to="/profile?tab=pending">your profile</Link>, please try
+              again from there soon.
+            </>
+          }
+        />
+      );
     } else {
       content = <Loader size="large" tip="Submitting your proposal..." />;
     }
@@ -136,8 +152,12 @@ class CreateFinal extends React.Component<Props, State> {
   private getStakingContribution = async () => {
     const { submittedProposal } = this.props;
     if (submittedProposal) {
-      const res = await getProposalStakingContribution(submittedProposal.proposalId);
-      this.setState({ contribution: res.data });
+      try {
+        const res = await getProposalStakingContribution(submittedProposal.proposalId);
+        this.setState({ contribution: res.data });
+      } catch (err) {
+        this.setState({ contributionError: err });
+      }
     }
   };
 }

frontend/client/components/Profile/ProfilePending.tsx

@@ -194,7 +194,8 @@ class ProfilePending extends React.Component<Props, State> {
         this.setState({ isLoadingStake: false });
       });
     } catch (err) {
-      message.error(err.message, 3);
+      console.error(err);
+      message.error('Failed to get staking contribution, try again later', 3);
       this.setState({ isLoadingStake: false });
     }
   };