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