import React, { PureComponent } from 'react' import PropTypes from 'prop-types' 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 NetworkDropdownIcon from '../../../components/app/dropdowns/components/network-dropdown-icon' import NetworkForm from './network-form' 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.arrayOf(PropTypes.object).isRequired, selectedNetwork: PropTypes.object, setNetworksTabAddMode: PropTypes.func.isRequired, setRpcTarget: PropTypes.func.isRequired, setSelectedSettingsRpcUrl: PropTypes.func.isRequired, showConfirmDeleteNetworkModal: PropTypes.func.isRequired, providerUrl: PropTypes.string, providerType: PropTypes.string, networkDefaultedToProvider: PropTypes.bool, } UNSAFE_componentWillMount () { this.props.setSelectedSettingsRpcUrl(null) } isCurrentPath (pathname) { return this.props.location.pathname === pathname } renderSubHeader () { const { networkIsSelected, setSelectedSettingsRpcUrl, setNetworksTabAddMode, networksTabIsInAddMode, networkDefaultedToProvider, } = this.props return (
{ setNetworksTabAddMode(false) setSelectedSettingsRpcUrl(null) } : () => this.props.history.push(SETTINGS_ROUTE) } /> { this.context.t('networks') }
) } 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 (
{ setNetworksTabAddMode(false) setSelectedSettingsRpcUrl(rpcUrl) }} >
{ label || this.context.t(labelKey) }
) } renderNetworksList () { const { networksToRender, selectedNetwork, networkIsSelected, networksTabIsInAddMode, networkDefaultedToProvider } = this.props return (
{ networksToRender.map((network) => this.renderNetworkListItem(network, selectedNetwork.rpcUrl)) } { networksTabIsInAddMode && (
{ this.context.t('newNetwork') }
) }
) } renderNetworksTabContent () { const { t } = this.context const { setRpcTarget, showConfirmDeleteNetworkModal, setSelectedSettingsRpcUrl, setNetworksTabAddMode, selectedNetwork: { labelKey, label, rpcUrl, chainId, ticker, viewOnly, rpcPrefs, blockExplorerUrl, }, networksTabIsInAddMode, editRpc, networkDefaultedToProvider, providerUrl, networksToRender, } = this.props const envIsPopup = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP const shouldRenderNetworkForm = networksTabIsInAddMode || !envIsPopup || (envIsPopup && !networkDefaultedToProvider) return (
{ this.renderNetworksList() } { shouldRenderNetworkForm ? ( network.rpcUrl)} setRpcTarget={setRpcTarget} editRpc={editRpc} networkName={label || (labelKey && t(labelKey)) || ''} rpcUrl={rpcUrl} chainId={chainId} ticker={ticker} onClear={() => { setNetworksTabAddMode(false) setSelectedSettingsRpcUrl(null) }} showConfirmDeleteNetworkModal={showConfirmDeleteNetworkModal} viewOnly={viewOnly} isCurrentRpcTarget={providerUrl === rpcUrl} networksTabIsInAddMode={networksTabIsInAddMode} rpcPrefs={rpcPrefs} blockExplorerUrl={blockExplorerUrl} cancelText={t('cancel')} /> ) : null }
) } render () { const { setNetworksTabAddMode, setSelectedSettingsRpcUrl, networkIsSelected, networksTabIsInAddMode } = this.props return (
{this.renderSubHeader()} {this.renderNetworksTabContent()} {!networkIsSelected && !networksTabIsInAddMode ? (
) : null }
) } }