From 8a2d436d31bfaa331b27b2d09acbac912c50ae25 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 10 Jun 2021 14:00:45 -0500
Subject: [PATCH] CryptoDonate: add explanation box to donation page

---
 app/soapbox/features/crypto_donate/index.js | 35 +++++++++++++++++++--
 app/styles/components/crypto-donate.scss    |  4 +++
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/crypto_donate/index.js b/app/soapbox/features/crypto_donate/index.js
index a06652ffe..052b84774 100644
--- a/app/soapbox/features/crypto_donate/index.js
+++ b/app/soapbox/features/crypto_donate/index.js
@@ -1,15 +1,21 @@
 import React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { connect } from 'react-redux';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import Column from '../ui/components/column';
+import Accordion from 'soapbox/features/ui/components/accordion';
 import SiteWallet from './components/site_wallet';
 
 const messages = defineMessages({
   heading: { id: 'column.crypto_donate', defaultMessage: 'Donate Cryptocurrency' },
 });
 
-export default
+const mapStateToProps = state => ({
+  siteTitle: state.getIn(['instance', 'title']),
+});
+
+export default @connect(mapStateToProps)
 @injectIntl
 class CryptoDonate extends ImmutablePureComponent {
 
@@ -17,12 +23,35 @@ class CryptoDonate extends ImmutablePureComponent {
     intl: PropTypes.object.isRequired,
   };
 
+  state = {
+    explanationBoxExpanded: true,
+  }
+
+  toggleExplanationBox = (setting) => {
+    this.setState({ explanationBoxExpanded: setting });
+  }
+
   render() {
-    const { intl } = this.props;
+    const { intl, siteTitle } = this.props;
+    const { explanationBoxExpanded } = this.state;
 
     return (
       <Column icon='bitcoin' heading={intl.formatMessage(messages.heading)} backBtnSlim>
         <div className='crypto-donate'>
+          <div className='explanation-box'>
+            <Accordion
+              headline={<FormattedMessage id='crypto_donate.explanation_box.title' defaultMessage='Sending cryptocurrency donations' />}
+              expanded={explanationBoxExpanded}
+              onToggle={this.toggleExplanationBox}
+            >
+              <FormattedMessage
+                id='crypto_donate.explanation_box.message'
+                defaultMessage='{siteTitle} accepts cryptocurrency donations. You may send a donation to any of the addresses below. Thank you for your support!'
+                values={{ siteTitle }}
+              />
+            </Accordion>
+
+          </div>
           <SiteWallet />
         </div>
       </Column>
diff --git a/app/styles/components/crypto-donate.scss b/app/styles/components/crypto-donate.scss
index 2fd6b7fd6..148500d70 100644
--- a/app/styles/components/crypto-donate.scss
+++ b/app/styles/components/crypto-donate.scss
@@ -1,3 +1,7 @@
+.crypto-donate {
+  padding-bottom: 10px;
+}
+
 .crypto-address {
   padding: 20px;
   display: flex;