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 ( ) } renderConnectedSitesPopover () { const { accountLabel, closePopover, connectedDomains, tabToConnect, requestAccountsPermission, } = this.props const { t } = this.context return ( {t('connectManually')} ) : null } footerClassName="connected-sites__add-site-manually" > {this.renderConnectedSitesList()} ) } renderDisconnectPopover () { const { closePopover, permittedAccountsByOrigin } = this.props const { t } = this.context const { sitePendingDisconnect: { domainKey } } = this.state const numPermittedAccounts = permittedAccountsByOrigin[domainKey].length return (
{ numPermittedAccounts > 1 ? (
{t('disconnectAllAccounts')}
) : null } )} footerClassName="connected-sites__confirmation" /> ) } render () { const { sitePendingDisconnect } = this.state return ( sitePendingDisconnect ? this.renderDisconnectPopover() : this.renderConnectedSitesPopover() ) } }