/* @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.timestamp : undefined; // TODO: format date
const addresses = (tx.type === 'send' ? tx.outputs : tx.inputs).reduce((arr, item) => arr.concat(item.addresses), []);
const operation = tx.type === 'send' ? '-' : '+';
const amount = tx.tokens ? tx.tokens.map(t => ({operation}{t.value} {t.shortcut})) : {operation}{tx.total} {network.symbol};
const fee = tx.tokens && tx.type === 'send' ? `${tx.fee} ${network.symbol}` : undefined;
return (
{ date && ({ date })}
{ addresses.map(addr => ({addr})) }
{ !tx.blockHeight && (
Transaction hash: {tx.hash}
)}
{amount}
{ fee && ({operation}{fee}) }
);
};
TransactionItem.propTypes = {
tx: PropTypes.object.isRequired,
network: PropTypes.object.isRequired,
};
export default TransactionItem;