1
0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-30 12:18:09 +00:00

more responsive pending tx

This commit is contained in:
slowbackspace 2019-04-08 11:59:07 +02:00
parent ba50db2881
commit 096f24608d
2 changed files with 22 additions and 5 deletions

View File

@ -2,7 +2,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { SCREEN_SIZE } from 'config/variables';
import { Link, colors } from 'trezor-ui-components';
import type { Transaction, Network } from 'flowtype';
@ -17,14 +17,19 @@ const Wrapper = styled.div`
padding: 14px 0;
display: flex;
flex-direction: row;
word-break: break-all;
&:last-child {
border-bottom: 0px;
}
@media screen and (max-width: ${SCREEN_SIZE.SM}) {
flex-direction: column;
}
`;
const Addresses = styled.div`
flex: 1;
flex: 1 1 auto;
`;
const Address = styled.div`
@ -43,9 +48,16 @@ const Date = styled(Link)`
line-height: 18px;
padding-right: 8px;
border-bottom: 0px;
flex: 0 1 auto;
word-break: normal;
`;
const TransactionHash = styled(Date)`
word-break: break-all;
`;
const Value = styled.div`
flex: 1 1 auto;
padding-left: 8px;
white-space: nowrap;
text-align: right;
@ -100,9 +112,9 @@ const TransactionItem = ({ tx, network }: Props) => {
<Address key={addr}>{addr}</Address>
))}
{!tx.blockHeight && (
<Date href={url} isGray>
<TransactionHash href={url} isGray>
Transaction hash: {tx.hash}
</Date>
</TransactionHash>
)}
</Addresses>
<Value className={tx.type}>

View File

@ -1,7 +1,7 @@
/* @flow */
import React from 'react';
import styled from 'styled-components';
import { colors, H5 } from 'trezor-ui-components';
import { colors, H5, P } from 'trezor-ui-components';
import Transaction from 'components/Transaction';
import type { Network } from 'reducers/LocalStorageReducer';
@ -18,6 +18,8 @@ const Wrapper = styled.div`
border-top: 1px solid ${colors.DIVIDER};
`;
const NoTransactions = styled(P)``;
const PendingTransactions = (props: Props) => {
// const pending = props.pending.filter(tx => !tx.rejected).concat(testData);
const pending = props.pending.filter(tx => !tx.rejected);
@ -25,6 +27,9 @@ const PendingTransactions = (props: Props) => {
return (
<Wrapper>
<H5>Pending transactions</H5>
{pending.length === 0 && (
<NoTransactions>There are no pending transactions</NoTransactions>
)}
{pending.map(tx => (
<Transaction key={tx.hash} network={props.network} tx={tx} />
))}