diff --git a/app/soapbox/features/crypto_donate/components/crypto_address.js b/app/soapbox/features/crypto_donate/components/crypto_address.js
deleted file mode 100644
index d3115853ea..0000000000
Binary files a/app/soapbox/features/crypto_donate/components/crypto_address.js and /dev/null differ
diff --git a/app/soapbox/features/crypto_donate/components/crypto_address.tsx b/app/soapbox/features/crypto_donate/components/crypto_address.tsx
new file mode 100644
index 0000000000..d84962206c
--- /dev/null
+++ b/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;
diff --git a/app/soapbox/features/crypto_donate/components/detailed_crypto_address.tsx b/app/soapbox/features/crypto_donate/components/detailed_crypto_address.tsx
index 7d58d4e330..053ea16c7f 100644
--- a/app/soapbox/features/crypto_donate/components/detailed_crypto_address.tsx
+++ b/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);
diff --git a/app/soapbox/features/crypto_donate/components/site_wallet.tsx b/app/soapbox/features/crypto_donate/components/site_wallet.tsx
index 062f9f78dd..4814d8342c 100644
--- a/app/soapbox/features/crypto_donate/components/site_wallet.tsx
+++ b/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>
diff --git a/app/soapbox/features/crypto_donate/utils/coin_db.ts b/app/soapbox/features/crypto_donate/utils/coin_db.ts
index 3ca2d3a18c..582ace540b 100644
--- a/app/soapbox/features/crypto_donate/utils/coin_db.ts
+++ b/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 : '';
+};