moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

CryptoDonate: refactor duplicated code

This commit is contained in:
Alex Gleason 2021-06-09 19:49:53 -05:00
parent 39ee6505d8
commit 820afa9412
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
6 changed files with 69 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
app/soapbox/features/crypto_donate/components/crypto_address.js
View File

@ -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 {
</div>
{note && <div className='crypto-address__note'>{note}</div>}
<div className='crypto-address__address simple_form'>
<input ref={this.setInputRef} type='text' value={address} />
<button className='crypto-address__copy' onClick={this.handleCopyClick}>
<FormattedMessage id='crypto_donate.copy' defaultMessage='Copy' />
</button>
<CopyableInput value={address} />
</div>
</div>
);

28
app/soapbox/features/crypto_donate/components/detailed_crypto_address.js
View File

@ -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 {
<QRCode value={address} />
</div>
<div className='crypto-address__address simple_form'>
<input ref={this.setInputRef} type='text' value={address} />
<button className='crypto-address__copy' onClick={this.handleCopyClick}>
<FormattedMessage id='crypto_donate.copy' defaultMessage='Copy' />
</button>
<CopyableInput value={address} />
</div>
</div>
);

7
app/soapbox/features/crypto_donate/utils/block_explorer.js Normal file
View File

@ -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);
};

36
app/soapbox/features/forms/index.js
View File

@ -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>
);
}
}

17
app/styles/components/crypto-donate.scss
View File

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

20
app/styles/forms.scss
View File

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