Merge pull request #12 from LN-Zap/fix/refactor-currency-icon

Fix/refactor currency icon

app/components/CurrencyIcon/CurrencyIcon.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { FaDollar } from 'react-icons/lib/fa'
+import CryptoIcon from '../CryptoIcon'
+
+const CurrencyIcon = ({ currency, crypto }) => (currency === 'usd' ?
+  <FaDollar />
+  :
+  <CryptoIcon currency={crypto} />)
+
+CurrencyIcon.propTypes = {
+  currency: PropTypes.string.isRequired,
+  crypto: PropTypes.string.isRequired
+}
+
+export default CurrencyIcon

app/components/CurrencyIcon/index.js

@@ -0,0 +1,3 @@
+import CurrencyIcon from './CurrencyIcon'
+
+export default CurrencyIcon

app/routes/app/components/components/Form/Form.js

@@ -1,8 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { FaDollar } from 'react-icons/lib/fa'
 import { MdClose } from 'react-icons/lib/md'
-import CryptoIcon from '../../../../../components/CryptoIcon'
+import CurrencyIcon from '../../../../../components/CurrencyIcon'
 import { btc } from '../../../../../utils'
 import styles from './Form.scss'
 
@@ -46,12 +45,7 @@ const Form = ({
         <div className={styles.content}>
           <section className={styles.amountContainer}>
             <label htmlFor='amount'>
-              {
+              <CurrencyIcon currency={currency} crypto={crypto} />
-                currency === 'usd' ?
-                  <FaDollar />
-                  :
-                  <CryptoIcon currency={crypto} />
-              }
             </label>
             <input
               type='text'

app/routes/app/components/components/Nav.js

@@ -5,6 +5,7 @@ import ReactSVG from 'react-svg'
 import { MdAccountBalanceWallet } from 'react-icons/lib/md'
 import { FaClockO, FaDollar } from 'react-icons/lib/fa'
 import CryptoIcon from '../../../../components/CryptoIcon'
+import CurrencyIcon from '../../../../components/CurrencyIcon'
 import { btc } from '../../../../utils'
 import styles from './Nav.scss'
 
@@ -28,7 +29,7 @@ const Nav = ({ ticker, balance, setCurrency, formClicked, currentTicker }) => (
       </li>
       <li className={`${styles.balance} ${styles.link}`}>
         <p data-hint='Wallet balance' className='hint--bottom-left'>
-          <span>{ticker.currency === 'usd' ? <FaDollar /> : <CryptoIcon currency={ticker.crypto} />}</span>
+          <span><CurrencyIcon currency={ticker.currency} crypto={ticker.crypto} /></span>
           <span>
             {
               ticker.currency === 'usd' ?
@@ -39,7 +40,7 @@ const Nav = ({ ticker, balance, setCurrency, formClicked, currentTicker }) => (
           </span>
         </p>
         <p data-hint='Channel balance' className='hint--bottom-left'>
-          <span>{ticker.currency === 'usd' ? <FaDollar /> : <CryptoIcon currency={ticker.crypto} />}</span>
+          <span><CurrencyIcon currency={ticker.currency} crypto={ticker.crypto} /></span>
           <span>
             {
               ticker.currency === 'usd' ?