update: sort import from mui

.editorconfig

@@ -0,0 +1,32 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+
+# The JSON files contain newlines inconsistently
+[*.json]
+insert_final_newline = ignore
+
+# Minified JavaScript files shouldn't be changed
+[**.min.js]
+indent_style = ignore
+insert_final_newline = ignore
+
+# Makefiles always use tabs for indentation
+[Makefile]
+indent_style = tab
+
+# Batch files use tabs for indentation
+[*.bat]
+indent_style = tab
+
+[*.md]
+trim_trailing_whitespace = false
+

src/components/ERCPanel/index.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
-import List from '@material-ui/core/List'
-import Divider from '@material-ui/core/Divider'
+import { List, Divider } from '@material-ui/core'
 import { ABI, ABIElement } from '../../typings'
 
 const styles = require('./styles.scss')

src/components/ErrorNotification/index.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react'
-import Slide from '@material-ui/core/Slide'
-import IconButton from '@material-ui/core/IconButton'
-import Snackbar from '@material-ui/core/Snackbar'
-import CloseIcon from '@material-ui/icons/Close'
+import { Slide, IconButton, Snackbar } from '@material-ui/core'
+import { Close as CloseIcon } from '@material-ui/icons'
 
 const texts = require('../../styles/text.scss')
 

src/components/HeaderNavs/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { Link } from 'react-router-dom'
 import { translate } from 'react-i18next'
-import Typography from '@material-ui/core/Typography'
+import { Typography } from '@material-ui/core'
 
 const styles = require('../../containers/Header/styles.scss')
 

src/components/HomepageLists/BlockList.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react'
 import { Link } from 'react-router-dom'
 import { translate } from 'react-i18next'
-import List from '@material-ui/core/List'
-import ListItem from '@material-ui/core/ListItem'
-import ListItemText from '@material-ui/core/ListItemText'
+import { List, ListItem, ListItemText } from '@material-ui/core'
 // import Avatar from '@material-ui/core/Avatar'
 import { IBlock } from '../../typings/'
 

src/components/HomepageLists/TransactionList.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react'
 import { Link } from 'react-router-dom'
 import { translate } from 'react-i18next'
-import List from '@material-ui/core/List'
-import ListItem from '@material-ui/core/ListItem'
-import ListItemText from '@material-ui/core/ListItemText'
+import { List, ListItem, ListItemText } from '@material-ui/core'
 import { Transaction, TransactionFromServer } from '../../typings/'
 
 const texts = require('../../styles/text.scss')

src/components/HomepageLists/styles.scss

@@ -47,8 +47,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: center;
-  background-color: $primary-color;
+  align-items: center; // background-color: $primary-color;
   background-image: url('http://47.97.171.140:8082/images/BlockBg.png');
   background-size: cover;
   min-width: 100px;
@@ -66,6 +65,7 @@
 }
 
 .time {
+  font-size: 12px;
   color: $plainText;
   position: absolute;
   top: 25px;

src/components/LocalAccounts/index.tsx

@@ -1,24 +1,25 @@
 import * as React from 'react'
 import { Link } from 'react-router-dom'
 
-import ExpansionPanel from '@material-ui/core/ExpansionPanel'
-
-import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'
-import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'
-import ExpansionPanelActions from '@material-ui/core/ExpansionPanelActions'
-import Typography from '@material-ui/core/Typography'
-import List from '@material-ui/core/List'
-import ListItem from '@material-ui/core/ListItem'
-import ListItemText from '@material-ui/core/ListItemText'
-import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
-
-import IconButton from '@material-ui/core/IconButton'
-import TextField from '@material-ui/core/TextField'
-import Button from '@material-ui/core/Button'
-
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
-import AddIcon from '@material-ui/icons/Add'
-import DeleteIcon from '@material-ui/icons/Delete'
+import {
+  ExpansionPanel,
+  ExpansionPanelSummary,
+  ExpansionPanelDetails,
+  ExpansionPanelActions,
+  Typography,
+  List,
+  ListItem,
+  ListItemText,
+  ListItemSecondaryAction,
+  IconButton,
+  TextField,
+  Button,
+} from '@material-ui/core'
+import {
+  ExpandMore as ExpandMoreIcon,
+  Add as AddIcon,
+  Delete as DeleteIcon,
+} from '@material-ui/icons'
 
 const texts = require('../../styles/text.scss')
 const styles = require('./styles.scss')
@@ -45,7 +46,7 @@ export default props =>
               <ListItem key={item.addr}>
                 <ListItemText
                   classes={{
-                    root: styles.addrItem
+                    root: styles.addrItem,
                   }}
                   primary={item.name}
                   secondary={

src/components/MetadataPanel/index.tsx

@@ -12,6 +12,8 @@ const list = [
   { name: 'Website', value: 'website' },
   { name: 'Genesis Time', value: 'genesisTimestamp' },
   { name: 'Block Interval', value: 'blockInterval' },
+  { name: 'token name', value: 'tokenName' },
+  { name: 'token symbol', value: 'tokenSymbol' },
 ]
 
 const MetadataRender = translate('microscope')(
@@ -25,13 +27,15 @@ const MetadataRender = translate('microscope')(
       ))}
       <div className={styles.validators}>
         <div className={styles.item}>{t('validators')}:</div>
-        <div className={styles.box}>
-          {metadata.validators.map((validator, index) => (
-            <div key={validator} className={`${text.ellipsis} ${text.hash}`}>
-              {index + 1}: {validator}
-            </div>
-          ))}
-        </div>
+        {metadata.validators && metadata.validators.length ? (
+          <div className={styles.box}>
+            {metadata.validators.map((validator, index) => (
+              <div key={validator} className={`${text.ellipsis} ${text.hash}`}>
+                {index + 1}: {validator}
+              </div>
+            ))}
+          </div>
+        ) : null}
       </div>
     </div>
   ),

