feature(payform): add error messages to py form

app/components/Activity/ActivityModal.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import Isvg from 'react-inlinesvg'
 import x from 'icons/x.svg'
 
-// import Transaction from './Transaction'
+import TransactionModal from './TransactionModal'
 import PaymentModal from './PaymentModal'
 import InvoiceModal from './InvoiceModal'
 
@@ -19,7 +19,7 @@ const ActivityModal = ({
   toggleCurrencyProps
 }) => {
   const MODAL_COMPONENTS = {
-    // TRANSACTION: Transaction,
+    TRANSACTION: TransactionModal,
     PAYMENT: PaymentModal,
     INVOICE: InvoiceModal
   }

app/components/Activity/TransactionModal.js

@@ -0,0 +1,67 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Moment from 'react-moment'
+import 'moment-timezone'
+
+import { FaAngleDown } from 'react-icons/lib/fa'
+
+import Value from 'components/Value'
+
+import styles from './PaymentModal.scss'
+
+const PaymentModal = ({
+  transaction,
+  ticker,
+  currentTicker,
+
+  toggleCurrencyProps: {
+    setActivityModalCurrencyFilters,
+    showCurrencyFilters,
+    currencyName,
+    currentCurrencyFilters,
+    onCurrencyFilterClick
+  }
+}) => {
+  console.log('transaction: ', transaction)
+  return (
+    <div className={styles.container}>
+      <div className={styles.content}>
+        <section className={styles.left} />
+        <section className={styles.right}>
+          <div className={styles.details}>
+            <section className={styles.amount}>
+              <h1>
+                <Value value={transaction.amount} currency={ticker.currency} currentTicker={currentTicker} />
+              </h1>
+              <section className={styles.currentCurrency} onClick={() => setActivityModalCurrencyFilters(!showCurrencyFilters)}>
+                <span>{currencyName}</span><span><FaAngleDown /></span>
+              </section>
+              <ul className={showCurrencyFilters && styles.active}>
+                {
+                  currentCurrencyFilters.map(filter =>
+                    <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>{filter.name}</li>)
+                }
+              </ul>
+            </section>
+            <section className={styles.date}>
+              <p>
+                <Moment format='MM/DD/YYYY'>{transaction.time_stamp * 1000}</Moment>
+              </p>
+            </section>
+          </div>
+        </section>
+      </div>
+    </div>
+  )
+}
+
+PaymentModal.propTypes = {
+  transaction: PropTypes.object.isRequired,
+  ticker: PropTypes.object.isRequired,
+  currentTicker: PropTypes.object.isRequired,
+
+  toggleCurrencyProps: PropTypes.object.isRequired
+}
+
+export default PaymentModal

app/components/Form/Pay.js

@@ -60,6 +60,9 @@ class Pay extends Component {
       setCurrency
     } = this.props
 
+    console.log('errors: ', errors)
+    console.log('showErrors: ', showErrors)
+
     const displayNodeName = (pubkey) => {
       const node = find(nodes, n => n.pub_key === pubkey)
 
@@ -116,6 +119,11 @@ class Pay extends Component {
                 id='destination'
                 rows='2'
               />
+              <section className={`${styles.errorMessage} ${showErrors.payInput && styles.active}`}>
+                {showErrors.payInput &&
+                  <span>{errors.payInput}</span>
+                }
+              </section>
             </div>
           </section>
 
@@ -153,6 +161,12 @@ class Pay extends Component {
             <div className={styles.usdAmount}>
               {`≈ ${usdAmount || 0} USD`}
             </div>
+
+            <section className={`${styles.errorMessage} ${styles.amount} ${showErrors.amount && styles.active}`}>
+              {showErrors.amount &&
+                <span>{errors.amount}</span>
+              }
+            </section>
           </section>
 
           <section className={styles.submit}>

app/components/Form/Pay.scss

@@ -164,3 +164,19 @@
     }
   }
 }
+
+.errorMessage {
+  color: $red;
+  font-size: 12px;
+  min-height: 20px;
+  opacity: 0;
+  transition: all 0.25s ease;
+
+  &.amount {
+    margin-top: 10px;
+  }
+
+  &.active {
+    opacity: 1;
+  }
+}

app/components/Value/Value.js

@@ -8,7 +8,7 @@ Value.propTypes = {
   value: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number
-  ]).isRequired,
+  ]),
   currency: PropTypes.string.isRequired,
   currentTicker: PropTypes.object.isRequired
 }