diff options
Diffstat (limited to 'ui/app/pages/settings/networks-tab/networks-tab.component.js')
-rw-r--r-- | ui/app/pages/settings/networks-tab/networks-tab.component.js | 80 |
1 files changed, 56 insertions, 24 deletions
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 2f921a892..f6c8443cf 100644 --- a/ui/app/pages/settings/networks-tab/networks-tab.component.js +++ b/ui/app/pages/settings/networks-tab/networks-tab.component.js @@ -25,6 +25,7 @@ export default class NetworksTab extends PureComponent { setNetworksTabAddMode: PropTypes.func.isRequired, setRpcTarget: PropTypes.func.isRequired, setSelectedSettingsRpcUrl: PropTypes.func.isRequired, + delRpcTarget: PropTypes.func.isRequired, providerUrl: PropTypes.string, providerType: PropTypes.string, networkDefaultedToProvider: PropTypes.bool, @@ -62,7 +63,7 @@ export default class NetworksTab extends PureComponent { <span className="settings-page__sub-header-text">{ this.context.t('networks') }</span> <div className="networks-tab__add-network-header-button-wrapper"> <Button - type="primary" + type="secondary" onClick={event => { event.preventDefault() setSelectedSettingsRpcUrl(null) @@ -125,19 +126,41 @@ export default class NetworksTab extends PureComponent { renderNetworksList () { const { networksToRender, selectedNetwork, networkIsSelected, networksTabIsInAddMode, networkDefaultedToProvider } = this.props - + console.log(networksToRender) return ( - <div className={classnames('networks-tab__networks-list', { - 'networks-tab__networks-list--selection': (networkIsSelected && !networkDefaultedToProvider) || networksTabIsInAddMode, - })}> + <div + className={classnames('networks-tab__networks-list', { + 'networks-tab__networks-list--selection': (networkIsSelected && !networkDefaultedToProvider) || networksTabIsInAddMode, + })} + > { networksToRender.map(network => this.renderNetworkListItem(network, selectedNetwork.rpcUrl)) } + { + networksTabIsInAddMode && ( + <div + className="networks-tab__networks-list-item" + > + <NetworkDropdownIcon + backgroundColor="white" + innerBorder="1px solid rgb(106, 115, 125)" + /> + <div + className="networks-tab__networks-list-name networks-tab__networks-list-name--selected" + > + { this.context.t('newNetwork') } + </div> + <div className="networks-tab__networks-list-arrow" /> + </div> + ) + } </div> ) } renderNetworksTabContent () { + const { t } = this.context const { setRpcTarget, + delRpcTarget, setSelectedSettingsRpcUrl, setNetworksTabAddMode, selectedNetwork: { @@ -153,30 +176,39 @@ export default class NetworksTab extends PureComponent { networksTabIsInAddMode, editRpc, networkDefaultedToProvider, + providerUrl, } = this.props + const envIsPopup = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP + const shouldRenderNetworkForm = networksTabIsInAddMode || !envIsPopup || (envIsPopup && !networkDefaultedToProvider) 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 + { this.renderNetworksList() } + { + shouldRenderNetworkForm + ? ( + <NetworkForm + setRpcTarget={setRpcTarget} + editRpc={editRpc} + networkName={label || labelKey && t(labelKey) || ''} + rpcUrl={rpcUrl} + chainId={chainId} + ticker={ticker} + onClear={() => { + setNetworksTabAddMode(false) + setSelectedSettingsRpcUrl(null) + }} + delRpcTarget={delRpcTarget} + viewOnly={viewOnly} + isCurrentRpcTarget={providerUrl === rpcUrl} + networksTabIsInAddMode={networksTabIsInAddMode} + rpcPrefs={rpcPrefs} + blockExplorerUrl={blockExplorerUrl} + cancelText={t('cancel')} + /> + ) + : null } </div> ) |