merge develop to master for release 0.1.0 (#17)

* update: refact config context route app index * update: adjust loading timing * update: update def * update: update notification and server list style * update: move lngs to env config * Feature/refactor (#8) * update: refact config context route app index * update: adjust loading timing * update: update def * update: update notification and server list style * update: move lngs to env config * update: update search params display * Update README.md (#10) * update: add notice of tps in doc * update: refactor config, metadata module * Feature/refactor (#11) * update: refact config context route app index * update: adjust loading timing * update: update def * update: update notification and server list style * update: move lngs to env config * update: update search params display * update: add notice of tps in doc * update: refactor config, metadata module * update: update readme * fix: fix metadata panel style * Fix/fix metadata panel style (#14) * update: refact config context route app index * update: adjust loading timing * update: update def * update: update notification and server list style * update: move lngs to env config * update: update search params display * update: add notice of tps in doc * update: refactor config, metadata module * fix: fix metadata panel style * fix: fix metadata panel height * Fix/fix metadata style (#15) * update: refact config context route app index * update: adjust loading timing * update: update def * update: update notification and server list style * update: move lngs to env config * update: update search params display * update: add notice of tps in doc * update: refactor config, metadata module * fix: fix metadata panel style * fix: fix metadata panel height * update: add badge * update: update appchain badge link * update: update appchain badge color
citahub · Aug 14, 2018 · 9a0a5dc · 9a0a5dc
1 parent 6e008c5
commit 9a0a5dc
Show file tree

Hide file tree

Showing 21 changed files with 303 additions and 308 deletions.
diff --git a/.env.example b/.env.example
@@ -1,4 +1,4 @@
 PUBLIC=localhost:8082
-CHAIN_SERVERS=http://121.196.200.225:1337,http://47.94.105.226:1337
+CHAIN_SERVER=http://47.96.231.19:4000
 APP_NAME=Microscope
 LNGS=zh,en,ja-JP,ko,de,it,fr
diff --git a/README.md b/README.md
@@ -1,4 +1,30 @@
-# Getting Started
+[![MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://github.com/cryptape/microscope)
+[![AppChain](https://img.shields.io/badge/made%20for-Nervos%20AppChain-blue.svg)](https://appchain.nervos.org/)
+
+# Overview
+
+Microscope provides an easy-to-use user interface to inspect every cell of every AppChain. Yes, every AppChain, due to the ability to switch target chain in Metadata Panel of the Microscope.
+
+# About Microscope
+
+Microscope is a blockchain explorer built with [React](https://reactjs.org/) for inspecting any AppChain. It supports searching block, transaction, account and invoking call method of smart contract. It also can work with [ReBirth](https://github.com/cryptape/re-birth) to display a list of blocks and transactions on specified conditions, or even analyzes AppChain working status.
+
+## Features
+
+- [x] **Open Source Development**: This project is welcome anyone to use and PR.
+- [x] **Multi-Chain Switch**: This project supports switch between any AppChain.
+- [x] **Smart Contract Support**: This project provides a user friendly interface to call methods of smart contracts.
+- [x] **User Customized**: This project supports a config page to specify which value should be displayed.
+- [x] **Progressive**: This project is under progressive development, which means it can work independently, and is able to work with [ReBirth](https://github.com/cryptape/re-birth), another project for AppChain.
+- [x] **Internationalized**: This project supports i18n, default to 中文 and Englisgh.
+
+## Getting Started
+
+- [Development](#development)
+
+- [Usage](#usage)
+
+# Development
 
 1.  clone the repo
 
@@ -21,10 +47,10 @@ yarn run dll
 4.  Add Config
 
 ```shell
-cp ./env.example ./env
+cp ./.env.example ./.env
 ```
 
-set env variables in `./env`
+set env variables in `./.env`
 
 ```
 PUBLIC=  # public content server address
@@ -46,7 +72,7 @@ yarn start
 yarn run build:prod
 ```
 
-# How to use
+# Usage
 
 ## Set appchain
 
@@ -62,7 +88,7 @@ Homeage includes `Latest 10 Blocks` and `Latest 10 Transactions`
 
 ### Block
 
-> NOTICE: This page only works with [agera_one](https://github.com/Keith-CY/agera_one), the server caching appchain.
+> NOTICE: This page only works with [ReBirth](https://github.com/cryptape/re-birth), the server caching appchain.
 
 **Block Page** show list of blocks, the table items can be specified in **Config Page**
 
@@ -76,7 +102,7 @@ Block Detail can be inspected via table link.
 
 ### Transaction
 
-> NOTICE: This page only works with [agera_one](https://github.com/Keith-CY/agera_one), the server caching appchain.
+> NOTICE: This page only works with [ReBirth](https://github.com/cryptape/re-birth), the server caching appchain.
 
 **Transaction Page** show list of transaction, the table items can be specified in **Config Page**
 
@@ -92,7 +118,7 @@ Account Detail can be inspected via `from` and `to`.
 
 ### Statisitcs
 
-> NOTICE: Partial diagrams works with [agera_one](https://github.com/Keith-CY/agera_one), the server caching appchain.
+> NOTICE: Partial diagrams works with [ReBirth](https://github.com/cryptape/ReBirth), the server caching appchain.
 
 **Statistics Page** show list of diagrams, the displaying items can be specified in **Config Page**
 
@@ -116,6 +142,8 @@ The **Metadata Panel** is used to check metadata of active chain, or inspect and
 
 ### Statistics Panel
 
+> NOTICE: this panel is hidden by default, corresponding code is at `src/containers/Header/index.tsx`
+
 On click of **TPS** the **Statistics Panel** will be called out.
 
 The **Statistics Panel** is used to inspect current status of active chain.

diff --git a/config/webpack.config.base.js b/config/webpack.config.base.js
@@ -42,7 +42,7 @@ module.exports = {
   plugins: [
     new webpack.DefinePlugin({
       'process.env': {
-        CHAIN_SERVERS: JSON.stringify(process.env.CHAIN_SERVERS),
+        CHAIN_SERVER: JSON.stringify(process.env.CHAIN_SERVER),
         APP_NAME: JSON.stringify(process.env.APP_NAME),
         LNGS: JSON.stringify(process.env.LNGS)
       },

diff --git a/package.json b/package.json
@@ -1,9 +1,9 @@
 {
-  "name": "nervos-web",
+  "name": "Microscope",
   "version": "0.1.0",
   "description": "NervOS Web",
   "main": "index.js",
-  "repository": "https://github.com/CITA-Toys/CITA-Toys-Wallet",
+  "repository": "https://github.com/cryptape/microscope",
   "author": "Keith <[email protected]>",
   "license": "MIT",
   "scripts": {

diff --git a/src/components/ErrorNotification/index.tsx b/src/components/ErrorNotification/index.tsx
@@ -15,7 +15,7 @@ export default ({ error, dismissError }) => (
     action={
       <React.Fragment>
         <a
-          href="https://cryptape.github.io/cita/usage-guide/rpc_error_code/index.html"
+          href="https://docs.nervos.org/cita/#/rpc_guide/rpc_error_code"
           target="_blank"
           rel="noopener noreferrer"
           className={texts.highlight}

diff --git a/src/components/MetadataPanel/index.tsx b/src/components/MetadataPanel/index.tsx
@@ -48,7 +48,7 @@ interface MetadataPanelProps {
   searchIp: string
   searchResult: Metadata
   handleInput: (key: string) => (e: any) => void
-  switchChain: (e) => void
+  switchChain: (ip?: string) => (e) => void
   handleKeyUp: (e: React.KeyboardEvent<HTMLInputElement>) => void
   t: (key: string) => string
   serverList: ServerList
@@ -80,7 +80,9 @@ const MetadataPanel: React.SFC<MetadataPanelProps> = ({
         value={searchIp}
         onKeyUp={handleKeyUp}
       />
-      <button onClick={switchChain}>{t('switch')}</button>
+      <button onClick={switchChain('')} disabled={!searchIp}>
+        {t('switch')}
+      </button>
     </div>
     {searchResult.chainId !== -1 ? (
       <MetadataRender metadata={searchResult} />
@@ -89,13 +91,20 @@ const MetadataPanel: React.SFC<MetadataPanelProps> = ({
         {serverList.map(({ serverName, serverIp }) => (
           <ListItem
             key={serverName}
-            onClick={() => switchChain(serverIp)}
+            onClick={switchChain(serverIp)}
             classes={{
               root: styles.listItem,
               gutters: styles.serverGutters
             }}
           >
-            <ListItemText primary={serverName} secondary={serverIp} />
+            <ListItemText
+              classes={{
+                primary: styles.serverPrimary,
+                secondary: styles.serverSecondary
+              }}
+              primary={serverName}
+              secondary={serverIp}
+            />
           </ListItem>
         ))}
       </List>

diff --git a/src/components/MetadataPanel/metadata.scss b/src/components/MetadataPanel/metadata.scss
@@ -2,12 +2,13 @@
 $sidebar-padding: 29px;
 .display {
   padding: 0 $sidebar-padding;
+  padding-top: 6px;
   color: $sidebar-text;
   text-transform: capitalize;
   .item {
     font-size: 1rem;
-    line-height: 2rem;
-    height: 2rem;
+    line-height: 2.2rem;
+    height: 2.2rem;
     span {
       text-transform: none;
     }
@@ -17,6 +18,7 @@ $sidebar-padding: 29px;
   }
   .validators {
     .box {
+      margin-top: 10px;
       padding: 10px 17px;
       border: 1px solid #ccc;
       border-radius: 4px;
@@ -41,8 +43,8 @@ $sidebar-padding: 29px;
   background-color: #f4f7ff;
   font-weight: bold;
   padding: 0 $sidebar-padding;
-  height: 42px;
-  line-height: 42px;
+  height: 36px;
+  line-height: 36px;
   font-weight: bolder;
   text-transform: capitalize;
 }
@@ -65,6 +67,12 @@ $sidebar-padding: 29px;
     padding: 6px 24px;
     margin-left: 10px;
     text-transform: capitalize;
+    cursor: pointer;
+    &:disabled {
+      background: #eee;
+      color: #aaa;
+      cursor: default;
+    }
   }
 }
 
@@ -76,6 +84,14 @@ $sidebar-padding: 29px;
 }
 
 .serverGutters {
-  padding-left: 28px;
-  padding-right: 28px;
+  padding-left: 28px !important;
+  padding-right: 28px !important;
+}
+
+.serverPrimary {
+  color: $heavyText !important;
+}
+
+.serverSecondary {
+  color: $plainText !important;
 }
diff --git a/src/components/TableWithSelector/index.tsx b/src/components/TableWithSelector/index.tsx
@@ -3,12 +3,7 @@ import { Link } from 'react-router-dom'
 import { translate } from 'react-i18next'
 import { Paper } from '@material-ui/core'
 import Pager from 'react-pager'
-import {
-  KeyboardArrowLeft,
-  KeyboardArrowRight,
-  SkipNext,
-  SkipPrevious,
-} from '@material-ui/icons'
+import { KeyboardArrowLeft, KeyboardArrowRight, SkipNext, SkipPrevious } from '@material-ui/icons'
 
 import Dialog from '../../containers/Dialog'
 import paramsFilter from '../../utils//paramsFilter'
@@ -20,7 +15,7 @@ const styles = require('./tableWithSelector.scss')
 export enum SelectorType {
   SINGLE,
   MULTIPLE,
-  RANGE,
+  RANGE
 }
 
 export interface TableHeaderWithSelector {
@@ -51,20 +46,18 @@ export interface TableWithSelectorProps {
   // showInOut?: boolean
   showInout?: boolean
   inset?: boolean
+  searchText?: string
 }
 
-class TableWithSelector extends React.Component<
-  TableWithSelectorProps & { t: (key: string) => string },
-  any
-  > {
+class TableWithSelector extends React.Component<TableWithSelectorProps & { t: (key: string) => string }, any> {
   state = {
     on: false,
-    selectorsValue: this.props.selectorsValue,
+    selectorsValue: this.props.selectorsValue
   }
 
   showDialog = (on: boolean = false) => (e?: any) => {
     this.setState(state => ({
-      on,
+      on
     }))
   }
 
@@ -74,11 +67,11 @@ class TableWithSelector extends React.Component<
       const { selectorsValue } = state
       const newSelectorsValue = {
         ...selectorsValue,
-        [selector]: e.target.value,
+        [selector]: e.target.value
       }
 
       return {
-        selectorsValue: newSelectorsValue,
+        selectorsValue: newSelectorsValue
       }
     })
   }
@@ -88,35 +81,16 @@ class TableWithSelector extends React.Component<
   }
   render () {
     const { on, selectorsValue } = this.state
-    const {
-      headers,
-      items,
-      selectors,
-      pageSize,
-      pageNo,
-      count,
-      t,
-      inset,
-    } = this.props
+    const { headers, items, selectors, pageSize, pageNo, count, t, inset, searchText } = this.props
     const total = Math.ceil(count / pageSize)
-    const activeParams = paramsFilter(this.props.selectorsValue)
+    // const activeParams = paramsFilter(this.props.selectorsValue)
     return (
-      <Paper
-        className={`${layout.center} ${inset ? styles.insetContainer : styles.container}`}
-        elevation={0}
-      >
-        <Dialog
-          on={!!on}
-          dialogTitle={t('advanced selector')}
-          onClose={this.showDialog(false)}
-          maxWidth="md"
-        >
+      <Paper className={`${layout.center} ${inset ? styles.insetContainer : styles.container}`} elevation={0}>
+        <Dialog on={!!on} dialogTitle={t('advanced selector')} onClose={this.showDialog(false)} maxWidth="md">
           <div className={styles.dialog}>
             <div className={styles.fields}>
               <div className={styles.titles}>
-                {selectors.map(selector => (
-                  <span className={styles.title}>{t(selector.text)}</span>
-                ))}
+                {selectors.map(selector => <span className={styles.title}>{t(selector.text)}</span>)}
               </div>
               <div className={styles.inputs}>
                 {selectors.map(
@@ -140,7 +114,7 @@ class TableWithSelector extends React.Component<
                           onChange={this.handleSelectorInput(selector.key)}
                         />
                       </div>
-                    ),
+                    )
                 )}
               </div>
             </div>
@@ -149,32 +123,19 @@ class TableWithSelector extends React.Component<
         </Dialog>
         <div className={styles.options}>
           <span>
-            {t('current params')}:{' '}
-            {Object.keys(activeParams)
-              .map(key => `${key}: ${activeParams[key]}`)
-              .join(', ')}
+            {t('current params')}: {searchText}
           </span>
-          <button onClick={this.showDialog(true)}>
-            {t('advanced selector')}
-          </button>
+          <button onClick={this.showDialog(true)}>{t('advanced selector')}</button>
         </div>
         <table className={styles.table}>
           <thead>
-            <tr>
-              {headers.map(header => (
-                <th key={header.key}>{t(header.text)}</th>
-              ))}
-            </tr>
+            <tr>{headers.map(header => <th key={header.key}>{t(header.text)}</th>)}</tr>
           </thead>
           <tbody>
             {items.map(item => (
               <tr key={item.key}>
                 {headers.map(header => (
-                  <td
-                    key={header.key}
-                    className={text.ellipsis}
-                    title={item[header.key]}
-                  >
+                  <td key={header.key} className={text.ellipsis} title={item[header.key]}>
                     {header.href === undefined ? (
                       item[header.key] === null ? (
                         '/'
@@ -204,7 +165,7 @@ class TableWithSelector extends React.Component<
             first: <SkipPrevious />,
             last: <SkipNext />,
             prev: <KeyboardArrowLeft />,
-            next: <KeyboardArrowRight />,
+            next: <KeyboardArrowRight />
           }}
           className={styles.pager}
           onPageChanged={this.props.handlePageChanged}