1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/pages/permissions-connect/choose-account/choose-account.js

151 lines
4.2 KiB
JavaScript
Raw Normal View History

2021-12-15 00:54:46 +01:00
import PropTypes from 'prop-types';
import React, { useState } from 'react';
import { useI18nContext } from '../../../hooks/useI18nContext';
import Button from '../../../components/ui/button';
import PermissionsConnectHeader from '../../../components/app/permissions-connect-header';
import PermissionsConnectFooter from '../../../components/app/permissions-connect-footer';
import AccountList from '../../../components/ui/account-list';
const ChooseAccount = ({
selectedAccountAddresses,
addressLastConnectedMap = {},
accounts,
selectAccounts,
selectNewAccountViaModal,
cancelPermissionsRequest,
permissionsRequestId,
targetSubjectMetadata,
nativeCurrency,
}) => {
const [selectedAccounts, setSelectedAccounts] = useState(
selectedAccountAddresses,
);
const t = useI18nContext();
const handleAccountClick = (address) => {
const newSelectedAccounts = new Set(selectedAccounts);
if (newSelectedAccounts.has(address)) {
newSelectedAccounts.delete(address);
} else {
newSelectedAccounts.add(address);
}
setSelectedAccounts(newSelectedAccounts);
};
const selectAll = () => {
const newSelectedAccounts = new Set(
accounts.map((account) => account.address),
);
setSelectedAccounts(newSelectedAccounts);
};
const deselectAll = () => {
setSelectedAccounts(new Set());
};
const allAreSelected = () => {
return accounts.length === selectedAccounts.size;
};
return (
<>
<div className="permissions-connect-choose-account__content">
<PermissionsConnectHeader
iconUrl={targetSubjectMetadata?.iconUrl}
iconName={targetSubjectMetadata?.name}
headerTitle={t('connectWithMetaMask')}
headerText={
accounts.length > 0
? t('selectAccounts')
: t('connectAccountOrCreate')
}
siteOrigin={targetSubjectMetadata?.origin}
/>
<AccountList
accounts={accounts}
selectNewAccountViaModal={selectNewAccountViaModal}
addressLastConnectedMap={addressLastConnectedMap}
nativeCurrency={nativeCurrency}
selectedAccounts={selectedAccounts}
allAreSelected={allAreSelected}
deselectAll={deselectAll}
selectAll={selectAll}
handleAccountClick={handleAccountClick}
/>
</div>
2021-12-15 00:54:46 +01:00
<div className="permissions-connect-choose-account__footer-container">
<PermissionsConnectFooter />
<div className="permissions-connect-choose-account__bottom-buttons">
<Button
onClick={() => cancelPermissionsRequest(permissionsRequestId)}
type="secondary"
>
{t('cancel')}
</Button>
<Button
onClick={() => selectAccounts(selectedAccounts)}
type="primary"
disabled={selectedAccounts.size === 0}
>
{t('next')}
</Button>
</div>
</div>
</>
2021-12-15 00:54:46 +01:00
);
};
ChooseAccount.propTypes = {
/**
* Array of user account objects
*/
accounts: PropTypes.arrayOf(
PropTypes.shape({
address: PropTypes.string,
addressLabel: PropTypes.string,
lastConnectedDate: PropTypes.string,
balance: PropTypes.string,
}),
).isRequired,
/**
* Function to select an account
*/
selectAccounts: PropTypes.func.isRequired,
/**
* Function to select a new account via modal
*/
selectNewAccountViaModal: PropTypes.func.isRequired,
/**
* Native currency of current chain
*/
nativeCurrency: PropTypes.string.isRequired,
/**
* A map of the last connected addresses
*/
addressLastConnectedMap: PropTypes.object,
/**
* Function to cancel permission request
*/
cancelPermissionsRequest: PropTypes.func.isRequired,
/**
* Permission request Id
*/
permissionsRequestId: PropTypes.string.isRequired,
/**
* Currently selected account addresses
*/
selectedAccountAddresses: PropTypes.object.isRequired,
/**
* Domain data used to display site-origin pill
*/
targetSubjectMetadata: PropTypes.shape({
extensionId: PropTypes.string,
iconUrl: PropTypes.string,
name: PropTypes.string,
2021-12-15 00:54:46 +01:00
origin: PropTypes.string.isRequired,
subjectType: PropTypes.string,
}),
};
export default ChooseAccount;