m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-26 12:29:06 +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": { "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." "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": { "editGasTitle": {
"message": "Edit priority" "message": "Edit priority"
}, },

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

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

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

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

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

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