diff --git a/app/soapbox/features/crypto_donate/components/crypto_address.js b/app/soapbox/features/crypto_donate/components/crypto_address.js index 512ba686c..483c04953 100644 --- a/app/soapbox/features/crypto_donate/components/crypto_address.js +++ b/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 {
{title}
-
- -
{title}
-
{address}
{note &&
{note}
} +
+ + +
); } diff --git a/app/styles/components/crypto-donate.scss b/app/styles/components/crypto-donate.scss index 255acfeaa..dde631cd1 100644 --- a/app/styles/components/crypto-donate.scss +++ b/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)); +}