CryptoDonate: make crypto addresses copyable

app/soapbox/features/crypto_donate/components/crypto_address.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import QRCode from 'qrcode.react';
+import { FormattedMessage } from 'react-intl';
 import CoinDB from '../utils/coin_db';
 import { getCoinIcon } from '../utils/coin_icons';
 
@@ -13,6 +13,19 @@ export default class CryptoAddress extends ImmutablePureComponent {
     note: PropTypes.string,
   }
 
+  setInputRef = c => {
+    this.input = c;
+  }
+
+  handleCopyClick = e => {
+    if (!this.input) return;
+
+    this.input.select();
+    this.input.setSelectionRange(0, 99999);
+
+    document.execCommand('copy');
+  }
+
   render() {
     const { address, ticker, note } = this.props;
     const title = CoinDB.getIn([ticker, 'name']);
@@ -22,12 +35,14 @@ export default class CryptoAddress extends ImmutablePureComponent {
         <div className='crypto-address__icon'>
           <img src={getCoinIcon(ticker)} alt={title} />
         </div>
-        <div className='crypto-address__qr-code'>
-          <QRCode value={address} />
-        </div>
         <div className='crypto-address__title'>{title}</div>
-        <div className='crypto-address__address'>{address}</div>
         {note && <div className='crypto-address__note'>{note}</div>}
+        <div className='crypto-address__address'>
+          <input ref={this.setInputRef} type='text' value={address} />
+          <button className='crypto-address__copy' onClick={this.handleCopyClick}>
+            <FormattedMessage id='crypto_donate.copy' defaultMessage='Copy' />
+          </button>
+        </div>
       </div>
     );
   }

app/styles/components/crypto-donate.scss

@@ -1,3 +1,8 @@
 .crypto-address {
   padding: 20px;
 }
+
+.site-wallet {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+}