feat(transactions): add fee to transactions lists
This commit is contained in:
parent
e5ec33d540
commit
ac2c7c13ea
|
@ -39,16 +39,17 @@ export const TransactionDailyComponent = ({ transactionsDate, transactions, zecP
|
|||
<Day value={transactionsDate} />
|
||||
<TransactionsWrapper>
|
||||
{transactions.map(({
|
||||
date, type, address, amount, transactionId,
|
||||
date, type, address, amount, transactionId, fees,
|
||||
}) => (
|
||||
<Fragment key={`${address}-${type}-${amount}-${date}`}>
|
||||
<TransactionItemComponent
|
||||
transactionId={transactionId}
|
||||
type={type}
|
||||
date={date}
|
||||
address={address || ''}
|
||||
address={address || 'N/A'}
|
||||
amount={amount}
|
||||
zecPrice={zecPrice}
|
||||
fees={fees}
|
||||
/>
|
||||
</Fragment>
|
||||
))}
|
||||
|
|
|
@ -21,7 +21,6 @@ import { ColumnComponent } from './column';
|
|||
import { appTheme } from '../theme';
|
||||
|
||||
import { formatNumber } from '../utils/format-number';
|
||||
import { truncateAddress } from '../utils/truncate-address';
|
||||
import { openExternal } from '../utils/open-external';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
|
@ -127,8 +126,8 @@ type Props = {
|
|||
zecPrice: number,
|
||||
date: string,
|
||||
transactionId: string,
|
||||
from: string,
|
||||
to: string,
|
||||
address: string,
|
||||
fees: number | string,
|
||||
handleClose: () => void,
|
||||
theme: AppTheme,
|
||||
};
|
||||
|
@ -139,35 +138,25 @@ const Component = ({
|
|||
zecPrice,
|
||||
date,
|
||||
transactionId,
|
||||
from,
|
||||
to,
|
||||
address,
|
||||
fees,
|
||||
handleClose,
|
||||
theme,
|
||||
}: Props) => {
|
||||
const isReceived = type === 'receive';
|
||||
const receivedIcon = theme.mode === DARK
|
||||
? ReceivedIconDark
|
||||
: ReceivedIconLight;
|
||||
const sentIcon = theme.mode === DARK
|
||||
? SentIconDark
|
||||
: SentIconLight;
|
||||
const receivedIcon = theme.mode === DARK ? ReceivedIconDark : ReceivedIconLight;
|
||||
const sentIcon = theme.mode === DARK ? SentIconDark : SentIconLight;
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<CloseIconWrapper>
|
||||
<CloseIconImg
|
||||
src={CloseIcon}
|
||||
onClick={handleClose}
|
||||
/>
|
||||
<CloseIconImg src={CloseIcon} onClick={handleClose} />
|
||||
</CloseIconWrapper>
|
||||
<TitleWrapper>
|
||||
<TextComponent value='Transaction Details' align='center' />
|
||||
</TitleWrapper>
|
||||
<DetailsWrapper>
|
||||
<Icon
|
||||
src={isReceived ? receivedIcon : sentIcon}
|
||||
alt='Transaction Type Icon'
|
||||
/>
|
||||
<Icon src={isReceived ? receivedIcon : sentIcon} alt='Transaction Type Icon' />
|
||||
<TextComponent
|
||||
isBold
|
||||
size={2.625}
|
||||
|
@ -194,10 +183,14 @@ const Component = ({
|
|||
<ColumnComponent>
|
||||
<TextComponent value='FEES' isBold color={appTheme.colors.transactionDetailsLabel} />
|
||||
<TextComponent
|
||||
value={formatNumber({
|
||||
value: new BigNumber(amount).times(0.1).toNumber(),
|
||||
value={
|
||||
fees === 'N/A'
|
||||
? 'N/A'
|
||||
: formatNumber({
|
||||
value: new BigNumber(fees).toFormat(4),
|
||||
append: 'ZEC ',
|
||||
})}
|
||||
})
|
||||
}
|
||||
/>
|
||||
</ColumnComponent>
|
||||
</InfoRow>
|
||||
|
@ -207,7 +200,7 @@ const Component = ({
|
|||
<Label value='TRANSACTION ID' />
|
||||
<TransactionId
|
||||
onClick={
|
||||
from !== '(Shielded)'
|
||||
address !== '(Shielded)'
|
||||
? () => openExternal(ZCASH_EXPLORER_BASE_URL + transactionId)
|
||||
: () => {}
|
||||
}
|
||||
|
@ -219,15 +212,8 @@ const Component = ({
|
|||
<Divider />
|
||||
<InfoRow>
|
||||
<ColumnComponent width='100%'>
|
||||
<Label value='FROM' />
|
||||
<Ellipsis value={from} />
|
||||
</ColumnComponent>
|
||||
</InfoRow>
|
||||
<Divider />
|
||||
<InfoRow>
|
||||
<ColumnComponent width='100%'>
|
||||
<Label value='TO' />
|
||||
<Ellipsis value={truncateAddress(to) || 'N/A'} />
|
||||
<Label value='Address' />
|
||||
<Ellipsis value={address} />
|
||||
</ColumnComponent>
|
||||
</InfoRow>
|
||||
</Wrapper>
|
||||
|
|
|
@ -71,6 +71,7 @@ export type Transaction = {
|
|||
date: string,
|
||||
address: string,
|
||||
amount: number,
|
||||
fees: number | string,
|
||||
zecPrice: number,
|
||||
transactionId: string,
|
||||
theme: AppTheme,
|
||||
|
@ -81,6 +82,7 @@ const Component = ({
|
|||
date,
|
||||
address,
|
||||
amount,
|
||||
fees,
|
||||
zecPrice,
|
||||
transactionId,
|
||||
theme,
|
||||
|
@ -97,12 +99,8 @@ const Component = ({
|
|||
});
|
||||
const transactionAddress = truncateAddress(address);
|
||||
|
||||
const receivedIcon = theme.mode === DARK
|
||||
? ReceivedIconDark
|
||||
: ReceivedIconLight;
|
||||
const sentIcon = theme.mode === DARK
|
||||
? SentIconDark
|
||||
: SentIconLight;
|
||||
const receivedIcon = theme.mode === DARK ? ReceivedIconDark : ReceivedIconLight;
|
||||
const sentIcon = theme.mode === DARK ? SentIconDark : SentIconLight;
|
||||
|
||||
return (
|
||||
<ModalComponent
|
||||
|
@ -127,10 +125,7 @@ const Component = ({
|
|||
<TextComponent
|
||||
isBold
|
||||
value={transactionValueInZec}
|
||||
color={isReceived
|
||||
? theme.colors.transactionReceived
|
||||
: theme.colors.transactionSent
|
||||
}
|
||||
color={isReceived ? theme.colors.transactionReceived : theme.colors.transactionSent}
|
||||
/>
|
||||
<TextComponent value={transactionValueInUsd} color={theme.colors.inactiveItem} />
|
||||
</ColumnComponent>
|
||||
|
@ -141,8 +136,8 @@ const Component = ({
|
|||
<TransactionDetailsComponent
|
||||
amount={amount}
|
||||
date={date}
|
||||
from={address}
|
||||
to=''
|
||||
address={address}
|
||||
fees={fees}
|
||||
transactionId={transactionId}
|
||||
handleClose={toggleVisibility}
|
||||
type={type}
|
||||
|
|
|
@ -67,7 +67,7 @@ const QRCodeContainer = styled.div`
|
|||
`;
|
||||
|
||||
const QRCodeWrapper = styled.div`
|
||||
background-color: #FFFFFF;
|
||||
background-color: #ffffff;
|
||||
padding: 10px;
|
||||
`;
|
||||
|
||||
|
@ -139,13 +139,9 @@ class Component extends PureComponent<Props, State> {
|
|||
const { address, theme } = this.props;
|
||||
const { showQRCode, showCopiedTooltip } = this.state;
|
||||
|
||||
const qrCodeIcon = theme.mode === DARK
|
||||
? ScanIconDark
|
||||
: ScanIconLight;
|
||||
const qrCodeIcon = theme.mode === DARK ? ScanIconDark : ScanIconLight;
|
||||
|
||||
const copyIcon = theme.mode === DARK
|
||||
? CopyIconDark
|
||||
: CopyIconLight;
|
||||
const copyIcon = theme.mode === DARK ? CopyIconDark : CopyIconLight;
|
||||
|
||||
return (
|
||||
<ColumnComponent width='100%'>
|
||||
|
@ -155,27 +151,18 @@ class Component extends PureComponent<Props, State> {
|
|||
onClick={this.toggleMoreInfo}
|
||||
onDoubleClick={this.showMoreInfo}
|
||||
/>
|
||||
<CopyToClipboard
|
||||
text={address}
|
||||
onCopy={this.copyAddress}
|
||||
>
|
||||
<CopyToClipboard text={address} onCopy={this.copyAddress}>
|
||||
<IconButton onClick={() => {}}>
|
||||
{!showCopiedTooltip ? null : (
|
||||
<CopyTooltip>
|
||||
<TooltipText value='Copied!' />
|
||||
</CopyTooltip>
|
||||
)}
|
||||
<IconImage
|
||||
src={copyIcon}
|
||||
alt='Copy Address'
|
||||
/>
|
||||
<IconImage src={copyIcon} alt='Copy Address' />
|
||||
</IconButton>
|
||||
</CopyToClipboard>
|
||||
<IconButton onClick={this.toggleMoreInfo}>
|
||||
<IconImage
|
||||
src={qrCodeIcon}
|
||||
alt='See QRCode'
|
||||
/>
|
||||
<IconImage src={qrCodeIcon} alt='See QRCode' />
|
||||
</IconButton>
|
||||
</AddressWrapper>
|
||||
{!showQRCode ? null : (
|
||||
|
|
|
@ -50,11 +50,12 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
|
|||
|
||||
const formattedTransactions: Array<Object> = flow([
|
||||
arr => arr.map(transaction => ({
|
||||
transactionId: transaction.txid,
|
||||
transactionId: transaction.txid || 'N/A',
|
||||
type: transaction.category,
|
||||
date: new Date(transaction.time * 1000).toISOString(),
|
||||
address: transaction.address,
|
||||
amount: Math.abs(transaction.amount),
|
||||
fees: transaction.fee ? new BigNumber(transaction.fee).abs().toFormat(4) : 'N/A',
|
||||
})),
|
||||
arr => groupBy(arr, obj => dateFns.format(obj.date, 'MMM DD, YYYY')),
|
||||
obj => Object.keys(obj).map(day => ({
|
||||
|
|
|
@ -70,6 +70,7 @@ const mapDispatchToProps = (dispatch: Dispatch): MapDispatchToProps => ({
|
|||
date: new Date(transaction.time * 1000).toISOString(),
|
||||
address: transaction.address,
|
||||
amount: new BigNumber(transaction.amount).absoluteValue().toNumber(),
|
||||
fees: transaction.fee ? new BigNumber(transaction.fee).abs().toFormat(4) : 'N/A',
|
||||
})),
|
||||
);
|
||||
|
||||
|
|
|
@ -111,6 +111,7 @@ export class TransactionsView extends PureComponent<Props> {
|
|||
<TransactionItemComponent
|
||||
address={transaction.address}
|
||||
amount={transaction.amount}
|
||||
fees={transaction.fees}
|
||||
date={transaction.date}
|
||||
transactionId={transaction.transactionId}
|
||||
type={transaction.type}
|
||||
|
|
Loading…
Reference in New Issue