diff --git a/app/soapbox/features/cryptocoin/coin.js b/app/soapbox/features/cryptocoin/coin.js
index 01c825348..2474aaebf 100644
--- a/app/soapbox/features/cryptocoin/coin.js
+++ b/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 (
-
- {coin.get('title')}
- {coin.get('address')}
+
+
+
+
+
+
+
+
{coin.get('title')}
+
{coin.get('address')}
);
}
diff --git a/app/soapbox/features/cryptocoin/coin_db.json b/app/soapbox/features/cryptocoin/coin_db.json
index 0e52785a7..4b2889ce4 100644
--- a/app/soapbox/features/cryptocoin/coin_db.json
+++ b/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" }
diff --git a/app/soapbox/features/cryptocoin/icons.js b/app/soapbox/features/cryptocoin/icons.js
new file mode 100644
index 000000000..f3b6b878c
--- /dev/null
+++ b/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,
+};
diff --git a/app/styles/application.scss b/app/styles/application.scss
index 366b7fcae..068c6a528 100644
--- a/app/styles/application.scss
+++ b/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';
diff --git a/app/styles/components/cryptocoin.scss b/app/styles/components/cryptocoin.scss
new file mode 100644
index 000000000..4deaf3341
--- /dev/null
+++ b/app/styles/components/cryptocoin.scss
@@ -0,0 +1,3 @@
+.coin {
+ padding: 20px;
+}
diff --git a/package.json b/package.json
index a184ce62a..707c474be 100644
--- a/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index 91c283bcc..b4cce27af 100644
--- a/yarn.lock
+++ b/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"