Display CryptoDonatePanel, convert to tsx
This commit is contained in:
Alex Gleason
parent
f656009459
commit
999f518f10
3 changed files with 69 additions and 85 deletions
|
|
@ -1,76 +0,0 @@
|
|||
import classNames from 'classnames';
|
||||
import { List as ImmutableList } from 'immutable';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import Icon from 'soapbox/components/icon';
|
||||
|
||||
import SiteWallet from './site_wallet';
|
||||
|
||||
const mapStateToProps = state => {
|
||||
const addresses = state.getIn(['soapbox', 'cryptoAddresses'], ImmutableList());
|
||||
return {
|
||||
total: addresses.size,
|
||||
siteTitle: state.getIn(['instance', 'title']),
|
||||
};
|
||||
};
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
class CryptoDonatePanel extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
limit: PropTypes.number,
|
||||
total: PropTypes.number,
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
limit: 3,
|
||||
}
|
||||
|
||||
shouldDisplay = () => {
|
||||
const { limit, total } = this.props;
|
||||
if (limit === 0 || total === 0) return false;
|
||||
return true;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { limit, total, siteTitle } = this.props;
|
||||
const more = total - limit;
|
||||
const hasMore = more > 0;
|
||||
|
||||
if (!this.shouldDisplay()) return null;
|
||||
|
||||
return (
|
||||
<div className={classNames('wtf-panel funding-panel crypto-donate-panel', { 'crypto-donate-panel--has-more': hasMore })}>
|
||||
<div className='wtf-panel-header'>
|
||||
<Icon src={require('@tabler/icons/icons/currency-bitcoin.svg')} className='wtf-panel-header__icon' />
|
||||
<span className='wtf-panel-header__label'>
|
||||
<span><FormattedMessage id='crypto_donate_panel.heading' defaultMessage='Donate Cryptocurrency' /></span>
|
||||
</span>
|
||||
</div>
|
||||
<div className='wtf-panel__content'>
|
||||
<div className='crypto-donate-panel__message'>
|
||||
<FormattedMessage
|
||||
id='crypto_donate_panel.intro.message'
|
||||
defaultMessage='{siteTitle} accepts cryptocurrency donations to fund our service. Thank you for your support!'
|
||||
values={{ siteTitle }}
|
||||
/>
|
||||
</div>
|
||||
<SiteWallet limit={limit} />
|
||||
</div>
|
||||
{hasMore && <Link className='wtf-panel__expand-btn' to='/donate/crypto'>
|
||||
<FormattedMessage
|
||||
id='crypto_donate_panel.actions.more'
|
||||
defaultMessage='Click to see {count} more {count, plural, one {wallet} other {wallets}}'
|
||||
values={{ count: more }}
|
||||
/>
|
||||
</Link>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import Icon from 'soapbox/components/icon';
|
||||
import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks';
|
||||
|
||||
import SiteWallet from './site_wallet';
|
||||
|
||||
interface ICryptoDonatePanel {
|
||||
limit: number,
|
||||
}
|
||||
|
||||
const CryptoDonatePanel: React.FC<ICryptoDonatePanel> = ({ limit = 3 }): JSX.Element | null => {
|
||||
const addresses = useSoapboxConfig().get('cryptoAddresses');
|
||||
const siteTitle = useAppSelector((state) => state.instance.title);
|
||||
|
||||
if (limit === 0 || addresses.size === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const more = addresses.size - limit;
|
||||
const hasMore = more > 0;
|
||||
|
||||
return (
|
||||
<div className={classNames('wtf-panel funding-panel crypto-donate-panel', { 'crypto-donate-panel--has-more': hasMore })}>
|
||||
<div className='wtf-panel-header'>
|
||||
<Icon src={require('@tabler/icons/icons/currency-bitcoin.svg')} className='wtf-panel-header__icon' />
|
||||
<span className='wtf-panel-header__label'>
|
||||
<span><FormattedMessage id='crypto_donate_panel.heading' defaultMessage='Donate Cryptocurrency' /></span>
|
||||
</span>
|
||||
</div>
|
||||
<div className='wtf-panel__content'>
|
||||
<div className='crypto-donate-panel__message'>
|
||||
<FormattedMessage
|
||||
id='crypto_donate_panel.intro.message'
|
||||
defaultMessage='{siteTitle} accepts cryptocurrency donations to fund our service. Thank you for your support!'
|
||||
values={{ siteTitle }}
|
||||
/>
|
||||
</div>
|
||||
<SiteWallet limit={limit} />
|
||||
</div>
|
||||
{hasMore && <Link className='wtf-panel__expand-btn' to='/donate/crypto'>
|
||||
<FormattedMessage
|
||||
id='crypto_donate_panel.actions.more'
|
||||
defaultMessage='Click to see {count} more {count, plural, one {wallet} other {wallets}}'
|
||||
values={{ count: more }}
|
||||
/>
|
||||
</Link>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CryptoDonatePanel;
|
||||
|
|
@ -10,6 +10,7 @@ import {
|
|||
WhoToFollowPanel,
|
||||
TrendsPanel,
|
||||
SignUpPanel,
|
||||
CryptoDonatePanel,
|
||||
} from 'soapbox/features/ui/util/async-components';
|
||||
// import GroupSidebarPanel from '../features/groups/sidebar_panel';
|
||||
import { getFeatures } from 'soapbox/utils/features';
|
||||
|
|
@ -31,10 +32,9 @@ const mapStateToProps = state => {
|
|||
me,
|
||||
account: state.getIn(['accounts', me]),
|
||||
showFundingPanel: hasPatron,
|
||||
showCryptoDonatePanel: hasCrypto && cryptoLimit > 0,
|
||||
hasCrypto,
|
||||
cryptoLimit,
|
||||
showTrendsPanel: features.trends,
|
||||
showWhoToFollowPanel: features.suggestions,
|
||||
features,
|
||||
};
|
||||
};
|
||||
|
||||
|
|
@ -47,7 +47,7 @@ class HomePage extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { me, children, account, showTrendsPanel, showWhoToFollowPanel } = this.props;
|
||||
const { me, children, account, features, hasCrypto, cryptoLimit } = this.props;
|
||||
|
||||
const acct = account ? account.get('acct') : '';
|
||||
|
||||
|
|
@ -80,17 +80,22 @@ class HomePage extends ImmutablePureComponent {
|
|||
<Layout.Aside>
|
||||
{!me && (
|
||||
<BundleContainer fetchComponent={SignUpPanel}>
|
||||
{Component => <Component key='sign-up-panel' />}
|
||||
{Component => <Component />}
|
||||
</BundleContainer>
|
||||
)}
|
||||
{showTrendsPanel && (
|
||||
{features.trends && (
|
||||
<BundleContainer fetchComponent={TrendsPanel}>
|
||||
{Component => <Component limit={3} key='trends-panel' />}
|
||||
{Component => <Component limit={3} />}
|
||||
</BundleContainer>
|
||||
)}
|
||||
{showWhoToFollowPanel && (
|
||||
{hasCrypto && cryptoLimit > 0 && (
|
||||
<BundleContainer fetchComponent={CryptoDonatePanel}>
|
||||
{Component => <Component limit={cryptoLimit} />}
|
||||
</BundleContainer>
|
||||
)}
|
||||
{features.suggestions && (
|
||||
<BundleContainer fetchComponent={WhoToFollowPanel}>
|
||||
{Component => <Component limit={5} key='wtf-panel' />}
|
||||
{Component => <Component limit={5} />}
|
||||
</BundleContainer>
|
||||
)}
|
||||
<LinkFooter key='link-footer' />
|
||||
|
|
|
|||
Loading…
Reference in a new issue