diff --git a/src/containers/payments/index.js b/src/containers/payments/index.js new file mode 100644 index 0000000..a3b4f51 --- /dev/null +++ b/src/containers/payments/index.js @@ -0,0 +1,26 @@ +import React from 'react' + +import { connect } from 'react-redux' + +import Payments from '../../views/payments/index' + +import { + +} from '../../actions/payments' + +import { + getAllPayments +} from '../../reducers' + +const render = props => { + return +} + +const mapStateToProps = (state, { match }) => ({ + payments: getAllPayments(state) +}) + +const mapDispatchToProps = (dispatch, { history, match }) => ({ +}) + +export default connect(mapStateToProps, mapDispatchToProps)(render) diff --git a/src/reducers/index.js b/src/reducers/index.js index 706610e..fc38787 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -14,7 +14,7 @@ const reducers = { export default combineReducers(reducers) export const getAllPayments = (state) => - fromPayments.getAllPayments(state) + fromPayments.getAllPayments(state.payments) export const getPaymentById = (state, id) => fromPayments.getPaymentById(state.payments, id) diff --git a/src/routes/payments.js b/src/routes/payments.js index c9de2b8..5c2bfc1 100644 --- a/src/routes/payments.js +++ b/src/routes/payments.js @@ -2,7 +2,7 @@ import React from 'react' import { Route, Switch } from 'react-router-dom' -import Payments from '../views/payments' +import Payments from '../containers/payments' import CreatePayment from '../containers/payments/create' import SendPayment from '../containers/payments/send' diff --git a/src/styles/_components.payments.scss b/src/styles/_components.payments.scss index 6f42e5a..7209fd7 100644 --- a/src/styles/_components.payments.scss +++ b/src/styles/_components.payments.scss @@ -23,3 +23,9 @@ } } } + +.c-payments__item { + &:not(:last-child) { + border-bottom: 1px solid $divider-color; + } +} diff --git a/src/styles/_elements.forms.scss b/src/styles/_elements.forms.scss index cf8958c..b590f62 100644 --- a/src/styles/_elements.forms.scss +++ b/src/styles/_elements.forms.scss @@ -5,7 +5,7 @@ input, %input, select, %select, textarea, %textarea { } input:disabled, %input--disabled { - background-color: #eee; + background-color: $disabled-color; } button:focus, input:focus, %input--focus { diff --git a/src/styles/_objects.app.scss b/src/styles/_objects.app.scss index 7776ca5..3e3698e 100644 --- a/src/styles/_objects.app.scss +++ b/src/styles/_objects.app.scss @@ -59,8 +59,11 @@ .o-app__content { grid-row: 1 / 4; grid-column: 1 / 4; + + overflow-y: auto; } .o-app__footer { grid-area: footer; + z-index: 1; } diff --git a/src/styles/_objects.circle.scss b/src/styles/_objects.circle.scss new file mode 100644 index 0000000..6261e01 --- /dev/null +++ b/src/styles/_objects.circle.scss @@ -0,0 +1,5 @@ +.o-circle { + width: $base-spacing-unit * 1.5; + height: $base-spacing-unit * 1.5; + border-radius: 50%; +} diff --git a/src/styles/_objects.flex.scss b/src/styles/_objects.flex.scss index 22024de..55a5178 100644 --- a/src/styles/_objects.flex.scss +++ b/src/styles/_objects.flex.scss @@ -6,10 +6,14 @@ flex-direction: column } -.o-flex--center { +.o-flex--jc-center { justify-content: center; } +.o-flex--ai-center { + align-items: center; +} + .o-flex__stretch { flex: 1; } diff --git a/src/styles/_settings.colors.scss b/src/styles/_settings.colors.scss index addc25f..7de69aa 100644 --- a/src/styles/_settings.colors.scss +++ b/src/styles/_settings.colors.scss @@ -7,3 +7,7 @@ $brand-dark: #DA4001; $background-color: #FFFFFF; $text-color: #4A4A4A; $disabled-color: #E8E8E8; +$divider-color: #D8D8D8; + +$success-color: green; +$error-color: red; diff --git a/src/styles/_settings.type.scss b/src/styles/_settings.type.scss index 067d971..018e5f0 100644 --- a/src/styles/_settings.type.scss +++ b/src/styles/_settings.type.scss @@ -4,7 +4,7 @@ $inuit-global-font-size: 18px; $inuit-global-line-height: 24px; $small-font-size: 14px; -$label-font-size: 15px; +$label-font-size: 16px; $base-font-size: 18px; $large-font-size: 22px; $huge-font-size: 72px; diff --git a/src/styles/_utilities.notice.scss b/src/styles/_utilities.notice.scss new file mode 100644 index 0000000..fb3b77b --- /dev/null +++ b/src/styles/_utilities.notice.scss @@ -0,0 +1,7 @@ +.u-notice--success { + background-color: $success-color; +} + +.u-notice--error { + background-color: $error-color; +} diff --git a/src/styles/_utilities.text.scss b/src/styles/_utilities.text.scss index d1ba104..2cf780e 100644 --- a/src/styles/_utilities.text.scss +++ b/src/styles/_utilities.text.scss @@ -21,3 +21,8 @@ .u-brand-primary { color: $brand-primary; } + +.u-smaller { + font-size: $label-font-size; + line-height: 24px; +} diff --git a/src/styles/main.scss b/src/styles/main.scss index e8918b1..71983b0 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -30,6 +30,7 @@ // OBJECTS @import 'objects.app'; @import '~inuitcss/objects/objects.box'; +@import 'objects.circle'; @import 'objects.content'; @import 'objects.flex'; @import '~inuitcss/objects/objects.list-bare'; @@ -52,4 +53,5 @@ // UTILITIES @import '~inuitcss/utilities/utilities.spacings'; @import 'utilities.alignments'; +@import 'utilities.notice.scss'; @import 'utilities.text'; diff --git a/src/views/dashboard.js b/src/views/dashboard.js index 3484e5b..b4b1d06 100644 --- a/src/views/dashboard.js +++ b/src/views/dashboard.js @@ -36,7 +36,7 @@ const Dashboard = ({ onStartPayment, settings, lastPayment }) => ( Last payment - + See history diff --git a/src/views/payments/index.js b/src/views/payments/index.js index 793ba6b..69cc14b 100644 --- a/src/views/payments/index.js +++ b/src/views/payments/index.js @@ -1,15 +1,61 @@ +import Big from 'big.js' import React, { Fragment } from 'react' import Icon from '../../components/Icon' -export default () => ( +const { + Blob, + URL +} = window + +const formatDate = (dateString) => new Date(dateString).toLocaleString() +// { +// const date = new Date(dateString) +// return `${date.toLocaleDateString()} – ${date.toLocaleTimeString()}` +// } + +const getAmount = (receivedAmount, rate, fiatCurrency) => { + try { + return `${new Big(receivedAmount).times(rate).toFixed(2)} ${fiatCurrency}` + } catch (e) { + return '—' + } +} + +const ListItem = ({id, receivedAmount, rate, fiatCurrency, updatedAt, paymentId}) => ( +
  • + + + {formatDate(updatedAt)} + {paymentId || '—'} + + + {getAmount(receivedAmount, rate, fiatCurrency)} + +
    • +) + +const download = (json) => { + const blob = new Blob([JSON.stringify(json, null, 2)], { type: 'application/json' }) + return URL.createObjectURL(blob) +} + +export default ({ payments }) => ( -
    - Coming soon™ +
    +
      + { payments.map(payment => ) } +
    History
    + + Download + ) diff --git a/src/views/payments/send.js b/src/views/payments/send.js index f5062e1..408b528 100644 --- a/src/views/payments/send.js +++ b/src/views/payments/send.js @@ -120,7 +120,7 @@ export default class SendPayment extends Component { {new Big(convertedAmount).add(new Big(tip || '0')).toFixed(12)} XMR
    -
    +