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

SiteWallet: convert to tsx

This commit is contained in:
Alex Gleason 2022-03-25 14:42:04 -05:00
parent 67c0c83b44
commit c8c2f40e38
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
3 changed files with 51 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/soapbox/features/crypto_donate/components/crypto_donate_panel.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { FormattedMessage } from 'react-intl';
import { Link } from 'react-router-dom';
import { Widget } from 'soapbox/components/ui';
import { Text, Widget } from 'soapbox/components/ui';
import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks';
import SiteWallet from './site_wallet';
@ -24,16 +24,16 @@ const CryptoDonatePanel: React.FC<ICryptoDonatePanel> = ({ limit = 3 }): JSX.Ele
return (
<Widget title={<FormattedMessage id='crypto_donate_panel.heading' defaultMessage='Donate Cryptocurrency' />}>
<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>
<Text>
<FormattedMessage
id='crypto_donate_panel.intro.message'
defaultMessage='{siteTitle} accepts cryptocurrency donations to fund our service. Thank you for your support!'
values={{ siteTitle }}
/>
</Text>
<SiteWallet limit={limit} />
{hasMore && <Link className='wtf-panel__expand-btn' to='/donate/crypto'>
<FormattedMessage
id='crypto_donate_panel.actions.more'

67
app/soapbox/features/crypto_donate/components/site_wallet.js
View File

@ -1,67 +0,0 @@
import { trimStart } from 'lodash';
import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import CryptoAddress from './crypto_address';
const normalizeAddress = address => {
return address.update('ticker', '', ticker => {
return trimStart(ticker, '$').toLowerCase();
});
};
const normalizeAddresses = addresses => addresses.map(normalizeAddress);
const makeGetCoinList = () => {
return createSelector(
[(addresses, limit) => typeof limit === 'number' ? addresses.take(limit) : addresses],
addresses => normalizeAddresses(addresses),
);
};
const makeMapStateToProps = () => {
const getCoinList = makeGetCoinList();
const mapStateToProps = (state, ownProps) => {
// Address example:
// {"ticker": "btc", "address": "bc1q9cx35adpm73aq2fw40ye6ts8hfxqzjr5unwg0n", "note": "This is our main address"}
const addresses = state.getIn(['soapbox', 'cryptoAddresses']);
const { limit } = ownProps;
return {
coinList: getCoinList(addresses, limit),
};
};
return mapStateToProps;
};
export default @connect(makeMapStateToProps)
class CoinList extends ImmutablePureComponent {
static propTypes = {
coinList: ImmutablePropTypes.list,
limit: PropTypes.number,
}
render() {
const { coinList } = this.props;
if (!coinList) return null;
return (
<div className='site-wallet'>
{coinList.map(coin => (
<CryptoAddress
key={coin.get('ticker')}
{...coin.toJS()}
/>
))}
</div>
);
}
}

40
app/soapbox/features/crypto_donate/components/site_wallet.tsx Normal file
View File

@ -0,0 +1,40 @@
import { trimStart } from 'lodash';
import React from 'react';
import { useSoapboxConfig } from 'soapbox/hooks';
import CryptoAddress from './crypto_address';
import type { Map as ImmutableMap, List as ImmutableList } from 'immutable';
type Address = ImmutableMap<string, any>;
// Address example:
// {"ticker": "btc", "address": "bc1q9cx35adpm73aq2fw40ye6ts8hfxqzjr5unwg0n", "note": "This is our main address"}
const normalizeAddress = (address: Address): Address => {
return address.update('ticker', '', ticker => {
return trimStart(ticker, '$').toLowerCase();
});
};
interface ISiteWallet {
limit: number,
}
const SiteWallet: React.FC<ISiteWallet> = ({ limit }): JSX.Element => {
const addresses: ImmutableList<Address> = useSoapboxConfig().get('cryptoAddresses');
const coinList = addresses.map(normalizeAddress).take(limit);
return (
<div className='site-wallet'>
{coinList.map(coin => (
<CryptoAddress
key={coin.get('ticker')}
{...coin.toJS()}
/>
))}
</div>
);
};
export default SiteWallet;