diff --git a/app/soapbox/features/crypto_donate/components/crypto_address.js b/app/soapbox/features/crypto_donate/components/crypto_address.js index 3d6966af8..76ccbefa6 100644 --- a/app/soapbox/features/crypto_donate/components/crypto_address.js +++ b/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'; - -const getExplorerUrl = (ticker, address) => { - const template = blockExplorers[ticker]; - if (!template) return false; - return template.replace('{address}', address); -}; +import { CopyableInput } from 'soapbox/features/forms'; +import { getExplorerUrl } from '../utils/block_explorer'; 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 { {note &&
{note}
}
- - +
); diff --git a/app/soapbox/features/crypto_donate/components/detailed_crypto_address.js b/app/soapbox/features/crypto_donate/components/detailed_crypto_address.js index 70a588890..784c54dcf 100644 --- a/app/soapbox/features/crypto_donate/components/detailed_crypto_address.js +++ b/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'; - -const getExplorerUrl = (ticker, address) => { - const template = blockExplorers[ticker]; - if (!template) return false; - return template.replace('{address}', address); -}; +import { CopyableInput } from 'soapbox/features/forms'; +import { getExplorerUrl } from '../utils/block_explorer'; 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 {
- - +
); diff --git a/app/soapbox/features/crypto_donate/utils/block_explorer.js b/app/soapbox/features/crypto_donate/utils/block_explorer.js new file mode 100644 index 000000000..0929250bf --- /dev/null +++ b/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); +}; diff --git a/app/soapbox/features/forms/index.js b/app/soapbox/features/forms/index.js index d73e428dc..7a481d211 100644 --- a/app/soapbox/features/forms/index.js +++ b/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 ( +
+ + +
+ ); + } + +} diff --git a/app/styles/components/crypto-donate.scss b/app/styles/components/crypto-donate.scss index 2c2d1f819..b01fef8de 100644 --- a/app/styles/components/crypto-donate.scss +++ b/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; - } } } diff --git a/app/styles/forms.scss b/app/styles/forms.scss index ce782ac7d..4367a8efc 100644 --- a/app/styles/forms.scss +++ b/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; + } +}