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.component.js
2021-06-06 12:45:27 -02:30

244 lines
7.7 KiB
JavaScript

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import classnames from 'classnames';
import Identicon from '../../../components/ui/identicon';
import Button from '../../../components/ui/button';
import CheckBox, {
CHECKED,
INDETERMINATE,
UNCHECKED,
} from '../../../components/ui/check-box';
import Tooltip from '../../../components/ui/tooltip';
import { PRIMARY } from '../../../helpers/constants/common';
import UserPreferencedCurrencyDisplay from '../../../components/app/user-preferenced-currency-display';
import PermissionsConnectHeader from '../../../components/app/permissions-connect-header';
import PermissionsConnectFooter from '../../../components/app/permissions-connect-footer';
export default class ChooseAccount extends Component {
static propTypes = {
accounts: PropTypes.arrayOf(
PropTypes.shape({
address: PropTypes.string,
addressLabel: PropTypes.string,
lastConnectedDate: PropTypes.string,
balance: PropTypes.string,
}),
).isRequired,
selectAccounts: PropTypes.func.isRequired,
selectNewAccountViaModal: PropTypes.func.isRequired,
nativeCurrency: PropTypes.string.isRequired,
addressLastConnectedMap: PropTypes.object,
cancelPermissionsRequest: PropTypes.func.isRequired,
permissionsRequestId: PropTypes.string.isRequired,
selectedAccountAddresses: PropTypes.object.isRequired,
targetDomainMetadata: PropTypes.shape({
extensionId: PropTypes.string,
icon: PropTypes.string,
host: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
origin: PropTypes.string.isRequired,
}),
};
state = {
selectedAccounts: this.props.selectedAccountAddresses,
};
static defaultProps = {
addressLastConnectedMap: {},
};
static contextTypes = {
t: PropTypes.func,
};
handleAccountClick(address) {
const { selectedAccounts } = this.state;
const newSelectedAccounts = new Set(selectedAccounts);
if (newSelectedAccounts.has(address)) {
newSelectedAccounts.delete(address);
} else {
newSelectedAccounts.add(address);
}
this.setState({ selectedAccounts: newSelectedAccounts });
}
selectAll() {
const { accounts } = this.props;
const newSelectedAccounts = new Set(
accounts.map((account) => account.address),
);
this.setState({ selectedAccounts: newSelectedAccounts });
}
deselectAll() {
this.setState({ selectedAccounts: new Set() });
}
allAreSelected() {
const { accounts } = this.props;
const { selectedAccounts } = this.state;
return accounts.every(({ address }) => selectedAccounts.has(address));
}
renderAccountsList = () => {
const { accounts, nativeCurrency, addressLastConnectedMap } = this.props;
const { selectedAccounts } = this.state;
return (
<div className="permissions-connect-choose-account__accounts-list">
{accounts.map((account, index) => {
const { address, addressLabel, balance } = account;
return (
<div
key={`permissions-connect-choose-account-${index}`}
onClick={() => this.handleAccountClick(address)}
className="permissions-connect-choose-account__account"
>
<div className="permissions-connect-choose-account__account-info-wrapper">
<CheckBox
className="permissions-connect-choose-account__list-check-box"
checked={selectedAccounts.has(address)}
/>
<Identicon diameter={34} address={address} />
<div className="permissions-connect-choose-account__account__info">
<div className="permissions-connect-choose-account__account__label">
{addressLabel}
</div>
<UserPreferencedCurrencyDisplay
className="permissions-connect-choose-account__account__balance"
type={PRIMARY}
value={balance}
style={{ color: '#6A737D' }}
suffix={nativeCurrency}
/>
</div>
</div>
{addressLastConnectedMap[address] ? (
<Tooltip
title={`${this.context.t('lastConnected')} ${
addressLastConnectedMap[address]
}`}
>
<i className="fa fa-info-circle" />
</Tooltip>
) : null}
</div>
);
})}
</div>
);
};
renderAccountsListHeader() {
const { t } = this.context;
const { selectNewAccountViaModal, accounts } = this.props;
const { selectedAccounts } = this.state;
let checked;
if (this.allAreSelected()) {
checked = CHECKED;
} else if (selectedAccounts.size === 0) {
checked = UNCHECKED;
} else {
checked = INDETERMINATE;
}
return (
<div
className={classnames({
'permissions-connect-choose-account__accounts-list-header--one-item':
accounts.length === 1,
'permissions-connect-choose-account__accounts-list-header--two-items':
accounts.length > 1,
})}
>
{accounts.length > 1 ? (
<div className="permissions-connect-choose-account__select-all">
<CheckBox
className="permissions-connect-choose-account__header-check-box"
checked={checked}
onClick={() =>
this.allAreSelected() ? this.deselectAll() : this.selectAll()
}
/>
<div className="permissions-connect-choose-account__text-grey">
{this.context.t('selectAll')}
</div>
<Tooltip
position="bottom"
html={
<div style={{ width: 200, padding: 4 }}>
{t('selectingAllWillAllow')}
</div>
}
>
<i className="fa fa-info-circle" />
</Tooltip>
</div>
) : null}
<div
className="permissions-connect-choose-account__text-blue"
onClick={() =>
selectNewAccountViaModal(this.handleAccountClick.bind(this))
}
>
{this.context.t('newAccount')}
</div>
</div>
);
}
render() {
const {
selectAccounts,
permissionsRequestId,
cancelPermissionsRequest,
targetDomainMetadata,
accounts,
} = this.props;
const { selectedAccounts } = this.state;
const { t } = this.context;
return (
<div className="permissions-connect-choose-account">
<PermissionsConnectHeader
icon={targetDomainMetadata.icon}
iconName={targetDomainMetadata.name}
headerTitle={t('connectWithMetaMask')}
headerText={
accounts.length > 0
? t('selectAccounts')
: t('connectAccountOrCreate')
}
siteOrigin={targetDomainMetadata.origin}
/>
{this.renderAccountsListHeader()}
{this.renderAccountsList()}
<div className="permissions-connect-choose-account__footer-container">
<PermissionsConnectFooter />
<div className="permissions-connect-choose-account__bottom-buttons">
<Button
onClick={() => cancelPermissionsRequest(permissionsRequestId)}
type="default"
>
{t('cancel')}
</Button>
<Button
onClick={() => selectAccounts(selectedAccounts)}
type="primary"
disabled={selectedAccounts.size === 0}
>
{t('next')}
</Button>
</div>
</div>
</div>
);
}
}