moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

CryptoDonate: convert to tsx

This commit is contained in:
Alex Gleason 2022-03-25 15:24:10 -05:00
parent 13c4948ad2
commit 7e2a74b05d
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
2 changed files with 42 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
app/soapbox/features/crypto_donate/index.js
View File

@ -1,63 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import { Column } from 'soapbox/components/ui';
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' },
});
const mapStateToProps = state => ({
siteTitle: state.getIn(['instance', 'title']),
});
export default @connect(mapStateToProps)
@injectIntl
class CryptoDonate extends ImmutablePureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
};
state = {
explanationBoxExpanded: true,
}
toggleExplanationBox = (setting) => {
this.setState({ explanationBoxExpanded: setting });
}
render() {
const { intl, siteTitle } = this.props;
const { explanationBoxExpanded } = this.state;
return (
<Column label={intl.formatMessage(messages.heading)} withHeader>
<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>
);
}
}

42
app/soapbox/features/crypto_donate/index.tsx Normal file
View File

@ -0,0 +1,42 @@
import React, { useState } from 'react';
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import { Column } from 'soapbox/components/ui';
import Accordion from 'soapbox/features/ui/components/accordion';
import { useAppSelector } from 'soapbox/hooks';
import SiteWallet from './components/site_wallet';
const messages = defineMessages({
heading: { id: 'column.crypto_donate', defaultMessage: 'Donate Cryptocurrency' },
});
const CryptoDonate: React.FC = (): JSX.Element => {
const [explanationBoxExpanded, toggleExplanationBox] = useState(true);
const siteTitle = useAppSelector((state) => state.instance.title);
const intl = useIntl();
return (
<Column label={intl.formatMessage(messages.heading)} withHeader>
<div className='crypto-donate'>
<div className='explanation-box'>
<Accordion
headline={<FormattedMessage id='crypto_donate.explanation_box.title' defaultMessage='Sending cryptocurrency donations' />}
expanded={explanationBoxExpanded}
onToggle={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>
);
};
export default CryptoDonate;