From 9463062912de37e679c72f04d86e4e8ee2aee031 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Tue, 20 Feb 2018 13:46:57 -0600
Subject: [PATCH] feature(value): add value component and use it in activity
 feed

---
 app/components/Value/Value.js                 | 23 +++++++++++++++++
 app/components/Value/Value.scss               |  0
 app/components/Value/index.js                 |  3 +++
 .../components/components/Invoice/Invoice.js  | 23 ++++++++---------
 .../components/components/Payment/Payment.js  | 23 ++++++++---------
 .../components/Transaction/Transaction.js     | 23 ++++++++---------
 .../components/Transaction/Transaction.scss   | 25 +++----------------
 7 files changed, 63 insertions(+), 57 deletions(-)
 create mode 100644 app/components/Value/Value.js
 create mode 100644 app/components/Value/Value.scss
 create mode 100644 app/components/Value/index.js

diff --git a/app/components/Value/Value.js b/app/components/Value/Value.js
new file mode 100644
index 00000000..180168f0
--- /dev/null
+++ b/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
diff --git a/app/components/Value/Value.scss b/app/components/Value/Value.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/Value/index.js b/app/components/Value/index.js
new file mode 100644
index 00000000..bc42655d
--- /dev/null
+++ b/app/components/Value/index.js
@@ -0,0 +1,3 @@
+import Value from './Value'
+
+export default Value
\ No newline at end of file
diff --git a/app/routes/activity/components/components/Invoice/Invoice.js b/app/routes/activity/components/components/Invoice/Invoice.js
index 42e5cd06..b356837f 100644
--- a/app/routes/activity/components/components/Invoice/Invoice.js
+++ b/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>
-        {
-          ticker.currency === 'usd' ?
-            btc.satoshisToUsd(invoice.value, currentTicker.price_usd)
-            :
-            btc.satoshisToBtc(invoice.value)
-        }
+        <Value
+          value={invoice.value}
+          currency={ticker.currency}
+          currentTicker={currentTicker}
+        />
       </span>
       <span className='hint--bottom' data-hint='Invoice fee'>
-        {
-          ticker.currency === 'usd' ?
-            btc.satoshisToUsd(invoice.fee, currentTicker.price_usd)
-            :
-            btc.satoshisToBtc(invoice.fee)
-        }
+        <Value
+          value={invoice.fee}
+          currency={ticker.currency}
+          currentTicker={currentTicker}
+        />
       </span>
     </div>
   </div>
diff --git a/app/routes/activity/components/components/Payment/Payment.js b/app/routes/activity/components/components/Payment/Payment.js
index 2b97e060..f27ed7bb 100644
--- a/app/routes/activity/components/components/Payment/Payment.js
+++ b/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>
-        {
-          ticker.currency === 'usd' ?
-            btc.satoshisToUsd(payment.value, currentTicker.price_usd)
-            :
-            btc.satoshisToBtc(payment.value)
-        }
+        <Value
+          value={payment.value}
+          currency={ticker.currency}
+          currentTicker={currentTicker}
+        />
       </span>
       <span className='hint--bottom' data-hint='Payment fee'>
-        {
-          ticker.currency === 'usd' ?
-            btc.satoshisToUsd(payment.fee, currentTicker.price_usd)
-            :
-            btc.satoshisToBtc(payment.fee)
-        }
+        <Value
+          value={payment.fee}
+          currency={ticker.currency}
+          currentTicker={currentTicker}
+        />
       </span>
     </div>
   </div>
diff --git a/app/routes/activity/components/components/Transaction/Transaction.js b/app/routes/activity/components/components/Transaction/Transaction.js
index 1660946f..d3594d4e 100644
--- a/app/routes/activity/components/components/Transaction/Transaction.js
+++ b/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>
-        {
-          ticker.currency === 'usd' ?
-            btc.satoshisToUsd(transaction.amount, currentTicker.price_usd)
-            :
-            btc.satoshisToBtc(transaction.amount)
-        }
+        <Value
+          value={transaction.amount}
+          currency={ticker.currency}
+          currentTicker={currentTicker}
+        />
       </span>
       <span className='hint--bottom' data-hint='Transaction fee'>
-        {
-          ticker.currency === 'usd' ?
-            btc.satoshisToUsd(transaction.total_fees, currentTicker.price_usd)
-            :
-            btc.satoshisToBtc(transaction.total_fees)
-        }
+        <Value
+          value={transaction.total_fees}
+          currency={ticker.currency}
+          currentTicker={currentTicker}
+        />
       </span>
     </div>
   </div>
diff --git a/app/routes/activity/components/components/Transaction/Transaction.scss b/app/routes/activity/components/components/Transaction/Transaction.scss
index 5bf06196..37e30d6c 100644
--- a/app/routes/activity/components/components/Transaction/Transaction.scss
+++ b/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;
+    }
   }
 }