Bugfixes (#7)

* #4 Show block number diff in block time tab * #5 Fix average block time duplicated entry * Add .editorconfig file and format files
AcalaNetwork · Jan 4, 2022 · f51318f · f51318f · vercel · Jan 4, 2022
1 parent 98975bf
commit f51318f
Show file tree

Hide file tree

Showing 36 changed files with 717 additions and 1,004 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,11 @@
+root = true
+[*]
+indent_style=space
+indent_size=2
+tab_width=2
+end_of_line=lf
+charset=utf-8
+trim_trailing_whitespace=true
+max_line_length=120
+insert_final_newline=true
+quote_type=single
diff --git a/src/App.less b/src/App.less
@@ -1,19 +1,17 @@
-@import "~antd/dist/antd.less";
-@import "styles/variables.less";
-@import "styles/spacing.less";
+@import '~antd/dist/antd.less';
+@import 'styles/variables.less';
+@import 'styles/spacing.less';
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Work Sans", "Segoe UI",
-    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
-    "Helvetica Neue", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Work Sans', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
+    'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
 
 .app-layout {

diff --git a/src/App.test.tsx b/src/App.test.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import App from './App'
 
 test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
+  render(<App />)
+  const linkElement = screen.getByText(/learn react/i)
+  expect(linkElement).toBeInTheDocument()
+})
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,10 +1,10 @@
-import React from "react"
-import "./App.less"
-import { Provider } from "react-redux"
-import setupStore from "./store"
-import { PersistGate } from "redux-persist/integration/react"
-import ParachainUtilities from "./components/ParachainUtilities"
-import { ApiProvider } from "./components/utils/ApiProvider"
+import React from 'react'
+import './App.less'
+import { Provider } from 'react-redux'
+import setupStore from './store'
+import { PersistGate } from 'redux-persist/integration/react'
+import ParachainUtilities from './components/ParachainUtilities'
+import { ApiProvider } from './components/utils/ApiProvider'
 
 const { store, persistor } = setupStore()
 

