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: Use Modal for AccountListMenu (#19809)

Browse Source 
* 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 2023-07-07 08:48:26 -05:00 committed by GitHub
parent a2730d46fb
commit 64813fb660
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 213 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

412
ui/components/multichain/account-list-menu/account-list-menu.js
View File

@ -1,4 +1,4 @@
import React, { useState, useContext, useRef, useEffect } from 'react'; import React, { useState, useContext } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import Fuse from 'fuse.js'; import Fuse from 'fuse.js';
@ -9,6 +9,10 @@ import {
TextFieldSearch, TextFieldSearch,
Text, Text,
Box, Box,
Modal,
ModalContent,
ModalOverlay,
ModalHeader,
} from '../../component-library'; } from '../../component-library';
import { AccountListItem, CreateAccount, ImportAccount } from '..'; import { AccountListItem, CreateAccount, ImportAccount } from '..';
import { import {
@ -18,7 +22,6 @@ import {
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { useI18nContext } from '../../../hooks/useI18nContext'; import { useI18nContext } from '../../../hooks/useI18nContext';
import { MetaMetricsContext } from '../../../contexts/metametrics'; import { MetaMetricsContext } from '../../../contexts/metametrics';
import Popover from '../../ui/popover';
import { import {
getSelectedAccount, getSelectedAccount,
getMetaMaskAccountsOrdered, getMetaMaskAccountsOrdered,
@ -52,7 +55,6 @@ export const AccountListMenu = ({ onClose }) => {
const currentTabOrigin = useSelector(getOriginOfCurrentTab); const currentTabOrigin = useSelector(getOriginOfCurrentTab);
const history = useHistory(); const history = useHistory();
const dispatch = useDispatch(); const dispatch = useDispatch();
const inputRef = useRef();
const [searchQuery, setSearchQuery] = useState(''); const [searchQuery, setSearchQuery] = useState('');
const [actionMode, setActionMode] = useState(''); const [actionMode, setActionMode] = useState('');
@ -71,13 +73,6 @@ export const AccountListMenu = ({ onClose }) => {
searchResults = fuse.search(searchQuery); 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'); let title = t('selectAnAccount');
if (actionMode === 'add') { if (actionMode === 'add') {
title = t('addAccount'); title = t('addAccount');
@ -86,225 +81,244 @@ export const AccountListMenu = ({ onClose }) => {
} }
return ( return (
<Popover <Modal isOpen onClose={onClose}>
title={title} <ModalOverlay />
ref={inputRef} <ModalContent
centerTitle className="multichain-account-menu-popover"
onClose={onClose} modalDialogProps={{ padding: 0, marginBottom: 0 }}
onBack={actionMode === '' ? null : () => setActionMode('')} >
className="multichain-account-menu-popover" <ModalHeader
> paddingTop={4}
{actionMode === 'add' ? ( paddingRight={4}
<Box paddingLeft={4} paddingRight={4} paddingBottom={4} paddingTop={0}> paddingBottom={6}
<CreateAccount onClose={onClose}
onActionComplete={(confirmed) => { onBack={actionMode === '' ? null : () => setActionMode('')}
if (confirmed) { >
dispatch(toggleAccountMenu()); {title}
} else { </ModalHeader>
setActionMode(''); {actionMode === 'add' ? (
} <Box
}} paddingLeft={4}
/> paddingRight={4}
</Box> paddingBottom={4}
) : null} paddingTop={0}
{actionMode === 'import' ? ( >
<Box paddingLeft={4} paddingRight={4} paddingBottom={4} paddingTop={0}> <CreateAccount
<ImportAccount onActionComplete={(confirmed) => {
onActionComplete={(confirmed) => { if (confirmed) {
if (confirmed) { dispatch(toggleAccountMenu());
dispatch(toggleAccountMenu()); } else {
} else { setActionMode('');
setActionMode(''); }
} }}
}} />
/> </Box>
</Box> ) : null}
) : null} {actionMode === 'import' ? (
{actionMode === '' ? ( <Box
<Box> paddingLeft={4}
{/* Search box */} paddingRight={4}
{accounts.length > 1 ? ( paddingBottom={4}
<Box paddingTop={0}
paddingLeft={4} >
paddingRight={4} <ImportAccount
paddingBottom={4} onActionComplete={(confirmed) => {
paddingTop={0} if (confirmed) {
> dispatch(toggleAccountMenu());
<TextFieldSearch } else {
size={Size.SM} setActionMode('');
width={BlockSize.Full} }
placeholder={t('searchAccounts')} }}
value={searchQuery} />
onChange={(e) => setSearchQuery(e.target.value)} </Box>
clearButtonOnClick={() => setSearchQuery('')} ) : null}
clearButtonProps={{ {actionMode === '' ? (
size: Size.SM, <Box>
}} {/* Search box */}
/> {accounts.length > 1 ? (
</Box> <Box
) : null}
{/* Account list block */}
<Box className="multichain-account-menu-popover__list">
{searchResults.length === 0 && searchQuery !== '' ? (
<Text
paddingLeft={4} paddingLeft={4}
paddingRight={4} paddingRight={4}
color={TextColor.textMuted} paddingBottom={4}
data-testid="multichain-account-menu-popover-no-results" paddingTop={0}
> >
{t('noAccountsFound')} <TextFieldSearch
</Text> 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} ) : null}
{searchResults.map((account) => { {/* Account list block */}
const connectedSite = connectedSites[account.address]?.find( <Box className="multichain-account-menu-popover__list">
({ origin }) => origin === currentTabOrigin, {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 ( return (
<AccountListItem <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={() => { onClick={() => {
dispatch(toggleAccountMenu());
trackEvent({ trackEvent({
category: MetaMetricsEventCategory.Navigation, category: MetaMetricsEventCategory.Navigation,
event: MetaMetricsEventName.NavAccountSwitched, event: MetaMetricsEventName.AccountAddSelected,
properties: { properties: {
account_type: MetaMetricsEventAccountType.Default,
location: 'Main Menu', location: 'Main Menu',
}, },
}); });
dispatch(setSelectedAccount(account.address)); setActionMode('add');
}} }}
identity={account} data-testid="multichain-account-menu-popover-add-account"
key={account.address} >
selected={selectedAccount.address === account.address} {t('addAccount')}
closeMenu={onClose} </ButtonLink>
connectedAvatar={connectedSite?.iconUrl} </Box>
connectedAvatarName={connectedSite?.name} <Box marginBottom={4}>
/>
);
})}
</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>
<ButtonLink <ButtonLink
size={Size.SM} 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={() => { onClick={() => {
dispatch(toggleAccountMenu()); dispatch(toggleAccountMenu());
trackEvent({ trackEvent({
category: MetaMetricsEventCategory.Navigation, category: MetaMetricsEventCategory.Navigation,
event: event: MetaMetricsEventName.AccountAddSelected,
MetaMetricsEventName.UserClickedConnectCustodialAccount, properties: {
account_type: MetaMetricsEventAccountType.Hardware,
location: 'Main Menu',
},
}); });
if (getEnvironmentType() === ENVIRONMENT_TYPE_POPUP) { if (getEnvironmentType() === ENVIRONMENT_TYPE_POPUP) {
global.platform.openExtensionInBrowser( global.platform.openExtensionInBrowser(
CUSTODY_ACCOUNT_ROUTE, CONNECT_HARDWARE_ROUTE,
); );
} else { } else {
history.push(CUSTODY_ACCOUNT_ROUTE); history.push(CONNECT_HARDWARE_ROUTE);
} }
}} }}
> >
{t('connectCustodialAccountMenu')} {t('hardwareWallet')}
</ButtonLink> </ButtonLink>
</Box> </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>
</Box> ) : null}
) : null} </ModalContent>
</Popover> </Modal>
); );
}; };