Initial new UI source code import (#2607)

* address -> name mappings * expanding, loading all coin details * send use only actual BasicCoin tokens registered (any reg) * sending token & accounts * form styling updates * send form layout in place * coin send working as expected * api subscriptions on multiple addresses * bring in events * simplify * basic events display in-place, functionally complete * basic functionality in-place * fix horrible event address issue * rwork display of events slightly * test TLA availability * table for owner -> tokens * fix signature lookup address * fix signature lookup address * basic overview styling * txhash links * page layout adjustments * background import * adjust colors * no global registration, simplify color selection * updated styling * connection dialog for "busy connecting" * initial token connection - WIP * init token updates take place * basic test for manual token * rework connection display * allow updates of the secure token * first stab at making the build build * update runner tags * fix linting issues * skip tests requiring network (should be e2e, TODO) * re-enable javascript tag/runner * release push does the trick * push to any branch, CI name * javscript-test runner as well * swap dependencies build requires test * revert stages swap * retrieve images associated with tokens * remove js build deps order * null image when hash = 0x0 * 6x64 images (hashes for registries) * don't pass tokens as prop to IdentityIcon * check images against content hash pictures * cleanup signer after connection changes * fix naming typo * display unknownImages for balances (not available as content hash) * unknownImage for transfer dialog * basic githubhint layout * single input for commit/filename * ethcore_hashContent call * lookup hash * registration in place * fixes * events is using a proper table * pass value through as-is * stop wrongly using main app IdentityIcon * NEVER export class instance functions * alignment back to normal * typo in definition * set & get images working (mostly) * show content retrieval info * set exitcode via || * use javascript:latest images * disable npm progress bar * rename phase I * rename phase II * only send build output to GitHub on major branches * also run the build step as part of the test (until comprehensive) * ci-specific build (no webpack progress) * allow for account creation via recovery phrase * display account uuid (where available), closes #2546 * connection dialog now shows up in dapps as well, closes #2538 * token images show up as expected * IdentityName component added and deployed * fix padding tests * adjust tests to map to stricter 0x-prefixed hex * render names via common component for the address -> name * split lint into seperate script (early exit) * test phases changed to lint, test & pack * pack part of test phase * remove files marked for deletion (cleanup) * Signer cleanups, start moving in the direction of the rest * add personal signer methods * basic signer request subscription * don't poll blockNumber when not connected * missing return, creating massive ws queue backlogs * ΞTH -> ETH * fix failing tests * registry uses setAddress to actually set addresses now * bytes mapping operates on lowerCase hex strings * sha3 ids for each application * add dappreg to list of contracts * adjust alignment of queries * show gas estimation log * abi with payable for register function * add key as required * image retrieval from dappreg * use proper Image urls * embed and link apps from Parity, retrieved via /api/apps * filter apps that has been replaced * proxy entry for parity-utils * add basiccoin abi * add support for fallback abi type * capture constructor paramaters * merge master into js * move images to assets/images/ * add font assets * import fonts as part of build * don't inline woff files * Revert "merge master into js" This reverts commit cfcfa81bd26f1b3cbc748d3afa1eb5c670b363fe. * remove unused npm packages * information on gas estimates (like almost everywhere else) * don't pass gas & gasPrice to estimation * display account passwordhint when available * signer subscriptions based on polling & function trapping * pending requests retrieved via jsapi * update signer middleware * remove all web3 instances * remove web3 package * last web3 dependencies removed * no need to toChecksumAddress - api takes care of it * expand description for personal_confirmRequest * Signer conversion from web3 -> parity.js completed * explicit in no return * green circle background * remove generated background * convert /api/* paths to localhost:8080/api/* paths (hard-coded, temporary) * change dapps to load from localhost:8080/ui/* * remove dangling web3 files * update manager test for signer * /api/ping -> / * additional token images * additional token images * add missing styles.css for 8180 error pages * cater for txhash returning null/empty object * adjust output directories * Release merge with origin with ours strategy * additional token images * cater for development server * s/localhost/127.0.0.1/ (cater for origin) * Fix address selection for contract deployment * Adjust z-index for error overlay * better text on unique background pattern * fix signer rejections * Don't allow gavcoin transfer with no balance * fix txhash rendering in signer * remove unnecessary ParityBackground * script to update js-precompiled * Redirect from :8080 to :8180 * Remove extra return * Dapp logo images
2016-10-18 11:52:56 +02:00
parent 6c7af57529
commit 1e6a2cb378
969 changed files with 57315 additions and 0 deletions
--- a/js/src/modals/DeployContract/DetailsStep/detailsStep.js
+++ b/js/src/modals/DeployContract/DetailsStep/detailsStep.js
@@ -0,0 +1,192 @@
+// 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 { AddressSelect, Form, Input, InputAddressSelect } from '../../../ui';
+import { validateAbi } from '../../../util/validation';
+
+import styles from '../deployContract.css';
+
+export default class DetailsStep extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    accounts: PropTypes.object.isRequired,
+    abi: PropTypes.string,
+    abiError: PropTypes.string,
+    code: PropTypes.string,
+    codeError: PropTypes.string,
+    description: PropTypes.string,
+    descriptionError: PropTypes.string,
+    fromAddress: PropTypes.string,
+    fromAddressError: PropTypes.string,
+    name: PropTypes.string,
+    nameError: PropTypes.string,
+    params: PropTypes.array,
+    paramsError: PropTypes.array,
+    onAbiChange: PropTypes.func.isRequired,
+    onCodeChange: PropTypes.func.isRequired,
+    onFromAddressChange: PropTypes.func.isRequired,
+    onDescriptionChange: PropTypes.func.isRequired,
+    onNameChange: PropTypes.func.isRequired,
+    onParamsChange: PropTypes.func.isRequired
+  }
+
+  state = {
+    inputs: []
+  }
+
+  render () {
+    const { accounts } = this.props;
+    const { abi, abiError, code, codeError, fromAddress, fromAddressError, name, nameError } = this.props;
+
+    return (
+      <Form>
+        <AddressSelect
+          label='from account (contract owner)'
+          hint='the owner account for this contract'
+          value={ fromAddress }
+          error={ fromAddressError }
+          accounts={ accounts }
+          onChange={ this.onFromAddressChange } />
+        <Input
+          label='contract name'
+          hint='a name for the deployed contract'
+          error={ nameError }
+          value={ name }
+          onSubmit={ this.onNameChange } />
+        <Input
+          label='abi'
+          hint='the abi of the contract to deploy'
+          error={ abiError }
+          value={ abi }
+          onSubmit={ this.onAbiChange } />
+        <Input
+          label='code'
+          hint='the compiled code of the contract to deploy'
+          error={ codeError }
+          value={ code }
+          onSubmit={ this.onCodeChange } />
+        { this.renderConstructorInputs() }
+      </Form>
+    );
+  }
+
+  renderConstructorInputs () {
+    const { accounts, params, paramsError } = this.props;
+    const { inputs } = this.state;
+
+    if (!inputs || !inputs.length) {
+      return null;
+    }
+
+    return inputs.map((input, index) => {
+      const onChange = (event, value) => this.onParamChange(index, value);
+      const onSubmit = (value) => this.onParamChange(index, value);
+      const label = `${input.name}: ${input.type}`;
+      let inputBox = null;
+
+      switch (input.type) {
+        case 'address':
+          inputBox = (
+            <InputAddressSelect
+              accounts={ accounts }
+              editing
+              label={ label }
+              value={ params[index] }
+              error={ paramsError[index] }
+              onChange={ onChange } />
+          );
+          break;
+
+        default:
+          inputBox = (
+            <Input
+              label={ label }
+              value={ params[index] }
+              error={ paramsError[index] }
+              onSubmit={ onSubmit } />
+            );
+          break;
+      }
+
+      return (
+        <div key={ index } className={ styles.funcparams }>
+          { inputBox }
+        </div>
+      );
+    });
+  }
+
+  onFromAddressChange = (event, fromAddress) => {
+    const { onFromAddressChange } = this.props;
+
+    onFromAddressChange(fromAddress);
+  }
+
+  onNameChange = (name) => {
+    const { onNameChange } = this.props;
+
+    onNameChange(name);
+  }
+
+  onParamChange = (index, value) => {
+    const { params, onParamsChange } = this.props;
+
+    params[index] = value;
+    onParamsChange(params);
+  }
+
+  onAbiChange = (abi) => {
+    const { api } = this.context;
+    const { onAbiChange, onParamsChange } = this.props;
+    const { abiError, abiParsed } = validateAbi(abi, api);
+
+    if (!abiError) {
+      const { inputs } = abiParsed.find((method) => method.type === 'constructor') || { inputs: [] };
+      const params = [];
+
+      inputs.forEach((input) => {
+        switch (input.type) {
+          case 'string':
+            params.push('');
+            break;
+
+          default:
+            params.push('0x');
+            break;
+        }
+      });
+
+      onParamsChange(params);
+      this.setState({ inputs });
+    } else {
+      onParamsChange([]);
+      this.setState({ inputs: [] });
+    }
+
+    onAbiChange(abi);
+  }
+
+  onCodeChange = (code) => {
+    const { onCodeChange } = this.props;
+
+    onCodeChange(code);
+  }
+}
--- a/js/src/modals/DeployContract/DetailsStep/index.js
+++ b/js/src/modals/DeployContract/DetailsStep/index.js
@@ -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 './detailsStep';
--- a/js/src/modals/DeployContract/ErrorStep/errorStep.js
+++ b/js/src/modals/DeployContract/ErrorStep/errorStep.js
@@ -0,0 +1,35 @@
+// 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 styles from '../deployContract.css';
+
+export default class ErrorStep extends Component {
+  static propTypes = {
+    error: PropTypes.object
+  }
+
+  render () {
+    const { error } = this.props;
+
+    return (
+      <div className={ styles.center }>
+        The contract deployment failed: { error.message }
+      </div>
+    );
+  }
+}
--- a/js/src/modals/DeployContract/ErrorStep/index.js
+++ b/js/src/modals/DeployContract/ErrorStep/index.js
@@ -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 './errorStep';
--- a/js/src/modals/DeployContract/deployContract.css
+++ b/js/src/modals/DeployContract/deployContract.css
@@ -0,0 +1,33 @@
+/* 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/>.
+*/
+
+.center {
+  text-align: center;
+}
+
+.address {
+  vertical-align: top;
+  display: inline-block;
+}
+
+.identityicon {
+  margin: -8px 0.5em;
+}
+
+.funcparams {
+  padding-left: 3em;
+}
--- a/js/src/modals/DeployContract/deployContract.js
+++ b/js/src/modals/DeployContract/deployContract.js
@@ -0,0 +1,275 @@
+// 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 ActionDoneAll from 'material-ui/svg-icons/action/done-all';
+import ContentClear from 'material-ui/svg-icons/content/clear';
+
+import { BusyStep, CompletedStep, Button, IdentityIcon, Modal, TxHash } from '../../ui';
+import { ERRORS, validateAbi, validateCode, validateName } from '../../util/validation';
+
+import DetailsStep from './DetailsStep';
+import ErrorStep from './ErrorStep';
+
+import styles from './deployContract.css';
+
+const steps = ['contract details', 'deployment', 'completed'];
+
+export default class DeployContract extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired,
+    store: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    accounts: PropTypes.object.isRequired,
+    onClose: PropTypes.func.isRequired
+  }
+
+  state = {
+    abi: '',
+    abiError: ERRORS.invalidAbi,
+    code: '',
+    codeError: ERRORS.invalidCode,
+    deployState: '',
+    description: '',
+    descriptionError: null,
+    fromAddress: Object.keys(this.props.accounts)[0],
+    fromAddressError: null,
+    name: '',
+    nameError: ERRORS.invalidName,
+    params: [],
+    paramsError: [],
+    step: 0,
+    deployError: null
+  }
+
+  render () {
+    const { step, deployError } = this.state;
+
+    return (
+      <Modal
+        actions={ this.renderDialogActions() }
+        current={ step }
+        steps={ deployError ? null : steps }
+        title={ deployError ? 'deployment failed' : null }
+        waiting={ [1] }
+        visible>
+        { this.renderStep() }
+      </Modal>
+    );
+  }
+
+  renderDialogActions () {
+    const { deployError, abiError, codeError, nameError, descriptionError, fromAddressError, fromAddress, step } = this.state;
+    const isValid = !nameError && !fromAddressError && !descriptionError && !abiError && !codeError;
+
+    const cancelBtn = (
+      <Button
+        icon={ <ContentClear /> }
+        label='Cancel'
+        onClick={ this.onClose } />
+    );
+
+    if (deployError) {
+      return cancelBtn;
+    }
+
+    switch (step) {
+      case 0:
+        return [
+          cancelBtn,
+          <Button
+            disabled={ !isValid }
+            icon={ <IdentityIcon button address={ fromAddress } /> }
+            label='Create'
+            onClick={ this.onDeployStart } />
+        ];
+
+      case 1:
+        return [
+          cancelBtn
+        ];
+
+      case 2:
+        return [
+          <Button
+            icon={ <ActionDoneAll /> }
+            label='Close'
+            onClick={ this.onClose } />
+        ];
+    }
+  }
+
+  renderStep () {
+    const { accounts } = this.props;
+    const { address, deployError, step, deployState, txhash } = this.state;
+
+    if (deployError) {
+      return (
+        <ErrorStep error={ deployError } />
+      );
+    }
+
+    switch (step) {
+      case 0:
+        return (
+          <DetailsStep
+            { ...this.state }
+            accounts={ accounts }
+            onAbiChange={ this.onAbiChange }
+            onCodeChange={ this.onCodeChange }
+            onFromAddressChange={ this.onFromAddressChange }
+            onDescriptionChange={ this.onDescriptionChange }
+            onNameChange={ this.onNameChange }
+            onParamsChange={ this.onParamsChange } />
+        );
+
+      case 1:
+        const body = txhash
+          ? <TxHash hash={ txhash } />
+          : null;
+        return (
+          <BusyStep
+            title='The deployment is currently in progress'
+            state={ deployState }>
+            { body }
+          </BusyStep>
+        );
+
+      case 2:
+        return (
+          <CompletedStep>
+            <div>Your contract has been deployed at</div>
+            <div>
+              <IdentityIcon address={ address } inline center className={ styles.identityicon } />
+              <div className={ styles.address }>{ address }</div>
+            </div>
+            <TxHash hash={ txhash } />
+          </CompletedStep>
+        );
+    }
+  }
+
+  onDescriptionChange = (description) => {
+    this.setState({ description, descriptionError: null });
+  }
+
+  onFromAddressChange = (fromAddress) => {
+    const { api } = this.context;
+    const fromAddressError = api.util.isAddressValid(fromAddress)
+      ? null
+      : 'a valid account as the contract owner needs to be selected';
+
+    this.setState({ fromAddress, fromAddressError });
+  }
+
+  onNameChange = (name) => {
+    this.setState(validateName(name));
+  }
+
+  onParamsChange = (params) => {
+    this.setState({ params });
+  }
+
+  onAbiChange = (abi) => {
+    const { api } = this.context;
+
+    this.setState(validateAbi(abi, api));
+  }
+
+  onCodeChange = (code) => {
+    const { api } = this.context;
+
+    this.setState(validateCode(code, api));
+  }
+
+  onDeployStart = () => {
+    const { api, store } = this.context;
+    const { abiParsed, code, description, name, params, fromAddress } = this.state;
+    const options = {
+      data: code,
+      from: fromAddress
+    };
+
+    this.setState({ step: 1 });
+
+    api
+      .newContract(abiParsed)
+      .deploy(options, params, this.onDeploymentState)
+      .then((address) => {
+        return Promise.all([
+          api.personal.setAccountName(address, name),
+          api.personal.setAccountMeta(address, {
+            abi: abiParsed,
+            contract: true,
+            deleted: false,
+            description
+          })
+        ])
+        .then(() => {
+          console.log(`contract deployed at ${address}`);
+          this.setState({ step: 2, address });
+        });
+      })
+      .catch((error) => {
+        console.error('error deploying contract', error);
+        this.setState({ deployError: error });
+        store.dispatch({ type: 'newError', error });
+      });
+  }
+
+  onDeploymentState = (error, data) => {
+    if (error) {
+      console.error('onDeploymentState', error);
+      return;
+    }
+
+    console.log('onDeploymentState', data);
+
+    switch (data.state) {
+      case 'estimateGas':
+      case 'postTransaction':
+        this.setState({ deployState: 'Preparing transaction for network transmission' });
+        return;
+
+      case 'checkRequest':
+        this.setState({ deployState: 'Waiting for confirmation of the transaction in the Parity Secure Signer' });
+        return;
+
+      case 'getTransactionReceipt':
+        this.setState({ deployState: 'Waiting for the contract deployment transaction receipt', txhash: data.txhash });
+        return;
+
+      case 'hasReceipt':
+      case 'getCode':
+        this.setState({ deployState: 'Validating the deployed contract code' });
+        return;
+
+      case 'completed':
+        this.setState({ deployState: 'The contract deployment has been completed' });
+        return;
+
+      default:
+        console.error('Unknow contract deployment state', data);
+        return;
+    }
+  }
+
+  onClose = () => {
+    this.props.onClose();
+  }
+}
--- a/js/src/modals/DeployContract/index.js
+++ b/js/src/modals/DeployContract/index.js
@@ -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 './deployContract';