src/components/RightSidebar/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import SwipeableDrawer from '@material-ui/core/SwipeableDrawer'
+import { SwipeableDrawer } from '@material-ui/core'
 
 interface MetadataProps {
   on: boolean

src/components/SearchPanel/index.tsx

@@ -1,14 +1,9 @@
 import * as React from 'react'
 import { Link } from 'react-router-dom'
 import { translate } from 'react-i18next'
-import SearchIcon from '@material-ui/icons/Search'
+import { Search as SearchIcon } from '@material-ui/icons'
 import { withObservables } from '../../contexts/observables'
-import {
-  IContainerProps,
-  IBlock,
-  Transaction,
-  TransactionFromServer,
-} from '../../typings'
+import { IContainerProps, IBlock, Transaction } from '../../typings'
 import { initBlock, initTransaction } from '../../initValues'
 
 const styles = require('./styles.scss')

src/components/SettingPanel/index.tsx

@@ -1,18 +1,9 @@
 import * as React from 'react'
-import List from '@material-ui/core/List'
-import ListItem from '@material-ui/core/ListItem'
-import ListItemText from '@material-ui/core/ListItemText'
-import { Metadata } from '../../containers/Header'
+import { List, ListItem, ListItemText } from '@material-ui/core'
+import { Metadata } from '../../typings'
 
 const texts = require('../../styles/text')
 
-/* eslint-disable no-restricted-globals */
-// interface Settings {
-//   id: string
-//   name: string
-//   operator: string
-// }
-/* eslint-enable no-restricted-globals */
 export default ({ metadata }: { metadata: Metadata }) => (
   <List>
     <ListItem>
@@ -44,7 +35,7 @@ export default ({ metadata }: { metadata: Metadata }) => (
     <ListItem>
       <ListItemText
         primary={`Genesis Time: ${new Date(
-          +metadata.genesisTimestamp
+          +metadata.genesisTimestamp,
         ).toLocaleString()}`}
       />
     </ListItem>

src/components/SidebarNavs/index.tsx

@@ -1,15 +1,17 @@
 import * as React from 'react'
 import { Link } from 'react-router-dom'
 import { translate } from 'react-i18next'
-import Typography from '@material-ui/core/Typography'
-import Toolbar from '@material-ui/core/Toolbar'
-import Drawer from '@material-ui/core/Drawer'
-import List from '@material-ui/core/List'
-import ListItem from '@material-ui/core/ListItem'
-import ListItemText from '@material-ui/core/ListItemText'
-import IconButton from '@material-ui/core/IconButton'
-import MenuIcon from '@material-ui/icons/Menu'
-import AppBar from '@material-ui/core/AppBar'
+import {
+  Typography,
+  Toolbar,
+  Drawer,
+  List,
+  ListItem,
+  ListItemText,
+  IconButton,
+  AppBar,
+} from '@material-ui/core'
+import { Menu as MenuIcon } from '@material-ui/icons'
 
 const styles = require('../../containers/Header/styles.scss')
 

src/components/StaticCard/index.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
-import Card from '@material-ui/core/Card'
-import CardContent from '@material-ui/core/CardContent'
-import ArrowIcon from '@material-ui/icons/TrendingFlat'
+import { Card, CardContent } from '@material-ui/core'
+import { TrendingFlat as ArrowIcon } from '@material-ui/icons'
 
 const styles = require('./styles')
 

src/components/TableWithSelector/index.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react'
 import { Link } from 'react-router-dom'
 import { translate } from 'react-i18next'
-import Paper from '@material-ui/core/Paper'
+import { Paper } from '@material-ui/core'
 import Pager from 'react-pager'
-import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft'
-import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight'
-import SkipNext from '@material-ui/icons/SkipNext'
-import SkipPrevious from '@material-ui/icons/SkipPrevious'
+import {
+  KeyboardArrowLeft,
+  KeyboardArrowRight,
+  SkipNext,
+  SkipPrevious,
+} from '@material-ui/icons'
 
 import Dialog from '../../containers/Dialog'
 import paramsFilter from '../../utils//paramsFilter'

src/components/TransactionList/index.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react'
 import { Link } from 'react-router-dom'
-import List from '@material-ui/core/List'
-import ListItem from '@material-ui/core/ListItem'
-import ListItemText from '@material-ui/core/ListItemText'
+import { List, ListItem, ListItemText } from '@material-ui/core'
 import { Transaction } from '../../typings/'
 
 const texts = require('../../styles/text.scss')

src/containers/Account/index.tsx

@@ -2,14 +2,17 @@ import * as React from 'react'
 import * as web3Utils from 'web3-utils'
 import * as Web3Contract from 'web3-eth-contract'
 import * as web3Abi from 'web3-eth-abi'
-import Card from '@material-ui/core/Card'
-import CardHeader from '@material-ui/core/CardHeader'
-import CardContent from '@material-ui/core/CardContent'
-import Tabs from '@material-ui/core/Tabs'
-import Tab from '@material-ui/core/Tab'
-import Button from '@material-ui/core/Button'
-import Divider from '@material-ui/core/Divider'
-import LinearProgress from '@material-ui/core/LinearProgress'
+
+import {
+  Card,
+  CardHeader,
+  CardContent,
+  Tabs,
+  Tab,
+  Button,
+  Divider,
+  LinearProgress,
+} from '@material-ui/core'
 
 import ERCPanel from '../../components/ERCPanel'
 import TransactionTable from '../../containers/TransactionTable'

src/containers/Block/index.tsx

@@ -1,22 +1,12 @@
 import * as React from 'react'
 import { Link } from 'react-router-dom'
-import LinearProgress from '@material-ui/core/LinearProgress'
-import Paper from '@material-ui/core/Paper'
-import Card from '@material-ui/core/Card'
-import CardHeader from '@material-ui/core/CardHeader'
-import CardContent from '@material-ui/core/CardContent'
-import CardActions from '@material-ui/core/CardActions'
-import List from '@material-ui/core/List'
-import ListItem from '@material-ui/core/ListItem'
-import ListItemText from '@material-ui/core/ListItemText'
-import Snackbar from '@material-ui/core/Snackbar/'
-import Typography from '@material-ui/core/Typography'
-
-import ExpandMore from '@material-ui/icons/ExpandMore'
-import IconButton from '@material-ui/core/IconButton'
-import BackIcon from '@material-ui/icons/ArrowBack'
-import NextIcon from '@material-ui/icons/ArrowForward'
-import CloseIcon from '@material-ui/icons/Close'
+import {
+  LinearProgress,
+  Card,
+  CardContent,
+  List,
+  ListItem,
+} from '@material-ui/core'
 
 import { withConfig } from '../../contexts/config'
 import { withObservables } from '../../contexts/observables'

src/containers/BlockList/index.tsx

@@ -1,16 +1,17 @@
 import * as React from 'react'
-import Typography from '@material-ui/core/Typography'
-import List from '@material-ui/core/List'
-import ListItem from '@material-ui/core/ListItem'
-import ListItemText from '@material-ui/core/ListItemText'
-import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
-import Divider from '@material-ui/core/Divider'
-import Paper from '@material-ui/core/Paper'
-import Tooltip from '@material-ui/core/Tooltip'
-import ViewListIcon from '@material-ui/icons/ViewList'
-import LinearProgress from '@material-ui/core/LinearProgress'
-import TextField from '@material-ui/core/TextField'
-import { withObservables } from '../../contexts/observables'
+import {
+  List,
+  ListItem,
+  ListItemText,
+  ListItemSecondaryAction,
+  Divider,
+  Paper,
+  Tooltip,
+  LinearProgress,
+  TextField,
+} from '@material-ui/core'
+import { ViewList as ViewListIcon } from '@material-ui/icons'
+// import { withObservables } from '../../contexts/observables'
 import { IContainerProps, IBlock } from '../../typings/'
 
 const layouts = require('../../styles/layout')
@@ -119,4 +120,4 @@ class BlockList extends React.Component<IBlockListProps, IBlockListState> {
     )
   }
 }
-export default withObservables(BlockList)
+// export default withObservables(BlockList)