CryptoDonate: parse Profile Fields as CrypoAddresses

datepicker-css
Alex Gleason 2021-06-09 20:36:02 -05:00
rodzic 820afa9412
commit 95b5738dfd
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
5 zmienionych plików z 31 dodań i 15 usunięć

Wyświetl plik

@ -34,14 +34,14 @@ class CryptoAddress extends ImmutablePureComponent {
<div className='crypto-address__icon'>
<img src={getCoinIcon(ticker)} alt={title} />
</div>
<div className='crypto-address__title'>{title}</div>
<div className='crypto-address__title'>{title || ticker.toUpperCase()}</div>
<div className='crypto-address__actions'>
<a href='' onClick={this.handleModalClick}>
<Icon id='qrcode' />
</a>
<a href={explorerUrl} target='_blank'>
{explorerUrl && <a href={explorerUrl} target='_blank'>
<Icon id='external-link' />
</a>
</a>}
</div>
</div>
{note && <div className='crypto-address__note'>{note}</div>}

Wyświetl plik

@ -29,11 +29,11 @@ class DetailedCryptoAddress extends ImmutablePureComponent {
<div className='crypto-address__icon'>
<img src={getCoinIcon(ticker)} alt={title} />
</div>
<div className='crypto-address__title'>{title}</div>
<div className='crypto-address__title'>{title || ticker.toUpperCase()}</div>
<div className='crypto-address__actions'>
<a href={explorerUrl} target='_blank'>
{explorerUrl && <a href={explorerUrl} target='_blank'>
<Icon id='external-link' />
</a>
</a>}
</div>
</div>
{note && <div className='crypto-address__note'>{note}</div>}

Wyświetl plik

@ -291,7 +291,7 @@ export class CopyableInput extends ImmutablePureComponent {
return (
<div className='copyable-input'>
<input ref={this.setInputRef} type='text' value={value} />
<input ref={this.setInputRef} type='text' value={value} readOnly />
<button onClick={this.handleCopyClick}>
<FormattedMessage id='forms.copy' defaultMessage='Copy' />
</button>

Wyświetl plik

@ -13,6 +13,12 @@ import { List as ImmutableList } from 'immutable';
import { getAcct, isAdmin, isModerator } from 'soapbox/utils/accounts';
import { displayFqn } from 'soapbox/utils/state';
import classNames from 'classnames';
import CryptoAddress from 'soapbox/features/crypto_donate/components/crypto_address';
const TICKER_REGEX = /\$([a-zA-Z]*)/i;
const getTicker = value => (value.match(TICKER_REGEX) || [])[1];
const isTicker = value => Boolean(getTicker(value));
const messages = defineMessages({
linkVerifiedOn: { id: 'account.link_verified_on', defaultMessage: 'Ownership of this link was checked on {date}' },
@ -123,15 +129,19 @@ class ProfileInfoPanel extends ImmutablePureComponent {
</dl>
))}
{fields.map((pair, i) => (
<dl className='profile-info-panel-content__fields__item' key={i}>
<dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} />
{fields.map((pair, i) =>
isTicker(pair.get('name', '')) ? (
<CryptoAddress ticker={getTicker(pair.get('name')).toLowerCase()} address={pair.get('value_plain')} />
) : (
<dl className='profile-info-panel-content__fields__item' key={i}>
<dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} />
<dd className={pair.get('verified_at') && 'verified'} title={pair.get('value_plain')}>
{pair.get('verified_at') && <span title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(pair.get('verified_at'), dateFormatOptions) })}><Icon id='check' className='verified__mark' /></span>} <span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} />
</dd>
</dl>
))}
<dd className={pair.get('verified_at') && 'verified'} title={pair.get('value_plain')}>
{pair.get('verified_at') && <span title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(pair.get('verified_at'), dateFormatOptions) })}><Icon id='check' className='verified__mark' /></span>} <span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} />
</dd>
</dl>
),
)}
</div>
)}
</div>

Wyświetl plik

@ -61,3 +61,9 @@
border-radius: 8px;
padding-bottom: 13px;
}
.profile-info-panel-content__fields {
.crypto-address {
padding: 10px 0;
}
}