{headers.map(header => (
- {header.href === undefined ? (
+ {header.href === undefined || (header.key === 'to' && [ContractCreation].includes(item.to)) ? (
item[header.key] === null ? (
'/'
) : (
diff --git a/src/components/TransactionList/index.tsx b/src/components/TransactionList/index.tsx
index 6d1529d..8f3382f 100644
--- a/src/components/TransactionList/index.tsx
+++ b/src/components/TransactionList/index.tsx
@@ -14,42 +14,35 @@ export default ({ transactions }: { transactions: Transaction[] }) => (
classes={{ primary: styles.primary }}
primary={
-
TXID: {tx.hash}
-
- {tx.timestamp && new Date(+tx.timestamp).toLocaleString()}
-
+ {tx.timestamp && new Date(+tx.timestamp).toLocaleString()}
}
secondary={
tx.basicInfo ? (
- From{' '}
+ From:{' '}
- {tx.basicInfo.value || '_'}
-
+ {tx.basicInfo.from || 'null'}
+
+ {' To: '}
+ {['Contract Creation'].includes(tx.basicInfo.to) ? (
+ tx.basicInfo.to
+ ) : (
+ {tx.basicInfo.value || '0'}
) : (
{tx.content}
diff --git a/src/config/graph.ts b/src/config/graph.ts
index 059fde3..2057255 100644
--- a/src/config/graph.ts
+++ b/src/config/graph.ts
@@ -1,22 +1,24 @@
export const BarOption = {
legend: {
- bottom: '0',
+ show: false,
+ bottom: '0'
},
tooltip: {},
dataset: {
- source: [],
+ source: []
},
xAxis: { type: 'category' },
yAxis: {},
- series: [{ type: 'bar' }],
+ series: [{ type: 'bar' }]
}
export const LineOption = {
legend: {
- bottom: '0',
+ show: false,
+ bottom: '0'
},
tooltip: {},
dataset: {
- source: [],
+ source: []
},
xAxis: { type: 'category' },
yAxis: {},
@@ -30,18 +32,18 @@ export const LineOption = {
colorStops: [
{
offset: 0,
- color: 'red',
+ color: 'red'
},
{
offset: 1,
- color: 'blue',
- },
+ color: 'blue'
+ }
],
- globalCoord: false,
- },
+ globalCoord: false
+ }
}
export const PieOption = {
- legend: { bottom: '0' },
+ legend: { show: false, bottom: '0' },
tooltip: {},
dataset: { source: [] },
xAxis: { show: false },
@@ -53,15 +55,15 @@ export const PieOption = {
emphasis: {
itemStyle: {
shadowColor: 'rgba(0,0,0,0.5)',
- shadowBlur: 20,
- },
- },
- },
- ],
+ shadowBlur: 20
+ }
+ }
+ }
+ ]
}
export default {
BarOption,
PieOption,
- LineOption,
+ LineOption
}
diff --git a/src/containers/Account/index.tsx b/src/containers/Account/index.tsx
index 7f26987..4a83b45 100644
--- a/src/containers/Account/index.tsx
+++ b/src/containers/Account/index.tsx
@@ -2,9 +2,8 @@
* @Author: Keith-CY
* @Date: 2018-07-22 21:41:37
* @Last Modified by: Keith-CY
- * @Last Modified time: 2018-07-22 22:25:04
+ * @Last Modified time: 2018-09-11 14:49:56
*/
-// TODO: use contract instance for eth call
import * as React from 'react'
import * as web3Utils from 'web3-utils'
@@ -21,14 +20,16 @@ import ErrorNotification from '../../components/ErrorNotification'
import LocalAccounts from '../../components/LocalAccounts'
import { AccountType } from '../../typings/account'
-import { IContainerProps, Transaction, ABI } from '../../typings'
+import { IContainerProps } from '../../typings'
import { withObservables } from '../../contexts/observables'
import { initAccountState } from '../../initValues'
import hideLoader from '../../utils/hideLoader'
import { handleError, dismissError } from '../../utils/handleError'
+import valueFormatter from '../../utils/valueFormatter'
const layouts = require('../../styles/layout.scss')
+const text = require('../../styles/text.scss')
const accountFormatter = (addr: string) => (addr.startsWith('0x') ? addr : `0x${addr}`)
interface AccountProps extends IContainerProps {}
@@ -86,7 +87,7 @@ class Account extends React.Component {
addr,
blockNumber: 'latest'
}).subscribe(
- (count: string) => this.setState(state => ({ txCount: count.slice(2), loading: state.loading - 1 })),
+ (count: string) => this.setState(state => ({ txCount: +count, loading: state.loading - 1 })),
this.handleError
)
@@ -249,11 +250,11 @@ class Account extends React.Component {
) : null}
-
- Account:
{addr}
+
+ Account: {addr}
-
- Balance:
{balance}
+
+ Balance: {valueFormatter(balance)}
diff --git a/src/containers/Block/index.tsx b/src/containers/Block/index.tsx
index e3b9d27..61395dd 100644
--- a/src/containers/Block/index.tsx
+++ b/src/containers/Block/index.tsx
@@ -2,7 +2,7 @@
* @Author: Keith-CY
* @Date: 2018-08-02 11:37:01
* @Last Modified by: Keith-CY
- * @Last Modified time: 2018-08-02 12:05:04
+ * @Last Modified time: 2018-09-11 14:28:32
*/
import * as React from 'react'
@@ -10,7 +10,7 @@ import { Link } from 'react-router-dom'
import { LinearProgress, Card, CardContent, List, ListItem } from '@material-ui/core'
import { unsigner } from '@nervos/signer'
-import { RpcResult, Chain } from '@nervos/web3-plugin/lib/typings/index.d'
+import { RpcResult, Chain } from '@nervos/plugin/lib/typings/index.d'
import { IContainerProps, IBlock } from '../../typings'
import { initBlockState } from '../../initValues'
@@ -92,6 +92,7 @@ class Block extends React.Component {
timestamp: `${block.header.timestamp}`
}
})
+ block.header.gasUsed = `${+block.header.gasUsed}`
/* eslint-enable */
return this.setState(state => Object.assign({}, state, { ...block, loading: state.loading - 1 }))
}
@@ -105,7 +106,7 @@ class Block extends React.Component {
private handleError = handleError(this)
private dismissError = dismissError(this)
private headerInfo = [
- { key: 'gasUsed', label: 'Gas Used' },
+ { key: 'gasUsed', label: 'Quota Used' },
{ key: 'receiptsRoot', label: 'Receipts Root' },
{ key: 'stateRoot', label: 'State Root' },
{ key: 'transactionsRoot', label: 'Transactions Root' }
@@ -140,7 +141,7 @@ class Block extends React.Component {
Proposer
-
- {header.proof && header.proof.Tendermint && header.proof.Tendermint.proposal}
-
+ {header.proposer}
Parent Hash
@@ -193,7 +192,7 @@ class Block extends React.Component {
-
+
{
}
private onSearch = params => {
- this.setState(state => Object.assign({}, state, { selectorsValue: params }))
+ this.setState(state => Object.assign({}, state, { selectorsValue: params, pageNo: 0 }))
this.fetchBlock(params)
}
private setPageSize = () => {
@@ -126,11 +127,11 @@ class BlockTable extends React.Component {
count: result.count,
items: result.blocks.map(block => ({
key: block.hash,
- height: block.header.number,
+ height: `${+block.header.number}`,
hash: block.hash,
- age: `${Math.round((Date.now() - block.header.timestamp) / 1000)}s ago`,
+ age: `${fromNow(block.header.timestamp)} ago`,
transactions: `${block.transactionsCount}`,
- gasUsed: block.header.gasUsed
+ gasUsed: `${+block.header.gasUsed}`
}))
}))
})
diff --git a/src/containers/ConfigPage/index.tsx b/src/containers/ConfigPage/index.tsx
index 3580276..3e9b7ad 100644
--- a/src/containers/ConfigPage/index.tsx
+++ b/src/containers/ConfigPage/index.tsx
@@ -194,7 +194,7 @@ class ConfigPage extends React.Component {
panel: ConfigPanel.BLOCK,
type: ConfigType.DISPLAY,
key: 'blockGasUsed',
- title: 'gas used'
+ title: 'quota used'
},
{
panel: ConfigPanel.BLOCK,
@@ -236,13 +236,13 @@ class ConfigPage extends React.Component {
panel: ConfigPanel.TRANSACTION,
type: ConfigType.DISPLAY,
key: 'transactionBlockNumber',
- title: 'block number'
+ title: 'block height'
},
{
panel: ConfigPanel.TRANSACTION,
type: ConfigType.DISPLAY,
key: 'transactionGasUsed',
- title: 'gas used'
+ title: 'quota used'
},
{
panel: ConfigPanel.TRANSACTION,
@@ -266,13 +266,13 @@ class ConfigPage extends React.Component {
panel: ConfigPanel.GRAPH,
type: ConfigType.DISPLAY,
key: 'graphGasUsedBlock',
- title: 'Gas Used/Block'
+ title: 'Quota Used/Block'
},
{
panel: ConfigPanel.GRAPH,
type: ConfigType.DISPLAY,
key: 'graphGasUsedTx',
- title: 'Gas Used/Transaction'
+ title: 'Quota Used/Transaction'
},
{
panel: ConfigPanel.GRAPH,
diff --git a/src/containers/Dialog/dialog.scss b/src/containers/Dialog/dialog.scss
index 47ceb2b..33b4096 100644
--- a/src/containers/Dialog/dialog.scss
+++ b/src/containers/Dialog/dialog.scss
@@ -1,6 +1,7 @@
.title {
display: flex;
justify-content: space-between;
+
h2 {
text-transform: capitalize;
}
@@ -8,16 +9,20 @@
.dialogTitle {
text-transform: capitalize; // padding: 0 0 0 17px;
+
h2 {
display: flex;
justify-content: center;
align-items: center;
+ padding-right: 20px;
+
button {
position: absolute;
top: 10px;
right: 0;
font-weight: 100;
}
+
@media (max-width: 800px) {
justify-content: flex-start;
}
diff --git a/src/containers/Footer/index.tsx b/src/containers/Footer/index.tsx
index 3846e00..7d725f7 100644
--- a/src/containers/Footer/index.tsx
+++ b/src/containers/Footer/index.tsx
@@ -21,26 +21,24 @@ class Footer extends React.Component<{ t: (key: string) => string }, any> {
state = {
overview: {
title: 'overview',
- content: 'Across the Microscope, we can reach every cell in Nervos Network',
+ content: 'Across the Microscope, we can reach every cell in Nervos Network'
},
products: {
title: 'other product',
items: [
{
- logo:
- 'https://uploads-ssl.webflow.com/5b10cb31f2733b937fe55ab5/5b185b65683265ce7a42c13c_nervos%20logo.png',
+ logo: 'https://uploads-ssl.webflow.com/5b10cb31f2733b937fe55ab5/5b185b65683265ce7a42c13c_nervos%20logo.png',
title: 'Nervos AppChain',
url: 'http://nervos.org/',
- overview: 'Nervos AppChain',
+ overview: 'Nervos AppChain'
},
{
- logo:
- 'https://raw.githubusercontent.com/cryptape/assets/master/CITA-logo.png',
+ logo: 'https://raw.githubusercontent.com/cryptape/assets/master/CITA-logo.png',
title: 'CITA',
url: 'https://github.com/cryptape/cita',
- overview: 'CITA',
- },
- ] as Product[],
+ overview: 'CITA'
+ }
+ ] as Product[]
},
contacts: {
title: 'contact us',
@@ -48,21 +46,20 @@ class Footer extends React.Component<{ t: (key: string) => string }, any> {
{
icon: 'email',
title: 'appchain.contact@cryptape.com',
- url: 'mailto:appchain.contact@cryptape.com',
+ url: 'mailto:appchain.contact@cryptape.com'
},
{
icon: 'group',
title: 'Nervos-AppChain 开发者群组',
- url: 'https://t.me/joinchat/GkxnS1L8xTx_c1InzeC0Cw',
+ url: 'https://t.me/NervosNetworkcn'
},
{
icon: 'wechat',
title: '微信公众号',
- url:
- 'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzUzNzg4NTAzOA==&scene=124&#wechat_redirect',
- },
- ] as Contact[],
- },
+ url: 'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzUzNzg4NTAzOA==&scene=124&#wechat_redirect'
+ }
+ ] as Contact[]
+ }
}
render () {
const { overview, products, contacts } = this.state
@@ -90,12 +87,7 @@ class Footer extends React.Component<{ t: (key: string) => string }, any> {
{t(contacts.title)}
{contacts.items.map(item => (
-
+
@@ -111,7 +103,4 @@ class Footer extends React.Component<{ t: (key: string) => string }, any> {
const TransFooter = translate('microscope')(Footer)
-export default () =>
- createPortal( {
componentDidCatch (err) {
this.handleError(err)
}
- // private graphSource: any[] = []
- // private updateAllDiagram = () => {}
- // private updateDiagram = ({ chart, data }) => {}
private setMaxCount = () => {
const { graphMaxCount: maxCount } = this.props.config.panelConfigs
@@ -140,12 +130,10 @@ class Graphs extends React.Component {
this.gasUsedGraph = this.initGraph(this.gasUsedGraphDOM as HTMLDivElement)
}
if (panelConfigs.graphGasUsedTx) {
- this.txGasUsedGraph = this.initGraph(this
- .txGasUsedGraphDOM as HTMLDivElement)
+ this.txGasUsedGraph = this.initGraph(this.txGasUsedGraphDOM as HTMLDivElement)
}
if (panelConfigs.graphProposals) {
- this.proposalsGraph = this.initGraph(this
- .proposalsGraphDOM as HTMLDivElement)
+ this.proposalsGraph = this.initGraph(this.proposalsGraphDOM as HTMLDivElement)
}
}
private initGraph = (dom: HTMLDivElement) => {
@@ -154,19 +142,15 @@ class Graphs extends React.Component {
return graph
}
private startListening = () => {
- this.props.CITAObservables.newBlockByNumberSubject.subscribe(
- block => {
- if (block.hash) {
- this.handleNewBlock(block)
- this.updateTransactions()
- this.updateProposals()
- } else {
- throw new Error(block)
- }
- },
- // error => console.error(error),
- this.handleError,
- )
+ this.props.CITAObservables.newBlockByNumberSubject.subscribe(block => {
+ if (block.hash) {
+ this.handleNewBlock(block)
+ this.updateTransactions()
+ this.updateProposals()
+ } else {
+ throw new Error(block)
+ }
+ }, this.handleError)
}
private updateProposals = () => {
fetchStatistics({ type: 'proposals' })
@@ -178,18 +162,17 @@ class Graphs extends React.Component {
title: {
text: 'Proposal Distribution',
textStyle: {
- fontSize: 16,
- },
+ fontSize: 16
+ }
},
color: ['#415dfc', '#ab62f1', '#fca441', '#4db7f8'],
radius: ['50%', '70%'],
- dataset: { source },
+ dataset: { source }
}
this.updateGraph({
graph: this.proposalsGraph,
- option: proposalOption,
+ option: proposalOption
})
- // this.update
})
.catch(this.handleError)
}
@@ -199,21 +182,37 @@ class Graphs extends React.Component {
txs.reverse()
this.setState(state => ({
...state,
- transactions: txs,
+ transactions: txs
}))
const source = getTxSource({ txs })
const txGasUsedOption = {
+ ...BarOption,
title: {
- text: 'Gas Used/Transaction',
+ text: `Quota Used in the Latest ${this.state.maxCount} Transactions`
},
color: ['#ab62f1'],
- ...BarOption,
- dataset: { source: source.map(item => [item[0], item[1]]) },
+ xAxis: {
+ ...BarOption.xAxis,
+ axisLabel: {
+ show: false
+ }
+ },
+ formatter: (param: { seriesName: string; value: any[] }) => {
+ const label = `${param.seriesName} ${param.value[0].slice(
+ 0,
+ 6
+ )}...${param.value[0].slice(-4)} : ${param.value[1]} `
+ return label
+ },
+ dataset: { source: source.map((item, idx) => (idx > 0 ? [item[0], +item[1] / 1e9] : [item[0], item[1]])) }
}
if (this.props.config.panelConfigs.graphGasUsedTx) {
this.updateGraph({
graph: this.txGasUsedGraph,
- option: txGasUsedOption,
+ option: txGasUsedOption
+ })
+ this.txGasUsedGraph.on('click', (param: any) => {
+ this.props.history.push(`/transaction/${param.value[0]}`)
})
}
})
@@ -222,41 +221,42 @@ class Graphs extends React.Component {
private handleNewBlock = block => {
const { panelConfigs } = this.props.config
this.setState(state => {
+ // console.log(+block.header.number)
const blocks = [...state.blocks, block].slice(-this.state.maxCount)
if (this.blockGraph && blocks.length > 1) {
const source = getBlockSource({ blocks })
const timeCostOption = {
title: {
- text: 'Interval/Block',
+ text: `Interval(in ms) for the Latest ${this.state.maxCount}`,
textStyle: {
- fontSize: 16,
- },
+ fontSize: 16
+ }
},
color: ['#415dfc'],
...BarOption,
- dataset: { source: source.map(item => [item[0], item[1]]) },
+ dataset: { source: source.map(item => [item[0], item[1]]) }
}
const txCountOption = {
title: {
- text: 'Transactions/Block',
+ text: `Transaction Count in the Latest ${this.state.maxCount} Blocks`,
textStyle: {
- fontSize: 16,
- },
+ fontSize: 16
+ }
},
color: ['#fca441'],
...BarOption,
- dataset: { source: source.map(item => [item[0], item[2]]) },
+ dataset: { source: source.map(item => [item[0], item[2]]) }
}
const gasUsedOption = {
title: {
- text: 'Gas Used/Block',
+ text: `Quota Used in Latest ${this.state.maxCount} Blocks`,
textStyle: {
- fontSize: 16,
- },
+ fontSize: 16
+ }
},
color: ['#4db7f8'],
...BarOption,
- dataset: { source: source.map(item => [item[0], item[3]]) },
+ dataset: { source: source.map(item => [item[0], item[3]]) }
}
if (panelConfigs.graphIPB) {
this.updateGraph({ graph: this.blockGraph, option: timeCostOption })
@@ -280,57 +280,37 @@ class Graphs extends React.Component {
render () {
return (
-
- Statistics
-
+ Statistics
- (this.blockGraphDOM = el)}
- className={styles.graphContainer}
- />
+
(this.blockGraphDOM = el)} className={styles.graphContainer} />
- (this.txCountGraphDOM = el)}
- className={styles.graphContainer}
- />
+
(this.txCountGraphDOM = el)} className={styles.graphContainer} />
- (this.gasUsedGraphDOM = el)}
- className={styles.graphContainer}
- />
+
(this.gasUsedGraphDOM = el)} className={styles.graphContainer} />
- (this.txGasUsedGraphDOM = el)}
- className={styles.graphContainer}
- />
+
(this.txGasUsedGraphDOM = el)} className={styles.graphContainer} />
- (this.proposalsGraphDOM = el)}
- className={styles.graphContainer}
- />
+
(this.proposalsGraphDOM = el)} className={styles.graphContainer} />
{
}
private onSearch$: Subject
private getChainMetadata = ip => {
- if (isIp(ip)) {
- fetchMetadata(ip)
- .then(({ result }) => {
- this.setState({
- otherMetadata: {
- ...result,
- genesisTimestamp: new Date(result.genesisTimestamp).toLocaleString()
- }
- })
+ fetchMetadata(ip)
+ .then(({ result }) => {
+ this.setState({
+ otherMetadata: {
+ ...result,
+ genesisTimestamp: new Date(result.genesisTimestamp).toLocaleString()
+ }
})
- .catch(this.handleError)
- }
+ })
+ .catch(this.handleError)
}
private toggleSideNavs = (open: boolean = false) => (e: React.SyntheticEvent) => {
this.setState({ sidebarNavs: open })
@@ -250,9 +247,11 @@ class Header extends React.Component {
-
+ {this.translations.length > 1 ? (
+
+
+ ) : null}
{this.translations.map(lng => (
@@ -294,7 +293,7 @@ class Header extends React.Component {
peerCount={this.state.peerCount}
number={this.state.block.header.number}
timestamp={this.state.block.header.timestamp}
- proposal={this.state.block.header.proof.Tendermint.proposal}
+ proposal={this.state.block.header.proof.Bft.proposal}
tps={this.state.tps}
tpb={this.state.tpb}
ipb={this.state.ipb}
diff --git a/src/containers/Homepage/index.tsx b/src/containers/Homepage/index.tsx
index 49e30a8..fe7a7aa 100644
--- a/src/containers/Homepage/index.tsx
+++ b/src/containers/Homepage/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
import { LinearProgress, Grid } from '@material-ui/core'
import { translate } from 'react-i18next'
-import { Chain } from '@nervos/web3-plugin'
+import { Chain } from '@nervos/plugin'
import { IContainerProps, TransactionFromServer } from '../../typings'
import { withObservables } from '../../contexts/observables'
import { fetch10Transactions } from '../../utils/fetcher'
diff --git a/src/containers/NetStatus/index.tsx b/src/containers/NetStatus/index.tsx
index 82d9f93..c6ce0f3 100644
--- a/src/containers/NetStatus/index.tsx
+++ b/src/containers/NetStatus/index.tsx
@@ -25,13 +25,13 @@ const initialState = {
gasUsed: '',
number: '',
prevHash: '',
- timestamp: '',
+ timestamp: ''
},
- version: 0,
+ version: 0
},
gasPrice: 0,
// network: process.env.CHAIN_SERVERS || '',
- network: '',
+ network: ''
}
type INetStatusState = Readonly
@@ -40,8 +40,8 @@ class NetStatus extends React.Component {
static plainStates = [
{ title: 'Peer Count', value: 'peerCount' },
{ title: 'Current Height', value: 'blockNumber' },
- { title: 'Gas Price', value: 'gasPrice' },
- { title: 'Network', value: 'network' },
+ { title: 'Quota Price', value: 'gasPrice' },
+ { title: 'Network', value: 'network' }
]
static updateInterval: any
readonly state = initialState
@@ -52,9 +52,7 @@ class NetStatus extends React.Component {
private fetchStatus = () => {
// fetch peer Count
const { peerCount, newBlockByNumberSubject } = this.props.CITAObservables
- peerCount(60000).subscribe((count: string) =>
- this.setState(state => ({ peerCount: count.slice(2) })),
- )
+ peerCount(60000).subscribe((count: string) => this.setState(state => ({ peerCount: count.slice(2) })))
// fetch Block Number and Block
newBlockByNumberSubject.subscribe(block => {
this.setState(state => ({ blockNumber: block.header.number }))
@@ -66,11 +64,7 @@ class NetStatus extends React.Component {
return (
{NetStatus.plainStates.map(state => (
-
)
diff --git a/src/containers/Transaction/index.tsx b/src/containers/Transaction/index.tsx
index a528799..e291edb 100644
--- a/src/containers/Transaction/index.tsx
+++ b/src/containers/Transaction/index.tsx
@@ -11,7 +11,7 @@ import {
Divider
} from '@material-ui/core'
import { unsigner } from '@nervos/signer'
-import { Chain } from '@nervos/web3-plugin/lib/typings/index.d'
+import { Chain } from '@nervos/plugin/lib/typings/index.d'
import Banner from '../../components/Banner'
@@ -21,6 +21,7 @@ import ErrorNotification from '../../components/ErrorNotification'
import hideLoader from '../../utils/hideLoader'
import { handleError, dismissError } from '../../utils/handleError'
import bytesToHex from '../../utils/bytesToHex'
+import valueFormatter from '../../utils/valueFormatter'
const layouts = require('../../styles/layout.scss')
const texts = require('../../styles/text.scss')
@@ -68,16 +69,16 @@ const InfoList = ({ infos, details }) =>
}}
primary={info.label}
secondary={
- info.type ? (
+ info.type && !['Contract Creation'].includes(details[info.key]) ? (
{
const { transaction } = this.props.match.params
if (transaction) {
this.setState(state => ({ loading: state.loading + 1 }))
- this.props.CITAObservables.getTransaction(transaction).subscribe((tx: Chain.TransactionInBlock) => {
+ this.props.CITAObservables.getTransaction(transaction).subscribe((tx: Chain.Transaction) => {
this.handleReturnedTx(tx)
}, this.handleError)
}
@@ -116,7 +117,7 @@ class Transaction extends React.Component {
componentDidCatch (err) {
this.handleError(err)
}
- private handleReturnedTx = (tx: Chain.TransactionInBlock) => {
+ private handleReturnedTx = (tx: Chain.Transaction) => {
if (!tx) {
this.handleError({
error: {
@@ -130,13 +131,21 @@ class Transaction extends React.Component {
/* eslint-disable */
const { data, value } = details.transaction
const { address } = details.sender
- tx.basicInfo.data = bytesToHex(data as any)
- tx.basicInfo.value = '' + +bytesToHex(value as any)
+ const hexData = bytesToHex(data as any)
+ tx.basicInfo.data = hexData === '0x' ? 'null' : hexData
+ tx.basicInfo.value = valueFormatter(bytesToHex(value as any))
tx.basicInfo.from = '0x' + address
+ tx.basicInfo.to = tx.basicInfo.to ? '0x' + tx.basicInfo.to : 'Contract Creation'
/* eslint-enable */
}
- // return this.setState(state => ({ ...tx, loading: state.loading - 1 }))
- return this.setState(state => Object.assign({}, state, tx, { loading: state.loading - 1 }))
+ return this.setState(state =>
+ Object.assign(
+ {},
+ state,
+ { ...tx, blockNumber: `${+tx.blockNumber}`, index: `${+tx.index}` },
+ { loading: state.loading - 1 }
+ )
+ )
}
private infos = [
{ key: 'blockHash', label: 'Block Hash', type: 'block' },
@@ -146,8 +155,8 @@ class Transaction extends React.Component {
private basicInfo = [
{ key: 'from', label: 'From', type: 'account' },
{ key: 'to', label: 'To', type: 'account' },
- { key: 'value', label: 'value' },
- { key: 'data', label: 'data' }
+ { key: 'value', label: 'Value' },
+ { key: 'data', label: 'Data' }
]
private handleError = handleError(this)
@@ -169,33 +178,35 @@ class Transaction extends React.Component {
-
-
-
- {timestamp ? (
-
-
-
- Time:
- {new Date(timestamp).toLocaleString()}
-
- ) : null}
- {gasUsed ? (
-
-
+
+
+ {timestamp ? (
+
+
+
+ Time:
+ {new Date(timestamp).toLocaleString()}
+
+ ) : null}
+ {gasUsed ? (
+
+ Gas Used:
- {gasUsed}
-
- ) : null}
-
-
+ Gas Used:
+ {gasUsed}
+
+ ) : null}
+
+
+ ) : null}
diff --git a/src/containers/TransactionTable/index.tsx b/src/containers/TransactionTable/index.tsx
index 3dd7c59..d32e5ce 100644
--- a/src/containers/TransactionTable/index.tsx
+++ b/src/containers/TransactionTable/index.tsx
@@ -10,6 +10,9 @@ import paramsFilter from '../../utils/paramsFilter'
import hideLoader from '../../utils/hideLoader'
import { handleError, dismissError } from '../../utils/handleError'
import { rangeSelectorText } from '../../utils/searchTextGen'
+import toText from '../../utils/toText'
+import { fromNow } from '../../utils/timeFormatter'
+import valueFormatter from '../../utils/valueFormatter'
interface AdvancedSelectors {
selectorsValue: {
@@ -31,7 +34,7 @@ message: string
{ key: 'to', text: 'to', href: '/account/' },
{ key: 'value', text: 'value' },
{ key: 'blockNumber', text: 'height', href: '/height/' },
- { key: 'gasUsed', text: 'gas used' },
+ { key: 'gasUsed', text: 'quota used' },
{ key: 'age', text: 'age' }
],
items: [] as any[],
@@ -42,12 +45,12 @@ message: string
{
type: SelectorType.SINGLE,
key: 'from',
- text: 'From'
+ text: 'Address From'
},
{
type: SelectorType.SINGLE,
key: 'to',
- text: 'To'
+ text: 'Address To'
}
],
selectorsValue: {
@@ -86,7 +89,7 @@ class TransactionTable extends React.Component {
- this.setState(state => Object.assign({}, state, { selectorsValue: params }))
+ this.setState(state => Object.assign({}, state, { selectorsValue: params, pageNo: 0 }))
this.fetchTransactions(params)
}
private setPageSize = () => {
@@ -109,8 +112,6 @@ class TransactionTable extends React.Component ({
key: tx.hash,
- blockNumber: tx.blockNumber,
+ blockNumber: `${+tx.blockNumber}`,
hash: tx.hash,
from: tx.from,
- to: tx.to,
- value: tx.value,
- age: `${Math.round((Date.now() - tx.timestamp) / 1000)}s ago`,
- gasUsed: tx.gasUsed
+ to: toText(tx.to),
+ age: `${fromNow(tx.timestamp)} ago`,
+ value: valueFormatter(+tx.value),
+ gasUsed: `${+tx.gasUsed}`
}))
})
)
diff --git a/src/initValues.ts b/src/initValues.ts
index f368fd1..3c8c0c0 100644
--- a/src/initValues.ts
+++ b/src/initValues.ts
@@ -2,10 +2,10 @@
* @Author: Keith-CY
* @Date: 2018-07-22 19:59:22
* @Last Modified by: Keith-CY
- * @Last Modified time: 2018-08-15 18:50:45
+ * @Last Modified time: 2018-09-11 14:27:24
*/
-import { IBlock, IBlockHeader, Transaction, Metadata, ABI } from './typings'
+import { IBlock, IBlockHeader, Transaction, Metadata, ABI, UnsignedTransaction } from './typings'
import widerThan from './utils/widerThan'
import { Contract, AccountType } from './typings/account'
import { LocalAccount } from './components/LocalAccounts'
@@ -23,8 +23,9 @@ export const initHeader: IBlockHeader = {
transactionsRoot: '',
receiptsRoot: '',
gasUsed: '',
+ proposer: '',
proof: {
- Tendermint: {
+ Bft: {
proposal: ''
}
}
@@ -49,6 +50,23 @@ export const initTransaction: Transaction = {
data: ''
}
}
+export const initUnsignedTransaction: UnsignedTransaction = {
+ crypto: 0,
+ signature: '',
+ sender: {
+ address: '',
+ publicKey: ''
+ },
+ transaction: {
+ data: [] as number[],
+ nonce: '',
+ quota: 0,
+ to: '',
+ validUntilBlock: 0,
+ value: [] as number[],
+ version: 0
+ }
+}
export const initMetadata: Metadata = {
chainId: -1,
chainName: '',
@@ -56,7 +74,9 @@ export const initMetadata: Metadata = {
website: '',
genesisTimestamp: '',
validators: [],
- blockInterval: 0
+ blockInterval: 0,
+ economicalModel: 0,
+ version: null
}
// init config values
@@ -82,7 +102,7 @@ export const initPanelConfigs: PanelConfigs = {
graphGasUsedBlock: true,
graphGasUsedTx: true,
graphProposals: true,
- graphMaxCount: 100
+ graphMaxCount: 10
}
export const initServerList = (process.env.CHAIN_SERVERS || '').split(',')
@@ -95,7 +115,7 @@ export const initAccountState = {
abi: [] as ABI,
contract: { _jsonInterface: [], methods: [] } as Contract,
balance: '',
- txCount: '',
+ txCount: 0,
creator: '',
transactions: [] as Transaction[],
customToken: {
@@ -136,8 +156,9 @@ export const initBlockState = {
transactionsRoot: '',
receiptsRoot: '',
gasUsed: '',
+ proposer: '',
proof: {
- Tendermint: {
+ Bft: {
proposal: ''
}
}
@@ -156,7 +177,7 @@ export const initBlockTableState = {
{ key: 'hash', text: 'hash', href: '/block/' },
{ key: 'age', text: 'age' },
{ key: 'transactions', text: 'transactions' },
- { key: 'gasUsed', text: 'gas used' }
+ { key: 'gasUsed', text: 'quota used' }
],
items: [] as any[],
count: 0,
@@ -166,8 +187,8 @@ export const initBlockTableState = {
{
type: SelectorType.RANGE,
key: 'number',
- text: 'number selector',
- items: [{ key: 'numberFrom', text: 'Number From' }, { key: 'numberTo', text: 'Number To' }]
+ text: 'height selector',
+ items: [{ key: 'numberFrom', text: 'Height From' }, { key: 'numberTo', text: 'Height To' }]
},
{
type: SelectorType.RANGE,
@@ -199,3 +220,5 @@ export const initConfigContext = {
deletePrivkey: privkey => false,
changePanelConfig: (config: any) => false
}
+
+export const ContractCreation = 'Contract Creation'
diff --git a/src/styles/text.scss b/src/styles/text.scss
index fec1efb..a016218 100644
--- a/src/styles/text.scss
+++ b/src/styles/text.scss
@@ -1,4 +1,5 @@
@import './color.scss';
+
* {
font-family: Helvetica, Roboto, Arial, Georgia, Consolas; // color: $plainText;
}
@@ -33,8 +34,17 @@
}
@media (max-width: 370px) {
+
html,
body {
font-size: 14px;
}
}
+
+.bannerText {
+ font-size: 24px;
+
+ @media (max-width: 800px) {
+ font-size: 14px;
+ }
+}
diff --git a/src/templates/index.html b/src/templates/index.html
index 5220e2e..b67ebdc 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -130,8 +130,8 @@
})()
-
+