mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-12 12:47:14 +01:00
166 lines
4.5 KiB
JavaScript
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();
|
|
}
|
|
}
|