From 18323cdc75834e9e8c47d96fda16302c7be43907 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 25 Mar 2022 16:55:48 -0500
Subject: [PATCH] CryptoAddress: convert to tsx

---
 .../components/crypto_address.js              | Bin 1904 -> 0 bytes
 .../components/crypto_address.tsx             |  58 ++++++++++++++++++
 .../components/detailed_crypto_address.tsx    |   7 +--
 .../crypto_donate/components/site_wallet.tsx  |   4 +-
 .../features/crypto_donate/utils/coin_db.ts   |   6 ++
 5 files changed, 68 insertions(+), 7 deletions(-)
 delete mode 100644 app/soapbox/features/crypto_donate/components/crypto_address.js
 create mode 100644 app/soapbox/features/crypto_donate/components/crypto_address.tsx

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 d3115853eaa7312005a864b70cf9d2db5cd332e2..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1904
zcmb7F%Wm5+5WM><_EgD0EZrL`Nb2O^Lz5s#4n<K2v_!{*X;L96!-1lI@A4r_a*;<*
zGRfK5+1(+{c9m2H?v<<_Un{C%t>g}(3fD7ZH=^?i^Oy%p3KPzi{oNlece~n<6{q*L
zq6>+5LB$9=V;y8xA!b%|pq`|GLJC1KM?1_iQ?#rP2<vn-AS)_<%98LSQcF^;<RL{>
zObVUu?CC)J5~%}e2R$m#DZ|sDj)kmVZ8b|#)xDZ7a7~H95_GzjYG-rw!k($QIaFLK
zs-9G@E=khbFs{=Tm&G=x0n(>jNG7g-1c66%fxCIR8e~|g*UHF2F-cmutvr-4L2f(G
zlCDY34P1tn#?wi`iPqp5uF4V%&_EA{ic-Tn^J^v(0Bwk21z1OThh)&;HURM?-+S{U
z+9)QT6Q&>NOU-a_XAX(+TdKYQ6w=UtVV0z|QZ_`CoVv*`IC4S;6tat;$84BRtW2Gh
zOjpDdoA~III9fdXx_`XOukUWJ9&e&E=;71pxsypTn(ooK*S>qP+jp52wu!2E8d70b
zwSlH<0g|~2&%hRdrpyNHp4&$lW;iMaKko$XvJ~;}E;tfoN25PMjgRQOV(pZ{*k5rM
z7$$*%t`0@fp8{gH0GO9-4{rLm$e%^tF|!a9T?E)?z&zhjQV!r4(EIU7Vx94BvfTT0
z1olN_jsLbMXV@=$grDI_+Kc{Nwu_D~JPW+Ng<&N|K2;S}3!-T}ZRaVr>3?X$Q!{D^
ziXpI3be%;JNa0M1@~tsXz1t3R*{03iwbrW08s%?K99_CcRk;VsKT|q=QH3mNqW90y
zw1rV8kR&Bz-ezc^Z{LpkhWjlTqR?7dl&?4u+mn*MF3mnCN)SHdOl&_;I2`3k-%pl}
zyHHm5hbGQ*i^Cb)PZ(vN<g?gt6F}o19jCc{)<-RvkN*$$gx6@w5H%XXNc~{ZJtXbq
EFDdF|LI3~&

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