m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

EIP-1559 - Implement TransactionDetail for confirmations (#11404)

Browse Source
This commit is contained in:
David Walsh 2021-06-30 11:58:18 -05:00 committed by GitHub
parent 5b08a6b94a
commit 36d3770b42
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 101 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2367,6 +2367,12 @@
"transactionCreated": {
"message": "Transaction created with a value of $1 at $2."
},
"transactionDetailGasHeading": {
"message": "Estimated gas fee"
},
"transactionDetailGasTotalSubtitle": {
"message": "Amount + gas fee"
},
"transactionDropped": {
"message": "Transaction dropped at $2."
},

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

@ -27,13 +27,17 @@ export default function TransactionDetailItem({
{detailTitle}
</Typography>
{detailText && (
<Typography className="transaction-detail-item__detail-text">
<Typography
variant={TYPOGRAPHY.H6}
className="transaction-detail-item__detail-text"
>
{detailText}
</Typography>
)}
<Typography
color={COLORS.BLACK}
fontWeight={FONT_WEIGHT.BOLD}
variant={TYPOGRAPHY.H6}
className="transaction-detail-item__total"
>
{detailTotal}

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

@ -31,6 +31,10 @@ import { getTransactionTypeTitle } from '../../helpers/utils/transactions.util';
import ErrorMessage from '../../components/ui/error-message';
import { toBuffer } from '../../../shared/modules/buffer-utils';
import TransactionDetail from '../../components/app/transaction-detail/transaction-detail.component';
import TransactionDetailItem from '../../components/app/transaction-detail-item/transaction-detail-item.component';
import InfoTooltip from '../../components/ui/info-tooltip/info-tooltip';
export default class ConfirmTransactionBase extends Component {
static contextTypes = {
t: PropTypes.func,
@ -301,6 +305,91 @@ export default class ConfirmTransactionBase extends Component {
/>
);
const nonceField = useNonceField ? (
<div>
<div className="confirm-detail-row">
<div className="confirm-detail-row__label">
{t('nonceFieldHeading')}
</div>
<div className="custom-nonce-input">
<TextField
type="number"
min="0"
placeholder={
typeof nextNonce === 'number' ? nextNonce.toString() : null
}
onChange={({ target: { value } }) => {
if (!value.length || Number(value) < 0) {
updateCustomNonce('');
} else {
updateCustomNonce(String(Math.floor(value)));
}
getNextNonce();
}}
fullWidth
margin="dense"
value={customNonceValue || ''}
/>
</div>
</div>
</div>
) : null;
if (process.env.SHOW_EIP_1559_UI) {
return (
<div className="confirm-page-container-content__details">
<TransactionDetail
rows={[
<TransactionDetailItem
key="gas-item"
detailTitle={
<>
{t('transactionDetailGasHeading')}
<InfoTooltip contentText="" position="top">
<i className="fa fa-info-circle" />
</InfoTooltip>
</>
}
detailText={
<UserPreferencedCurrencyDisplay
type={PRIMARY}
value={hexTransactionFee}
hideLabel={false}
/>
}
detailTotal={
<UserPreferencedCurrencyDisplay
type={SECONDARY}
value={hexTransactionFee}
hideLabel
/>
}
/>,
<TransactionDetailItem
key="total-item"
detailTitle={t('total')}
detailText={
<UserPreferencedCurrencyDisplay
type={PRIMARY}
value={hexTransactionTotal}
hideLabel={false}
/>
}
detailTotal={
<UserPreferencedCurrencyDisplay
type={SECONDARY}
value={hexTransactionTotal}
hideLabel
/>
}
subTitle={t('transactionDetailGasTotalSubtitle')}
/>,
]}
/>
</div>
);
}
return (
<div className="confirm-page-container-content__details">
<div className="confirm-page-container-content__gas-fee">
@ -350,35 +439,7 @@ export default class ConfirmTransactionBase extends Component {
primaryValueTextColor="#2f9ae0"
/>
</div>
{useNonceField ? (
<div>
<div className="confirm-detail-row">
<div className="confirm-detail-row__label">
{t('nonceFieldHeading')}
</div>
<div className="custom-nonce-input">
<TextField
type="number"
min="0"
placeholder={
typeof nextNonce === 'number' ? nextNonce.toString() : null
}
onChange={({ target: { value } }) => {
if (!value.length || Number(value) < 0) {
updateCustomNonce('');
} else {
updateCustomNonce(String(Math.floor(value)));
}
getNextNonce();
}}
fullWidth
margin="dense"
value={customNonceValue || ''}
/>
</div>
</div>
</div>
) : null}
{nonceField}
</div>
);
}