More considerations for anonymous contributions on the frontend.

backend/grant/proposal/models.py

@@ -715,12 +715,14 @@ class ProposalContributionSchema(ma.Schema):
             "amount",
             "date_created",
             "addresses",
+            "is_anonymous",
         )
 
     proposal = ma.Nested("ProposalSchema")
     user = ma.Nested("UserSchema", default=anonymous_user)
     date_created = ma.Method("get_date_created")
     addresses = ma.Method("get_addresses")
+    is_anonymous = ma.Method("get_is_anonymous")
 
     def get_date_created(self, obj):
         return dt_to_unix(obj.date_created)
@@ -732,6 +734,9 @@ class ProposalContributionSchema(ma.Schema):
         return {
             'transparent': addresses['transparent'],
         }
+    
+    def get_is_anonymous(self, obj):
+        return not obj.user
 
     @post_dump
     def stub_anonymous_user(self, data):

frontend/client/components/ContributionModal/PaymentInfo.tsx

@@ -26,8 +26,9 @@ export default class PaymentInfo extends React.Component<Props, State> {
   };
 
   render() {
-    const { contribution, text } = this.props;
+    const { contribution } = this.props;
     const { sendType } = this.state;
+    let text = this.props.text;
     let address;
     let memo;
     let amount;
@@ -103,14 +104,24 @@ export default class PaymentInfo extends React.Component<Props, State> {
       );
     }
 
+    if (!text) {
+      if (contribution && contribution.isAnonymous) {
+        text = `
+          Thank you for contributing! Just send using whichever method works best for
+          you, and your contribution will show up anonymously once it's been confirmed.
+        `
+      } else {
+        text = `
+          Thank you for contributing! Just send using whichever method works best for
+          you, and we'll let you know once it's been confirmed.
+        `;
+      }
+    }
+
     return (
       <Form className="PaymentInfo" layout="vertical">
         <div className="PaymentInfo-text">
-          {text ||
+          {text}
-            `
-            Thank you for contributing! Just send using whichever method works best for
-            you, and we'll let you know when your contribution has been confirmed.
-          `}
         </div>
         <Radio.Group
           className="PaymentInfo-types"

frontend/client/components/ContributionModal/index.tsx

@@ -64,11 +64,13 @@ export default class ContributionModal extends React.Component<Props, State> {
     }
     // If contribution is provided, update it
     if (contribution !== this.props.contribution) {
+      this.setState({ contribution: contribution || null });
+    }
+    // When the modal is closed, clear out the contribution and anonymous check
+    if (this.props.isVisible && !isVisible) {
       this.setState({
-        contribution: contribution || null,
+        contribution: null,
-        hasConfirmedAnonymous: contribution
+        hasConfirmedAnonymous: false,
-          ? !!contribution.user.userid
-          : nextState.hasConfirmedAnonymous,
       });
     }
   }
@@ -113,9 +115,16 @@ export default class ContributionModal extends React.Component<Props, State> {
           title="Thank you for your contribution!"
           description={
             <>
-              Your contribution should be confirmed in about 20 minutes. You can keep an
+              Your transaction should be confirmed in about 20 minutes.{' '}
-              eye on it at the{' '}
+              {isAnonymous
-              <Link to="/profile?tab=funded">funded tab on your profile</Link>.
+                ? 'Once it’s confirmed, it’ll show up in the contributions tab.'
+                : (
+                  <>
+                    You can keep an eye on it at the{' '}
+                    <Link to="/profile?tab=funded">funded tab on your profile</Link>.
+                  </>
+                )
+              }
             </>
           }
           style={{ width: '90%' }}

frontend/types/contribution.ts

@@ -7,6 +7,7 @@ export interface Contribution {
   amount: string;
   dateCreated: number;
   status: 'PENDING' | 'CONFIRMED';
+  isAnonymous: boolean;
 }
 
 export interface ContributionWithAddresses extends Contribution {