fix(icon/currency-conversion): replace btc logic with general crypto logic for payments/invoices

app/components/CryptoIcon/CryptoIcon.js

@@ -4,12 +4,12 @@ import path from 'path'
 import { FaBitcoin } from 'react-icons/lib/fa'
 import Isvg from 'react-inlinesvg'
 
-const CryptoIcon = ({ currency }) => {
+const CryptoIcon = ({ currency, styles }) => {
   switch (currency) {
     case 'btc':
-      return <FaBitcoin />
+      return <FaBitcoin style={styles} />
     case 'ltc':
-      return <Isvg src={path.join(__dirname, '..', 'resources/litecoin.svg')} />
+      return <Isvg style={styles} src={path.join(__dirname, '..', 'resources/litecoin.svg')} />
     default:
       return <span />
   }

app/components/CurrencyIcon/CurrencyIcon.js

@@ -3,14 +3,15 @@ import PropTypes from 'prop-types'
 import { FaDollar } from 'react-icons/lib/fa'
 import CryptoIcon from '../CryptoIcon'
 
-const CurrencyIcon = ({ currency, crypto }) => (currency === 'usd' ?
-  <FaDollar />
+const CurrencyIcon = ({ currency, crypto, styles }) => (currency === 'usd' ?
+  <FaDollar style={styles} />
   :
-  <CryptoIcon currency={crypto} />)
+  <CryptoIcon styles={styles} currency={crypto} />)
 
 CurrencyIcon.propTypes = {
   currency: PropTypes.string.isRequired,
-  crypto: PropTypes.string.isRequired
+  crypto: PropTypes.string.isRequired,
+  styles: PropTypes.object
 }
 
 export default CurrencyIcon

app/routes/activity/components/components/Invoices.js

@@ -6,6 +6,7 @@ import { FaBitcoin, FaDollar } from 'react-icons/lib/fa'
 import { MdCheck } from 'react-icons/lib/md'
 import QRCode from 'qrcode.react'
 import Modal from './Modal'
+import CurrencyIcon from '../../../../components/CurrencyIcon'
 import { btc } from '../../../../utils'
 import styles from './Invoices.scss'
 
@@ -24,18 +25,13 @@ const Invoices = ({
           <div className={styles.invoiceModal}>
             <h3>{invoice.memo}</h3>
             <h1>
-              {
-                ticker.currency === 'btc' ?
-                  <FaBitcoin style={{ verticalAlign: 'top' }} />
-                  :
-                  <FaDollar style={{ verticalAlign: 'top' }} />
-              }
+              <CurrencyIcon currency={ticker.currency} crypto={ticker.crypto} styles={{ verticalAlign: 'top' }} />
               <span className={styles.value}>
                 {
-                  ticker.currency === 'btc' ?
-                    btc.satoshisToBtc(invoice.value)
-                    :
+                  ticker.currency === 'usd' ?
                     btc.satoshisToUsd(invoice.value, currentTicker.price_usd)
+                    :
+                    btc.satoshisToBtc(invoice.value)
                 }
               </span>
             </h1>
@@ -89,10 +85,10 @@ const Invoices = ({
             <div className={styles.right}>
               <div className={invoiceItem.settled ? styles.settled : null}>
                 {
-                  ticker.currency === 'btc' ?
-                    btc.satoshisToBtc(invoiceItem.value)
-                    :
+                  ticker.currency === 'usd' ?
                     btc.satoshisToUsd(invoiceItem.value, currentTicker.price_usd)
+                    :
+                    btc.satoshisToBtc(invoiceItem.value)
                 }
               </div>
             </div>

app/routes/activity/components/components/Invoices.scss

@@ -17,7 +17,18 @@
 		margin: 20px 20px 60px 0;
 
 		svg {
-			font-size: 20px;
+			font-size: 30px;
+			vertical-align: top;
+		}
+
+		span svg[data-icon='ltc'] {
+			width: 30px;
+			height: 30px;
+			vertical-align: top;
+
+			g {
+				transform: scale(1.75) translate(-5px, -5px);
+			}
 		}
 
 		.value {

app/routes/activity/components/components/Payments.js

@@ -4,6 +4,7 @@ import Moment from 'react-moment'
 import 'moment-timezone'
 import { FaBitcoin, FaDollar } from 'react-icons/lib/fa'
 import Modal from './Modal'
+import CurrencyIcon from '../../../../components/CurrencyIcon'
 import { btc } from '../../../../utils'
 import styles from './Payments.scss'
 
@@ -22,18 +23,13 @@ const Payments = ({
           <div className={styles.paymentModal}>
             <h3>{payment.payment_hash}</h3>
             <h1>
-              {
-                ticker.currency === 'btc' ?
-                  <FaBitcoin style={{ verticalAlign: 'top' }} />
-                  :
-                  <FaDollar style={{ verticalAlign: 'top' }} />
-              }
+              <CurrencyIcon currency={ticker.currency} crypto={ticker.crypto} styles={{ verticalAlign: 'top' }} />
               <span className={styles.value}>
                 {
-                  ticker.currency === 'btc' ?
-                    btc.satoshisToBtc(payment.value)
-                    :
+                  ticker.currency === 'usd' ?
                     btc.satoshisToUsd(payment.value, currentTicker.price_usd)
+                    :
+                    btc.satoshisToBtc(payment.value)
                 }
               </span>
             </h1>
@@ -79,10 +75,10 @@ const Payments = ({
             <div className={styles.right}>
               <span className={styles.fee}>
                 {
-                  ticker.currency === 'btc' ?
-                    btc.satoshisToBtc(paymentItem.fee)
-                    :
+                  ticker.currency === 'usd' ?
                     btc.satoshisToUsd(paymentItem.fee, currentTicker.price_usd)
+                    :
+                    btc.satoshisToBtc(paymentItem.fee)
                 }
               </span>
             </div>

app/routes/activity/components/components/Payments.scss

@@ -10,6 +10,17 @@
 
 		svg {
 			font-size: 30px;
+			vertical-align: top;
+		}
+
+		span svg[data-icon='ltc'] {
+			width: 30px;
+			height: 30px;
+			vertical-align: top;
+
+			g {
+				transform: scale(1.75) translate(-5px, -5px);
+			}
 		}
 
 		.value {