diff options
author | Dan J Miller <danjm.com@gmail.com> | 2019-05-10 01:27:14 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2019-05-10 01:27:14 +0800 |
commit | 13be683701bc46d8f1bcbaa301e2b7f01a34e29c (patch) | |
tree | 18974b5a8c5c9054904c903a2554a6d7ce1b79d7 /ui/app/pages/settings/networks-tab/networks-tab.component.js | |
parent | 094e4cf555c698bfef50ca6679cd1e98f4ea9aa1 (diff) | |
download | tangerine-wallet-browser-13be683701bc46d8f1bcbaa301e2b7f01a34e29c.tar.gz tangerine-wallet-browser-13be683701bc46d8f1bcbaa301e2b7f01a34e29c.tar.zst tangerine-wallet-browser-13be683701bc46d8f1bcbaa301e2b7f01a34e29c.zip |
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.
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 | 214 |
1 files changed, 214 insertions, 0 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 new file mode 100644 index 000000000..2f921a892 --- /dev/null +++ b/ui/app/pages/settings/networks-tab/networks-tab.component.js @@ -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() + } +} |