arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-30 20:28:09 +00:00
Code Issues Releases Wiki Activity

more responsive pending tx

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/Transaction/index.js
View File

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

7
src/views/Wallet/views/Account/Send/components/PendingTransactions/index.js
View File

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