mirror of https://github.com/trezor/trezor-wallet
Vladimir Volek
6 years ago
committed by
GitHub
commit
cf76e8cf68
@ -0,0 +1,104 @@
|
||||
/* @flow */
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import colors from 'config/colors';
|
||||
import Link from 'components/Link';
|
||||
|
||||
import type { Transaction, Network } from 'flowtype';
|
||||
|
||||
type Props = {
|
||||
tx: Transaction,
|
||||
network: Network,
|
||||
};
|
||||
|
||||
const Wrapper = styled.div`
|
||||
border-bottom: 1px solid ${colors.DIVIDER};
|
||||
padding: 14px 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0px;
|
||||
}
|
||||
`;
|
||||
|
||||
const Addresses = styled.div`
|
||||
flex: 1;
|
||||
`;
|
||||
|
||||
const Address = styled.div`
|
||||
word-break: break-all;
|
||||
padding: 2px 0px;
|
||||
&:first-child {
|
||||
padding-top: 0px;
|
||||
}
|
||||
&:last-child {
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
`;
|
||||
|
||||
const Date = styled(Link)`
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
padding-right: 8px;
|
||||
border-bottom: 0px;
|
||||
`;
|
||||
|
||||
const Value = styled.div`
|
||||
padding-left: 8px;
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
color: ${colors.GREEN_SECONDARY};
|
||||
|
||||
&.send {
|
||||
color: ${colors.ERROR_PRIMARY};
|
||||
}
|
||||
`;
|
||||
|
||||
const Amount = styled.div`
|
||||
border: 1px;
|
||||
`;
|
||||
|
||||
const Fee = styled.div`
|
||||
border: 1px;
|
||||
`;
|
||||
|
||||
const TransactionItem = ({
|
||||
tx,
|
||||
network,
|
||||
}: Props) => {
|
||||
const url = `${network.explorer.tx}${tx.hash}`;
|
||||
const date = typeof tx.timestamp === 'string' && tx.confirmations > 0 ? tx.timestamp : undefined; // TODO: format date
|
||||
const addresses = (tx.type === 'send' ? tx.outputs : tx.inputs).reduce((arr, item) => arr.concat(item.addresses), []);
|
||||
|
||||
const currency = tx.currency || tx.network;
|
||||
const isToken = currency !== tx.network;
|
||||
const amount = isToken ? `${tx.amount} ${currency}` : `${tx.total} ${network.symbol}`;
|
||||
const fee = isToken && tx.type === 'send' ? `${tx.fee} ${network.symbol}` : undefined;
|
||||
const operation = tx.type === 'send' ? '-' : '+';
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
{ date && (<Date href={url} isGray>{ date }</Date>)}
|
||||
<Addresses>
|
||||
{ addresses.map(addr => (<Address key={addr}>{addr}</Address>)) }
|
||||
{ tx.confirmations <= 0 && (
|
||||
<Date href={url} isGray>Transaction hash: {tx.hash}</Date>
|
||||
)}
|
||||
</Addresses>
|
||||
<Value className={tx.type}>
|
||||
<Amount>{operation}{amount}</Amount>
|
||||
{ fee && (<Fee>{operation}{fee}</Fee>) }
|
||||
</Value>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
TransactionItem.propTypes = {
|
||||
tx: PropTypes.object.isRequired,
|
||||
network: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default TransactionItem;
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
@ -0,0 +1,99 @@
|
||||
export default [
|
||||
{
|
||||
type: 'recv',
|
||||
timestamp: '16:20',
|
||||
address: 'a',
|
||||
deviceState: 'a',
|
||||
status: 'pending',
|
||||
confirmations: 0,
|
||||
inputs: [
|
||||
{
|
||||
addresses: ['in1'],
|
||||
},
|
||||
{
|
||||
addresses: ['in2'],
|
||||
},
|
||||
],
|
||||
outputs: [
|
||||
{
|
||||
addresses: ['out1', 'out2'],
|
||||
},
|
||||
],
|
||||
sequence: 1,
|
||||
hash: '1234',
|
||||
network: 'eth',
|
||||
currency: 'eth',
|
||||
amount: '0.001',
|
||||
total: '0.001001',
|
||||
fee: '0.000001',
|
||||
},
|
||||
|
||||
{
|
||||
type: 'send',
|
||||
address: 'a',
|
||||
deviceState: 'a',
|
||||
confirmations: 0,
|
||||
status: 'pending',
|
||||
inputs: [
|
||||
{
|
||||
addresses: ['in1', 'in2'],
|
||||
},
|
||||
],
|
||||
outputs: [
|
||||
{
|
||||
addresses: ['out1'],
|
||||
},
|
||||
],
|
||||
sequence: 1,
|
||||
hash: '12345',
|
||||
network: 'eth',
|
||||
currency: 'T01',
|
||||
amount: '0.001',
|
||||
total: '0.001001',
|
||||
fee: '0.000001',
|
||||
},
|
||||
|
||||
{
|
||||
address: '0x73d0385F4d8E00C5e6504C6030F47BF6212736A8',
|
||||
amount: '1',
|
||||
confirmations: 0,
|
||||
currency: 'T01',
|
||||
deviceState: '4058d01c7c964787b7d06f0f32ce229088e123a042bf95aad658f1b1b99c73fc',
|
||||
fee: '0.0002',
|
||||
hash: '0xbf6ac83bdf29abacbca91cd4100ddd5cd8de16e72911ea7d1daec17ccbfc6099',
|
||||
inputs: [{
|
||||
addresses: ['0x73d0385F4d8E00C5e6504C6030F47BF6212736A8'],
|
||||
}],
|
||||
network: 'trop',
|
||||
outputs: [{
|
||||
addresses: ['0xFA01a39f8Abaeb660c3137f14A310d0b414b2A15'],
|
||||
}],
|
||||
sequence: 249,
|
||||
status: 'pending',
|
||||
timestamp: '',
|
||||
total: '0.0002',
|
||||
type: 'send',
|
||||
},
|
||||
|
||||
{
|
||||
address: '0x73d0385F4d8E00C5e6504C6030F47BF6212736A8',
|
||||
amount: '1',
|
||||
confirmations: 0,
|
||||
currency: 'trop',
|
||||
deviceState: '4058d01c7c964787b7d06f0f32ce229088e123a042bf95aad658f1b1b99c73fc',
|
||||
fee: '0.0002',
|
||||
hash: '0xbf6ac83bdf29abacbca91cd4100ddd5cd8de16e72911ea7d1daec17ccbfc6099',
|
||||
inputs: [{
|
||||
addresses: ['0x73d0385F4d8E00C5e6504C6030F47BF6212736A8'],
|
||||
}],
|
||||
network: 'trop',
|
||||
outputs: [{
|
||||
addresses: ['0xFA01a39f8Abaeb660c3137f14A310d0b414b2A15'],
|
||||
}],
|
||||
sequence: 249,
|
||||
status: 'pending',
|
||||
timestamp: '',
|
||||
total: '0.0002',
|
||||
type: 'send',
|
||||
},
|
||||
];
|
||||
Loading…
Reference in new issue