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

EIP-1559 - Implement new verbiage for transaction detail subtext (#11569)

Browse Source
This commit is contained in:
David Walsh 2021-07-22 11:33:34 -05:00 committed by GitHub
parent 286fd397f8
commit c1d96676b5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 53 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -689,6 +689,14 @@
"editGasPriceTooltip": {
"message": "This network requires a “Gas price” field when submitting a transaction. Gas price is the amount you will pay pay per unit of gas."
},
"editGasSubTextAmount": {
"message": "Max amount: $1",
"description": "$1 represents a dollar amount"
},
"editGasSubTextFee": {
"message": "Max fee: $1",
"description": "$1 represents a dollar amount"
},
"editGasTitle": {
"message": "Edit priority"
},

4
ui/components/app/transaction-detail-item/index.scss
View File

@ -31,4 +31,8 @@
&__subtitle {
flex-grow: 1;
}
&__subtext {
text-align: end;
}
}

9
ui/components/app/transaction-detail-item/transaction-detail-item.component.js
View File

@ -46,7 +46,6 @@ export default function TransactionDetailItem({
</Typography>
</div>
<div className="transaction-detail-item__row">
{subTitle && (
<Typography
variant={TYPOGRAPHY.H7}
className="transaction-detail-item__subtitle"
@ -54,8 +53,12 @@ export default function TransactionDetailItem({
>
{subTitle}
</Typography>
)}
<Typography variant={TYPOGRAPHY.H7} color={COLORS.UI4}>
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.UI4}
className="transaction-detail-item__subtext"
>
{subText}
</Typography>
</div>

29
ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
View File

@ -6,6 +6,8 @@ import ConfirmPageContainer, {
ConfirmDetailRow,
} from '../../components/app/confirm-page-container';
import { isBalanceSufficient } from '../send/send.utils';
import { getHexGasTotal } from '../../helpers/utils/confirm-tx.util';
import { addHexes, hexToDecimal } from '../../helpers/utils/conversions.util';
import {
CONFIRM_TRANSACTION_ROUTE,
DEFAULT_ROUTE,
@ -19,7 +21,7 @@ import {
} from '../../helpers/constants/error-keys';
import UserPreferencedCurrencyDisplay from '../../components/app/user-preferenced-currency-display';
import { PRIMARY, SECONDARY } from '../../helpers/constants/common';
import { hexToDecimal } from '../../helpers/utils/conversions.util';
import AdvancedGasInputs from '../../components/app/gas-customization/advanced-gas-inputs';
import TextField from '../../components/ui/text-field';
import AdvancedGasControls from '../../components/app/advanced-gas-controls';
@ -416,6 +418,17 @@ export default class ConfirmTransactionBase extends Component {
hideLabel
/>
}
subText={t('editGasSubTextFee', [
<UserPreferencedCurrencyDisplay
key="gas-subtext"
type={SECONDARY}
value={getHexGasTotal({
gasPrice: txData.txParams.maxFeePerGas,
gasLimit: txData.txParams.gas,
})}
hideLabel
/>,
])}
/>,
<TransactionDetailItem
key="total-item"
@ -435,6 +448,20 @@ export default class ConfirmTransactionBase extends Component {
/>
}
subTitle={t('transactionDetailGasTotalSubtitle')}
subText={t('editGasSubTextAmount', [
<UserPreferencedCurrencyDisplay
key="gas-total-subtext"
type={SECONDARY}
value={addHexes(
txData.txParams.value,
getHexGasTotal({
gasPrice: txData.txParams.maxFeePerGas,
gasLimit: txData.txParams.gas,
}),
)}
hideLabel
/>,
])}
/>,
]}
/>