diff --git a/js/src/api/format/input.js b/js/src/api/format/input.js index 74ddd4e56..34871c911 100644 --- a/js/src/api/format/input.js +++ b/js/src/api/format/input.js @@ -143,8 +143,15 @@ export function inOptions (options) { if (options) { Object.keys(options).forEach((key) => { switch (key) { - case 'from': case 'to': + // Don't encode the `to` option if it's empty + // (eg. contract deployments) + if (options[key]) { + options[key] = inAddress(options[key]); + } + break; + + case 'from': options[key] = inAddress(options[key]); break; diff --git a/js/src/api/format/input.spec.js b/js/src/api/format/input.spec.js index 450ff61cc..4b82bd1ef 100644 --- a/js/src/api/format/input.spec.js +++ b/js/src/api/format/input.spec.js @@ -208,6 +208,13 @@ describe('api/format/input', () => { }); }); + it('does not encode an empty `to` value', () => { + const options = { to: '' }; + const formatted = inOptions(options); + + expect(formatted.to).to.equal(''); + }); + ['gas', 'gasPrice', 'value', 'minBlock', 'nonce'].forEach((input) => { it(`formats ${input} number as hexnumber`, () => { const block = {}; diff --git a/js/src/dapps/localtx/Application/application.css b/js/src/dapps/localtx/Application/application.css index 4b5f0bc31..15762c5d4 100644 --- a/js/src/dapps/localtx/Application/application.css +++ b/js/src/dapps/localtx/Application/application.css @@ -15,5 +15,29 @@ th { text-align: center; } + + td { + text-align: center; + } + } + + button { + background-color: rgba(0, 136, 170, 1); + border: none; + border-radius: 5px; + color: white; + font-size: 1rem; + padding: 0.5em 1em; + width: 100%; + + &:hover { + background-color: rgba(0, 136, 170, 0.8); + cursor: pointer; + } + } + + input { + font-size: 1rem; + padding: 0.5em 1em; } } diff --git a/js/src/dapps/localtx/Application/application.js b/js/src/dapps/localtx/Application/application.js index a36eb84f4..8efadcf1a 100644 --- a/js/src/dapps/localtx/Application/application.js +++ b/js/src/dapps/localtx/Application/application.js @@ -70,7 +70,6 @@ export default class Application extends Component { local[tx.hash].transaction = tx; local[tx.hash].stats = data.stats; }); - // Convert local transactions to array const localTransactions = Object.keys(local).map(hash => { const data = local[hash]; diff --git a/js/src/dapps/localtx/Transaction/transaction.css b/js/src/dapps/localtx/Transaction/transaction.css index c49d9479f..b06942ed7 100644 --- a/js/src/dapps/localtx/Transaction/transaction.css +++ b/js/src/dapps/localtx/Transaction/transaction.css @@ -6,6 +6,14 @@ } } +.txhash { + display: inline-block; + overflow: hidden; + padding-right: 3ch; + text-overflow: ellipsis; + width: 10ch; +} + .transaction { td { padding: 7px 15px; diff --git a/js/src/dapps/localtx/Transaction/transaction.js b/js/src/dapps/localtx/Transaction/transaction.js index 56a697853..554c2b757 100644 --- a/js/src/dapps/localtx/Transaction/transaction.js +++ b/js/src/dapps/localtx/Transaction/transaction.js @@ -31,8 +31,8 @@ class BaseTransaction extends Component { renderHash (hash) { return ( - - { this.shortHash(hash) } + + { hash } ); } @@ -206,7 +206,10 @@ export class LocalTransaction extends BaseTransaction { From - Gas Price / Gas + Gas Price + + + Gas Status @@ -224,18 +227,18 @@ export class LocalTransaction extends BaseTransaction { toggleResubmit = () => { const { transaction } = this.props; - const { isResubmitting, gasPrice } = this.state; + const { isResubmitting } = this.state; - this.setState({ + const nextState = { isResubmitting: !isResubmitting - }); + }; - if (gasPrice === null) { - this.setState({ - gasPrice: `0x${transaction.gasPrice.toString(16)}`, - gas: `0x${transaction.gas.toString(16)}` - }); + if (!isResubmitting) { + nextState.gasPrice = api.util.fromWei(transaction.gasPrice, 'shannon').toNumber(); + nextState.gas = transaction.gas.div(1000000).toNumber(); } + + this.setState(nextState); }; setGasPrice = el => { @@ -251,16 +254,15 @@ export class LocalTransaction extends BaseTransaction { }; sendTransaction = () => { - const { transaction } = this.props; + const { transaction, status } = this.props; const { gasPrice, gas } = this.state; const newTransaction = { from: transaction.from, - to: transaction.to, - nonce: transaction.nonce, value: transaction.value, data: transaction.input, - gasPrice, gas + gasPrice: api.util.toWei(gasPrice, 'shannon'), + gas: new BigNumber(gas).mul(1000000) }; this.setState({ @@ -268,11 +270,21 @@ export class LocalTransaction extends BaseTransaction { isSending: true }); - const closeSending = () => this.setState({ - isSending: false, - gasPrice: null, - gas: null - }); + const closeSending = () => { + this.setState({ + isSending: false, + gasPrice: null, + gas: null + }); + }; + + if (transaction.to) { + newTransaction.to = transaction.to; + } + + if (!['mined', 'replaced'].includes(status)) { + newTransaction.nonce = transaction.nonce; + } api.eth.sendTransaction(newTransaction) .then(closeSending) @@ -290,9 +302,9 @@ export class LocalTransaction extends BaseTransaction { const resubmit = isSending ? ( 'sending...' ) : ( - + ); return ( @@ -308,7 +320,8 @@ export class LocalTransaction extends BaseTransaction { { this.renderGasPrice(transaction) } -
+ + { this.renderGas(transaction) } @@ -345,9 +358,9 @@ export class LocalTransaction extends BaseTransaction { return ( - + { this.renderHash(transaction.hash) } @@ -357,20 +370,24 @@ export class LocalTransaction extends BaseTransaction { + shannon + + + MGas - + );