You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
1.9 KiB
68 lines
1.9 KiB
// @flow
|
|
|
|
import React, { PureComponent } from 'react'
|
|
import styled from 'styled-components'
|
|
import { rgba } from 'styles/helpers'
|
|
import Box from 'components/base/Box'
|
|
import type { Account, Operation } from '@ledgerhq/live-common/lib/types'
|
|
import type { T } from 'types/common'
|
|
|
|
import ConfirmationCell from './ConfirmationCell'
|
|
import DateCell from './DateCell'
|
|
import AccountCell from './AccountCell'
|
|
import AddressCell from './AddressCell'
|
|
import AmountCell from './AmountCell'
|
|
|
|
const OperationRow = styled(Box).attrs({
|
|
horizontal: true,
|
|
alignItems: 'center',
|
|
})`
|
|
cursor: pointer;
|
|
border-bottom: 1px solid ${p => p.theme.colors.lightGrey};
|
|
height: 68px;
|
|
opacity: ${p => (p.isOptimistic ? 0.5 : 1)};
|
|
|
|
&:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
&:hover {
|
|
background: ${p => rgba(p.theme.colors.wallet, 0.04)};
|
|
}
|
|
`
|
|
|
|
type Props = {
|
|
operation: Operation,
|
|
account: Account,
|
|
onOperationClick: (operation: Operation, account: Account) => void,
|
|
t: T,
|
|
withAccount: boolean,
|
|
}
|
|
|
|
class OperationComponent extends PureComponent<Props> {
|
|
static defaultProps = {
|
|
withAccount: false,
|
|
}
|
|
|
|
onOperationClick = () => {
|
|
const { account, onOperationClick, operation } = this.props
|
|
onOperationClick(operation, account)
|
|
}
|
|
|
|
render() {
|
|
const { account, t, operation, withAccount } = this.props
|
|
const isOptimistic = operation.blockHeight === null
|
|
return (
|
|
<OperationRow isOptimistic={isOptimistic} onClick={this.onOperationClick}>
|
|
<ConfirmationCell operation={operation} account={account} t={t} />
|
|
<DateCell operation={operation} t={t} />
|
|
{withAccount &&
|
|
account && <AccountCell accountName={account.name} currency={account.currency} />}
|
|
<AddressCell operation={operation} />
|
|
<AmountCell operation={operation} currency={account.currency} unit={account.unit} />
|
|
</OperationRow>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default OperationComponent
|
|
|