diff --git a/app/soapbox/features/crypto_donate/components/crypto_address.js b/app/soapbox/features/crypto_donate/components/crypto_address.js index 66828954d..279b1c2cf 100644 --- a/app/soapbox/features/crypto_donate/components/crypto_address.js +++ b/app/soapbox/features/crypto_donate/components/crypto_address.js @@ -2,9 +2,17 @@ import React from 'react'; import PropTypes from 'prop-types'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { FormattedMessage } from 'react-intl'; +import Icon from 'soapbox/components/icon'; +import blockExplorers from '../utils/block_explorers.json'; import CoinDB from '../utils/coin_db'; import { getCoinIcon } from '../utils/coin_icons'; +const getExplorerUrl = (ticker, address) => { + const template = blockExplorers[ticker]; + if (!template) return false; + return template.replace('{address}', address); +}; + export default class CryptoAddress extends ImmutablePureComponent { static propTypes = { @@ -29,6 +37,7 @@ export default class CryptoAddress extends ImmutablePureComponent { render() { const { address, ticker, note } = this.props; const title = CoinDB.getIn([ticker, 'name']); + const explorerUrl = getExplorerUrl(ticker, address); return (
@@ -37,6 +46,11 @@ export default class CryptoAddress extends ImmutablePureComponent { {title}
{title}
+
+ + + +
{note &&
{note}
}
diff --git a/app/soapbox/features/crypto_donate/utils/block_explorers.json b/app/soapbox/features/crypto_donate/utils/block_explorers.json new file mode 100644 index 000000000..624cd5026 --- /dev/null +++ b/app/soapbox/features/crypto_donate/utils/block_explorers.json @@ -0,0 +1,8 @@ +{ + "bch": "https://explorer.bitcoin.com/bch/address/{address}", + "btc": "https://explorer.bitcoin.com/btc/address/{address}", + "doge": "https://dogechain.info/address/{address}", + "eth": "https://etherscan.io/address/{address}", + "ubq": "https://ubiqscan.io/address/{address}", + "xmr": "https://monerohash.com/explorer/search?value={address}" +} diff --git a/app/styles/components/crypto-donate.scss b/app/styles/components/crypto-donate.scss index 3111cf8b2..11ef3867a 100644 --- a/app/styles/components/crypto-donate.scss +++ b/app/styles/components/crypto-donate.scss @@ -25,12 +25,26 @@ } } + &__actions { + margin-left: auto; + padding-left: 10px; + + a { + color: var(--primary-text-color--faint); + } + } + &__note { margin-bottom: 10px; } &__address { margin-top: auto; + display: flex; + + input { + flex: 1; + } } }