From 7c089ed2069f1aaae623b0c19a879649ed815c84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lo=C3=ABck=20V=C3=A9zien?= Date: Wed, 21 Mar 2018 17:56:21 +0100 Subject: [PATCH] Add to/from in operations, add sample modal for OperationDetails --- src/components/OperationsList/index.js | 29 ++++++++-- src/components/OperationsList/stories.js | 53 +++++++----------- src/components/modals/OperationDetails.js | 68 +++++++++++++++++++++++ src/components/modals/index.js | 1 + src/constants.js | 3 +- src/helpers/btc.js | 9 +-- src/types/common.js | 3 +- 7 files changed, 122 insertions(+), 44 deletions(-) create mode 100644 src/components/modals/OperationDetails.js diff --git a/src/components/OperationsList/index.js b/src/components/OperationsList/index.js index 78859bbc..1696880c 100644 --- a/src/components/OperationsList/index.js +++ b/src/components/OperationsList/index.js @@ -15,7 +15,10 @@ import isEqual from 'lodash/isEqual' 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' @@ -115,6 +118,7 @@ const Operation = ({ counterValues, minConfirmations, onAccountClick, + onOperationClick, t, tx, withAccount, @@ -123,7 +127,8 @@ const Operation = ({ counterValue: string, counterValues: Object | null, minConfirmations: number, - onAccountClick?: Function, + onAccountClick: Function, + onOperationClick: Function, t: T, tx: OperationType, withAccount?: boolean, @@ -134,7 +139,7 @@ const Operation = ({ const type = tx.amount > 0 ? 'from' : 'to' return ( - + onOperationClick({ operation: tx, account })}> onAccountClick && onAccountClick(account)} + onClick={e => { + e.stopPropagation() + onAccountClick(account) + }} > ({ counterValues: state.counterValues, }) +const mapDispatchToProps = { + openModal, +} + type Props = { account: Account, canShowMore: boolean, counterValue: string, counterValues: Object, onAccountClick?: Function, + openModal: Function, operations: OperationType[], t: T, title?: string, @@ -251,7 +265,9 @@ export class OperationsList extends Component { return !isEqual(this._hashCache, this.getHashCache(nextProps.operations)) } - getHashCache = (operations: OperationType[]) => operations.map(t => t.hash) + getHashCache = (operations: OperationType[]) => operations.map(t => t.id) + + handleClickOperation = (data: Object) => this.props.openModal(MODAL_OPERATION_DETAILS, data) _hashCache = null @@ -285,9 +301,10 @@ export class OperationsList extends Component { account={acc} counterValue={counterValue} counterValues={cValues} - key={`{${tx.hash}${acc ? `-${acc.id}` : ''}`} + key={`{${tx.id}${acc ? `-${acc.id}` : ''}`} minConfirmations={acc.settings.minConfirmations} onAccountClick={onAccountClick} + onOperationClick={this.handleClickOperation} t={t} tx={tx} withAccount={withAccount} @@ -308,4 +325,4 @@ export class OperationsList extends Component { } } -export default compose(translate(), connect(mapStateToProps))(OperationsList) +export default compose(translate(), connect(mapStateToProps, mapDispatchToProps))(OperationsList) diff --git a/src/components/OperationsList/stories.js b/src/components/OperationsList/stories.js index b8f4bb64..b82027c6 100644 --- a/src/components/OperationsList/stories.js +++ b/src/components/OperationsList/stories.js @@ -6,12 +6,25 @@ import { storiesOf } from '@storybook/react' import { boolean } from '@storybook/addon-knobs' import { translate } from 'react-i18next' +import { accounts } from 'components/SelectAccount/stories' + import { OperationsList } from 'components/OperationsList' const stories = storiesOf('Components', module) const unit = getDefaultUnitByCoinType(0) +const account = ({ name }) => ({ + ...accounts[0], + settings: { + minConfirmations: 10, + }, + currency: getCurrencyByCoinType(0), + name, + coinType: 0, + unit, +}) + const counterValue = 'USD' const counterValues = { 'BTC-USD': { @@ -28,15 +41,9 @@ const operations = [ amount: 130000000, receivedAt: '2018-01-09T16:03:52Z', confirmations: 1, - account: { - settings: { - minConfirmations: 10, - }, - currency: getCurrencyByCoinType(0), + account: account({ name: 'Account 1', - coinType: 0, - unit, - }, + }), }, { address: '5c6ea1716520c7d6e038d36a3223faced3c', @@ -44,15 +51,9 @@ const operations = [ amount: 130000000, receivedAt: '2018-01-09T16:03:52Z', confirmations: 11, - account: { - settings: { - minConfirmations: 10, - }, - currency: getCurrencyByCoinType(0), + account: account({ name: 'Account 1', - coinType: 0, - unit, - }, + }), }, { address: '27416a48caab90fab053b507b8b6b9d4', @@ -60,15 +61,9 @@ const operations = [ amount: -65000000, receivedAt: '2018-01-09T16:02:40Z', confirmations: 11, - account: { - settings: { - minConfirmations: 10, - }, - currency: getCurrencyByCoinType(0), + account: account({ name: 'Account 2', - coinType: 0, - unit, - }, + }), }, { address: '27416a48caab90fab053b507b8b6b9d4', @@ -76,15 +71,9 @@ const operations = [ amount: -65000000, receivedAt: '2018-01-09T16:02:40Z', confirmations: 1, - account: { - settings: { - minConfirmations: 10, - }, - currency: getCurrencyByCoinType(0), + account: account({ name: 'Account 2', - coinType: 0, - unit, - }, + }), }, ] diff --git a/src/components/modals/OperationDetails.js b/src/components/modals/OperationDetails.js new file mode 100644 index 00000000..71ff9c6e --- /dev/null +++ b/src/components/modals/OperationDetails.js @@ -0,0 +1,68 @@ +// @flow + +import React from 'react' +import styled from 'styled-components' + +import { MODAL_OPERATION_DETAILS } from 'constants' + +import Box from 'components/base/Box' +import Button from 'components/base/Button' +import Bar from 'components/base/Bar' +import Modal, { ModalBody, ModalTitle, ModalFooter, ModalContent } from 'components/base/Modal' + +const ColLeft = styled(Box)` + width: 95px; +` + +const OperationDetails = () => ( + { + const { operation, account } = data + + return ( + + Operation details + + + {operation.amount} + + + Acccount + {account.name} + + + + Date + {operation.receivedAt} + + + + Status + {operation.confirmations} + + + + From + {operation.from.join(',')} + + + To + {operation.to.join(',')} + + + Identifier + {operation.id} + + + + + + + + ) + }} + /> +) + +export default OperationDetails diff --git a/src/components/modals/index.js b/src/components/modals/index.js index 26754eb5..47c450cc 100644 --- a/src/components/modals/index.js +++ b/src/components/modals/index.js @@ -1,4 +1,5 @@ export AddAccount from './AddAccount' +export OperationDetails from './OperationDetails' export Receive from './Receive' export Send from './Send' export SettingsAccount from './SettingsAccount' diff --git a/src/constants.js b/src/constants.js index a637e9ef..5e27349a 100644 --- a/src/constants.js +++ b/src/constants.js @@ -3,6 +3,7 @@ export const SYNC_ACCOUNT_DELAY = 3e3 export const SYNC_COUNTER_VALUES_DELAY = 60e3 export const MODAL_ADD_ACCOUNT = 'MODAL_ADD_ACCOUNT' -export const MODAL_SEND = 'MODAL_SEND' +export const MODAL_OPERATION_DETAILS = 'MODAL_OPERATION_DETAILS' export const MODAL_RECEIVE = 'MODAL_RECEIVE' +export const MODAL_SEND = 'MODAL_SEND' export const MODAL_SETTINGS_ACCOUNT = 'MODAL_SETTINGS_ACCOUNT' diff --git a/src/helpers/btc.js b/src/helpers/btc.js index 3e5c7ae3..33caa4a3 100644 --- a/src/helpers/btc.js +++ b/src/helpers/btc.js @@ -34,9 +34,10 @@ export function computeOperation(addresses: Array) { return { id: t.hash, address: t.amount > 0 ? t.inputs[0].address : t.outputs[0].address, + from: t.inputs.map(t => t.address), + to: t.outputs.map(t => t.address), amount, confirmations: t.confirmations, - hash: t.hash, receivedAt: t.received_at, } } @@ -163,14 +164,14 @@ export async function getAccount({ if (hasOperations) { const newOperations = txs.map(computeOperation(allAddresses)) - const txHashs = operations.map(t => t.hash) + const txHashs = operations.map(t => t.id) balance = newOperations - .filter(t => !txHashs.includes(t.hash)) + .filter(t => !txHashs.includes(t.id)) .reduce((result, v) => result + v.amount, balance) lastAddress = getLastAddress(addresses, txs[0]) - operations = uniqBy([...operations, ...newOperations], t => t.hash) + operations = uniqBy([...operations, ...newOperations], t => t.id) onProgress({ balance, diff --git a/src/types/common.js b/src/types/common.js index fee51c87..3ab2f0b7 100644 --- a/src/types/common.js +++ b/src/types/common.js @@ -16,8 +16,9 @@ export type Operation = { id: string, account?: Account, address: string, + from: Array, + to: Array, amount: number, - hash: string, receivedAt: string, confirmations: number, }