mirror of https://github.com/trezor/trezor-wallet
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.
104 lines
2.5 KiB
104 lines
2.5 KiB
5 years ago
|
/* @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;
|