From 5166a71c270107861ab673595ba8e15ac4ef6922 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 11 Sep 2021 16:21:12 -0500
Subject: [PATCH] CryptoDonate: refactor CryptoIcon into its own component

---
 .../components/crypto_address.js              | 10 ++++---
 .../crypto_donate/components/crypto_icon.js   | 26 +++++++++++++++++++
 .../components/detailed_crypto_address.js     | 10 ++++---
 .../crypto_donate/utils/coin_icons.js         |  4 ---
 4 files changed, 38 insertions(+), 12 deletions(-)
 create mode 100644 app/soapbox/features/crypto_donate/components/crypto_icon.js
 delete mode 100644 app/soapbox/features/crypto_donate/utils/coin_icons.js

diff --git a/app/soapbox/features/crypto_donate/components/crypto_address.js b/app/soapbox/features/crypto_donate/components/crypto_address.js
index b2498101c..0eba72655 100644
--- a/app/soapbox/features/crypto_donate/components/crypto_address.js
+++ b/app/soapbox/features/crypto_donate/components/crypto_address.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import Icon from 'soapbox/components/icon';
 import CoinDB from '../utils/coin_db';
-import { getCoinIcon } from '../utils/coin_icons';
+import CryptoIcon from './crypto_icon';
 import { openModal } from 'soapbox/actions/modal';
 import { CopyableInput } from 'soapbox/features/forms';
 import { getExplorerUrl } from '../utils/block_explorer';
@@ -31,9 +31,11 @@ class CryptoAddress extends ImmutablePureComponent {
     return (
       <div className='crypto-address'>
         <div className='crypto-address__head'>
-          <div className='crypto-address__icon'>
-            <img src={getCoinIcon(ticker)} alt={title} />
-          </div>
+          <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}>
diff --git a/app/soapbox/features/crypto_donate/components/crypto_icon.js b/app/soapbox/features/crypto_donate/components/crypto_icon.js
new file mode 100644
index 000000000..401c78963
--- /dev/null
+++ b/app/soapbox/features/crypto_donate/components/crypto_icon.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export default class CryptoIcon extends React.PureComponent {
+
+  static propTypes = {
+    ticker: PropTypes.string.isRequired,
+    title: PropTypes.string,
+    className: PropTypes.string,
+  }
+
+  render() {
+    const { ticker, title, className } = this.props;
+
+    return (
+      <div className={classNames('crypto-icon', className)}>
+        <img
+          src={require(`cryptocurrency-icons/svg/color/${ticker.toLowerCase()}.svg`)}
+          alt={title || ticker}
+        />
+      </div>
+    );
+  }
+
+}
diff --git a/app/soapbox/features/crypto_donate/components/detailed_crypto_address.js b/app/soapbox/features/crypto_donate/components/detailed_crypto_address.js
index de5971d36..6b06dd597 100644
--- a/app/soapbox/features/crypto_donate/components/detailed_crypto_address.js
+++ b/app/soapbox/features/crypto_donate/components/detailed_crypto_address.js
@@ -5,7 +5,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import Icon from 'soapbox/components/icon';
 import QRCode from 'qrcode.react';
 import CoinDB from '../utils/coin_db';
-import { getCoinIcon } from '../utils/coin_icons';
+import CryptoIcon from './crypto_icon';
 import { CopyableInput } from 'soapbox/features/forms';
 import { getExplorerUrl } from '../utils/block_explorer';
 
@@ -26,9 +26,11 @@ class DetailedCryptoAddress extends ImmutablePureComponent {
     return (
       <div className='crypto-address'>
         <div className='crypto-address__head'>
-          <div className='crypto-address__icon'>
-            <img src={getCoinIcon(ticker)} alt={title} />
-          </div>
+          <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'>
diff --git a/app/soapbox/features/crypto_donate/utils/coin_icons.js b/app/soapbox/features/crypto_donate/utils/coin_icons.js
deleted file mode 100644
index 39fe39ded..000000000
--- a/app/soapbox/features/crypto_donate/utils/coin_icons.js
+++ /dev/null
@@ -1,4 +0,0 @@
-// For getting the icon
-export const getCoinIcon = ticker => {
-  return require(`cryptocurrency-icons/svg/color/${ticker.toLowerCase()}.svg`);
-};