mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-05 07:24:56 +01:00
7c00ad0dde
* Handling infura blockage * Adding blockage home notification * Updating copy, adding temporary notification dismissal * Addressing review feedback * Using eth_blockNumber method to check Infura availability * Handling network changes in availability check
391 lines
12 KiB
JavaScript
391 lines
12 KiB
JavaScript
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 SwapsIntroPopup from '../swaps/intro-popup';
|
|
|
|
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,
|
|
AWAITING_SWAP_ROUTE,
|
|
BUILD_QUOTE_ROUTE,
|
|
VIEW_QUOTE_ROUTE,
|
|
CONFIRMATION_V_NEXT_ROUTE,
|
|
} from '../../helpers/constants/routes';
|
|
|
|
const LEARN_MORE_URL =
|
|
'https://metamask.zendesk.com/hc/en-us/articles/360045129011-Intro-to-MetaMask-v8-extension';
|
|
const LEGACY_WEB3_URL =
|
|
'https://metamask.zendesk.com/hc/en-us/articles/360053147012';
|
|
const INFURA_BLOCKAGE_URL =
|
|
'https://metamask.zendesk.com/hc/en-us/articles/360059386712';
|
|
|
|
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.isRequired,
|
|
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,
|
|
setSwapsWelcomeMessageHasBeenShown: PropTypes.func.isRequired,
|
|
swapsWelcomeMessageHasBeenShown: PropTypes.bool.isRequired,
|
|
haveSwapsQuotes: PropTypes.bool.isRequired,
|
|
showAwaitingSwapScreen: PropTypes.bool.isRequired,
|
|
swapsFetchParams: PropTypes.object,
|
|
swapsEnabled: PropTypes.bool,
|
|
isMainnet: PropTypes.bool,
|
|
shouldShowWeb3ShimUsageNotification: PropTypes.bool.isRequired,
|
|
setWeb3ShimUsageAlertDismissed: PropTypes.func.isRequired,
|
|
originOfCurrentTab: PropTypes.string,
|
|
disableWeb3ShimUsageAlert: PropTypes.func.isRequired,
|
|
pendingConfirmations: PropTypes.arrayOf(PropTypes.object).isRequired,
|
|
infuraBlocked: PropTypes.bool.isRequired,
|
|
};
|
|
|
|
state = {
|
|
mounted: false,
|
|
canShowBlockageNotification: true,
|
|
};
|
|
|
|
componentDidMount() {
|
|
const {
|
|
firstPermissionsRequestId,
|
|
history,
|
|
isNotification,
|
|
suggestedTokens = {},
|
|
totalUnapprovedCount,
|
|
unconfirmedTransactionsCount,
|
|
haveSwapsQuotes,
|
|
showAwaitingSwapScreen,
|
|
swapsFetchParams,
|
|
pendingConfirmations,
|
|
} = this.props;
|
|
|
|
this.setState({ mounted: true });
|
|
if (isNotification && totalUnapprovedCount === 0) {
|
|
global.platform.closeCurrentWindow();
|
|
} else if (!isNotification && showAwaitingSwapScreen) {
|
|
history.push(AWAITING_SWAP_ROUTE);
|
|
} else if (!isNotification && haveSwapsQuotes) {
|
|
history.push(VIEW_QUOTE_ROUTE);
|
|
} else if (!isNotification && swapsFetchParams) {
|
|
history.push(BUILD_QUOTE_ROUTE);
|
|
} 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);
|
|
} else if (pendingConfirmations.length > 0) {
|
|
history.push(CONFIRMATION_V_NEXT_ROUTE);
|
|
}
|
|
}
|
|
|
|
static getDerivedStateFromProps(
|
|
{
|
|
firstPermissionsRequestId,
|
|
isNotification,
|
|
suggestedTokens,
|
|
totalUnapprovedCount,
|
|
unconfirmedTransactionsCount,
|
|
haveSwapsQuotes,
|
|
showAwaitingSwapScreen,
|
|
swapsFetchParams,
|
|
},
|
|
{ mounted },
|
|
) {
|
|
if (!mounted) {
|
|
if (isNotification && totalUnapprovedCount === 0) {
|
|
return { closing: true };
|
|
} else if (
|
|
firstPermissionsRequestId ||
|
|
unconfirmedTransactionsCount > 0 ||
|
|
Object.keys(suggestedTokens).length > 0 ||
|
|
(!isNotification &&
|
|
(showAwaitingSwapScreen || haveSwapsQuotes || swapsFetchParams))
|
|
) {
|
|
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,
|
|
shouldShowWeb3ShimUsageNotification,
|
|
setWeb3ShimUsageAlertDismissed,
|
|
originOfCurrentTab,
|
|
disableWeb3ShimUsageAlert,
|
|
infuraBlocked,
|
|
} = this.props;
|
|
|
|
return (
|
|
<MultipleNotifications>
|
|
{shouldShowWeb3ShimUsageNotification ? (
|
|
<HomeNotification
|
|
descriptionText={t('web3ShimUsageNotification', [
|
|
<span
|
|
key="web3ShimUsageNotificationLink"
|
|
className="home-notification__text-link"
|
|
onClick={() =>
|
|
global.platform.openTab({ url: LEGACY_WEB3_URL })
|
|
}
|
|
>
|
|
{t('here')}
|
|
</span>,
|
|
])}
|
|
ignoreText={t('dismiss')}
|
|
onIgnore={(disable) => {
|
|
setWeb3ShimUsageAlertDismissed(originOfCurrentTab);
|
|
if (disable) {
|
|
disableWeb3ShimUsageAlert();
|
|
}
|
|
}}
|
|
checkboxText={t('dontShowThisAgain')}
|
|
checkboxTooltipText={t('canToggleInSettings')}
|
|
key="home-web3ShimUsageNotification"
|
|
/>
|
|
) : null}
|
|
{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}
|
|
{infuraBlocked && this.state.canShowBlockageNotification ? (
|
|
<HomeNotification
|
|
descriptionText={t('infuraBlockedNotification', [
|
|
<span
|
|
key="infuraBlockedNotificationLink"
|
|
className="home-notification__text-link"
|
|
onClick={() =>
|
|
global.platform.openTab({ url: INFURA_BLOCKAGE_URL })
|
|
}
|
|
>
|
|
{t('here')}
|
|
</span>,
|
|
])}
|
|
ignoreText={t('dismiss')}
|
|
onIgnore={() => {
|
|
this.setState({
|
|
canShowBlockageNotification: false,
|
|
});
|
|
}}
|
|
key="home-infuraBlockedNotification"
|
|
/>
|
|
) : 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={
|
|
<>
|
|
<a href={LEARN_MORE_URL} target="_blank" rel="noopener noreferrer">
|
|
{t('learnMore')}
|
|
</a>
|
|
<Button
|
|
type="primary"
|
|
onClick={setConnectedStatusPopoverHasBeenShown}
|
|
>
|
|
{t('dismiss')}
|
|
</Button>
|
|
</>
|
|
}
|
|
>
|
|
<main className="home__connect-status-text">
|
|
<div>{t('metaMaskConnectStatusParagraphOne')}</div>
|
|
<div>{t('metaMaskConnectStatusParagraphTwo')}</div>
|
|
<div>{t('metaMaskConnectStatusParagraphThree')}</div>
|
|
</main>
|
|
</Popover>
|
|
);
|
|
};
|
|
|
|
render() {
|
|
const { t } = this.context;
|
|
const {
|
|
defaultHomeActiveTabName,
|
|
onTabClick,
|
|
forgottenPassword,
|
|
history,
|
|
connectedStatusPopoverHasBeenShown,
|
|
isPopup,
|
|
swapsWelcomeMessageHasBeenShown,
|
|
setSwapsWelcomeMessageHasBeenShown,
|
|
swapsEnabled,
|
|
isMainnet,
|
|
} = this.props;
|
|
|
|
if (forgottenPassword) {
|
|
return <Redirect to={{ pathname: RESTORE_VAULT_ROUTE }} />;
|
|
} else if (this.state.closing || this.state.redirecting) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="main-container">
|
|
<Route path={CONNECTED_ROUTE} component={ConnectedSites} exact />
|
|
<Route
|
|
path={CONNECTED_ACCOUNTS_ROUTE}
|
|
component={ConnectedAccounts}
|
|
exact
|
|
/>
|
|
<div className="home__container">
|
|
{!swapsWelcomeMessageHasBeenShown && swapsEnabled && isMainnet ? (
|
|
<SwapsIntroPopup onClose={setSwapsWelcomeMessageHasBeenShown} />
|
|
) : null}
|
|
{isPopup && !connectedStatusPopoverHasBeenShown
|
|
? this.renderPopover()
|
|
: null}
|
|
<div className="home__main-view">
|
|
<MenuBar />
|
|
<div className="home__balance-wrapper">
|
|
<EthOverview />
|
|
</div>
|
|
<Tabs
|
|
defaultActiveTabName={defaultHomeActiveTabName}
|
|
onTabClick={onTabClick}
|
|
tabsClassName="home__tabs"
|
|
>
|
|
<Tab
|
|
activeClassName="home__tab--active"
|
|
className="home__tab"
|
|
data-testid="home__asset-tab"
|
|
name={t('assets')}
|
|
>
|
|
<AssetList
|
|
onClickAsset={(asset) =>
|
|
history.push(`${ASSET_ROUTE}/${asset}`)
|
|
}
|
|
/>
|
|
</Tab>
|
|
<Tab
|
|
activeClassName="home__tab--active"
|
|
className="home__tab"
|
|
data-testid="home__activity-tab"
|
|
name={t('activity')}
|
|
>
|
|
<TransactionList />
|
|
</Tab>
|
|
</Tabs>
|
|
</div>
|
|
{this.renderNotifications()}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|