diff --git a/app/soapbox/features/cryptocoin/coin.js b/app/soapbox/features/cryptocoin/coin.js new file mode 100644 index 000000000..01c825348 --- /dev/null +++ b/app/soapbox/features/cryptocoin/coin.js @@ -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 ( +
+ {coin.get('title')} + {coin.get('address')} +
+ ); + } + +} diff --git a/app/soapbox/features/cryptocoin/coin_db.json b/app/soapbox/features/cryptocoin/coin_db.json new file mode 100644 index 000000000..0e52785a7 --- /dev/null +++ b/app/soapbox/features/cryptocoin/coin_db.json @@ -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" } + } +} diff --git a/app/soapbox/features/cryptocoin/coin_list.js b/app/soapbox/features/cryptocoin/coin_list.js new file mode 100644 index 000000000..f7912b183 --- /dev/null +++ b/app/soapbox/features/cryptocoin/coin_list.js @@ -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 ( +
+ {coinList.map(coin => ( + + ))} +
+ ); + } + +} diff --git a/app/soapbox/features/cryptocoin/index.js b/app/soapbox/features/cryptocoin/index.js new file mode 100644 index 000000000..b509bbb2c --- /dev/null +++ b/app/soapbox/features/cryptocoin/index.js @@ -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 ( + +
+ +
+
+ ); + } + +} diff --git a/app/soapbox/features/ui/index.js b/app/soapbox/features/ui/index.js index 20b2ecf58..d193ae606 100644 --- a/app/soapbox/features/ui/index.js +++ b/app/soapbox/features/ui/index.js @@ -92,6 +92,7 @@ import { AwaitingApproval, Reports, ModerationLog, + Cryptocoin, } from './util/async-components'; // Dummy import, to make sure that ends up in the application bundle. @@ -289,6 +290,8 @@ class SwitchingColumnsArea extends React.PureComponent { + + ); diff --git a/app/soapbox/features/ui/util/async-components.js b/app/soapbox/features/ui/util/async-components.js index cc5566937..9e94c3e85 100644 --- a/app/soapbox/features/ui/util/async-components.js +++ b/app/soapbox/features/ui/util/async-components.js @@ -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'); +}