import PropTypes from 'prop-types' import React, { Component } from 'react' import { Switch, Route } from 'react-router-dom' import { getEnvironmentType } from '../../../../app/scripts/lib/util' import { ENVIRONMENT_TYPE_FULLSCREEN, ENVIRONMENT_TYPE_NOTIFICATION, } from '../../../../app/scripts/lib/enums' import { DEFAULT_ROUTE, } from '../../helpers/constants/routes' import PermissionPageContainer from '../../components/app/permission-page-container' import ChooseAccount from './choose-account' import PermissionsRedirect from './redirect' const APPROVE_TIMEOUT = 1500 export default class PermissionConnect extends Component { static propTypes = { approvePermissionsRequest: PropTypes.func.isRequired, rejectPermissionsRequest: PropTypes.func.isRequired, getRequestAccountTabIds: PropTypes.func.isRequired, getCurrentWindowTab: PropTypes.func.isRequired, accounts: PropTypes.array.isRequired, origin: PropTypes.string, showNewAccountModal: PropTypes.func.isRequired, newAccountNumber: PropTypes.number.isRequired, nativeCurrency: PropTypes.string, permissionsRequest: PropTypes.object, addressLastConnectedMap: PropTypes.object.isRequired, lastConnectedInfo: PropTypes.object.isRequired, permissionsRequestId: PropTypes.string, history: PropTypes.object.isRequired, connectPath: PropTypes.string.isRequired, confirmPermissionPath: PropTypes.string.isRequired, page: PropTypes.string.isRequired, targetDomainMetadata: PropTypes.object, } static defaultProps = { origin: '', nativeCurrency: '', permissionsRequest: undefined, permissionsRequestId: '', } static contextTypes = { t: PropTypes.func, } state = { redirecting: false, selectedAccountAddresses: this.props.accounts.length === 1 ? new Set([this.props.accounts[0].address]) : new Set(), permissionsApproved: null, origin: this.props.origin, targetDomainMetadata: this.props.targetDomainMetadata || {}, } beforeUnload = () => { const { permissionsRequestId, rejectPermissionsRequest } = this.props const { permissionsApproved } = this.state if (permissionsApproved === null && permissionsRequestId) { rejectPermissionsRequest(permissionsRequestId) } } removeBeforeUnload = () => { const environmentType = getEnvironmentType() if ( environmentType === ENVIRONMENT_TYPE_FULLSCREEN || environmentType === ENVIRONMENT_TYPE_NOTIFICATION ) { window.removeEventListener('beforeunload', this.beforeUnload) } } componentDidMount () { const { getCurrentWindowTab, getRequestAccountTabIds, permissionsRequest, history, } = this.props getCurrentWindowTab() getRequestAccountTabIds() if (!permissionsRequest) { return history.push(DEFAULT_ROUTE) } const environmentType = getEnvironmentType() if ( environmentType === ENVIRONMENT_TYPE_FULLSCREEN || environmentType === ENVIRONMENT_TYPE_NOTIFICATION ) { window.addEventListener('beforeunload', this.beforeUnload) } } componentDidUpdate (prevProps) { const { permissionsRequest, lastConnectedInfo, targetDomainMetadata, } = this.props const { redirecting, origin, targetDomainMetadata: savedMetadata, } = this.state if ( permissionsRequest && savedMetadata.name !== targetDomainMetadata?.name ) { this.setState({ targetDomainMetadata, }) } if (!permissionsRequest && prevProps.permissionsRequest && !redirecting) { const accountsLastApprovedTime = lastConnectedInfo[origin]?.lastApproved || 0 const initialAccountsLastApprovedTime = prevProps.lastConnectedInfo[origin]?.lastApproved || 0 const approved = accountsLastApprovedTime > initialAccountsLastApprovedTime this.redirect(approved) } } selectAccounts = (addresses) => { this.setState({ selectedAccountAddresses: addresses, }, () => this.props.history.push(this.props.confirmPermissionPath)) } redirect (approved) { const { history } = this.props this.setState({ redirecting: true, permissionsApproved: approved, }) this.removeBeforeUnload() const redirectFunction = getEnvironmentType() === ENVIRONMENT_TYPE_NOTIFICATION ? () => window.close() : () => history.push(DEFAULT_ROUTE) if (approved) { setTimeout(async () => { redirectFunction() }, APPROVE_TIMEOUT) } else { redirectFunction() } } cancelPermissionsRequest = async (requestId) => { const { rejectPermissionsRequest } = this.props if (requestId) { await rejectPermissionsRequest(requestId) } } goBack () { const { history, connectPath } = this.props history.push(connectPath) } renderTopBar () { const { redirecting } = this.state const { page } = this.props const { t } = this.context return !redirecting ? (
{ page === '2' ? (
this.goBack()}> { t('back') }
) : null }
{ t('xOfY', [ page, '2' ]) }
) : null } render () { const { approvePermissionsRequest, accounts, showNewAccountModal, newAccountNumber, nativeCurrency, permissionsRequest, addressLastConnectedMap, permissionsRequestId, connectPath, confirmPermissionPath, } = this.props const { selectedAccountAddresses, permissionsApproved, origin, redirecting, targetDomainMetadata, } = this.state return (
{ this.renderTopBar() } { redirecting && permissionsApproved ? ( ) : ( ( this.selectAccounts(addresses)} selectNewAccountViaModal={(handleAccountClick) => { showNewAccountModal({ onCreateNewAccount: (address) => handleAccountClick(address), newAccountNumber, }) }} addressLastConnectedMap={addressLastConnectedMap} cancelPermissionsRequest={(requestId) => this.cancelPermissionsRequest(requestId)} permissionsRequestId={permissionsRequestId} selectedAccountAddresses={selectedAccountAddresses} targetDomainMetadata={targetDomainMetadata} /> )} /> ( { approvePermissionsRequest(request, accounts) this.redirect(true) }} rejectPermissionsRequest={(requestId) => this.cancelPermissionsRequest(requestId)} selectedIdentities={accounts.filter((account) => selectedAccountAddresses.has(account.address))} cachedOrigin={origin} /> )} /> ) }
) } }