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

UX: Multichain: Convert AccountDetails Popover to Modal (#19811)

Browse Source 
* UX: Multichain: Convert AccountDetails Popover to Modal

* Fix E2E

* updated spec file

---------

Co-authored-by: NidhiKJha <menidhikjha@gmail.com>
This commit is contained in:
David Walsh 2023-07-05 07:57:02 -05:00 committed by GitHub
parent daf373251b
commit 945508c895
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 63 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
test/e2e/tests/import-flow.spec.js
View File

@ -51,14 +51,14 @@ describe('Import flow', function () {
await driver.findVisibleElement('.qr-code__wrapper'); await driver.findVisibleElement('.qr-code__wrapper');
// shows a QR code for the account // shows a QR code for the account
await driver.findVisibleElement('.popover-container'); await driver.findVisibleElement('.mm-modal');
// shows the correct account address // shows the correct account address
const address = await driver.findElement( const address = await driver.findElement(
'.multichain-address-copy-button', '.multichain-address-copy-button',
); );
assert.equal(await address.getText(), '0x0Cc...afD3'); assert.equal(await address.getText(), '0x0Cc...afD3');
await driver.clickElement('[data-testid="popover-close"]'); await driver.clickElement('.mm-modal button[aria-label="Close"]');
// logs out of the account // logs out of the account
await driver.clickElement( await driver.clickElement(

4
test/e2e/tests/incremental-security.spec.js
View File

@ -78,8 +78,8 @@ describe('Incremental Security', function () {
const publicAddress = await address.getText(); const publicAddress = await address.getText();
// wait for account modal to be visible // wait for account modal to be visible
const accountModal = await driver.findVisibleElement('.popover-bg'); const accountModal = await driver.findVisibleElement('.mm-modal');
await driver.clickElement('[data-testid="popover-close"]'); await driver.clickElement('.mm-modal button[aria-label="Close"]');
// wait for account modal to be removed from DOM // wait for account modal to be removed from DOM
await accountModal.waitForElementState('hidden'); await accountModal.waitForElementState('hidden');

137
ui/components/multichain/account-details/account-details.js
View File

@ -1,7 +1,6 @@
import React, { useCallback, useState } from 'react'; import React, { useCallback, useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import Popover from '../../ui/popover/popover.component';
import { import {
setAccountDetailsAddress, setAccountDetailsAddress,
clearAccountDetails, clearAccountDetails,
@ -11,9 +10,10 @@ import {
AvatarAccount, AvatarAccount,
AvatarAccountSize, AvatarAccountSize,
AvatarAccountVariant, AvatarAccountVariant,
ButtonIcon, Modal,
IconName, ModalContent,
PopoverHeader, ModalHeader,
ModalOverlay,
Text, Text,
Box, Box,
} from '../../component-library'; } from '../../component-library';
@ -21,9 +21,7 @@ import { getMetaMaskAccountsOrdered } from '../../../selectors';
import { useI18nContext } from '../../../hooks/useI18nContext'; import { useI18nContext } from '../../../hooks/useI18nContext';
import { import {
AlignItems, AlignItems,
JustifyContent,
TextVariant, TextVariant,
Size,
Display, Display,
FlexDirection, FlexDirection,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
@ -61,85 +59,68 @@ export const AccountDetails = ({ address }) => {
} }
address={address} address={address}
size={AvatarAccountSize.Lg} size={AvatarAccountSize.Lg}
style={{ margin: '0 auto' }}
/> />
); );
return ( return (
<Popover <Modal isOpen onClose={onClose}>
headerProps={{ <ModalOverlay />
paddingBottom: 1, <ModalContent>
}} <ModalHeader
contentProps={{ onClose={onClose}
paddingLeft: 4, onBack={
paddingRight: 4, attemptingExport
paddingBottom: 4, ? () => {
}}
title={
attemptingExport ? (
<PopoverHeader
startAccessory={
<ButtonIcon
onClick={() => {
dispatch(hideWarning()); dispatch(hideWarning());
setAttemptingExport(false); setAttemptingExport(false);
}} }
iconName={IconName.ArrowLeft} : null
size={Size.SM} }
/> >
} {attemptingExport ? t('showPrivateKey') : avatar}
> </ModalHeader>
{t('showPrivateKey')} {attemptingExport ? (
</PopoverHeader> <>
) : ( <Box
<PopoverHeader display={Display.Flex}
childrenWrapperProps={{ alignItems={AlignItems.center}
display: Display.Text, flexDirection={FlexDirection.Column}
justifyContent: JustifyContent.center,
}}
>
<Box paddingLeft={6}>{avatar}</Box>
</PopoverHeader>
)
}
onClose={onClose}
>
{attemptingExport ? (
<>
<Box
display={Display.Flex}
alignItems={AlignItems.center}
flexDirection={FlexDirection.Column}
>
{avatar}
<Text
marginTop={2}
marginBottom={2}
variant={TextVariant.bodyLgMedium}
style={{ wordBreak: 'break-word' }}
> >
{name} {avatar}
</Text> <Text
<AddressCopyButton address={address} shorten /> marginTop={2}
</Box> marginBottom={2}
{privateKey ? ( variant={TextVariant.bodyLgMedium}
<AccountDetailsKey style={{ wordBreak: 'break-word' }}
accountName={name} >
onClose={onClose} {name}
privateKey={privateKey} </Text>
/> <AddressCopyButton address={address} shorten />
) : ( </Box>
<AccountDetailsAuthenticate address={address} onCancel={onClose} /> {privateKey ? (
)} <AccountDetailsKey
</> accountName={name}
) : ( onClose={onClose}
<AccountDetailsDisplay privateKey={privateKey}
accounts={accounts} />
accountName={name} ) : (
address={address} <AccountDetailsAuthenticate
onExportClick={() => setAttemptingExport(true)} address={address}
/> onCancel={onClose}
)} />
</Popover> )}
</>
) : (
<AccountDetailsDisplay
accounts={accounts}
accountName={name}
address={address}
onExportClick={() => setAttemptingExport(true)}
/>
)}
</ModalContent>
</Modal>
); );
}; };