1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-24 11:01:41 +01:00
metamask-extension/ui/app/pages/settings/settings.container.js
Mark Stacey df85ab6e10
Implement asset page (#8696)
A new page has been created for viewing assets. This replaces the old
`selectedToken` state, which previously would augment the home page
to show token-specific information.

The new asset page shows the standard token overview as seen previously
on the home page, plus a history filtered to show just transactions
relevant to that token.

The actions that were available in the old token list menu have been
moved to a "Token Options" menu that mirrors the "Account Options"
menu.

The `selectedTokenAddress` state has been removed, as it is no longer
being used for anything.

`getMetaMetricState` has been renamed to `getBackgroundMetaMetricState`
because its sole purpose is extracting data from the background state
to send metrics from the background. It's not really a selector, but
it was convenient for it to use the same selectors the UI uses to
extract background data, so I left it there for now.

A new Redux store has been added to track state related to browser history.
The most recent "overview" page (i.e. the home page or the asset page) is
currently being tracked, so that actions taken from the asset page can return
the user back to the asset page when the action has finished.
2020-06-01 14:54:32 -03:00

99 lines
3.1 KiB
JavaScript

import Settings from './settings.component'
import { compose } from 'redux'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import { getAddressBookEntryName } from '../../selectors'
import { isValidAddress } from '../../helpers/utils/util'
import { ENVIRONMENT_TYPE_POPUP } from '../../../../app/scripts/lib/enums'
import { getEnvironmentType } from '../../../../app/scripts/lib/util'
import { getMostRecentOverviewPage } from '../../ducks/history/history'
import {
CONNECTIONS_ROUTE,
ADVANCED_ROUTE,
SECURITY_ROUTE,
GENERAL_ROUTE,
ALERTS_ROUTE,
ABOUT_US_ROUTE,
SETTINGS_ROUTE,
CONTACT_LIST_ROUTE,
CONTACT_ADD_ROUTE,
CONTACT_EDIT_ROUTE,
CONTACT_VIEW_ROUTE,
CONTACT_MY_ACCOUNTS_ROUTE,
CONTACT_MY_ACCOUNTS_EDIT_ROUTE,
CONTACT_MY_ACCOUNTS_VIEW_ROUTE,
} from '../../helpers/constants/routes'
const ROUTES_TO_I18N_KEYS = {
[GENERAL_ROUTE]: 'general',
[CONNECTIONS_ROUTE]: 'connections',
[ADVANCED_ROUTE]: 'advanced',
[SECURITY_ROUTE]: 'securityAndPrivacy',
[ABOUT_US_ROUTE]: 'about',
[ALERTS_ROUTE]: 'alerts',
[CONTACT_LIST_ROUTE]: 'contacts',
[CONTACT_ADD_ROUTE]: 'newContact',
[CONTACT_EDIT_ROUTE]: 'editContact',
[CONTACT_VIEW_ROUTE]: 'viewContact',
[CONTACT_MY_ACCOUNTS_ROUTE]: 'myAccounts',
}
const mapStateToProps = (state, ownProps) => {
const { location } = ownProps
const { pathname } = location
const pathNameTail = pathname.match(/[^/]+$/)[0]
const isAddressEntryPage = pathNameTail.includes('0x')
const isMyAccountsPage = pathname.match('my-accounts')
const isAddContactPage = Boolean(pathname.match(CONTACT_ADD_ROUTE))
const isEditContactPage = Boolean(pathname.match(CONTACT_EDIT_ROUTE))
const isEditMyAccountsContactPage = Boolean(pathname.match(CONTACT_MY_ACCOUNTS_EDIT_ROUTE))
const isPopupView = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
const pathnameI18nKey = ROUTES_TO_I18N_KEYS[pathname]
let backRoute
if (isMyAccountsPage && isAddressEntryPage) {
backRoute = CONTACT_MY_ACCOUNTS_ROUTE
} else if (isEditContactPage) {
backRoute = `${CONTACT_VIEW_ROUTE}/${pathNameTail}`
} else if (isEditMyAccountsContactPage) {
backRoute = `${CONTACT_MY_ACCOUNTS_VIEW_ROUTE}/${pathNameTail}`
} else if (isAddressEntryPage || isMyAccountsPage || isAddContactPage) {
backRoute = CONTACT_LIST_ROUTE
} else {
backRoute = SETTINGS_ROUTE
}
let initialBreadCrumbRoute
let breadCrumbTextKey
let initialBreadCrumbKey
if (isMyAccountsPage) {
initialBreadCrumbRoute = CONTACT_LIST_ROUTE
breadCrumbTextKey = 'myWalletAccounts'
initialBreadCrumbKey = ROUTES_TO_I18N_KEYS[initialBreadCrumbRoute]
}
const addressName = getAddressBookEntryName(state, isValidAddress(pathNameTail) ? pathNameTail : '')
return {
isAddressEntryPage,
isMyAccountsPage,
backRoute,
currentPath: pathname,
isPopupView,
pathnameI18nKey,
addressName,
initialBreadCrumbRoute,
breadCrumbTextKey,
initialBreadCrumbKey,
mostRecentOverviewPage: getMostRecentOverviewPage(state),
}
}
export default compose(
withRouter,
connect(mapStateToProps)
)(Settings)