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:
parent
ba50db2881
commit
096f24608d
@ -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}>
|
||||
|
@ -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} />
|
||||
))}
|
||||
|
Loading…
Reference in New Issue
Block a user