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
This commit is contained in:
Jaco Greeff
Gav Wood
320
js/src/dapps/basiccoin/Deploy/Deployment/deployment.js
Normal file
320
js/src/dapps/basiccoin/Deploy/Deployment/deployment.js
Normal file
@@ -0,0 +1,320 @@
|
||||
// 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 { api } from '../../parity';
|
||||
import AddressSelect from '../../AddressSelect';
|
||||
import Container from '../../Container';
|
||||
import styles from './deployment.css';
|
||||
|
||||
const ERRORS = {
|
||||
name: 'specify a valid name >2 & <32 characters',
|
||||
tla: 'specify a valid TLA, 3 characters in length',
|
||||
usedtla: 'the TLA used is not available for registration',
|
||||
supply: 'supply needs to be valid >999 & <1 trillion'
|
||||
};
|
||||
|
||||
export default class Deployment extends Component {
|
||||
static contextTypes = {
|
||||
accounts: PropTypes.object.isRequired,
|
||||
router: PropTypes.object.isRequired,
|
||||
managerInstance: PropTypes.object.isRequired,
|
||||
registryInstance: PropTypes.object.isRequired,
|
||||
tokenregInstance: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
state = {
|
||||
base: null,
|
||||
deployBusy: false,
|
||||
deployDone: false,
|
||||
deployError: null,
|
||||
deployState: null,
|
||||
globalReg: false,
|
||||
globalFee: 0,
|
||||
globalFeeText: '1.000',
|
||||
fromAddress: null,
|
||||
name: '',
|
||||
nameError: ERRORS.name,
|
||||
tla: '',
|
||||
tlaError: ERRORS.tla,
|
||||
totalSupply: '5000000',
|
||||
totalSupplyError: null,
|
||||
signerRequestId: null,
|
||||
txHash: null
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
const { managerInstance, tokenregInstance } = this.context;
|
||||
|
||||
Promise
|
||||
.all([
|
||||
managerInstance.base.call(),
|
||||
tokenregInstance.fee.call()
|
||||
])
|
||||
.then(([base, globalFee]) => {
|
||||
this.setState({
|
||||
base,
|
||||
baseText: base.toFormat(0),
|
||||
globalFee,
|
||||
globalFeeText: api.util.fromWei(globalFee).toFormat(3)
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
render () {
|
||||
const { deployBusy } = this.state;
|
||||
|
||||
return deployBusy
|
||||
? this.renderDeploying()
|
||||
: this.renderForm();
|
||||
}
|
||||
|
||||
renderDeploying () {
|
||||
const { deployDone, deployError, deployState } = this.state;
|
||||
|
||||
if (deployDone) {
|
||||
return (
|
||||
<Container>
|
||||
<div className={ styles.statusHeader }>
|
||||
Your token has been deployed
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
if (deployError) {
|
||||
return (
|
||||
<Container>
|
||||
<div className={ styles.statusHeader }>
|
||||
Your deployment has encountered an error
|
||||
</div>
|
||||
<div className={ styles.statusError }>
|
||||
{ deployError }
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<div className={ styles.statusHeader }>
|
||||
Your token is currently being deployed to the network
|
||||
</div>
|
||||
<div className={ styles.statusState }>
|
||||
{ deployState }
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
renderForm () {
|
||||
const { accounts } = this.context;
|
||||
const { baseText, name, nameError, tla, tlaError, totalSupply, totalSupplyError } = this.state;
|
||||
const hasError = !!(nameError || tlaError || totalSupplyError);
|
||||
const error = `${styles.input} ${styles.error}`;
|
||||
const addresses = Object.keys(accounts).filter((address) => accounts[address].uuid);
|
||||
|
||||
// <div className={ styles.input }>
|
||||
// <label>global registration</label>
|
||||
// <select onChange={ this.onChangeRegistrar }>
|
||||
// <option value='no'>No, only for me</option>
|
||||
// <option value='yes'>Yes, for everybody</option>
|
||||
// </select>
|
||||
// <div className={ styles.hint }>
|
||||
// register on network (fee: { globalFeeText }ETH)
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<div className={ styles.form }>
|
||||
<div className={ styles.input }>
|
||||
<label>deployment account</label>
|
||||
<AddressSelect
|
||||
addresses={ addresses }
|
||||
onChange={ this.onChangeFrom } />
|
||||
<div className={ styles.hint }>
|
||||
the owner account to eploy from
|
||||
</div>
|
||||
</div>
|
||||
<div className={ nameError ? error : styles.input }>
|
||||
<label>token name</label>
|
||||
<input
|
||||
value={ name }
|
||||
name='name'
|
||||
onChange={ this.onChangeName } />
|
||||
<div className={ styles.hint }>
|
||||
{ nameError || 'an identifying name for the token' }
|
||||
</div>
|
||||
</div>
|
||||
<div className={ tlaError ? error : styles.input }>
|
||||
<label>token TLA</label>
|
||||
<input
|
||||
className={ styles.small }
|
||||
name='tla'
|
||||
value={ tla }
|
||||
onChange={ this.onChangeTla } />
|
||||
<div className={ styles.hint }>
|
||||
{ tlaError || 'unique network acronym for this token' }
|
||||
</div>
|
||||
</div>
|
||||
<div className={ totalSupplyError ? error : styles.input }>
|
||||
<label>token supply</label>
|
||||
<input
|
||||
type='number'
|
||||
min='1000'
|
||||
max='999999999999'
|
||||
name='totalSupply'
|
||||
value={ totalSupply }
|
||||
onChange={ this.onChangeSupply } />
|
||||
<div className={ styles.hint }>
|
||||
{ totalSupplyError || `number of tokens (base: ${baseText})` }
|
||||
</div>
|
||||
</div>
|
||||
<div className={ styles.input }>
|
||||
<label />
|
||||
<div className={ styles.buttonRow }>
|
||||
<div
|
||||
className={ styles.button }
|
||||
disabled={ hasError }
|
||||
onClick={ this.onDeploy }>
|
||||
Deploy Token
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
onChangeFrom = (event) => {
|
||||
const fromAddress = event.target.value;
|
||||
|
||||
this.setState({ fromAddress });
|
||||
}
|
||||
|
||||
onChangeName = (event) => {
|
||||
const name = event.target.value;
|
||||
const nameError = name && (name.length > 2) && (name.length < 32)
|
||||
? null
|
||||
: ERRORS.name;
|
||||
|
||||
this.setState({ name, nameError });
|
||||
}
|
||||
|
||||
onChangeRegistrar = (event) => {
|
||||
this.setState({ globalReg: event.target.value === 'yes' }, this.testTlaAvailability);
|
||||
}
|
||||
|
||||
onChangeSupply = (event) => {
|
||||
const totalSupply = parseInt(event.target.value, 10);
|
||||
const totalSupplyError = isFinite(totalSupply) && totalSupply > 999
|
||||
? null
|
||||
: ERRORS.supply;
|
||||
|
||||
this.setState({ totalSupply, totalSupplyError });
|
||||
}
|
||||
|
||||
onChangeTla = (event) => {
|
||||
const _tla = event.target.value;
|
||||
const tla = _tla && (_tla.length > 3)
|
||||
? _tla.substr(0, 3)
|
||||
: _tla;
|
||||
const tlaError = tla && (tla.length === 3)
|
||||
? null
|
||||
: ERRORS.tla;
|
||||
|
||||
this.setState({ tla, tlaError }, this.testTlaAvailability);
|
||||
}
|
||||
|
||||
testTlaAvailability = () => {
|
||||
const { registryInstance, tokenregInstance } = this.context;
|
||||
const { globalReg, tla, tlaError } = this.state;
|
||||
const tokenreg = globalReg ? tokenregInstance : registryInstance;
|
||||
|
||||
if (tlaError && tlaError !== ERRORS.usedtla) {
|
||||
return;
|
||||
}
|
||||
|
||||
tokenreg
|
||||
.fromTLA.call({}, [tla])
|
||||
.then(([id, addr, base, name, owner]) => {
|
||||
if (owner !== '0x0000000000000000000000000000000000000000') {
|
||||
this.setState({ tlaError: ERRORS.usedtla });
|
||||
} else if (tlaError === ERRORS.usedtla) {
|
||||
this.setState({ tlaError: null });
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log('testTlaAvailability', error);
|
||||
});
|
||||
}
|
||||
|
||||
onDeploy = () => {
|
||||
const { managerInstance, registryInstance, tokenregInstance } = this.context;
|
||||
const { base, deployBusy, fromAddress, globalReg, globalFee, name, nameError, tla, tlaError, totalSupply, totalSupplyError } = this.state;
|
||||
const hasError = !!(nameError || tlaError || totalSupplyError);
|
||||
|
||||
if (hasError || deployBusy) {
|
||||
return;
|
||||
}
|
||||
|
||||
const tokenreg = (globalReg ? tokenregInstance : registryInstance).address;
|
||||
const values = [base.mul(totalSupply), tla, name, tokenreg];
|
||||
const options = {
|
||||
from: fromAddress,
|
||||
value: globalReg ? globalFee : 0
|
||||
};
|
||||
|
||||
this.setState({ deployBusy: true, deployState: 'Estimating gas for the transaction' });
|
||||
|
||||
managerInstance
|
||||
.deploy.estimateGas(options, values)
|
||||
.then((gas) => {
|
||||
this.setState({ deployState: 'Gas estimated, Posting transaction to the network' });
|
||||
|
||||
const gasPassed = gas.mul(1.2);
|
||||
options.gas = gasPassed.toFixed(0);
|
||||
console.log(`gas estimated at ${gas.toFormat(0)}, passing ${gasPassed.toFormat(0)}`);
|
||||
|
||||
return managerInstance.deploy.postTransaction(options, values);
|
||||
})
|
||||
.then((signerRequestId) => {
|
||||
this.setState({ signerRequestId, deployState: 'Transaction posted, Waiting for transaction authorization' });
|
||||
|
||||
return api.pollMethod('eth_checkRequest', signerRequestId);
|
||||
})
|
||||
.then((txHash) => {
|
||||
this.setState({ txHash, deployState: 'Transaction authorized, Waiting for network confirmations' });
|
||||
|
||||
return api.pollMethod('eth_getTransactionReceipt', txHash, (receipt) => {
|
||||
if (!receipt || !receipt.blockNumber || receipt.blockNumber.eq(0)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
})
|
||||
.then((txReceipt) => {
|
||||
this.setState({ txReceipt, deployDone: true, deployState: 'Network confirmed, Received transaction receipt' });
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('onDeploy', error);
|
||||
this.setState({ deployError: error.message });
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user