Merge pull request #89 from LN-Zap/fix/activity-modals

Fix/activity modals

.gitignore

@@ -50,3 +50,6 @@ main.js.map
 
 .idea
 npm-debug.log.*
+
+# lnd binary
+resources/bin/*

app/routes/activity/components/components/Modal/Invoice/Invoice.js

@@ -7,6 +7,7 @@ import 'moment-timezone'
 import QRCode from 'qrcode.react'
 
 import { MdCheck } from 'react-icons/lib/md'
+import { FaCircle } from 'react-icons/lib/fa'
 
 import CurrencyIcon from 'components/CurrencyIcon'
 import { btc } from 'utils'
@@ -16,20 +17,33 @@ import styles from './Invoice.scss'
 
 const Invoice = ({ invoice, ticker, currentTicker }) => (
   <div className={styles.container}>
-    <h3>{invoice.memo}</h3>
-    <h1>
-      <CurrencyIcon currency={ticker.currency} crypto={ticker.crypto} styles={{ verticalAlign: 'top' }} />
-      <span className={styles.value}>
-        {
-          ticker.currency === 'usd' ?
-            btc.satoshisToUsd(invoice.value, currentTicker.price_usd)
-            :
-            btc.satoshisToBtc(invoice.value)
-        }
-      </span>
-    </h1>
+    <div className={styles.settled}>
+      {
+        !invoice.settled &&
+          <p>
+            <FaCircle />
+            <span>Not Paid</span>
+          </p>
+      }
+    </div>
+    <header>
+      <h3>{invoice.memo}</h3>
+      <h1>
+        <span className={styles.value}>
+          {
+            ticker.currency === 'usd' ?
+              btc.satoshisToUsd(invoice.value, currentTicker.price_usd)
+              :
+              btc.satoshisToBtc(invoice.value)
+          }
+        </span>
+        <i>BTC</i>
+      </h1>
+    </header>
     <div className={styles.qrcode}>
-      <QRCode value={invoice.payment_request} size={200} />
+      <QRCode value={invoice.payment_request} size={150} />
+    </div>
+    <div className={styles.input}>
       <input
         readOnly
         className={styles.paymentRequest}
@@ -37,14 +51,6 @@ const Invoice = ({ invoice, ticker, currentTicker }) => (
         defaultValue={invoice.payment_request}
       />
     </div>
-    <div className={styles.settled}>
-      {
-        invoice.settled ?
-          <p><MdCheck style={{ verticalAlign: 'top' }} /> Paid</p>
-          :
-          <p>Not Paid</p>
-      }
-    </div>
     <p className={styles.date}>
       Created on
       <Moment format='MMM Do'>{invoice.creation_date * 1000}</Moment>

app/routes/activity/components/components/Modal/Invoice/Invoice.scss

@@ -1,72 +1,75 @@
 @import '../../../../../../variables.scss';
 
 .container {
-  padding: 40px;
+  .settled {
+    position: absolute;
+    top: 0;
+    padding: 10px 0 10px 40px;
+    color: $darkestgrey;
+
+    svg {
+      line-height: 20px;
+      font-size: 10px;
+      vertical-align: middle;
+    }
+
+    span {
+      font-size: 12px;
+      margin-left: 5px;
+    }
+  }
+
+  header {
+    background: $lightgrey;
+    padding-bottom: 20px;
+  }
 
   h3 {
-    font-size: 24px;
+    font-size: 20px;
     color: $black;
     font-weight: bold;
-    text-align: center;
-    margin-bottom: 10px;
+    padding: 10px 40px;
   }
 
   h1 {
-    text-align: center;
     color: $main;
-    margin: 20px 20px 60px 0;
+    padding: 10px 40px;
 
-    svg {
+    .value {
       font-size: 30px;
-      vertical-align: top;
     }
 
-    span svg[data-icon='ltc'] {
-      width: 30px;
-      height: 30px;
+    i {
+      margin-left: 2px;
       vertical-align: top;
-
-      g {
-        transform: scale(1.75) translate(-5px, -5px);
-      }
-    }
-
-    .value {
-      font-size: 60px;
     }
   }
 
   .qrcode {
     text-align: center;
+    margin-top: 40px;
+
+  }
+
+  .input {
+    padding: 10px 40px;
 
     .paymentRequest {
       text-align: center;
-      font-size: 0.5vw;
-      margin-top: 20px;
-      padding: 5px;
-      border-radius: 5px;
+      font-size: 12px;
+      padding: 15px;
       background: $lightgrey;
-      border: 1px solid $darkgrey;
+      border: 1px solid transparent;
       display: block;
-      width: 100%;
-    }
-  }
-
-  .settled {
-    text-align: center;
-    color: $main;
-    text-transform: uppercase;
-    font-size: 20px;
-    margin: 30px 0;
-    font-weight: bold;
-
-    svg {
-      line-height: 20px;
+      width: 90%;
+      margin: 20px auto 0 auto;
     }
   }
 
   .date {
     text-align: center;
+    padding-bottom: 40px;
+    margin-top: 20px;
 
     time {
       margin-left: 3px;

app/routes/activity/components/components/Modal/Modal.js

@@ -6,6 +6,10 @@ import Transaction from './Transaction'
 import Payment from './Payment'
 import Invoice from './Invoice'
 
+import { MdClose } from 'react-icons/lib/md'
+
+import styles from './Modal.scss'
+
 const Modal = ({ modalType, modalProps, hideActivityModal, ticker, currentTicker }) => {
   const MODAL_COMPONENTS = {
     TRANSACTION: Transaction,
@@ -23,7 +27,9 @@ const Modal = ({ modalType, modalProps, hideActivityModal, ticker, currentTicker
       right: '0',
       bottom: 'auto',
       width: '40%',
-      margin: '50px auto'
+      margin: '50px auto',
+      borderRadius: 'none',
+      padding: '0'
     }
   }
 
@@ -41,6 +47,11 @@ const Modal = ({ modalType, modalProps, hideActivityModal, ticker, currentTicker
       parentSelector={() => document.body}
       style={customStyles}
     >
+      <div className={styles.closeContainer}>
+        <span onClick={() => hideActivityModal()}>
+          <MdClose />
+        </span>
+      </div>
       <SpecificModal {...modalProps} ticker={ticker} currentTicker={currentTicker} />
     </ReactModal>
   )

app/routes/activity/components/components/Modal/Modal.scss

@@ -0,0 +1,13 @@
+@import '../../../../../variables.scss';
+
+.closeContainer {
+  background: $lightgrey;
+  text-align: right;
+  padding: 10px;
+
+  span {
+    color: $darkestgrey;
+    font-size: 20px;
+    cursor: pointer;
+  }
+}

app/routes/activity/components/components/Modal/Payment/Payment.js

@@ -12,21 +12,30 @@ import styles from './Payment.scss'
 
 const Payment = ({ payment, ticker, currentTicker }) => (
   <div className={styles.container}>
-    <h3>{payment.payment_hash}</h3>
-    <h1>
-      <CurrencyIcon currency={ticker.currency} crypto={ticker.crypto} styles={{ verticalAlign: 'top' }} />
-      <span className={styles.value}>
-        {
-          ticker.currency === 'usd' ?
-            btc.satoshisToUsd(payment.value, currentTicker.price_usd)
-            :
-            btc.satoshisToBtc(payment.value)
-        }
-      </span>
-    </h1>
+    <header>
+      <div className={styles.title}>
+        <h2>Sent</h2>
+        <h1>
+          <span className={styles.value}>
+            {
+              ticker.currency === 'usd' ?
+                btc.satoshisToUsd(payment.value, currentTicker.price_usd)
+                :
+                btc.satoshisToBtc(payment.value)
+            }
+          </span>
+          <i>
+            BTC
+          </i>
+        </h1>
+      </div>
+      <h3>{payment.payment_hash}</h3>
+    </header>
     <dl>
       <dt>Fee</dt>
       <dd>{payment.fee}</dd>
+      <dt>Hops</dt>
+      <dd>{payment.path.length}</dd>
       <dt>Date</dt>
       <dd>
         <Moment format='MMM Do'>{payment.creation_date * 1000}</Moment>

app/routes/activity/components/components/Modal/Payment/Payment.scss

@@ -1,38 +1,44 @@
 @import '../../../../../../variables.scss';
 
 .container {
-  padding: 40px;
+  header {
+    padding: 5px 40px 20px 40px;
+    background: $lightgrey;
+
+    .title {
+      display: flex;
+      flex-direction: row;
+      margin-bottom: 30px;
+
+      h2 {
+        text-transform: uppercase;
+        font-size: 24px;
+        margin-right: 10px;
+      }
+    }
+  }
 
   h1 {
-    text-align: center;
     color: $main;
-    margin: 60px 30px 60px 0;
 
-    svg {
-      font-size: 30px;
-      vertical-align: top;
+    .value {
+      font-size: 24px;
     }
 
-    span svg[data-icon='ltc'] {
-      width: 30px;
-      height: 30px;
+    i {
+      margin-left: 2px;
       vertical-align: top;
-
-      g {
-        transform: scale(1.75) translate(-5px, -5px);
-      }
-    }
-
-    .value {
-      font-size: 80px;
     }
   }
 
   h3 {
     font-size: 14px;
     text-align: center;
-    color: $black;
-    font-weight: bold;
+    color: $darkestgrey;
+  }
+
+  dl {
+    padding: 40px 40px 40px 40px;
   }
 
   dt {
@@ -48,8 +54,8 @@
   dd {
     text-align: right;
     font-weight: 400;
-    padding: 19px 0;
+    padding: 30px 0 10px 0;
     margin-left: 0;
-    border-top: 1px solid $darkgrey;
+    border-bottom: 1px solid $darkgrey;
   }
 }

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

@@ -1,3 +1,4 @@
+import { shell } from 'electron'
 import React from 'react'
 import PropTypes from 'prop-types'
 
@@ -12,31 +13,42 @@ import styles from './Transaction.scss'
 
 const Transaction = ({ transaction, ticker, currentTicker }) => (
   <div className={styles.container}>
-    <h2>
-      {
-        transaction.amount < 0 ?
-          'Sent'
-          :
-          'Received'
-      }
-    </h2>
-    <h3>{transaction.tx_hash}</h3>
-    <h1>
-      <CurrencyIcon currency={ticker.currency} crypto={ticker.crypto} styles={{ verticalAlign: 'top' }} />
-      <span className={styles.value}>
-        {
-          ticker.currency === 'usd' ?
-            btc.satoshisToUsd(transaction.amount, currentTicker.price_usd)
-            :
-            btc.satoshisToBtc(transaction.amount)
-        }
-      </span>
-    </h1>
+    <header>
+      <div className={styles.title}>
+        <h2>
+          {
+            transaction.amount < 0 ?
+              'Sent'
+              :
+              'Received'
+          }
+        </h2>
+        <h1>
+          <span className={styles.value}>
+            {
+              ticker.currency === 'usd' ?
+                btc.satoshisToUsd(transaction.amount, currentTicker.price_usd)
+                :
+                btc.satoshisToBtc(transaction.amount)
+            }
+          </span>
+          <i>BTC</i>
+        </h1>
+      </div>
+      <h3 onClick={() => shell.openExternal(`https://testnet.smartbit.com.au/tx/${transaction.tx_hash}`)}>{transaction.tx_hash}</h3>
+    </header>
     <dl>
       <dt>Confirmations</dt>
       <dd>{transaction.num_confirmations}</dd>
       <dt>Fee</dt>
-      <dd>{transaction.total_fees}</dd>
+      <dd>
+        {
+        ticker.currency === 'usd' ?
+          btc.satoshisToUsd(transaction.total_fees)
+          :
+          btc.satoshisToBtc(transaction.total_fees)
+        }
+      </dd>
       <dt>Date</dt>
       <dd>
         <Moment format='MMM Do'>{transaction.time_stamp * 1000}</Moment>

app/routes/activity/components/components/Modal/Transaction/Transaction.scss

@@ -1,48 +1,57 @@
 @import '../../../../../../variables.scss';
 
 .container {
-  padding: 40px;
+  header {
+    padding: 5px 40px 20px 40px;
+    background: $lightgrey;
+
+    .title {
+      display: flex;
+      flex-direction: row;
+
+      h2 {
+        text-transform: uppercase;
+      }
+    }
+  }
 
   h1 {
     text-align: center;
     color: $main;
-    margin: 60px 30px 60px 0;
 
-    svg {
-      font-size: 30px;
-      vertical-align: top;
+    .value {
+      font-size: 24px;
     }
 
-    span svg[data-icon='ltc'] {
-      width: 30px;
-      height: 30px;
+    i {
+      margin-left: 2px;
       vertical-align: top;
-
-      g {
-        transform: scale(1.75) translate(-5px, -5px);
-      }
-    }
-
-    .value {
-      font-size: 75px;
     }
   }
 
   h3 {
     font-size: 14px;
     text-align: center;
-    color: $black;
-    font-weight: bold;
+    color: $darkestgrey;
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
   }
 
   h2 {
     text-align: center;
+    margin-right: 10px;
     margin-bottom: 30px;
     text-transform: uppercase;
-    letter-spacing: 1.5px;
     font-size: 24px;
   }
 
+  dl {
+    padding: 40px 40px 40px 40px;
+  }
+
   dt {
     text-align: left;
     float: left;
@@ -56,8 +65,8 @@
   dd {
     text-align: right;
     font-weight: 400;
-    padding: 19px 0;
+    padding: 30px 0 10px 0;
     margin-left: 0;
-    border-top: 1px solid $darkgrey;
+    border-bottom: 1px solid $darkgrey;
   }
 }