diff --git a/app/styles/app.css b/app/styles/app.css index c6231e8..54aba37 100644 --- a/app/styles/app.css +++ b/app/styles/app.css @@ -8,7 +8,7 @@ .container { margin-top: 20px; - max-width: 80rem; + max-width: 100rem; } .geth-options { @@ -35,8 +35,5 @@ } main { - position: absolute; - top: 0; - bottom: 0; - left: 240px; + position: absolute 0 0 0 240px; } diff --git a/main.js b/main.js index fa138f0..fe157fa 100644 --- a/main.js +++ b/main.js @@ -10,11 +10,13 @@ const BrowserWindow = electron.BrowserWindow const path = require('path') const url = require('url') -// if(hot){ -// require('electron-reload')(__dirname, { - // electron: path.join(__dirname, 'node_modules', '.bin', 'electron'), -// }); -// } +/* +if(process.env.HOT){ + require('electron-reload')(__dirname, { + electron: path.join(__dirname, 'node_modules', '.bin', 'electron'), + }); +} +*/ var gethProcess = null; @@ -23,7 +25,7 @@ let mainWindow function createWindow () { // Create the browser window. - mainWindow = new BrowserWindow({width: 1280, height: 600}) + mainWindow = new BrowserWindow({width: 1200, height: 700}) // and load the index.html of the app. mainWindow.loadURL(url.format({ @@ -107,12 +109,15 @@ ipcMain.on('start', function(event, arg) { if(noDiscover) { gethOption.push('--nodiscover'); } - - gethProcess = spawn("geth", gethOption.concat([ + const cmd = gethOption.concat([ 'console' // '2>>', // '2017-03-07.log' - ]), { + ]); + + console.log(cmd.join(' ')); + + gethProcess = spawn("geth", cmd, { cwd: dir }); diff --git a/package.json b/package.json index 3ef074b..3589b51 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "devDependencies": { "babel-core": "^6.24.1", "babel-loader": "^7.0.0", + "babel-polyfill": "^6.23.0", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", diff --git a/renderer/components/connectIcon.jsx b/renderer/components/connectIcon.jsx index 0071341..0a78b57 100644 --- a/renderer/components/connectIcon.jsx +++ b/renderer/components/connectIcon.jsx @@ -10,7 +10,7 @@ const defaultProps = {}; */ const ConnectIcon = (props) => { const { connecting } = props; - const bgImage = connecting ? 'images/connected.png' : 'images/disconnected.png'; + const bgImage = `../app/assets/images/${connecting ? 'connected.png' : 'disconnected.png'}`; return ( { this.props.handleConnectingChange(true); }); + // 切断成功 ipcRenderer.on('disconnected', (obj, res) => { this.props.handleConnectingChange(false); }); @@ -106,7 +108,7 @@ class Setting extends Component{
-
+
@@ -118,6 +120,7 @@ class Setting extends Component{
+ {/* rpcはデフォルトでON
@@ -135,6 +138,7 @@ class Setting extends Component{
+ */}
diff --git a/renderer/components/statePage.jsx b/renderer/components/statePage.jsx index 4076012..7730951 100644 --- a/renderer/components/statePage.jsx +++ b/renderer/components/statePage.jsx @@ -1,10 +1,8 @@ -/* -import React from 'react' -import Head from 'next/head' -import 'isomorphic-fetch' +import "babel-polyfill"; +import React, { Component } from 'react' +// import 'isomorphic-fetch' import Web3 from 'web3'; -const web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:8545')); const unix2datetime = (unixtime) => { var date = new Date( unixtime * 1000 ); @@ -18,55 +16,98 @@ const unix2datetime = (unixtime) => { return datetimeString; }; -export default class extends React.Component { - static async getInitialProps () { - const { api } = web3.version; +export default class extends Component { + constructor (props) { + super(props) + this._timer = null; + this.state = { + accounts: null, + api: null, + autoRefresh: false, + balance: {}, + blockInfo: {}, + blockNumber: null, + coinbase: null, + compilers: null, + hashrate: null, + host: null, + isConnected: null, + isLoading: false, + network: null, + node: null, + peerCount: null, + price: 0, + syncing: null + } + } + + componentDidMount(){ + if (typeof this.web3 !== 'undefined') { + this.web3 = new Web3(this.web3.currentProvider); + } else { + this.web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545")); + } + // check + this.web3.version.getNode((error, result) => { + if(error){ + console.log('RPC is not connected.'); + return; + } + console.log(result); + this.getInitialProps(); + }) + + } + + componentWillUnmount(){ + console.log('unmount'); + } + + /** + * 所持etherを取得 + * @param {string} coinbase コインベース + * @returns {object} wei,szabo,etherの値 + */ + getBalance(coinbase){ + const { getBalance } = this.web3.eth; + const wei = getBalance(coinbase); + return { + wei: wei.toString(10), + ether: this.web3.fromWei(wei, 'ether').toString(10), + szabo: this.web3.fromWei(wei, 'szabo').toString(10) + } + } + + async getInitialProps () { + const { api } = this.web3.version; const network = await new Promise((resolve, reject) => { - web3.version.getNetwork((error, result) => { + this.web3.version.getNetwork((error, result) => { resolve(result); }); }); const node = await new Promise((resolve, reject) => { - web3.version.getNode((error, result) => { + this.web3.version.getNode((error, result) => { resolve(result); }); }); - const { host } = web3.currentProvider; - const compilers = web3.eth.getCompilers(); - const isConnected = web3.isConnected(); + const { host } = this.web3.currentProvider; + const compilers = this.web3.eth.getCompilers(); + const isConnected = this.web3.isConnected(); // net - const { peerCount } = web3.net; + const { peerCount } = this.web3.net; // eth - const { accounts, coinbase, mining, blockNumber, hashrate, syncing, getBalance } = web3.eth; - const balance = web3.fromWei(getBalance(coinbase), 'ether').toString(10); + const { accounts, coinbase, mining, blockNumber, hashrate, syncing } = this.web3.eth; + const balance = this.getBalance(coinbase); // block - const blockInfo = web3.eth.getBlock(blockNumber); + const blockInfo = this.web3.eth.getBlock(blockNumber); - return { + this.setState({ network, api, node, host, compilers, isConnected, peerCount, accounts, - coinbase, mining, blockNumber, + coinbase, blockNumber, hashrate, syncing, balance, blockInfo - } - } - - constructor (props) { - super(props) - this._timer = null; - // propsとしてもつものとそうでないものを分ける・・？ - this.state = { - isLoading: false, - mining: props.mining, - coinbase: props.coinbase, - blockNumber: props.blockNumber, - hashrate: props.hashrate, - peerCount: props.peerCount, - price: 0, - blockInfo: props.blockInfo, - balance: props.balance, - autoRefresh: false, - } + }); } async refresh(e){ @@ -80,63 +121,52 @@ export default class extends React.Component { }); const coinbase = await new Promise((resolve, reject) => { - web3.eth.getCoinbase((error, result) => { + this.web3.eth.getCoinbase((error, result) => { resolve(result); }); }); - const _balance = await new Promise((resolve, reject) => { - web3.eth.getBalance(coinbase, (error, result) => { - resolve(result.toString(10)); - }); - }); - - const balance = web3.fromWei(_balance, 'ether').toString(10); - - const mining = await new Promise((resolve, reject) => { - web3.eth.getMining((error, result) => { - resolve(result); - }); - }); + const balance = this.getBalance(coinbase); const blockNumber = await new Promise((resolve, reject) => { - web3.eth.getBlockNumber((error, result) => { + this.web3.eth.getBlockNumber((error, result) => { resolve(result); }); }); const blockInfo = await new Promise((resolve, reject) => { - web3.eth.getBlock(blockNumber, (error, result) => { + this.web3.eth.getBlock(blockNumber, (error, result) => { resolve(result); }); }); const hashrate = await new Promise((resolve, reject) => { - web3.eth.getHashrate((error, result) => { + this.web3.eth.getHashrate((error, result) => { resolve(result); }); }); const price = await new Promise((resolve, reject) => { - web3.eth.getGasPrice((error, result) => { + this.web3.eth.getGasPrice((error, result) => { resolve(result.toString(10)); }); }); const peerCount = await new Promise((resolve, reject) => { - web3.net.getPeerCount((error, result) => { + this.web3.net.getPeerCount((error, result) => { resolve(result); }); }); this.setState({ - mining, hashrate, coinbase, + hashrate, coinbase, peerCount, price, blockInfo, balance, blockNumber, isLoading: false }) } + toggleAutoRefresh(e) { e.preventDefault(); this.setState({ @@ -152,45 +182,36 @@ export default class extends React.Component { } } }); - - - } render() { const { - coinbase, - mining, - hashrate, - peerCount, - price, + accounts, + api, + autoRefresh, balance, blockInfo, blockNumber, - isLoading, - autoRefresh - } = this.state; - const { - network, api, node, - host, compilers, + coinbase, + compilers, + hashrate, + host, isConnected, - accounts, + isLoading, + network, + node, + peerCount, + price, syncing - } = this.props; + } = this.state; const autoRefreshText = autoRefresh ? 'disable auto refresh' : 'enable auto refresh'; const autoRefreshText2 = autoRefresh ? 'Running' : ''; return (
- - - - - -
-

eth +

{autoRefreshText2} @@ -199,10 +220,6 @@ export default class extends React.Component {
coinbase
{coinbase}

-
-
isMining
-
{mining ? '⛏' : '👷'}
-
currentHashrate
{hashrate}
@@ -217,7 +234,9 @@ export default class extends React.Component {
currentBalance
-
{balance} ehter
+
{balance.ether} ehter
+
{balance.szabo} szabo
+
{balance.wei} wei
@@ -288,4 +307,3 @@ export default class extends React.Component { ) } } -*/ diff --git a/renderer/containers/app.jsx b/renderer/containers/app.jsx index 5cfe75e..28519b0 100644 --- a/renderer/containers/app.jsx +++ b/renderer/containers/app.jsx @@ -1,5 +1,6 @@ import React, { Component, PropTypes } from 'react'; import Setting from '../components/setting.jsx'; +import State from '../components/statePage.jsx'; import TabBar from '../components/tabBar.jsx'; import { TAB_STATE } from '../constants'; @@ -13,7 +14,7 @@ const initialState = { port: '2001', noDiscover: true, dev: true, - rpc: false, + rpc: true, rpcAddress: '', rpcPort: '', connecting: false, @@ -179,7 +180,7 @@ class App extends Component{ mining={mining} />
- { tabIndex === TAB_STATE.STATE ?
state
: null} + { tabIndex === TAB_STATE.STATE ? : null} { tabIndex === TAB_STATE.SETTING ? settingCompornent : null}