From 350ce99a5830f700ee62ad8e48ada16e4f5181c7 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Tue, 19 Sep 2017 23:19:44 -0500
Subject: [PATCH] feature(transaction): style transaction activity in
 activities list

---
 app/routes/activity/components/Activity.js    |  32 +++--
 app/routes/activity/components/Activity.scss  |   4 +-
 .../components/Transaction/Transaction.js     |  54 ++++++++-
 .../components/Transaction/Transaction.scss   | 111 ++++++++++++++++++
 app/tooltip.scss                              |   2 +-
 5 files changed, 186 insertions(+), 17 deletions(-)

diff --git a/app/routes/activity/components/Activity.js b/app/routes/activity/components/Activity.js
index cd52d7b0..0ce06382 100644
--- a/app/routes/activity/components/Activity.js
+++ b/app/routes/activity/components/Activity.js
@@ -17,6 +17,8 @@ class Activity extends Component {
     this.state = {
       tab: 1
     }
+
+    this.renderActivity = this.renderActivity.bind(this)
   }
 
   componentWillMount() {
@@ -27,6 +29,21 @@ class Activity extends Component {
     fetchTransactions()
   }
 
+  renderActivity(activity) {
+    const { ticker, currentTicker } = this.props
+
+    if (activity.hasOwnProperty('block_hash')) {
+      // activity is an on-chain tx
+      return <Transaction transaction={activity} ticker={ticker} currentTicker={currentTicker} />
+    } else if (activity.hasOwnProperty('payment_request')) {
+      // activity is an LN invoice
+      return <Invoice invoice={activity} />
+    } else {
+      // activity is an LN payment
+      return <Payment payment={activity} />
+    }
+  }
+
   render() {
     const { tab } = this.state
     const {
@@ -77,16 +94,11 @@ class Activity extends Component {
           <ul className={styles.activityContainer}>
             {
               sortedActivity.map((activity, index) => {
-                if (activity.hasOwnProperty('block_hash')) {
-                  // activity is an on-chain tx
-                  return <Transaction transaction={activity} key={index} />
-                } else if (activity.hasOwnProperty('payment_request')) {
-                  // activity is an LN invoice
-                  return <Invoice invoice={activity} key={index} />
-                } else {
-                  // activity is an LN payment
-                  return <Payment payment={activity} key={index} />
-                }
+                return (
+                  <li className={styles.activity} key={index}>
+                    {this.renderActivity(activity)}
+                  </li>
+                )
               })
             }
           </ul>
diff --git a/app/routes/activity/components/Activity.scss b/app/routes/activity/components/Activity.scss
index 8846d58f..53eddf9e 100644
--- a/app/routes/activity/components/Activity.scss
+++ b/app/routes/activity/components/Activity.scss
@@ -76,9 +76,7 @@
 }
 
 .activity {
-	padding: 35px 10px;
-	border-bottom: 1px solid $grey;
-	font-size: 14px;
+	padding: 0 100px;
 
 	.left, .center, .right {
 		display: inline-block;
diff --git a/app/routes/activity/components/components/Transaction/Transaction.js b/app/routes/activity/components/components/Transaction/Transaction.js
index 5e1fb5eb..2a16f2dc 100644
--- a/app/routes/activity/components/components/Transaction/Transaction.js
+++ b/app/routes/activity/components/components/Transaction/Transaction.js
@@ -1,10 +1,58 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import Moment from 'react-moment'
+import 'moment-timezone'
+import { FaChain } from 'react-icons/lib/fa'
+import { btc } from '../../../../../utils'
+import CurrencyIcon from '../../../../../components/CurrencyIcon'
 import styles from './Transaction.scss'
 
-const Transaction = () => (
-  <div>
-    transaction
+const Transaction = ({ transaction, ticker, currentTicker }) => (
+  <div className={styles.container}>
+    <i className={`${styles.icon} hint--top`} data-hint='On-chain transaction'>
+      <FaChain />
+    </i>
+    <div className={styles.data}>
+      <div className={styles.title}>
+        {transaction.tx_hash}
+      </div>
+      <div className={styles.subtitle}>
+        {transaction.num_confirmations} confirmations
+      </div>
+    </div>
+    <div className={styles.date}>
+      <Moment format='MMM Do'>{transaction.time_stamp * 1000}</Moment>
+    </div>
+    <div className={`${styles.amount} ${transaction.amount < 0 ? styles.negative : styles.positive}`}>
+      <section>
+        <CurrencyIcon
+          currency={ticker.currency}
+          crypto={ticker.crypto}
+          styles={{ verticalAlign: 'top', width: '24px' }}
+        />
+      </section>
+      <section>
+        <span className='hint--top' data-hint='Transaction amount'>
+          {
+            ticker.currency === 'usd' ?
+              btc.satoshisToUsd(transaction.amount, currentTicker.price_usd)
+              :
+              btc.satoshisToBtc(transaction.amount)
+          }
+        </span>
+        <span className='hint--bottom' data-hint='Transaction fee'>
+          {
+            transaction.amount < 0 ?
+              ticker.currency === 'usd' ?
+                btc.satoshisToUsd(transaction.total_fees, currentTicker.price_usd)
+                :
+                btc.satoshisToBtc(transaction.total_fees)
+              :
+              null
+          }
+        </span>
+      </section>
+    </div>
   </div>
 )
 
diff --git a/app/routes/activity/components/components/Transaction/Transaction.scss b/app/routes/activity/components/components/Transaction/Transaction.scss
index e69de29b..5bf06196 100644
--- a/app/routes/activity/components/components/Transaction/Transaction.scss
+++ b/app/routes/activity/components/components/Transaction/Transaction.scss
@@ -0,0 +1,111 @@
+@import '../../../../../variables.scss';
+
+.container {
+  display: flex;
+  flex-direction: row;
+  cursor: pointer;
+  max-width: 960px;
+  margin: 0 auto;
+  height: 76px;
+  align-items: center;
+  border-bottom: 1px solid $grey;
+  font-size: 14px;
+  transition: background-color .1s linear;
+  transition-delay: .1s;
+  color: $darkestgrey;
+  position: relative;
+}
+
+.icon {
+  display: block;
+  margin-right: 20px;
+  flex: none;
+  position: relative;
+  width: 36px;
+  height: 36px;
+  border: 1px solid $darkestgrey;
+  border-radius: 50%;
+
+  svg {
+    color: $main;
+    font-size: 16px;
+    vertical-align: middle;
+    display: flex;
+    top: 0;
+    left: 50%;
+    height: 100%;
+    margin: 0 auto;
+  }
+}
+
+.data {
+  display: flex;
+  flex-direction: row;
+  flex: 6 0;
+
+  .title {
+    flex: 8 0;
+  }
+
+  .subtitle {
+    padding-left: 20px;
+    flex: 2 0;
+  }
+}
+
+.subtitle, .date {
+  text-align: center;
+}
+
+.date {
+  padding-left: 20px;
+  flex: 1 0;
+}
+
+.amount {
+  flex: 1 0;
+  padding-left: 20px;
+
+  &.negative {
+    font-weight: 200;
+  }
+
+  &.positive {
+    color: $main;
+    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;
+
+    &:nth-child(1) {
+      font-size: 14px;
+    }
+
+    &:nth-child(2) {
+      font-size: 10px;
+    }
+  }
+}
+
diff --git a/app/tooltip.scss b/app/tooltip.scss
index 65eb544c..6ca18e7a 100644
--- a/app/tooltip.scss
+++ b/app/tooltip.scss
@@ -130,4 +130,4 @@
 .hint--left:hover:before {
   -webkit-transform: translateX(-8px);
   transform: translateX(-8px);
-}
\ No newline at end of file
+}