feature(payment, transaction): style payment and transaction modals

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

@@ -0,0 +1,45 @@
+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 './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>
+    <dl>
+      <dt>Fee</dt>
+      <dd>{payment.fee}</dd>
+      <dt>Date</dt>
+      <dd>
+        <Moment format='MMM Do'>{payment.creation_date * 1000}</Moment>
+      </dd>
+    </dl>
+  </div>
+)
+
+Payment.propTypes = {
+}
+
+export default Payment

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

@@ -0,0 +1,55 @@
+@import '../../../../../../variables.scss';
+
+.container {
+  padding: 40px;
+
+  h1 {
+    text-align: center;
+    color: $main;
+    margin: 60px 30px 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: 80px;
+    }
+  }
+
+  h3 {
+    font-size: 14px;
+    text-align: center;
+    color: $black;
+    font-weight: bold;
+  }
+
+  dt {
+    text-align: left;
+    float: left;
+    clear: left;
+    font-weight: 500;
+    padding: 20px 35px 19px 0;
+    color: $black;
+    font-weight: bold;
+  }
+
+  dd {
+    text-align: right;
+    font-weight: 400;
+    padding: 19px 0;
+    margin-left: 0;
+    border-top: 1px solid $darkgrey;
+  }
+}

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

@@ -0,0 +1,55 @@
+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 './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>
+    <dl>
+      <dt>Confirmations</dt>
+      <dd>{transaction.num_confirmations}</dd>
+      <dt>Fee</dt>
+      <dd>{transaction.total_fees}</dd>
+      <dt>Date</dt>
+      <dd>
+        <Moment format='MMM Do'>{transaction.time_stamp * 1000}</Moment>
+      </dd>
+    </dl>
+  </div>
+)
+
+Transaction.propTypes = {
+}
+
+export default Transaction

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

@@ -0,0 +1,63 @@
+@import '../../../../../../variables.scss';
+
+.container {
+  padding: 40px;
+
+  h1 {
+    text-align: center;
+    color: $main;
+    margin: 60px 30px 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: 75px;
+    }
+  }
+
+  h3 {
+    font-size: 14px;
+    text-align: center;
+    color: $black;
+    font-weight: bold;
+  }
+
+  h2 {
+    text-align: center;
+    margin-bottom: 30px;
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    font-size: 24px;
+  }
+
+  dt {
+    text-align: left;
+    float: left;
+    clear: left;
+    font-weight: 500;
+    padding: 20px 35px 19px 0;
+    color: $black;
+    font-weight: bold;
+  }
+
+  dd {
+    text-align: right;
+    font-weight: 400;
+    padding: 19px 0;
+    margin-left: 0;
+    border-top: 1px solid $darkgrey;
+  }
+}