1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-12 12:47:14 +01:00
metamask-extension/ui/pages/connected-sites/connected-sites.component.js
2021-04-28 14:53:59 -05:00

166 lines
4.5 KiB
JavaScript

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import ConnectedSitesList from '../../components/app/connected-sites-list';
import Popover from '../../components/ui/popover/popover.component';
import Button from '../../components/ui/button';
export default class ConnectedSites extends Component {
static contextTypes = {
t: PropTypes.func,
};
static defaultProps = {
tabToConnect: null,
};
static propTypes = {
accountLabel: PropTypes.string.isRequired,
closePopover: PropTypes.func.isRequired,
connectedDomains: PropTypes.arrayOf(PropTypes.object).isRequired,
domainHostCount: PropTypes.objectOf(PropTypes.number).isRequired,
disconnectAllAccounts: PropTypes.func.isRequired,
disconnectAccount: PropTypes.func.isRequired,
getOpenMetamaskTabsIds: PropTypes.func.isRequired,
permittedAccountsByOrigin: PropTypes.objectOf(
PropTypes.arrayOf(PropTypes.string),
).isRequired,
tabToConnect: PropTypes.object,
requestAccountsPermission: PropTypes.func.isRequired,
};
state = {
sitePendingDisconnect: null,
};
componentDidMount() {
const { getOpenMetamaskTabsIds } = this.props;
getOpenMetamaskTabsIds();
}
setPendingDisconnect = (domainKey) => {
this.setState({
sitePendingDisconnect: {
domainKey,
},
});
};
clearPendingDisconnect = () => {
this.setState({
sitePendingDisconnect: null,
});
};
disconnectAccount = () => {
const { disconnectAccount } = this.props;
const { sitePendingDisconnect } = this.state;
disconnectAccount(sitePendingDisconnect.domainKey);
this.clearPendingDisconnect();
};
disconnectAllAccounts = () => {
const { disconnectAllAccounts } = this.props;
const { sitePendingDisconnect } = this.state;
disconnectAllAccounts(sitePendingDisconnect.domainKey);
this.clearPendingDisconnect();
};
renderConnectedSitesList() {
return (
<ConnectedSitesList
domainHostCount={this.props.domainHostCount}
connectedDomains={this.props.connectedDomains}
onDisconnect={this.setPendingDisconnect}
/>
);
}
renderConnectedSitesPopover() {
const {
accountLabel,
closePopover,
connectedDomains,
tabToConnect,
requestAccountsPermission,
} = this.props;
const { t } = this.context;
return (
<Popover
className="connected-sites"
title={t('connectedSites')}
subtitle={
connectedDomains.length
? t('connectedSitesDescription', [accountLabel])
: t('connectedSitesEmptyDescription', [accountLabel])
}
onClose={closePopover}
footer={
tabToConnect ? (
<a
className="connected-sites__text-button"
onClick={requestAccountsPermission}
>
{t('connectManually')}
</a>
) : null
}
footerClassName="connected-sites__add-site-manually"
>
{this.renderConnectedSitesList()}
</Popover>
);
}
renderDisconnectPopover() {
const { closePopover, permittedAccountsByOrigin } = this.props;
const { t } = this.context;
const {
sitePendingDisconnect: { domainKey },
} = this.state;
const numPermittedAccounts = permittedAccountsByOrigin[domainKey].length;
return (
<Popover
className="connected-sites"
title={t('disconnectPrompt', [domainKey])}
subtitle={t('disconnectAllAccountsConfirmationDescription')}
onClose={closePopover}
footer={
<>
<div className="connected-sites__footer-row">
<Button type="secondary" onClick={this.clearPendingDisconnect}>
{t('cancel')}
</Button>
<Button type="primary" onClick={this.disconnectAccount}>
{t('disconnect')}
</Button>
</div>
{numPermittedAccounts > 1 ? (
<div className="connected-sites__footer-row">
<a
className="connected-sites__text-button"
onClick={this.disconnectAllAccounts}
>
{t('disconnectAllAccounts')}
</a>
</div>
) : null}
</>
}
footerClassName="connected-sites__confirmation"
/>
);
}
render() {
const { sitePendingDisconnect } = this.state;
return sitePendingDisconnect
? this.renderDisconnectPopover()
: this.renderConnectedSitesPopover();
}
}