CryptoAddress: convert to tsx

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

@@ -1,60 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { connect } 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 CoinDB from '../utils/coin_db';
-
-import CryptoIcon from './crypto_icon';
-
-export default @connect()
-class CryptoAddress extends ImmutablePureComponent {
-
-  static propTypes = {
-    address: PropTypes.string.isRequired,
-    ticker: PropTypes.string.isRequired,
-    note: PropTypes.string,
-  }
-
-  handleModalClick = e => {
-    this.props.dispatch(openModal('CRYPTO_DONATE', this.props));
-    e.preventDefault();
-  }
-
-  render() {
-    const { address, ticker, note } = this.props;
-    const title = CoinDB.getIn([ticker, 'name']);
-    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={this.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>
-    );
-  }
-
-}

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 : '';
+};