From 4c7aa1518fb7616736dff1174ee8f1c68af289f4 Mon Sep 17 00:00:00 2001 From: meriadec Date: Wed, 28 Feb 2018 11:50:47 +0100 Subject: [PATCH] Display ConfirmationCheck inside TransactionList --- .../TransactionsList/ConfirmationCheck.js | 41 +++++++++++++++++++ src/components/TransactionsList/index.js | 16 +++++++- src/helpers/btc.js | 1 + src/icons/Check.js | 10 +++++ src/icons/Clock.js | 10 +++++ src/reducers/accounts.js | 11 ++++- 6 files changed, 86 insertions(+), 3 deletions(-) create mode 100644 src/components/TransactionsList/ConfirmationCheck.js create mode 100644 src/icons/Check.js create mode 100644 src/icons/Clock.js diff --git a/src/components/TransactionsList/ConfirmationCheck.js b/src/components/TransactionsList/ConfirmationCheck.js new file mode 100644 index 00000000..e9bc0e60 --- /dev/null +++ b/src/components/TransactionsList/ConfirmationCheck.js @@ -0,0 +1,41 @@ +// @flow + +import React from 'react' +import styled from 'styled-components' + +import { rgba } from 'styles/helpers' + +import Box from 'components/base/Box' +import Tooltip from 'components/base/Tooltip' +import IconCheck from 'icons/Check' +import IconClock from 'icons/Clock' + +const Container = styled(Box).attrs({ + bg: p => rgba(p.isConfirmed ? p.theme.colors.positiveGreen : p.theme.colors.grey, 0.1), + color: p => (p.isConfirmed ? p.theme.colors.positiveGreen : p.theme.colors.grey), + align: 'center', + justify: 'center', +})` + width: 24px; + height: 24px; + border-radius: 50%; +` + +const ConfirmationCheck = ({ + confirmations, + minConfirmations, +}: { + confirmations: number, + minConfirmations: number, +}) => { + const isConfirmed = confirmations >= minConfirmations + return ( + (isConfirmed ? 'Confirmed' : 'Not confirmed')}> + + {isConfirmed ? : } + + + ) +} + +export default ConfirmationCheck diff --git a/src/components/TransactionsList/index.js b/src/components/TransactionsList/index.js index c92d8494..05c7b67e 100644 --- a/src/components/TransactionsList/index.js +++ b/src/components/TransactionsList/index.js @@ -15,10 +15,12 @@ import Box from 'components/base/Box' 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 = 80 const ACCOUNT_COL_SIZE = 150 const AMOUNT_COL_SIZE = 150 +const CONFIRMATION_COL_SIZE = 30 const Cap = styled(Text).attrs({ fontSize: 2, @@ -41,7 +43,7 @@ const Hour = styled(Day).attrs({ color: 'graphite', })`` -const HeaderCol = ({ size, children, ...props }: { size?: number, children: any }) => ( +const HeaderCol = ({ size, children, ...props }: { size?: number, children?: any }) => ( {children} @@ -49,6 +51,7 @@ const HeaderCol = ({ size, children, ...props }: { size?: number, children: any HeaderCol.defaultProps = { size: undefined, + children: undefined, } const TransactionRaw = styled(Box).attrs({ @@ -76,11 +79,13 @@ const Transaction = ({ onAccountClick, tx, withAccounts, + minConfirmations, }: { t: T, onAccountClick?: Function, tx: TransactionType, withAccounts?: boolean, + minConfirmations: number, }) => { const time = moment(tx.receivedAt) const Icon = getIconByCoinType(get(tx, 'account.currency.coinType')) @@ -139,6 +144,9 @@ const Transaction = ({ alwaysShowSign /> + + + ) } @@ -153,12 +161,14 @@ type Props = { onAccountClick?: Function, transactions: Array, withAccounts?: boolean, + minConfirmations: number, } class TransactionsList extends Component { static defaultProps = { onAccountClick: noop, withAccounts: false, + minConfirmations: 2, } shouldComponentUpdate(nextProps: Props) { @@ -174,7 +184,7 @@ class TransactionsList extends Component { _hashCache = null render() { - const { transactions, withAccounts, onAccountClick, t } = this.props + const { transactions, withAccounts, onAccountClick, minConfirmations, t } = this.props this._hashCache = this.getHashCache(transactions) @@ -189,6 +199,7 @@ class TransactionsList extends Component { {t('transactionsList.amount')} + @@ -198,6 +209,7 @@ class TransactionsList extends Component { key={`{${trans.hash}-${trans.account ? trans.account.id : ''}`} withAccounts={withAccounts} onAccountClick={onAccountClick} + minConfirmations={minConfirmations} tx={trans} /> ))} diff --git a/src/helpers/btc.js b/src/helpers/btc.js index 39d6014f..33cfcd4c 100644 --- a/src/helpers/btc.js +++ b/src/helpers/btc.js @@ -145,6 +145,7 @@ export async function getAccount({ index: currentAddress.index, path: `${path}/${getPath('external', currentAddress.index + 1)}`, transactions: transactions.map(t => ({ + confirmations: t.confirmations, address: t.balance > 0 ? t.inputs[0].address : t.outputs[0].address, balance: t.balance, hash: t.hash, diff --git a/src/icons/Check.js b/src/icons/Check.js new file mode 100644 index 00000000..d8986a6d --- /dev/null +++ b/src/icons/Check.js @@ -0,0 +1,10 @@ +import React from 'react' + +export default props => ( + + + +) diff --git a/src/icons/Clock.js b/src/icons/Clock.js new file mode 100644 index 00000000..846679b6 --- /dev/null +++ b/src/icons/Clock.js @@ -0,0 +1,10 @@ +import React from 'react' + +export default props => ( + + + +) diff --git a/src/reducers/accounts.js b/src/reducers/accounts.js index 06ef3eac..f36b6a20 100644 --- a/src/reducers/accounts.js +++ b/src/reducers/accounts.js @@ -5,6 +5,7 @@ import { handleActions } from 'redux-actions' import every from 'lodash/every' import get from 'lodash/get' import reduce from 'lodash/reduce' +import defaultsDeep from 'lodash/defaultsDeep' import { getDefaultUnitByCoinType, getCurrencyByCoinType } from '@ledgerhq/currencies' @@ -24,11 +25,19 @@ function orderAccountsTransactions(account: Account) { } } +function applyDefaults(account) { + return defaultsDeep(account, { + settings: { + minConfirmations: 2, + }, + }) +} + const handlers: Object = { SET_ACCOUNTS: ( state: AccountsState, { payload: accounts }: { payload: Accounts }, - ): AccountsState => accounts, + ): AccountsState => accounts.map(applyDefaults), ADD_ACCOUNT: ( state: AccountsState,