undo formatting changes
This commit is contained in:
parent
571bc5e78d
commit
4651e1bb2f
|
@ -35,7 +35,7 @@ export default class CustomNodeModal extends React.Component<Props, State> {
|
|||
network: NETWORK_KEYS[0],
|
||||
hasAuth: false,
|
||||
username: '',
|
||||
password: ''
|
||||
password: '',
|
||||
};
|
||||
|
||||
public render() {
|
||||
|
@ -43,18 +43,15 @@ export default class CustomNodeModal extends React.Component<Props, State> {
|
|||
const isHttps = window.location.protocol.includes('https');
|
||||
const invalids = this.getInvalids();
|
||||
|
||||
const buttons: IButton[] = [
|
||||
{
|
||||
type: 'primary',
|
||||
text: translate('NODE_CTA'),
|
||||
onClick: this.saveAndAdd,
|
||||
disabled: !!Object.keys(invalids).length
|
||||
},
|
||||
{
|
||||
text: translate('x_Cancel'),
|
||||
onClick: handleClose
|
||||
}
|
||||
];
|
||||
const buttons: IButton[] = [{
|
||||
type: 'primary',
|
||||
text: translate('NODE_CTA'),
|
||||
onClick: this.saveAndAdd,
|
||||
disabled: !!Object.keys(invalids).length,
|
||||
}, {
|
||||
text: translate('x_Cancel'),
|
||||
onClick: handleClose
|
||||
}];
|
||||
|
||||
return (
|
||||
<Modal
|
||||
|
@ -64,23 +61,20 @@ export default class CustomNodeModal extends React.Component<Props, State> {
|
|||
handleClose={handleClose}
|
||||
>
|
||||
<div>
|
||||
{isHttps && (
|
||||
{isHttps &&
|
||||
<div className="alert alert-danger small">
|
||||
{translate('NODE_Warning')}
|
||||
</div>
|
||||
)}
|
||||
}
|
||||
|
||||
<form>
|
||||
<div className="row">
|
||||
<div className="col-sm-7">
|
||||
<label>{translate('NODE_Name')}</label>
|
||||
{this.renderInput(
|
||||
{
|
||||
name: 'name',
|
||||
placeholder: 'My Node'
|
||||
},
|
||||
invalids
|
||||
)}
|
||||
{this.renderInput({
|
||||
name: 'name',
|
||||
placeholder: 'My Node',
|
||||
}, invalids)}
|
||||
</div>
|
||||
<div className="col-sm-5">
|
||||
<label>Network</label>
|
||||
|
@ -90,11 +84,9 @@ export default class CustomNodeModal extends React.Component<Props, State> {
|
|||
value={this.state.network}
|
||||
onChange={this.handleChange}
|
||||
>
|
||||
{NETWORK_KEYS.map(net => (
|
||||
<option key={net} value={net}>
|
||||
{net}
|
||||
</option>
|
||||
))}
|
||||
{NETWORK_KEYS.map((net) =>
|
||||
<option key={net} value={net}>{net}</option>
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -102,25 +94,19 @@ export default class CustomNodeModal extends React.Component<Props, State> {
|
|||
<div className="row">
|
||||
<div className="col-sm-9">
|
||||
<label>URL</label>
|
||||
{this.renderInput(
|
||||
{
|
||||
name: 'url',
|
||||
placeholder: 'http://127.0.0.1/'
|
||||
},
|
||||
invalids
|
||||
)}
|
||||
{this.renderInput({
|
||||
name: 'url',
|
||||
placeholder: 'http://127.0.0.1/',
|
||||
}, invalids)}
|
||||
</div>
|
||||
|
||||
<div className="col-sm-3">
|
||||
<label>{translate('NODE_Port')}</label>
|
||||
{this.renderInput(
|
||||
{
|
||||
name: 'port',
|
||||
placeholder: '8545',
|
||||
type: 'number'
|
||||
},
|
||||
invalids
|
||||
)}
|
||||
{this.renderInput({
|
||||
name: 'port',
|
||||
placeholder: '8545',
|
||||
type: 'number',
|
||||
}, invalids)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
|
@ -131,12 +117,13 @@ export default class CustomNodeModal extends React.Component<Props, State> {
|
|||
name="hasAuth"
|
||||
checked={this.state.hasAuth}
|
||||
onChange={this.handleCheckbox}
|
||||
/>{' '}
|
||||
/>
|
||||
{' '}
|
||||
<span>HTTP Basic Authentication</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{this.state.hasAuth && (
|
||||
{this.state.hasAuth &&
|
||||
<div className="row">
|
||||
<div className="col-sm-6">
|
||||
<label>Username</label>
|
||||
|
@ -144,16 +131,13 @@ export default class CustomNodeModal extends React.Component<Props, State> {
|
|||
</div>
|
||||
<div className="col-sm-6">
|
||||
<label>Password</label>
|
||||
{this.renderInput(
|
||||
{
|
||||
name: 'password',
|
||||
type: 'password'
|
||||
},
|
||||
invalids
|
||||
)}
|
||||
{this.renderInput({
|
||||
name: 'password',
|
||||
type: 'password',
|
||||
}, invalids)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
}
|
||||
</form>
|
||||
</div>
|
||||
</Modal>
|
||||
|
@ -161,26 +145,30 @@ export default class CustomNodeModal extends React.Component<Props, State> {
|
|||
}
|
||||
|
||||
private renderInput(input: Input, invalids: { [key: string]: boolean }) {
|
||||
return (
|
||||
<input
|
||||
className={classnames({
|
||||
'form-control': true,
|
||||
'is-invalid': this.state[input.name] && invalids[input.name]
|
||||
})}
|
||||
value={this.state[name]}
|
||||
onChange={this.handleChange}
|
||||
{...input}
|
||||
/>
|
||||
);
|
||||
return <input
|
||||
className={classnames({
|
||||
'form-control': true,
|
||||
'is-invalid': this.state[input.name] && invalids[input.name],
|
||||
})}
|
||||
value={this.state[name]}
|
||||
onChange={this.handleChange}
|
||||
{...input}
|
||||
/>;
|
||||
}
|
||||
|
||||
private getInvalids(): { [key: string]: boolean } {
|
||||
const { url, port, hasAuth, username, password } = this.state;
|
||||
const required = ['name', 'url', 'port', 'network'];
|
||||
const {
|
||||
url,
|
||||
port,
|
||||
hasAuth,
|
||||
username,
|
||||
password,
|
||||
} = this.state;
|
||||
const required = ["name", "url", "port", "network"];
|
||||
const invalids: { [key: string]: boolean } = {};
|
||||
|
||||
// Required fields
|
||||
required.forEach(field => {
|
||||
required.forEach((field) => {
|
||||
if (!this.state[field]) {
|
||||
invalids[field] = true;
|
||||
}
|
||||
|
@ -210,9 +198,9 @@ export default class CustomNodeModal extends React.Component<Props, State> {
|
|||
return invalids;
|
||||
}
|
||||
|
||||
private handleChange = (
|
||||
ev: React.FormEvent<HTMLInputElement | HTMLSelectElement>
|
||||
) => {
|
||||
private handleChange = (ev: React.FormEvent<
|
||||
HTMLInputElement | HTMLSelectElement
|
||||
>) => {
|
||||
const { name, value } = ev.currentTarget;
|
||||
this.setState({ [name as any]: value });
|
||||
};
|
||||
|
@ -227,13 +215,13 @@ export default class CustomNodeModal extends React.Component<Props, State> {
|
|||
name: this.state.name.trim(),
|
||||
url: this.state.url.trim(),
|
||||
port: parseInt(this.state.port, 10),
|
||||
network: this.state.network
|
||||
network: this.state.network,
|
||||
};
|
||||
|
||||
if (this.state.hasAuth) {
|
||||
node.auth = {
|
||||
username: this.state.username,
|
||||
password: this.state.password
|
||||
password: this.state.password,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
@ -8,7 +8,7 @@ import {
|
|||
TChangeLanguage,
|
||||
TChangeNodeIntent,
|
||||
TAddCustomNode,
|
||||
TRemoveCustomNode
|
||||
TRemoveCustomNode,
|
||||
} from 'actions/config';
|
||||
import { AlphaAgreement, Footer, Header } from 'components';
|
||||
import React, { Component } from 'react';
|
||||
|
@ -52,7 +52,7 @@ class TabSection extends Component<Props, {}> {
|
|||
changeNodeIntent,
|
||||
changeGasPrice,
|
||||
addCustomNode,
|
||||
removeCustomNode
|
||||
removeCustomNode,
|
||||
} = this.props;
|
||||
|
||||
const headerProps = {
|
||||
|
@ -67,7 +67,7 @@ class TabSection extends Component<Props, {}> {
|
|||
changeNodeIntent,
|
||||
changeGasPrice,
|
||||
addCustomNode,
|
||||
removeCustomNode
|
||||
removeCustomNode,
|
||||
};
|
||||
|
||||
return (
|
||||
|
@ -92,7 +92,7 @@ function mapStateToProps(state: AppState) {
|
|||
languageSelection: state.config.languageSelection,
|
||||
gasPriceGwei: state.config.gasPriceGwei,
|
||||
customNodes: state.config.customNodes,
|
||||
latestBlock: state.config.latestBlock
|
||||
latestBlock: state.config.latestBlock,
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -101,5 +101,5 @@ export default connect(mapStateToProps, {
|
|||
changeLanguage: dChangeLanguage,
|
||||
changeNodeIntent: dChangeNodeIntent,
|
||||
addCustomNode: dAddCustomNode,
|
||||
removeCustomNode: dRemoveCustomNode
|
||||
removeCustomNode: dRemoveCustomNode,
|
||||
})(TabSection);
|
||||
|
|
|
@ -7,7 +7,7 @@ import {
|
|||
GetTokenBalanceRequest,
|
||||
GetTransactionCountRequest,
|
||||
SendRawTxRequest,
|
||||
GetCurrentBlockRequest
|
||||
GetCurrentBlockRequest,
|
||||
} from './types';
|
||||
import { hexEncodeData } from './utils';
|
||||
import { TxObj } from '../INode';
|
||||
|
@ -67,7 +67,7 @@ export default class RPCRequests {
|
|||
|
||||
public getCurrentBlock(): GetCurrentBlockRequest | any {
|
||||
return {
|
||||
method: 'eth_blockNumber'
|
||||
method: 'eth_blockNumber',
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
@ -5,10 +5,14 @@ import {
|
|||
AddCustomNodeAction,
|
||||
RemoveCustomNodeAction,
|
||||
SetLatestBlockAction,
|
||||
ConfigAction
|
||||
ConfigAction,
|
||||
} from 'actions/config';
|
||||
import { TypeKeys } from 'actions/config/constants';
|
||||
import { NODES, NodeConfig, CustomNodeConfig } from '../config/data';
|
||||
import {
|
||||
NODES,
|
||||
NodeConfig,
|
||||
CustomNodeConfig,
|
||||
} from '../config/data';
|
||||
import { makeCustomNodeId } from 'utils/node';
|
||||
|
||||
export interface State {
|
||||
|
@ -34,7 +38,7 @@ export const INITIAL_STATE: State = {
|
|||
offline: false,
|
||||
forceOffline: false,
|
||||
customNodes: [],
|
||||
latestBlock: '???'
|
||||
latestBlock: "???",
|
||||
};
|
||||
|
||||
function changeLanguage(state: State, action: ChangeLanguageAction): State {
|
||||
|
@ -49,14 +53,14 @@ function changeNode(state: State, action: ChangeNodeAction): State {
|
|||
...state,
|
||||
nodeSelection: action.payload.nodeSelection,
|
||||
node: action.payload.node,
|
||||
isChangingNode: false
|
||||
isChangingNode: false,
|
||||
};
|
||||
}
|
||||
|
||||
function changeNodeIntent(state: State): State {
|
||||
return {
|
||||
...state,
|
||||
isChangingNode: true
|
||||
isChangingNode: true,
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -84,7 +88,10 @@ function forceOffline(state: State): State {
|
|||
function addCustomNode(state: State, action: AddCustomNodeAction): State {
|
||||
return {
|
||||
...state,
|
||||
customNodes: [...state.customNodes, action.payload]
|
||||
customNodes: [
|
||||
...state.customNodes,
|
||||
action.payload,
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -92,16 +99,16 @@ function removeCustomNode(state: State, action: RemoveCustomNodeAction): State {
|
|||
const id = makeCustomNodeId(action.payload);
|
||||
return {
|
||||
...state,
|
||||
customNodes: state.customNodes.filter(cn => cn !== action.payload),
|
||||
nodeSelection:
|
||||
id === state.nodeSelection ? defaultNode : state.nodeSelection
|
||||
customNodes: state.customNodes.filter((cn) => cn !== action.payload),
|
||||
nodeSelection: id === state.nodeSelection ?
|
||||
defaultNode : state.nodeSelection,
|
||||
};
|
||||
}
|
||||
|
||||
function setLatestBlock(state: State, action: SetLatestBlockAction): State {
|
||||
return {
|
||||
...state,
|
||||
latestBlock: action.payload
|
||||
latestBlock: action.payload,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
@ -6,15 +6,13 @@ export function makeCustomNodeId(config: CustomNodeConfig): string {
|
|||
}
|
||||
|
||||
export function getCustomNodeConfigFromId(
|
||||
id: string,
|
||||
configs: CustomNodeConfig[]
|
||||
id: string, configs: CustomNodeConfig[]
|
||||
): CustomNodeConfig | undefined {
|
||||
return configs.find(node => makeCustomNodeId(node) === id);
|
||||
return configs.find((node) => makeCustomNodeId(node) === id);
|
||||
}
|
||||
|
||||
export function getNodeConfigFromId(
|
||||
id: string,
|
||||
configs: CustomNodeConfig[]
|
||||
id: string, configs: CustomNodeConfig[]
|
||||
): NodeConfig | undefined {
|
||||
if (NODES[id]) {
|
||||
return NODES[id];
|
||||
|
@ -32,7 +30,7 @@ export function makeNodeConfigFromCustomConfig(
|
|||
return {
|
||||
network: config.network,
|
||||
lib: new CustomNode(config),
|
||||
service: 'your custom node',
|
||||
estimateGas: true
|
||||
service: "your custom node",
|
||||
estimateGas: true,
|
||||
};
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue