From 978895756b77162548b02979af4de90ec9090cd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lo=C3=ABck=20V=C3=A9zien?= Date: Thu, 22 Mar 2018 13:59:19 +0100 Subject: [PATCH] Add component for display counter value of specific coin/unit --- src/components/CounterValue/index.js | 54 ++++++++++++++++++++++ src/components/CounterValue/stories.js | 32 +++++++++++++ src/components/OperationsList/index.js | 55 +++-------------------- src/components/modals/OperationDetails.js | 35 +++++++++++---- 4 files changed, 118 insertions(+), 58 deletions(-) create mode 100644 src/components/CounterValue/index.js create mode 100644 src/components/CounterValue/stories.js diff --git a/src/components/CounterValue/index.js b/src/components/CounterValue/index.js new file mode 100644 index 00000000..64c94a68 --- /dev/null +++ b/src/components/CounterValue/index.js @@ -0,0 +1,54 @@ +// @flow + +import React, { PureComponent } from 'react' +import { connect } from 'react-redux' +import moment from 'moment' + +import isNaN from 'lodash/isNaN' + +import type { Unit } from '@ledgerhq/currencies' + +import { getCounterValue } from 'reducers/settings' + +import FormattedVal from 'components/base/FormattedVal' + +const mapStateToProps = state => ({ + counterValue: getCounterValue(state), + counterValues: state.counterValues, +}) + +type Props = { + formatValue: boolean, + counterValue: string, + counterValues: Object, + time?: Date | string | number, + unit: Unit, + value: number, +} + +export class CounterValue extends PureComponent { + static defaultProps = { + formatValue: true, + value: 0, + time: undefined, + } + + render() { + const { formatValue, value, unit, counterValue, counterValues, time, ...props } = this.props + + const cValues = counterValues[`${unit.code}-${counterValue}`] + + const v = isNaN(Number(value)) + ? 0 + : (time ? cValues.byDate[moment(time).format('YYYY-MM-DD')] : cValues.list[0][1]) * + (value / 10 ** unit.magnitude) + + return formatValue ? ( + + ) : ( + v + ) + } +} + +export default connect(mapStateToProps)(CounterValue) diff --git a/src/components/CounterValue/stories.js b/src/components/CounterValue/stories.js new file mode 100644 index 00000000..927d82f7 --- /dev/null +++ b/src/components/CounterValue/stories.js @@ -0,0 +1,32 @@ +// @flow + +import React from 'react' +import { getDefaultUnitByCoinType } from '@ledgerhq/currencies' +import { storiesOf } from '@storybook/react' +import { boolean, text } from '@storybook/addon-knobs' + +import { CounterValue } from 'components/CounterValue' + +const stories = storiesOf('Components', module) + +const unit = getDefaultUnitByCoinType(0) + +const counterValue = 'USD' +const counterValues = { + 'BTC-USD': { + byDate: { + '2018-01-09': 10000, + }, + list: [['2018-01-09', 10000]], + }, +} + +stories.add('CounterValue', () => ( + +)) diff --git a/src/components/OperationsList/index.js b/src/components/OperationsList/index.js index 55e5aeda..ba613cec 100644 --- a/src/components/OperationsList/index.js +++ b/src/components/OperationsList/index.js @@ -7,9 +7,7 @@ import { connect } from 'react-redux' import { compose } from 'redux' import { translate } from 'react-i18next' import { getIconByCoinType } from '@ledgerhq/currencies/react' -import { getDefaultUnitByCoinType } from '@ledgerhq/currencies' -import get from 'lodash/get' import noop from 'lodash/noop' import isEqual from 'lodash/isEqual' @@ -17,15 +15,16 @@ import type { Account, Operation as OperationType, T } from 'types/common' import { MODAL_OPERATION_DETAILS } from 'constants' -import { getCounterValue } from 'reducers/settings' import { openModal } from 'reducers/modals' import IconAngleDown from 'icons/AngleDown' import Box, { Card } from 'components/base/Box' +import CounterValue from 'components/CounterValue' import Defer from 'components/base/Defer' import FormattedVal from 'components/base/FormattedVal' import Text from 'components/base/Text' + import ConfirmationCheck from './ConfirmationCheck' const DATE_COL_SIZE = 100 @@ -114,8 +113,6 @@ const Address = ({ value }: { value: string }) => { const Operation = ({ account, - counterValue, - counterValues, minConfirmations, onAccountClick, onOperationClick, @@ -124,8 +121,6 @@ const Operation = ({ withAccount, }: { account: Account, - counterValue: string, - counterValues: Object | null, minConfirmations: number, onAccountClick: Function, onOperationClick: Function, @@ -137,16 +132,9 @@ const Operation = ({ const time = moment(tx.receivedAt) const Icon = getIconByCoinType(account.currency.coinType) const type = tx.amount > 0 ? 'from' : 'to' - const cValue = counterValues - ? counterValues[time.format('YYYY-MM-DD')] * (tx.amount / 10 ** unit.magnitude) - : null return ( - - onOperationClick({ operation: tx, account, type, counterValue: cValue, fiat: counterValue }) - } - > + onOperationClick({ operation: tx, account, type })}> - {cValue && ( - - )} + @@ -222,11 +201,6 @@ Operation.defaultProps = { withAccount: false, } -const mapStateToProps = state => ({ - counterValue: getCounterValue(state), - counterValues: state.counterValues, -}) - const mapDispatchToProps = { openModal, } @@ -234,8 +208,6 @@ const mapDispatchToProps = { type Props = { account: Account, canShowMore: boolean, - counterValue: string, - counterValues: Object, onAccountClick?: Function, openModal: Function, operations: OperationType[], @@ -279,17 +251,7 @@ export class OperationsList extends Component { _hashCache = null render() { - const { - account, - canShowMore, - counterValue, - counterValues, - onAccountClick, - operations, - t, - title, - withAccount, - } = this.props + const { account, canShowMore, onAccountClick, operations, t, title, withAccount } = this.props this._hashCache = this.getHashCache(operations) @@ -300,14 +262,9 @@ export class OperationsList extends Component { {operations.map(tx => { const acc = account || tx.account - const unit = getDefaultUnitByCoinType(acc.coinType) - const cValues = get(counterValues, `${unit.code}-${counterValue}.byDate`, null) - return ( { } } -export default compose(translate(), connect(mapStateToProps, mapDispatchToProps))(OperationsList) +export default compose(translate(), connect(null, mapDispatchToProps))(OperationsList) diff --git a/src/components/modals/OperationDetails.js b/src/components/modals/OperationDetails.js index 37543075..260a4895 100644 --- a/src/components/modals/OperationDetails.js +++ b/src/components/modals/OperationDetails.js @@ -15,6 +15,8 @@ import Button from 'components/base/Button' import Bar from 'components/base/Bar' import FormattedVal from 'components/base/FormattedVal' import Modal, { ModalBody, ModalTitle, ModalFooter, ModalContent } from 'components/base/Modal' + +import CounterValue from 'components/CounterValue' import ConfirmationCheck from 'components/OperationsList/ConfirmationCheck' const Line = styled(Box).attrs({ @@ -50,7 +52,7 @@ const OperationDetails = ({ t }: { t: T }) => ( { - const { operation, account, type, counterValue, fiat } = data + const { operation, account, type } = data const { name, unit, settings: { minConfirmations } } = account const { id, amount, confirmations, receivedAt, from, to } = operation @@ -84,14 +86,13 @@ const OperationDetails = ({ t }: { t: T }) => ( /> - @@ -120,12 +121,28 @@ const OperationDetails = ({ t }: { t: T }) => ( From - {from.map(v => {v})} + + {from.map((v, i) => ( + + {v} + + ))} + To - {to.map(v => {v})} + + {to.map((v, i) => ( + + {v} + + ))} +