feature(invoice): design invoice modal

app/routes/activity/components/Activity.js

@@ -68,7 +68,13 @@ class Activity extends Component {
 
     return (
       <div>
-        <Modal modalType={modal.modalType} modalProps={modal.modalProps} hideActivityModal={hideActivityModal} />
+        <Modal
+          modalType={modal.modalType}
+          modalProps={modal.modalProps}
+          hideActivityModal={hideActivityModal}
+          ticker={ticker}
+          currentTicker={currentTicker}
+        />
         
         <div className={styles.search}>
           <label className={`${styles.label} ${styles.input}`} htmlFor='invoiceSearch'>

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

@@ -0,0 +1,58 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Moment from 'react-moment'
+import 'moment-timezone'
+
+import QRCode from 'qrcode.react'
+
+import { MdCheck } from 'react-icons/lib/md'
+
+import CurrencyIcon from '../../../../../../components/CurrencyIcon'
+import { btc } from '../../../../../../utils'
+
+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.qrcode}>
+      <QRCode value={invoice.payment_request} size={200} />
+      <input
+        readOnly
+        className={styles.paymentRequest}
+        onClick={event => event.target.select()}
+        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>
+    </p>
+  </div>
+)
+
+Invoice.propTypes = {
+}
+
+export default Invoice

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

@@ -0,0 +1,75 @@
+@import '../../../../../../variables.scss';
+
+.container {
+  padding: 40px;
+
+  h3 {
+    font-size: 24px;
+    color: $black;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 10px;
+  }
+
+  h1 {
+    text-align: center;
+    color: $main;
+    margin: 20px 20px 60px 0;
+
+    svg {
+      font-size: 30px;
+      vertical-align: top;
+    }
+
+    span svg[data-icon='ltc'] {
+      width: 30px;
+      height: 30px;
+      vertical-align: top;
+
+      g {
+        transform: scale(1.75) translate(-5px, -5px);
+      }
+    }
+
+    .value {
+      font-size: 60px;
+    }
+  }
+
+  .qrcode {
+    text-align: center;
+
+    .paymentRequest {
+      text-align: center;
+      font-size: 0.5vw;
+      margin-top: 20px;
+      padding: 5px;
+      border-radius: 5px;
+      background: $lightgrey;
+      border: 1px solid $darkgrey;
+      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;
+    }
+  }
+
+  .date {
+    text-align: center;
+
+    time {
+      margin-left: 3px;
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+import Invoice from './Invoice'
+
+export default Invoice

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

@@ -2,7 +2,17 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import ReactModal from 'react-modal'
 
-const Modal = ({ modalType, modalProps, hideActivityModal }) => {
+import Transaction from './Transaction'
+import Payment from './Payment'
+import Invoice from './Invoice'
+
+const Modal = ({ modalType, modalProps, hideActivityModal, ticker, currentTicker }) => {
+  const MODAL_COMPONENTS = {
+    TRANSACTION: Transaction,
+    PAYMENT: Payment,
+    INVOICE: Invoice
+  
+  }
   const customStyles = {
     overlay: {
       cursor: 'pointer'
@@ -19,6 +29,8 @@ const Modal = ({ modalType, modalProps, hideActivityModal }) => {
   
   if (!modalType) { return null }
 
+  const SpecificModal = MODAL_COMPONENTS[modalType]
+
   return (
     <ReactModal
       isOpen
@@ -29,7 +41,7 @@ const Modal = ({ modalType, modalProps, hideActivityModal }) => {
       parentSelector={() => document.body}
       style={customStyles}
     >
-      <h1>hi!</h1>
+      <SpecificModal {...modalProps} ticker={ticker} currentTicker={currentTicker} />
     </ReactModal>
   )
 }

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

@@ -0,0 +1,3 @@
+import Payment from './Payment'
+
+export default Payment

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

@@ -0,0 +1,3 @@
+import Transaction from './Transaction'
+
+export default Transaction