CryptoDonate: refactor duplicated code

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

@@ -2,18 +2,12 @@ import React from 'react';
 import { connect } from 'react-redux';
 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';
 import { openModal } from 'soapbox/actions/modal';
-
+import { CopyableInput } from 'soapbox/features/forms';
-const getExplorerUrl = (ticker, address) => {
+import { getExplorerUrl } from '../utils/block_explorer';
-  const template = blockExplorers[ticker];
-  if (!template) return false;
-  return template.replace('{address}', address);
-};
 
 export default @connect()
 class CryptoAddress extends ImmutablePureComponent {
@@ -24,19 +18,6 @@ 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');
-  }
-
   handleModalClick = e => {
     this.props.dispatch(openModal('CRYPTO_DONATE', this.props));
     e.preventDefault();
@@ -65,10 +46,7 @@ class CryptoAddress extends ImmutablePureComponent {
         </div>
         {note && <div className='crypto-address__note'>{note}</div>}
         <div className='crypto-address__address simple_form'>
-          <input ref={this.setInputRef} type='text' value={address} />
+          <CopyableInput value={address} />
-          <button className='crypto-address__copy' onClick={this.handleCopyClick}>
-            <FormattedMessage id='crypto_donate.copy' defaultMessage='Copy' />
-          </button>
         </div>
       </div>
     );

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

@@ -2,18 +2,12 @@ import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { FormattedMessage } from 'react-intl';
 import Icon from 'soapbox/components/icon';
 import QRCode from 'qrcode.react';
-import blockExplorers from '../utils/block_explorers.json';
 import CoinDB from '../utils/coin_db';
 import { getCoinIcon } from '../utils/coin_icons';
-
+import { CopyableInput } from 'soapbox/features/forms';
-const getExplorerUrl = (ticker, address) => {
+import { getExplorerUrl } from '../utils/block_explorer';
-  const template = blockExplorers[ticker];
-  if (!template) return false;
-  return template.replace('{address}', address);
-};
 
 export default @connect()
 class DetailedCryptoAddress extends ImmutablePureComponent {
@@ -24,19 +18,6 @@ class DetailedCryptoAddress 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']);
@@ -60,10 +41,7 @@ class DetailedCryptoAddress extends ImmutablePureComponent {
           <QRCode value={address} />
         </div>
         <div className='crypto-address__address simple_form'>
-          <input ref={this.setInputRef} type='text' value={address} />
+          <CopyableInput value={address} />
-          <button className='crypto-address__copy' onClick={this.handleCopyClick}>
-            <FormattedMessage id='crypto_donate.copy' defaultMessage='Copy' />
-          </button>
         </div>
       </div>
     );

app/soapbox/features/crypto_donate/utils/block_explorer.js

@@ -0,0 +1,7 @@
+import blockExplorers from './block_explorers.json';
+
+export const getExplorerUrl = (ticker, address) => {
+  const template = blockExplorers[ticker];
+  if (!template) return false;
+  return template.replace('{address}', address);
+};

app/soapbox/features/forms/index.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
+import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { v4 as uuidv4 } from 'uuid';
@@ -264,3 +265,38 @@ export const FileChooserLogo = props => (
 FileChooserLogo.defaultProps = {
   accept: ['image/svg', 'image/png'],
 };
+
+
+export class CopyableInput extends ImmutablePureComponent {
+
+  static propTypes = {
+    value: 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 { value } = this.props;
+
+    return (
+      <div className='copyable-input'>
+        <input ref={this.setInputRef} type='text' value={value} />
+        <button onClick={this.handleCopyClick}>
+          <FormattedMessage id='forms.copy' defaultMessage='Copy' />
+        </button>
+      </div>
+    );
+  }
+
+}

app/styles/components/crypto-donate.scss

@@ -48,23 +48,6 @@
 
   &__address {
     margin-top: auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    input {
-      flex: 1;
-      font-size: 14px !important;
-      border-radius: 4px 0 0 4px !important;
-    }
-
-    button {
-      width: auto;
-      font-size: 14px;
-      margin: 0;
-      padding-bottom: 9px;
-      border-radius: 0 4px 4px 0;
-    }
   }
 }
 

app/styles/forms.scss

@@ -788,3 +788,23 @@ code {
     }
   }
 }
+
+.copyable-input {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  input {
+    flex: 1;
+    font-size: 14px !important;
+    border-radius: 4px 0 0 4px !important;
+  }
+
+  button {
+    width: auto;
+    font-size: 14px;
+    margin: 0;
+    padding-bottom: 9px;
+    border-radius: 0 4px 4px 0;
+  }
+}