|
@ -9,7 +9,7 @@ import noop from 'lodash/noop' |
|
|
import isEqual from 'lodash/isEqual' |
|
|
import isEqual from 'lodash/isEqual' |
|
|
import { getIconByCoinType } from '@ledgerhq/currencies/react' |
|
|
import { getIconByCoinType } from '@ledgerhq/currencies/react' |
|
|
|
|
|
|
|
|
import type { Transaction as TransactionType, T } from 'types/common' |
|
|
import type { Operation as OperationType, T } from 'types/common' |
|
|
|
|
|
|
|
|
import IconAngleDown from 'icons/AngleDown' |
|
|
import IconAngleDown from 'icons/AngleDown' |
|
|
import Box, { Card } from 'components/base/Box' |
|
|
import Box, { Card } from 'components/base/Box' |
|
@ -55,7 +55,7 @@ HeaderCol.defaultProps = { |
|
|
children: undefined, |
|
|
children: undefined, |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const TransactionRaw = styled(Box).attrs({ |
|
|
const OperationRaw = styled(Box).attrs({ |
|
|
horizontal: true, |
|
|
horizontal: true, |
|
|
alignItems: 'center', |
|
|
alignItems: 'center', |
|
|
})` |
|
|
})` |
|
@ -97,7 +97,7 @@ const ShowMore = styled(Box).attrs({ |
|
|
} |
|
|
} |
|
|
` |
|
|
` |
|
|
|
|
|
|
|
|
const Transaction = ({ |
|
|
const Operation = ({ |
|
|
t, |
|
|
t, |
|
|
onAccountClick, |
|
|
onAccountClick, |
|
|
tx, |
|
|
tx, |
|
@ -106,14 +106,14 @@ const Transaction = ({ |
|
|
}: { |
|
|
}: { |
|
|
t: T, |
|
|
t: T, |
|
|
onAccountClick?: Function, |
|
|
onAccountClick?: Function, |
|
|
tx: TransactionType, |
|
|
tx: OperationType, |
|
|
withAccounts?: boolean, |
|
|
withAccounts?: boolean, |
|
|
minConfirmations: number, |
|
|
minConfirmations: number, |
|
|
}) => { |
|
|
}) => { |
|
|
const time = moment(tx.receivedAt) |
|
|
const time = moment(tx.receivedAt) |
|
|
const Icon = getIconByCoinType(get(tx, 'account.currency.coinType')) |
|
|
const Icon = getIconByCoinType(get(tx, 'account.currency.coinType')) |
|
|
return ( |
|
|
return ( |
|
|
<TransactionRaw> |
|
|
<OperationRaw> |
|
|
<Cell size={DATE_COL_SIZE} justifyContent="space-between"> |
|
|
<Cell size={DATE_COL_SIZE} justifyContent="space-between"> |
|
|
<Box> |
|
|
<Box> |
|
|
<Day>{time.format('DD MMM')}</Day> |
|
|
<Day>{time.format('DD MMM')}</Day> |
|
@ -149,7 +149,7 @@ const Transaction = ({ |
|
|
}} |
|
|
}} |
|
|
> |
|
|
> |
|
|
<Box ff="Open Sans" fontSize={3} color="graphite"> |
|
|
<Box ff="Open Sans" fontSize={3} color="graphite"> |
|
|
{tx.balance > 0 ? t('transactionsList:from') : t('transactionsList:to')} |
|
|
{tx.amount > 0 ? t('operationsList:from') : t('operationsList:to')} |
|
|
</Box> |
|
|
</Box> |
|
|
<Box |
|
|
<Box |
|
|
color="dark" |
|
|
color="dark" |
|
@ -167,7 +167,7 @@ const Transaction = ({ |
|
|
</Cell> |
|
|
</Cell> |
|
|
<Cell size={AMOUNT_COL_SIZE} justifyContent="flex-end"> |
|
|
<Cell size={AMOUNT_COL_SIZE} justifyContent="flex-end"> |
|
|
<FormattedVal |
|
|
<FormattedVal |
|
|
val={tx.balance} |
|
|
val={tx.amount} |
|
|
unit={get(tx, 'account.unit')} |
|
|
unit={get(tx, 'account.unit')} |
|
|
showCode |
|
|
showCode |
|
|
fontSize={4} |
|
|
fontSize={4} |
|
@ -181,11 +181,11 @@ const Transaction = ({ |
|
|
t={t} |
|
|
t={t} |
|
|
/> |
|
|
/> |
|
|
</Cell> |
|
|
</Cell> |
|
|
</TransactionRaw> |
|
|
</OperationRaw> |
|
|
) |
|
|
) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
Transaction.defaultProps = { |
|
|
Operation.defaultProps = { |
|
|
onAccountClick: noop, |
|
|
onAccountClick: noop, |
|
|
withAccounts: false, |
|
|
withAccounts: false, |
|
|
} |
|
|
} |
|
@ -193,14 +193,14 @@ Transaction.defaultProps = { |
|
|
type Props = { |
|
|
type Props = { |
|
|
t: T, |
|
|
t: T, |
|
|
onAccountClick?: Function, |
|
|
onAccountClick?: Function, |
|
|
transactions: Array<TransactionType>, |
|
|
operations: Array<OperationType>, |
|
|
withAccounts?: boolean, |
|
|
withAccounts?: boolean, |
|
|
minConfirmations: number, |
|
|
minConfirmations: number, |
|
|
title?: string, |
|
|
title?: string, |
|
|
canShowMore: boolean, |
|
|
canShowMore: boolean, |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
class TransactionsList extends Component<Props> { |
|
|
class OperationsList extends Component<Props> { |
|
|
static defaultProps = { |
|
|
static defaultProps = { |
|
|
onAccountClick: noop, |
|
|
onAccountClick: noop, |
|
|
withAccounts: false, |
|
|
withAccounts: false, |
|
@ -221,16 +221,16 @@ class TransactionsList extends Component<Props> { |
|
|
return true |
|
|
return true |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
return !isEqual(this._hashCache, this.getHashCache(nextProps.transactions)) |
|
|
return !isEqual(this._hashCache, this.getHashCache(nextProps.operations)) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
getHashCache = (transactions: Array<TransactionType>) => transactions.map(t => t.hash) |
|
|
getHashCache = (operations: Array<OperationType>) => operations.map(t => t.hash) |
|
|
|
|
|
|
|
|
_hashCache = null |
|
|
_hashCache = null |
|
|
|
|
|
|
|
|
render() { |
|
|
render() { |
|
|
const { |
|
|
const { |
|
|
transactions, |
|
|
operations, |
|
|
title, |
|
|
title, |
|
|
withAccounts, |
|
|
withAccounts, |
|
|
onAccountClick, |
|
|
onAccountClick, |
|
@ -239,26 +239,26 @@ class TransactionsList extends Component<Props> { |
|
|
t, |
|
|
t, |
|
|
} = this.props |
|
|
} = this.props |
|
|
|
|
|
|
|
|
this._hashCache = this.getHashCache(transactions) |
|
|
this._hashCache = this.getHashCache(operations) |
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<Defer> |
|
|
<Defer> |
|
|
<Card flow={1} title={title} p={0}> |
|
|
<Card flow={1} title={title} p={0}> |
|
|
<Box horizontal pt={4}> |
|
|
<Box horizontal pt={4}> |
|
|
<HeaderCol size={DATE_COL_SIZE}>{t('transactionsList:date')}</HeaderCol> |
|
|
<HeaderCol size={DATE_COL_SIZE}>{t('operationsList:date')}</HeaderCol> |
|
|
{withAccounts && ( |
|
|
{withAccounts && ( |
|
|
<HeaderCol size={ACCOUNT_COL_SIZE}>{t('transactionsList:account')}</HeaderCol> |
|
|
<HeaderCol size={ACCOUNT_COL_SIZE}>{t('operationsList:account')}</HeaderCol> |
|
|
)} |
|
|
)} |
|
|
<HeaderCol grow>{t('transactionsList:address')}</HeaderCol> |
|
|
<HeaderCol grow>{t('operationsList:address')}</HeaderCol> |
|
|
<HeaderCol size={AMOUNT_COL_SIZE} justifyContent="flex-end"> |
|
|
<HeaderCol size={AMOUNT_COL_SIZE} justifyContent="flex-end"> |
|
|
{t('transactionsList:amount')} |
|
|
{t('operationsList:amount')} |
|
|
</HeaderCol> |
|
|
</HeaderCol> |
|
|
<HeaderCol size={CONFIRMATION_COL_SIZE} px={0} /> |
|
|
<HeaderCol size={CONFIRMATION_COL_SIZE} px={0} /> |
|
|
</Box> |
|
|
</Box> |
|
|
|
|
|
|
|
|
<Box> |
|
|
<Box> |
|
|
{transactions.map(trans => ( |
|
|
{operations.map(trans => ( |
|
|
<Transaction |
|
|
<Operation |
|
|
t={t} |
|
|
t={t} |
|
|
key={`{${trans.hash}-${trans.account ? trans.account.id : ''}`} |
|
|
key={`{${trans.hash}-${trans.account ? trans.account.id : ''}`} |
|
|
withAccounts={withAccounts} |
|
|
withAccounts={withAccounts} |
|
@ -271,7 +271,7 @@ class TransactionsList extends Component<Props> { |
|
|
|
|
|
|
|
|
{canShowMore && ( |
|
|
{canShowMore && ( |
|
|
<ShowMore> |
|
|
<ShowMore> |
|
|
<span>{t('transactionsList:showMore')}</span> |
|
|
<span>{t('operationsList:showMore')}</span> |
|
|
<IconAngleDown width={8} height={8} /> |
|
|
<IconAngleDown width={8} height={8} /> |
|
|
</ShowMore> |
|
|
</ShowMore> |
|
|
)} |
|
|
)} |
|
@ -281,4 +281,4 @@ class TransactionsList extends Component<Props> { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
export default translate()(TransactionsList) |
|
|
export default translate()(OperationsList) |