m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +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 classnames from 'classnames';
import { Tabs, Tab } from '../../../ui/tabs';
///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask)
import Button from '../../../ui/button';
///: END:ONLY_INCLUDE_IN
import ActionableMessage from '../../../ui/actionable-message/actionable-message';
import {
///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask)
Button,
BUTTON_SIZES,
BUTTON_VARIANT,
///: END:ONLY_INCLUDE_IN
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', [
nativeCurrency,
networkName,
///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask)
<Button
type="inline"
className="confirm-page-container-content__link"
onClick={openBuyCryptoInPdapp}
key={`${nativeCurrency}-buy-button`}
>
{t('buyAsset', [nativeCurrency])}
</Button>,
///: END:ONLY_INCLUDE_IN
])}
</Typography>
) : (
<Typography variant={TypographyVariant.H7} align="left">
{t('insufficientCurrencyDeposit', [
nativeCurrency,
networkName,
])}
</Typography>
)
}
useIcon
iconFillColor="var(--color-error-default)"
type="danger"
/>
</div>
<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
variant={BUTTON_VARIANT.LINK}
size={BUTTON_SIZES.INHERIT}
onClick={openBuyCryptoInPdapp}
key={`${nativeCurrency}-buy-button`}
>
{t('buyAsset', [nativeCurrency])}
</Button>,
///: END:ONLY_INCLUDE_IN
])
: t('insufficientCurrencyDeposit', [
nativeCurrency,
networkName,
])
}
/>
)}
<PageContainerFooter
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);
}
&__error-container {
padding: 0 16px 16px 16px;
}
&__details {
box-sizing: border-box;
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
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"
<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');"
/>
<div>
<p
class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
>
<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)"
/>
</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>
You do not have enough in your account to pay for transaction fees on Goerli network. Deposit from another account.
</p>
<p
class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
/>
</div>
</div>
<div