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