m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01:00
Code

Use PageContainerFooter to render footer on all confirmation pages (#17316)

Browse Source
This commit is contained in:
Jyoti Puri 2023-01-23 20:52:12 +05:30 committed by GitHub
parent f137995641
commit 3e523e2382
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 146 additions and 286 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
test/e2e/tests/eth-sign.spec.js
View File

@ -54,7 +54,7 @@ describe('Eth sign', function () {
const personalMessage = await personalMessageRow.getText();
assert.equal(personalMessage, expectedPersonalMessage);
await driver.clickElement('[data-testid="request-signature__sign"]');
await driver.clickElement('[data-testid="page-container-footer-next"]');
await driver.clickElement(
'.signature-request-warning__footer__sign-button',
);

2
test/e2e/tests/personal-sign.spec.js
View File

@ -44,7 +44,7 @@ describe('Personal sign', function () {
const personalMessage = await personalMessageRow.getText();
assert.equal(personalMessage, 'Example `personal_sign` message');
await driver.clickElement('[data-testid="request-signature__sign"]');
await driver.clickElement('[data-testid="page-container-footer-next"]');
// Switch to the Dapp
await driver.waitUntilXWindowHandles(2);

35
ui/components/app/signature-request-original/__snapshots__/signature-request-original.test.js.snap
View File

@ -170,23 +170,26 @@ exports[`SignatureRequestOriginal should match snapshot 1`] = `
</div>
</div>
<div
class="request-signature__footer"
class="page-container__footer"
>
<button
class="button btn--rounded btn-secondary btn--large request-signature__footer__cancel-button"
role="button"
tabindex="0"
>
Reject
</button>
<button
class="button btn--rounded btn-primary btn--large request-signature__footer__sign-button"
data-testid="request-signature__sign"
role="button"
tabindex="0"
>
Sign
</button>
<footer>
<button
class="button btn--rounded btn-secondary page-container__footer-button"
data-testid="page-container-footer-cancel"
role="button"
tabindex="0"
>
Reject
</button>
<button
class="button btn--rounded btn-primary page-container__footer-button"
data-testid="page-container-footer-next"
role="button"
tabindex="0"
>
Sign
</button>
</footer>
</div>
</div>
</div>

21
ui/components/app/signature-request-original/index.scss
View File

@ -132,25 +132,4 @@
color: var(--color-primary-default);
margin-inline-start: 3px;
}
&__footer {
@include H3;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
flex: 0 0 auto;
border-top: 1px solid var(--color-border-default);
padding: 1.6rem;
button {
width: 165px;
}
&__cancel-button {
margin-right: 1.2rem;
}
}
}

48
ui/components/app/signature-request-original/signature-request-original.component.js
View File

@ -12,6 +12,7 @@ import Button from '../../ui/button';
import SiteOrigin from '../../ui/site-origin';
import NetworkAccountBalanceHeader from '../network-account-balance-header';
import Typography from '../../ui/typography/typography';
import { PageContainerFooter } from '../../ui/page-container';
import {
TYPOGRAPHY,
FONT_WEIGHT,
@ -216,38 +217,25 @@ export default class SignatureRequestOriginal extends Component {
const { t } = this.context;
return (
<div className="request-signature__footer">
<Button
type="secondary"
large
className="request-signature__footer__cancel-button"
onClick={async (event) => {
await cancel(event);
<PageContainerFooter
cancelText={t('reject')}
submitText={t('sign')}
onCancel={async (event) => {
await cancel(event);
clearConfirmTransaction();
history.push(mostRecentOverviewPage);
}}
onSubmit={async (event) => {
if (type === MESSAGE_TYPE.ETH_SIGN) {
this.setState({ showSignatureRequestWarning: true });
} else {
await sign(event);
clearConfirmTransaction();
history.push(mostRecentOverviewPage);
}}
>
{t('reject')}
</Button>
<Button
data-testid="request-signature__sign"
type="primary"
large
className="request-signature__footer__sign-button"
disabled={hardwareWalletRequiresConnection}
onClick={async (event) => {
if (type === MESSAGE_TYPE.ETH_SIGN) {
this.setState({ showSignatureRequestWarning: true });
} else {
await sign(event);
clearConfirmTransaction();
history.push(mostRecentOverviewPage);
}
}}
>
{t('sign')}
</Button>
</div>
}
}}
disabled={hardwareWalletRequiresConnection}
/>
);
};

2
ui/components/app/signature-request-original/signature-request-original.test.js
View File

@ -81,7 +81,7 @@ describe('SignatureRequestOriginal', () => {
it('should render warning for eth sign when sign button clicked', () => {
render();
const signButton = screen.getByTestId('request-signature__sign');
const signButton = screen.getByTestId('page-container-footer-next');
fireEvent.click(signButton);
expect(screen.getByText('Your funds may be at risk')).toBeInTheDocument();

36
ui/components/app/signature-request/__snapshots__/signature-request.component.test.js.snap
View File

@ -680,24 +680,26 @@ exports[`Signature Request Component render should match snapshot 1`] = `
</div>
</div>
<div
class="signature-request-footer"
class="page-container__footer"
>
<button
class="button btn--rounded btn-secondary"
data-testid="signature-cancel-button"
role="button"
tabindex="0"
>
Reject
</button>
<button
class="button btn--rounded btn-primary"
data-testid="signature-sign-button"
role="button"
tabindex="0"
>
Sign
</button>
<footer>
<button
class="button btn--rounded btn-secondary page-container__footer-button"
data-testid="page-container-footer-cancel"
role="button"
tabindex="0"
>
Reject
</button>
<button
class="button btn--rounded btn-primary page-container__footer-button"
data-testid="page-container-footer-next"
role="button"
tabindex="0"
>
Sign
</button>
</footer>
</div>
</div>
</div>

1
ui/components/app/signature-request/index.scss
View File

@ -1,4 +1,3 @@
@import 'signature-request-footer/index';
@import 'signature-request-header/index';
@import 'signature-request-message/index';
@import 'signature-request-data/index';

24
ui/components/app/signature-request/signature-request-footer/index.scss
View File

@ -1,24 +0,0 @@
.signature-request-footer {
display: flex;
box-shadow: inset 0 1px 0 var(--color-border-muted);
button {
text-transform: uppercase;
flex: 1;
margin: 1rem 0.5rem;
}
button:first-child {
flex: 1 1 100%;
padding: 0;
}
button:last-child {
flex: 1 1 100%;
margin-right: 1rem;
}
&__tooltip {
display: flex;
}
}

27
ui/components/app/signature-request/signature-request-footer/signature-request-footer.component.js
View File

@ -1,6 +1,7 @@
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import Button from '../../../ui/button';
import { PageContainerFooter } from '../../../ui/page-container';
export default class SignatureRequestFooter extends PureComponent {
static propTypes = {
@ -16,23 +17,13 @@ export default class SignatureRequestFooter extends PureComponent {
render() {
const { cancelAction, signAction, disabled = false } = this.props;
return (
<div className="signature-request-footer">
<Button
onClick={cancelAction}
type="secondary"
data-testid="signature-cancel-button"
>
{this.context.t('reject')}
</Button>
<Button
onClick={signAction}
type="primary"
data-testid="signature-sign-button"
disabled={disabled}
>
{this.context.t('sign')}
</Button>
</div>
<PageContainerFooter
cancelText={this.context.t('reject')}
submitText={this.context.t('sign')}
onCancel={cancelAction}
onSubmit={signAction}
disabled={disabled}
/>
);
}
}

4
ui/components/app/signature-request/signature-request.container.test.js
View File

@ -105,7 +105,7 @@ describe('Signature Request', () => {
});
it('cancel', () => {
const cancelButton = screen.getByTestId('signature-cancel-button');
const cancelButton = screen.getByTestId('page-container-footer-cancel');
fireEvent.click(cancelButton);
@ -113,7 +113,7 @@ describe('Signature Request', () => {
});
it('sign', () => {
const signButton = screen.getByTestId('signature-sign-button');
const signButton = screen.getByTestId('page-container-footer-next');
fireEvent.click(signButton);

1
ui/components/ui/page-container/index.scss
View File

@ -56,6 +56,7 @@
justify-content: center;
border-top: 1px solid var(--color-border-muted);
flex: 0 0 auto;
width: 100%;
footer {
display: flex;

39
ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.js
View File

@ -5,6 +5,7 @@ import ActionableMessage from '../../components/ui/actionable-message/actionable
import Button from '../../components/ui/button';
import Identicon from '../../components/ui/identicon';
import TokenBalance from '../../components/ui/token-balance';
import { PageContainerFooter } from '../../components/ui/page-container';
import { I18nContext } from '../../contexts/i18n';
import { MetaMetricsContext } from '../../contexts/metametrics';
import { getMostRecentOverviewPage } from '../../ducks/history/history';
@ -193,32 +194,18 @@ const ConfirmAddSuggestedToken = () => {
</div>
</div>
</div>
<div className="page-container__footer">
<footer>
<Button
type="secondary"
large
className="page-container__footer-button"
onClick={async () => {
await Promise.all(
suggestedAssets.map(({ id }) => dispatch(rejectWatchAsset(id))),
);
history.push(mostRecentOverviewPage);
}}
>
{t('cancel')}
</Button>
<Button
type="primary"
large
className="page-container__footer-button"
disabled={suggestedAssets.length === 0}
onClick={handleAddTokensClick}
>
{t('addToken')}
</Button>
</footer>
</div>
<PageContainerFooter
cancelText={t('cancel')}
submitText={t('addToken')}
onCancel={async () => {
await Promise.all(
suggestedAssets.map(({ id }) => dispatch(rejectWatchAsset(id))),
);
history.push(mostRecentOverviewPage);
}}
onSubmit={handleAddTokensClick}
disabled={suggestedAssets.length === 0}
/>
</div>
);
};

74
ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js
View File

@ -4,10 +4,10 @@ import copyToClipboard from 'copy-to-clipboard';
import classnames from 'classnames';
import AccountListItem from '../../components/app/account-list-item';
import Button from '../../components/ui/button';
import Identicon from '../../components/ui/identicon';
import Tooltip from '../../components/ui/tooltip';
import Copy from '../../components/ui/icon/copy-icon.component';
import { PageContainerFooter } from '../../components/ui/page-container';
import { EVENT } from '../../../shared/constants/metametrics';
import { SECOND } from '../../../shared/constants/time';
@ -258,48 +258,36 @@ export default class ConfirmDecryptMessage extends Component {
const { trackEvent, t } = this.context;
return (
<div className="request-decrypt-message__footer">
<Button
type="secondary"
large
className="request-decrypt-message__footer__cancel-button"
onClick={async (event) => {
await cancelDecryptMessage(txData, event);
trackEvent({
category: EVENT.CATEGORIES.MESSAGES,
event: 'Cancel',
properties: {
action: 'Decrypt Message Request',
legacy_event: true,
},
});
clearConfirmTransaction();
history.push(mostRecentOverviewPage);
}}
>
{t('cancel')}
</Button>
<Button
type="primary"
large
className="request-decrypt-message__footer__sign-button"
onClick={async (event) => {
await decryptMessage(txData, event);
trackEvent({
category: EVENT.CATEGORIES.MESSAGES,
event: 'Confirm',
properties: {
action: 'Decrypt Message Request',
legacy_event: true,
},
});
clearConfirmTransaction();
history.push(mostRecentOverviewPage);
}}
>
{t('decrypt')}
</Button>
</div>
<PageContainerFooter
cancelText={t('cancel')}
submitText={t('decrypt')}
onCancel={async (event) => {
await cancelDecryptMessage(txData, event);
trackEvent({
category: EVENT.CATEGORIES.MESSAGES,
event: 'Cancel',
properties: {
action: 'Decrypt Message Request',
legacy_event: true,
},
});
clearConfirmTransaction();
history.push(mostRecentOverviewPage);
}}
onSubmit={async (event) => {
await decryptMessage(txData, event);
trackEvent({
category: EVENT.CATEGORIES.MESSAGES,
event: 'Confirm',
properties: {
action: 'Decrypt Message Request',
legacy_event: true,
},
});
clearConfirmTransaction();
history.push(mostRecentOverviewPage);
}}
/>
);
};

21
ui/pages/confirm-decrypt-message/confirm-decrypt-message.scss
View File

@ -243,27 +243,6 @@
}
}
&__footer {
@include H4;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
flex: 0 0 auto;
border-top: 1px solid var(--color-border-default);
padding: 1.6rem;
button {
width: 165px;
}
&__cancel-button {
margin-right: 1.2rem;
}
}
&__visual {
display: flex;
flex-direction: row;

74
ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js
View File

@ -2,8 +2,8 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import AccountListItem from '../../components/app/account-list-item';
import Button from '../../components/ui/button';
import Identicon from '../../components/ui/identicon';
import { PageContainerFooter } from '../../components/ui/page-container';
import { EVENT } from '../../../shared/constants/metametrics';
import { conversionUtil } from '../../../shared/modules/conversion.utils';
@ -161,48 +161,36 @@ export default class ConfirmEncryptionPublicKey extends Component {
const { t, trackEvent } = this.context;
return (
<div className="request-encryption-public-key__footer">
<Button
type="secondary"
large
className="request-encryption-public-key__footer__cancel-button"
onClick={async (event) => {
await cancelEncryptionPublicKey(txData, event);
trackEvent({
category: EVENT.CATEGORIES.MESSAGES,
event: 'Cancel',
properties: {
action: 'Encryption public key Request',
legacy_event: true,
},
});
clearConfirmTransaction();
history.push(mostRecentOverviewPage);
}}
>
{this.context.t('cancel')}
</Button>
<Button
type="primary"
large
className="request-encryption-public-key__footer__sign-button"
onClick={async (event) => {
await encryptionPublicKey(txData, event);
this.context.trackEvent({
category: EVENT.CATEGORIES.MESSAGES,
event: 'Confirm',
properties: {
action: 'Encryption public key Request',
legacy_event: true,
},
});
clearConfirmTransaction();
history.push(mostRecentOverviewPage);
}}
>
{t('provide')}
</Button>
</div>
<PageContainerFooter
cancelText={t('cancel')}
submitText={t('provide')}
onCancel={async (event) => {
await cancelEncryptionPublicKey(txData, event);
trackEvent({
category: EVENT.CATEGORIES.MESSAGES,
event: 'Cancel',
properties: {
action: 'Encryption public key Request',
legacy_event: true,
},
});
clearConfirmTransaction();
history.push(mostRecentOverviewPage);
}}
onSubmit={async (event) => {
await encryptionPublicKey(txData, event);
this.context.trackEvent({
category: EVENT.CATEGORIES.MESSAGES,
event: 'Confirm',
properties: {
action: 'Encryption public key Request',
legacy_event: true,
},
});
clearConfirmTransaction();
history.push(mostRecentOverviewPage);
}}
/>
);
};

21
ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.scss
View File

@ -165,27 +165,6 @@
color: var(--color-text-alternative);
}
&__footer {
@include H3;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
flex: 0 0 auto;
border-top: 1px solid var(--color-border-muted);
padding: 1.6rem;
button {
width: 165px;
}
&__cancel-button {
margin-right: 1.2rem;
}
}
&__visual {
display: flex;
flex-direction: row;