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('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"