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

@@ -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;
     }
   }
 }

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>
     )}
 

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>

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>