diff --git a/app/components/Activity/ActivityModal.js b/app/components/Activity/ActivityModal.js index e9c500d0..b255ece3 100644 --- a/app/components/Activity/ActivityModal.js +++ b/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 } diff --git a/app/components/Activity/TransactionModal.js b/app/components/Activity/TransactionModal.js index e69de29b..96109854 100644 --- a/app/components/Activity/TransactionModal.js +++ b/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 ( +
+
+
+
+
+
+

+ +

+
setActivityModalCurrencyFilters(!showCurrencyFilters)}> + {currencyName} +
+
    + { + currentCurrencyFilters.map(filter => +
  • onCurrencyFilterClick(filter.key)}>{filter.name}
  • ) + } +
+
+
+

+ {transaction.time_stamp * 1000} +

+
+
+
+
+
+ ) +} + +PaymentModal.propTypes = { + transaction: PropTypes.object.isRequired, + ticker: PropTypes.object.isRequired, + currentTicker: PropTypes.object.isRequired, + + toggleCurrencyProps: PropTypes.object.isRequired +} + +export default PaymentModal diff --git a/app/components/Form/Pay.js b/app/components/Form/Pay.js index 67ba87c6..7096f526 100644 --- a/app/components/Form/Pay.js +++ b/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' /> +
+ {showErrors.payInput && + {errors.payInput} + } +
@@ -153,6 +161,12 @@ class Pay extends Component {
{`≈ ${usdAmount || 0} USD`}
+ +
+ {showErrors.amount && + {errors.amount} + } +
diff --git a/app/components/Form/Pay.scss b/app/components/Form/Pay.scss index 55a8b954..7f0a7c2b 100644 --- a/app/components/Form/Pay.scss +++ b/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; + } +} diff --git a/app/components/Value/Value.js b/app/components/Value/Value.js index e87a2df9..5391e4b4 100644 --- a/app/components/Value/Value.js +++ b/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 }