Merge remote-tracking branch 'origin/master' into check-updates
This commit is contained in:
Gav Wood
commit
33f266fffe
2
Cargo.lock
generated
2
Cargo.lock
generated
@ -1294,7 +1294,7 @@ dependencies = [
|
||||
[[package]]
|
||||
name = "parity-ui-precompiled"
|
||||
version = "1.4.0"
|
||||
source = "git+https://github.com/ethcore/js-precompiled.git#3e04f32403aab917a149d54f4191263f1c79f5ce"
|
||||
source = "git+https://github.com/ethcore/js-precompiled.git#6430c6ef5d00f3a411546021ae2915740abce561"
|
||||
dependencies = [
|
||||
"parity-dapps-glue 1.4.0 (registry+https://github.com/rust-lang/crates.io-index)",
|
||||
]
|
||||
|
||||
15
js/.babelrc
15
js/.babelrc
@ -13,18 +13,19 @@
|
||||
"retainLines": true,
|
||||
"env": {
|
||||
"production": {
|
||||
"plugins": ["transform-react-remove-prop-types"]
|
||||
"plugins": [
|
||||
"transform-react-remove-prop-types"
|
||||
]
|
||||
},
|
||||
"development": {
|
||||
"plugins": ["react-hot-loader/babel"]
|
||||
"plugins": [
|
||||
"react-hot-loader/babel",
|
||||
["react-intl", { "messagesDir": "./.build/i18n/" }]
|
||||
]
|
||||
},
|
||||
"test": {
|
||||
"plugins": [
|
||||
[
|
||||
"babel-plugin-webpack-alias", {
|
||||
"config": "webpack/test.js"
|
||||
}
|
||||
]
|
||||
["babel-plugin-webpack-alias", { "config": "webpack/test.js" }]
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "parity.js",
|
||||
"version": "0.2.111",
|
||||
"version": "0.2.113",
|
||||
"main": "release/index.js",
|
||||
"jsnext:main": "src/index.js",
|
||||
"author": "Parity Team <admin@parity.io>",
|
||||
@ -52,6 +52,7 @@
|
||||
"babel-eslint": "7.1.1",
|
||||
"babel-loader": "6.2.8",
|
||||
"babel-plugin-lodash": "3.2.10",
|
||||
"babel-plugin-react-intl": "2.2.0",
|
||||
"babel-plugin-transform-class-properties": "6.18.0",
|
||||
"babel-plugin-transform-decorators-legacy": "1.3.4",
|
||||
"babel-plugin-transform-object-rest-spread": "6.20.2",
|
||||
@ -111,6 +112,7 @@
|
||||
"react-addons-perf": "15.4.1",
|
||||
"react-addons-test-utils": "15.4.1",
|
||||
"react-hot-loader": "3.0.0-beta.6",
|
||||
"react-intl-aggregate-webpack-plugin": "0.0.1",
|
||||
"rucksack-css": "0.9.1",
|
||||
"sinon": "1.17.6",
|
||||
"sinon-as-promised": "4.0.2",
|
||||
@ -133,6 +135,7 @@
|
||||
"ethereumjs-tx": "1.1.4",
|
||||
"eventemitter3": "2.0.2",
|
||||
"file-saver": "1.3.3",
|
||||
"flat": "2.0.1",
|
||||
"format-json": "1.0.3",
|
||||
"format-number": "2.0.1",
|
||||
"geopattern": "1.2.3",
|
||||
@ -155,6 +158,7 @@
|
||||
"react-copy-to-clipboard": "4.2.3",
|
||||
"react-dom": "15.4.1",
|
||||
"react-dropzone": "3.7.3",
|
||||
"react-intl": "2.1.5",
|
||||
"react-redux": "4.4.6",
|
||||
"react-router": "3.0.0",
|
||||
"react-router-redux": "4.0.7",
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import { inNumber16, inData } from '../../format/input';
|
||||
import { inData, inNumber16, inOptions } from '../../format/input';
|
||||
import { outSignerRequest } from '../../format/output';
|
||||
|
||||
export default class Signer {
|
||||
@ -24,7 +24,7 @@ export default class Signer {
|
||||
|
||||
confirmRequest (requestId, options, password) {
|
||||
return this._transport
|
||||
.execute('signer_confirmRequest', inNumber16(requestId), options, password);
|
||||
.execute('signer_confirmRequest', inNumber16(requestId), inOptions(options), password);
|
||||
}
|
||||
|
||||
confirmRequestRaw (requestId, data) {
|
||||
|
||||
21
js/src/i18n/de/index.js
Normal file
21
js/src/i18n/de/index.js
Normal file
@ -0,0 +1,21 @@
|
||||
// Copyright 2015, 2016 Ethcore (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import settings from './settings';
|
||||
|
||||
export default {
|
||||
settings
|
||||
};
|
||||
96
js/src/i18n/de/settings.js
Normal file
96
js/src/i18n/de/settings.js
Normal file
@ -0,0 +1,96 @@
|
||||
// Copyright 2015, 2016 Ethcore (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
export default {
|
||||
label: 'Einstellungen',
|
||||
|
||||
background: {
|
||||
label: 'Hintergrund',
|
||||
|
||||
overview_0: 'Dein Hintergrundmuster ist einzigartig und beruht auf deiner Parity-Installation. Es ändert sich immer dann, wenn du ein neues Signer-Token erstellst. So können dezentrale Applicationen keine Vertrauenswürdigkeit vortäuschen.',
|
||||
overview_1: 'Such dir ein Muster aus und merke es dir. Dieses Muster wird dir von nun an immer angezeigt, es sei denn du löschst deinen Browser-Cache oder benutzt ein neues Signer-Token.',
|
||||
|
||||
button_more: 'weitere generieren'
|
||||
},
|
||||
|
||||
parity: {
|
||||
label: 'Parity',
|
||||
|
||||
overview_0: 'Diese Einstellungen verändern das Verhalten deines Parity-Knotens.',
|
||||
|
||||
languages: {
|
||||
label: 'Anzeigesprache',
|
||||
hint: 'Die Sprache, in der dir diese Obefläche angezeigt wird'
|
||||
},
|
||||
|
||||
modes: {
|
||||
label: 'Betriebsmodus',
|
||||
hint: 'Der Synchronisations-Modus deines Parity-Knotens',
|
||||
|
||||
mode_active: 'Parity synchronisiert kontinuierlich die Blockchain',
|
||||
mode_passive: 'Parity synchronisiert zu Beginn, schläft dann und wacht regelmäßig zum Synchronisieren auf',
|
||||
mode_dark: 'Parity synchronisiert nur falls erforderlich, etwa wenn es aus der Ferne aufgerufen wird',
|
||||
mode_offline: 'Parity synchronisiert nicht'
|
||||
}
|
||||
},
|
||||
|
||||
proxy: {
|
||||
label: 'Proxy',
|
||||
|
||||
overview_0: 'Die Proxy-Einstellungen ermöglichen dir einen einfachen Zugriff über einprägsame Adressen, auf die Oberfläche mit all ihren dezentralen Anwendungen.',
|
||||
|
||||
details_0: 'Anstelle des Zugriffs über IP-Adresse und Port wirst du über die .parity-Subdomain auf die Parity-Oberfläche zugreifen können, indem du {homeProxy} besuchst. Dafür musst du folgenden Eintrag in den Proxy-Einstellungen deines Browsers hinzufügen:',
|
||||
details_1: 'Hier findest du Anleitungen zum Anpassen der Proxy-Einstellungen in {windowsLink}, {macOSLink} oder {ubuntuLink}.'
|
||||
},
|
||||
|
||||
views: {
|
||||
label: 'Ansicht',
|
||||
|
||||
overview_0: 'Hier kannst du entscheiden, welche Teile der Parity-Oberfläche dir angezeigt werden sollen.',
|
||||
overview_1: 'Benutzt du Parity ganz normal? Die Standardeinstellungen sind gleichermaßen für Einsteigende als auch für Fortgeschrittene gedacht.',
|
||||
overview_2: 'Entwickelst du mit Parity? Füge zum Beispiel den Reiter "Contracts" zu deiner Ansicht hinzu.',
|
||||
overview_3: 'Bist du Miner oder betreibst du einen großen Knoten? Füge den Reiter "Status" hinzu, um alle Information über den Betrieb deines Knotens im Blick zu halten.',
|
||||
|
||||
accounts: {
|
||||
label: 'Konten',
|
||||
description: 'Eine Liste aller Konten, die mit dieser Parity-Installation verbunden sind. Sende Transaktionen, empfange eingehende Beträge, verwalte deine Kontostände oder lade deine Konten auf.'
|
||||
},
|
||||
addresses: {
|
||||
label: 'Adressbuch',
|
||||
description: 'Eine Liste all deiner Kontakte und der Adressen, die von dieser Parity-Installation verwaltet werden. Überwache Konten und gelange mit nur einem Klick zu Details deiner Transaktionen.'
|
||||
},
|
||||
apps: {
|
||||
label: 'Anwendungen',
|
||||
description: 'Dezentrale Anwendungen, die mit dem Netzwerk interagieren. Füge Anwendungen hinzu, entferne oder öffne Anwendungen.'
|
||||
},
|
||||
contracts: {
|
||||
label: 'Contracts',
|
||||
description: 'Interagiere mit Smart Contracts im Netzwerk. Diese Umgebung ist auf Fortgeschrittene mit gutem Verständnis der Fuktionsweise von Smart Contracts zugeschnitten.'
|
||||
},
|
||||
status: {
|
||||
label: 'Status',
|
||||
description: 'Schau dir an, wie sich dein Parity-Knoten schlägt. Hier findest du zum Beispiel die Anzahl der aktuellen Verbindungen zum Netzwerk, Logs deiner laufenden Instanz und (sofern konfiguriert) Details zum Mining.'
|
||||
},
|
||||
signer: {
|
||||
label: 'Signer',
|
||||
description: 'In diesem sicheren Bereich kannst du Transaktionen, die von dir oder von dezentralen Anwendungen erstellt wurden, prüfen und dann genehmigen oder ablehnen.'
|
||||
},
|
||||
settings: {
|
||||
label: 'Einstellungen',
|
||||
description: 'Diese Seite. Pass die Parity-Oberfläche nach deinen Wünschen an.'
|
||||
}
|
||||
}
|
||||
};
|
||||
21
js/src/i18n/en/index.js
Normal file
21
js/src/i18n/en/index.js
Normal file
@ -0,0 +1,21 @@
|
||||
// Copyright 2015, 2016 Ethcore (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import settings from './settings';
|
||||
|
||||
export default {
|
||||
settings
|
||||
};
|
||||
63
js/src/i18n/en/settings.js
Normal file
63
js/src/i18n/en/settings.js
Normal file
@ -0,0 +1,63 @@
|
||||
// Copyright 2015, 2016 Ethcore (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
export default {
|
||||
label: 'settings',
|
||||
|
||||
background: {
|
||||
label: 'background'
|
||||
},
|
||||
|
||||
parity: {
|
||||
label: 'parity'
|
||||
},
|
||||
|
||||
proxy: {
|
||||
label: 'proxy'
|
||||
},
|
||||
|
||||
views: {
|
||||
label: 'views',
|
||||
|
||||
accounts: {
|
||||
label: 'Accounts'
|
||||
},
|
||||
|
||||
addresses: {
|
||||
label: 'Addressbook'
|
||||
},
|
||||
|
||||
apps: {
|
||||
label: 'Applications'
|
||||
},
|
||||
|
||||
contracts: {
|
||||
label: 'Contracts'
|
||||
},
|
||||
|
||||
status: {
|
||||
label: 'Status'
|
||||
},
|
||||
|
||||
signer: {
|
||||
label: 'Signer'
|
||||
},
|
||||
|
||||
settings: {
|
||||
label: 'Settings'
|
||||
}
|
||||
}
|
||||
};
|
||||
21
js/src/i18n/index.js
Normal file
21
js/src/i18n/index.js
Normal file
@ -0,0 +1,21 @@
|
||||
// Copyright 2015, 2016 Ethcore (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import LocaleStore from './store';
|
||||
|
||||
export {
|
||||
LocaleStore
|
||||
};
|
||||
20
js/src/i18n/languages.js
Normal file
20
js/src/i18n/languages.js
Normal file
@ -0,0 +1,20 @@
|
||||
// Copyright 2015, 2016 Ethcore (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
export default {
|
||||
de: 'Deutsch',
|
||||
en: 'English'
|
||||
};
|
||||
62
js/src/i18n/store.js
Normal file
62
js/src/i18n/store.js
Normal file
@ -0,0 +1,62 @@
|
||||
// Copyright 2015, 2016 Ethcore (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import flatten from 'flat';
|
||||
import { action, observable, transaction } from 'mobx';
|
||||
import { addLocaleData } from 'react-intl';
|
||||
import de from 'react-intl/locale-data/de';
|
||||
import en from 'react-intl/locale-data/en';
|
||||
|
||||
import languages from './languages';
|
||||
import deMessages from './de';
|
||||
import enMessages from './en';
|
||||
|
||||
let instance = null;
|
||||
const isProduction = process.env.NODE_ENV === 'production';
|
||||
|
||||
const DEFAULT = 'en';
|
||||
const LANGUAGES = flatten({ languages });
|
||||
const MESSAGES = {
|
||||
de: Object.assign(flatten(deMessages), LANGUAGES),
|
||||
en: Object.assign(flatten(enMessages), LANGUAGES)
|
||||
};
|
||||
const LOCALES = isProduction
|
||||
? ['en']
|
||||
: ['en', 'de'];
|
||||
|
||||
addLocaleData([...de, ...en]);
|
||||
|
||||
export default class Store {
|
||||
@observable locale = DEFAULT;
|
||||
@observable locales = LOCALES;
|
||||
@observable messages = MESSAGES[DEFAULT];
|
||||
@observable isDevelopment = !isProduction;
|
||||
|
||||
@action setLocale (locale) {
|
||||
transaction(() => {
|
||||
this.locale = locale;
|
||||
this.messages = MESSAGES[locale];
|
||||
});
|
||||
}
|
||||
|
||||
static get () {
|
||||
if (!instance) {
|
||||
instance = new Store();
|
||||
}
|
||||
|
||||
return instance;
|
||||
}
|
||||
}
|
||||
@ -66,7 +66,7 @@ class ExecuteContract extends Component {
|
||||
onFromAddressChange: PropTypes.func.isRequired
|
||||
}
|
||||
|
||||
gasStore = new GasPriceEditor.Store(this.context.api, this.props.gasLimit);
|
||||
gasStore = new GasPriceEditor.Store(this.context.api, { gasLimit: this.props.gasLimit });
|
||||
|
||||
state = {
|
||||
amount: '0',
|
||||
|
||||
@ -112,7 +112,7 @@ export default class TransferStore {
|
||||
this.isWallet = account && account.wallet;
|
||||
this.newError = newError;
|
||||
|
||||
this.gasStore = new GasPriceStore(api, gasLimit);
|
||||
this.gasStore = new GasPriceStore(api, { gasLimit });
|
||||
|
||||
if (this.isWallet) {
|
||||
this.wallet = props.wallet;
|
||||
|
||||
@ -80,8 +80,9 @@ class Transfer extends Component {
|
||||
<div className={ styles.hdraccount }>
|
||||
<div className={ styles.hdrimage }>
|
||||
<IdentityIcon
|
||||
inline center
|
||||
address={ account.address } />
|
||||
address={ account.address }
|
||||
center
|
||||
inline />
|
||||
</div>
|
||||
<div className={ styles.hdrdetails }>
|
||||
<div className={ styles.hdrname }>
|
||||
@ -165,18 +166,18 @@ class Transfer extends Component {
|
||||
balance={ balance }
|
||||
extras={ extras }
|
||||
images={ images }
|
||||
senders={ senders }
|
||||
onChange={ this.store.onUpdateDetails }
|
||||
recipient={ recipient }
|
||||
recipientError={ recipientError }
|
||||
sender={ sender }
|
||||
senderError={ senderError }
|
||||
senders={ senders }
|
||||
sendersBalances={ sendersBalances }
|
||||
tag={ tag }
|
||||
total={ total }
|
||||
totalError={ totalError }
|
||||
value={ value }
|
||||
valueError={ valueError }
|
||||
onChange={ this.store.onUpdateDetails }
|
||||
wallet={ account.wallet && this.props.wallet }
|
||||
/>
|
||||
);
|
||||
|
||||
@ -52,9 +52,9 @@ export default class SignerMiddleware {
|
||||
}
|
||||
|
||||
onConfirmStart = (store, action) => {
|
||||
const { id, password, wallet, payload } = action.payload;
|
||||
const { gas, gasPrice, id, password, payload, wallet } = action.payload;
|
||||
|
||||
const handlePromise = promise => {
|
||||
const handlePromise = (promise) => {
|
||||
promise
|
||||
.then((txHash) => {
|
||||
console.log('confirmRequest', id, txHash);
|
||||
@ -102,7 +102,7 @@ export default class SignerMiddleware {
|
||||
return;
|
||||
}
|
||||
|
||||
handlePromise(this._api.signer.confirmRequest(id, {}, password));
|
||||
handlePromise(this._api.signer.confirmRequest(id, { gas, gasPrice }, password));
|
||||
}
|
||||
|
||||
onRejectStart = (store, action) => {
|
||||
|
||||
@ -14,8 +14,13 @@
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import { Component, PropTypes } from 'react';
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { IntlProvider } from 'react-intl';
|
||||
import { observer } from 'mobx-react';
|
||||
|
||||
import { LocaleStore } from '../../i18n';
|
||||
|
||||
@observer
|
||||
export default class ContextProvider extends Component {
|
||||
static propTypes = {
|
||||
api: PropTypes.object.isRequired,
|
||||
@ -30,10 +35,17 @@ export default class ContextProvider extends Component {
|
||||
store: PropTypes.object
|
||||
}
|
||||
|
||||
localeStore = LocaleStore.get();
|
||||
|
||||
render () {
|
||||
const { children } = this.props;
|
||||
const { locale, messages } = this.localeStore;
|
||||
|
||||
return children;
|
||||
return (
|
||||
<IntlProvider locale={ locale } messages={ messages }>
|
||||
{ children }
|
||||
</IntlProvider>
|
||||
);
|
||||
}
|
||||
|
||||
getChildContext () {
|
||||
|
||||
@ -22,6 +22,12 @@
|
||||
/* eslint-disable */
|
||||
var ace = window.ace;
|
||||
|
||||
if (process.env.NODE_ENV === 'test') {
|
||||
if (!ace.define) {
|
||||
ace.define = () => {};
|
||||
}
|
||||
}
|
||||
|
||||
ace.define("ace/mode/doc_comment_highlight_rules",["require","exports","module","ace/lib/oop","ace/mode/text_highlight_rules"], function(acequire, exports, module) {
|
||||
"use strict";
|
||||
|
||||
|
||||
@ -17,6 +17,8 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { SelectField } from 'material-ui';
|
||||
|
||||
import { nodeOrStringProptype } from '~/util/proptypes';
|
||||
|
||||
// TODO: duplicated in Input
|
||||
const UNDERLINE_DISABLED = {
|
||||
borderColor: 'rgba(255, 255, 255, 0.298039)' // 'transparent' // 'rgba(255, 255, 255, 0.298039)'
|
||||
@ -33,9 +35,9 @@ export default class Select extends Component {
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
disabled: PropTypes.bool,
|
||||
error: PropTypes.string,
|
||||
hint: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
error: nodeOrStringProptype(),
|
||||
hint: nodeOrStringProptype(),
|
||||
label: nodeOrStringProptype(),
|
||||
onBlur: PropTypes.func,
|
||||
onChange: PropTypes.func,
|
||||
onKeyDown: PropTypes.func,
|
||||
|
||||
@ -1,556 +0,0 @@
|
||||
// Copyright 2015, 2016 Parity Technologies (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
|
||||
import {
|
||||
Bar, BarChart,
|
||||
Rectangle,
|
||||
Scatter, ScatterChart,
|
||||
Tooltip,
|
||||
XAxis, YAxis,
|
||||
Dot,
|
||||
ResponsiveContainer
|
||||
} from 'recharts';
|
||||
|
||||
import Slider from 'material-ui/Slider';
|
||||
import BigNumber from 'bignumber.js';
|
||||
|
||||
import styles from './gasPriceSelector.css';
|
||||
|
||||
const COLORS = {
|
||||
default: 'rgba(255, 99, 132, 0.2)',
|
||||
selected: 'rgba(255, 99, 132, 0.5)',
|
||||
hover: 'rgba(255, 99, 132, 0.15)',
|
||||
grid: 'rgba(255, 99, 132, 0.5)',
|
||||
line: 'rgb(255, 99, 132)',
|
||||
intersection: '#fff'
|
||||
};
|
||||
|
||||
const countModifier = (count) => {
|
||||
const val = count.toNumber ? count.toNumber() : count;
|
||||
return Math.log10(val + 1) + 0.1;
|
||||
};
|
||||
|
||||
class CustomCursor extends Component {
|
||||
static propTypes = {
|
||||
x: PropTypes.number,
|
||||
y: PropTypes.number,
|
||||
width: PropTypes.number,
|
||||
height: PropTypes.number,
|
||||
onClick: PropTypes.func,
|
||||
getIndex: PropTypes.func,
|
||||
counts: PropTypes.array,
|
||||
yDomain: PropTypes.array
|
||||
}
|
||||
|
||||
render () {
|
||||
const { x, y, width, height, getIndex, counts, yDomain } = this.props;
|
||||
|
||||
const index = getIndex();
|
||||
|
||||
if (index === -1) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const count = countModifier(counts[index]);
|
||||
const barHeight = (count / yDomain[1]) * (y + height);
|
||||
|
||||
return (
|
||||
<g>
|
||||
<Rectangle
|
||||
x={ x }
|
||||
y={ 0 }
|
||||
width={ width }
|
||||
height={ height + y }
|
||||
fill='transparent'
|
||||
onClick={ this.onClick }
|
||||
/>
|
||||
<Rectangle
|
||||
x={ x }
|
||||
y={ y + (height - barHeight) }
|
||||
width={ width }
|
||||
height={ barHeight }
|
||||
fill={ COLORS.hover }
|
||||
onClick={ this.onClick }
|
||||
/>
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
||||
onClick = () => {
|
||||
const { onClick, getIndex } = this.props;
|
||||
const index = getIndex();
|
||||
onClick({ index });
|
||||
}
|
||||
}
|
||||
|
||||
class CustomBar extends Component {
|
||||
static propTypes = {
|
||||
selected: PropTypes.number,
|
||||
x: PropTypes.number,
|
||||
y: PropTypes.number,
|
||||
width: PropTypes.number,
|
||||
height: PropTypes.number,
|
||||
index: PropTypes.number,
|
||||
onClick: PropTypes.func
|
||||
}
|
||||
|
||||
render () {
|
||||
const { x, y, selected, index, width, height, onClick } = this.props;
|
||||
|
||||
const fill = selected === index
|
||||
? COLORS.selected
|
||||
: COLORS.default;
|
||||
|
||||
const borderWidth = 0.5;
|
||||
const borderColor = 'rgba(255, 255, 255, 0.5)';
|
||||
|
||||
return (
|
||||
<g>
|
||||
<Rectangle
|
||||
x={ x - borderWidth }
|
||||
y={ y }
|
||||
width={ borderWidth }
|
||||
height={ height }
|
||||
fill={ borderColor }
|
||||
/>
|
||||
<Rectangle
|
||||
x={ x + width }
|
||||
y={ y }
|
||||
width={ borderWidth }
|
||||
height={ height }
|
||||
fill={ borderColor }
|
||||
/>
|
||||
<Rectangle
|
||||
x={ x - borderWidth }
|
||||
y={ y - borderWidth }
|
||||
width={ width + borderWidth * 2 }
|
||||
height={ borderWidth }
|
||||
fill={ borderColor }
|
||||
/>
|
||||
<Rectangle
|
||||
x={ x }
|
||||
y={ y }
|
||||
width={ width }
|
||||
height={ height }
|
||||
fill={ fill }
|
||||
onClick={ onClick }
|
||||
/>
|
||||
</g>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class CustomizedShape extends Component {
|
||||
static propTypes = {
|
||||
showValue: PropTypes.number.isRequired,
|
||||
cx: PropTypes.number,
|
||||
cy: PropTypes.number,
|
||||
payload: PropTypes.object
|
||||
}
|
||||
|
||||
render () {
|
||||
const { cx, cy, showValue, payload } = this.props;
|
||||
|
||||
if (showValue !== payload.y) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<g>
|
||||
<Dot
|
||||
style={ { fill: 'white' } }
|
||||
cx={ cx }
|
||||
cy={ cy }
|
||||
r={ 5 }
|
||||
/>
|
||||
<Dot
|
||||
style={ { fill: 'rgb(255, 99, 132)' } }
|
||||
cx={ cx }
|
||||
cy={ cy }
|
||||
r={ 3 }
|
||||
/>
|
||||
</g>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class CustomTooltip extends Component {
|
||||
static propTypes = {
|
||||
gasPriceHistogram: PropTypes.object.isRequired,
|
||||
type: PropTypes.string,
|
||||
payload: PropTypes.array,
|
||||
label: PropTypes.number,
|
||||
active: PropTypes.bool
|
||||
}
|
||||
|
||||
render () {
|
||||
const { active, label, gasPriceHistogram } = this.props;
|
||||
|
||||
if (!active) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const index = label;
|
||||
|
||||
const count = gasPriceHistogram.counts[index];
|
||||
const minGasPrice = gasPriceHistogram.bucketBounds[index];
|
||||
const maxGasPrice = gasPriceHistogram.bucketBounds[index + 1];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p className='label'>
|
||||
{ count.toNumber() } transactions
|
||||
with gas price set from
|
||||
<span> { minGasPrice.toFormat(0) } </span>
|
||||
to
|
||||
<span> { maxGasPrice.toFormat(0) } </span>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const TOOL_STYLE = {
|
||||
color: 'rgba(255,255,255,0.5)',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.75)',
|
||||
padding: '0 0.5em',
|
||||
fontSize: '0.75em'
|
||||
};
|
||||
|
||||
export default class GasPriceSelector extends Component {
|
||||
static propTypes = {
|
||||
gasPriceHistogram: PropTypes.object.isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
|
||||
gasPrice: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.object
|
||||
])
|
||||
}
|
||||
|
||||
state = {
|
||||
gasPrice: null,
|
||||
sliderValue: 0.5,
|
||||
selectedIndex: 0,
|
||||
|
||||
chartData: {
|
||||
values: [],
|
||||
xDomain: [],
|
||||
yDomain: [],
|
||||
N: 0
|
||||
}
|
||||
}
|
||||
|
||||
componentWillMount () {
|
||||
this.computeCharts();
|
||||
this.setGasPrice();
|
||||
}
|
||||
|
||||
componentWillReceiveProps (nextProps) {
|
||||
if (nextProps.gasPrice !== this.props.gasPrice) {
|
||||
this.setGasPrice(nextProps);
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUpdate (nextProps, nextState) {
|
||||
if (Math.floor(nextState.sliderValue) !== Math.floor(this.state.sliderValue)) {
|
||||
this.updateSelectedBarChart(nextState);
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
{ this.renderChart() }
|
||||
{ this.renderSlider() }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderSlider () {
|
||||
const { sliderValue } = this.state;
|
||||
|
||||
return (
|
||||
<div className={ styles.columns }>
|
||||
<Slider
|
||||
min={ 0 }
|
||||
max={ 1 }
|
||||
value={ sliderValue }
|
||||
onChange={ this.onEditGasPriceSlider }
|
||||
style={ {
|
||||
flex: 1,
|
||||
padding: '0 0.3em'
|
||||
} }
|
||||
sliderStyle={ {
|
||||
marginBottom: 12
|
||||
} }
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderChart () {
|
||||
const { gasPriceHistogram } = this.props;
|
||||
const { chartData, sliderValue, selectedIndex } = this.state;
|
||||
|
||||
if (chartData.values.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const height = 300;
|
||||
const countIndex = Math.max(0, Math.min(selectedIndex, gasPriceHistogram.counts.length - 1));
|
||||
const selectedCount = countModifier(gasPriceHistogram.counts[countIndex]);
|
||||
|
||||
return (
|
||||
<div className={ styles.columns }>
|
||||
<div style={ { flex: 1, height } }>
|
||||
<div className={ styles.chart }>
|
||||
<ResponsiveContainer
|
||||
height={ height }
|
||||
>
|
||||
<ScatterChart
|
||||
margin={ { top: 0, right: 0, left: 0, bottom: 0 } }
|
||||
>
|
||||
<Scatter
|
||||
data={ [
|
||||
{ x: sliderValue, y: 0 },
|
||||
{ x: sliderValue, y: selectedCount },
|
||||
{ x: sliderValue, y: chartData.yDomain[1] }
|
||||
] }
|
||||
shape={ <CustomizedShape showValue={ selectedCount } /> }
|
||||
line
|
||||
isAnimationActive={ false }
|
||||
/>
|
||||
|
||||
<XAxis
|
||||
hide
|
||||
height={ 0 }
|
||||
dataKey='x'
|
||||
domain={ [0, 1] }
|
||||
/>
|
||||
<YAxis
|
||||
hide
|
||||
width={ 0 }
|
||||
dataKey='y'
|
||||
domain={ chartData.yDomain }
|
||||
/>
|
||||
</ScatterChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
<div className={ styles.chart }>
|
||||
<ResponsiveContainer
|
||||
height={ height }
|
||||
>
|
||||
<BarChart
|
||||
data={ chartData.values }
|
||||
margin={ { top: 0, right: 0, left: 0, bottom: 0 } }
|
||||
barCategoryGap={ 1 }
|
||||
ref='barChart'
|
||||
>
|
||||
<Bar
|
||||
dataKey='value'
|
||||
stroke={ COLORS.line }
|
||||
onClick={ this.onClickGasPrice }
|
||||
shape={ <CustomBar selected={ selectedIndex } onClick={ this.onClickGasPrice } /> }
|
||||
/>
|
||||
|
||||
<Tooltip
|
||||
wrapperStyle={ TOOL_STYLE }
|
||||
cursor={ this.renderCustomCursor() }
|
||||
content={ <CustomTooltip gasPriceHistogram={ gasPriceHistogram } /> }
|
||||
/>
|
||||
|
||||
<XAxis
|
||||
hide
|
||||
dataKey='index'
|
||||
type='category'
|
||||
domain={ chartData.xDomain }
|
||||
/>
|
||||
<YAxis
|
||||
hide
|
||||
type='number'
|
||||
domain={ chartData.yDomain }
|
||||
/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderCustomCursor = () => {
|
||||
const { gasPriceHistogram } = this.props;
|
||||
const { chartData } = this.state;
|
||||
|
||||
return (
|
||||
<CustomCursor
|
||||
getIndex={ this.getBarHoverIndex }
|
||||
onClick={ this.onClickGasPrice }
|
||||
counts={ gasPriceHistogram.counts }
|
||||
yDomain={ chartData.yDomain }
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
getBarHoverIndex = () => {
|
||||
const { barChart } = this.refs;
|
||||
|
||||
if (!barChart || !barChart.state) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
return barChart.state.activeTooltipIndex;
|
||||
}
|
||||
|
||||
computeChartsData () {
|
||||
const { gasPriceChartData } = this.state;
|
||||
const { gasPriceHistogram } = this.props;
|
||||
|
||||
const values = gasPriceChartData
|
||||
.map((value, index) => ({ value, index }));
|
||||
|
||||
const N = values.length - 1;
|
||||
const maxGasCounts = countModifier(
|
||||
gasPriceHistogram
|
||||
.counts
|
||||
.reduce((max, count) => count.greaterThan(max) ? count : max, 0)
|
||||
);
|
||||
|
||||
const xDomain = [0, N];
|
||||
const yDomain = [0, maxGasCounts * 1.1];
|
||||
|
||||
const chartData = {
|
||||
values, N,
|
||||
xDomain, yDomain
|
||||
};
|
||||
|
||||
this.setState({ chartData }, () => {
|
||||
this.updateSelectedBarChart();
|
||||
});
|
||||
}
|
||||
|
||||
computeCharts (props = this.props) {
|
||||
const { gasPriceHistogram } = props;
|
||||
|
||||
const gasPriceChartData = gasPriceHistogram
|
||||
.counts
|
||||
.map(count => countModifier(count));
|
||||
|
||||
this.setState(
|
||||
{ gasPriceChartData },
|
||||
() => this.computeChartsData()
|
||||
);
|
||||
}
|
||||
|
||||
updateSelectedBarChart (state = this.state) {
|
||||
}
|
||||
|
||||
setGasPrice (props = this.props) {
|
||||
const { gasPrice, gasPriceHistogram } = props;
|
||||
|
||||
// If no gas price yet...
|
||||
if (!gasPrice) {
|
||||
return this.setSliderValue(0.5);
|
||||
}
|
||||
|
||||
const bnGasPrice = (typeof gasPrice === 'string')
|
||||
? new BigNumber(gasPrice)
|
||||
: gasPrice;
|
||||
|
||||
// If gas price hasn't changed
|
||||
if (this.state.gasPrice && bnGasPrice.equals(this.state.gasPrice)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const gasPrices = gasPriceHistogram.bucketBounds;
|
||||
const startIndex = gasPrices
|
||||
.findIndex(price => price.greaterThan(bnGasPrice)) - 1;
|
||||
|
||||
// gasPrice Lower than the max in histogram
|
||||
if (startIndex === -1) {
|
||||
return this.setSliderValue(0, bnGasPrice);
|
||||
}
|
||||
|
||||
// gasPrice Greater than the max in histogram
|
||||
if (startIndex === -2) {
|
||||
return this.setSliderValue(1, bnGasPrice);
|
||||
}
|
||||
|
||||
const priceA = gasPrices[startIndex];
|
||||
const priceB = gasPrices[startIndex + 1];
|
||||
|
||||
const sliderValueDec = bnGasPrice
|
||||
.minus(priceA)
|
||||
.dividedBy(priceB.minus(priceA))
|
||||
.toNumber();
|
||||
|
||||
const sliderValue = (startIndex + sliderValueDec) / (gasPrices.length - 1);
|
||||
this.setSliderValue(sliderValue, bnGasPrice);
|
||||
}
|
||||
|
||||
setSliderValue (value, gasPrice = this.state.gasPrice) {
|
||||
const { gasPriceHistogram } = this.props;
|
||||
|
||||
const N = gasPriceHistogram.bucketBounds.length - 1;
|
||||
|
||||
const sliderValue = Math.max(0, Math.min(value, 1));
|
||||
const selectedIndex = Math.floor(sliderValue * N);
|
||||
|
||||
this.setState({ sliderValue, gasPrice, selectedIndex });
|
||||
}
|
||||
|
||||
onBarChartMouseUp = (event) => {
|
||||
console.log(event);
|
||||
}
|
||||
|
||||
onClickGasPrice = (bar) => {
|
||||
const { index } = bar;
|
||||
|
||||
const ratio = (index + 0.5) / (this.state.chartData.N + 1);
|
||||
|
||||
this.onEditGasPriceSlider(null, ratio);
|
||||
}
|
||||
|
||||
onEditGasPriceSlider = (event, sliderValue) => {
|
||||
const { gasPriceHistogram } = this.props;
|
||||
|
||||
const gasPrices = gasPriceHistogram.bucketBounds;
|
||||
const N = gasPrices.length - 1;
|
||||
const gasPriceAIdx = Math.floor(sliderValue * N);
|
||||
const gasPriceBIdx = gasPriceAIdx + 1;
|
||||
|
||||
if (gasPriceBIdx === N + 1) {
|
||||
const gasPrice = gasPrices[gasPriceAIdx].round();
|
||||
this.props.onChange(event, gasPrice);
|
||||
return;
|
||||
}
|
||||
|
||||
const gasPriceA = gasPrices[gasPriceAIdx];
|
||||
const gasPriceB = gasPrices[gasPriceBIdx];
|
||||
|
||||
const mult = Math.round((sliderValue % 1) * 100) / 100;
|
||||
const gasPrice = gasPriceA
|
||||
.plus(gasPriceB.minus(gasPriceA).times(mult))
|
||||
.round();
|
||||
|
||||
this.setSliderValue(sliderValue, gasPrice);
|
||||
this.props.onChange(event, gasPrice);
|
||||
}
|
||||
}
|
||||
@ -15,16 +15,12 @@
|
||||
/* along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
.columns {
|
||||
.container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.graphColumn {
|
||||
flex: 65;
|
||||
}
|
||||
|
||||
.editColumn {
|
||||
flex: 35;
|
||||
padding-left: 1em;
|
||||
@ -41,6 +37,10 @@
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.graphColumn {
|
||||
flex: 65;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@ -15,11 +15,11 @@
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import BigNumber from 'bignumber.js';
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
|
||||
import Input from '../Form/Input';
|
||||
import GasPriceSelector from './GasPriceSelector';
|
||||
import GasPriceSelector from '../GasPriceSelector';
|
||||
import Store from './store';
|
||||
|
||||
import styles from './gasPriceEditor.css';
|
||||
@ -31,62 +31,60 @@ export default class GasPriceEditor extends Component {
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
store: PropTypes.object.isRequired,
|
||||
onChange: PropTypes.func
|
||||
children: PropTypes.node,
|
||||
onChange: PropTypes.func,
|
||||
store: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
static Store = Store;
|
||||
|
||||
render () {
|
||||
const { api } = this.context;
|
||||
const { store } = this.props;
|
||||
const { estimated, priceDefault, price, gas, histogram, errorGas, errorPrice, errorTotal, totalValue } = store;
|
||||
const { children, store } = this.props;
|
||||
const { errorGas, errorPrice, errorTotal, estimated, gas, histogram, price, priceDefault, totalValue } = store;
|
||||
|
||||
const eth = api.util.fromWei(totalValue).toFormat();
|
||||
const gasLabel = `gas (estimated: ${new BigNumber(estimated).toFormat()})`;
|
||||
const priceLabel = `price (current: ${new BigNumber(priceDefault).toFormat()})`;
|
||||
|
||||
return (
|
||||
<div className={ styles.columns }>
|
||||
<div className={ styles.container }>
|
||||
<div className={ styles.graphColumn }>
|
||||
<GasPriceSelector
|
||||
gasPriceHistogram={ histogram }
|
||||
gasPrice={ price }
|
||||
onChange={ this.onEditGasPrice } />
|
||||
histogram={ histogram }
|
||||
onChange={ this.onEditGasPrice }
|
||||
price={ price } />
|
||||
<div className={ styles.gasPriceDesc }>
|
||||
You can choose the gas price based on the
|
||||
distribution of recent included transaction gas prices.
|
||||
The lower the gas price is, the cheaper the transaction will
|
||||
be. The higher the gas price is, the faster it should
|
||||
get mined by the network.
|
||||
You can choose the gas price based on the distribution of recent included transaction gas prices. The lower the gas price is, the cheaper the transaction will be. The higher the gas price is, the faster it should get mined by the network.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={ styles.editColumn }>
|
||||
<div className={ styles.row }>
|
||||
<Input
|
||||
label={ gasLabel }
|
||||
hint='the amount of gas to use for the transaction'
|
||||
error={ errorGas }
|
||||
value={ gas }
|
||||
onChange={ this.onEditGas } />
|
||||
|
||||
hint='the amount of gas to use for the transaction'
|
||||
label={ gasLabel }
|
||||
onChange={ this.onEditGas }
|
||||
value={ gas } />
|
||||
<Input
|
||||
label={ priceLabel }
|
||||
hint='the price of gas to use for the transaction'
|
||||
error={ errorPrice }
|
||||
value={ price }
|
||||
onChange={ this.onEditGasPrice } />
|
||||
hint='the price of gas to use for the transaction'
|
||||
label={ priceLabel }
|
||||
onChange={ this.onEditGasPrice }
|
||||
value={ price } />
|
||||
</div>
|
||||
|
||||
<div className={ styles.row }>
|
||||
<Input
|
||||
disabled
|
||||
label='total transaction amount'
|
||||
hint='the total amount of the transaction'
|
||||
error={ errorTotal }
|
||||
hint='the total amount of the transaction'
|
||||
label='total transaction amount'
|
||||
value={ `${eth} ETH` } />
|
||||
</div>
|
||||
<div className={ styles.row }>
|
||||
{ children }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
45
js/src/ui/GasPriceEditor/gasPriceEditor.spec.js
Normal file
45
js/src/ui/GasPriceEditor/gasPriceEditor.spec.js
Normal file
@ -0,0 +1,45 @@
|
||||
// Copyright 2015, 2016 Ethcore (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import BigNumber from 'bignumber.js';
|
||||
import { shallow } from 'enzyme';
|
||||
import React from 'react';
|
||||
import sinon from 'sinon';
|
||||
|
||||
import GasPriceEditor from './';
|
||||
|
||||
const api = {
|
||||
util: {
|
||||
fromWei: (value) => new BigNumber(value)
|
||||
}
|
||||
};
|
||||
|
||||
const store = {
|
||||
estimated: '123',
|
||||
priceDefault: '456',
|
||||
totalValue: '789',
|
||||
setGas: sinon.stub(),
|
||||
setPrice: sinon.stub()
|
||||
};
|
||||
|
||||
describe('ui/GasPriceEditor', () => {
|
||||
it('renders', () => {
|
||||
expect(shallow(
|
||||
<GasPriceEditor store={ store } />,
|
||||
{ context: { api } }
|
||||
)).to.be.ok;
|
||||
});
|
||||
});
|
||||
@ -26,18 +26,22 @@ export default class GasPriceEditor {
|
||||
@observable errorPrice = null;
|
||||
@observable errorTotal = null;
|
||||
@observable estimated = DEFAULT_GAS;
|
||||
@observable gas;
|
||||
@observable gasLimit;
|
||||
@observable histogram = null;
|
||||
@observable price = DEFAULT_GASPRICE;
|
||||
@observable priceDefault = DEFAULT_GASPRICE;
|
||||
@observable gas = DEFAULT_GAS;
|
||||
@observable gasLimit = 0;
|
||||
@observable isEditing = false;
|
||||
@observable price;
|
||||
@observable priceDefault;
|
||||
@observable weiValue = '0';
|
||||
|
||||
constructor (api, gasLimit, loadDefaults = true) {
|
||||
constructor (api, { gas, gasLimit, gasPrice }) {
|
||||
this._api = api;
|
||||
this.gasLimit = gasLimit;
|
||||
|
||||
if (loadDefaults) {
|
||||
this.gas = gas;
|
||||
this.gasLimit = gasLimit;
|
||||
this.price = gasPrice;
|
||||
|
||||
if (api) {
|
||||
this.loadDefaults();
|
||||
}
|
||||
}
|
||||
@ -50,6 +54,10 @@ export default class GasPriceEditor {
|
||||
}
|
||||
}
|
||||
|
||||
@action setEditing = (isEditing) => {
|
||||
this.isEditing = isEditing;
|
||||
}
|
||||
|
||||
@action setErrorTotal = (errorTotal) => {
|
||||
this.errorTotal = errorTotal;
|
||||
}
|
||||
@ -74,6 +82,30 @@ export default class GasPriceEditor {
|
||||
this.weiValue = weiValue;
|
||||
}
|
||||
|
||||
@action setGas = (gas) => {
|
||||
transaction(() => {
|
||||
const { numberError } = validatePositiveNumber(gas);
|
||||
|
||||
this.gas = gas;
|
||||
|
||||
if (numberError) {
|
||||
this.errorGas = numberError;
|
||||
} else {
|
||||
const bn = new BigNumber(gas);
|
||||
|
||||
if (bn.gte(this.gasLimit)) {
|
||||
this.errorGas = ERRORS.gasBlockLimit;
|
||||
} else {
|
||||
this.errorGas = null;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@action setGasLimit = (gasLimit) => {
|
||||
this.gasLimit = gasLimit;
|
||||
}
|
||||
|
||||
@action setHistogram = (gasHistogram) => {
|
||||
this.histogram = gasHistogram;
|
||||
}
|
||||
@ -85,39 +117,37 @@ export default class GasPriceEditor {
|
||||
});
|
||||
}
|
||||
|
||||
@action setGas = (gas) => {
|
||||
transaction(() => {
|
||||
const { numberError } = validatePositiveNumber(gas);
|
||||
const bn = new BigNumber(gas);
|
||||
|
||||
this.gas = gas;
|
||||
|
||||
if (numberError) {
|
||||
this.errorGas = numberError;
|
||||
} else if (bn.gte(this.gasLimit)) {
|
||||
this.errorGas = ERRORS.gasBlockLimit;
|
||||
} else {
|
||||
this.errorGas = null;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@action loadDefaults () {
|
||||
Promise
|
||||
.all([
|
||||
this._api.parity.gasPriceHistogram(),
|
||||
this._api.eth.gasPrice()
|
||||
])
|
||||
.then(([gasPriceHistogram, gasPrice]) => {
|
||||
.then(([histogram, _price]) => {
|
||||
transaction(() => {
|
||||
this.setPrice(gasPrice.toFixed(0));
|
||||
this.setHistogram(gasPriceHistogram);
|
||||
const price = _price.toFixed(0);
|
||||
|
||||
this.priceDefault = gasPrice.toFixed();
|
||||
if (!this.price) {
|
||||
this.setPrice(price);
|
||||
}
|
||||
this.setHistogram(histogram);
|
||||
|
||||
this.priceDefault = price;
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.warn('getDefaults', error);
|
||||
});
|
||||
}
|
||||
|
||||
overrideTransaction = (transaction) => {
|
||||
if (this.errorGas || this.errorPrice) {
|
||||
return transaction;
|
||||
}
|
||||
|
||||
return Object.assign({}, transaction, {
|
||||
gas: new BigNumber(this.gas || DEFAULT_GAS),
|
||||
gasPrice: new BigNumber(this.price || DEFAULT_GASPRICE)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
197
js/src/ui/GasPriceEditor/store.spec.js
Normal file
197
js/src/ui/GasPriceEditor/store.spec.js
Normal file
@ -0,0 +1,197 @@
|
||||
// Copyright 2015, 2016 Ethcore (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import BigNumber from 'bignumber.js';
|
||||
import sinon from 'sinon';
|
||||
|
||||
import { DEFAULT_GAS, DEFAULT_GASPRICE, MAX_GAS_ESTIMATION } from '~/util/constants';
|
||||
import { ERRORS } from '~/util/validation';
|
||||
|
||||
import GasPriceEditor from './gasPriceEditor';
|
||||
|
||||
const { Store } = GasPriceEditor;
|
||||
|
||||
const GASPRICE = new BigNumber(123456);
|
||||
const GASLIMIT = 100000;
|
||||
const HISTOGRAM = {
|
||||
bucketBounds: [1, 2],
|
||||
counts: [3, 4]
|
||||
};
|
||||
|
||||
const api = {
|
||||
eth: {
|
||||
gasPrice: sinon.stub().resolves(GASPRICE)
|
||||
},
|
||||
parity: {
|
||||
gasPriceHistogram: sinon.stub().resolves(HISTOGRAM)
|
||||
}
|
||||
};
|
||||
|
||||
describe('ui/GasPriceEditor/store', () => {
|
||||
let store = null;
|
||||
|
||||
it('is available via GasPriceEditor.Store', () => {
|
||||
expect(new Store(null, {})).to.be.ok;
|
||||
});
|
||||
|
||||
describe('constructor (defaults)', () => {
|
||||
beforeEach(() => {
|
||||
store = new Store(api, { gasLimit: GASLIMIT });
|
||||
});
|
||||
|
||||
it('retrieves the histogram and gasPrice', () => {
|
||||
expect(api.eth.gasPrice).to.have.been.called;
|
||||
expect(api.parity.gasPriceHistogram).to.have.been.called;
|
||||
});
|
||||
|
||||
it('sets the gasLimit as passed', () => {
|
||||
expect(store.gasLimit).to.equal(GASLIMIT);
|
||||
});
|
||||
});
|
||||
|
||||
describe('setters', () => {
|
||||
beforeEach(() => {
|
||||
store = new Store(null, { gasLimit: GASLIMIT });
|
||||
});
|
||||
|
||||
describe('setEditing', () => {
|
||||
it('sets the value', () => {
|
||||
expect(store.isEditing).to.be.false;
|
||||
store.setEditing(true);
|
||||
expect(store.isEditing).to.be.true;
|
||||
});
|
||||
});
|
||||
|
||||
describe('setErrorTotal', () => {
|
||||
it('sets the value', () => {
|
||||
store.setErrorTotal('errorTotal');
|
||||
expect(store.errorTotal).to.equal('errorTotal');
|
||||
});
|
||||
});
|
||||
|
||||
describe('setEstimated', () => {
|
||||
it('sets the value', () => {
|
||||
store.setEstimated('789');
|
||||
expect(store.estimated).to.equal('789');
|
||||
});
|
||||
|
||||
it('sets error when above exception max', () => {
|
||||
store.setEstimated(MAX_GAS_ESTIMATION);
|
||||
expect(store.errorEstimated).to.equal(ERRORS.gasException);
|
||||
});
|
||||
|
||||
it('sets error when above gaslimit', () => {
|
||||
store.setEstimated(GASLIMIT);
|
||||
expect(store.errorEstimated).to.equal(ERRORS.gasBlockLimit);
|
||||
});
|
||||
});
|
||||
|
||||
describe('setEthValue', () => {
|
||||
it('sets the value', () => {
|
||||
store.setEthValue('123');
|
||||
expect(store.weiValue).to.equal('123');
|
||||
});
|
||||
});
|
||||
|
||||
describe('setGas', () => {
|
||||
it('sets the value', () => {
|
||||
store.setGas('123');
|
||||
expect(store.gas).to.equal('123');
|
||||
expect(store.errorGas).to.be.null;
|
||||
});
|
||||
|
||||
it('sets error on negative numbers', () => {
|
||||
store.setGas(-123);
|
||||
expect(store.errorGas).not.to.be.null;
|
||||
});
|
||||
|
||||
it('sets error when above block limit', () => {
|
||||
store.setGas(GASLIMIT);
|
||||
expect(store.errorGas).to.equal(ERRORS.gasBlockLimit);
|
||||
});
|
||||
});
|
||||
|
||||
describe('setGasLimit', () => {
|
||||
it('sets the value', () => {
|
||||
store.setGasLimit('123');
|
||||
expect(store.gasLimit).to.equal('123');
|
||||
});
|
||||
});
|
||||
|
||||
describe('setHistogram', () => {
|
||||
it('sets the value', () => {
|
||||
store.setHistogram(HISTOGRAM);
|
||||
expect(store.histogram).to.deep.equal(HISTOGRAM);
|
||||
});
|
||||
});
|
||||
|
||||
describe('setPrice', () => {
|
||||
it('sets the value', () => {
|
||||
store.setPrice('123');
|
||||
expect(store.price).to.equal('123');
|
||||
expect(store.errorPrice).to.be.null;
|
||||
});
|
||||
|
||||
it('sets error on negative numbers', () => {
|
||||
store.setPrice(-123);
|
||||
expect(store.errorPrice).not.to.be.null;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('computed', () => {
|
||||
beforeEach(() => {
|
||||
store = new Store(null, { gasLimit: GASLIMIT });
|
||||
});
|
||||
|
||||
describe('totalValue', () => {
|
||||
it('holds the total including eth, price & gas', () => {
|
||||
store.setPrice('123');
|
||||
store.setGas('123');
|
||||
store.setEthValue('123');
|
||||
expect(store.totalValue).to.deep.equal(new BigNumber(123 + 123 * 123));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('methods', () => {
|
||||
beforeEach(() => {
|
||||
store = new Store(null, { gasLimit: GASLIMIT });
|
||||
});
|
||||
|
||||
describe('overrideTransaction', () => {
|
||||
const TRANSACTION = { gas: '123', gasPrice: '456' };
|
||||
|
||||
it('overrides gas & gasPrice with values', () => {
|
||||
store.setGas(DEFAULT_GAS);
|
||||
const transaction = store.overrideTransaction(TRANSACTION);
|
||||
|
||||
expect(transaction.gas).to.deep.equal(new BigNumber(DEFAULT_GAS));
|
||||
expect(transaction.gasPrice).to.deep.equal(new BigNumber(DEFAULT_GASPRICE));
|
||||
});
|
||||
|
||||
it('does not override with invalid gas', () => {
|
||||
store.setGas(-123);
|
||||
expect(store.overrideTransaction(TRANSACTION)).to.deep.equal(TRANSACTION);
|
||||
});
|
||||
|
||||
it('does not override with invalid price', () => {
|
||||
store.setPrice(-123);
|
||||
expect(store.overrideTransaction(TRANSACTION)).to.deep.equal(TRANSACTION);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
77
js/src/ui/GasPriceSelector/CustomBar/customBar.js
Normal file
77
js/src/ui/GasPriceSelector/CustomBar/customBar.js
Normal file
@ -0,0 +1,77 @@
|
||||
// Copyright 2015, 2016 Ethcore (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { Rectangle } from 'recharts';
|
||||
|
||||
import { COLORS } from '../util';
|
||||
|
||||
export default class CustomBar extends Component {
|
||||
static propTypes = {
|
||||
selected: PropTypes.number,
|
||||
x: PropTypes.number,
|
||||
y: PropTypes.number,
|
||||
width: PropTypes.number,
|
||||
height: PropTypes.number,
|
||||
index: PropTypes.number,
|
||||
onClick: PropTypes.func
|
||||
}
|
||||
|
||||
render () {
|
||||
const { x, y, selected, index, width, height, onClick } = this.props;
|
||||
|
||||
const fill = selected === index
|
||||
? COLORS.selected
|
||||
: COLORS.default;
|
||||
|
||||
const borderWidth = 0.5;
|
||||
const borderColor = 'rgba(255, 255, 255, 0.5)';
|
||||
|
||||
return (
|
||||
<g>
|
||||
<Rectangle
|
||||
x={ x - borderWidth }
|
||||
y={ y }
|
||||
width={ borderWidth }
|
||||
height={ height }
|
||||
fill={ borderColor }
|
||||
/>
|
||||
<Rectangle
|
||||
x={ x + width }
|
||||
y={ y }
|
||||
width={ borderWidth }
|
||||
height={ height }
|
||||
fill={ borderColor }
|
||||
/>
|
||||
<Rectangle
|
||||
x={ x - borderWidth }
|
||||
y={ y - borderWidth }
|
||||
width={ width + borderWidth * 2 }
|
||||
height={ borderWidth }
|
||||
fill={ borderColor }
|
||||
/>
|
||||
<Rectangle
|
||||
x={ x }
|
||||
y={ y }
|
||||
width={ width }
|
||||
height={ height }
|
||||
fill={ fill }
|
||||
onClick={ onClick }
|
||||
/>
|
||||
</g>
|
||||
);
|
||||
}
|
||||
}
|
||||
17
js/src/ui/GasPriceSelector/CustomBar/index.js
Normal file
17
js/src/ui/GasPriceSelector/CustomBar/index.js
Normal file
@ -0,0 +1,17 @@
|
||||
// Copyright 2015, 2016 Ethcore (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
export default from './customBar';
|
||||
73
js/src/ui/GasPriceSelector/CustomCursor/customCursor.js
Normal file
73
js/src/ui/GasPriceSelector/CustomCursor/customCursor.js
Normal file
@ -0,0 +1,73 @@
|
||||
// Copyright 2015, 2016 Ethcore (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { Rectangle } from 'recharts';
|
||||
|
||||
import { COLORS, countModifier } from '../util';
|
||||
|
||||
export default class CustomCursor extends Component {
|
||||
static propTypes = {
|
||||
x: PropTypes.number,
|
||||
y: PropTypes.number,
|
||||
width: PropTypes.number,
|
||||
height: PropTypes.number,
|
||||
onClick: PropTypes.func,
|
||||
getIndex: PropTypes.func,
|
||||
counts: PropTypes.object,
|
||||
yDomain: PropTypes.array
|
||||
}
|
||||
|
||||
render () {
|
||||
const { x, y, width, height, getIndex, counts, yDomain } = this.props;
|
||||
|
||||
const index = getIndex();
|
||||
|
||||
if (index === -1) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const count = countModifier(counts[index]);
|
||||
const barHeight = (count / yDomain[1]) * (y + height);
|
||||
|
||||
return (
|
||||
<g>
|
||||
<Rectangle
|
||||
x={ x }
|
||||
y={ 0 }
|
||||
width={ width }
|
||||
height={ height + y }
|
||||
fill='transparent'
|
||||
onClick={ this.onClick }
|
||||
/>
|
||||
<Rectangle
|
||||
x={ x }
|
||||
y={ y + (height - barHeight) }
|
||||
width={ width }
|
||||
height={ barHeight }
|
||||
fill={ COLORS.hover }
|
||||
onClick={ this.onClick }
|
||||
/>
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
||||
onClick = () => {
|
||||
const { onClick, getIndex } = this.props;
|
||||
const index = getIndex();
|
||||
onClick({ index });
|
||||
}
|
||||
}
|
||||
17
js/src/ui/GasPriceSelector/CustomCursor/index.js
Normal file
17
js/src/ui/GasPriceSelector/CustomCursor/index.js
Normal file
@ -0,0 +1,17 @@
|
||||
// Copyright 2015, 2016 Ethcore (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
export default from './customCursor';
|
||||
52
js/src/ui/GasPriceSelector/CustomShape/customShape.js
Normal file
52
js/src/ui/GasPriceSelector/CustomShape/customShape.js
Normal file
@ -0,0 +1,52 @@
|
||||
// Copyright 2015, 2016 Ethcore (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { Dot } from 'recharts';
|
||||
|
||||
export default class CustomShape extends Component {
|
||||
static propTypes = {
|
||||
showValue: PropTypes.number.isRequired,
|
||||
cx: PropTypes.number,
|
||||
cy: PropTypes.number,
|
||||
payload: PropTypes.object
|
||||
}
|
||||
|
||||
render () {
|
||||
const { cx, cy, showValue, payload } = this.props;
|
||||
|
||||
if (showValue !== payload.y) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<g>
|
||||
<Dot
|
||||
style={ { fill: 'white' } }
|
||||
cx={ cx }
|
||||
cy={ cy }
|
||||
r={ 5 }
|
||||
/>
|
||||
<Dot
|
||||
style={ { fill: 'rgb(255, 99, 132)' } }
|
||||
cx={ cx }
|
||||
cy={ cy }
|
||||
r={ 3 }
|
||||
/>
|
||||
</g>
|
||||
);
|
||||
}
|
||||
}
|
||||
17
js/src/ui/GasPriceSelector/CustomShape/index.js
Normal file
17
js/src/ui/GasPriceSelector/CustomShape/index.js
Normal file
@ -0,0 +1,17 @@
|
||||
// Copyright 2015, 2016 Ethcore (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
export default from './customShape';
|
||||
53
js/src/ui/GasPriceSelector/CustomTooltip/customTooltip.js
Normal file
53
js/src/ui/GasPriceSelector/CustomTooltip/customTooltip.js
Normal file
@ -0,0 +1,53 @@
|
||||
// Copyright 2015, 2016 Ethcore (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
|
||||
export default class CustomTooltip extends Component {
|
||||
static propTypes = {
|
||||
active: PropTypes.bool,
|
||||
histogram: PropTypes.object.isRequired,
|
||||
label: PropTypes.number,
|
||||
payload: PropTypes.array,
|
||||
type: PropTypes.string
|
||||
}
|
||||
|
||||
render () {
|
||||
const { active, label, histogram } = this.props;
|
||||
|
||||
if (!active) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const index = label;
|
||||
|
||||
const count = histogram.counts[index];
|
||||
const minprice = histogram.bucketBounds[index];
|
||||
const maxprice = histogram.bucketBounds[index + 1];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p className='label'>
|
||||
{ count.toNumber() } transactions
|
||||
with gas price set from
|
||||
<span> { minprice.toFormat(0) } </span>
|
||||
to
|
||||
<span> { maxprice.toFormat(0) } </span>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
17
js/src/ui/GasPriceSelector/CustomTooltip/index.js
Normal file
17
js/src/ui/GasPriceSelector/CustomTooltip/index.js
Normal file
@ -0,0 +1,17 @@
|
||||
// Copyright 2015, 2016 Ethcore (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
export default from './customTooltip';
|
||||
@ -20,8 +20,12 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.columns {
|
||||
.chartRow, .sliderRow {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chartRow {
|
||||
margin-bottom: -24px;
|
||||
}
|
||||
341
js/src/ui/GasPriceSelector/gasPriceSelector.js
Normal file
341
js/src/ui/GasPriceSelector/gasPriceSelector.js
Normal file
@ -0,0 +1,341 @@
|
||||
// Copyright 2015, 2016 Ethcore (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import BigNumber from 'bignumber.js';
|
||||
import { Slider } from 'material-ui';
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { Bar, BarChart, ResponsiveContainer, Scatter, ScatterChart, Tooltip, XAxis, YAxis } from 'recharts';
|
||||
|
||||
import CustomBar from './CustomBar';
|
||||
import CustomCursor from './CustomCursor';
|
||||
import CustomShape from './CustomShape';
|
||||
import CustomTooltip from './CustomTooltip';
|
||||
|
||||
import { COLORS, countModifier } from './util';
|
||||
|
||||
import styles from './gasPriceSelector.css';
|
||||
|
||||
const TOOL_STYLE = {
|
||||
color: 'rgba(255,255,255,0.5)',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.75)',
|
||||
padding: '0 0.5em',
|
||||
fontSize: '0.75em'
|
||||
};
|
||||
|
||||
export default class GasPriceSelector extends Component {
|
||||
static propTypes = {
|
||||
histogram: PropTypes.object.isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
price: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.object
|
||||
])
|
||||
}
|
||||
|
||||
state = {
|
||||
price: null,
|
||||
sliderValue: 0.5,
|
||||
selectedIndex: 0,
|
||||
|
||||
chartData: {
|
||||
values: [],
|
||||
xDomain: [],
|
||||
yDomain: [],
|
||||
N: 0
|
||||
}
|
||||
}
|
||||
|
||||
componentWillMount () {
|
||||
this.computeCharts();
|
||||
this.setprice();
|
||||
}
|
||||
|
||||
componentWillReceiveProps (nextProps) {
|
||||
if (nextProps.price !== this.props.price) {
|
||||
this.setprice(nextProps);
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUpdate (nextProps, nextState) {
|
||||
if (Math.floor(nextState.sliderValue) !== Math.floor(this.state.sliderValue)) {
|
||||
this.updateSelectedBarChart(nextState);
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
{ this.renderChart() }
|
||||
{ this.renderSlider() }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderChart () {
|
||||
const { histogram } = this.props;
|
||||
const { chartData, sliderValue, selectedIndex } = this.state;
|
||||
|
||||
if (chartData.values.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const height = 196;
|
||||
const countIndex = Math.max(0, Math.min(selectedIndex, histogram.counts.length - 1));
|
||||
const selectedCount = countModifier(histogram.counts[countIndex]);
|
||||
|
||||
return (
|
||||
<div className={ styles.chartRow }>
|
||||
<div style={ { flex: 1, height } }>
|
||||
|
||||
<div className={ styles.chart }>
|
||||
<ResponsiveContainer height={ height }>
|
||||
<ScatterChart margin={ { top: 0, right: 0, left: 0, bottom: 0 } }>
|
||||
<Scatter
|
||||
data={ [
|
||||
{ x: sliderValue, y: 0 },
|
||||
{ x: sliderValue, y: selectedCount },
|
||||
{ x: sliderValue, y: chartData.yDomain[1] }
|
||||
] }
|
||||
isAnimationActive={ false }
|
||||
line
|
||||
shape={ <CustomShape showValue={ selectedCount } /> } />
|
||||
<XAxis
|
||||
dataKey='x'
|
||||
domain={ [0, 1] }
|
||||
hide
|
||||
height={ 0 } />
|
||||
<YAxis
|
||||
dataKey='y'
|
||||
domain={ chartData.yDomain }
|
||||
hide
|
||||
width={ 0 } />
|
||||
</ScatterChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
<div className={ styles.chart }>
|
||||
<ResponsiveContainer height={ height }>
|
||||
<BarChart
|
||||
barCategoryGap={ 1 }
|
||||
data={ chartData.values }
|
||||
margin={ { top: 0, right: 0, left: 0, bottom: 0 } }
|
||||
ref='barChart'>
|
||||
<Bar
|
||||
dataKey='value'
|
||||
onClick={ this.onClickprice }
|
||||
shape={ <CustomBar selected={ selectedIndex } onClick={ this.onClickprice } /> }stroke={ COLORS.line } />
|
||||
<Tooltip
|
||||
content={ <CustomTooltip histogram={ histogram } /> }
|
||||
cursor={ this.renderCustomCursor() }
|
||||
wrapperStyle={ TOOL_STYLE } />
|
||||
<XAxis
|
||||
dataKey='index'
|
||||
domain={ chartData.xDomain }
|
||||
hide
|
||||
type='category' />
|
||||
<YAxis
|
||||
domain={ chartData.yDomain }
|
||||
hide
|
||||
type='number' />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderSlider () {
|
||||
const { sliderValue } = this.state;
|
||||
|
||||
return (
|
||||
<div className={ styles.sliderRow }>
|
||||
<Slider
|
||||
min={ 0 }
|
||||
max={ 1 }
|
||||
value={ sliderValue }
|
||||
onChange={ this.onEditpriceSlider }
|
||||
style={ {
|
||||
flex: 1,
|
||||
padding: '0 0.3em'
|
||||
} }
|
||||
sliderStyle={ {
|
||||
marginBottom: 12
|
||||
} }
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderCustomCursor = () => {
|
||||
const { histogram } = this.props;
|
||||
const { chartData } = this.state;
|
||||
|
||||
return (
|
||||
<CustomCursor
|
||||
counts={ histogram.counts }
|
||||
getIndex={ this.getBarHoverIndex }
|
||||
onClick={ this.onClickprice }
|
||||
yDomain={ chartData.yDomain }
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
getBarHoverIndex = () => {
|
||||
const { barChart } = this.refs;
|
||||
|
||||
if (!barChart || !barChart.state) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
return barChart.state.activeTooltipIndex;
|
||||
}
|
||||
|
||||
computeChartsData () {
|
||||
const { priceChartData } = this.state;
|
||||
const { histogram } = this.props;
|
||||
|
||||
const values = priceChartData
|
||||
.map((value, index) => ({ value, index }));
|
||||
|
||||
const N = values.length - 1;
|
||||
const maxGasCounts = countModifier(
|
||||
histogram
|
||||
.counts
|
||||
.reduce((max, count) => count.greaterThan(max) ? count : max, 0)
|
||||
);
|
||||
|
||||
const xDomain = [0, N];
|
||||
const yDomain = [0, maxGasCounts * 1.1];
|
||||
|
||||
const chartData = {
|
||||
values, N,
|
||||
xDomain, yDomain
|
||||
};
|
||||
|
||||
this.setState({ chartData }, () => {
|
||||
this.updateSelectedBarChart();
|
||||
});
|
||||
}
|
||||
|
||||
computeCharts (props = this.props) {
|
||||
const { histogram } = props;
|
||||
|
||||
const priceChartData = histogram
|
||||
.counts
|
||||
.map(count => countModifier(count));
|
||||
|
||||
this.setState(
|
||||
{ priceChartData },
|
||||
() => this.computeChartsData()
|
||||
);
|
||||
}
|
||||
|
||||
updateSelectedBarChart (state = this.state) {
|
||||
}
|
||||
|
||||
setprice (props = this.props) {
|
||||
const { price, histogram } = props;
|
||||
|
||||
// If no gas price yet...
|
||||
if (!price) {
|
||||
return this.setSliderValue(0.5);
|
||||
}
|
||||
|
||||
const bnprice = (typeof price === 'string')
|
||||
? new BigNumber(price)
|
||||
: price;
|
||||
|
||||
// If gas price hasn't changed
|
||||
if (this.state.price && bnprice.equals(this.state.price)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const prices = histogram.bucketBounds;
|
||||
const startIndex = prices
|
||||
.findIndex(price => price.greaterThan(bnprice)) - 1;
|
||||
|
||||
// price Lower than the max in histogram
|
||||
if (startIndex === -1) {
|
||||
return this.setSliderValue(0, bnprice);
|
||||
}
|
||||
|
||||
// price Greater than the max in histogram
|
||||
if (startIndex === -2) {
|
||||
return this.setSliderValue(1, bnprice);
|
||||
}
|
||||
|
||||
const priceA = prices[startIndex];
|
||||
const priceB = prices[startIndex + 1];
|
||||
|
||||
const sliderValueDec = bnprice
|
||||
.minus(priceA)
|
||||
.dividedBy(priceB.minus(priceA))
|
||||
.toNumber();
|
||||
|
||||
const sliderValue = (startIndex + sliderValueDec) / (prices.length - 1);
|
||||
this.setSliderValue(sliderValue, bnprice);
|
||||
}
|
||||
|
||||
setSliderValue (value, price = this.state.price) {
|
||||
const { histogram } = this.props;
|
||||
|
||||
const N = histogram.bucketBounds.length - 1;
|
||||
|
||||
const sliderValue = Math.max(0, Math.min(value, 1));
|
||||
const selectedIndex = Math.floor(sliderValue * N);
|
||||
|
||||
this.setState({ sliderValue, price, selectedIndex });
|
||||
}
|
||||
|
||||
onBarChartMouseUp = (event) => {
|
||||
console.log(event);
|
||||
}
|
||||
|
||||
onClickprice = (bar) => {
|
||||
const { index } = bar;
|
||||
|
||||
const ratio = (index + 0.5) / (this.state.chartData.N + 1);
|
||||
|
||||
this.onEditpriceSlider(null, ratio);
|
||||
}
|
||||
|
||||
onEditpriceSlider = (event, sliderValue) => {
|
||||
const { histogram } = this.props;
|
||||
|
||||
const prices = histogram.bucketBounds;
|
||||
const N = prices.length - 1;
|
||||
const priceAIdx = Math.floor(sliderValue * N);
|
||||
const priceBIdx = priceAIdx + 1;
|
||||
|
||||
if (priceBIdx === N + 1) {
|
||||
const price = prices[priceAIdx].round();
|
||||
this.props.onChange(event, price);
|
||||
return;
|
||||
}
|
||||
|
||||
const priceA = prices[priceAIdx];
|
||||
const priceB = prices[priceBIdx];
|
||||
|
||||
const mult = Math.round((sliderValue % 1) * 100) / 100;
|
||||
const price = priceA
|
||||
.plus(priceB.minus(priceA).times(mult))
|
||||
.round();
|
||||
|
||||
this.setSliderValue(sliderValue, price);
|
||||
this.props.onChange(event, price.toFixed());
|
||||
}
|
||||
}
|
||||
34
js/src/ui/GasPriceSelector/util.js
Normal file
34
js/src/ui/GasPriceSelector/util.js
Normal file
@ -0,0 +1,34 @@
|
||||
// Copyright 2015, 2016 Ethcore (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
const COLORS = {
|
||||
default: 'rgba(255, 99, 132, 0.2)',
|
||||
selected: 'rgba(255, 99, 132, 0.5)',
|
||||
hover: 'rgba(255, 99, 132, 0.15)',
|
||||
grid: 'rgba(255, 99, 132, 0.5)',
|
||||
line: 'rgb(255, 99, 132)',
|
||||
intersection: '#fff'
|
||||
};
|
||||
|
||||
const countModifier = (count) => {
|
||||
const val = count.toNumber ? count.toNumber() : count;
|
||||
return Math.log10(val + 1) + 0.1;
|
||||
};
|
||||
|
||||
export {
|
||||
COLORS,
|
||||
countModifier
|
||||
};
|
||||
17
js/src/ui/LanguageSelector/index.js
Normal file
17
js/src/ui/LanguageSelector/index.js
Normal file
@ -0,0 +1,17 @@
|
||||
// Copyright 2015, 2016 Ethcore (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
export default from './languageSelector';
|
||||
71
js/src/ui/LanguageSelector/languageSelector.js
Normal file
71
js/src/ui/LanguageSelector/languageSelector.js
Normal file
@ -0,0 +1,71 @@
|
||||
// Copyright 2015, 2016 Ethcore (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { MenuItem } from 'material-ui';
|
||||
import { observer } from 'mobx-react';
|
||||
|
||||
import Select from '../Form/Select';
|
||||
import { LocaleStore } from '../../i18n';
|
||||
|
||||
@observer
|
||||
export default class LanguageSelector extends Component {
|
||||
store = LocaleStore.get();
|
||||
|
||||
render () {
|
||||
if (!this.store.isDevelopment) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Select
|
||||
hint={
|
||||
<FormattedMessage
|
||||
id='settings.parity.languages.hint'
|
||||
defaultMessage='the language this interface is displayed with' />
|
||||
}
|
||||
label={
|
||||
<FormattedMessage
|
||||
id='settings.parity.languages.label'
|
||||
defaultMessage='UI language' />
|
||||
}
|
||||
value={ this.store.locale }
|
||||
onChange={ this.onChange }>
|
||||
{ this.renderOptions() }
|
||||
</Select>
|
||||
);
|
||||
}
|
||||
|
||||
renderOptions () {
|
||||
return this.store.locales.map((locale) => {
|
||||
const label = <FormattedMessage id={ `languages.${locale}` } />;
|
||||
|
||||
return (
|
||||
<MenuItem
|
||||
key={ locale }
|
||||
value={ locale }
|
||||
label={ label }>
|
||||
{ label }
|
||||
</MenuItem>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
onChange = (event, index, locale) => {
|
||||
this.store.setLocale(locale);
|
||||
}
|
||||
}
|
||||
@ -32,8 +32,10 @@ import Editor from './Editor';
|
||||
import Errors from './Errors';
|
||||
import Form, { AddressSelect, FormWrap, TypedInput, Input, InputAddress, InputAddressSelect, InputChip, InputInline, Select, RadioButtons } from './Form';
|
||||
import GasPriceEditor from './GasPriceEditor';
|
||||
import GasPriceSelector from './GasPriceSelector';
|
||||
import IdentityIcon from './IdentityIcon';
|
||||
import IdentityName from './IdentityName';
|
||||
import LanguageSelector from './LanguageSelector';
|
||||
import Loading from './Loading';
|
||||
import MethodDecoding from './MethodDecoding';
|
||||
import Modal, { Busy as BusyStep, Completed as CompletedStep } from './Modal';
|
||||
@ -69,15 +71,16 @@ export {
|
||||
Form,
|
||||
FormWrap,
|
||||
GasPriceEditor,
|
||||
GasPriceSelector,
|
||||
Input,
|
||||
InputAddress,
|
||||
InputAddressSelect,
|
||||
InputChip,
|
||||
InputInline,
|
||||
Loading,
|
||||
Select,
|
||||
IdentityIcon,
|
||||
IdentityName,
|
||||
LanguageSelector,
|
||||
Loading,
|
||||
MethodDecoding,
|
||||
Modal,
|
||||
BusyStep,
|
||||
@ -87,6 +90,7 @@ export {
|
||||
ParityBackground,
|
||||
RadioButtons,
|
||||
ShortenedHash,
|
||||
Select,
|
||||
SignerIcon,
|
||||
Tags,
|
||||
Tooltip,
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
import { Link } from 'react-router';
|
||||
import { Toolbar, ToolbarGroup } from 'material-ui/Toolbar';
|
||||
@ -23,85 +24,57 @@ import { isEqual } from 'lodash';
|
||||
|
||||
import { Badge, Tooltip } from '~/ui';
|
||||
|
||||
import imagesEthcoreBlock from '~/../assets/images/parity-logo-white-no-text.svg';
|
||||
|
||||
import styles from './tabBar.css';
|
||||
import imagesEthcoreBlock from '../../../../assets/images/parity-logo-white-no-text.svg';
|
||||
|
||||
class Tab extends Component {
|
||||
static propTypes = {
|
||||
view: PropTypes.object,
|
||||
children: PropTypes.node,
|
||||
pendings: PropTypes.number
|
||||
pendings: PropTypes.number,
|
||||
view: PropTypes.object
|
||||
};
|
||||
|
||||
shouldComponentUpdate (nextProps) {
|
||||
return (nextProps.view.id === 'signer' && nextProps.pendings !== this.props.pendings);
|
||||
}
|
||||
|
||||
render () {
|
||||
const { view, children } = this.props;
|
||||
|
||||
const label = this.getLabel(view);
|
||||
|
||||
return (
|
||||
<MUITab
|
||||
icon={ view.icon }
|
||||
label={ label }
|
||||
>
|
||||
label={
|
||||
view.id === 'signer'
|
||||
? this.renderSignerLabel(view.id)
|
||||
: this.renderLabel(view.id)
|
||||
}>
|
||||
{ children }
|
||||
</MUITab>
|
||||
);
|
||||
}
|
||||
|
||||
getLabel (view) {
|
||||
const { label } = view;
|
||||
|
||||
if (view.id === 'signer') {
|
||||
return this.renderSignerLabel(label);
|
||||
}
|
||||
|
||||
if (view.id === 'status') {
|
||||
return this.renderStatusLabel(label);
|
||||
}
|
||||
|
||||
return this.renderLabel(label);
|
||||
}
|
||||
|
||||
renderLabel (name, bubble) {
|
||||
renderLabel (id, bubble) {
|
||||
return (
|
||||
<div className={ styles.label }>
|
||||
{ name }
|
||||
<FormattedMessage
|
||||
id={ `settings.views.${id}.label` } />
|
||||
{ bubble }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderSignerLabel (label) {
|
||||
renderSignerLabel (id) {
|
||||
const { pendings } = this.props;
|
||||
let bubble;
|
||||
|
||||
if (pendings) {
|
||||
const bubble = (
|
||||
bubble = (
|
||||
<Badge
|
||||
color='red'
|
||||
className={ styles.labelBubble }
|
||||
value={ pendings } />
|
||||
);
|
||||
|
||||
return this.renderLabel(label, bubble);
|
||||
}
|
||||
|
||||
return this.renderLabel(label);
|
||||
}
|
||||
|
||||
renderStatusLabel (label) {
|
||||
// const { isTest, netChain } = this.props;
|
||||
// const bubble = (
|
||||
// <Badge
|
||||
// color={ isTest ? 'red' : 'default' }
|
||||
// className={ styles.labelBubble }
|
||||
// value={ isTest ? 'TEST' : netChain } />
|
||||
// );
|
||||
|
||||
return this.renderLabel(label, null);
|
||||
return this.renderLabel(id, bubble);
|
||||
}
|
||||
}
|
||||
|
||||
@ -111,28 +84,19 @@ class TabBar extends Component {
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
views: PropTypes.array.isRequired,
|
||||
pending: PropTypes.array,
|
||||
isTest: PropTypes.bool,
|
||||
netChain: PropTypes.string
|
||||
netChain: PropTypes.string,
|
||||
pending: PropTypes.array,
|
||||
views: PropTypes.array.isRequired
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
pending: []
|
||||
};
|
||||
|
||||
shouldComponentUpdate (nextProps, nextState) {
|
||||
const prevViews = this.props.views.map((v) => v.id).sort();
|
||||
const nextViews = nextProps.views.map((v) => v.id).sort();
|
||||
|
||||
return (nextProps.pending.length !== this.props.pending.length) ||
|
||||
(!isEqual(prevViews, nextViews));
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<Toolbar
|
||||
className={ styles.toolbar }>
|
||||
<Toolbar className={ styles.toolbar }>
|
||||
{ this.renderLogo() }
|
||||
{ this.renderTabs() }
|
||||
{ this.renderLast() }
|
||||
@ -167,21 +131,20 @@ class TabBar extends Component {
|
||||
.map((view, index) => {
|
||||
const body = (view.id === 'accounts')
|
||||
? (
|
||||
<Tooltip className={ styles.tabbarTooltip } text='navigate between the different parts and views of the application, switching between an account view, token view and distributed application view' />
|
||||
<Tooltip
|
||||
className={ styles.tabbarTooltip }
|
||||
text='navigate between the different parts and views of the application, switching between an account view, token view and distributed application view' />
|
||||
)
|
||||
: null;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={ view.id }
|
||||
to={ view.route }
|
||||
activeClassName={ styles.tabactive }
|
||||
className={ styles.tabLink }
|
||||
>
|
||||
className={ styles.tabLink }key={ view.id }
|
||||
to={ view.route }>
|
||||
<Tab
|
||||
view={ view }
|
||||
pendings={ pending.length }
|
||||
>
|
||||
view={ view }>
|
||||
{ body }
|
||||
</Tab>
|
||||
</Link>
|
||||
@ -203,11 +166,10 @@ function mapStateToProps (initState) {
|
||||
.keys(views)
|
||||
.filter((id) => views[id].fixed || views[id].active);
|
||||
|
||||
let filteredViews = filteredViewIds
|
||||
.map((id) => ({
|
||||
...views[id],
|
||||
id
|
||||
}));
|
||||
let filteredViews = filteredViewIds.map((id) => ({
|
||||
...views[id],
|
||||
id
|
||||
}));
|
||||
|
||||
return (state) => {
|
||||
const { views } = state.settings;
|
||||
@ -221,11 +183,10 @@ function mapStateToProps (initState) {
|
||||
}
|
||||
|
||||
filteredViewIds = viewIds;
|
||||
filteredViews = viewIds
|
||||
.map((id) => ({
|
||||
...views[id],
|
||||
id
|
||||
}));
|
||||
filteredViews = viewIds.map((id) => ({
|
||||
...views[id],
|
||||
id
|
||||
}));
|
||||
|
||||
return { views: filteredViews };
|
||||
};
|
||||
|
||||
@ -19,5 +19,8 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
@ -30,6 +30,8 @@ import Status from './Status';
|
||||
import Store from './store';
|
||||
import TabBar from './TabBar';
|
||||
|
||||
import styles from './application.css';
|
||||
|
||||
const inFrame = window.parent !== window && window.parent.frames.length !== 0;
|
||||
|
||||
@observer
|
||||
@ -79,7 +81,9 @@ class Application extends Component {
|
||||
netChain={ netChain }
|
||||
isTest={ isTest }
|
||||
pending={ pending } />
|
||||
{ children }
|
||||
<div className={ styles.content }>
|
||||
{ children }
|
||||
</div>
|
||||
{ blockNumber ? (<Status />) : null }
|
||||
<Snackbar />
|
||||
</Container>
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { observer } from 'mobx-react';
|
||||
import DoneIcon from 'material-ui/svg-icons/action/done';
|
||||
import { List, ListItem } from 'material-ui/List';
|
||||
@ -39,22 +40,56 @@ export default class AddDapps extends Component {
|
||||
|
||||
return (
|
||||
<Modal
|
||||
visible
|
||||
compact
|
||||
title='visible applications'
|
||||
title={
|
||||
<FormattedMessage
|
||||
id='dapps.add.label'
|
||||
defaultMessage='visible applications' />
|
||||
}
|
||||
actions={ [
|
||||
<Button
|
||||
label={ 'Done' }
|
||||
label={
|
||||
<FormattedMessage
|
||||
id='dapps.add.button.done'
|
||||
defaultMessage='Done' />
|
||||
}
|
||||
key='done'
|
||||
onClick={ store.closeModal }
|
||||
icon={ <DoneIcon /> }
|
||||
/>
|
||||
] }
|
||||
visible
|
||||
>
|
||||
] }>
|
||||
<div className={ styles.warning } />
|
||||
{ this.renderList(store.sortedLocal, 'Applications locally available', 'All applications installed locally on the machine by the user for access by the Parity client.') }
|
||||
{ this.renderList(store.sortedBuiltin, 'Applications bundled with Parity', 'Experimental applications developed by the Parity team to show off dapp capabilities, integration, experimental features and to control certain network-wide client behaviour.') }
|
||||
{ this.renderList(store.sortedNetwork, 'Applications on the global network', 'These applications are not affiliated with Parity nor are they published by Parity. Each remain under the control of their respective authors. Please ensure that you understand the goals for each application before interacting.') }
|
||||
{
|
||||
this.renderList(store.sortedLocal,
|
||||
<FormattedMessage
|
||||
id='dapps.add.local.label'
|
||||
defaultMessage='Applications locally available' />,
|
||||
<FormattedMessage
|
||||
id='dapps.add.local.desc'
|
||||
defaultMessage='All applications installed locally on the machine by the user for access by the Parity client.' />
|
||||
)
|
||||
}
|
||||
{
|
||||
this.renderList(store.sortedBuiltin,
|
||||
<FormattedMessage
|
||||
id='dapps.add.builtin.label'
|
||||
defaultMessage='Applications bundled with Parity' />,
|
||||
<FormattedMessage
|
||||
id='dapps.add.builtin.desc'
|
||||
defaultMessage='Experimental applications developed by the Parity team to show off dapp capabilities, integration, experimental features and to control certain network-wide client behaviour.' />
|
||||
)
|
||||
}
|
||||
{
|
||||
this.renderList(store.sortedNetwork,
|
||||
<FormattedMessage
|
||||
id='dapps.add.network.label'
|
||||
defaultMessage='Applications on the global network' />,
|
||||
<FormattedMessage
|
||||
id='dapps.add.network.desc'
|
||||
defaultMessage='These applications are not affiliated with Parity nor are they published by Parity. Each remain under the control of their respective authors. Please ensure that you understand the goals for each application before interacting.' />
|
||||
)
|
||||
}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { Checkbox } from 'material-ui';
|
||||
import { observer } from 'mobx-react';
|
||||
|
||||
@ -43,11 +44,19 @@ export default class Dapps extends Component {
|
||||
externalOverlay = (
|
||||
<div className={ styles.overlay }>
|
||||
<div className={ styles.body }>
|
||||
<div>Applications made available on the network by 3rd-party authors are not affiliated with Parity nor are they published by Parity. Each remain under the control of their respective authors. Please ensure that you understand the goals for each before interacting.</div>
|
||||
<div>
|
||||
<FormattedMessage
|
||||
id='dapps.external.warning'
|
||||
defaultMessage='Applications made available on the network by 3rd-party authors are not affiliated with Parity nor are they published by Parity. Each remain under the control of their respective authors. Please ensure that you understand the goals for each before interacting.' />
|
||||
</div>
|
||||
<div>
|
||||
<Checkbox
|
||||
className={ styles.accept }
|
||||
label='I understand that these applications are not affiliated with Parity'
|
||||
label={
|
||||
<FormattedMessage
|
||||
id='dapps.external.accept'
|
||||
defaultMessage='I understand that these applications are not affiliated with Parity' />
|
||||
}
|
||||
checked={ false }
|
||||
onCheck={ this.onClickAcceptExternal } />
|
||||
</div>
|
||||
@ -61,10 +70,18 @@ export default class Dapps extends Component {
|
||||
<AddDapps store={ this.store } />
|
||||
<Actionbar
|
||||
className={ styles.toolbar }
|
||||
title='Decentralized Applications'
|
||||
title={
|
||||
<FormattedMessage
|
||||
id='dapps.label'
|
||||
defaultMessage='Decentralized Applications' />
|
||||
}
|
||||
buttons={ [
|
||||
<FlatButton
|
||||
label='edit'
|
||||
label={
|
||||
<FormattedMessage
|
||||
id='dapps.button.edit'
|
||||
defaultMessage='edit' />
|
||||
}
|
||||
key='edit'
|
||||
icon={ <EyeIcon /> }
|
||||
onTouchTap={ this.store.openModal }
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
border-radius: 4px 4px 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 19em;
|
||||
max-height: 50vh;
|
||||
}
|
||||
|
||||
.expanded .content {
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import NavigationRefresh from 'material-ui/svg-icons/navigation/refresh';
|
||||
@ -55,15 +56,29 @@ class Background extends Component {
|
||||
|
||||
render () {
|
||||
return (
|
||||
<Container title='Background Pattern'>
|
||||
<Container title={
|
||||
<FormattedMessage id='settings.background.label' />
|
||||
}>
|
||||
<div className={ layout.layout }>
|
||||
<div className={ layout.overview }>
|
||||
<div>The background pattern you can see right now is unique to your Parity installation. It will change every time you create a new Signer token. This is so that decentralized applications cannot pretend to be trustworthy.</div>
|
||||
<div>Pick a pattern you like and memorize it. This Pattern will always be shown from now on, unless you clear your browser cache or use a new Signer token.</div>
|
||||
<div>
|
||||
<FormattedMessage
|
||||
id='settings.background.overview_0'
|
||||
defaultMessage='The background pattern you can see right now is unique to your Parity installation. It will change every time you create a new Signer token. This is so that decentralized applications cannot pretend to be trustworthy.' />
|
||||
</div>
|
||||
<div>
|
||||
<FormattedMessage
|
||||
id='settings.background.overview_1'
|
||||
defaultMessage='Pick a pattern you like and memorize it. This Pattern will always be shown from now on, unless you clear your browser cache or use a new Signer token.' />
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
icon={ <NavigationRefresh /> }
|
||||
label='generate more'
|
||||
label={
|
||||
<FormattedMessage
|
||||
id='settings.background.button_more'
|
||||
defaultMessage='generate more' />
|
||||
}
|
||||
onClick={ this.generateSeeds } />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -15,19 +15,13 @@
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { MenuItem } from 'material-ui';
|
||||
|
||||
import { Select, Container } from '~/ui';
|
||||
import { Select, Container, LanguageSelector } from '~/ui';
|
||||
|
||||
import layout from '../layout.css';
|
||||
|
||||
const MODES = {
|
||||
'active': 'Parity continuously syncs the chain',
|
||||
'passive': 'Parity syncs initially, then sleeps and wakes regularly to resync',
|
||||
'dark': 'Parity syncs only when the RPC is active',
|
||||
'offline': 'Parity doesn\'t sync'
|
||||
};
|
||||
|
||||
export default class Parity extends Component {
|
||||
static contextTypes = {
|
||||
api: PropTypes.object.isRequired
|
||||
@ -43,12 +37,19 @@ export default class Parity extends Component {
|
||||
|
||||
render () {
|
||||
return (
|
||||
<Container title='Parity'>
|
||||
<Container title={
|
||||
<FormattedMessage id='settings.parity.label' />
|
||||
}>
|
||||
<div className={ layout.layout }>
|
||||
<div className={ layout.overview }>
|
||||
<div>Control the Parity node settings and mode of operation via this interface.</div>
|
||||
<div>
|
||||
<FormattedMessage
|
||||
id='settings.parity.overview_0'
|
||||
defaultMessage='Control the Parity node settings and mode of operation via this interface.' />
|
||||
</div>
|
||||
</div>
|
||||
<div className={ layout.details }>
|
||||
<LanguageSelector />
|
||||
{ this.renderModes() }
|
||||
</div>
|
||||
</div>
|
||||
@ -57,30 +58,53 @@ export default class Parity extends Component {
|
||||
}
|
||||
|
||||
renderModes () {
|
||||
const modes = Object
|
||||
.keys(MODES)
|
||||
.map((mode) => {
|
||||
const description = MODES[mode];
|
||||
|
||||
return (
|
||||
<MenuItem
|
||||
key={ mode }
|
||||
value={ mode }
|
||||
label={ description }>
|
||||
{ description }
|
||||
</MenuItem>
|
||||
);
|
||||
});
|
||||
|
||||
const { mode } = this.state;
|
||||
|
||||
const renderItem = (mode, label) => {
|
||||
return (
|
||||
<MenuItem
|
||||
key={ mode }
|
||||
value={ mode }
|
||||
label={ label }>
|
||||
{ label }
|
||||
</MenuItem>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Select
|
||||
label='mode of operation'
|
||||
hint='the syning mode for the Parity node'
|
||||
label={
|
||||
<FormattedMessage
|
||||
id='settings.parity.modes.label'
|
||||
defaultMessage='mode of operation' />
|
||||
}
|
||||
hint={
|
||||
<FormattedMessage
|
||||
id='settings.parity.modes.hint'
|
||||
defaultMessage='the syning mode for the Parity node' />
|
||||
}
|
||||
value={ mode }
|
||||
onChange={ this.onChangeMode }>
|
||||
{ modes }
|
||||
{
|
||||
renderItem('active', <FormattedMessage
|
||||
id='settings.parity.modes.mode_active'
|
||||
defaultMessage='Parity continuously syncs the chain' />)
|
||||
}
|
||||
{
|
||||
renderItem('passive', <FormattedMessage
|
||||
id='settings.parity.modes.mode_passive'
|
||||
defaultMessage='Parity syncs initially, then sleeps and wakes regularly to resync' />)
|
||||
}
|
||||
{
|
||||
renderItem('dark', <FormattedMessage
|
||||
id='settings.parity.modes.mode_dark'
|
||||
defaultMessage='Parity syncs only when the RPC is active' />)
|
||||
}
|
||||
{
|
||||
renderItem('offline', <FormattedMessage
|
||||
id='settings.parity.modes.mode_offline'
|
||||
defaultMessage="Parity doesn't sync" />)
|
||||
}
|
||||
</Select>
|
||||
);
|
||||
}
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import { Container } from '~/ui';
|
||||
|
||||
@ -31,16 +32,40 @@ export default class Proxy extends Component {
|
||||
const proxyurl = `${dappsUrl}/proxy/proxy.pac`;
|
||||
|
||||
return (
|
||||
<Container title='Proxy'>
|
||||
<Container title={
|
||||
<FormattedMessage id='settings.proxy.label' />
|
||||
}>
|
||||
<div className={ layout.layout }>
|
||||
<div className={ layout.overview }>
|
||||
<div>The proxy setup allows you to access Parity and all associated decentralized applications via memorable addresses.</div>
|
||||
<div>
|
||||
<FormattedMessage
|
||||
id='settings.proxy.overview_0'
|
||||
defaultMessage='The proxy setup allows you to access Parity and all associated decentralized applications via memorable addresses.' />
|
||||
</div>
|
||||
</div>
|
||||
<div className={ layout.details }>
|
||||
<div className={ styles.details }>
|
||||
<div>Instead of accessing Parity via the IP address and port, you will be able to access it via the .parity subdomain, by visiting <span className={ layout.console }>http://home.parity/</span>. To setup subdomain-based routing, you need to add the relevant proxy entries to your browser,</div>
|
||||
<div className={ layout.center }><a href={ proxyurl } target='_blank'>{ proxyurl }</a></div>
|
||||
<div>To learn how to configure the proxy, instructions are provided for <a href='https://blogs.msdn.microsoft.com/ieinternals/2013/10/11/understanding-web-proxy-configuration/' target='_blank'>Windows</a>, <a href='https://support.apple.com/kb/PH18553?locale=en_US' target='_blank'>Max OS X</a> or <a href='http://xmodulo.com/how-to-set-up-proxy-auto-config-on-ubuntu-desktop.html' target='_blank'>Ubuntu</a>.</div>
|
||||
<div>
|
||||
<FormattedMessage
|
||||
id='settings.proxy.details_0'
|
||||
defaultMessage='Instead of accessing Parity via the IP address and port, you will be able to access it via the .parity subdomain, by visiting {homeProxy}. To setup subdomain-based routing, you need to add the relevant proxy entries to your browser,'
|
||||
values={ {
|
||||
homeProxy: <span className={ layout.console }>http://home.parity/</span>
|
||||
} } />
|
||||
</div>
|
||||
<div className={ layout.center }>
|
||||
<a href={ proxyurl } target='_blank'>{ proxyurl }</a>
|
||||
</div>
|
||||
<div>
|
||||
<FormattedMessage
|
||||
id='settings.proxy.details_1'
|
||||
defaultMessage='To learn how to configure the proxy, instructions are provided for {windowsLink}, {macOSLink} or {ubuntuLink}.'
|
||||
values={ {
|
||||
windowsLink: <a href='https://blogs.msdn.microsoft.com/ieinternals/2013/10/11/understanding-web-proxy-configuration/' target='_blank'><FormattedMessage id='details_windows' defaultMessage='Windows' /></a>,
|
||||
macOSLink: <a href='https://support.apple.com/kb/PH18553?locale=en_US' target='_blank'><FormattedMessage id='settings.proxy.details_macos' defaultMessage='macOS' /></a>,
|
||||
ubuntuLink: <a href='http://xmodulo.com/how-to-set-up-proxy-auto-config-on-ubuntu-desktop.html' target='_blank'><FormattedMessage id='settings.proxy.details_ubuntu' defaultMessage='Ubuntu' /></a>
|
||||
} } />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -28,66 +28,52 @@ const defaultViews = {
|
||||
active: true,
|
||||
fixed: true,
|
||||
icon: <ActionAccountBalanceWallet />,
|
||||
label: 'Accounts',
|
||||
route: '/accounts',
|
||||
value: 'account',
|
||||
description: 'A list of all the accounts associated to and imported into this Parity instance. Send transactions, receive incoming values, manage your balances and fund your accounts.'
|
||||
value: 'account'
|
||||
},
|
||||
|
||||
addresses: {
|
||||
active: true,
|
||||
icon: <CommunicationContacts />,
|
||||
label: 'Addressbook',
|
||||
route: '/addresses',
|
||||
value: 'address',
|
||||
description: 'A list of all contacts and address book entries that is managed by this Parity instance. Watch accounts and have the details available at the click of a button when transacting.'
|
||||
value: 'address'
|
||||
},
|
||||
|
||||
apps: {
|
||||
active: true,
|
||||
icon: <NavigationApps />,
|
||||
label: 'Applications',
|
||||
route: '/apps',
|
||||
value: 'app',
|
||||
description: 'Distributed applications that interact with the underlying network. Add applications, manage you application portfolio and interact with application from around the network.'
|
||||
value: 'app'
|
||||
},
|
||||
|
||||
contracts: {
|
||||
active: false,
|
||||
icon: <ImageGridOn />,
|
||||
label: 'Contracts',
|
||||
route: '/contracts',
|
||||
value: 'contract',
|
||||
description: 'Watch and interact with specific contracts that have been deployed on the network. This is a more technically-focused environment, specifically for advanced users that understand the inner working of certain contracts.'
|
||||
value: 'contract'
|
||||
},
|
||||
|
||||
status: {
|
||||
active: false,
|
||||
icon: <ActionTrackChanges />,
|
||||
label: 'Status',
|
||||
route: '/status',
|
||||
value: 'status',
|
||||
description: 'See how the Parity node is performing in terms of connections to the network, logs from the actual running instance and details of mining (if enabled and configured).'
|
||||
value: 'status'
|
||||
},
|
||||
|
||||
signer: {
|
||||
active: true,
|
||||
fixed: true,
|
||||
icon: <ActionFingerprint />,
|
||||
label: 'Signer',
|
||||
route: '/signer',
|
||||
value: 'signer',
|
||||
description: 'The secure transaction management area of the application where you can approve any outgoing transactions made from the application as well as those placed into the queue by distributed applications.'
|
||||
value: 'signer'
|
||||
},
|
||||
|
||||
settings: {
|
||||
active: true,
|
||||
fixed: true,
|
||||
icon: <ActionSettings />,
|
||||
label: 'Settings',
|
||||
route: '/settings',
|
||||
value: 'settings',
|
||||
description: 'This view. Allows you to customize the application in term of options, operation and look and feel.'
|
||||
value: 'settings'
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import { Checkbox } from 'material-ui';
|
||||
@ -34,16 +35,96 @@ class Views extends Component {
|
||||
|
||||
render () {
|
||||
return (
|
||||
<Container title='Views'>
|
||||
<Container title={
|
||||
<FormattedMessage id='settings.views.label' />
|
||||
}>
|
||||
<div className={ layout.layout }>
|
||||
<div className={ layout.overview }>
|
||||
<div>Manage the available application views, using only the parts of the application that is applicable to you.</div>
|
||||
<div>Are you an end-user? The defaults are setups for both beginner and advanced users alike.</div>
|
||||
<div>Are you a developer? Add some features to manage contracts are interact with application deployments.</div>
|
||||
<div>Are you a miner or run a large-scale node? Add the features to give you all the information needed to watch the node operation.</div>
|
||||
<div>
|
||||
<FormattedMessage
|
||||
id='settings.views.overview_0'
|
||||
defaultMessage='Manage the available application views, using only the parts of the application that is applicable to you.' />
|
||||
</div>
|
||||
<div>
|
||||
<FormattedMessage
|
||||
id='settings.views.overview_1'
|
||||
defaultMessage='Are you an end-user? The defaults are setups for both beginner and advanced users alike.' />
|
||||
</div>
|
||||
<div>
|
||||
<FormattedMessage
|
||||
id='settings.views.overview_2'
|
||||
defaultMessage='Are you a developer? Add some features to manage contracts are interact with application deployments.' />
|
||||
</div>
|
||||
<div>
|
||||
<FormattedMessage
|
||||
id='settings.views.overview_3'
|
||||
defaultMessage='Are you a miner or run a large-scale node? Add the features to give you all the information needed to watch the node operation.' />
|
||||
</div>
|
||||
</div>
|
||||
<div className={ layout.details }>
|
||||
{ this.renderViews() }
|
||||
{
|
||||
this.renderView('accounts',
|
||||
<FormattedMessage
|
||||
id='settings.views.accounts.label' />,
|
||||
<FormattedMessage
|
||||
id='settings.views.accounts.description'
|
||||
defaultMessage='A list of all the accounts associated to and imported into this Parity instance. Send transactions, receive incoming values, manage your balances and fund your accounts.' />
|
||||
)
|
||||
}
|
||||
{
|
||||
this.renderView('addresses',
|
||||
<FormattedMessage
|
||||
id='settings.views.addresses.label' />,
|
||||
<FormattedMessage
|
||||
id='settings.views.addresses.description'
|
||||
defaultMessage='A list of all contacts and address book entries that is managed by this Parity instance. Watch accounts and have the details available at the click of a button when transacting.' />
|
||||
)
|
||||
}
|
||||
{
|
||||
this.renderView('apps',
|
||||
<FormattedMessage
|
||||
id='settings.views.apps.label' />,
|
||||
<FormattedMessage
|
||||
id='settings.views.apps.description'
|
||||
defaultMessage='Distributed applications that interact with the underlying network. Add applications, manage you application portfolio and interact with application from around the network.' />
|
||||
)
|
||||
}
|
||||
{
|
||||
this.renderView('contracts',
|
||||
<FormattedMessage
|
||||
id='settings.views.contracts.label' />,
|
||||
<FormattedMessage
|
||||
id='settings.views.contracts.description'
|
||||
defaultMessage='Watch and interact with specific contracts that have been deployed on the network. This is a more technically-focused environment, specifically for advanced users that understand the inner working of certain contracts.' />
|
||||
)
|
||||
}
|
||||
{
|
||||
this.renderView('status',
|
||||
<FormattedMessage
|
||||
id='settings.views.status.label' />,
|
||||
<FormattedMessage
|
||||
id='settings.views.status.description'
|
||||
defaultMessage='See how the Parity node is performing in terms of connections to the network, logs from the actual running instance and details of mining (if enabled and configured).' />
|
||||
)
|
||||
}
|
||||
{
|
||||
this.renderView('signer',
|
||||
<FormattedMessage
|
||||
id='settings.views.signer.label' />,
|
||||
<FormattedMessage
|
||||
id='settings.views.signer.description'
|
||||
defaultMessage='The secure transaction management area of the application where you can approve any outgoing transactions made from the application as well as those placed into the queue by distributed applications.' />
|
||||
)
|
||||
}
|
||||
{
|
||||
this.renderView('settings',
|
||||
<FormattedMessage
|
||||
id='settings.views.settings.label' />,
|
||||
<FormattedMessage
|
||||
id='settings.views.settings.description'
|
||||
defaultMessage='This view. Allows you to customize the application in term of options, operation and look and feel.' />
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
@ -51,37 +132,45 @@ class Views extends Component {
|
||||
}
|
||||
|
||||
renderViews () {
|
||||
const { settings, toggleView } = this.props;
|
||||
const { settings } = this.props;
|
||||
|
||||
return Object.keys(settings.views).map((id) => {
|
||||
const toggle = () => toggleView(id);
|
||||
const view = settings.views[id];
|
||||
const label = (
|
||||
<div className={ styles.header }>
|
||||
<div className={ styles.labelicon }>
|
||||
{ view.icon }
|
||||
</div>
|
||||
<div className={ styles.label }>
|
||||
{ view.label }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
const description = <FormattedMessage id={ `settings.views.${id}.description` } />;
|
||||
const label = <FormattedMessage id={ `settings.views.${id}.label` } />;
|
||||
|
||||
return (
|
||||
<div className={ styles.view } key={ id }>
|
||||
<Checkbox
|
||||
disabled={ view.fixed }
|
||||
label={ label }
|
||||
onCheck={ toggle }
|
||||
checked={ view.active }
|
||||
value={ view.active } />
|
||||
<div className={ styles.info }>
|
||||
{ view.description }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
this.renderView(id, label, description);
|
||||
});
|
||||
}
|
||||
|
||||
renderView = (id, label, description) => {
|
||||
const { settings, toggleView } = this.props;
|
||||
|
||||
const toggle = () => toggleView(id);
|
||||
const view = settings.views[id];
|
||||
|
||||
return (
|
||||
<div className={ styles.view } key={ id }>
|
||||
<Checkbox
|
||||
disabled={ view.fixed }
|
||||
label={
|
||||
<div className={ styles.header }>
|
||||
<div className={ styles.labelicon }>
|
||||
{ view.icon }
|
||||
</div>
|
||||
<div className={ styles.label }>
|
||||
{ label }
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
onCheck={ toggle }
|
||||
checked={ view.active }
|
||||
value={ view.active } />
|
||||
<div className={ styles.info }>
|
||||
{ description }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps (state) {
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { Tab, Tabs } from 'material-ui';
|
||||
import ActionSettingsEthernet from 'material-ui/svg-icons/action/settings-ethernet';
|
||||
import ImageBlurOn from 'material-ui/svg-icons/image/blur-on';
|
||||
@ -46,7 +47,11 @@ export default class Settings extends Component {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Actionbar title='settings' className={ styles.bar }>
|
||||
<Actionbar
|
||||
className={ styles.bar }
|
||||
title={
|
||||
<FormattedMessage id='settings.label' />
|
||||
}>
|
||||
<Tabs className={ styles.tabs } value={ hash }>
|
||||
{ this.renderTab(hash, 'views', <ImageRemoveRedEye />) }
|
||||
{ this.renderTab(hash, 'background', <ImageBlurOn />) }
|
||||
@ -64,12 +69,20 @@ export default class Settings extends Component {
|
||||
renderTab (hash, section, icon) {
|
||||
return (
|
||||
<Tab
|
||||
className={ hash === section ? styles.tabactive : styles.tab }
|
||||
value={ section }
|
||||
key={ section }
|
||||
className={
|
||||
hash === section
|
||||
? styles.tabactive
|
||||
: styles.tab
|
||||
}
|
||||
icon={ icon }
|
||||
label={ <div className={ styles.menu }>{ section }</div> }
|
||||
onActive={ this.onActivate(section) } />
|
||||
key={ section }
|
||||
label={
|
||||
<div className={ styles.menu }>
|
||||
<FormattedMessage id={ `settings.${section}.label` } />
|
||||
</div>
|
||||
}
|
||||
onActive={ this.onActivate(section) }
|
||||
value={ section } />
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
|
||||
import { addressLink } from '~/3rdparty/etherscan/links';
|
||||
import styles from './AccountLink.css';
|
||||
import styles from './accountLink.css';
|
||||
|
||||
export default class AccountLink extends Component {
|
||||
static propTypes = {
|
||||
@ -14,4 +14,4 @@
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
export default from './AccountLink';
|
||||
export default from './accountLink';
|
||||
|
||||
@ -19,7 +19,7 @@ import React, { Component, PropTypes } from 'react';
|
||||
import { IdentityIcon, IdentityName } from '~/ui';
|
||||
import AccountLink from './AccountLink';
|
||||
|
||||
import styles from './Account.css';
|
||||
import styles from './account.css';
|
||||
|
||||
export default class Account extends Component {
|
||||
static propTypes = {
|
||||
@ -14,4 +14,4 @@
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
export default from './Account';
|
||||
export default from './account';
|
||||
|
||||
@ -21,21 +21,26 @@ import SignRequest from '../SignRequest';
|
||||
|
||||
export default class RequestPending extends Component {
|
||||
static propTypes = {
|
||||
className: PropTypes.string,
|
||||
date: PropTypes.instanceOf(Date).isRequired,
|
||||
gasLimit: PropTypes.object.isRequired,
|
||||
id: PropTypes.object.isRequired,
|
||||
isSending: PropTypes.bool.isRequired,
|
||||
isTest: PropTypes.bool.isRequired,
|
||||
onConfirm: PropTypes.func.isRequired,
|
||||
onReject: PropTypes.func.isRequired,
|
||||
isSending: PropTypes.bool.isRequired,
|
||||
date: PropTypes.instanceOf(Date).isRequired,
|
||||
payload: PropTypes.oneOfType([
|
||||
PropTypes.shape({ signTransaction: PropTypes.object.isRequired }),
|
||||
PropTypes.shape({ sendTransaction: PropTypes.object.isRequired }),
|
||||
PropTypes.shape({ sign: PropTypes.object.isRequired })
|
||||
PropTypes.shape({ sign: PropTypes.object.isRequired }),
|
||||
PropTypes.shape({ signTransaction: PropTypes.object.isRequired })
|
||||
]).isRequired,
|
||||
className: PropTypes.string,
|
||||
isTest: PropTypes.bool.isRequired,
|
||||
store: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
isSending: false
|
||||
};
|
||||
|
||||
onConfirm = data => {
|
||||
const { onConfirm, payload } = this.props;
|
||||
|
||||
@ -44,24 +49,23 @@ export default class RequestPending extends Component {
|
||||
};
|
||||
|
||||
render () {
|
||||
const { payload, id, className, isSending, date, onReject, isTest, store } = this.props;
|
||||
const { className, date, gasLimit, id, isSending, isTest, onReject, payload, store } = this.props;
|
||||
|
||||
if (payload.sign) {
|
||||
const { sign } = payload;
|
||||
|
||||
return (
|
||||
<SignRequest
|
||||
address={ sign.address }
|
||||
className={ className }
|
||||
hash={ sign.hash }
|
||||
id={ id }
|
||||
isFinished={ false }
|
||||
isSending={ isSending }
|
||||
isTest={ isTest }
|
||||
onConfirm={ this.onConfirm }
|
||||
onReject={ onReject }
|
||||
isSending={ isSending }
|
||||
isFinished={ false }
|
||||
id={ id }
|
||||
address={ sign.address }
|
||||
hash={ sign.hash }
|
||||
isTest={ isTest }
|
||||
store={ store }
|
||||
/>
|
||||
store={ store } />
|
||||
);
|
||||
}
|
||||
|
||||
@ -70,19 +74,19 @@ export default class RequestPending extends Component {
|
||||
return (
|
||||
<TransactionPending
|
||||
className={ className }
|
||||
date={ date }
|
||||
gasLimit={ gasLimit }
|
||||
id={ id }
|
||||
isSending={ isSending }
|
||||
isTest={ isTest }
|
||||
onConfirm={ this.onConfirm }
|
||||
onReject={ onReject }
|
||||
isSending={ isSending }
|
||||
id={ id }
|
||||
transaction={ transaction }
|
||||
date={ date }
|
||||
isTest={ isTest }
|
||||
store={ store }
|
||||
/>
|
||||
transaction={ transaction } />
|
||||
);
|
||||
}
|
||||
|
||||
// Unknown payload
|
||||
console.error('RequestPending: Unknown payload', payload);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,4 +14,4 @@
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
export default from './SignRequest';
|
||||
export default from './signRequest';
|
||||
|
||||
@ -21,7 +21,7 @@ import Account from '../Account';
|
||||
import TransactionPendingForm from '../TransactionPendingForm';
|
||||
import TxHashLink from '../TxHashLink';
|
||||
|
||||
import styles from './SignRequest.css';
|
||||
import styles from './signRequest.css';
|
||||
|
||||
@observer
|
||||
export default class SignRequest extends Component {
|
||||
@ -49,7 +49,7 @@ export default class SignRequest extends Component {
|
||||
const { className } = this.props;
|
||||
|
||||
return (
|
||||
<div className={ `${styles.container} ${className || ''}` }>
|
||||
<div className={ `${styles.container} ${className}` }>
|
||||
{ this.renderDetails() }
|
||||
{ this.renderActions() }
|
||||
</div>
|
||||
@ -0,0 +1,34 @@
|
||||
// Copyright 2015, 2016 Ethcore (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import { shallow } from 'enzyme';
|
||||
import React from 'react';
|
||||
import sinon from 'sinon';
|
||||
|
||||
import SignRequest from './';
|
||||
|
||||
const store = {
|
||||
balances: {},
|
||||
fetchBalance: sinon.stub()
|
||||
};
|
||||
|
||||
describe('views/Signer/components/SignRequest', () => {
|
||||
it('renders', () => {
|
||||
expect(shallow(
|
||||
<SignRequest store={ store } />,
|
||||
)).to.be.ok;
|
||||
});
|
||||
});
|
||||
@ -14,4 +14,4 @@
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
export default from './TransactionMainDetails';
|
||||
export default from './transactionMainDetails';
|
||||
|
||||
@ -17,20 +17,25 @@
|
||||
|
||||
@import '../../_layout.css';
|
||||
|
||||
.transaction {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.transaction > * {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.account {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contractIcon {
|
||||
background: #eee;
|
||||
width: 50px !important;
|
||||
height: 50px !important;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
padding: 13px;
|
||||
}
|
||||
|
||||
.editButtonRow {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.from {
|
||||
display: inline-block;
|
||||
width: 40%;
|
||||
vertical-align: top;
|
||||
|
||||
@ -47,6 +52,7 @@
|
||||
}
|
||||
|
||||
.method {
|
||||
display: inline-block;
|
||||
width: 60%;
|
||||
vertical-align: top;
|
||||
line-height: 1em;
|
||||
@ -66,11 +72,7 @@
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.contractIcon {
|
||||
background: #eee;
|
||||
width: 50px !important;
|
||||
height: 50px !important;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
padding: 13px;
|
||||
.transaction {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
@ -14,52 +14,43 @@
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import MapsLocalGasStation from 'material-ui/svg-icons/maps/local-gas-station';
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
|
||||
import ReactTooltip from 'react-tooltip';
|
||||
|
||||
import { MethodDecoding } from '~/ui';
|
||||
import { Button, MethodDecoding } from '~/ui';
|
||||
|
||||
import * as tUtil from '../util/transaction';
|
||||
import Account from '../Account';
|
||||
import styles from './TransactionMainDetails.css';
|
||||
import styles from './transactionMainDetails.css';
|
||||
|
||||
export default class TransactionMainDetails extends Component {
|
||||
static propTypes = {
|
||||
id: PropTypes.object.isRequired,
|
||||
children: PropTypes.node,
|
||||
from: PropTypes.string.isRequired,
|
||||
fromBalance: PropTypes.object, // eth BigNumber, not required since it might take time to fetch
|
||||
value: PropTypes.object.isRequired, // wei hex
|
||||
totalValue: PropTypes.object.isRequired, // wei BigNumber
|
||||
fromBalance: PropTypes.object,
|
||||
gasStore: PropTypes.object,
|
||||
id: PropTypes.object.isRequired,
|
||||
isTest: PropTypes.bool.isRequired,
|
||||
totalValue: PropTypes.object.isRequired,
|
||||
transaction: PropTypes.object.isRequired,
|
||||
children: PropTypes.node
|
||||
value: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
componentWillMount () {
|
||||
const { value, totalValue } = this.props;
|
||||
const { totalValue, value } = this.props;
|
||||
|
||||
this.updateDisplayValues(value, totalValue);
|
||||
}
|
||||
|
||||
componentWillReceiveProps (nextProps) {
|
||||
const { value, totalValue } = nextProps;
|
||||
const { totalValue, value } = nextProps;
|
||||
|
||||
this.updateDisplayValues(value, totalValue);
|
||||
}
|
||||
|
||||
updateDisplayValues (value, totalValue) {
|
||||
this.setState({
|
||||
feeEth: tUtil.calcFeeInEth(totalValue, value),
|
||||
valueDisplay: tUtil.getValueDisplay(value),
|
||||
valueDisplayWei: tUtil.getValueDisplayWei(value),
|
||||
totalValueDisplay: tUtil.getTotalValueDisplay(totalValue),
|
||||
totalValueDisplayWei: tUtil.getTotalValueDisplayWei(totalValue)
|
||||
});
|
||||
}
|
||||
|
||||
render () {
|
||||
const { children, from, fromBalance, transaction, isTest } = this.props;
|
||||
const { children, from, fromBalance, gasStore, isTest, transaction } = this.props;
|
||||
|
||||
return (
|
||||
<div className={ styles.transaction }>
|
||||
@ -74,29 +65,74 @@ export default class TransactionMainDetails extends Component {
|
||||
<div className={ styles.method }>
|
||||
<MethodDecoding
|
||||
address={ from }
|
||||
transaction={ transaction }
|
||||
historic={ false } />
|
||||
historic={ false }
|
||||
transaction={
|
||||
gasStore
|
||||
? gasStore.overrideTransaction(transaction)
|
||||
: transaction
|
||||
} />
|
||||
{ this.renderEditGas() }
|
||||
</div>
|
||||
{ children }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderEditGas () {
|
||||
const { gasStore } = this.props;
|
||||
|
||||
if (!gasStore) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ styles.editButtonRow }>
|
||||
<Button
|
||||
icon={ <MapsLocalGasStation /> }
|
||||
label='Edit gas/gasPrice'
|
||||
onClick={ this.toggleGasEditor } />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderTotalValue () {
|
||||
const { id } = this.props;
|
||||
const { feeEth, totalValueDisplay, totalValueDisplayWei } = this.state;
|
||||
const labelId = `totalValue${id}`;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
className={ styles.total }
|
||||
data-effect='solid'
|
||||
data-for={ labelId }
|
||||
data-place='bottom'
|
||||
data-tip>
|
||||
{ totalValueDisplay } <small>ETH</small>
|
||||
</div>
|
||||
<ReactTooltip id={ labelId }>
|
||||
The value of the transaction including the mining fee is <strong>{ totalValueDisplayWei }</strong> <small>WEI</small>. <br />
|
||||
(This includes a mining fee of <strong>{ feeEth }</strong> <small>ETH</small>)
|
||||
</ReactTooltip>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderValue () {
|
||||
const { id } = this.props;
|
||||
const { valueDisplay, valueDisplayWei } = this.state;
|
||||
const labelId = `value${id}`;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
data-tip
|
||||
data-for={ 'value' + id }
|
||||
data-effect='solid'
|
||||
>
|
||||
data-for={ labelId }
|
||||
data-tip>
|
||||
<strong>{ valueDisplay } </strong>
|
||||
<small>ETH</small>
|
||||
</div>
|
||||
<ReactTooltip id={ 'value' + id }>
|
||||
<ReactTooltip id={ labelId }>
|
||||
The value of the transaction.<br />
|
||||
<strong>{ valueDisplayWei }</strong> <small>WEI</small>
|
||||
</ReactTooltip>
|
||||
@ -104,25 +140,17 @@ export default class TransactionMainDetails extends Component {
|
||||
);
|
||||
}
|
||||
|
||||
renderTotalValue () {
|
||||
const { id } = this.props;
|
||||
const { totalValueDisplay, totalValueDisplayWei, feeEth } = this.state;
|
||||
updateDisplayValues (value, totalValue) {
|
||||
this.setState({
|
||||
feeEth: tUtil.calcFeeInEth(totalValue, value),
|
||||
totalValueDisplay: tUtil.getTotalValueDisplay(totalValue),
|
||||
totalValueDisplayWei: tUtil.getTotalValueDisplayWei(totalValue),
|
||||
valueDisplay: tUtil.getValueDisplay(value),
|
||||
valueDisplayWei: tUtil.getValueDisplayWei(value)
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
data-tip
|
||||
data-for={ 'totalValue' + id }
|
||||
data-effect='solid'
|
||||
data-place='bottom'
|
||||
className={ styles.total }>
|
||||
{ totalValueDisplay } <small>ETH</small>
|
||||
</div>
|
||||
<ReactTooltip id={ 'totalValue' + id }>
|
||||
The value of the transaction including the mining fee is <strong>{ totalValueDisplayWei }</strong> <small>WEI</small>. <br />
|
||||
(This includes a mining fee of <strong>{ feeEth }</strong> <small>ETH</small>)
|
||||
</ReactTooltip>
|
||||
</div>
|
||||
);
|
||||
toggleGasEditor = () => {
|
||||
this.props.gasStore.setEditing(true);
|
||||
}
|
||||
}
|
||||
@ -14,4 +14,4 @@
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
export default from './TransactionPending';
|
||||
export default from './transactionPending';
|
||||
|
||||
@ -19,13 +19,9 @@
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
padding: 1em 0 1em;
|
||||
padding: 1.5em 1em 1.5em 0;
|
||||
|
||||
& > * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.container+.container {
|
||||
padding-top: 2em;
|
||||
}
|
||||
@ -17,89 +17,130 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
|
||||
import { Button, GasPriceEditor } from '~/ui';
|
||||
|
||||
import TransactionMainDetails from '../TransactionMainDetails';
|
||||
import TransactionPendingForm from '../TransactionPendingForm';
|
||||
|
||||
import styles from './TransactionPending.css';
|
||||
import styles from './transactionPending.css';
|
||||
|
||||
import * as tUtil from '../util/transaction';
|
||||
|
||||
@observer
|
||||
export default class TransactionPending extends Component {
|
||||
static contextTypes = {
|
||||
api: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
id: PropTypes.object.isRequired,
|
||||
transaction: PropTypes.shape({
|
||||
from: PropTypes.string.isRequired,
|
||||
value: PropTypes.object.isRequired, // wei hex
|
||||
gasPrice: PropTypes.object.isRequired, // wei hex
|
||||
gas: PropTypes.object.isRequired, // hex
|
||||
data: PropTypes.string, // hex
|
||||
to: PropTypes.string // undefined if it's a contract
|
||||
}).isRequired,
|
||||
className: PropTypes.string,
|
||||
date: PropTypes.instanceOf(Date).isRequired,
|
||||
gasLimit: PropTypes.object,
|
||||
id: PropTypes.object.isRequired,
|
||||
isSending: PropTypes.bool.isRequired,
|
||||
isTest: PropTypes.bool.isRequired,
|
||||
nonce: PropTypes.number,
|
||||
onConfirm: PropTypes.func.isRequired,
|
||||
onReject: PropTypes.func.isRequired,
|
||||
isSending: PropTypes.bool.isRequired,
|
||||
className: PropTypes.string,
|
||||
isTest: PropTypes.bool.isRequired,
|
||||
store: PropTypes.object.isRequired
|
||||
store: PropTypes.object.isRequired,
|
||||
transaction: PropTypes.shape({
|
||||
data: PropTypes.string,
|
||||
from: PropTypes.string.isRequired,
|
||||
gas: PropTypes.object.isRequired,
|
||||
gasPrice: PropTypes.object.isRequired,
|
||||
to: PropTypes.string,
|
||||
value: PropTypes.object.isRequired
|
||||
}).isRequired
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
isSending: false
|
||||
};
|
||||
gasStore = new GasPriceEditor.Store(this.context.api, {
|
||||
gas: this.props.transaction.gas.toFixed(),
|
||||
gasLimit: this.props.gasLimit,
|
||||
gasPrice: this.props.transaction.gasPrice.toFixed()
|
||||
});
|
||||
|
||||
componentWillMount () {
|
||||
const { transaction, store } = this.props;
|
||||
const { gas, gasPrice, value, from, to } = transaction;
|
||||
const { store, transaction } = this.props;
|
||||
const { from, gas, gasPrice, to, value } = transaction;
|
||||
|
||||
const fee = tUtil.getFee(gas, gasPrice); // BigNumber object
|
||||
const totalValue = tUtil.getTotalValue(fee, value);
|
||||
const gasPriceEthmDisplay = tUtil.getEthmFromWeiDisplay(gasPrice);
|
||||
const gasToDisplay = tUtil.getGasDisplay(gas);
|
||||
const totalValue = tUtil.getTotalValue(fee, value);
|
||||
|
||||
this.setState({ gasPriceEthmDisplay, totalValue, gasToDisplay });
|
||||
this.gasStore.setEthValue(value);
|
||||
store.fetchBalances([from, to]);
|
||||
}
|
||||
|
||||
render () {
|
||||
const { className, id, transaction, store, isTest } = this.props;
|
||||
const { from, value } = transaction;
|
||||
return this.gasStore.isEditing
|
||||
? this.renderGasEditor()
|
||||
: this.renderTransaction();
|
||||
}
|
||||
|
||||
renderTransaction () {
|
||||
const { className, id, isSending, isTest, store, transaction } = this.props;
|
||||
const { totalValue } = this.state;
|
||||
const { from, value } = transaction;
|
||||
|
||||
const fromBalance = store.balances[from];
|
||||
|
||||
return (
|
||||
<div className={ `${styles.container} ${className || ''}` }>
|
||||
<div className={ `${styles.container} ${className}` }>
|
||||
<TransactionMainDetails
|
||||
id={ id }
|
||||
value={ value }
|
||||
from={ from }
|
||||
isTest={ isTest }
|
||||
fromBalance={ fromBalance }
|
||||
className={ styles.transactionDetails }
|
||||
from={ from }
|
||||
fromBalance={ fromBalance }
|
||||
gasStore={ this.gasStore }
|
||||
id={ id }
|
||||
isTest={ isTest }
|
||||
totalValue={ totalValue }
|
||||
transaction={ transaction }
|
||||
totalValue={ totalValue } />
|
||||
value={ value } />
|
||||
<TransactionPendingForm
|
||||
address={ from }
|
||||
isSending={ this.props.isSending }
|
||||
isSending={ isSending }
|
||||
onConfirm={ this.onConfirm }
|
||||
onReject={ this.onReject }
|
||||
/>
|
||||
onReject={ this.onReject } />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
onConfirm = data => {
|
||||
const { id, transaction } = this.props;
|
||||
const { gasPrice } = transaction;
|
||||
const { password, wallet } = data;
|
||||
renderGasEditor () {
|
||||
const { className } = this.props;
|
||||
|
||||
this.props.onConfirm({ id, password, wallet, gasPrice });
|
||||
return (
|
||||
<div className={ `${styles.container} ${className}` }>
|
||||
<GasPriceEditor
|
||||
store={ this.gasStore }>
|
||||
<Button
|
||||
label='view transaction'
|
||||
onClick={ this.toggleGasEditor } />
|
||||
</GasPriceEditor>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
onConfirm = (data) => {
|
||||
const { id, transaction } = this.props;
|
||||
const { password, wallet } = data;
|
||||
const { gas, gasPrice } = this.gasStore.overrideTransaction(transaction);
|
||||
|
||||
this.props.onConfirm({
|
||||
gas,
|
||||
gasPrice,
|
||||
id,
|
||||
password,
|
||||
wallet
|
||||
});
|
||||
}
|
||||
|
||||
onReject = () => {
|
||||
this.props.onReject(this.props.id);
|
||||
}
|
||||
|
||||
toggleGasEditor = () => {
|
||||
this.gasStore.setEditing(false);
|
||||
}
|
||||
}
|
||||
@ -14,4 +14,4 @@
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
export default from './TransactionPendingFormConfirm';
|
||||
export default from './transactionPendingFormConfirm';
|
||||
|
||||
@ -22,7 +22,7 @@ import ReactTooltip from 'react-tooltip';
|
||||
|
||||
import { Form, Input, IdentityIcon } from '~/ui';
|
||||
|
||||
import styles from './TransactionPendingFormConfirm.css';
|
||||
import styles from './transactionPendingFormConfirm.css';
|
||||
|
||||
class TransactionPendingFormConfirm extends Component {
|
||||
static propTypes = {
|
||||
@ -35,14 +35,14 @@ class TransactionPendingFormConfirm extends Component {
|
||||
id = Math.random(); // for tooltip
|
||||
|
||||
state = {
|
||||
walletError: null,
|
||||
password: '',
|
||||
wallet: null,
|
||||
password: ''
|
||||
walletError: null
|
||||
}
|
||||
|
||||
render () {
|
||||
const { accounts, address, isSending } = this.props;
|
||||
const { password, walletError, wallet } = this.state;
|
||||
const { password, wallet, walletError } = this.state;
|
||||
const account = accounts[address] || {};
|
||||
const isExternal = !account.uuid;
|
||||
|
||||
@ -51,37 +51,54 @@ class TransactionPendingFormConfirm extends Component {
|
||||
: null;
|
||||
|
||||
const isWalletOk = !isExternal || (walletError === null && wallet !== null);
|
||||
const keyInput = isExternal ? this.renderKeyInput() : null;
|
||||
const keyInput = isExternal
|
||||
? this.renderKeyInput()
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div className={ styles.confirmForm }>
|
||||
<Form>
|
||||
{ keyInput }
|
||||
<Input
|
||||
hint={
|
||||
isExternal
|
||||
? 'decrypt the key'
|
||||
: 'unlock the account'
|
||||
}
|
||||
label={
|
||||
isExternal
|
||||
? 'Key Password'
|
||||
: 'Account Password'
|
||||
}
|
||||
onChange={ this.onModifyPassword }
|
||||
onKeyDown={ this.onKeyDown }
|
||||
label={ isExternal ? 'Key Password' : 'Account Password' }
|
||||
hint={ isExternal ? 'decrypt the key' : 'unlock the account' }
|
||||
type='password'
|
||||
value={ password } />
|
||||
<div className={ styles.passwordHint }>
|
||||
{ passwordHint }
|
||||
</div>
|
||||
<div
|
||||
data-tip
|
||||
data-place='bottom'
|
||||
data-for={ 'transactionConfirmForm' + this.id }
|
||||
data-effect='solid'
|
||||
>
|
||||
data-for={ `transactionConfirmForm${this.id}` }
|
||||
data-place='bottom'
|
||||
data-tip>
|
||||
<RaisedButton
|
||||
onTouchTap={ this.onConfirm }
|
||||
className={ styles.confirmButton }
|
||||
fullWidth
|
||||
primary
|
||||
disabled={ isSending || !isWalletOk }
|
||||
icon={ <IdentityIcon address={ address } button className={ styles.signerIcon } /> }
|
||||
label={ isSending ? 'Confirming...' : 'Confirm Transaction' }
|
||||
/>
|
||||
fullWidth
|
||||
icon={
|
||||
<IdentityIcon
|
||||
address={ address }
|
||||
button
|
||||
className={ styles.signerIcon } />
|
||||
}
|
||||
label={
|
||||
isSending
|
||||
? 'Confirming...'
|
||||
: 'Confirm Transaction'
|
||||
}
|
||||
onTouchTap={ this.onConfirm }
|
||||
primary />
|
||||
</div>
|
||||
{ this.renderTooltip() }
|
||||
</Form>
|
||||
@ -95,11 +112,10 @@ class TransactionPendingFormConfirm extends Component {
|
||||
return (
|
||||
<Input
|
||||
className={ styles.fileInput }
|
||||
onChange={ this.onKeySelect }
|
||||
error={ walletError }
|
||||
label='Select Local Key'
|
||||
type='file'
|
||||
/>
|
||||
onChange={ this.onKeySelect }
|
||||
type='file' />
|
||||
);
|
||||
}
|
||||
|
||||
@ -109,34 +125,37 @@ class TransactionPendingFormConfirm extends Component {
|
||||
}
|
||||
|
||||
return (
|
||||
<ReactTooltip id={ 'transactionConfirmForm' + this.id }>
|
||||
<ReactTooltip id={ `transactionConfirmForm${this.id}` }>
|
||||
Please provide a password for this account
|
||||
</ReactTooltip>
|
||||
);
|
||||
}
|
||||
|
||||
onKeySelect = evt => {
|
||||
onKeySelect = (event) => {
|
||||
const fileReader = new FileReader();
|
||||
fileReader.onload = e => {
|
||||
|
||||
fileReader.onload = (e) => {
|
||||
try {
|
||||
const wallet = JSON.parse(e.target.result);
|
||||
|
||||
this.setState({
|
||||
walletError: null,
|
||||
wallet: wallet
|
||||
wallet,
|
||||
walletError: null
|
||||
});
|
||||
} catch (e) {
|
||||
} catch (error) {
|
||||
this.setState({
|
||||
walletError: 'Given wallet file is invalid.',
|
||||
wallet: null
|
||||
wallet: null,
|
||||
walletError: 'Given wallet file is invalid.'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
fileReader.readAsText(evt.target.files[0]);
|
||||
fileReader.readAsText(event.target.files[0]);
|
||||
}
|
||||
|
||||
onModifyPassword = evt => {
|
||||
const password = evt.target.value;
|
||||
onModifyPassword = (event) => {
|
||||
const password = event.target.value;
|
||||
|
||||
this.setState({
|
||||
password
|
||||
});
|
||||
@ -150,8 +169,8 @@ class TransactionPendingFormConfirm extends Component {
|
||||
});
|
||||
}
|
||||
|
||||
onKeyDown = evt => {
|
||||
if (evt.which !== 13) {
|
||||
onKeyDown = (event) => {
|
||||
if (event.which !== 13) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -14,4 +14,4 @@
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
export default from './TransactionPendingFormReject';
|
||||
export default from './transactionPendingFormReject';
|
||||
|
||||
@ -18,7 +18,7 @@ import React, { Component, PropTypes } from 'react';
|
||||
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
|
||||
import styles from './TransactionPendingFormReject.css';
|
||||
import styles from './transactionPendingFormReject.css';
|
||||
|
||||
export default class TransactionPendingFormReject extends Component {
|
||||
|
||||
@ -14,4 +14,4 @@
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
export default from './TransactionPendingForm';
|
||||
export default from './transactionPendingForm';
|
||||
|
||||
@ -20,10 +20,9 @@ import BackIcon from 'material-ui/svg-icons/navigation/arrow-back';
|
||||
|
||||
import TransactionPendingFormConfirm from './TransactionPendingFormConfirm';
|
||||
import TransactionPendingFormReject from './TransactionPendingFormReject';
|
||||
import styles from './TransactionPendingForm.css';
|
||||
import styles from './transactionPendingForm.css';
|
||||
|
||||
export default class TransactionPendingForm extends Component {
|
||||
|
||||
static propTypes = {
|
||||
address: PropTypes.string.isRequired,
|
||||
isSending: PropTypes.bool.isRequired,
|
||||
@ -60,8 +59,8 @@ export default class TransactionPendingForm extends Component {
|
||||
return (
|
||||
<TransactionPendingFormConfirm
|
||||
address={ address }
|
||||
onConfirm={ onConfirm }
|
||||
isSending={ isSending } />
|
||||
isSending={ isSending }
|
||||
onConfirm={ onConfirm } />
|
||||
);
|
||||
}
|
||||
|
||||
@ -72,14 +71,13 @@ export default class TransactionPendingForm extends Component {
|
||||
if (!isRejectOpen) {
|
||||
html = <span>reject transaction</span>;
|
||||
} else {
|
||||
html = <span><BackIcon />I've changed my mind</span>;
|
||||
html = <span><BackIcon />{ "I've changed my mind" }</span>;
|
||||
}
|
||||
|
||||
return (
|
||||
<a
|
||||
onClick={ this.onToggleReject }
|
||||
className={ styles.rejectToggle }
|
||||
>
|
||||
onClick={ this.onToggleReject }>
|
||||
{ html }
|
||||
</a>
|
||||
);
|
||||
@ -87,7 +85,9 @@ export default class TransactionPendingForm extends Component {
|
||||
|
||||
onToggleReject = () => {
|
||||
const { isRejectOpen } = this.state;
|
||||
this.setState({ isRejectOpen: !isRejectOpen });
|
||||
}
|
||||
|
||||
this.setState({
|
||||
isRejectOpen: !isRejectOpen
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -14,4 +14,4 @@
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
export default from './TxHashLink';
|
||||
export default from './txHashLink';
|
||||
|
||||
@ -19,22 +19,21 @@ import React, { Component, PropTypes } from 'react';
|
||||
import { txLink } from '~/3rdparty/etherscan/links';
|
||||
|
||||
export default class TxHashLink extends Component {
|
||||
|
||||
static propTypes = {
|
||||
txHash: PropTypes.string.isRequired,
|
||||
isTest: PropTypes.bool.isRequired,
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string
|
||||
className: PropTypes.string,
|
||||
isTest: PropTypes.bool.isRequired,
|
||||
txHash: PropTypes.string.isRequired
|
||||
}
|
||||
|
||||
render () {
|
||||
const { children, txHash, className, isTest } = this.props;
|
||||
const { children, className, isTest, txHash } = this.props;
|
||||
|
||||
return (
|
||||
<a
|
||||
className={ className }
|
||||
href={ txLink(txHash, isTest) }
|
||||
target='_blank'
|
||||
className={ className }>
|
||||
target='_blank'>
|
||||
{ children || txHash }
|
||||
</a>
|
||||
);
|
||||
@ -17,16 +17,22 @@
|
||||
|
||||
@import '../../_layout.css';
|
||||
|
||||
.signer {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
width: $embedWidth;
|
||||
.info {
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
.none {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 1em 0;
|
||||
.request {
|
||||
&:nth-child(even) {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
}
|
||||
|
||||
.signer {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
width: $embedWidth;
|
||||
}
|
||||
|
||||
@ -33,15 +33,16 @@ class Embedded extends Component {
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
signer: PropTypes.shape({
|
||||
pending: PropTypes.array.isRequired,
|
||||
finished: PropTypes.array.isRequired
|
||||
}).isRequired,
|
||||
actions: PropTypes.shape({
|
||||
startConfirmRequest: PropTypes.func.isRequired,
|
||||
startRejectRequest: PropTypes.func.isRequired
|
||||
}).isRequired,
|
||||
isTest: PropTypes.bool.isRequired
|
||||
gasLimit: PropTypes.object.isRequired,
|
||||
isTest: PropTypes.bool.isRequired,
|
||||
signer: PropTypes.shape({
|
||||
finished: PropTypes.array.isRequired,
|
||||
pending: PropTypes.array.isRequired
|
||||
}).isRequired
|
||||
};
|
||||
|
||||
store = new Store(this.context.api);
|
||||
@ -78,20 +79,21 @@ class Embedded extends Component {
|
||||
}
|
||||
|
||||
renderPending = (data) => {
|
||||
const { actions, isTest } = this.props;
|
||||
const { payload, id, isSending, date } = data;
|
||||
const { actions, gasLimit, isTest } = this.props;
|
||||
const { date, id, isSending, payload } = data;
|
||||
|
||||
return (
|
||||
<RequestPending
|
||||
className={ styles.request }
|
||||
date={ date }
|
||||
gasLimit={ gasLimit }
|
||||
id={ id }
|
||||
isSending={ isSending }
|
||||
isTest={ isTest }
|
||||
key={ id }
|
||||
onConfirm={ actions.startConfirmRequest }
|
||||
onReject={ actions.startRejectRequest }
|
||||
isSending={ isSending || false }
|
||||
key={ id }
|
||||
id={ id }
|
||||
payload={ payload }
|
||||
date={ date }
|
||||
isTest={ isTest }
|
||||
store={ this.store }
|
||||
/>
|
||||
);
|
||||
@ -103,13 +105,14 @@ class Embedded extends Component {
|
||||
}
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const { isTest } = state.nodeStatus;
|
||||
const { gasLimit, isTest } = state.nodeStatus;
|
||||
const { actions, signer } = state;
|
||||
|
||||
return {
|
||||
actions,
|
||||
signer,
|
||||
isTest
|
||||
gasLimit,
|
||||
isTest,
|
||||
signer
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@ -14,4 +14,4 @@
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
export default from './RequestsPage';
|
||||
export default from './requestsPage';
|
||||
|
||||
@ -18,3 +18,9 @@
|
||||
.noRequestsMsg {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.request {
|
||||
&:nth-child(odd) {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
}
|
||||
@ -26,7 +26,7 @@ import { Container, Page, TxList } from '~/ui';
|
||||
|
||||
import RequestPending from '../../components/RequestPending';
|
||||
|
||||
import styles from './RequestsPage.css';
|
||||
import styles from './requestsPage.css';
|
||||
|
||||
@observer
|
||||
class RequestsPage extends Component {
|
||||
@ -35,15 +35,16 @@ class RequestsPage extends Component {
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
signer: PropTypes.shape({
|
||||
pending: PropTypes.array.isRequired,
|
||||
finished: PropTypes.array.isRequired
|
||||
}).isRequired,
|
||||
actions: PropTypes.shape({
|
||||
startConfirmRequest: PropTypes.func.isRequired,
|
||||
startRejectRequest: PropTypes.func.isRequired
|
||||
}).isRequired,
|
||||
isTest: PropTypes.bool.isRequired
|
||||
gasLimit: PropTypes.object.isRequired,
|
||||
isTest: PropTypes.bool.isRequired,
|
||||
signer: PropTypes.shape({
|
||||
pending: PropTypes.array.isRequired,
|
||||
finished: PropTypes.array.isRequired
|
||||
}).isRequired
|
||||
};
|
||||
|
||||
store = new Store(this.context.api, true);
|
||||
@ -104,19 +105,21 @@ class RequestsPage extends Component {
|
||||
}
|
||||
|
||||
renderPending = (data) => {
|
||||
const { actions, isTest } = this.props;
|
||||
const { payload, id, isSending, date } = data;
|
||||
const { actions, gasLimit, isTest } = this.props;
|
||||
const { date, id, isSending, payload } = data;
|
||||
|
||||
return (
|
||||
<RequestPending
|
||||
className={ styles.request }
|
||||
date={ date }
|
||||
gasLimit={ gasLimit }
|
||||
id={ id }
|
||||
isSending={ isSending }
|
||||
isTest={ isTest }
|
||||
key={ id }
|
||||
onConfirm={ actions.startConfirmRequest }
|
||||
onReject={ actions.startRejectRequest }
|
||||
isSending={ isSending || false }
|
||||
key={ id }
|
||||
id={ id }
|
||||
payload={ payload }
|
||||
date={ date }
|
||||
isTest={ isTest }
|
||||
store={ this.store }
|
||||
/>
|
||||
);
|
||||
@ -124,13 +127,14 @@ class RequestsPage extends Component {
|
||||
}
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const { isTest } = state.nodeStatus;
|
||||
const { gasLimit, isTest } = state.nodeStatus;
|
||||
const { actions, signer } = state;
|
||||
|
||||
return {
|
||||
actions,
|
||||
signer,
|
||||
isTest
|
||||
gasLimit,
|
||||
isTest,
|
||||
signer
|
||||
};
|
||||
}
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
|
||||
const webpack = require('webpack');
|
||||
const path = require('path');
|
||||
const ReactIntlAggregatePlugin = require('react-intl-aggregate-webpack-plugin');
|
||||
const WebpackErrorNotificationPlugin = require('webpack-error-notification');
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
@ -163,7 +164,15 @@ module.exports = {
|
||||
}));
|
||||
|
||||
if (!isProd) {
|
||||
const DEST_I18N = path.join(__dirname, '..', DEST, 'i18n');
|
||||
|
||||
plugins.push(
|
||||
new ReactIntlAggregatePlugin({
|
||||
messagesPattern: DEST_I18N + '/src/**/*.json',
|
||||
aggregateOutputDir: DEST_I18N + '/i18n/',
|
||||
aggregateFilename: 'en'
|
||||
}),
|
||||
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
filename: 'commons.[hash:10].js',
|
||||
name: 'commons',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user