diff --git a/js/src/ui/IdentityName/identityName.js b/js/src/ui/IdentityName/identityName.js
index f19e2bb2e..85ff34a35 100644
--- a/js/src/ui/IdentityName/identityName.js
+++ b/js/src/ui/IdentityName/identityName.js
@@ -18,6 +18,8 @@ import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
+import ShortenedHash from '../ShortenedHash';
+
const defaultName = 'UNNAMED';
class IdentityName extends Component {
@@ -41,7 +43,7 @@ class IdentityName extends Component {
return null;
}
- const addressFallback = shorten ? this.formatHash(address) : address;
+ const addressFallback = shorten ? () : address;
const fallback = unknown ? defaultName : addressFallback;
const isUuid = hasAccount && account.name === account.uuid;
const displayName = (name && name.toUpperCase().trim()) ||
@@ -55,14 +57,6 @@ class IdentityName extends Component {
);
}
-
- formatHash (hash) {
- if (!hash || hash.length <= 16) {
- return hash;
- }
-
- return `${hash.substr(2, 6)}...${hash.slice(-6)}`;
- }
}
function mapStateToProps (state) {
diff --git a/js/src/ui/ShortenedHash/index.js b/js/src/ui/ShortenedHash/index.js
new file mode 100644
index 000000000..4c9314386
--- /dev/null
+++ b/js/src/ui/ShortenedHash/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 .
+
+export default from './shortenedHash';
diff --git a/js/src/ui/ShortenedHash/shortenedHash.css b/js/src/ui/ShortenedHash/shortenedHash.css
new file mode 100644
index 000000000..7184a5fec
--- /dev/null
+++ b/js/src/ui/ShortenedHash/shortenedHash.css
@@ -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 .
+*/
+
+.hash {
+ display: inline-block;
+ word-break: break-all;
+}
diff --git a/js/src/ui/ShortenedHash/shortenedHash.js b/js/src/ui/ShortenedHash/shortenedHash.js
new file mode 100644
index 000000000..e3d5c3b14
--- /dev/null
+++ b/js/src/ui/ShortenedHash/shortenedHash.js
@@ -0,0 +1,41 @@
+// 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 .
+
+import React, { Component, PropTypes } from 'react';
+
+import styles from './shortenedHash.css';
+
+export default class ShortenedHash extends Component {
+ static propTypes = {
+ data: PropTypes.string.isRequired
+ }
+
+ render () {
+ const { data } = this.props;
+
+ let shortened = data.toLowerCase();
+ if (shortened.slice(0, 2) === '0x') {
+ shortened = shortened.slice(2);
+ }
+ if (shortened.length > (6 + 6)) {
+ shortened = shortened.slice(0, 6) + '…' + shortened.slice(-6);
+ }
+
+ return (
+ { shortened }
+ );
+ }
+}
diff --git a/js/src/ui/TxHash/txHash.css b/js/src/ui/TxHash/txHash.css
index ef55ee701..c5b54e351 100644
--- a/js/src/ui/TxHash/txHash.css
+++ b/js/src/ui/TxHash/txHash.css
@@ -15,19 +15,12 @@
/* along with Parity. If not, see .
*/
-.details {
-}
-
-.header {
-}
-
.hash {
padding-top: 1em;
word-break: break-all;
}
.confirm {
- padding-top: 1em;
opacity: 0.5;
}
diff --git a/js/src/ui/TxHash/txHash.js b/js/src/ui/TxHash/txHash.js
index 83e5c79f5..81c4e0bf5 100644
--- a/js/src/ui/TxHash/txHash.js
+++ b/js/src/ui/TxHash/txHash.js
@@ -19,7 +19,9 @@ import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { LinearProgress } from 'material-ui';
+
import { txLink } from '../../3rdparty/etherscan/links';
+import ShortenedHash from '../ShortenedHash';
import styles from './txHash.css';
@@ -62,22 +64,23 @@ class TxHash extends Component {
render () {
const { hash, isTest, summary } = this.props;
- let header = null;
- if (!summary) {
- header = (
-
- The transaction has been posted to the network with a transaction hash of
-
- );
+ const link = (
+
+
+
+ );
+
+ let header = (
+ The transaction has been posted to the network, with a hash of { link }.
+ );
+ if (summary) {
+ header = ({ link }
);
}
return (
-
+
{ header }
-
{ this.renderConfirmations() }
);
@@ -87,17 +90,29 @@ class TxHash extends Component {
const { maxConfirmations } = this.props;
const { blockNumber, transaction } = this.state;
- let txBlock = 'Pending';
- let confirmations = 'No';
- let value = 0;
-
- if (transaction && transaction.blockNumber && transaction.blockNumber.gt(0)) {
- const num = blockNumber.minus(transaction.blockNumber).plus(1);
- txBlock = `#${transaction.blockNumber.toFormat(0)}`;
- confirmations = num.toFormat(0);
- value = num.gt(maxConfirmations) ? maxConfirmations : num.toNumber();
+ if (!(transaction && transaction.blockNumber && transaction.blockNumber.gt(0))) {
+ return (
+
+
+
waiting for confirmations
+
+ );
}
+ const confirmations = blockNumber.minus(transaction.blockNumber).plus(1);
+ const value = Math.min(confirmations.toNumber(), maxConfirmations);
+ let count;
+ if (confirmations.gt(maxConfirmations)) {
+ count = confirmations.toFormat(0);
+ } else {
+ count = confirmations.toFormat(0) + `/${maxConfirmations}`;
+ }
+ const unit = value === 1 ? 'confirmation' : 'confirmations';
+
return (
+ mode='determinate'
+ />
- { txBlock } / { confirmations } confirmations
+
{ count } { unit }
);
diff --git a/js/src/ui/index.js b/js/src/ui/index.js
index d443d0dbc..6824d9887 100644
--- a/js/src/ui/index.js
+++ b/js/src/ui/index.js
@@ -37,6 +37,7 @@ import Modal, { Busy as BusyStep, Completed as CompletedStep } from './Modal';
import muiTheme from './Theme';
import Page from './Page';
import ParityBackground from './ParityBackground';
+import ShortenedHash from './ShortenedHash';
import SignerIcon from './SignerIcon';
import Tags from './Tags';
import Tooltips, { Tooltip } from './Tooltips';
@@ -79,6 +80,7 @@ export {
Page,
ParityBackground,
RadioButtons,
+ ShortenedHash,
SignerIcon,
Tags,
Tooltip,
diff --git a/js/src/views/Account/Transactions/Transaction/transaction.js b/js/src/views/Account/Transactions/Transaction/transaction.js
index d84917d6b..32aa406a8 100644
--- a/js/src/views/Account/Transactions/Transaction/transaction.js
+++ b/js/src/views/Account/Transactions/Transaction/transaction.js
@@ -19,6 +19,7 @@ import React, { Component, PropTypes } from 'react';
import moment from 'moment';
import { IdentityIcon, IdentityName, MethodDecoding } from '../../../../ui';
+import ShortenedHash from '../../../../ui/ShortenedHash';
import { txLink, addressLink } from '../../../../3rdparty/etherscan/links';
import styles from '../transactions.css';
@@ -95,7 +96,7 @@ export default class Transaction extends Component {
href={ txLink(transaction.hash, isTest) }
target='_blank'
>
- { this.formatHash(transaction.hash) }
+
@@ -150,14 +151,6 @@ export default class Transaction extends Component {
);
}
- formatHash (hash) {
- if (!hash || hash.length <= 16) {
- return hash;
- }
-
- return `${hash.substr(2, 6)}...${hash.slice(-6)}`;
- }
-
formatNumber (number) {
return new BigNumber(number).toFormat();
}
diff --git a/js/src/views/Contract/Events/Event/event.js b/js/src/views/Contract/Events/Event/event.js
index f45975f94..17fd56051 100644
--- a/js/src/views/Contract/Events/Event/event.js
+++ b/js/src/views/Contract/Events/Event/event.js
@@ -19,6 +19,7 @@ import moment from 'moment';
import React, { Component, PropTypes } from 'react';
import { IdentityIcon, IdentityName, Input, InputAddress } from '../../../../ui';
+import ShortenedHash from '../../../../ui/ShortenedHash';
import { txLink } from '../../../../3rdparty/etherscan/links';
import styles from '../../contract.css';
@@ -71,7 +72,7 @@ export default class Event extends Component {
{ event.type }({ keys })
- { this.formatHash(event.transactionHash) }
+
@@ -82,14 +83,6 @@ export default class Event extends Component {
);
}
- formatHash (hash) {
- if (!hash || hash.length <= 16) {
- return hash;
- }
-
- return `${hash.substr(2, 6)}...${hash.slice(-6)}`;
- }
-
renderAddressName (address, withName = true) {
return (
|