CryptoDonate: parse Profile Fields as CrypoAddresses

app/soapbox/features/crypto_donate/components/crypto_address.js

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

app/soapbox/features/crypto_donate/components/detailed_crypto_address.js

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

app/soapbox/features/forms/index.js

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

app/soapbox/features/ui/components/profile_info_panel.js

@@ -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')} />
-
-                  <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>
-              ))}
+              {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>
+                ),
+              )}
             </div>
           )}
         </div>

app/styles/components/crypto-donate.scss

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