mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 09:57:02 +01:00
Replaced ActionableMessage in confirm-page-container-content (#20417)
* Replaced ActionableMessage in confirm-page-container-content * Updated Snapshot of confirm-transaction-base * Updated BannerAlert className * Using component API and replacing ErrorMessage * Update snapshot --------- Co-authored-by: George Marshall <george.marshall@consensys.net>
This commit is contained in:
Pritam Dhara
GitHub
parent
cde910faec
commit
6512cacec8
@ -2,15 +2,17 @@ import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import { Tabs, Tab } from '../../../ui/tabs';
|
||||
import {
|
||||
///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask)
|
||||
import Button from '../../../ui/button';
|
||||
Button,
|
||||
BUTTON_SIZES,
|
||||
BUTTON_VARIANT,
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
import ActionableMessage from '../../../ui/actionable-message/actionable-message';
|
||||
BannerAlert,
|
||||
} from '../../../component-library';
|
||||
import { PageContainerFooter } from '../../../ui/page-container';
|
||||
import ErrorMessage from '../../../ui/error-message';
|
||||
import { INSUFFICIENT_FUNDS_ERROR_KEY } from '../../../../helpers/constants/error-keys';
|
||||
import Typography from '../../../ui/typography';
|
||||
import { TypographyVariant } from '../../../../helpers/constants/design-system';
|
||||
import { Severity } from '../../../../helpers/constants/design-system';
|
||||
|
||||
import { isSuspiciousResponse } from '../../../../../shared/modules/security-provider.utils';
|
||||
///: BEGIN:ONLY_INCLUDE_IN(blockaid)
|
||||
@ -256,46 +258,42 @@ export default class ConfirmPageContainerContent extends Component {
|
||||
{!supportsEIP1559 &&
|
||||
!showInsuffienctFundsError &&
|
||||
(errorKey || errorMessage) && (
|
||||
<div className="confirm-page-container-content__error-container">
|
||||
<ErrorMessage errorMessage={errorMessage} errorKey={errorKey} />
|
||||
</div>
|
||||
<BannerAlert
|
||||
severity={Severity.Danger}
|
||||
description={errorKey ? t(errorKey) : errorMessage}
|
||||
marginBottom={4}
|
||||
marginLeft={4}
|
||||
marginRight={4}
|
||||
/>
|
||||
)}
|
||||
{showInsuffienctFundsError && (
|
||||
<div className="confirm-page-container-content__error-container">
|
||||
<ActionableMessage
|
||||
className="actionable-message--warning"
|
||||
message={
|
||||
isBuyableChain ? (
|
||||
<Typography variant={TypographyVariant.H7} align="left">
|
||||
{t('insufficientCurrencyBuyOrDeposit', [
|
||||
<BannerAlert
|
||||
severity={Severity.Danger}
|
||||
marginBottom={4}
|
||||
marginLeft={4}
|
||||
marginRight={4}
|
||||
description={
|
||||
isBuyableChain
|
||||
? t('insufficientCurrencyBuyOrDeposit', [
|
||||
nativeCurrency,
|
||||
networkName,
|
||||
///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask)
|
||||
<Button
|
||||
type="inline"
|
||||
className="confirm-page-container-content__link"
|
||||
variant={BUTTON_VARIANT.LINK}
|
||||
size={BUTTON_SIZES.INHERIT}
|
||||
onClick={openBuyCryptoInPdapp}
|
||||
key={`${nativeCurrency}-buy-button`}
|
||||
>
|
||||
{t('buyAsset', [nativeCurrency])}
|
||||
</Button>,
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
])}
|
||||
</Typography>
|
||||
) : (
|
||||
<Typography variant={TypographyVariant.H7} align="left">
|
||||
{t('insufficientCurrencyDeposit', [
|
||||
])
|
||||
: t('insufficientCurrencyDeposit', [
|
||||
nativeCurrency,
|
||||
networkName,
|
||||
])}
|
||||
</Typography>
|
||||
)
|
||||
])
|
||||
}
|
||||
useIcon
|
||||
iconFillColor="var(--color-error-default)"
|
||||
type="danger"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<PageContainerFooter
|
||||
onCancel={onCancel}
|
||||
|
||||
@ -12,10 +12,6 @@
|
||||
border-top: 1px solid var(--color-border-muted);
|
||||
}
|
||||
|
||||
&__error-container {
|
||||
padding: 0 16px 16px 16px;
|
||||
}
|
||||
|
||||
&__details {
|
||||
box-sizing: border-box;
|
||||
padding: 0 24px;
|
||||
|
||||
@ -489,30 +489,21 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="confirm-page-container-content__error-container"
|
||||
class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger box--margin-right-4 box--margin-bottom-4 box--margin-left-4 box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-error-muted box--rounded-sm"
|
||||
>
|
||||
<div
|
||||
class="actionable-message actionable-message--danger actionable-message--warning actionable-message--with-icon"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 10 10"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5 0C2.2 0 0 2.2 0 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 2c.4 0 .7.3.7.7s-.3.7-.7.7-.7-.2-.7-.6.3-.8.7-.8zm.7 6H4.3V4.3h1.5V8z"
|
||||
fill="var(--color-error-default)"
|
||||
<span
|
||||
class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-error-default"
|
||||
style="mask-image: url('./images/icons/danger.svg');"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div
|
||||
class="actionable-message__message"
|
||||
>
|
||||
<h6
|
||||
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--align-left typography--color-text-default"
|
||||
<div>
|
||||
<p
|
||||
class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
|
||||
>
|
||||
You do not have enough in your account to pay for transaction fees on Goerli network. Deposit from another account.
|
||||
</h6>
|
||||
</div>
|
||||
</p>
|
||||
<p
|
||||
class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
||||
Loading…
Reference in New Issue
Block a user