feature(value): add value component and use it in activity feed

app/components/Value/Value.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { btc } from 'utils'
+
+const Value = ({ value, currency, currentTicker }) => {
+  const renderValue = () => {
+    if (currency === 'btc') {
+      return btc.satoshisToBtc(value)
+    }
+
+    return 'gang'
+  }
+
+  return (
+    <i>{renderValue()}</i>
+  )
+}
+
+Value.propTypes = {
+  
+}
+
+export default Value

app/components/Value/index.js

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

app/routes/activity/components/components/Invoice/Invoice.js

@@ -5,6 +5,7 @@ import 'moment-timezone'
 import Isvg from 'react-inlinesvg'
 import { FaBolt } from 'react-icons/lib/fa'
 import { btc } from 'utils'
+import Value from 'components/Value'
 import checkmarkIcon from 'icons/check_circle.svg'
 import clockIcon from 'icons/clock.svg'
 import styles from '../Activity.scss'
@@ -47,20 +48,18 @@ const Invoice = ({
     <div className={`${styles.amount} ${invoice.settled ? styles.positive : styles.negative}`}>
       <span className='hint--top' data-hint='Invoice amount'>
         <i className={styles.plus}>+</i>
-        {
+        <Value
-          ticker.currency === 'usd' ?
+          value={invoice.value}
-            btc.satoshisToUsd(invoice.value, currentTicker.price_usd)
+          currency={ticker.currency}
-            :
+          currentTicker={currentTicker}
-            btc.satoshisToBtc(invoice.value)
+        />
-        }
       </span>
       <span className='hint--bottom' data-hint='Invoice fee'>
-        {
+        <Value
-          ticker.currency === 'usd' ?
+          value={invoice.fee}
-            btc.satoshisToUsd(invoice.fee, currentTicker.price_usd)
+          currency={ticker.currency}
-            :
+          currentTicker={currentTicker}
-            btc.satoshisToBtc(invoice.fee)
+        />
-        }
       </span>
     </div>
   </div>

app/routes/activity/components/components/Payment/Payment.js

@@ -5,6 +5,7 @@ import 'moment-timezone'
 import Isvg from 'react-inlinesvg'
 import { FaBolt } from 'react-icons/lib/fa'
 import { btc } from 'utils'
+import Value from 'components/Value'
 import checkmarkIcon from 'icons/check_circle.svg'
 import styles from '../Activity.scss'
 
@@ -39,20 +40,18 @@ const Payment = ({
     <div className={styles.amount}>
       <span className='hint--top' data-hint='Payment amount'>
         <i className={styles.minus}>-</i>
-        {
+        <Value
-          ticker.currency === 'usd' ?
+          value={payment.value}
-            btc.satoshisToUsd(payment.value, currentTicker.price_usd)
+          currency={ticker.currency}
-            :
+          currentTicker={currentTicker}
-            btc.satoshisToBtc(payment.value)
+        />
-        }
       </span>
       <span className='hint--bottom' data-hint='Payment fee'>
-        {
+        <Value
-          ticker.currency === 'usd' ?
+          value={payment.fee}
-            btc.satoshisToUsd(payment.fee, currentTicker.price_usd)
+          currency={ticker.currency}
-            :
+          currentTicker={currentTicker}
-            btc.satoshisToBtc(payment.fee)
+        />
-        }
       </span>
     </div>
   </div>

app/routes/activity/components/components/Transaction/Transaction.js

@@ -5,6 +5,7 @@ import 'moment-timezone'
 import Isvg from 'react-inlinesvg'
 import { FaChain } from 'react-icons/lib/fa'
 import { btc } from 'utils'
+import Value from 'components/Value'
 import checkmarkIcon from 'icons/check_circle.svg'
 import styles from '../Activity.scss'
 
@@ -39,20 +40,18 @@ const Transaction = ({
     <div className={`${styles.amount} ${transaction.amount > 0 ? styles.positive : styles.negative}`}>
       <span className='hint--top' data-hint='Transaction amount'>
         <i className={transaction.amount > 0 ? styles.plus : styles.minus}>{ transaction.amount > 0 ? '+' : '-' }</i>
-        {
+        <Value
-          ticker.currency === 'usd' ?
+          value={transaction.amount}
-            btc.satoshisToUsd(transaction.amount, currentTicker.price_usd)
+          currency={ticker.currency}
-            :
+          currentTicker={currentTicker}
-            btc.satoshisToBtc(transaction.amount)
+        />
-        }
       </span>
       <span className='hint--bottom' data-hint='Transaction fee'>
-        {
+        <Value
-          ticker.currency === 'usd' ?
+          value={transaction.total_fees}
-            btc.satoshisToUsd(transaction.total_fees, currentTicker.price_usd)
+          currency={ticker.currency}
-            :
+          currentTicker={currentTicker}
-            btc.satoshisToBtc(transaction.total_fees)
+        />
-        }
       </span>
     </div>
   </div>

app/routes/activity/components/components/Transaction/Transaction.scss

@@ -75,27 +75,6 @@
     font-weight: 500;
   }
 
-  section {
-    display: inline-block;
-    vertical-align: top;
-    text-align: right;
-    font-size: 0;
-    margin: 0;
-    padding: 0;
-
-    &:nth-child(1) {
-      width: 20%;
-    }
-
-    &:nth-child(2) {
-      width: 80%;
-    }
-  }
-
-  svg {
-    font-size: 20px;
-  }
-
   span {
     display: block;
 
@@ -106,6 +85,10 @@
     &:nth-child(2) {
       font-size: 10px;
     }
+
+    .value {
+      font-size: 14px;
+    }
   }
 }