bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CryptoDonate: refactor CryptoIcon into its own component

Browse source
This commit is contained in:
Alex Gleason 2021-09-11 16:21:12 -05:00
parent 850fd6d310
commit 5166a71c27
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
4 changed files with 38 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/soapbox/features/crypto_donate/components/crypto_address.js
View file

@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
import ImmutablePureComponent from 'react-immutable-pure-component';
import Icon from 'soapbox/components/icon';
import CoinDB from '../utils/coin_db';
import { getCoinIcon } from '../utils/coin_icons';
import CryptoIcon from './crypto_icon';
import { openModal } from 'soapbox/actions/modal';
import { CopyableInput } from 'soapbox/features/forms';
import { getExplorerUrl } from '../utils/block_explorer';
@ -31,9 +31,11 @@ class CryptoAddress extends ImmutablePureComponent {
return (
<div className='crypto-address'>
<div className='crypto-address__head'>
<div className='crypto-address__icon'>
<img src={getCoinIcon(ticker)} alt={title} />
</div>
<CryptoIcon
className='crypto-address__icon'
ticker={ticker}
title={title}
/>
<div className='crypto-address__title'>{title || ticker.toUpperCase()}</div>
<div className='crypto-address__actions'>
<a href='' onClick={this.handleModalClick}>

26
app/soapbox/features/crypto_donate/components/crypto_icon.js Normal file
View file

@ -0,0 +1,26 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
export default class CryptoIcon extends React.PureComponent {
static propTypes = {
ticker: PropTypes.string.isRequired,
title: PropTypes.string,
className: PropTypes.string,
}
render() {
const { ticker, title, className } = this.props;
return (
<div className={classNames('crypto-icon', className)}>
<img
src={require(`cryptocurrency-icons/svg/color/${ticker.toLowerCase()}.svg`)}
alt={title || ticker}
/>
</div>
);
}
}

10
app/soapbox/features/crypto_donate/components/detailed_crypto_address.js
View file

@ -5,7 +5,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import Icon from 'soapbox/components/icon';
import QRCode from 'qrcode.react';
import CoinDB from '../utils/coin_db';
import { getCoinIcon } from '../utils/coin_icons';
import CryptoIcon from './crypto_icon';
import { CopyableInput } from 'soapbox/features/forms';
import { getExplorerUrl } from '../utils/block_explorer';
@ -26,9 +26,11 @@ class DetailedCryptoAddress extends ImmutablePureComponent {
return (
<div className='crypto-address'>
<div className='crypto-address__head'>
<div className='crypto-address__icon'>
<img src={getCoinIcon(ticker)} alt={title} />
</div>
<CryptoIcon
className='crypto-address__icon'
ticker={ticker}
title={title}
/>
<div className='crypto-address__title'>{title || ticker.toUpperCase()}</div>
<div className='crypto-address__actions'>
{explorerUrl && <a href={explorerUrl} target='_blank'>

4
app/soapbox/features/crypto_donate/utils/coin_icons.js
View file

@ -1,4 +0,0 @@
// For getting the icon
export const getCoinIcon = ticker => {
return require(`cryptocurrency-icons/svg/color/${ticker.toLowerCase()}.svg`);
};