mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-23 03:36:18 +02:00
095eeab881
The tabs on the Home page have been updated to match the new home screen designs. A new `activeClassName` prop was added to the `Tab` component to allow applying different styles to the active tab state. I ran into specificity problems when overriding the default `Tab` styles because the import order of our CSS is bizarre and wrong. For now I've used a crude workaround, but we can fix this properly later by changing the import order to place styles likely to be overridden first.
276 lines
8.4 KiB
JavaScript
276 lines
8.4 KiB
JavaScript
import React, { PureComponent } from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import Media from 'react-media'
|
|
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 WalletView from '../../components/app/wallet-view'
|
|
import TransactionList from '../../components/app/transaction-list'
|
|
import TransactionViewBalance from '../../components/app/transaction-view-balance'
|
|
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 { Tabs, Tab } from '../../components/ui/tabs'
|
|
|
|
import {
|
|
RESTORE_VAULT_ROUTE,
|
|
CONFIRM_TRANSACTION_ROUTE,
|
|
CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE,
|
|
INITIALIZE_BACKUP_SEED_PHRASE_ROUTE,
|
|
CONNECT_ROUTE,
|
|
CONNECTED_ROUTE,
|
|
} from '../../helpers/constants/routes'
|
|
|
|
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,
|
|
}
|
|
|
|
UNSAFE_componentWillMount () {
|
|
const {
|
|
history,
|
|
unconfirmedTransactionsCount = 0,
|
|
firstPermissionsRequestId,
|
|
} = this.props
|
|
|
|
if (firstPermissionsRequestId) {
|
|
history.push(`${CONNECT_ROUTE}/${firstPermissionsRequestId}`)
|
|
}
|
|
|
|
if (unconfirmedTransactionsCount > 0) {
|
|
history.push(CONFIRM_TRANSACTION_ROUTE)
|
|
}
|
|
}
|
|
|
|
componentDidMount () {
|
|
const {
|
|
history,
|
|
isNotification,
|
|
suggestedTokens = {},
|
|
totalUnapprovedCount,
|
|
} = this.props
|
|
|
|
if (isNotification && totalUnapprovedCount === 0) {
|
|
global.platform.closeCurrentWindow()
|
|
}
|
|
|
|
// suggested new tokens
|
|
if (Object.keys(suggestedTokens).length > 0) {
|
|
history.push(CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE)
|
|
}
|
|
}
|
|
|
|
componentDidUpdate () {
|
|
const {
|
|
isNotification,
|
|
setupThreeBox,
|
|
showRestorePrompt,
|
|
threeBoxLastUpdated,
|
|
threeBoxSynced,
|
|
totalUnapprovedCount,
|
|
} = this.props
|
|
|
|
if (isNotification && totalUnapprovedCount === 0) {
|
|
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 (
|
|
<MultipleNotifications>
|
|
{
|
|
shouldShowSeedPhraseReminder
|
|
? (
|
|
<HomeNotification
|
|
descriptionText={t('backupApprovalNotice')}
|
|
acceptText={t('backupNow')}
|
|
onAccept={() => {
|
|
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
|
|
? (
|
|
<HomeNotification
|
|
descriptionText={t('restoreWalletPreferences', [ formatDate(threeBoxLastUpdated, 'M/d/y') ])}
|
|
acceptText={t('restore')}
|
|
ignoreText={t('noThanks')}
|
|
infoText={t('dataBackupFoundInfo')}
|
|
onAccept={() => {
|
|
restoreFromThreeBox(selectedAddress)
|
|
.then(() => {
|
|
turnThreeBoxSyncingOn()
|
|
})
|
|
}}
|
|
onIgnore={() => {
|
|
setShowRestorePromptToFalse()
|
|
}}
|
|
key="home-privacyModeDefault"
|
|
/>
|
|
)
|
|
: null
|
|
}
|
|
</MultipleNotifications>
|
|
)
|
|
}
|
|
renderPopover = () => {
|
|
const { setConnectedStatusPopoverHasBeenShown } = this.props
|
|
const { t } = this.context
|
|
return (
|
|
<Popover
|
|
title={ t('whatsThis') }
|
|
onClose={setConnectedStatusPopoverHasBeenShown}
|
|
className="home__connected-status-popover"
|
|
showArrow
|
|
CustomBackground={({ onClose }) => {
|
|
return (
|
|
<div
|
|
className="home__connected-status-popover-bg-container"
|
|
onClick={onClose}
|
|
>
|
|
<div className="home__connected-status-popover-bg" />
|
|
</div>
|
|
)
|
|
}}
|
|
footer={(
|
|
<Button
|
|
type="primary"
|
|
onClick={setConnectedStatusPopoverHasBeenShown}
|
|
>
|
|
{ t('dismiss') }
|
|
</Button>
|
|
)}
|
|
>
|
|
<main className="home__connect-status-text">
|
|
<div>{ t('metaMaskConnectStatusParagraphOne') }</div>
|
|
<div>{ t('metaMaskConnectStatusParagraphTwo') }</div>
|
|
</main>
|
|
</Popover>
|
|
)
|
|
}
|
|
|
|
render () {
|
|
const {
|
|
forgottenPassword,
|
|
history,
|
|
connectedStatusPopoverHasBeenShown,
|
|
isPopup,
|
|
} = this.props
|
|
|
|
if (forgottenPassword) {
|
|
return <Redirect to={{ pathname: RESTORE_VAULT_ROUTE }} />
|
|
} else if (history.location.pathname.match(/^\/confirm-transaction/)) {
|
|
// This should only happen if this renders during the redirect to the confirm page
|
|
// Display nothing while the confirm page loads, to avoid side-effects of rendering normal home view
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className="main-container">
|
|
<Route path={CONNECTED_ROUTE} component={ConnectedSites} />
|
|
<div className="home__container">
|
|
{ isPopup && !connectedStatusPopoverHasBeenShown ? this.renderPopover() : null }
|
|
<Media
|
|
query="(min-width: 576px)"
|
|
>
|
|
{
|
|
(isWideViewport) => (
|
|
isWideViewport
|
|
? (
|
|
<>
|
|
<WalletView />
|
|
<div className="home__main-view">
|
|
<div className="home__balance-wrapper">
|
|
<TransactionViewBalance />
|
|
</div>
|
|
<TransactionList isWideViewport />
|
|
</div>
|
|
</>
|
|
)
|
|
: (
|
|
<div className="home__main-view">
|
|
<MenuBar />
|
|
<div className="home__balance-wrapper">
|
|
<TransactionViewBalance />
|
|
</div>
|
|
<Tabs>
|
|
<Tab
|
|
activeClassName="home__tab--active"
|
|
className="home__tab"
|
|
data-testid="home__asset-tab"
|
|
name="Assets"
|
|
>
|
|
<AssetList />
|
|
</Tab>
|
|
<Tab
|
|
activeClassName="home__tab--active"
|
|
className="home__tab"
|
|
data-testid="home__history-tab"
|
|
name="History"
|
|
>
|
|
<TransactionList />
|
|
</Tab>
|
|
</Tabs>
|
|
</div>
|
|
)
|
|
)
|
|
}
|
|
</Media>
|
|
{ this.renderNotifications() }
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|