Add to/from in operations, add sample modal for OperationDetails

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 (
-    <OperationRaw>
+    <OperationRaw onClick={() => onOperationClick({ operation: tx, account })}>
       <Cell size={CONFIRMATION_COL_SIZE} align="center" justify="flex-start">
         <ConfirmationCheck
           type={type}
@@ -158,7 +163,10 @@ const Operation = ({
             horizontal
             flow={2}
             style={{ cursor: 'pointer' }}
-            onClick={() => onAccountClick && onAccountClick(account)}
+            onClick={e => {
+              e.stopPropagation()
+              onAccountClick(account)
+            }}
           >
             <Box
               alignItems="center"
@@ -203,6 +211,7 @@ const Operation = ({
 
 Operation.defaultProps = {
   onAccountClick: noop,
+  onOperationClick: noop,
   withAccount: false,
 }
 
@@ -211,12 +220,17 @@ const mapStateToProps = state => ({
   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<Props> {
     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<Props> {
                     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<Props> {
   }
 }
 
-export default compose(translate(), connect(mapStateToProps))(OperationsList)
+export default compose(translate(), connect(mapStateToProps, mapDispatchToProps))(OperationsList)

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,
-    },
+    }),
   },
 ]
 

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 = () => (
+  <Modal
+    name={MODAL_OPERATION_DETAILS}
+    render={({ data, onClose }) => {
+      const { operation, account } = data
+
+      return (
+        <ModalBody onClose={onClose}>
+          <ModalTitle>Operation details</ModalTitle>
+          <ModalContent flow={4}>
+            <Box>
+              <Box>{operation.amount}</Box>
+            </Box>
+            <Box>
+              <ColLeft>Acccount</ColLeft>
+              <Box>{account.name}</Box>
+            </Box>
+            <Bar />
+            <Box>
+              <ColLeft>Date</ColLeft>
+              <Box>{operation.receivedAt}</Box>
+            </Box>
+            <Bar />
+            <Box>
+              <ColLeft>Status</ColLeft>
+              <Box>{operation.confirmations}</Box>
+            </Box>
+            <Bar />
+            <Box>
+              <ColLeft>From</ColLeft>
+              <Box>{operation.from.join(',')}</Box>
+            </Box>
+            <Box>
+              <ColLeft>To</ColLeft>
+              <Box>{operation.to.join(',')}</Box>
+            </Box>
+            <Box>
+              <ColLeft>Identifier</ColLeft>
+              <Box>{operation.id}</Box>
+            </Box>
+          </ModalContent>
+          <ModalFooter horizontal justify="flex-end" flow={2}>
+            <Button>Cancel</Button>
+            <Button primary>View operation</Button>
+          </ModalFooter>
+        </ModalBody>
+      )
+    }}
+  />
+)
+
+export default OperationDetails

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'

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'

src/helpers/btc.js

@@ -34,9 +34,10 @@ export function computeOperation(addresses: Array<string>) {
     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,

src/types/common.js

@@ -16,8 +16,9 @@ export type Operation = {
   id: string,
   account?: Account,
   address: string,
+  from: Array<string>,
+  to: Array<string>,
   amount: number,
-  hash: string,
   receivedAt: string,
   confirmations: number,
 }