CryptoAddress: convert to tsx

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+
+import { openModal } from 'soapbox/actions/modals';
+import Icon from 'soapbox/components/icon';
+import { CopyableInput } from 'soapbox/features/forms';
+
+import { getExplorerUrl } from '../utils/block_explorer';
+import { getTitle } from '../utils/coin_db';
+
+import CryptoIcon from './crypto_icon';
+
+interface ICryptoAddress {
+  address: string,
+  ticker: string,
+  note?: string,
+}
+
+const CryptoAddress: React.FC<ICryptoAddress> = (props): JSX.Element => {
+  const { address, ticker, note } = props;
+
+  const dispatch = useDispatch();
+
+  const handleModalClick = (e: React.MouseEvent<HTMLElement>): void => {
+    dispatch(openModal('CRYPTO_DONATE', props));
+    e.preventDefault();
+  };
+
+  const title = getTitle(ticker);
+  const explorerUrl = getExplorerUrl(ticker, address);
+
+  return (
+    <div className='crypto-address'>
+      <div className='crypto-address__head'>
+        <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={handleModalClick}>
+            <Icon src={require('@tabler/icons/icons/qrcode.svg')} />
+          </a>
+          {explorerUrl && <a href={explorerUrl} target='_blank'>
+            <Icon src={require('@tabler/icons/icons/external-link.svg')} />
+          </a>}
+        </div>
+      </div>
+      {note && <div className='crypto-address__note'>{note}</div>}
+      <div className='crypto-address__address simple_form'>
+        <CopyableInput value={address} />
+      </div>
+    </div>
+  );
+};
+
+export default CryptoAddress;

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

@@ -5,7 +5,7 @@ import Icon from 'soapbox/components/icon';
 import { CopyableInput } from 'soapbox/features/forms';
 
 import { getExplorerUrl } from '../utils/block_explorer';
-import CoinDB from '../utils/coin_db';
+import { getTitle } from '../utils/coin_db';
 
 import CryptoIcon from './crypto_icon';
 
@@ -15,11 +15,6 @@ interface IDetailedCryptoAddress {
   note?: string,
 }
 
-const getTitle = (ticker: string): string => {
-  const title = CoinDB.getIn([ticker, 'name']);
-  return typeof title === 'string' ? title : '';
-};
-
 const DetailedCryptoAddress: React.FC<IDetailedCryptoAddress> = ({ address, ticker, note }): JSX.Element => {
   const title = getTitle(ticker);
   const explorerUrl = getExplorerUrl(ticker, address);

app/soapbox/features/crypto_donate/components/site_wallet.tsx

@@ -32,7 +32,9 @@ const SiteWallet: React.FC<ISiteWallet> = ({ limit }): JSX.Element => {
       {coinList.map(coin => (
         <CryptoAddress
           key={coin.get('ticker')}
-          {...coin.toJS()}
+          address={coin.get('address')}
+          ticker={coin.get('ticker')}
+          note={coin.get('note')}
         />
       ))}
     </div>

app/soapbox/features/crypto_donate/utils/coin_db.ts

@@ -5,3 +5,9 @@ import manifestMap from './manifest_map';
 // All this does is converts the result from manifest_map.js into an ImmutableMap
 const coinDB = fromJS(manifestMap);
 export default coinDB;
+
+/** Get title from CoinDB based on ticker symbol */
+export const getTitle = (ticker: string): string => {
+  const title = coinDB.getIn([ticker, 'name']);
+  return typeof title === 'string' ? title : '';
+};