New settings custom rpc form (#6490)
* Add networks tab to settings, with header. * Adds network list to settings network tab. * Adds form to settings networks tab and connects it to network list. * Network tab: form adding and editing working * Settings network form properly handles input errors * Add translations for settings network form * Clean up styles of settings network tab. * Add popup-view styles and behaviour to settings network tab. * Fix save button on settings network form * Adds 'Add Network' button and addMode to settings networks tab * Lint fix for settings networks tab addition * Fix navigation in settings networks tab. * Editing an rpcurl in networks tab does not create new network, just changes rpc of old * Fix layout of settings tabs other than network * Networks dropdown 'Custom Rpc' item links to networks tab in settings. * Update settings sidebar networks subheader. * Make networks tab buttons width consistent with input widths in extension view. * Fix settings screen subheader height in popup view * Fix height of add networks button in popup view * Add optional label to chainId and symbol form labels in networks setting tab * Style fixes for networks tab headers * Add ability to customize block explorer used by custom rpc * Stylistic improvements+fixes to custom rpc form. * Hide cancel button. * Highlight and show network form of provider by default. * Standardize network subheader name to 'Networks' * Update e2e tests for new settings network form * Update unit tests for new rpcPrefs prop * Extract blockexplorer url construction into method. * Fix broken styles on non-network tabs in popup mode * Fix block explorer url links for cases when provider in state has not been updated. * Fix vertical spacing of network form * Don't allow click of save button on network form if nothing has changed * Ensure add network button is shown in popup view * Lint fix for networks tab * Fix block explorer url preference setting. * Fix e2e tests for custom blockexplorer in account details modal changes. * Update integration test states to include frequentRpcList property * Fix some capitalizations in en/messages.json * Remove some console.logs added during custom rpc form work * Fix external account link text and url for modal and dropdown. * Documentation, url validation, proptype required additions and lint fixes on network tab and form.feature/default_network_editable
Dan J Miller
6 years ago
committed by
GitHub
parent
094e4cf555
commit
13be683701
@ -0,0 +1 @@ |
|||||||
|
export { default } from './networks-tab.container' |
||||||
@ -0,0 +1,200 @@ |
|||||||
|
.networks-tab { |
||||||
|
&__content { |
||||||
|
margin-top: 24px; |
||||||
|
display: flex; |
||||||
|
height: 100%; |
||||||
|
max-width: 739px; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
@media screen and (max-width: 575px) { |
||||||
|
margin-top: 0px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__body { |
||||||
|
padding: 12px 24px; |
||||||
|
height: 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
|
||||||
|
@media screen and (max-width: 575px) { |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__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: .5; |
||||||
|
background-size: contain; |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: center; |
||||||
|
margin-right: 16px; |
||||||
|
cursor: pointer; |
||||||
|
position: absolute; |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__network-form { |
||||||
|
flex: 0.5 0 auto; |
||||||
|
max-width: 343px; |
||||||
|
max-height: 465px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
.page-container__footer { |
||||||
|
border-top: none; |
||||||
|
|
||||||
|
@media screen and (max-width: 575px) { |
||||||
|
width: 93%; |
||||||
|
} |
||||||
|
|
||||||
|
header { |
||||||
|
padding: 10px 0px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (max-width: 575px) { |
||||||
|
display: flex; |
||||||
|
flex: auto; |
||||||
|
max-width: 100%; |
||||||
|
max-height: 100%; |
||||||
|
align-items: center; |
||||||
|
width: 100%; |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__network-form-row { |
||||||
|
@media screen and (max-width: 575px) { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
width: 93%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__network-form-label { |
||||||
|
font-family: Roboto; |
||||||
|
font-style: normal; |
||||||
|
font-weight: normal; |
||||||
|
font-size: 14px; |
||||||
|
line-height: 20px; |
||||||
|
color: #000000; |
||||||
|
} |
||||||
|
|
||||||
|
&__networks-list { |
||||||
|
flex: 0.5 0 auto; |
||||||
|
max-width: 343px; |
||||||
|
|
||||||
|
@media screen and (max-width: 575px) { |
||||||
|
max-width: 100vw; |
||||||
|
width: 100vw; |
||||||
|
overflow-y: scroll; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__add-network-button-wrapper { |
||||||
|
display: none; |
||||||
|
|
||||||
|
@media screen and (max-width: 575px) { |
||||||
|
display: flex; |
||||||
|
padding-top: 19px; |
||||||
|
padding-bottom: 23px; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
border-top: 1px solid #D8D8D8; |
||||||
|
|
||||||
|
.button { |
||||||
|
width: 178px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__add-network-header-button-wrapper { |
||||||
|
padding-top: 15px; |
||||||
|
padding-bottom: 21px; |
||||||
|
justify-content: center; |
||||||
|
|
||||||
|
.button { |
||||||
|
width: 178px; |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (max-width: 575px) { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__networks-list--selection { |
||||||
|
@media screen and (max-width: 575px) { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__networks-list-item { |
||||||
|
display: flex; |
||||||
|
padding: 13px 0px 13px 17px; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.menu-icon-circle { |
||||||
|
&:hover { |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (max-width: 575px) { |
||||||
|
padding: 20px 23px 21px 17px; |
||||||
|
border-bottom: 1px solid #D8D8D8; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__networks-list-item:last-of-type { |
||||||
|
@media screen and (max-width: 575px) { |
||||||
|
border-bottom: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__networks-list-name { |
||||||
|
margin-left: 11px; |
||||||
|
font-family: Roboto; |
||||||
|
font-style: normal; |
||||||
|
font-weight: normal; |
||||||
|
font-size: 16px; |
||||||
|
line-height: 23px; |
||||||
|
color: #6A737D; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__networks-list-arrow { |
||||||
|
display: none; |
||||||
|
|
||||||
|
@media screen and (max-width: 575px) { |
||||||
|
display: block; |
||||||
|
background-image: url('/images/caret-right.svg'); |
||||||
|
width: 24px; |
||||||
|
height: 24px; |
||||||
|
background-size: contain; |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: center; |
||||||
|
right: 10px; |
||||||
|
cursor: pointer; |
||||||
|
position: absolute; |
||||||
|
width: 24px; |
||||||
|
height: 24px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__networks-list-name--selected { |
||||||
|
font-weight: bold; |
||||||
|
color: #000000; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1 @@ |
|||||||
|
export { default } from './network-form.component' |
||||||
@ -0,0 +1,225 @@ |
|||||||
|
import React, { PureComponent } from 'react' |
||||||
|
import PropTypes from 'prop-types' |
||||||
|
import validUrl from 'valid-url' |
||||||
|
import PageContainerFooter from '../../../../components/ui/page-container/page-container-footer' |
||||||
|
import TextField from '../../../../components/ui/text-field' |
||||||
|
|
||||||
|
export default class NetworksTab extends PureComponent { |
||||||
|
static contextTypes = { |
||||||
|
t: PropTypes.func.isRequired, |
||||||
|
metricsEvent: PropTypes.func.isRequired, |
||||||
|
} |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
editRpc: PropTypes.func.isRequired, |
||||||
|
rpcUrl: PropTypes.string, |
||||||
|
chainId: PropTypes.string, |
||||||
|
ticker: PropTypes.string, |
||||||
|
viewOnly: PropTypes.bool, |
||||||
|
networkName: PropTypes.string, |
||||||
|
onClear: PropTypes.func.isRequired, |
||||||
|
setRpcTarget: PropTypes.func.isRequired, |
||||||
|
networksTabIsInAddMode: PropTypes.bool, |
||||||
|
blockExplorerUrl: PropTypes.string, |
||||||
|
rpcPrefs: PropTypes.object, |
||||||
|
} |
||||||
|
|
||||||
|
state = { |
||||||
|
rpcUrl: this.props.rpcUrl, |
||||||
|
chainId: this.props.chainId, |
||||||
|
ticker: this.props.ticker, |
||||||
|
networkName: this.props.networkName, |
||||||
|
blockExplorerUrl: this.props.blockExplorerUrl, |
||||||
|
errors: {}, |
||||||
|
} |
||||||
|
|
||||||
|
componentDidUpdate (prevProps) { |
||||||
|
const { rpcUrl: prevRpcUrl, networksTabIsInAddMode: prevAddMode } = prevProps |
||||||
|
const { |
||||||
|
rpcUrl, |
||||||
|
chainId, |
||||||
|
ticker, |
||||||
|
networkName, |
||||||
|
networksTabIsInAddMode, |
||||||
|
blockExplorerUrl, |
||||||
|
} = this.props |
||||||
|
|
||||||
|
if (!prevAddMode && networksTabIsInAddMode) { |
||||||
|
this.setState({ |
||||||
|
rpcUrl: '', |
||||||
|
chainId: '', |
||||||
|
ticker: '', |
||||||
|
networkName: '', |
||||||
|
blockExplorerUrl: '', |
||||||
|
errors: {}, |
||||||
|
}) |
||||||
|
} else if (prevRpcUrl !== rpcUrl) { |
||||||
|
this.setState({ rpcUrl, chainId, ticker, networkName, blockExplorerUrl, errors: {} }) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
componentWillUnmount () { |
||||||
|
this.props.onClear() |
||||||
|
this.setState({ |
||||||
|
rpcUrl: '', |
||||||
|
chainId: '', |
||||||
|
ticker: '', |
||||||
|
networkName: '', |
||||||
|
blockExplorerUrl: '', |
||||||
|
errors: {}, |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
stateIsUnchanged () { |
||||||
|
const { |
||||||
|
rpcUrl, |
||||||
|
chainId, |
||||||
|
ticker, |
||||||
|
networkName, |
||||||
|
blockExplorerUrl, |
||||||
|
} = this.props |
||||||
|
|
||||||
|
const { |
||||||
|
rpcUrl: stateRpcUrl, |
||||||
|
chainId: stateChainId, |
||||||
|
ticker: stateTicker, |
||||||
|
networkName: stateNetworkName, |
||||||
|
blockExplorerUrl: stateBlockExplorerUrl, |
||||||
|
} = this.state |
||||||
|
|
||||||
|
return ( |
||||||
|
stateRpcUrl === rpcUrl && |
||||||
|
stateChainId === chainId && |
||||||
|
stateTicker === ticker && |
||||||
|
stateNetworkName === networkName && |
||||||
|
stateBlockExplorerUrl === blockExplorerUrl |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
renderFormTextField (fieldKey, textFieldId, onChange, value, optionalTextFieldKey) { |
||||||
|
const { errors } = this.state |
||||||
|
const { viewOnly } = this.props |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="networks-tab__network-form-row"> |
||||||
|
<div className="networks-tab__network-form-label">{this.context.t(optionalTextFieldKey || fieldKey)}</div> |
||||||
|
<TextField |
||||||
|
type="text" |
||||||
|
id={textFieldId} |
||||||
|
onChange={onChange} |
||||||
|
fullWidth |
||||||
|
margin="dense" |
||||||
|
value={value} |
||||||
|
disabled={viewOnly} |
||||||
|
error={errors[fieldKey]} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
setStateWithValue = (stateKey, validator) => { |
||||||
|
return (e) => { |
||||||
|
validator && validator(e.target.value, stateKey) |
||||||
|
this.setState({ [stateKey]: e.target.value }) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
setErrorTo = (errorKey, errorVal) => { |
||||||
|
this.setState({ |
||||||
|
errors: { |
||||||
|
...this.state.errors, |
||||||
|
[errorKey]: errorVal, |
||||||
|
}, |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
validateChainId = (chainId) => { |
||||||
|
this.setErrorTo('chainId', !!chainId && Number.isNaN(parseInt(chainId)) |
||||||
|
? `${this.context.t('invalidInput')} chainId` |
||||||
|
: '' |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
validateUrl = (url, stateKey) => { |
||||||
|
if (validUrl.isWebUri(url)) { |
||||||
|
this.setErrorTo(stateKey, '') |
||||||
|
} else { |
||||||
|
const appendedRpc = `http://${url}` |
||||||
|
const validWhenAppended = validUrl.isWebUri(appendedRpc) && !url.match(/^https?:\/\/$/) |
||||||
|
|
||||||
|
this.setErrorTo(stateKey, this.context.t(validWhenAppended ? 'uriErrorMsg' : 'invalidRPC')) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
const { setRpcTarget, viewOnly, rpcUrl: propsRpcUrl, editRpc, rpcPrefs = {} } = this.props |
||||||
|
const { |
||||||
|
networkName, |
||||||
|
rpcUrl, |
||||||
|
chainId, |
||||||
|
ticker, |
||||||
|
blockExplorerUrl, |
||||||
|
errors, |
||||||
|
} = this.state |
||||||
|
|
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="networks-tab__network-form"> |
||||||
|
{this.renderFormTextField( |
||||||
|
'networkName', |
||||||
|
'network-name', |
||||||
|
this.setStateWithValue('networkName'), |
||||||
|
networkName, |
||||||
|
)} |
||||||
|
{this.renderFormTextField( |
||||||
|
'rpcUrl', |
||||||
|
'rpc-url', |
||||||
|
this.setStateWithValue('rpcUrl', this.validateUrl), |
||||||
|
rpcUrl, |
||||||
|
)} |
||||||
|
{this.renderFormTextField( |
||||||
|
'chainId', |
||||||
|
'chainId', |
||||||
|
this.setStateWithValue('chainId', this.validateChainId), |
||||||
|
chainId, |
||||||
|
'optionalChainId', |
||||||
|
)} |
||||||
|
{this.renderFormTextField( |
||||||
|
'symbol', |
||||||
|
'network-ticker', |
||||||
|
this.setStateWithValue('ticker'), |
||||||
|
ticker, |
||||||
|
'optionalSymbol', |
||||||
|
)} |
||||||
|
{this.renderFormTextField( |
||||||
|
'blockExplorerUrl', |
||||||
|
'block-explorer-url', |
||||||
|
this.setStateWithValue('blockExplorerUrl', this.validateUrl), |
||||||
|
blockExplorerUrl, |
||||||
|
'optionalBlockExplorerUrl', |
||||||
|
)} |
||||||
|
<PageContainerFooter |
||||||
|
cancelText={this.context.t('cancel')} |
||||||
|
hideCancel={true} |
||||||
|
onSubmit={() => { |
||||||
|
if (propsRpcUrl && rpcUrl !== propsRpcUrl) { |
||||||
|
editRpc(propsRpcUrl, rpcUrl, chainId, ticker, networkName, { |
||||||
|
blockExplorerUrl: blockExplorerUrl || rpcPrefs.blockExplorerUrl, |
||||||
|
...rpcPrefs, |
||||||
|
}) |
||||||
|
} else { |
||||||
|
setRpcTarget(rpcUrl, chainId, ticker, networkName, { |
||||||
|
blockExplorerUrl: blockExplorerUrl || rpcPrefs.blockExplorerUrl, |
||||||
|
...rpcPrefs, |
||||||
|
}) |
||||||
|
} |
||||||
|
}} |
||||||
|
submitText={this.context.t('save')} |
||||||
|
submitButtonType={'confirm'} |
||||||
|
disabled={viewOnly || this.stateIsUnchanged() || Object.values(errors).some(x => x) || !rpcUrl} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,214 @@ |
|||||||
|
import React, { PureComponent } from 'react' |
||||||
|
import PropTypes from 'prop-types' |
||||||
|
import { SETTINGS_ROUTE } from '../../../helpers/constants/routes' |
||||||
|
import { ENVIRONMENT_TYPE_POPUP } from '../../../../../app/scripts/lib/enums' |
||||||
|
import { getEnvironmentType } from '../../../../../app/scripts/lib/util' |
||||||
|
import classnames from 'classnames' |
||||||
|
import Button from '../../../components/ui/button' |
||||||
|
import NetworkForm from './network-form' |
||||||
|
import NetworkDropdownIcon from '../../../components/app/dropdowns/components/network-dropdown-icon' |
||||||
|
|
||||||
|
export default class NetworksTab extends PureComponent { |
||||||
|
static contextTypes = { |
||||||
|
t: PropTypes.func.isRequired, |
||||||
|
metricsEvent: PropTypes.func.isRequired, |
||||||
|
} |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
editRpc: PropTypes.func.isRequired, |
||||||
|
history: PropTypes.object.isRequired, |
||||||
|
location: PropTypes.object.isRequired, |
||||||
|
networkIsSelected: PropTypes.bool, |
||||||
|
networksTabIsInAddMode: PropTypes.bool, |
||||||
|
networksToRender: PropTypes.array.isRequired, |
||||||
|
selectedNetwork: PropTypes.object, |
||||||
|
setNetworksTabAddMode: PropTypes.func.isRequired, |
||||||
|
setRpcTarget: PropTypes.func.isRequired, |
||||||
|
setSelectedSettingsRpcUrl: PropTypes.func.isRequired, |
||||||
|
providerUrl: PropTypes.string, |
||||||
|
providerType: PropTypes.string, |
||||||
|
networkDefaultedToProvider: PropTypes.bool, |
||||||
|
} |
||||||
|
|
||||||
|
componentWillMount () { |
||||||
|
this.props.setSelectedSettingsRpcUrl(null) |
||||||
|
} |
||||||
|
|
||||||
|
isCurrentPath (pathname) { |
||||||
|
return this.props.location.pathname === pathname |
||||||
|
} |
||||||
|
|
||||||
|
renderSubHeader () { |
||||||
|
const { |
||||||
|
networkIsSelected, |
||||||
|
setSelectedSettingsRpcUrl, |
||||||
|
setNetworksTabAddMode, |
||||||
|
networksTabIsInAddMode, |
||||||
|
networkDefaultedToProvider, |
||||||
|
} = this.props |
||||||
|
|
||||||
|
return ( |
||||||
|
<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> |
||||||
|
<div className="networks-tab__add-network-header-button-wrapper"> |
||||||
|
<Button |
||||||
|
type="primary" |
||||||
|
onClick={event => { |
||||||
|
event.preventDefault() |
||||||
|
setSelectedSettingsRpcUrl(null) |
||||||
|
setNetworksTabAddMode(true) |
||||||
|
}} |
||||||
|
> |
||||||
|
{ this.context.t('addNetwork') } |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
renderNetworkListItem (network, selectRpcUrl) { |
||||||
|
const { |
||||||
|
setSelectedSettingsRpcUrl, |
||||||
|
setNetworksTabAddMode, |
||||||
|
networkIsSelected, |
||||||
|
providerUrl, |
||||||
|
providerType, |
||||||
|
networksTabIsInAddMode, |
||||||
|
} = this.props |
||||||
|
const { |
||||||
|
border, |
||||||
|
iconColor, |
||||||
|
label, |
||||||
|
labelKey, |
||||||
|
rpcUrl, |
||||||
|
providerType: currentProviderType, |
||||||
|
} = network |
||||||
|
|
||||||
|
const listItemNetworkIsSelected = selectRpcUrl && selectRpcUrl === rpcUrl |
||||||
|
const listItemUrlIsProviderUrl = rpcUrl === providerUrl |
||||||
|
const listItemTypeIsProviderNonRpcType = providerType !== 'rpc' && currentProviderType === providerType |
||||||
|
const listItemNetworkIsCurrentProvider = !networkIsSelected && !networksTabIsInAddMode && (listItemUrlIsProviderUrl || listItemTypeIsProviderNonRpcType) |
||||||
|
const displayNetworkListItemAsSelected = listItemNetworkIsSelected || listItemNetworkIsCurrentProvider |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
key={'settings-network-list-item:' + rpcUrl} |
||||||
|
className="networks-tab__networks-list-item" |
||||||
|
onClick={ () => { |
||||||
|
setNetworksTabAddMode(false) |
||||||
|
setSelectedSettingsRpcUrl(rpcUrl) |
||||||
|
}} |
||||||
|
> |
||||||
|
<NetworkDropdownIcon |
||||||
|
backgroundColor={iconColor || 'white'} |
||||||
|
innerBorder={border} |
||||||
|
/> |
||||||
|
<div className={ classnames('networks-tab__networks-list-name', { |
||||||
|
'networks-tab__networks-list-name--selected': displayNetworkListItemAsSelected, |
||||||
|
}) }> |
||||||
|
{ label || this.context.t(labelKey) } |
||||||
|
</div> |
||||||
|
<div className="networks-tab__networks-list-arrow" /> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
renderNetworksList () { |
||||||
|
const { networksToRender, selectedNetwork, networkIsSelected, networksTabIsInAddMode, networkDefaultedToProvider } = this.props |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={classnames('networks-tab__networks-list', { |
||||||
|
'networks-tab__networks-list--selection': (networkIsSelected && !networkDefaultedToProvider) || networksTabIsInAddMode, |
||||||
|
})}> |
||||||
|
{ networksToRender.map(network => this.renderNetworkListItem(network, selectedNetwork.rpcUrl)) } |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
renderNetworksTabContent () { |
||||||
|
const { |
||||||
|
setRpcTarget, |
||||||
|
setSelectedSettingsRpcUrl, |
||||||
|
setNetworksTabAddMode, |
||||||
|
selectedNetwork: { |
||||||
|
labelKey, |
||||||
|
label, |
||||||
|
rpcUrl, |
||||||
|
chainId, |
||||||
|
ticker, |
||||||
|
viewOnly, |
||||||
|
rpcPrefs, |
||||||
|
blockExplorerUrl, |
||||||
|
}, |
||||||
|
networksTabIsInAddMode, |
||||||
|
editRpc, |
||||||
|
networkDefaultedToProvider, |
||||||
|
} = this.props |
||||||
|
const envIsPopup = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="networks-tab__content"> |
||||||
|
{this.renderNetworksList()} |
||||||
|
{networksTabIsInAddMode || !envIsPopup || (envIsPopup && !networkDefaultedToProvider) |
||||||
|
? <NetworkForm |
||||||
|
setRpcTarget={setRpcTarget} |
||||||
|
editRpc={editRpc} |
||||||
|
networkName={label || labelKey && this.context.t(labelKey) || ''} |
||||||
|
rpcUrl={rpcUrl} |
||||||
|
chainId={chainId} |
||||||
|
ticker={ticker} |
||||||
|
onClear={() => { |
||||||
|
setNetworksTabAddMode(false) |
||||||
|
setSelectedSettingsRpcUrl(null) |
||||||
|
}} |
||||||
|
viewOnly={viewOnly} |
||||||
|
networksTabIsInAddMode={networksTabIsInAddMode} |
||||||
|
rpcPrefs={rpcPrefs} |
||||||
|
blockExplorerUrl={blockExplorerUrl} |
||||||
|
/> |
||||||
|
: null |
||||||
|
} |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
renderContent () { |
||||||
|
const { setNetworksTabAddMode, setSelectedSettingsRpcUrl, networkIsSelected, networksTabIsInAddMode } = this.props |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="networks-tab__body"> |
||||||
|
{this.renderSubHeader()} |
||||||
|
{this.renderNetworksTabContent()} |
||||||
|
{!networkIsSelected && !networksTabIsInAddMode |
||||||
|
? <div className="networks-tab__add-network-button-wrapper"> |
||||||
|
<Button |
||||||
|
type="primary" |
||||||
|
onClick={event => { |
||||||
|
event.preventDefault() |
||||||
|
setSelectedSettingsRpcUrl(null) |
||||||
|
setNetworksTabAddMode(true) |
||||||
|
}} |
||||||
|
> |
||||||
|
{ this.context.t('addNetwork') } |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
: null |
||||||
|
} |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
return this.renderContent() |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,50 @@ |
|||||||
|
const defaultNetworksData = [ |
||||||
|
{ |
||||||
|
labelKey: 'mainnet', |
||||||
|
iconColor: '#29B6AF', |
||||||
|
providerType: 'mainnet', |
||||||
|
rpcUrl: 'https://api.infura.io/v1/jsonrpc/mainnet', |
||||||
|
chainId: '1', |
||||||
|
ticker: 'ETH', |
||||||
|
blockExplorerUrl: 'https://etherscan.io', |
||||||
|
}, |
||||||
|
{ |
||||||
|
labelKey: 'ropsten', |
||||||
|
iconColor: '#FF4A8D', |
||||||
|
providerType: 'ropsten', |
||||||
|
rpcUrl: 'https://api.infura.io/v1/jsonrpc/ropsten', |
||||||
|
chainId: '3', |
||||||
|
ticker: 'ETH', |
||||||
|
blockExplorerUrl: 'https://ropsten.etherscan.io', |
||||||
|
}, |
||||||
|
{ |
||||||
|
labelKey: 'kovan', |
||||||
|
iconColor: '#9064FF', |
||||||
|
providerType: 'kovan', |
||||||
|
rpcUrl: 'https://api.infura.io/v1/jsonrpc/kovan', |
||||||
|
chainId: '4', |
||||||
|
ticker: 'ETH', |
||||||
|
blockExplorerUrl: 'https://etherscan.io', |
||||||
|
}, |
||||||
|
{ |
||||||
|
labelKey: 'rinkeby', |
||||||
|
iconColor: '#F6C343', |
||||||
|
providerType: 'rinkeby', |
||||||
|
rpcUrl: 'https://api.infura.io/v1/jsonrpc/rinkeby', |
||||||
|
chainId: '42', |
||||||
|
ticker: 'ETH', |
||||||
|
blockExplorerUrl: 'https://rinkeby.etherscan.io', |
||||||
|
}, |
||||||
|
{ |
||||||
|
labelKey: 'localhost', |
||||||
|
iconColor: 'white', |
||||||
|
border: '1px solid #6A737D', |
||||||
|
providerType: 'localhost', |
||||||
|
rpcUrl: 'http://localhost:8545/', |
||||||
|
blockExplorerUrl: 'https://etherscan.io', |
||||||
|
}, |
||||||
|
] |
||||||
|
|
||||||
|
export { |
||||||
|
defaultNetworksData, |
||||||
|
} |
||||||
@ -0,0 +1,77 @@ |
|||||||
|
import NetworksTab from './networks-tab.component' |
||||||
|
import { compose } from 'recompose' |
||||||
|
import { connect } from 'react-redux' |
||||||
|
import { withRouter } from 'react-router-dom' |
||||||
|
import { |
||||||
|
setSelectedSettingsRpcUrl, |
||||||
|
updateAndSetCustomRpc, |
||||||
|
displayWarning, |
||||||
|
setNetworksTabAddMode, |
||||||
|
editRpc, |
||||||
|
} from '../../../store/actions' |
||||||
|
import { defaultNetworksData } from './networks-tab.constants' |
||||||
|
const defaultNetworks = defaultNetworksData.map(network => ({ ...network, viewOnly: true })) |
||||||
|
|
||||||
|
const mapStateToProps = state => { |
||||||
|
const { |
||||||
|
frequentRpcListDetail, |
||||||
|
provider, |
||||||
|
} = state.metamask |
||||||
|
const { |
||||||
|
networksTabSelectedRpcUrl, |
||||||
|
networksTabIsInAddMode, |
||||||
|
} = state.appState |
||||||
|
|
||||||
|
const frequentRpcNetworkListDetails = frequentRpcListDetail.map(rpc => { |
||||||
|
return { |
||||||
|
label: rpc.nickname, |
||||||
|
iconColor: '#6A737D', |
||||||
|
providerType: 'rpc', |
||||||
|
rpcUrl: rpc.rpcUrl, |
||||||
|
chainId: rpc.chainId, |
||||||
|
ticker: rpc.ticker, |
||||||
|
blockExplorerUrl: rpc.rpcPrefs && rpc.rpcPrefs.blockExplorerUrl || '', |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
const networksToRender = [ ...defaultNetworks, ...frequentRpcNetworkListDetails ] |
||||||
|
let selectedNetwork = networksToRender.find(network => network.rpcUrl === networksTabSelectedRpcUrl) || {} |
||||||
|
const networkIsSelected = Boolean(selectedNetwork.rpcUrl) |
||||||
|
|
||||||
|
let networkDefaultedToProvider = false |
||||||
|
if (!networkIsSelected && !networksTabIsInAddMode) { |
||||||
|
selectedNetwork = networksToRender.find(network => { |
||||||
|
return network.rpcUrl === provider.rpcTarget || network.providerType !== 'rpc' && network.providerType === provider.type |
||||||
|
}) || {} |
||||||
|
networkDefaultedToProvider = true |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
selectedNetwork, |
||||||
|
networksToRender, |
||||||
|
networkIsSelected, |
||||||
|
networksTabIsInAddMode, |
||||||
|
providerType: provider.type, |
||||||
|
providerUrl: provider.rpcTarget, |
||||||
|
networkDefaultedToProvider, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const mapDispatchToProps = dispatch => { |
||||||
|
return { |
||||||
|
setSelectedSettingsRpcUrl: newRpcUrl => dispatch(setSelectedSettingsRpcUrl(newRpcUrl)), |
||||||
|
setRpcTarget: (newRpc, chainId, ticker, nickname, rpcPrefs) => { |
||||||
|
dispatch(updateAndSetCustomRpc(newRpc, chainId, ticker, nickname, rpcPrefs)) |
||||||
|
}, |
||||||
|
displayWarning: warning => dispatch(displayWarning(warning)), |
||||||
|
setNetworksTabAddMode: isInAddMode => dispatch(setNetworksTabAddMode(isInAddMode)), |
||||||
|
editRpc: (oldRpc, newRpc, chainId, ticker, nickname, rpcPrefs) => { |
||||||
|
dispatch(editRpc(oldRpc, newRpc, chainId, ticker, nickname, rpcPrefs)) |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default compose( |
||||||
|
withRouter, |
||||||
|
connect(mapStateToProps, mapDispatchToProps) |
||||||
|
)(NetworksTab) |
||||||
Loading…
Reference in new issue