mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
UX: Multichain: Use Modal for AccountListMenu (#19809)
* UX: Multichain: Use Modal for AccountListMenu * Update ui/components/multichain/account-list-menu/account-list-menu.js Co-authored-by: George Marshall <george.marshall@consensys.net> --------- Co-authored-by: George Marshall <george.marshall@consensys.net> Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>
This commit is contained in:
David Walsh
GitHub
parent
a2730d46fb
commit
64813fb660
@ -1,4 +1,4 @@
|
||||
import React, { useState, useContext, useRef, useEffect } from 'react';
|
||||
import React, { useState, useContext } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import Fuse from 'fuse.js';
|
||||
@ -9,6 +9,10 @@ import {
|
||||
TextFieldSearch,
|
||||
Text,
|
||||
Box,
|
||||
Modal,
|
||||
ModalContent,
|
||||
ModalOverlay,
|
||||
ModalHeader,
|
||||
} from '../../component-library';
|
||||
import { AccountListItem, CreateAccount, ImportAccount } from '..';
|
||||
import {
|
||||
@ -18,7 +22,6 @@ import {
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import { useI18nContext } from '../../../hooks/useI18nContext';
|
||||
import { MetaMetricsContext } from '../../../contexts/metametrics';
|
||||
import Popover from '../../ui/popover';
|
||||
import {
|
||||
getSelectedAccount,
|
||||
getMetaMaskAccountsOrdered,
|
||||
@ -52,7 +55,6 @@ export const AccountListMenu = ({ onClose }) => {
|
||||
const currentTabOrigin = useSelector(getOriginOfCurrentTab);
|
||||
const history = useHistory();
|
||||
const dispatch = useDispatch();
|
||||
const inputRef = useRef();
|
||||
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [actionMode, setActionMode] = useState('');
|
||||
@ -71,13 +73,6 @@ export const AccountListMenu = ({ onClose }) => {
|
||||
searchResults = fuse.search(searchQuery);
|
||||
}
|
||||
|
||||
// Focus on the search box when the popover is opened
|
||||
useEffect(() => {
|
||||
if (inputRef.current) {
|
||||
inputRef.current.rootNode.querySelector('input[type=search]')?.focus();
|
||||
}
|
||||
}, [inputRef]);
|
||||
|
||||
let title = t('selectAnAccount');
|
||||
if (actionMode === 'add') {
|
||||
title = t('addAccount');
|
||||
@ -86,225 +81,244 @@ export const AccountListMenu = ({ onClose }) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<Popover
|
||||
title={title}
|
||||
ref={inputRef}
|
||||
centerTitle
|
||||
onClose={onClose}
|
||||
onBack={actionMode === '' ? null : () => setActionMode('')}
|
||||
className="multichain-account-menu-popover"
|
||||
>
|
||||
{actionMode === 'add' ? (
|
||||
<Box paddingLeft={4} paddingRight={4} paddingBottom={4} paddingTop={0}>
|
||||
<CreateAccount
|
||||
onActionComplete={(confirmed) => {
|
||||
if (confirmed) {
|
||||
dispatch(toggleAccountMenu());
|
||||
} else {
|
||||
setActionMode('');
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
) : null}
|
||||
{actionMode === 'import' ? (
|
||||
<Box paddingLeft={4} paddingRight={4} paddingBottom={4} paddingTop={0}>
|
||||
<ImportAccount
|
||||
onActionComplete={(confirmed) => {
|
||||
if (confirmed) {
|
||||
dispatch(toggleAccountMenu());
|
||||
} else {
|
||||
setActionMode('');
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
) : null}
|
||||
{actionMode === '' ? (
|
||||
<Box>
|
||||
{/* Search box */}
|
||||
{accounts.length > 1 ? (
|
||||
<Box
|
||||
paddingLeft={4}
|
||||
paddingRight={4}
|
||||
paddingBottom={4}
|
||||
paddingTop={0}
|
||||
>
|
||||
<TextFieldSearch
|
||||
size={Size.SM}
|
||||
width={BlockSize.Full}
|
||||
placeholder={t('searchAccounts')}
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
clearButtonOnClick={() => setSearchQuery('')}
|
||||
clearButtonProps={{
|
||||
size: Size.SM,
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
) : null}
|
||||
{/* Account list block */}
|
||||
<Box className="multichain-account-menu-popover__list">
|
||||
{searchResults.length === 0 && searchQuery !== '' ? (
|
||||
<Text
|
||||
<Modal isOpen onClose={onClose}>
|
||||
<ModalOverlay />
|
||||
<ModalContent
|
||||
className="multichain-account-menu-popover"
|
||||
modalDialogProps={{ padding: 0, marginBottom: 0 }}
|
||||
>
|
||||
<ModalHeader
|
||||
paddingTop={4}
|
||||
paddingRight={4}
|
||||
paddingBottom={6}
|
||||
onClose={onClose}
|
||||
onBack={actionMode === '' ? null : () => setActionMode('')}
|
||||
>
|
||||
{title}
|
||||
</ModalHeader>
|
||||
{actionMode === 'add' ? (
|
||||
<Box
|
||||
paddingLeft={4}
|
||||
paddingRight={4}
|
||||
paddingBottom={4}
|
||||
paddingTop={0}
|
||||
>
|
||||
<CreateAccount
|
||||
onActionComplete={(confirmed) => {
|
||||
if (confirmed) {
|
||||
dispatch(toggleAccountMenu());
|
||||
} else {
|
||||
setActionMode('');
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
) : null}
|
||||
{actionMode === 'import' ? (
|
||||
<Box
|
||||
paddingLeft={4}
|
||||
paddingRight={4}
|
||||
paddingBottom={4}
|
||||
paddingTop={0}
|
||||
>
|
||||
<ImportAccount
|
||||
onActionComplete={(confirmed) => {
|
||||
if (confirmed) {
|
||||
dispatch(toggleAccountMenu());
|
||||
} else {
|
||||
setActionMode('');
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
) : null}
|
||||
{actionMode === '' ? (
|
||||
<Box>
|
||||
{/* Search box */}
|
||||
{accounts.length > 1 ? (
|
||||
<Box
|
||||
paddingLeft={4}
|
||||
paddingRight={4}
|
||||
color={TextColor.textMuted}
|
||||
data-testid="multichain-account-menu-popover-no-results"
|
||||
paddingBottom={4}
|
||||
paddingTop={0}
|
||||
>
|
||||
{t('noAccountsFound')}
|
||||
</Text>
|
||||
<TextFieldSearch
|
||||
size={Size.SM}
|
||||
width={BlockSize.Full}
|
||||
placeholder={t('searchAccounts')}
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
clearButtonOnClick={() => setSearchQuery('')}
|
||||
clearButtonProps={{
|
||||
size: Size.SM,
|
||||
}}
|
||||
inputProps={{ autoFocus: true }}
|
||||
/>
|
||||
</Box>
|
||||
) : null}
|
||||
{searchResults.map((account) => {
|
||||
const connectedSite = connectedSites[account.address]?.find(
|
||||
({ origin }) => origin === currentTabOrigin,
|
||||
);
|
||||
{/* Account list block */}
|
||||
<Box className="multichain-account-menu-popover__list">
|
||||
{searchResults.length === 0 && searchQuery !== '' ? (
|
||||
<Text
|
||||
paddingLeft={4}
|
||||
paddingRight={4}
|
||||
color={TextColor.textMuted}
|
||||
data-testid="multichain-account-menu-popover-no-results"
|
||||
>
|
||||
{t('noAccountsFound')}
|
||||
</Text>
|
||||
) : null}
|
||||
{searchResults.map((account) => {
|
||||
const connectedSite = connectedSites[account.address]?.find(
|
||||
({ origin }) => origin === currentTabOrigin,
|
||||
);
|
||||
|
||||
return (
|
||||
<AccountListItem
|
||||
return (
|
||||
<AccountListItem
|
||||
onClick={() => {
|
||||
dispatch(toggleAccountMenu());
|
||||
trackEvent({
|
||||
category: MetaMetricsEventCategory.Navigation,
|
||||
event: MetaMetricsEventName.NavAccountSwitched,
|
||||
properties: {
|
||||
location: 'Main Menu',
|
||||
},
|
||||
});
|
||||
dispatch(setSelectedAccount(account.address));
|
||||
}}
|
||||
identity={account}
|
||||
key={account.address}
|
||||
selected={selectedAccount.address === account.address}
|
||||
closeMenu={onClose}
|
||||
connectedAvatar={connectedSite?.iconUrl}
|
||||
connectedAvatarName={connectedSite?.name}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
{/* Add / Import / Hardware */}
|
||||
<Box padding={4}>
|
||||
<Box marginBottom={4}>
|
||||
<ButtonLink
|
||||
size={Size.SM}
|
||||
startIconName={IconName.Add}
|
||||
onClick={() => {
|
||||
dispatch(toggleAccountMenu());
|
||||
trackEvent({
|
||||
category: MetaMetricsEventCategory.Navigation,
|
||||
event: MetaMetricsEventName.NavAccountSwitched,
|
||||
event: MetaMetricsEventName.AccountAddSelected,
|
||||
properties: {
|
||||
account_type: MetaMetricsEventAccountType.Default,
|
||||
location: 'Main Menu',
|
||||
},
|
||||
});
|
||||
dispatch(setSelectedAccount(account.address));
|
||||
setActionMode('add');
|
||||
}}
|
||||
identity={account}
|
||||
key={account.address}
|
||||
selected={selectedAccount.address === account.address}
|
||||
closeMenu={onClose}
|
||||
connectedAvatar={connectedSite?.iconUrl}
|
||||
connectedAvatarName={connectedSite?.name}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
{/* Add / Import / Hardware */}
|
||||
<Box padding={4}>
|
||||
<Box marginBottom={4}>
|
||||
<ButtonLink
|
||||
size={Size.SM}
|
||||
startIconName={IconName.Add}
|
||||
onClick={() => {
|
||||
trackEvent({
|
||||
category: MetaMetricsEventCategory.Navigation,
|
||||
event: MetaMetricsEventName.AccountAddSelected,
|
||||
properties: {
|
||||
account_type: MetaMetricsEventAccountType.Default,
|
||||
location: 'Main Menu',
|
||||
},
|
||||
});
|
||||
setActionMode('add');
|
||||
}}
|
||||
data-testid="multichain-account-menu-popover-add-account"
|
||||
>
|
||||
{t('addAccount')}
|
||||
</ButtonLink>
|
||||
</Box>
|
||||
<Box marginBottom={4}>
|
||||
<ButtonLink
|
||||
size={Size.SM}
|
||||
startIconName={IconName.Import}
|
||||
onClick={() => {
|
||||
trackEvent({
|
||||
category: MetaMetricsEventCategory.Navigation,
|
||||
event: MetaMetricsEventName.AccountAddSelected,
|
||||
properties: {
|
||||
account_type: MetaMetricsEventAccountType.Imported,
|
||||
location: 'Main Menu',
|
||||
},
|
||||
});
|
||||
setActionMode('import');
|
||||
}}
|
||||
>
|
||||
{t('importAccount')}
|
||||
</ButtonLink>
|
||||
</Box>
|
||||
<Box marginBottom={4}>
|
||||
<ButtonLink
|
||||
size={Size.SM}
|
||||
startIconName={IconName.Hardware}
|
||||
onClick={() => {
|
||||
dispatch(toggleAccountMenu());
|
||||
trackEvent({
|
||||
category: MetaMetricsEventCategory.Navigation,
|
||||
event: MetaMetricsEventName.AccountAddSelected,
|
||||
properties: {
|
||||
account_type: MetaMetricsEventAccountType.Hardware,
|
||||
location: 'Main Menu',
|
||||
},
|
||||
});
|
||||
if (getEnvironmentType() === ENVIRONMENT_TYPE_POPUP) {
|
||||
global.platform.openExtensionInBrowser(
|
||||
CONNECT_HARDWARE_ROUTE,
|
||||
);
|
||||
} else {
|
||||
history.push(CONNECT_HARDWARE_ROUTE);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{t('hardwareWallet')}
|
||||
</ButtonLink>
|
||||
</Box>
|
||||
{
|
||||
///: BEGIN:ONLY_INCLUDE_IN(keyring-snaps)
|
||||
<>
|
||||
<Box marginTop={4}>
|
||||
<ButtonLink
|
||||
size={Size.SM}
|
||||
startIconName={IconName.Snaps}
|
||||
onClick={() => {
|
||||
dispatch(toggleAccountMenu());
|
||||
getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
|
||||
? global.platform.openExtensionInBrowser(
|
||||
ADD_SNAP_ACCOUNT_ROUTE,
|
||||
null,
|
||||
true,
|
||||
)
|
||||
: history.push(ADD_SNAP_ACCOUNT_ROUTE);
|
||||
}}
|
||||
>
|
||||
{t('settingAddSnapAccount')}
|
||||
</ButtonLink>
|
||||
</Box>
|
||||
</>
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
}
|
||||
{
|
||||
///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
|
||||
<Box>
|
||||
data-testid="multichain-account-menu-popover-add-account"
|
||||
>
|
||||
{t('addAccount')}
|
||||
</ButtonLink>
|
||||
</Box>
|
||||
<Box marginBottom={4}>
|
||||
<ButtonLink
|
||||
size={Size.SM}
|
||||
startIconName={IconName.Custody}
|
||||
startIconName={IconName.Import}
|
||||
onClick={() => {
|
||||
trackEvent({
|
||||
category: MetaMetricsEventCategory.Navigation,
|
||||
event: MetaMetricsEventName.AccountAddSelected,
|
||||
properties: {
|
||||
account_type: MetaMetricsEventAccountType.Imported,
|
||||
location: 'Main Menu',
|
||||
},
|
||||
});
|
||||
setActionMode('import');
|
||||
}}
|
||||
>
|
||||
{t('importAccount')}
|
||||
</ButtonLink>
|
||||
</Box>
|
||||
<Box marginBottom={4}>
|
||||
<ButtonLink
|
||||
size={Size.SM}
|
||||
startIconName={IconName.Hardware}
|
||||
onClick={() => {
|
||||
dispatch(toggleAccountMenu());
|
||||
trackEvent({
|
||||
category: MetaMetricsEventCategory.Navigation,
|
||||
event:
|
||||
MetaMetricsEventName.UserClickedConnectCustodialAccount,
|
||||
event: MetaMetricsEventName.AccountAddSelected,
|
||||
properties: {
|
||||
account_type: MetaMetricsEventAccountType.Hardware,
|
||||
location: 'Main Menu',
|
||||
},
|
||||
});
|
||||
if (getEnvironmentType() === ENVIRONMENT_TYPE_POPUP) {
|
||||
global.platform.openExtensionInBrowser(
|
||||
CUSTODY_ACCOUNT_ROUTE,
|
||||
CONNECT_HARDWARE_ROUTE,
|
||||
);
|
||||
} else {
|
||||
history.push(CUSTODY_ACCOUNT_ROUTE);
|
||||
history.push(CONNECT_HARDWARE_ROUTE);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{t('connectCustodialAccountMenu')}
|
||||
{t('hardwareWallet')}
|
||||
</ButtonLink>
|
||||
</Box>
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
}
|
||||
{
|
||||
///: BEGIN:ONLY_INCLUDE_IN(keyring-snaps)
|
||||
<>
|
||||
<Box marginTop={4}>
|
||||
<ButtonLink
|
||||
size={Size.SM}
|
||||
startIconName={IconName.Snaps}
|
||||
onClick={() => {
|
||||
dispatch(toggleAccountMenu());
|
||||
getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
|
||||
? global.platform.openExtensionInBrowser(
|
||||
ADD_SNAP_ACCOUNT_ROUTE,
|
||||
null,
|
||||
true,
|
||||
)
|
||||
: history.push(ADD_SNAP_ACCOUNT_ROUTE);
|
||||
}}
|
||||
>
|
||||
{t('settingAddSnapAccount')}
|
||||
</ButtonLink>
|
||||
</Box>
|
||||
</>
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
}
|
||||
{
|
||||
///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
|
||||
<Box>
|
||||
<ButtonLink
|
||||
size={Size.SM}
|
||||
startIconName={IconName.Custody}
|
||||
onClick={() => {
|
||||
dispatch(toggleAccountMenu());
|
||||
trackEvent({
|
||||
category: MetaMetricsEventCategory.Navigation,
|
||||
event:
|
||||
MetaMetricsEventName.UserClickedConnectCustodialAccount,
|
||||
});
|
||||
if (getEnvironmentType() === ENVIRONMENT_TYPE_POPUP) {
|
||||
global.platform.openExtensionInBrowser(
|
||||
CUSTODY_ACCOUNT_ROUTE,
|
||||
);
|
||||
} else {
|
||||
history.push(CUSTODY_ACCOUNT_ROUTE);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{t('connectCustodialAccountMenu')}
|
||||
</ButtonLink>
|
||||
</Box>
|
||||
///: END:ONLY_INCLUDE_IN
|
||||
}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
) : null}
|
||||
</Popover>
|
||||
) : null}
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user