m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 18:00:18 +01:00
Code

Overflow primaryCurrency in tx-list-item & use primaryCurrency for tx breakdown details. (#9539)

Browse Source 
* Set result of calcTokenAmount to base 10 string in useTokenDisplayValue

* Use primaryCurrency for amount in transaction breakdownd details

* Hidden overflow and text overflow ellipsis on long primary currency in transaction-list-item

* Empty prefix for token approvals

* Conditional render primaryCurrency title in tx breakdown to `Spend limit amount` when tx is a token approve.

* Add title to primaryCurrency in tx list item to show full amount on hover

* Update ui/app/components/app/transaction-breakdown/transaction-breakdown.component.js

DRY title conditional rendering.

Co-authored-by: Mark Stacey <markjstacey@gmail.com>
This commit is contained in:
Thomas Huang 2020-10-09 13:11:39 -07:00 committed by GitHub
parent 24d7d1ae2a
commit ac8f673716
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 29 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/_locales/en/messages.json
View File

@ -1498,6 +1498,9 @@
"speedUpTransaction": {
"message": "Speed up this transaction"
},
"spendLimitAmount": {
"message": "Spend limit amount"
},
"spendLimitInsufficient": {
"message": "Spend limit insufficient"
},

19
ui/app/components/app/transaction-breakdown/transaction-breakdown.component.js
View File

@ -17,9 +17,10 @@ export default class TransactionBreakdown extends PureComponent {
nativeCurrency: PropTypes.string,
showFiat: PropTypes.bool,
nonce: PropTypes.string,
primaryCurrency: PropTypes.string,
isTokenApprove: PropTypes.bool,
gas: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
gasPrice: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
gasUsed: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
totalInHex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
}
@ -30,7 +31,7 @@ export default class TransactionBreakdown extends PureComponent {
render () {
const { t } = this.context
const { gas, gasPrice, value, className, nonce, nativeCurrency, showFiat, totalInHex, gasUsed } = this.props
const { gas, gasPrice, primaryCurrency, className, nonce, nativeCurrency, showFiat, totalInHex, gasUsed, isTokenApprove } = this.props
return (
<div className={classnames('transaction-breakdown', className)}>
<div className="transaction-breakdown__title">
@ -47,12 +48,14 @@ export default class TransactionBreakdown extends PureComponent {
)
}
</TransactionBreakdownRow>
<TransactionBreakdownRow title={t('amount')}>
<UserPreferencedCurrencyDisplay
className="transaction-breakdown__value"
type={PRIMARY}
value={value}
/>
<TransactionBreakdownRow
title={
isTokenApprove
? t('spendLimitAmount')
: t('amount')
}
>
<span className="transaction-breakdown__value">{primaryCurrency}</span>
</TransactionBreakdownRow>
<TransactionBreakdownRow
title={`${t('gasLimit')} (${t('units')})`}

6
ui/app/components/app/transaction-breakdown/transaction-breakdown.container.js
View File

@ -2,13 +2,15 @@ import { connect } from 'react-redux'
import { getIsMainnet, getNativeCurrency, getPreferences } from '../../../selectors'
import { getHexGasTotal } from '../../../helpers/utils/confirm-tx.util'
import { sumHexes } from '../../../helpers/utils/transactions.util'
import { TOKEN_METHOD_APPROVE } from '../../../helpers/constants/transactions'
import TransactionBreakdown from './transaction-breakdown.component'
const mapStateToProps = (state, ownProps) => {
const { transaction } = ownProps
const { transaction, transactionCategory } = ownProps
const { txParams: { gas, gasPrice, value } = {}, txReceipt: { gasUsed } = {} } = transaction
const { showFiatInTestnets } = getPreferences(state)
const isMainnet = getIsMainnet(state)
const isTokenApprove = transactionCategory === TOKEN_METHOD_APPROVE
const gasLimit = typeof gasUsed === 'string' ? gasUsed : gas
@ -21,8 +23,8 @@ const mapStateToProps = (state, ownProps) => {
totalInHex,
gas,
gasPrice,
value,
gasUsed,
isTokenApprove,
}
}

6
ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js
View File

@ -31,6 +31,7 @@ export default class TransactionListItemDetails extends PureComponent {
showRetry: PropTypes.bool,
isEarliestNonce: PropTypes.bool,
cancelDisabled: PropTypes.bool,
primaryCurrency: PropTypes.string,
transactionGroup: PropTypes.object,
title: PropTypes.string.isRequired,
onClose: PropTypes.func.isRequired,
@ -143,6 +144,7 @@ export default class TransactionListItemDetails extends PureComponent {
const { justCopied } = this.state
const {
transactionGroup,
primaryCurrency,
showSpeedUp,
showRetry,
recipientEns,
@ -155,7 +157,7 @@ export default class TransactionListItemDetails extends PureComponent {
onClose,
recipientNickname,
} = this.props
const { primaryTransaction: transaction } = transactionGroup
const { primaryTransaction: transaction, initialTransaction: { transactionCategory } } = transactionGroup
const { hash } = transaction
return (
@ -251,7 +253,9 @@ export default class TransactionListItemDetails extends PureComponent {
<div className="transaction-list-item-details__cards-container">
<TransactionBreakdown
nonce={transactionGroup.initialTransaction.txParams.nonce}
transactionCategory={transactionCategory}
transaction={transaction}
primaryCurrency={primaryCurrency}
className="transaction-list-item-details__transaction-breakdown"
/>
<TransactionActivityLog

2
ui/app/components/app/transaction-list-item/index.scss
View File

@ -1,6 +1,8 @@
.transaction-list-item {
&__primary-currency {
color: $Black-100;
overflow: hidden;
text-overflow: ellipsis;
}
&__secondary-currency {

3
ui/app/components/app/transaction-list-item/transaction-list-item.component.js
View File

@ -143,7 +143,7 @@ export default function TransactionListItem ({ transactionGroup, isEarliestNonce
)}
rightContent={!isSignatureReq && !isApproval && (
<>
<h2 className="transaction-list-item__primary-currency">{primaryCurrency}</h2>
<h2 title={primaryCurrency} className="transaction-list-item__primary-currency">{primaryCurrency}</h2>
<h3 className="transaction-list-item__secondary-currency">{secondaryCurrency}</h3>
</>
)}
@ -158,6 +158,7 @@ export default function TransactionListItem ({ transactionGroup, isEarliestNonce
title={title}
onClose={toggleShowDetails}
transactionGroup={transactionGroup}
primaryCurrency={primaryCurrency}
senderAddress={senderAddress}
recipientAddress={recipientAddress}
onRetry={retryTransaction}

2
ui/app/hooks/useTokenDisplayValue.js
View File

@ -42,7 +42,7 @@ export function useTokenDisplayValue (transactionData, token, isTokenTransaction
return null
}
const tokenValue = getTokenValueParam(tokenData)
return calcTokenAmount(tokenValue, token.decimals).toString()
return calcTokenAmount(tokenValue, token.decimals).toString(10)
}, [shouldCalculateTokenValue, tokenData, token])
return displayValue

1
ui/app/hooks/useTransactionDisplayData.js
View File

@ -153,6 +153,7 @@ export function useTransactionDisplayData (transactionGroup) {
primarySuffix = primaryTransaction.sourceTokenSymbol
} else if (transactionCategory === TOKEN_METHOD_APPROVE) {
category = TRANSACTION_CATEGORY_APPROVAL
prefix = ''
title = t('approveSpendLimit', [token?.symbol || t('token')])
subtitle = origin
subtitleContainsOrigin = true