Crypocoin: scaffolding

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 (
+      <div className='cryptocoin__coin'>
+        {coin.get('title')}
+        {coin.get('address')}
+      </div>
+    );
+  }
+
+}

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" }
+  }
+}

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 (
+      <div className='crypto'>
+        {coinList.map(coin => (
+          <Coin coin={coin} key={coin.get('ticker')} />
+        ))}
+      </div>
+    );
+  }
+
+}

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 (
+      <Column icon='bitcoin' heading={intl.formatMessage(messages.heading)} backBtnSlim>
+        <div className='cryptocoin'>
+          <CoinList />
+        </div>
+      </Column>
+    );
+  }
+
+}

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 <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>
     );

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');
+}