CryptoDonate: add block explorer links

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 (
       <div className='crypto-address'>
@@ -37,6 +46,11 @@ export default class CryptoAddress extends ImmutablePureComponent {
             <img src={getCoinIcon(ticker)} alt={title} />
           </div>
           <div className='crypto-address__title'>{title}</div>
+          <div className='crypto-address__actions'>
+            <a href={explorerUrl} target='_blank'>
+              <Icon id='external-link' />
+            </a>
+          </div>
         </div>
         {note && <div className='crypto-address__note'>{note}</div>}
         <div className='crypto-address__address'>

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}"
+}

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