From c62d402a4e0f8b4fd6adbe85f946bdc3eb1888fc Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 25 Mar 2022 16:27:37 -0500
Subject: [PATCH] DetailedCryptoAddress: convert to tsx

---
 .../components/detailed_crypto_address.js     | Bin 1680 -> 0 bytes
 .../components/detailed_crypto_address.tsx    |  53 ++++++++++++++++++
 package.json                                  |   1 +
 yarn.lock                                     |   7 +++
 4 files changed, 61 insertions(+)
 delete mode 100644 app/soapbox/features/crypto_donate/components/detailed_crypto_address.js
 create mode 100644 app/soapbox/features/crypto_donate/components/detailed_crypto_address.tsx

diff --git a/app/soapbox/features/crypto_donate/components/detailed_crypto_address.js b/app/soapbox/features/crypto_donate/components/detailed_crypto_address.js
deleted file mode 100644
index 40df4909d4a38d39b70611a242cc0201dc29cad2..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1680
zcmb7FO>f&U487-9@Kh&2W8c@f*p}{)%g`0;X&4N}W?CVN<Vtdo!u5Y2Wy$f!KGK~G
zNso_@d<?@6rP3DewJN{AmS|w7)d8ZC&P(eqqMI4_m~RhjRbT+T=$sC*MwZ(i^5BjE
zF?re?4wYqFf%lchwIWK1a)e#-4zer>v&=gX@pl?Fxsrk3C{}LODLKPT!s)daQ^Q)7
zuP)_AmX(EO61YQVDUV5ZN*`REU6LA}(0)0ULTS{GTAU-}IH@cbCfN#=?=uXLKIK|*
zdG|TwIiqvB&5G?H!&<+VRt<`Ylf1pkLJ2eCcD@w2W0kOw3uX-5p=DfP;ln=_1*tcH
zCyTN$@RttPvl)P~%<>$Zt={GoYPtqsp5#M60kN@~%cq!|2Yjix#^Sm~Qv4qEJAhJI
z{2k^<8Ye}QSk&`H5I~k03w0;t8hoB>a5U8U6znrMu~TktS|L8dax0KteamBVY$NAC
zy5LB%14cg=!-&o<=V&^yc-{queo$bWOCyblgn4@aSQY%}z4%J}Y2-~?hM?#+z%Bu^
z>={`xfKxy}5@!<UPiy?2l4X8WMqpn=TKjJ^d82;0C;ALul3w&>*==-m>sjFKEtnNs
z^;nju*UaF2(X0|`)Bn)Y(%>`(qlN&~L&L7FV8!5B<1QWEH(;42@6#yT3MTgx3aY66
zkr|z*wf5sYk3P10NVn_4FAbBpACZ<!ECrYQ*c_jtMFXSW5Ld!(hpn5`IXTwt06X3P
z9GWb1IO?hUgx2**F2(vaJgRyX_Vkg7iVP34IVxtN^iq;Q0fznv1ZHksjx&z;?0XXr
MRJ6ZS+78X^7vBmUIRF3v

diff --git a/app/soapbox/features/crypto_donate/components/detailed_crypto_address.tsx b/app/soapbox/features/crypto_donate/components/detailed_crypto_address.tsx
new file mode 100644
index 0000000000..7d58d4e330
--- /dev/null
+++ b/app/soapbox/features/crypto_donate/components/detailed_crypto_address.tsx
@@ -0,0 +1,53 @@
+import QRCode from 'qrcode.react';
+import React from 'react';
+
+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';
+
+interface IDetailedCryptoAddress {
+  address: string,
+  ticker: string,
+  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);
+
+  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'>
+          {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__qrcode'>
+        <QRCode value={address} />
+      </div>
+      <div className='crypto-address__address simple_form'>
+        <CopyableInput value={address} />
+      </div>
+    </div>
+  );
+};
+
+export default DetailedCryptoAddress;
diff --git a/package.json b/package.json
index 42bc832591..ff9568cd7c 100644
--- a/package.json
+++ b/package.json
@@ -70,6 +70,7 @@
     "@types/escape-html": "^1.0.1",
     "@types/http-link-header": "^1.0.3",
     "@types/lodash": "^4.14.180",
+    "@types/qrcode.react": "^1.0.2",
     "@types/react-helmet": "^6.1.5",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-toggle": "^4.0.3",
diff --git a/yarn.lock b/yarn.lock
index 146c677b17..4c7708e0ce 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2095,6 +2095,13 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.5.tgz#75a2a8e7d8ab4b230414505d92335d1dcb53a6df"
   integrity sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==
 
+"@types/qrcode.react@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@types/qrcode.react/-/qrcode.react-1.0.2.tgz#f892432cc41b5dac52e3ca8873b717c8bfea6002"
+  integrity sha512-I9Oq5Cjlkgy3Tw7krCnCXLw2/zMhizkTere49OOcta23tkvH0xBTP0yInimTh0gstLRtb8Ki9NZVujE5UI6ffQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-helmet@^6.1.5":
   version "6.1.5"
   resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.1.5.tgz#35f89a6b1646ee2bc342a33a9a6c8777933f9083"