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

Replaced ActionableMessage in confirm-page-container-content (#20417)

Browse Source 
* 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 2023-08-16 03:29:29 +05:30 committed by GitHub
parent cde910faec
commit 6512cacec8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 56 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
View File

@ -2,15 +2,17 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { Tabs, Tab } from '../../../ui/tabs'; import { Tabs, Tab } from '../../../ui/tabs';
///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask) import {
import Button from '../../../ui/button'; ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask)
///: END:ONLY_INCLUDE_IN Button,
import ActionableMessage from '../../../ui/actionable-message/actionable-message'; BUTTON_SIZES,
BUTTON_VARIANT,
///: END:ONLY_INCLUDE_IN
BannerAlert,
} from '../../../component-library';
import { PageContainerFooter } from '../../../ui/page-container'; import { PageContainerFooter } from '../../../ui/page-container';
import ErrorMessage from '../../../ui/error-message';
import { INSUFFICIENT_FUNDS_ERROR_KEY } from '../../../../helpers/constants/error-keys'; import { INSUFFICIENT_FUNDS_ERROR_KEY } from '../../../../helpers/constants/error-keys';
import Typography from '../../../ui/typography'; import { Severity } from '../../../../helpers/constants/design-system';
import { TypographyVariant } from '../../../../helpers/constants/design-system';
import { isSuspiciousResponse } from '../../../../../shared/modules/security-provider.utils'; import { isSuspiciousResponse } from '../../../../../shared/modules/security-provider.utils';
///: BEGIN:ONLY_INCLUDE_IN(blockaid) ///: BEGIN:ONLY_INCLUDE_IN(blockaid)
@ -256,46 +258,42 @@ export default class ConfirmPageContainerContent extends Component {
{!supportsEIP1559 && {!supportsEIP1559 &&
!showInsuffienctFundsError && !showInsuffienctFundsError &&
(errorKey || errorMessage) && ( (errorKey || errorMessage) && (
<div className="confirm-page-container-content__error-container"> <BannerAlert
<ErrorMessage errorMessage={errorMessage} errorKey={errorKey} /> severity={Severity.Danger}
</div> description={errorKey ? t(errorKey) : errorMessage}
marginBottom={4}
marginLeft={4}
marginRight={4}
/>
)} )}
{showInsuffienctFundsError && ( {showInsuffienctFundsError && (
<div className="confirm-page-container-content__error-container"> <BannerAlert
<ActionableMessage severity={Severity.Danger}
className="actionable-message--warning" marginBottom={4}
message={ marginLeft={4}
isBuyableChain ? ( marginRight={4}
<Typography variant={TypographyVariant.H7} align="left"> description={
{t('insufficientCurrencyBuyOrDeposit', [ isBuyableChain
nativeCurrency, ? t('insufficientCurrencyBuyOrDeposit', [
networkName, nativeCurrency,
///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask) networkName,
<Button ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask)
type="inline" <Button
className="confirm-page-container-content__link" variant={BUTTON_VARIANT.LINK}
onClick={openBuyCryptoInPdapp} size={BUTTON_SIZES.INHERIT}
key={`${nativeCurrency}-buy-button`} onClick={openBuyCryptoInPdapp}
> key={`${nativeCurrency}-buy-button`}
{t('buyAsset', [nativeCurrency])} >
</Button>, {t('buyAsset', [nativeCurrency])}
///: END:ONLY_INCLUDE_IN </Button>,
])} ///: END:ONLY_INCLUDE_IN
</Typography> ])
) : ( : t('insufficientCurrencyDeposit', [
<Typography variant={TypographyVariant.H7} align="left"> nativeCurrency,
{t('insufficientCurrencyDeposit', [ networkName,
nativeCurrency, ])
networkName, }
])} />
</Typography>
)
}
useIcon
iconFillColor="var(--color-error-default)"
type="danger"
/>
</div>
)} )}
<PageContainerFooter <PageContainerFooter
onCancel={onCancel} onCancel={onCancel}

4
ui/components/app/confirm-page-container/confirm-page-container-content/index.scss
View File

@ -12,10 +12,6 @@
border-top: 1px solid var(--color-border-muted); border-top: 1px solid var(--color-border-muted);
} }
&__error-container {
padding: 0 16px 16px 16px;
}
&__details { &__details {
box-sizing: border-box; box-sizing: border-box;
padding: 0 24px; padding: 0 24px;

35
ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
View File

@ -489,30 +489,21 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
</div> </div>
</div> </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 <span
class="actionable-message actionable-message--danger actionable-message--warning actionable-message--with-icon" 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 />
viewBox="0 0 10 10" <div>
xmlns="http://www.w3.org/2000/svg" <p
class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
> >
<path You do not have enough in your account to pay for transaction fees on Goerli network. Deposit from another account.
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" </p>
fill="var(--color-error-default)" <p
/> class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
</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"
>
You do not have enough in your account to pay for transaction fees on Goerli network. Deposit from another account.
</h6>
</div>
</div> </div>
</div> </div>
<div <div