diff options
author | Alexander Tseung <alextsg@gmail.com> | 2018-09-01 03:37:30 +0800 |
---|---|---|
committer | Alexander Tseung <alextsg@gmail.com> | 2018-09-13 10:48:52 +0800 |
commit | 01e9f03701751ba7cf4ee33961725982b3d63680 (patch) | |
tree | 5aef6b9a8c86848f8494fc238424dce193279e09 /ui/app | |
parent | 5beb34aa521efe50057b494ec3b52004a9cb5817 (diff) | |
download | tangerine-wallet-browser-01e9f03701751ba7cf4ee33961725982b3d63680.tar tangerine-wallet-browser-01e9f03701751ba7cf4ee33961725982b3d63680.tar.gz tangerine-wallet-browser-01e9f03701751ba7cf4ee33961725982b3d63680.tar.bz2 tangerine-wallet-browser-01e9f03701751ba7cf4ee33961725982b3d63680.tar.lz tangerine-wallet-browser-01e9f03701751ba7cf4ee33961725982b3d63680.tar.xz tangerine-wallet-browser-01e9f03701751ba7cf4ee33961725982b3d63680.tar.zst tangerine-wallet-browser-01e9f03701751ba7cf4ee33961725982b3d63680.zip |
Add transaction details to TransactionListItem component
Diffstat (limited to 'ui/app')
3 files changed, 46 insertions, 37 deletions
diff --git a/ui/app/components/transaction-list-item/index.scss b/ui/app/components/transaction-list-item/index.scss index 9c53c8960..427686c29 100644 --- a/ui/app/components/transaction-list-item/index.scss +++ b/ui/app/components/transaction-list-item/index.scss @@ -1,37 +1,34 @@ .transaction-list-item { box-sizing: border-box; min-height: 74px; - padding: 8px 20px; border-bottom: 1px solid $geyser; - cursor: pointer; display: flex; justify-content: center; align-items: center; flex-direction: column; - @media screen and (max-width: $break-small) { - padding: 8px 20px 12px; - } - - &:hover { - background: rgba($alto, .2); - } - &__grid { + cursor: pointer; width: 100%; + padding: 16px 20px; display: grid; grid-template-columns: 45px 1fr 1fr 1fr; grid-template-areas: "identicon action status primary-amount" "identicon nonce status secondary-amount"; - @media screen and (max-width: $break-small) { - grid-template-columns: 45px 5fr 3fr; - grid-template-areas: - "nonce nonce nonce" - "identicon action primary-amount" - "identicon status secondary-amount"; - } + @media screen and (max-width: $break-small) { + padding: 8px 20px 12px; + grid-template-columns: 45px 5fr 3fr; + grid-template-areas: + "nonce nonce nonce" + "identicon action primary-amount" + "identicon status secondary-amount"; + } + + &:hover { + background: rgba($alto, .2); + } } &__identicon { @@ -114,4 +111,10 @@ font-size: .5rem; } } + + &__details-container { + padding: 8px 16px 16px; + background: #f3f4f7; + width: 100%; + } } diff --git a/ui/app/components/transaction-list-item/transaction-list-item.component.js b/ui/app/components/transaction-list-item/transaction-list-item.component.js index 75b41a477..d895b8e26 100644 --- a/ui/app/components/transaction-list-item/transaction-list-item.component.js +++ b/ui/app/components/transaction-list-item/transaction-list-item.component.js @@ -5,7 +5,7 @@ import TransactionStatus from '../transaction-status' import TransactionAction from '../transaction-action' import CurrencyDisplay from '../currency-display' import TokenCurrencyDisplay from '../token-currency-display' -import prefixForNetwork from '../../../lib/etherscan-prefix-for-network' +import TransactionListItemDetails from '../transaction-list-item-details' import { CONFIRM_TRANSACTION_ROUTE } from '../../routes' import { UNAPPROVED_STATUS, TOKEN_METHOD_TRANSFER } from '../../constants/transactions' import { ETH } from '../../constants/common' @@ -24,17 +24,21 @@ export default class TransactionListItem extends PureComponent { assetImages: PropTypes.object, } + state = { + showTransactionDetails: false, + } + handleClick = () => { const { transaction, history } = this.props - const { id, status, hash, metamaskNetworkId } = transaction + const { id, status } = transaction + const { showTransactionDetails } = this.state if (status === UNAPPROVED_STATUS) { history.push(`${CONFIRM_TRANSACTION_ROUTE}/${id}`) - } else if (hash) { - const prefix = prefixForNetwork(metamaskNetworkId) - const etherscanUrl = `https://${prefix}etherscan.io/tx/${hash}` - global.platform.openWindow({ url: etherscanUrl }) + return } + + this.setState({ showTransactionDetails: !showTransactionDetails }) } handleRetryClick = event => { @@ -75,6 +79,8 @@ export default class TransactionListItem extends PureComponent { className="transaction-list-item__amount transaction-list-item__amount--primary" value={value} prefix="-" + numberOfDecimals={2} + currency={ETH} /> ) } @@ -89,8 +95,6 @@ export default class TransactionListItem extends PureComponent { className="transaction-list-item__amount transaction-list-item__amount--secondary" prefix="-" value={value} - numberOfDecimals={2} - currency={ETH} /> ) } @@ -104,13 +108,14 @@ export default class TransactionListItem extends PureComponent { assetImages, } = this.props const { txParams = {} } = transaction + const { showTransactionDetails } = this.state return ( - <div - className="transaction-list-item" - onClick={this.handleClick} - > - <div className="transaction-list-item__grid"> + <div className="transaction-list-item"> + <div + className="transaction-list-item__grid" + onClick={this.handleClick} + > <Identicon className="transaction-list-item__identicon" address={txParams.to} @@ -141,12 +146,12 @@ export default class TransactionListItem extends PureComponent { { this.renderSecondaryCurrency() } </div> { - showRetry && methodData.done && ( - <div - className="transaction-list-item__retry" - onClick={this.handleRetryClick} - > - <span>Taking too long? Increase the gas price on your transaction</span> + showTransactionDetails && ( + <div className="transaction-list-item__details-container"> + <TransactionListItemDetails + transaction={transaction} + showRetry={showRetry && methodData.done} + /> </div> ) } diff --git a/ui/app/components/transaction-list/index.scss b/ui/app/components/transaction-list/index.scss index 0e8db485c..d944ef20e 100644 --- a/ui/app/components/transaction-list/index.scss +++ b/ui/app/components/transaction-list/index.scss @@ -7,7 +7,7 @@ &__completed-transactions { display: flex; flex-direction: column; - height: 100%; + flex: 1; } &__header { @@ -35,6 +35,7 @@ flex: 1; display: grid; grid-template-rows: 35% 1fr; + padding-top: 8px; } &__empty-text { |