aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components
diff options
context:
space:
mode:
authorAlexander Tseung <alextsg@gmail.com>2018-09-01 03:37:30 +0800
committerAlexander Tseung <alextsg@gmail.com>2018-09-13 10:48:52 +0800
commit01e9f03701751ba7cf4ee33961725982b3d63680 (patch)
tree5aef6b9a8c86848f8494fc238424dce193279e09 /ui/app/components
parent5beb34aa521efe50057b494ec3b52004a9cb5817 (diff)
downloadtangerine-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/components')
-rw-r--r--ui/app/components/transaction-list-item/index.scss37
-rw-r--r--ui/app/components/transaction-list-item/transaction-list-item.component.js43
-rw-r--r--ui/app/components/transaction-list/index.scss3
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 {