diff --git a/src/components/AddressBook/AddAddressModal.tsx b/src/components/AddressBook/AddAddressModal.tsx
@@ -1,10 +1,10 @@
-import { Button, Form, Input, Modal, Row, Space, message } from "antd"
-import React, { useEffect } from "react"
-import { addAddress } from "../../store/actions/addressActions"
-import { useAppDispatch, useAppSelector } from "../../store/hooks"
-import { SubstrateAddress } from "../../types"
-import { decodeAddress } from "@polkadot/util-crypto/address"
-import { transformAddress } from "../../utils/UtilsFunctions"
+import { Button, Form, Input, Modal, Row, Space, message } from 'antd'
+import React, { useEffect } from 'react'
+import { addAddress } from '../../store/actions/addressActions'
+import { useAppDispatch, useAppSelector } from '../../store/hooks'
+import { SubstrateAddress } from '../../types'
+import { decodeAddress } from '@polkadot/util-crypto/address'
+import { transformAddress } from '../../utils/UtilsFunctions'
 
 type AddAddressModalProps = {
   showModal: boolean
@@ -14,7 +14,7 @@ type AddAddressModalProps = {
 function AddAddressModal(props: AddAddressModalProps): React.ReactElement {
   const [form] = Form.useForm()
   const dispatch = useAppDispatch()
-  const addresses = useAppSelector(state => state.address.list)
+  const addresses = useAppSelector((state) => state.address.list)
 
   const { showModal, setShowModal } = props
   useEffect(() => {
@@ -24,10 +24,8 @@ function AddAddressModal(props: AddAddressModalProps): React.ReactElement {
   const onFormSubmit = (address: SubstrateAddress) => {
     try {
       const decodedValue = decodeAddress(address.key)
-      const hexValue = "0x" + Buffer.from(decodedValue).toString("hex")
-      const checkExisting = addresses.find(
-        auxAddress => auxAddress.key === hexValue
-      )
+      const hexValue = '0x' + Buffer.from(decodedValue).toString('hex')
+      const checkExisting = addresses.find((auxAddress) => auxAddress.key === hexValue)
       if (checkExisting) {
         message.error(`Address already exists with name ${checkExisting.name}`)
         return
@@ -41,7 +39,7 @@ function AddAddressModal(props: AddAddressModalProps): React.ReactElement {
       )
       handleClose()
     } catch (err) {
-      message.error("Error: Invalid address")
+      message.error('Error: Invalid address')
     }
   }
 
@@ -51,54 +49,59 @@ function AddAddressModal(props: AddAddressModalProps): React.ReactElement {
 
   return (
     <Modal
-      className='add-address-modal'
+      className="add-address-modal"
       visible={showModal}
-      title='Add address'
-      okText='Add'
+      title="Add address"
+      okText="Add"
       onCancel={handleClose}
-      footer={null}>
+      footer={null}
+    >
       <Form
-        layout='vertical'
-        name='add-address-form'
+        layout="vertical"
+        name="add-address-form"
         form={form}
         initialValues={{
-          name: "",
-          value: "",
+          name: '',
+          value: '',
         }}
-        onFinish={onFormSubmit}>
+        onFinish={onFormSubmit}
+      >
         <Form.Item
-          label='Name'
-          name='name'
+          label="Name"
+          name="name"
           rules={[
             {
               required: true,
-              message: "Please enter a name",
+              message: 'Please enter a name',
             },
-          ]}>
-          <Input placeholder='Enter name...' />
+          ]}
+        >
+          <Input placeholder="Enter name..." />
         </Form.Item>
         <Form.Item
-          label='Address'
-          name='key'
+          label="Address"
+          name="key"
           rules={[
             {
               required: true,
-              message: "Please enter the address",
+              message: 'Please enter the address',
             },
-          ]}>
-          <Input placeholder='Enter address...' />
+          ]}
+        >
+          <Input placeholder="Enter address..." />
         </Form.Item>
-        <Form.Item className='mb-0'>
-          <Row justify='end'>
+        <Form.Item className="mb-0">
+          <Row justify="end">
             <Space>
               <Button
-                htmlType='button'
+                htmlType="button"
                 onClick={() => {
                   handleClose()
-                }}>
+                }}
+              >
                 Cancel
               </Button>
-              <Button type='primary' htmlType='submit'>
+              <Button type="primary" htmlType="submit">
                 Add
               </Button>
             </Space>

diff --git a/src/components/AddressBook/AddressBook.less b/src/components/AddressBook/AddressBook.less
@@ -1,3 +1,3 @@
 .address-book-container {
   padding: 25px;
-}
+}
diff --git a/src/components/AddressBook/AddressBook.tsx b/src/components/AddressBook/AddressBook.tsx
@@ -1,25 +1,19 @@
-import {
-  DeleteOutlined,
-  DotChartOutlined,
-  PlusOutlined,
-} from "@ant-design/icons"
-import { Button, Row, Space, Table } from "antd"
-import React, { useState } from "react"
-import { deleteAddress } from "../../store/actions/addressActions"
-import { useAppDispatch, useAppSelector } from "../../store/hooks"
-import { SubstrateAddress } from "../../types"
-import AddAddressModal from "./AddAddressModal"
-import "./AddressBook.less"
-import ViewFormatsModal from "./ViewFormatsModal"
+import { DeleteOutlined, DotChartOutlined, PlusOutlined } from '@ant-design/icons'
+import { Button, Row, Space, Table } from 'antd'
+import React, { useState } from 'react'
+import { deleteAddress } from '../../store/actions/addressActions'
+import { useAppDispatch, useAppSelector } from '../../store/hooks'
+import { SubstrateAddress } from '../../types'
+import AddAddressModal from './AddAddressModal'
+import './AddressBook.less'
+import ViewFormatsModal from './ViewFormatsModal'
 
 function AddressBook(): React.ReactElement {
   const [showAddAddressModal, setShowAddAddressModal] = useState(false)
   const [showViewFormatsModal, setShowViewFormatsModal] = useState(false)
-  const [selectedAddress, setSelectedAddress] = useState<
-    SubstrateAddress | undefined
-  >()
+  const [selectedAddress, setSelectedAddress] = useState<SubstrateAddress | undefined>()
   const dispatch = useAppDispatch()
-  const addresses = useAppSelector(state => state.address.list)
+  const addresses = useAppSelector((state) => state.address.list)
 
   const handleAddAddress = () => {
     setShowAddAddressModal(true)
@@ -37,19 +31,10 @@ function AddressBook(): React.ReactElement {
   const renderAddressActions = (row: SubstrateAddress) => {
     return (
       <Space>
-        <Button
-          type='default'
-          icon={<DotChartOutlined />}
-          size='small'
-          onClick={() => handleViewFormats(row)}>
+        <Button type="default" icon={<DotChartOutlined />} size="small" onClick={() => handleViewFormats(row)}>
           View Formats
         </Button>
-        <Button
-          type='default'
-          danger
-          icon={<DeleteOutlined />}
-          size='small'
-          onClick={() => handleDeleteAddress(row)}>
+        <Button type="default" danger icon={<DeleteOutlined />} size="small" onClick={() => handleDeleteAddress(row)}>
           Delete
         </Button>
       </Space>
@@ -58,37 +43,31 @@ function AddressBook(): React.ReactElement {
 
   const columns = [
     {
-      title: "Name",
-      dataIndex: "name",
-      key: "name",
+      title: 'Name',
+      dataIndex: 'name',
+      key: 'name',
     },
     {
-      title: "Public key of Address",
-      dataIndex: "key",
-      key: "key",
+      title: 'Public key of Address',
+      dataIndex: 'key',
+      key: 'key',
     },
     {
-      title: "Actions",
-      key: "action",
+      title: 'Actions',
+      key: 'action',
       render: renderAddressActions,
     },
   ]
 
   return (
-    <div className='address-book-container'>
-      <Row className='mb-3'>
-        <Button
-          type='primary'
-          onClick={handleAddAddress}
-          icon={<PlusOutlined />}>
+    <div className="address-book-container">
+      <Row className="mb-3">
+        <Button type="primary" onClick={handleAddAddress} icon={<PlusOutlined />}>
           Add address
         </Button>
       </Row>
-      <Table dataSource={addresses} columns={columns} rowKey='key' />
-      <AddAddressModal
-        showModal={showAddAddressModal}
-        setShowModal={setShowAddAddressModal}
-      />
+      <Table dataSource={addresses} columns={columns} rowKey="key" />
+      <AddAddressModal showModal={showAddAddressModal} setShowModal={setShowAddAddressModal} />
       <ViewFormatsModal
         selectedAddress={selectedAddress}
         showModal={showViewFormatsModal}