m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Standardize network settings page (#9740)

Browse Source 
* Standardize appearance of network settings

* Add separate route for network settings form

* Control network form rendering in popup via route

* Hide network form buttons when form is viewOnly

* Handle extremely long network names
This commit is contained in:
Erik Marks 2020-10-29 13:17:52 -07:00 committed by GitHub
commit 7a90766294
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 195 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
ui/app/components/app/dropdowns/network-dropdown.js
View File

@ -7,8 +7,13 @@ import * as actions from '../../../store/actions'
import { import {
openAlert as displayInvalidCustomNetworkAlert, openAlert as displayInvalidCustomNetworkAlert,
} from '../../../ducks/alerts/invalid-custom-network' } from '../../../ducks/alerts/invalid-custom-network'
import { NETWORKS_ROUTE } from '../../../helpers/constants/routes' import {
import { isPrefixedFormattedHexString } from '../../../../../app/scripts/lib/util' NETWORKS_ROUTE,
NETWORKS_FORM_ROUTE,
} from '../../../helpers/constants/routes'
import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../../app/scripts/lib/enums'
import { getEnvironmentType, isPrefixedFormattedHexString } from '../../../../../app/scripts/lib/util'
import { Dropdown, DropdownMenuItem } from './components/dropdown' import { Dropdown, DropdownMenuItem } from './components/dropdown'
import NetworkDropdownIcon from './components/network-dropdown-icon' import NetworkDropdownIcon from './components/network-dropdown-icon'
@ -44,6 +49,9 @@ function mapDispatchToProps (dispatch) {
setNetworksTabAddMode: (isInAddMode) => { setNetworksTabAddMode: (isInAddMode) => {
dispatch(actions.setNetworksTabAddMode(isInAddMode)) dispatch(actions.setNetworksTabAddMode(isInAddMode))
}, },
setSelectedSettingsRpcUrl: (url) => {
dispatch(actions.setSelectedSettingsRpcUrl(url))
},
displayInvalidCustomNetworkAlert: (networkName) => { displayInvalidCustomNetworkAlert: (networkName) => {
dispatch(displayInvalidCustomNetworkAlert(networkName)) dispatch(displayInvalidCustomNetworkAlert(networkName))
}, },
@ -67,6 +75,7 @@ class NetworkDropdown extends Component {
setRpcTarget: PropTypes.func.isRequired, setRpcTarget: PropTypes.func.isRequired,
hideNetworkDropdown: PropTypes.func.isRequired, hideNetworkDropdown: PropTypes.func.isRequired,
setNetworksTabAddMode: PropTypes.func.isRequired, setNetworksTabAddMode: PropTypes.func.isRequired,
setSelectedSettingsRpcUrl: PropTypes.func.isRequired,
frequentRpcListDetail: PropTypes.array.isRequired, frequentRpcListDetail: PropTypes.array.isRequired,
networkDropdownOpen: PropTypes.bool.isRequired, networkDropdownOpen: PropTypes.bool.isRequired,
history: PropTypes.object.isRequired, history: PropTypes.object.isRequired,
@ -176,7 +185,11 @@ class NetworkDropdown extends Component {
} }
render () { render () {
const { provider: { type: providerType, rpcUrl: activeNetwork }, setNetworksTabAddMode } = this.props const {
provider: { type: providerType, rpcUrl: activeNetwork },
setNetworksTabAddMode,
setSelectedSettingsRpcUrl,
} = this.props
const rpcListDetail = this.props.frequentRpcListDetail const rpcListDetail = this.props.frequentRpcListDetail
const isOpen = this.props.networkDropdownOpen const isOpen = this.props.networkDropdownOpen
const dropdownMenuItemStyle = { const dropdownMenuItemStyle = {
@ -337,8 +350,13 @@ class NetworkDropdown extends Component {
<DropdownMenuItem <DropdownMenuItem
closeMenu={() => this.props.hideNetworkDropdown()} closeMenu={() => this.props.hideNetworkDropdown()}
onClick={() => { onClick={() => {
this.props.history.push(
getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN
? NETWORKS_ROUTE
: NETWORKS_FORM_ROUTE,
)
setSelectedSettingsRpcUrl('')
setNetworksTabAddMode(true) setNetworksTabAddMode(true)
this.props.history.push(NETWORKS_ROUTE)
}} }}
style={dropdownMenuItemStyle} style={dropdownMenuItemStyle}
> >

3
ui/app/helpers/constants/routes.js
View File

@ -9,6 +9,7 @@ const SECURITY_ROUTE = '/settings/security'
const ABOUT_US_ROUTE = '/settings/about-us' const ABOUT_US_ROUTE = '/settings/about-us'
const ALERTS_ROUTE = '/settings/alerts' const ALERTS_ROUTE = '/settings/alerts'
const NETWORKS_ROUTE = '/settings/networks' const NETWORKS_ROUTE = '/settings/networks'
const NETWORKS_FORM_ROUTE = '/settings/networks/form'
const CONTACT_LIST_ROUTE = '/settings/contact-list' const CONTACT_LIST_ROUTE = '/settings/contact-list'
const CONTACT_EDIT_ROUTE = '/settings/contact-list/edit-contact' const CONTACT_EDIT_ROUTE = '/settings/contact-list/edit-contact'
const CONTACT_ADD_ROUTE = '/settings/contact-list/add-contact' const CONTACT_ADD_ROUTE = '/settings/contact-list/add-contact'
@ -75,6 +76,7 @@ const PATH_NAME_MAP = {
[ABOUT_US_ROUTE]: 'About Us Page', [ABOUT_US_ROUTE]: 'About Us Page',
[ALERTS_ROUTE]: 'Alerts Settings Page', [ALERTS_ROUTE]: 'Alerts Settings Page',
[NETWORKS_ROUTE]: 'Network Settings Page', [NETWORKS_ROUTE]: 'Network Settings Page',
[NETWORKS_FORM_ROUTE]: 'Network Settings Page Form',
[CONTACT_LIST_ROUTE]: 'Contact List Settings Page', [CONTACT_LIST_ROUTE]: 'Contact List Settings Page',
[`${CONTACT_EDIT_ROUTE}/:address`]: 'Edit Contact Settings Page', [`${CONTACT_EDIT_ROUTE}/:address`]: 'Edit Contact Settings Page',
[CONTACT_ADD_ROUTE]: 'Add Contact Settings Page', [CONTACT_ADD_ROUTE]: 'Add Contact Settings Page',
@ -172,6 +174,7 @@ export {
CONTACT_MY_ACCOUNTS_VIEW_ROUTE, CONTACT_MY_ACCOUNTS_VIEW_ROUTE,
CONTACT_MY_ACCOUNTS_EDIT_ROUTE, CONTACT_MY_ACCOUNTS_EDIT_ROUTE,
NETWORKS_ROUTE, NETWORKS_ROUTE,
NETWORKS_FORM_ROUTE,
INITIALIZE_BACKUP_SEED_PHRASE_ROUTE, INITIALIZE_BACKUP_SEED_PHRASE_ROUTE,
CONNECT_ROUTE, CONNECT_ROUTE,
CONNECT_CONFIRM_PERMISSIONS_ROUTE, CONNECT_CONFIRM_PERMISSIONS_ROUTE,

78
ui/app/pages/settings/networks-tab/index.scss
View File

@ -8,6 +8,9 @@
@media screen and (max-width: 575px) { @media screen and (max-width: 575px) {
margin-top: 0; margin-top: 0;
flex-direction: column;
overflow-x: hidden;
align-items: center;
} }
} }
@ -22,36 +25,13 @@
} }
} }
&__back-button {
display: none;
@media screen and (max-width: 575px) {
display: block;
background-image: url('/images/caret-left-black.svg');
width: 18px;
height: 18px;
opacity: 0.5;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-right: 16px;
cursor: pointer;
position: absolute;
margin-left: 10px;
[dir='rtl'] & {
transform: rotate(180deg);
}
}
}
&__network-form { &__network-form {
flex: 0.5 0 auto;
max-width: 343px;
max-height: 465px;
display: flex; display: flex;
flex: 1 0 auto;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
max-width: 343px;
max-height: 465px;
.page-container__footer { .page-container__footer {
border-top: none; border-top: none;
@ -78,8 +58,6 @@
&__network-form-row { &__network-form-row {
@media screen and (max-width: 575px) { @media screen and (max-width: 575px) {
display: flex;
flex-direction: column;
width: 93%; width: 93%;
} }
@ -88,11 +66,14 @@
background-color: #fefae8; background-color: #fefae8;
border: 1px solid #ffd33d; border: 1px solid #ffd33d;
width: 93%;
border-radius: 5px; border-radius: 5px;
box-sizing: border-box; box-sizing: border-box;
padding: 12px; padding: 12px;
margin: 12px 0; margin: 12px 0;
@media screen and (max-width: 575px) {
width: 93%;
}
} }
} }
@ -118,26 +99,23 @@
max-width: 343px; max-width: 343px;
@media screen and (max-width: 575px) { @media screen and (max-width: 575px) {
flex: 1;
overflow-y: auto;
max-width: 100vw; max-width: 100vw;
width: 100vw; width: 100vw;
overflow-y: scroll;
} }
} }
&__add-network-button-wrapper { &__networks-list-popup-footer {
display: none; width: 100%;
display: flex;
justify-content: center;
padding-top: 23px;
padding-bottom: 23px;
border-top: 1px solid #d8d8d8;
@media screen and (max-width: 575px) { .button {
display: flex; width: 178px;
padding-top: 19px;
padding-bottom: 23px;
justify-content: center;
align-items: center;
border-top: 1px solid #d8d8d8;
.button {
width: 178px;
}
} }
} }
@ -169,11 +147,16 @@
&:hover { &:hover {
cursor: pointer; cursor: pointer;
} }
@media screen and (max-width: 575px) {
margin: 0 4px 0 10px;
}
} }
@media screen and (max-width: 575px) { @media screen and (max-width: 575px) {
padding: 20px 23px 21px 17px; padding: 20px 23px 21px 17px;
border-bottom: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8;
max-width: 351px;
} }
} }
@ -188,6 +171,10 @@
margin-left: 11px; margin-left: 11px;
color: #6a737d; color: #6a737d;
width: 70%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
@ -215,6 +202,7 @@
position: absolute; position: absolute;
width: 24px; width: 24px;
height: 24px; height: 24px;
margin: 0 5px;
[dir='rtl'] & { [dir='rtl'] & {
transform: rotate(180deg); transform: rotate(180deg);
@ -239,6 +227,10 @@
flex-flow: row nowrap; flex-flow: row nowrap;
margin: 0.75rem 0; margin: 0.75rem 0;
@media screen and (max-width: 575px) {
width: 93%;
}
.btn-default { .btn-default {
margin-right: 0.375rem; margin-right: 0.375rem;
} }

60
ui/app/pages/settings/networks-tab/network-form/network-form.component.js
View File

@ -30,6 +30,7 @@ export default class NetworkForm extends PureComponent {
blockExplorerUrl: PropTypes.string, blockExplorerUrl: PropTypes.string,
rpcPrefs: PropTypes.object, rpcPrefs: PropTypes.object,
rpcUrls: PropTypes.array, rpcUrls: PropTypes.array,
isFullScreen: PropTypes.bool,
} }
state = { state = {
@ -67,7 +68,6 @@ export default class NetworkForm extends PureComponent {
} }
componentWillUnmount () { componentWillUnmount () {
this.props.onClear()
this.setState({ this.setState({
rpcUrl: '', rpcUrl: '',
chainId: '', chainId: '',
@ -76,6 +76,11 @@ export default class NetworkForm extends PureComponent {
blockExplorerUrl: '', blockExplorerUrl: '',
errors: {}, errors: {},
}) })
// onClear will push the network settings route unless was pass false.
// Since we call onClear to cause this component to be unmounted, the
// route will already have been updated, and we avoid setting it twice.
this.props.onClear(false)
} }
resetForm () { resetForm () {
@ -136,11 +141,12 @@ export default class NetworkForm extends PureComponent {
onCancel = () => { onCancel = () => {
const { const {
isFullScreen,
networksTabIsInAddMode, networksTabIsInAddMode,
onClear, onClear,
} = this.props } = this.props
if (networksTabIsInAddMode) { if (networksTabIsInAddMode || !isFullScreen) {
onClear() onClear()
} else { } else {
this.resetForm() this.resetForm()
@ -337,14 +343,14 @@ export default class NetworkForm extends PureComponent {
errors, errors,
} = this.state } = this.state
const deletable = !networksTabIsInAddMode && !isCurrentRpcTarget && !viewOnly
const isSubmitDisabled = ( const isSubmitDisabled = (
viewOnly ||
this.stateIsUnchanged() || this.stateIsUnchanged() ||
!rpcUrl || !rpcUrl ||
!chainId || !chainId ||
Object.values(errors).some((x) => x) Object.values(errors).some((x) => x)
) )
const deletable = !networksTabIsInAddMode && !isCurrentRpcTarget && !viewOnly
return ( return (
<div className="networks-tab__network-form"> <div className="networks-tab__network-form">
@ -384,30 +390,34 @@ export default class NetworkForm extends PureComponent {
'optionalBlockExplorerUrl', 'optionalBlockExplorerUrl',
)} )}
<div className="network-form__footer"> <div className="network-form__footer">
{ {!viewOnly && (
deletable && ( <>
{
deletable && (
<Button
type="danger"
onClick={this.onDelete}
>
{ t('delete') }
</Button>
)
}
<Button <Button
type="danger" type="default"
onClick={this.onDelete} onClick={this.onCancel}
disabled={this.stateIsUnchanged()}
> >
{ t('delete') } {t('cancel')}
</Button> </Button>
) <Button
} type="secondary"
<Button disabled={isSubmitDisabled}
type="default" onClick={this.onSubmit}
onClick={this.onCancel} >
disabled={viewOnly || this.stateIsUnchanged()} { t('save') }
> </Button>
{ t('cancel') } </>
</Button> )}
<Button
type="secondary"
disabled={isSubmitDisabled}
onClick={this.onSubmit}
>
{ t('save') }
</Button>
</div> </div>
</div> </div>
) )

106
ui/app/pages/settings/networks-tab/networks-tab.component.js
View File

@ -1,11 +1,12 @@
import React, { PureComponent } from 'react' import React, { PureComponent } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import classnames from 'classnames' import classnames from 'classnames'
import { SETTINGS_ROUTE } from '../../../helpers/constants/routes'
import { ENVIRONMENT_TYPE_POPUP } from '../../../../../app/scripts/lib/enums'
import { getEnvironmentType } from '../../../../../app/scripts/lib/util'
import Button from '../../../components/ui/button' import Button from '../../../components/ui/button'
import LockIcon from '../../../components/ui/lock-icon' 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 NetworkDropdownIcon from '../../../components/app/dropdowns/components/network-dropdown-icon'
import NetworkForm from './network-form' import NetworkForm from './network-form'
@ -17,7 +18,6 @@ export default class NetworksTab extends PureComponent {
static propTypes = { static propTypes = {
editRpc: PropTypes.func.isRequired, editRpc: PropTypes.func.isRequired,
history: PropTypes.object.isRequired,
location: PropTypes.object.isRequired, location: PropTypes.object.isRequired,
networkIsSelected: PropTypes.bool, networkIsSelected: PropTypes.bool,
networksTabIsInAddMode: PropTypes.bool, networksTabIsInAddMode: PropTypes.bool,
@ -30,10 +30,13 @@ export default class NetworksTab extends PureComponent {
providerUrl: PropTypes.string, providerUrl: PropTypes.string,
providerType: PropTypes.string, providerType: PropTypes.string,
networkDefaultedToProvider: PropTypes.bool, networkDefaultedToProvider: PropTypes.bool,
history: PropTypes.object.isRequired,
shouldRenderNetworkForm: PropTypes.bool.isRequired,
isFullScreen: PropTypes.bool.isRequired,
} }
UNSAFE_componentWillMount () { componentWillUnmount () {
this.props.setSelectedSettingsRpcUrl(null) this.props.setSelectedSettingsRpcUrl('')
} }
isCurrentPath (pathname) { isCurrentPath (pathname) {
@ -42,32 +45,19 @@ export default class NetworksTab extends PureComponent {
renderSubHeader () { renderSubHeader () {
const { const {
networkIsSelected,
setSelectedSettingsRpcUrl, setSelectedSettingsRpcUrl,
setNetworksTabAddMode, setNetworksTabAddMode,
networksTabIsInAddMode,
networkDefaultedToProvider,
} = this.props } = this.props
return ( return (
<div className="settings-page__sub-header"> <div className="settings-page__sub-header">
<div
className="networks-tab__back-button"
onClick={(networkIsSelected && !networkDefaultedToProvider) || networksTabIsInAddMode
? () => {
setNetworksTabAddMode(false)
setSelectedSettingsRpcUrl(null)
}
: () => this.props.history.push(SETTINGS_ROUTE)
}
/>
<span className="settings-page__sub-header-text">{ this.context.t('networks') }</span> <span className="settings-page__sub-header-text">{ this.context.t('networks') }</span>
<div className="networks-tab__add-network-header-button-wrapper"> <div className="networks-tab__add-network-header-button-wrapper">
<Button <Button
type="secondary" type="secondary"
onClick={(event) => { onClick={(event) => {
event.preventDefault() event.preventDefault()
setSelectedSettingsRpcUrl(null) setSelectedSettingsRpcUrl('')
setNetworksTabAddMode(true) setNetworksTabAddMode(true)
}} }}
> >
@ -86,6 +76,8 @@ export default class NetworksTab extends PureComponent {
providerUrl, providerUrl,
providerType, providerType,
networksTabIsInAddMode, networksTabIsInAddMode,
history,
isFullScreen,
} = this.props } = this.props
const { const {
border, border,
@ -106,9 +98,12 @@ export default class NetworksTab extends PureComponent {
<div <div
key={`settings-network-list-item:${rpcUrl}`} key={`settings-network-list-item:${rpcUrl}`}
className="networks-tab__networks-list-item" className="networks-tab__networks-list-item"
onClick={ () => { onClick={() => {
setNetworksTabAddMode(false) setNetworksTabAddMode(false)
setSelectedSettingsRpcUrl(rpcUrl) setSelectedSettingsRpcUrl(rpcUrl)
if (!isFullScreen) {
history.push(NETWORKS_FORM_ROUTE)
}
}} }}
> >
<NetworkDropdownIcon <NetworkDropdownIcon
@ -186,16 +181,15 @@ export default class NetworksTab extends PureComponent {
}, },
networksTabIsInAddMode, networksTabIsInAddMode,
editRpc, editRpc,
networkDefaultedToProvider,
providerUrl, providerUrl,
networksToRender, networksToRender,
history,
isFullScreen,
shouldRenderNetworkForm,
} = this.props } = this.props
const envIsPopup = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
const shouldRenderNetworkForm = networksTabIsInAddMode || !envIsPopup || (envIsPopup && !networkDefaultedToProvider)
return ( return (
<div className="networks-tab__content"> <>
{ this.renderNetworksList() } { this.renderNetworksList() }
{ {
shouldRenderNetworkForm shouldRenderNetworkForm
@ -208,9 +202,12 @@ export default class NetworksTab extends PureComponent {
rpcUrl={rpcUrl} rpcUrl={rpcUrl}
chainId={chainId} chainId={chainId}
ticker={ticker} ticker={ticker}
onClear={() => { onClear={(shouldUpdateHistory = true) => {
setNetworksTabAddMode(false) setNetworksTabAddMode(false)
setSelectedSettingsRpcUrl(null) setSelectedSettingsRpcUrl('')
if (shouldUpdateHistory && !isFullScreen) {
history.push(NETWORKS_ROUTE)
}
}} }}
showConfirmDeleteNetworkModal={showConfirmDeleteNetworkModal} showConfirmDeleteNetworkModal={showConfirmDeleteNetworkModal}
viewOnly={viewOnly} viewOnly={viewOnly}
@ -218,39 +215,48 @@ export default class NetworksTab extends PureComponent {
networksTabIsInAddMode={networksTabIsInAddMode} networksTabIsInAddMode={networksTabIsInAddMode}
rpcPrefs={rpcPrefs} rpcPrefs={rpcPrefs}
blockExplorerUrl={blockExplorerUrl} blockExplorerUrl={blockExplorerUrl}
cancelText={t('cancel')} isFullScreen={isFullScreen}
/> />
) )
: null : null
} }
</div> </>
) )
} }
render () { render () {
const { setNetworksTabAddMode, setSelectedSettingsRpcUrl, networkIsSelected, networksTabIsInAddMode } = this.props const {
setNetworksTabAddMode,
setSelectedSettingsRpcUrl,
history,
isFullScreen,
shouldRenderNetworkForm,
} = this.props
return ( return (
<div className="networks-tab__body"> <div className="networks-tab__body">
{this.renderSubHeader()} {isFullScreen && this.renderSubHeader()}
{this.renderNetworksTabContent()} <div className="networks-tab__content">
{!networkIsSelected && !networksTabIsInAddMode {this.renderNetworksTabContent()}
? ( {!isFullScreen && !shouldRenderNetworkForm
<div className="networks-tab__add-network-button-wrapper"> ? (
<Button <div className="networks-tab__networks-list-popup-footer">
type="primary" <Button
onClick={(event) => { type="primary"
event.preventDefault() onClick={(event) => {
setSelectedSettingsRpcUrl(null) event.preventDefault()
setNetworksTabAddMode(true) setSelectedSettingsRpcUrl('')
}} setNetworksTabAddMode(true)
> history.push(NETWORKS_FORM_ROUTE)
{ this.context.t('addNetwork') } }}
</Button> >
</div> { this.context.t('addNetwork') }
) </Button>
: null </div>
} )
: null
}
</div>
</div> </div>
) )
} }

17
ui/app/pages/settings/networks-tab/networks-tab.container.js
View File

@ -9,12 +9,23 @@ import {
editRpc, editRpc,
showModal, showModal,
} from '../../../store/actions' } 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 NetworksTab from './networks-tab.component'
import { defaultNetworksData } from './networks-tab.constants' import { defaultNetworksData } from './networks-tab.constants'
const defaultNetworks = defaultNetworksData.map((network) => ({ ...network, viewOnly: true })) 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 { const {
frequentRpcListDetail, frequentRpcListDetail,
provider, provider,
@ -32,7 +43,7 @@ const mapStateToProps = (state) => {
rpcUrl: rpc.rpcUrl, rpcUrl: rpc.rpcUrl,
chainId: rpc.chainId, chainId: rpc.chainId,
ticker: rpc.ticker, ticker: rpc.ticker,
blockExplorerUrl: (rpc.rpcPrefs && rpc.rpcPrefs.blockExplorerUrl) || '', blockExplorerUrl: (rpc.rpcPrefs?.blockExplorerUrl) || '',
} }
}) })
@ -56,6 +67,8 @@ const mapStateToProps = (state) => {
providerType: provider.type, providerType: provider.type,
providerUrl: provider.rpcUrl, providerUrl: provider.rpcUrl,
networkDefaultedToProvider, networkDefaultedToProvider,
isFullScreen,
shouldRenderNetworkForm,
} }
} }

17
ui/app/pages/settings/settings.component.js
View File

@ -34,7 +34,7 @@ class SettingsPage extends PureComponent {
currentPath: PropTypes.string, currentPath: PropTypes.string,
history: PropTypes.object, history: PropTypes.object,
isAddressEntryPage: PropTypes.bool, isAddressEntryPage: PropTypes.bool,
isPopupView: PropTypes.bool, isPopup: PropTypes.bool,
pathnameI18nKey: PropTypes.string, pathnameI18nKey: PropTypes.string,
initialBreadCrumbRoute: PropTypes.string, initialBreadCrumbRoute: PropTypes.string,
breadCrumbTextKey: PropTypes.string, breadCrumbTextKey: PropTypes.string,
@ -57,7 +57,7 @@ class SettingsPage extends PureComponent {
> >
<div className="settings-page__header"> <div className="settings-page__header">
{ {
currentPath !== SETTINGS_ROUTE && currentPath !== NETWORKS_ROUTE && ( currentPath !== SETTINGS_ROUTE && (
<div <div
className="settings-page__back-button" className="settings-page__back-button"
onClick={() => history.push(backRoute)} onClick={() => history.push(backRoute)}
@ -85,13 +85,13 @@ class SettingsPage extends PureComponent {
renderTitle () { renderTitle () {
const { t } = this.context const { t } = this.context
const { isPopupView, pathnameI18nKey, addressName } = this.props const { isPopup, pathnameI18nKey, addressName } = this.props
let titleText let titleText
if (isPopupView && addressName) { if (isPopup && addressName) {
titleText = addressName titleText = addressName
} else if (pathnameI18nKey && isPopupView) { } else if (pathnameI18nKey && isPopup) {
titleText = t(pathnameI18nKey) titleText = t(pathnameI18nKey)
} else { } else {
titleText = t('settings') titleText = t('settings')
@ -108,7 +108,7 @@ class SettingsPage extends PureComponent {
const { t } = this.context const { t } = this.context
const { const {
currentPath, currentPath,
isPopupView, isPopup,
isAddressEntryPage, isAddressEntryPage,
pathnameI18nKey, pathnameI18nKey,
addressName, addressName,
@ -120,7 +120,7 @@ class SettingsPage extends PureComponent {
let subheaderText let subheaderText
if (isPopupView && isAddressEntryPage) { if (isPopup && isAddressEntryPage) {
subheaderText = t('settings') subheaderText = t('settings')
} else if (initialBreadCrumbKey) { } else if (initialBreadCrumbKey) {
subheaderText = t(initialBreadCrumbKey) subheaderText = t(initialBreadCrumbKey)
@ -128,7 +128,7 @@ class SettingsPage extends PureComponent {
subheaderText = t(pathnameI18nKey || 'general') subheaderText = t(pathnameI18nKey || 'general')
} }
return currentPath !== NETWORKS_ROUTE && ( return !currentPath.startsWith(NETWORKS_ROUTE) && (
<div className="settings-page__subheader"> <div className="settings-page__subheader">
<div <div
className={classnames({ 'settings-page__subheader--link': initialBreadCrumbRoute })} className={classnames({ 'settings-page__subheader--link': initialBreadCrumbRoute })}
@ -200,7 +200,6 @@ class SettingsPage extends PureComponent {
component={AlertsTab} component={AlertsTab}
/> />
<Route <Route
exact
path={NETWORKS_ROUTE} path={NETWORKS_ROUTE}
component={NetworksTab} component={NetworksTab}
/> />

37
ui/app/pages/settings/settings.container.js
View File

@ -8,33 +8,37 @@ import { getEnvironmentType } from '../../../../app/scripts/lib/util'
import { getMostRecentOverviewPage } from '../../ducks/history/history' import { getMostRecentOverviewPage } from '../../ducks/history/history'
import { import {
ADVANCED_ROUTE,
SECURITY_ROUTE,
GENERAL_ROUTE,
ALERTS_ROUTE,
ABOUT_US_ROUTE, ABOUT_US_ROUTE,
SETTINGS_ROUTE, ADVANCED_ROUTE,
ALERTS_ROUTE,
CONTACT_LIST_ROUTE, CONTACT_LIST_ROUTE,
CONTACT_ADD_ROUTE, CONTACT_ADD_ROUTE,
CONTACT_EDIT_ROUTE, CONTACT_EDIT_ROUTE,
CONTACT_VIEW_ROUTE,
CONTACT_MY_ACCOUNTS_ROUTE, CONTACT_MY_ACCOUNTS_ROUTE,
CONTACT_MY_ACCOUNTS_EDIT_ROUTE, CONTACT_MY_ACCOUNTS_EDIT_ROUTE,
CONTACT_MY_ACCOUNTS_VIEW_ROUTE, CONTACT_MY_ACCOUNTS_VIEW_ROUTE,
CONTACT_VIEW_ROUTE,
GENERAL_ROUTE,
NETWORKS_FORM_ROUTE,
NETWORKS_ROUTE,
SECURITY_ROUTE,
SETTINGS_ROUTE,
} from '../../helpers/constants/routes' } from '../../helpers/constants/routes'
import Settings from './settings.component' import Settings from './settings.component'
const ROUTES_TO_I18N_KEYS = { const ROUTES_TO_I18N_KEYS = {
[GENERAL_ROUTE]: 'general',
[ADVANCED_ROUTE]: 'advanced',
[SECURITY_ROUTE]: 'securityAndPrivacy',
[ABOUT_US_ROUTE]: 'about', [ABOUT_US_ROUTE]: 'about',
[ADVANCED_ROUTE]: 'advanced',
[ALERTS_ROUTE]: 'alerts', [ALERTS_ROUTE]: 'alerts',
[CONTACT_LIST_ROUTE]: 'contacts', [GENERAL_ROUTE]: 'general',
[CONTACT_ADD_ROUTE]: 'newContact', [CONTACT_ADD_ROUTE]: 'newContact',
[CONTACT_EDIT_ROUTE]: 'editContact', [CONTACT_EDIT_ROUTE]: 'editContact',
[CONTACT_VIEW_ROUTE]: 'viewContact', [CONTACT_LIST_ROUTE]: 'contacts',
[CONTACT_MY_ACCOUNTS_ROUTE]: 'myAccounts', [CONTACT_MY_ACCOUNTS_ROUTE]: 'myAccounts',
[CONTACT_VIEW_ROUTE]: 'viewContact',
[NETWORKS_ROUTE]: 'networks',
[NETWORKS_FORM_ROUTE]: 'networks',
[SECURITY_ROUTE]: 'securityAndPrivacy',
} }
const mapStateToProps = (state, ownProps) => { const mapStateToProps = (state, ownProps) => {
@ -47,11 +51,12 @@ const mapStateToProps = (state, ownProps) => {
const isAddContactPage = Boolean(pathname.match(CONTACT_ADD_ROUTE)) const isAddContactPage = Boolean(pathname.match(CONTACT_ADD_ROUTE))
const isEditContactPage = Boolean(pathname.match(CONTACT_EDIT_ROUTE)) const isEditContactPage = Boolean(pathname.match(CONTACT_EDIT_ROUTE))
const isEditMyAccountsContactPage = Boolean(pathname.match(CONTACT_MY_ACCOUNTS_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 isPopup = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
const pathnameI18nKey = ROUTES_TO_I18N_KEYS[pathname] const pathnameI18nKey = ROUTES_TO_I18N_KEYS[pathname]
let backRoute let backRoute = SETTINGS_ROUTE
if (isMyAccountsPage && isAddressEntryPage) { if (isMyAccountsPage && isAddressEntryPage) {
backRoute = CONTACT_MY_ACCOUNTS_ROUTE backRoute = CONTACT_MY_ACCOUNTS_ROUTE
} else if (isEditContactPage) { } else if (isEditContactPage) {
@ -60,8 +65,8 @@ const mapStateToProps = (state, ownProps) => {
backRoute = `${CONTACT_MY_ACCOUNTS_VIEW_ROUTE}/${pathNameTail}` backRoute = `${CONTACT_MY_ACCOUNTS_VIEW_ROUTE}/${pathNameTail}`
} else if (isAddressEntryPage || isMyAccountsPage || isAddContactPage) { } else if (isAddressEntryPage || isMyAccountsPage || isAddContactPage) {
backRoute = CONTACT_LIST_ROUTE backRoute = CONTACT_LIST_ROUTE
} else { } else if (isNetworksFormPage) {
backRoute = SETTINGS_ROUTE backRoute = NETWORKS_ROUTE
} }
let initialBreadCrumbRoute let initialBreadCrumbRoute
@ -80,7 +85,7 @@ const mapStateToProps = (state, ownProps) => {
isMyAccountsPage, isMyAccountsPage,
backRoute, backRoute,
currentPath: pathname, currentPath: pathname,
isPopupView, isPopup,
pathnameI18nKey, pathnameI18nKey,
addressName, addressName,
initialBreadCrumbRoute, initialBreadCrumbRoute,