Cryptocoin: display images and QR codes

app/soapbox/features/cryptocoin/coin.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
+import QRCode from 'qrcode.react';
+import { getCoinIcon } from './icons';
 
 export default class Coin extends ImmutablePureComponent {
 
@@ -12,9 +14,15 @@ export default class Coin extends ImmutablePureComponent {
     const { coin } = this.props;
 
     return (
-      <div className='cryptocoin__coin'>
-        {coin.get('title')}
-        {coin.get('address')}
+      <div className='coin'>
+        <div className='coin__icon'>
+          <img src={getCoinIcon(coin.get('ticker'))} alt={coin.get('title')} />
+        </div>
+        <div className='coin__qr-code'>
+          <QRCode value={coin.get('address')} />
+        </div>
+        <div className='coin__title'>{coin.get('title')}</div>
+        <div className='coin__address'>{coin.get('address')}</div>
       </div>
     );
   }

app/soapbox/features/cryptocoin/coin_db.json

@@ -9,7 +9,7 @@
   ],
   "coinData": {
     "btc": { "title": "Bitcoin" },
-    "eth": { "title": "Etherium" },
+    "eth": { "title": "Ethereum" },
     "ltc": { "title": "Litecoin" },
     "doge": { "title": "Dogecoin" },
     "xmr": { "title": "Monero" }

app/soapbox/features/cryptocoin/icons.js

@@ -0,0 +1,19 @@
+const icons = {};
+
+function importAll(r) {
+  const pathRegex = /\.\/(.*)\.svg/i;
+
+  r.keys().forEach((key) => {
+    const ticker = pathRegex.exec(key)[1];
+    return icons[ticker] = r(key).default;
+  });
+}
+
+importAll(require.context('cryptocurrency-icons/svg/color/', true, /\.svg$/));
+
+const getCoinIcon = ticker => icons[ticker] || icons.generic || null;
+
+module.exports = {
+  default: icons,
+  getCoinIcon,
+};

app/styles/application.scss

@@ -81,6 +81,7 @@
 @import 'components/server-info';
 @import 'components/admin';
 @import 'components/backups';
+@import 'components/cryptocoin';
 
 // Holiday
 @import 'holiday/halloween';

app/styles/components/cryptocoin.scss

@@ -0,0 +1,3 @@
+.coin {
+  padding: 20px;
+}

package.json

@@ -59,6 +59,7 @@
     "classnames": "^2.2.5",
     "compression-webpack-plugin": "^6.0.2",
     "copy-webpack-plugin": "6.4.0",
+    "cryptocurrency-icons": "^0.17.2",
     "css-loader": "^4.3.0",
     "cssnano": "^4.1.10",
     "detect-passive-events": "^2.0.0",

yarn.lock

@@ -3866,6 +3866,11 @@ crypto-browserify@^3.11.0:
     randombytes "^2.0.0"
     randomfill "^1.0.3"
 
+cryptocurrency-icons@^0.17.2:
+  version "0.17.2"
+  resolved "https://registry.yarnpkg.com/cryptocurrency-icons/-/cryptocurrency-icons-0.17.2.tgz#25811b450d8698e7985bc91005d89555f13e6686"
+  integrity sha512-301lellubLNhxkySIBNNG3VD05rWfMR+CFgo9LoLfuNybG2OLy0mpWduxv65WZkJpLl9hhpaVAxCV5SYbG5o9A==
+
 css-color-names@0.0.4, css-color-names@^0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"