mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
4f0a205369
* Use eslint@6.8.0 * yarn lint:fix
175 lines
4.7 KiB
JavaScript
175 lines
4.7 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()
|
|
)
|
|
}
|
|
}
|