refactor: add received prop to transaction

For more intuitive testing of tx direction

app/components/Activity/TransactionModal.js

@@ -31,15 +31,15 @@ const TransactionModal = ({
 }) => (
   <div className={styles.container}>
     <header className={styles.header}>
-      {transaction.amount < 0 ? (
+      {transaction.received ? (
         <section>
-          <Isvg src={paperPlane} />
+          <Isvg src={hand} />
-          <span>Sent</span>
+          <span>Received</span>
         </section>
       ) : (
         <section>
-          <Isvg src={hand} />
+          <Isvg src={paperPlane} />
-          <span>Received</span>
+          <span>Sent</span>
         </section>
       )}
       <section className={styles.details}>
@@ -65,8 +65,8 @@ const TransactionModal = ({
 
     <div className={styles.amount}>
       <h1>
-        <i className={`${styles.symbol} ${transaction.amount > 0 && styles.active}`}>
+        <i className={`${styles.symbol} ${transaction.received && styles.active}`}>
-          {transaction.amount > 0 ? '+' : '-'}
+          {transaction.received ? '+' : '-'}
         </i>
         <Value
           value={transaction.amount}

app/reducers/activity.js

@@ -228,7 +228,7 @@ const sentActivity = createSelector(
   transactionsSelector,
   paymentsSelector,
   (transactions, payments) =>
-    groupAll([...transactions.filter(transaction => transaction.amount < 0), ...payments])
+    groupAll([...transactions.filter(transaction => !transaction.received), ...payments])
 )
 
 const pendingActivity = createSelector(invoicesSelector, invoices =>

app/reducers/transaction.js

@@ -116,13 +116,15 @@ export const newTransaction = (event, { transaction }) => dispatch => {
 
   dispatch({ type: ADD_TRANSACTION, transaction })
 
+  transaction.received = transaction.amount > 0
+
   // HTML 5 desktop notification for the new transaction
-  const notifTitle =
+  const notifTitle = transaction.received
-    transaction.amount > 0 ? 'On-chain Transaction Received!' : 'On-chain Transaction Sent!'
+    ? 'On-chain Transaction Received!'
-  const notifBody =
+    : 'On-chain Transaction Sent!'
-    transaction.amount > 0
+  const notifBody = transaction.received
-      ? "Lucky you, you just received a new on-chain transaction. I'm jealous."
+    ? "Lucky you, you just received a new on-chain transaction. I'm jealous."
-      : "Hate to see 'em go but love to watch 'em leave. Your on-chain transaction successfully sent."
+    : "Hate to see 'em go but love to watch 'em leave. Your on-chain transaction successfully sent."
 
   showNotification(notifTitle, notifBody)
 

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

@@ -13,18 +13,16 @@ const Transaction = ({ transaction, ticker, currentTicker, showActivityModal, cu
   >
     <div className={styles.data}>
       <div className={styles.title}>
-        <h3>{transaction.amount > 0 ? 'Received' : 'Sent'}</h3>
+        <h3>{transaction.received ? 'Received' : 'Sent'}</h3>
       </div>
       <div className={styles.subtitle}>
         <Moment format="h:mm a">{transaction.time_stamp * 1000}</Moment>
       </div>
     </div>
-    <div
+    <div className={`${styles.amount} ${transaction.received ? styles.positive : styles.negative}`}>
-      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}>
+        <i className={transaction.received ? styles.plus : styles.minus}>
-          {transaction.amount > 0 ? '+' : '-'}
+          {transaction.received ? '+' : '-'}
         </i>
         <Value
           value={transaction.amount}