import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import { Redirect, Route } from 'react-router-dom' import { formatDate } from '../../helpers/utils/util' import AssetList from '../../components/app/asset-list' import HomeNotification from '../../components/app/home-notification' import MultipleNotifications from '../../components/app/multiple-notifications' import TransactionList from '../../components/app/transaction-list' import MenuBar from '../../components/app/menu-bar' import Popover from '../../components/ui/popover' import Button from '../../components/ui/button' import ConnectedSites from '../connected-sites' import ConnectedAccounts from '../connected-accounts' import { Tabs, Tab } from '../../components/ui/tabs' import { EthOverview } from '../../components/app/wallet-overview' import { ASSET_ROUTE, RESTORE_VAULT_ROUTE, CONFIRM_TRANSACTION_ROUTE, CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE, INITIALIZE_BACKUP_SEED_PHRASE_ROUTE, CONNECT_ROUTE, CONNECTED_ROUTE, CONNECTED_ACCOUNTS_ROUTE, } from '../../helpers/constants/routes' const LEARN_MORE_URL = 'https://metamask.zendesk.com/hc/en-us/articles/360045129011-Intro-to-MetaMask-v8-extension' export default class Home extends PureComponent { static contextTypes = { t: PropTypes.func, } static propTypes = { history: PropTypes.object, forgottenPassword: PropTypes.bool, suggestedTokens: PropTypes.object, unconfirmedTransactionsCount: PropTypes.number, shouldShowSeedPhraseReminder: PropTypes.bool, isPopup: PropTypes.bool, isNotification: PropTypes.bool.isRequired, threeBoxSynced: PropTypes.bool, setupThreeBox: PropTypes.func, turnThreeBoxSyncingOn: PropTypes.func, showRestorePrompt: PropTypes.bool, selectedAddress: PropTypes.string, restoreFromThreeBox: PropTypes.func, setShowRestorePromptToFalse: PropTypes.func, threeBoxLastUpdated: PropTypes.number, firstPermissionsRequestId: PropTypes.string, totalUnapprovedCount: PropTypes.number.isRequired, setConnectedStatusPopoverHasBeenShown: PropTypes.func, connectedStatusPopoverHasBeenShown: PropTypes.bool, defaultHomeActiveTabName: PropTypes.string, onTabClick: PropTypes.func.isRequired, } state = { mounted: false, } componentDidMount () { const { firstPermissionsRequestId, history, isNotification, suggestedTokens = {}, totalUnapprovedCount, unconfirmedTransactionsCount, } = this.props this.setState({ mounted: true }) if (isNotification && totalUnapprovedCount === 0) { global.platform.closeCurrentWindow() } else if (firstPermissionsRequestId) { history.push(`${CONNECT_ROUTE}/${firstPermissionsRequestId}`) } else if (unconfirmedTransactionsCount > 0) { history.push(CONFIRM_TRANSACTION_ROUTE) } else if (Object.keys(suggestedTokens).length > 0) { history.push(CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE) } } static getDerivedStateFromProps ( { firstPermissionsRequestId, isNotification, suggestedTokens, totalUnapprovedCount, unconfirmedTransactionsCount, }, { mounted }, ) { if (!mounted) { if (isNotification && totalUnapprovedCount === 0) { return { closing: true } } else if (firstPermissionsRequestId || unconfirmedTransactionsCount > 0 || Object.keys(suggestedTokens).length > 0) { return { redirecting: true } } } return null } componentDidUpdate (_, prevState) { const { setupThreeBox, showRestorePrompt, threeBoxLastUpdated, threeBoxSynced, } = this.props if (!prevState.closing && this.state.closing) { global.platform.closeCurrentWindow() } if (threeBoxSynced && showRestorePrompt && threeBoxLastUpdated === null) { setupThreeBox() } } renderNotifications () { const { t } = this.context const { history, shouldShowSeedPhraseReminder, isPopup, selectedAddress, restoreFromThreeBox, turnThreeBoxSyncingOn, setShowRestorePromptToFalse, showRestorePrompt, threeBoxLastUpdated, } = this.props return ( { shouldShowSeedPhraseReminder ? ( { if (isPopup) { global.platform.openExtensionInBrowser(INITIALIZE_BACKUP_SEED_PHRASE_ROUTE) } else { history.push(INITIALIZE_BACKUP_SEED_PHRASE_ROUTE) } }} infoText={t('backupApprovalInfo')} key="home-backupApprovalNotice" /> ) : null } { threeBoxLastUpdated && showRestorePrompt ? ( { restoreFromThreeBox(selectedAddress) .then(() => { turnThreeBoxSyncingOn() }) }} onIgnore={() => { setShowRestorePromptToFalse() }} key="home-privacyModeDefault" /> ) : null } ) } renderPopover = () => { const { setConnectedStatusPopoverHasBeenShown } = this.props const { t } = this.context return ( { return (
) }} footer={( <> { t('learnMore') } )} >
{ t('metaMaskConnectStatusParagraphOne') }
{ t('metaMaskConnectStatusParagraphTwo') }
{ t('metaMaskConnectStatusParagraphThree') }
) } render () { const { t } = this.context const { defaultHomeActiveTabName, onTabClick, forgottenPassword, history, connectedStatusPopoverHasBeenShown, isPopup, } = this.props if (forgottenPassword) { return } else if (this.state.closing || this.state.redirecting) { return null } return (
{ isPopup && !connectedStatusPopoverHasBeenShown ? this.renderPopover() : null }
history.push(`${ASSET_ROUTE}/${asset}`)} />
{ this.renderNotifications() }
) } }