diff --git a/ui/app/helpers/constants/routes.js b/ui/app/helpers/constants/routes.js index 42ea9d060..d05a6c24c 100644 --- a/ui/app/helpers/constants/routes.js +++ b/ui/app/helpers/constants/routes.js @@ -9,6 +9,7 @@ const SECURITY_ROUTE = '/settings/security' const ABOUT_US_ROUTE = '/settings/about-us' const ALERTS_ROUTE = '/settings/alerts' const NETWORKS_ROUTE = '/settings/networks' +const NETWORKS_FORM_ROUTE = '/settings/networks/form' const CONTACT_LIST_ROUTE = '/settings/contact-list' const CONTACT_EDIT_ROUTE = '/settings/contact-list/edit-contact' const CONTACT_ADD_ROUTE = '/settings/contact-list/add-contact' @@ -75,6 +76,7 @@ const PATH_NAME_MAP = { [ABOUT_US_ROUTE]: 'About Us Page', [ALERTS_ROUTE]: 'Alerts Settings Page', [NETWORKS_ROUTE]: 'Network Settings Page', + [NETWORKS_FORM_ROUTE]: 'Network Settings Page Form', [CONTACT_LIST_ROUTE]: 'Contact List Settings Page', [`${CONTACT_EDIT_ROUTE}/:address`]: 'Edit Contact Settings Page', [CONTACT_ADD_ROUTE]: 'Add Contact Settings Page', @@ -172,6 +174,7 @@ export { CONTACT_MY_ACCOUNTS_VIEW_ROUTE, CONTACT_MY_ACCOUNTS_EDIT_ROUTE, NETWORKS_ROUTE, + NETWORKS_FORM_ROUTE, INITIALIZE_BACKUP_SEED_PHRASE_ROUTE, CONNECT_ROUTE, CONNECT_CONFIRM_PERMISSIONS_ROUTE, diff --git a/ui/app/pages/settings/networks-tab/network-form/network-form.component.js b/ui/app/pages/settings/networks-tab/network-form/network-form.component.js index 324c750b9..78eda5194 100644 --- a/ui/app/pages/settings/networks-tab/network-form/network-form.component.js +++ b/ui/app/pages/settings/networks-tab/network-form/network-form.component.js @@ -68,7 +68,7 @@ export default class NetworkForm extends PureComponent { } componentWillUnmount () { - this.props.onClear() + this.props.onClear(false) this.setState({ rpcUrl: '', chainId: '', diff --git a/ui/app/pages/settings/networks-tab/networks-tab.component.js b/ui/app/pages/settings/networks-tab/networks-tab.component.js index ba70517e7..4d4b9099b 100644 --- a/ui/app/pages/settings/networks-tab/networks-tab.component.js +++ b/ui/app/pages/settings/networks-tab/networks-tab.component.js @@ -1,13 +1,12 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' -import { - ENVIRONMENT_TYPE_FULLSCREEN, - ENVIRONMENT_TYPE_POPUP, -} from '../../../../../app/scripts/lib/enums' -import { getEnvironmentType } from '../../../../../app/scripts/lib/util' import Button from '../../../components/ui/button' import LockIcon from '../../../components/ui/lock-icon' +import { + NETWORKS_ROUTE, + NETWORKS_FORM_ROUTE, +} from '../../../helpers/constants/routes' import NetworkDropdownIcon from '../../../components/app/dropdowns/components/network-dropdown-icon' import NetworkForm from './network-form' @@ -31,11 +30,9 @@ export default class NetworksTab extends PureComponent { providerUrl: PropTypes.string, providerType: PropTypes.string, networkDefaultedToProvider: PropTypes.bool, - } - - state = { - isFullScreen: getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN, - isPopup: getEnvironmentType() === ENVIRONMENT_TYPE_POPUP, + history: PropTypes.object.isRequired, + shouldRenderNetworkForm: PropTypes.bool.isRequired, + isFullScreen: PropTypes.bool.isRequired, } componentWillUnmount () { @@ -79,6 +76,8 @@ export default class NetworksTab extends PureComponent { providerUrl, providerType, networksTabIsInAddMode, + history, + isFullScreen, } = this.props const { border, @@ -99,9 +98,10 @@ export default class NetworksTab extends PureComponent {
{ + onClick={() => { setNetworksTabAddMode(false) setSelectedSettingsRpcUrl(rpcUrl) + !isFullScreen && history.push(NETWORKS_FORM_ROUTE) }} > @@ -201,9 +200,12 @@ export default class NetworksTab extends PureComponent { rpcUrl={rpcUrl} chainId={chainId} ticker={ticker} - onClear={() => { + onClear={(shouldUpdateHistory = true) => { setNetworksTabAddMode(false) setSelectedSettingsRpcUrl('') + if (shouldUpdateHistory && !isFullScreen) { + history.push(NETWORKS_ROUTE) + } }} showConfirmDeleteNetworkModal={showConfirmDeleteNetworkModal} viewOnly={viewOnly} @@ -221,14 +223,20 @@ export default class NetworksTab extends PureComponent { } render () { - const { setNetworksTabAddMode, setSelectedSettingsRpcUrl, networkIsSelected, networksTabIsInAddMode } = this.props - const { isFullScreen, isPopup } = this.state + const { + setNetworksTabAddMode, + setSelectedSettingsRpcUrl, + networkIsSelected, + networksTabIsInAddMode, + history, + isFullScreen, + } = this.props return (
{isFullScreen && this.renderSubHeader()}
- {this.renderNetworksTabContent(isPopup)} + {this.renderNetworksTabContent()} {!networkIsSelected && !networksTabIsInAddMode ? (
@@ -238,6 +246,7 @@ export default class NetworksTab extends PureComponent { event.preventDefault() setSelectedSettingsRpcUrl('') setNetworksTabAddMode(true) + history.push(NETWORKS_FORM_ROUTE) }} > { this.context.t('addNetwork') } diff --git a/ui/app/pages/settings/networks-tab/networks-tab.container.js b/ui/app/pages/settings/networks-tab/networks-tab.container.js index e57245056..83926d0b8 100644 --- a/ui/app/pages/settings/networks-tab/networks-tab.container.js +++ b/ui/app/pages/settings/networks-tab/networks-tab.container.js @@ -9,12 +9,23 @@ import { editRpc, showModal, } from '../../../store/actions' +import { NETWORKS_FORM_ROUTE } from '../../../helpers/constants/routes' +import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../../app/scripts/lib/enums' +import { getEnvironmentType } from '../../../../../app/scripts/lib/util' import NetworksTab from './networks-tab.component' import { defaultNetworksData } from './networks-tab.constants' const defaultNetworks = defaultNetworksData.map((network) => ({ ...network, viewOnly: true })) -const mapStateToProps = (state) => { +const mapStateToProps = (state, ownProps) => { + const { location: { pathname } } = ownProps + + const environmentType = getEnvironmentType() + const isFullScreen = environmentType === ENVIRONMENT_TYPE_FULLSCREEN + const shouldRenderNetworkForm = ( + isFullScreen || Boolean(pathname.match(NETWORKS_FORM_ROUTE)) + ) + const { frequentRpcListDetail, provider, @@ -56,6 +67,8 @@ const mapStateToProps = (state) => { providerType: provider.type, providerUrl: provider.rpcUrl, networkDefaultedToProvider, + isFullScreen, + shouldRenderNetworkForm, } } diff --git a/ui/app/pages/settings/settings.component.js b/ui/app/pages/settings/settings.component.js index 1b0462aa6..f668568d5 100644 --- a/ui/app/pages/settings/settings.component.js +++ b/ui/app/pages/settings/settings.component.js @@ -11,6 +11,7 @@ import { ABOUT_US_ROUTE, SETTINGS_ROUTE, NETWORKS_ROUTE, + NETWORKS_FORM_ROUTE, CONTACT_LIST_ROUTE, CONTACT_ADD_ROUTE, CONTACT_EDIT_ROUTE, @@ -204,6 +205,11 @@ class SettingsPage extends PureComponent { path={NETWORKS_ROUTE} component={NetworksTab} /> + { 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 isNetworksFormPage = Boolean(pathname.match(NETWORKS_FORM_ROUTE)) const isPopupView = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP const pathnameI18nKey = ROUTES_TO_I18N_KEYS[pathname] @@ -62,6 +65,8 @@ const mapStateToProps = (state, ownProps) => { backRoute = `${CONTACT_MY_ACCOUNTS_VIEW_ROUTE}/${pathNameTail}` } else if (isAddressEntryPage || isMyAccountsPage || isAddContactPage) { backRoute = CONTACT_LIST_ROUTE + } else if (isNetworksFormPage) { + backRoute = NETWORKS_ROUTE } let initialBreadCrumbRoute