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