mirror of
https://github.com/status-im/MyCrypto.git
synced 2025-01-20 16:09:28 +00:00
a043334685
* Initial work on refactoring node definitions to reduce number of places theyre defined, amount of copy pasting. * Use makeAutoNodeNAme instead of manually appending _auto * Add getNetVersion to list of unsupported methods * PR feedback * Rework web template node selector to be a network selector. Refactor some types to help with that. Better handle removing custom nodes. * Remove color dropdown. * Fix selecting custom networks. Show notification if change network intent fails. * Use selectors for current node / network instead of intuiting from nodeSelection * Add id key to all networks, simplify add and remove custom node and network functions. * Fix a lot of uses of network.name to use network.id instead. * Dont allow network chainid conflicts * Fix web3 network by chainid * Add testnet badge to network selector * Change nomenclature from change(Node|Network)(Intent)? to change(Node|Network)(Requested|Succeeded) * tscheck * Better code for chainid collision * Remove console logs * Fix tests * Network selector becomes self contained component used both by web header and electron nav. * Dont select node again * Additional title text * tscheck * Custom node behavior in Electron * Close panel too * Convert node label data into selector function * tscheck * Parens & space
80 lines
2.7 KiB
TypeScript
80 lines
2.7 KiB
TypeScript
import React from 'react';
|
|
import translate, { translateRaw } from 'translations';
|
|
import classnames from 'classnames';
|
|
import { isAutoNode, isAutoNodeConfig } from 'libs/nodes';
|
|
import { NodeConfig } from 'types/node';
|
|
import { NetworkConfig } from 'types/network';
|
|
import NodeOption from './NodeOption';
|
|
import './NetworkOption.scss';
|
|
|
|
interface Props {
|
|
nodes: NodeConfig[];
|
|
network: NetworkConfig;
|
|
nodeSelection: string;
|
|
isNetworkSelected: boolean;
|
|
isExpanded: boolean;
|
|
selectNode(node: NodeConfig): void;
|
|
selectNetwork(network: NetworkConfig): void;
|
|
toggleExpand(network: NetworkConfig): void;
|
|
}
|
|
|
|
export default class NetworkOption extends React.PureComponent<Props> {
|
|
public render() {
|
|
const { nodes, network, nodeSelection, isExpanded, isNetworkSelected } = this.props;
|
|
const borderLeftColor = network.isCustom ? '#CCC' : network.color;
|
|
const singleNodes = nodes.filter(node => !isAutoNodeConfig(node));
|
|
const isAutoSelected = isNetworkSelected && isAutoNode(nodeSelection);
|
|
const isLongName = network.name.length > 14;
|
|
|
|
return (
|
|
<div className="NetworkOption" style={{ borderLeftColor }}>
|
|
<div className="NetworkOption-label">
|
|
<div
|
|
className={classnames({
|
|
'NetworkOption-label-name': true,
|
|
'is-selected': isNetworkSelected,
|
|
'is-specific-node': isNetworkSelected && !isAutoSelected && singleNodes.length > 1,
|
|
'is-long-name': isLongName
|
|
})}
|
|
title={translateRaw('NETWORKS_SWITCH', { $network: network.name })}
|
|
onClick={this.handleSelect}
|
|
>
|
|
{network.name}
|
|
{network.isTestnet && (
|
|
<small className="NetworkOption-label-name-badge">({translate('TESTNET')})</small>
|
|
)}
|
|
</div>
|
|
<button
|
|
className={classnames('NetworkOption-label-expand', isExpanded && 'is-expanded')}
|
|
onClick={this.handleToggleExpand}
|
|
title={translateRaw('NETWORKS_EXPAND_NODES', { $network: network.name })}
|
|
>
|
|
<i className="fa fa-chevron-down" />
|
|
</button>
|
|
</div>
|
|
{isExpanded && (
|
|
<div className="NetworkOption-nodes">
|
|
{singleNodes.map(node => (
|
|
<NodeOption
|
|
key={node.id}
|
|
node={node}
|
|
isSelected={node.id === nodeSelection}
|
|
isAutoSelected={isAutoSelected}
|
|
select={this.props.selectNode}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
private handleSelect = () => {
|
|
this.props.selectNetwork(this.props.network);
|
|
};
|
|
|
|
private handleToggleExpand = () => {
|
|
this.props.toggleExpand(this.props.network);
|
|
};
|
|
}
|