From 3d2e4dd89ac0771faba76465eff2ae3782535a65 Mon Sep 17 00:00:00 2001
From: Tom Kirkpatrick <tkp@kirkdesigns.co.uk>
Date: Sun, 15 Jul 2018 22:58:39 +0200
Subject: [PATCH] feat(ui): show activity type icon in activity list

Add an icon that shows the activity type in the activity list to help
users clearly distinguish between on-chain and off-chain transactions.
---
 app/routes/activity/components/components/Activity.scss  | 9 +++++----
 .../activity/components/components/Invoice/Invoice.js    | 9 +++++++--
 .../activity/components/components/Payment/Payment.js    | 8 ++++++++
 .../components/components/Transaction/Transaction.js     | 8 ++++++++
 4 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/app/routes/activity/components/components/Activity.scss b/app/routes/activity/components/components/Activity.scss
index ee79329f..d118ec02 100644
--- a/app/routes/activity/components/components/Activity.scss
+++ b/app/routes/activity/components/components/Activity.scss
@@ -16,14 +16,15 @@
     opacity: 0.5;
   }
 
-  .pendingIcon {
+  .activityTypeIcon {
     position: absolute;
     left: -5%;
-    top: 30%;
+    top: 37%;
 
     svg {
-      width: 10.5px;
-      height: 10.5px;
+      width: 16px;
+      height: 16px;
+      opacity: 0.5;
     }
   }
 }
diff --git a/app/routes/activity/components/components/Invoice/Invoice.js b/app/routes/activity/components/components/Invoice/Invoice.js
index 9e1b34a3..df29a0c5 100644
--- a/app/routes/activity/components/components/Invoice/Invoice.js
+++ b/app/routes/activity/components/components/Invoice/Invoice.js
@@ -14,8 +14,13 @@ const Invoice = ({ invoice, ticker, currentTicker, showActivityModal, currencyNa
     onClick={() => showActivityModal('INVOICE', { invoice })}
   >
     {!invoice.settled && (
-      <div className={styles.pendingIcon}>
-        <Isvg src={checkmarkIcon} />
+      <div className={styles.activityTypeIcon}>
+        <section
+          className="hint--bottom"
+          data-hint={`Lightning invoice${!invoice.settled ? ' (unpaid)' : undefined}`}
+        >
+          <Isvg src={checkmarkIcon} />
+        </section>
       </div>
     )}
 
diff --git a/app/routes/activity/components/components/Payment/Payment.js b/app/routes/activity/components/components/Payment/Payment.js
index 1e32098c..f4426d31 100644
--- a/app/routes/activity/components/components/Payment/Payment.js
+++ b/app/routes/activity/components/components/Payment/Payment.js
@@ -1,6 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Moment from 'react-moment'
+import Isvg from 'react-inlinesvg'
+import zap from 'icons/zap.svg'
 import { btc } from 'utils'
 
 import Value from 'components/Value'
@@ -19,6 +21,12 @@ const Payment = ({ payment, ticker, currentTicker, showActivityModal, nodes, cur
 
   return (
     <div className={styles.container} onClick={() => showActivityModal('PAYMENT', { payment })}>
+      <div className={styles.activityTypeIcon}>
+        <section className="hint--bottom" data-hint="Lightning payment">
+          <Isvg src={zap} />
+        </section>
+      </div>
+
       <div className={styles.data}>
         <div className={styles.title}>
           <h3>{displayNodeName(payment.path[payment.path.length - 1])}</h3>
diff --git a/app/routes/activity/components/components/Transaction/Transaction.js b/app/routes/activity/components/components/Transaction/Transaction.js
index ad090cc5..c2072151 100644
--- a/app/routes/activity/components/components/Transaction/Transaction.js
+++ b/app/routes/activity/components/components/Transaction/Transaction.js
@@ -1,6 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Moment from 'react-moment'
+import Isvg from 'react-inlinesvg'
+import link from 'icons/link.svg'
 import { btc } from 'utils'
 
 import Value from 'components/Value'
@@ -11,6 +13,12 @@ const Transaction = ({ transaction, ticker, currentTicker, showActivityModal, cu
     className={styles.container}
     onClick={() => showActivityModal('TRANSACTION', { transaction })}
   >
+    <div className={styles.activityTypeIcon}>
+      <section className="hint--bottom" data-hint="On-chain transaction">
+        <Isvg src={link} />
+      </section>
+    </div>
+
     <div className={styles.data}>
       <div className={styles.title}>
         <h3>{transaction.received ? 'Received' : 'Sent'}</h3>