sforkowany z mirror/soapbox
Crypocoin: scaffolding
rodzic
8569d74daf
commit
561ff2b53f
|
@ -0,0 +1,22 @@
|
|||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
|
||||
export default class Coin extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
coin: ImmutablePropTypes.map.isRequired,
|
||||
}
|
||||
|
||||
render() {
|
||||
const { coin } = this.props;
|
||||
|
||||
return (
|
||||
<div className='cryptocoin__coin'>
|
||||
{coin.get('title')}
|
||||
{coin.get('address')}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"supportedCoins": [
|
||||
"btc",
|
||||
"eth",
|
||||
"ltc",
|
||||
"doge",
|
||||
"ubq",
|
||||
"xmr"
|
||||
],
|
||||
"coinData": {
|
||||
"btc": { "title": "Bitcoin" },
|
||||
"eth": { "title": "Etherium" },
|
||||
"ltc": { "title": "Litecoin" },
|
||||
"doge": { "title": "Dogecoin" },
|
||||
"xmr": { "title": "Monero" }
|
||||
}
|
||||
}
|
|
@ -0,0 +1,52 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { List as ImmutableList, fromJS } from 'immutable';
|
||||
import coinDB from './coin_db.json';
|
||||
import Coin from './coin';
|
||||
|
||||
const supportedCoins = ImmutableList(coinDB.supportedCoins);
|
||||
const coinData = fromJS(coinDB.coinData);
|
||||
|
||||
const makeCoinList = crypto => {
|
||||
return supportedCoins.reduce((acc, ticker) => {
|
||||
const address = crypto.get(ticker);
|
||||
const data = coinData.get(ticker);
|
||||
if (!address || !data) return acc;
|
||||
|
||||
const coin = data.merge({ ticker, address });
|
||||
|
||||
return acc.push(coin);
|
||||
}, ImmutableList());
|
||||
};
|
||||
|
||||
const mapStateToProps = state => {
|
||||
const crypto = state.getIn(['soapbox', 'cryptocoin']);
|
||||
|
||||
return {
|
||||
coinList: makeCoinList(crypto),
|
||||
};
|
||||
};
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
class CoinList extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
coinList: ImmutablePropTypes.list,
|
||||
}
|
||||
|
||||
render() {
|
||||
const { coinList } = this.props;
|
||||
if (!coinList) return null;
|
||||
|
||||
return (
|
||||
<div className='crypto'>
|
||||
{coinList.map(coin => (
|
||||
<Coin coin={coin} key={coin.get('ticker')} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,32 @@
|
|||
import React from 'react';
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
import PropTypes from 'prop-types';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import Column from '../ui/components/column';
|
||||
import CoinList from './coin_list';
|
||||
|
||||
const messages = defineMessages({
|
||||
heading: { id: 'column.cryptocoin', defaultMessage: 'Donate Cryptocurrency' },
|
||||
});
|
||||
|
||||
export default
|
||||
@injectIntl
|
||||
class Cryptocoin extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
intl: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { intl } = this.props;
|
||||
|
||||
return (
|
||||
<Column icon='bitcoin' heading={intl.formatMessage(messages.heading)} backBtnSlim>
|
||||
<div className='cryptocoin'>
|
||||
<CoinList />
|
||||
</div>
|
||||
</Column>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
|
@ -92,6 +92,7 @@ import {
|
|||
AwaitingApproval,
|
||||
Reports,
|
||||
ModerationLog,
|
||||
Cryptocoin,
|
||||
} from './util/async-components';
|
||||
|
||||
// Dummy import, to make sure that <Status /> ends up in the application bundle.
|
||||
|
@ -289,6 +290,8 @@ class SwitchingColumnsArea extends React.PureComponent {
|
|||
<WrappedRoute path='/admin/log' page={AdminPage} component={ModerationLog} content={children} exact />
|
||||
<WrappedRoute path='/info' layout={LAYOUT.EMPTY} component={ServerInfo} content={children} />
|
||||
|
||||
<WrappedRoute path='/donate/crypto' layout={LAYOUT.DEFAULT} component={Cryptocoin} content={children} />
|
||||
|
||||
<WrappedRoute layout={LAYOUT.EMPTY} component={GenericNotFound} content={children} />
|
||||
</Switch>
|
||||
);
|
||||
|
|
|
@ -229,3 +229,7 @@ export function Reports() {
|
|||
export function ModerationLog() {
|
||||
return import(/* webpackChunkName: "features/admin/moderation_log" */'../../admin/moderation_log');
|
||||
}
|
||||
|
||||
export function Cryptocoin() {
|
||||
return import(/* webpackChunkName: "features/cryptocoin" */'../../cryptocoin');
|
||||
}
|
||||
|
|
Ładowanie…
Reference in New Issue